diff --git a/client/src/app/slides/motions/motion-block/motion-block-slide-data.ts b/client/src/app/slides/motions/motion-block/motion-block-slide-data.ts index fae84b7c6..86cd4fcc3 100644 --- a/client/src/app/slides/motions/motion-block/motion-block-slide-data.ts +++ b/client/src/app/slides/motions/motion-block/motion-block-slide-data.ts @@ -7,6 +7,9 @@ export interface MotionBlockSlideMotionRepresentation extends MotionTitleInforma css_class: string; }; recommendation_extension?: string; + + // This property will be calculated and saved here. + recommendationLabel?: string; } export interface MotionBlockSlideData { diff --git a/client/src/app/slides/motions/motion-block/motion-block-slide.component.html b/client/src/app/slides/motions/motion-block/motion-block-slide.component.html index 5f163845c..2146d989a 100644 --- a/client/src/app/slides/motions/motion-block/motion-block-slide.component.html +++ b/client/src/app/slides/motions/motion-block/motion-block-slide.component.html @@ -4,17 +4,24 @@

Motion block – {{ data.data.motions.length }} motions

+
+ + {{ commonRecommendation }} + +
+ diff --git a/client/src/app/slides/motions/motion-block/motion-block-slide.component.scss b/client/src/app/slides/motions/motion-block/motion-block-slide.component.scss index bcc603f4c..f8076e946 100644 --- a/client/src/app/slides/motions/motion-block/motion-block-slide.component.scss +++ b/client/src/app/slides/motions/motion-block/motion-block-slide.component.scss @@ -6,4 +6,9 @@ table { td { min-width: 50%; + vertical-align: top; +} + +.mat-basic-chip.large { + font-size: 100%; } diff --git a/client/src/app/slides/motions/motion-block/motion-block-slide.component.ts b/client/src/app/slides/motions/motion-block/motion-block-slide.component.ts index c2168abed..dd1408c29 100644 --- a/client/src/app/slides/motions/motion-block/motion-block-slide.component.ts +++ b/client/src/app/slides/motions/motion-block/motion-block-slide.component.ts @@ -8,10 +8,20 @@ import { StateCssClassMapping } from 'app/site/motions/models/view-workflow'; import { BaseMotionSlideComponent } from '../base/base-motion-slide'; import { SlideData } from 'app/core/core-services/projector-data.service'; -/** - * The row threshold to switch from one to a two column layout - */ -const TWO_COLUMNS_THRESHOLD = 8; +// Layout: +// 1) Long layout: Motion title is shown and the motions are +// displayed in two lines: title and recommendation. This +// mode is used until #motions<=SHORT_LAYOUT_THRESHOLD. There +// are ROWS_PER_COLUMN_SHORT rows per column, is MAX_COLUMNS +// is reached. If so, thhe rows per columns will be ignored. +// 2) Short Layout: Just motion identifier and the recommendation +// in one line. This mode is used if #motions>SHORT_LAYOUT_THRESHOLD. +// The same as in the log layout holds, just with ROWS_PER_COLUMN_SHORT. + +const ROWS_PER_COLUMN_SHORT = 8; +const ROWS_PER_COLUMN_LONG = 16; +const SHORT_LAYOUT_THRESHOLD = 8; +const MAX_COLUMNS = 3; @Component({ selector: 'os-motion-block-slide', @@ -38,6 +48,36 @@ export class MotionBlockSlideComponent extends BaseMotionSlideComponent { + if (motion.recommendation) { + let recommendation = this.translate.instant(motion.recommendation.name); + if (motion.recommendation_extension) { + recommendation += + ' ' + + this.replaceReferencedMotions( + motion.recommendation_extension, + data.data.referenced_motions + ); + } + motion.recommendationLabel = recommendation; + } else { + motion.recommendationLabel = null; + } + }); + + // Check, if all motions have the same recommendation label + if (data.data.motions.length > 0) { + const recommendationLabel = data.data.motions[0].recommendationLabel; + if (data.data.motions.every(motion => motion.recommendationLabel === recommendationLabel)) { + this.commonRecommendation = recommendationLabel; + } + } else { + this.commonRecommendation = null; + } + } else { + this.commonRecommendation = null; } this._data = data; } @@ -46,6 +86,11 @@ export class MotionBlockSlideComponent extends BaseMotionSlideComponent SHORT_LAYOUT_THRESHOLD; + } + /** * @returns the amount of rows to display. */ public get rows(): number { - let rows = this.motionsAmount; - if (this.motionsAmount > TWO_COLUMNS_THRESHOLD) { - rows = Math.ceil(rows / 2); - } - return rows; + return Math.ceil(this.motionsAmount / this.columns); } /** - * @returns an aray with [1, ..., this.rows] + * @returns an aray with [0, ..., this.rows-1] */ public get rowsArray(): number[] { - const indices = []; - const rows = this.rows; - for (let i = 0; i < rows; i++) { - indices.push(i); + return this.makeIndicesArray(this.rows); + } + + public get columns(): number { + const rowsPerColumn = this.shortDisplayStyle ? ROWS_PER_COLUMN_SHORT : ROWS_PER_COLUMN_LONG; + const columns = Math.ceil(this.motionsAmount / rowsPerColumn); + if (columns > MAX_COLUMNS) { + return MAX_COLUMNS; + } else { + return columns; } - return indices; } /** - * @returns [0] or [0, 1] if one or two columns are used + * @returns an aray with [0, ..., this.columns-1] */ public get columnsArray(): number[] { - if (this.motionsAmount > TWO_COLUMNS_THRESHOLD) { - return [0, 1]; - } else { - return [0]; - } + return this.makeIndicesArray(this.columns); } public constructor(translate: TranslateService, motionRepo: MotionRepositoryService) { @@ -96,6 +142,17 @@ export class MotionBlockSlideComponent extends BaseMotionSlideComponent
-
+
{{ getMotionTitle(i, j) }} -
-
- - {{ getRecommendationLabel(i, j) }} - +
+ + + {{ getMotion(i, j).recommendationLabel }} + +