Merge pull request #4439 from MaximilianKrambach/cssState

consolidate state css colors

client/src/app/site/motions/components/motion-block-detail/motion-block-detail.component.html

@@ -52,15 +52,7 @@
         <ng-container matColumnDef="state">
             <mat-header-cell *matHeaderCellDef> <span translate>State</span> </mat-header-cell>
             <mat-cell class="chip-container" *matCellDef="let motion">
-                <mat-basic-chip
-                    disableRipple
-                    [ngClass]="{
-                        green: motion.state.css_class === 'success',
-                        red: motion.state.css_class === 'danger',
-                        grey: motion.state.css_class === 'default',
-                        lightblue: motion.state.css_class === 'primary'
-                    }"
-                >
+                <mat-basic-chip disableRipple [ngClass]="motion.stateCssColor">
                     {{ getStateLabel(motion) }}
                 </mat-basic-chip>
             </mat-cell>

client/src/app/site/motions/components/motion-detail/motion-detail.component.html

@@ -231,7 +231,7 @@
                 </div>
             </mat-menu>
             <div *ngIf="perms.isAllowed('change_state', motion)">
-                <mat-basic-chip [matMenuTriggerFor]="stateMenu" [ngClass]="getStateCssColor()">
+                <mat-basic-chip [matMenuTriggerFor]="stateMenu" [ngClass]="motion.stateCssColor">
                     {{ stateLabel }}
                 </mat-basic-chip>
                 <div *ngIf="motion.state && motion.state.show_state_extension_field" class="spacer-top-10">
@@ -242,7 +242,7 @@
                 </div>
             </div>
             <div *ngIf="!perms.isAllowed('change_state', motion)">
-                <mat-basic-chip [ngClass]="getStateCssColor()"> {{ stateLabel }} </mat-basic-chip>
+                <mat-basic-chip [ngClass]="motion.stateCssColor"> {{ stateLabel }} </mat-basic-chip>
             </div>
         </div>
 

client/src/app/site/motions/components/motion-detail/motion-detail.component.ts

@@ -38,7 +38,7 @@ import { StatuteParagraphRepositoryService } from 'app/core/repositories/motions
 import { Tag } from 'app/shared/models/core/tag';
 import { UserRepositoryService } from 'app/core/repositories/users/user-repository.service';
 import { ViewMotionBlock } from '../../models/view-motion-block';
-import { ViewWorkflow, StateCssClassMapping } from '../../models/view-workflow';
+import { ViewWorkflow } from '../../models/view-workflow';
 import { ViewUser } from 'app/site/users/models/view-user';
 import { ViewCategory } from '../../models/view-category';
 import { ViewCreateMotion } from '../../models/view-create-motion';
@@ -1448,19 +1448,6 @@ export class MotionDetailComponent extends BaseViewComponent implements OnInit,
         }
     }
 
-    /**
-     * Translate the state's css class into a color
-     *
-     * @returns a string representing a color
-     */
-    public getStateCssColor(): string {
-        if (!this.motion.state) {
-            return '';
-        }
-
-        return StateCssClassMapping[this.motion.state.css_class] || '';
-    }
-
     public swipe(e: TouchEvent, when: string): void {
         const coord: [number, number] = [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
         const time = new Date().getTime();

client/src/app/site/motions/components/motion-list/motion-list.component.html

@@ -78,16 +78,7 @@
                     </div>
                     <!-- state line-->
                     <div class="ellipsis-overflow white">
-                        <mat-basic-chip
-                            *ngIf="motion.state"
-                            [ngClass]="{
-                                green: motion.state.css_class === 'success',
-                                red: motion.state.css_class === 'danger',
-                                grey: motion.state.css_class === 'default',
-                                lightblue: motion.state.css_class === 'primary'
-                            }"
-                            [disabled]="true"
-                        >
+                        <mat-basic-chip *ngIf="motion.state" [ngClass]="motion.stateCssColor" [disabled]="true">
                             {{ getStateLabel(motion) }}
                         </mat-basic-chip>
                     </div>

client/src/app/site/motions/components/workflow-detail/workflow-detail.component.ts

@@ -7,7 +7,7 @@ import { Title } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 
 import { BaseViewComponent } from 'app/site/base/base-view';
-import { ViewWorkflow } from '../../models/view-workflow';
+import { ViewWorkflow, StateCssClassMapping } from '../../models/view-workflow';
 import { WorkflowRepositoryService } from 'app/core/repositories/motions/workflow-repository.service';
 import { WorkflowState, MergeAmendment } from 'app/shared/models/motions/workflow-state';
 import { PromptService } from 'app/core/ui-services/prompt.service';
@@ -90,7 +90,7 @@ export class WorkflowDetailComponent extends BaseViewComponent implements OnInit
     /**
      * Determine label colors. Where they should come from is currently now know
      */
-    public labelColors = ['default', 'primary', 'success', 'danger'];
+    public labelColors = ['default', 'primary', 'success', 'danger', 'warning'];
 
     /**
      * Holds state permissions
@@ -385,17 +385,6 @@ export class WorkflowDetailComponent extends BaseViewComponent implements OnInit
      * @returns a string representing a color
      */
     public getStateCssColor(colorLabel: string): string {
-        switch (colorLabel) {
-            case 'success':
-                return 'green';
-            case 'danger':
-                return 'red';
-            case 'default':
-                return 'grey';
-            case 'primary':
-                return 'lightblue';
-            default:
-                return '';
-        }
+        return StateCssClassMapping[colorLabel] || '';
     }
 }

client/src/app/site/motions/models/view-motion.ts

@@ -11,7 +11,7 @@ import { ViewUser } from 'app/site/users/models/view-user';
 import { ViewTag } from 'app/site/tags/models/view-tag';
 import { ViewMediafile } from 'app/site/mediafiles/models/view-mediafile';
 import { ViewItem } from 'app/site/agenda/models/view-item';
-import { ViewWorkflow } from './view-workflow';
+import { ViewWorkflow, StateCssClassMapping } from './view-workflow';
 import { ViewCategory } from './view-category';
 import { ViewMotionBlock } from './view-motion-block';
 import { BaseViewModel } from 'app/site/base/base-view-model';
@@ -327,6 +327,15 @@ export class ViewMotion extends BaseAgendaViewModel implements Searchable {
         return this.personalNote && this.personalNote.note ? true : false;
     }
 
+    /**
+     * Translate the state's css class into a color
+     *
+     * @returns a string representing a color
+     */
+    public get stateCssColor(): string {
+        return StateCssClassMapping[this.state.css_class] || '';
+    }
+
     /**
      * This is set by the repository
      */

client/src/app/site/motions/models/view-workflow.ts

@@ -6,7 +6,8 @@ export const StateCssClassMapping = {
     success: 'green',
     danger: 'red',
     default: 'grey',
-    primary: 'lightblue'
+    primary: 'lightblue',
+    warning: 'yellow'
 };
 
 /**