From 1f7ace6b4b2577a82834f23c3b8d1acad18973bf Mon Sep 17 00:00:00 2001 From: FinnStutzenstein Date: Mon, 27 May 2019 15:30:07 +0200 Subject: [PATCH] Partially scale and scroll the motion slide --- .../slide-container.component.scss | 2 +- .../slide-container.component.ts | 56 +++++++++++++++---- .../base-scale-scroll-slide-component.ts | 32 +++++++++++ .../motion/motion-slide.component.html | 9 ++- .../motion/motion-slide.component.scss | 28 +++++++++- .../motions/motion/motion-slide.component.ts | 42 +++++++++++++- 6 files changed, 153 insertions(+), 16 deletions(-) create mode 100644 client/src/app/slides/base-scale-scroll-slide-component.ts diff --git a/client/src/app/shared/components/slide-container/slide-container.component.scss b/client/src/app/shared/components/slide-container/slide-container.component.scss index cb29e038e..1e7cfb06b 100644 --- a/client/src/app/shared/components/slide-container/slide-container.component.scss +++ b/client/src/app/shared/components/slide-container/slide-container.component.scss @@ -7,7 +7,7 @@ position: absolute; left: 50px; top: 50px; - line-height: 1.5em; + line-height: 1.5; } } diff --git a/client/src/app/shared/components/slide-container/slide-container.component.ts b/client/src/app/shared/components/slide-container/slide-container.component.ts index 6128c411f..ab9436fa5 100644 --- a/client/src/app/shared/components/slide-container/slide-container.component.ts +++ b/client/src/app/shared/components/slide-container/slide-container.component.ts @@ -8,6 +8,7 @@ import { BaseSlideComponent } from 'app/slides/base-slide-component'; import { SlideData } from 'app/core/core-services/projector-data.service'; import { ProjectorElement } from 'app/shared/models/core/projector'; import { ViewProjector } from 'app/site/projector/models/view-projector'; +import { isBaseScaleScrollSlideComponent } from 'app/slides/base-scale-scroll-slide-component'; function hasError(obj: object): obj is { error: string } { return (<{ error: string }>obj).error !== undefined; @@ -28,6 +29,13 @@ export class SlideContainerComponent extends BaseComponent { private slide: ViewContainerRef; private slideRef: ComponentRef>; + /** + * A slide is autonomic, if it takes care of scaling and scrolling by itself. + */ + private get slideIsAutonomic(): boolean { + return !!this.slideRef && !!this.slideRef.instance && isBaseScaleScrollSlideComponent(this.slideRef.instance); + } + /** * The data for this slide. Will be accessed below. */ @@ -59,8 +67,9 @@ export class SlideContainerComponent extends BaseComponent { if (this.previousSlideName !== slideData.element.name) { this.slideChanged(slideData.element); this.previousSlideName = slideData.element.name; + } else { + this.setDataForComponent(); } - this.setDataForComponent(); } public get slideData(): SlideData { @@ -77,6 +86,7 @@ export class SlideContainerComponent extends BaseComponent { this._projector = projector; this.setProjectorForComponent(); this.updateScroll(); + this.updateScale(); } public get projector(): ViewProjector { @@ -101,18 +111,19 @@ export class SlideContainerComponent extends BaseComponent { return this._scroll; } + private _scale: number; + /** * Update the slideStyle, when the scale changes. */ @Input() public set scale(value: number) { - if (this.slideOptions.scaleable) { - value *= 10; - value += 100; - this.slideStyle['font-size'] = `${value}%`; - } else { - this.slideStyle['font-size'] = '100%'; - } + this._scale = value; + this.updateScale(); + } + + public get scale(): number { + return this._scale; } /** @@ -133,10 +144,11 @@ export class SlideContainerComponent extends BaseComponent { } /** - * Updates the 'margin-top' attribute in the slide styles. + * Updates the 'margin-top' attribute in the slide styles. Propages the sroll to + * autonomic slides. */ private updateScroll(): void { - if (this.slideOptions.scrollable) { + if (this.slideOptions.scrollable && !this.slideIsAutonomic) { let value = this.scroll; value *= -100; if (this.projector.show_header_footer) { @@ -145,6 +157,28 @@ export class SlideContainerComponent extends BaseComponent { this.slideStyle['margin-top'] = `${value}px`; } else { this.slideStyle['margin-top'] = '0px'; + + if (this.slideIsAutonomic && isBaseScaleScrollSlideComponent(this.slideRef.instance)) { + this.slideRef.instance.scroll = this.scroll; + } + } + } + + /** + * Updates the 'font-size' style attributes. Propagates the scale to autonomic slides. + */ + private updateScale(): void { + if (this.slideOptions.scaleable && !this.slideIsAutonomic) { + let scale = this.scale; + scale *= 10; + scale += 100; + this.slideStyle['font-size'] = `${scale}%`; + } else { + this.slideStyle['font-size'] = '100%'; + + if (this.slideIsAutonomic && isBaseScaleScrollSlideComponent(this.slideRef.instance)) { + this.slideRef.instance.scale = this.scale; + } } } @@ -170,6 +204,8 @@ export class SlideContainerComponent extends BaseComponent { this.slideRef = this.slide.createComponent(slideFactory); this.setDataForComponent(); this.setProjectorForComponent(); + this.updateScale(); + this.updateScroll(); }); } diff --git a/client/src/app/slides/base-scale-scroll-slide-component.ts b/client/src/app/slides/base-scale-scroll-slide-component.ts new file mode 100644 index 000000000..2903c43ba --- /dev/null +++ b/client/src/app/slides/base-scale-scroll-slide-component.ts @@ -0,0 +1,32 @@ +import { Input } from '@angular/core'; + +import { BaseSlideComponent } from './base-slide-component'; + +export function isBaseScaleScrollSlideComponent(obj: any): obj is IBaseScaleScrollSlideComponent { + return !!obj && obj.scroll !== undefined && obj.scale !== undefined; +} + +/** + * A description of BaseScaleScrollSlideComponent. Usefull for "multi"-inheritance. + */ +export interface IBaseScaleScrollSlideComponent extends BaseSlideComponent { + scroll: number; + scale: number; +} + +/** + * A base slide component, which is autonomic with respect to scaling and srolling, meaning + * that the slide itself (and not the slide container) will take care of this. + */ +export abstract class BaseScaleScrollSlideComponent extends BaseSlideComponent + implements IBaseScaleScrollSlideComponent { + @Input() + public scroll: number; + + @Input() + public scale: number; + + public constructor() { + super(); + } +} diff --git a/client/src/app/slides/motions/motion/motion-slide.component.html b/client/src/app/slides/motions/motion/motion-slide.component.html index 6d66849a2..4b505878b 100644 --- a/client/src/app/slides/motions/motion/motion-slide.component.html +++ b/client/src/app/slides/motions/motion/motion-slide.component.html @@ -1,5 +1,5 @@
- -
+
+

{{ data.data.title }}

Motion {{ data.data.identifier }}

+
+
+
{{ preamble | translate }} @@ -73,4 +77,5 @@
+
diff --git a/client/src/app/slides/motions/motion/motion-slide.component.scss b/client/src/app/slides/motions/motion/motion-slide.component.scss index f286ff081..eaf6ec233 100644 --- a/client/src/app/slides/motions/motion/motion-slide.component.scss +++ b/client/src/app/slides/motions/motion/motion-slide.component.scss @@ -4,10 +4,22 @@ opacity: 0.5; } +/** + * Override some special values which will be set dynamically + */ +.slidetitle { + /* Original: 40px: This is done in the `scroll()` method, so the + * motion text will be cut (to be taken by word) on the grey line */ + margin-bottom: 0px !important; + + h1 { + margin: 0 !important; + } +} + #sidebox { width: 260px; right: 0; - margin-top: 94px; background: #d3d3d3; border-radius: 7px 0 0 7px; padding: 3px 7px 10px 10px; @@ -21,13 +33,25 @@ } } +.spacer { + min-width: 1px; +} + +#text-wrapper { + overflow: hidden; +} + +#text { + position: relative; +} + /* override the absolute position of outside linenumbers on motion slide */ :host ::ng-deep .motion-text { &.line-numbers-outside { .os-line-number { &:after { top: 19px; - font-size: 13px; + font-size: 15px; } } } diff --git a/client/src/app/slides/motions/motion/motion-slide.component.ts b/client/src/app/slides/motions/motion/motion-slide.component.ts index 8873d6f29..623c2ba5c 100644 --- a/client/src/app/slides/motions/motion/motion-slide.component.ts +++ b/client/src/app/slides/motions/motion/motion-slide.component.ts @@ -13,13 +13,15 @@ import { SlideData } from '../../../core/core-services/projector-data.service'; import { MotionSlideObjAmendmentParagraph } from './motion-slide-obj-amendment-paragraph'; import { BaseMotionSlideComponent } from '../base/base-motion-slide'; import { MotionRepositoryService } from 'app/core/repositories/motions/motion-repository.service'; +import { IBaseScaleScrollSlideComponent } from 'app/slides/base-scale-scroll-slide-component'; @Component({ selector: 'os-motion-slide', templateUrl: './motion-slide.component.html', styleUrls: ['./motion-slide.component.scss'] }) -export class MotionSlideComponent extends BaseMotionSlideComponent { +export class MotionSlideComponent extends BaseMotionSlideComponent + implements IBaseScaleScrollSlideComponent { /** * Indicates the LineNumberingMode Mode. */ @@ -61,6 +63,8 @@ export class MotionSlideComponent extends BaseMotionSlideComponent