Merge pull request #4757 from GabrielInTheWorld/tile-layout

Enhances the tile view

client/src/app/shared/components/block-tile/block-tile.component.html

@@ -4,7 +4,7 @@
     (click)="onClick($event)"
     >
     <div [ngSwitch]="blockType" class="block-node-container">
-        <div *ngSwitchCase="'text'" class="tile-text stretch-to-fill-parent" [style.border-radius]="orientation === 'horizontal' ? '4px 0 0 4px' : '4px 4px 0 0'">
+        <div *ngSwitchCase="'text'" class="tile-text stretch-to-fill-parent tile-color" [style.border-radius]="orientation === 'horizontal' ? '4px 0 0 4px' : '4px 4px 0 0'">
             <table>
                 <tbody>
                     <tr>
@@ -18,7 +18,7 @@
         <div *ngSwitchCase="'image'">
             <img mat-card-image [src]="block" alt="" />
         </div>
-        <div *ngSwitchCase="'node'" class="tile-text stretch-to-fill-parent" [style.border-radius]="orientation === 'horizontal' ? '4px 0 0 4px' : '4px 4px 0 0'">
+        <div *ngSwitchCase="'node'" class="tile-text stretch-to-fill-parent tile-color" [style.border-radius]="orientation === 'horizontal' ? '4px 0 0 4px' : '4px 4px 0 0'">
             <ng-container
                 [ngTemplateOutlet]="blockNode"
                 [ngTemplateOutletContext]="data"></ng-container>

client/src/app/shared/components/block-tile/block-tile.component.scss

@@ -1,12 +1,4 @@
-@import '~@angular/material/theming';
+.block-tile {
-
-@mixin os-block-tile-style($theme) {
-    $primary: map-get(
-        $map: $theme,
-        $key: primary
-    );
-
-    .block-tile {
     padding: 0;
 
     .block-node-container {
@@ -16,7 +8,6 @@
 
         .tile-text {
             padding: 8px 16px;
-                background-color: mat-color($primary, lighter);
 
             table {
                 height: 100%;
@@ -56,5 +47,4 @@
         box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14),
             0px 1px 14px 0px rgba(0, 0, 0, 0.12) !important;
     }
-    }
 }

client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html

@@ -1,9 +1,12 @@
 <div class="custom-table-header flex-spaced on-transition-fade">
-    <div class="filter-count" *ngIf="filterService">
+    <div class="filter-count" *ngIf="filterService && showFilterSort">
         <span>{{ displayedCount }}&nbsp;</span><span translate>of</span>
         <span>&nbsp;{{ totalCount }}</span>
         <span *ngIf="extraItemInfo">&nbsp;·&nbsp;{{ extraItemInfo }}</span>
     </div>
+    <div class="filter-count" *ngIf="!showFilterSort && itemsVerboseName">
+        <span>{{ totalCount }}&nbsp;</span><span translate>{{ itemsVerboseName }}</span>
+    </div>
     <div class="current-filters" *ngIf="filterService && filterService.activeFilterCount">
         <div><span translate>Active filters</span>:&nbsp;</div>
         <div>
@@ -24,7 +27,7 @@
             <ng-content select=".extra-controls-slot"></ng-content>
         </span>
 
-        <button mat-button *ngIf="hasFilters" (click)="filterMenu.opened ? filterMenu.close() : filterMenu.open()">
+        <button mat-button *ngIf="hasFilters && showFilterSort" (click)="filterMenu.opened ? filterMenu.close() : filterMenu.open()">
             <span *ngIf="!filterService.activeFilterCount" class="upper" translate> Filter </span>
             <span *ngIf="filterService.activeFilterCount">
                 {{ filterService.activeFilterCount }}&nbsp;
@@ -32,10 +35,10 @@
                 <span *ngIf="filterService.activeFilterCount > 1" class="upper" translate>Filters</span>
             </span>
         </button>
-        <button mat-button *ngIf="vp.isMobile && hasSorting" (click)="openSortDropDown()">
+        <button mat-button *ngIf="vp.isMobile && hasSorting && showFilterSort" (click)="openSortDropDown()">
             <span class="upper" translate>Sort</span>
         </button>
-        <button mat-button *ngIf="!vp.isMobile && hasSorting" [matMenuTriggerFor]="menu">
+        <button mat-button *ngIf="!vp.isMobile && hasSorting && showFilterSort" [matMenuTriggerFor]="menu">
             <span class="upper" translate>Sort</span>
         </button>
         <mat-form-field *ngIf="isSearchBar">

client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.ts

@@ -56,6 +56,12 @@ export class SortFilterBarComponent<V extends BaseViewModel> {
     @Input()
     public extraItemInfo: string;
 
+    /**
+     * Optional string to tell the verbose name of the filtered items. This string is displayed, if no filter service is given.
+     */
+    @Input()
+    public itemsVerboseName: string;
+
     @Output()
     public searchFieldChange = new EventEmitter<string>();
 
@@ -71,6 +77,11 @@ export class SortFilterBarComponent<V extends BaseViewModel> {
     @ViewChild('sortBottomSheet')
     public sortBottomSheet: SortBottomSheetComponent<V>;
 
+    /**
+     * Optional boolean, whether the filter and sort service should be shown.
+     */
+    private _showFilterSort = true;
+
     /**
      * The 'opened/active' state of the fulltext filter input field
      */
@@ -88,6 +99,21 @@ export class SortFilterBarComponent<V extends BaseViewModel> {
         }
     }
 
+    /**
+     * Setter for `showFilterSort`
+     */
+    @Input()
+    public set showFilterSort(show: boolean) {
+        this._showFilterSort = show;
+    }
+
+    /**
+     * Getter for `showFilterSort`
+     */
+    public get showFilterSort(): boolean {
+        return this._showFilterSort;
+    }
+
     /**
      * Return the total count of potential filters
      */

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

@@ -21,6 +21,8 @@
         [filterCount]="filteredCount"
         [filterService]="filterService"
         [sortService]="sortService"
+        [showFilterSort]="selectedView === 'list'"
+        [itemsVerboseName]="motionsVerboseName"
         (searchFieldChange)="searchFilter($event)"
     >
         <mat-button-toggle-group *ngIf="isCategoryAvailable()" #group="matButtonToggleGroup" [value]="selectedView" (change)="onChangeView(group.value)" appearance="legacy" aria-label="Select view" class="extra-controls-slot select-view-wrapper">
@@ -160,7 +162,14 @@
         </span>
         <span *ngSwitchCase="'tiles'">
             <os-grid-layout>
-                <os-block-tile *ngFor="let tileCategory of tileCategories" (clicked)="changeToViewWithTileCategory(tileCategory)" [orientation]="'horizontal'" [only]="'title'" [blockType]="'node'" [data]="tileCategory" title="{{ tileCategory.name | translate }}">
+                <os-block-tile
+                    *ngFor="let tileCategory of tileCategories"
+                    (clicked)="changeToViewWithTileCategory(tileCategory)"
+                    [orientation]="'horizontal'"
+                    [only]="'title'"
+                    [blockType]="'node'"
+                    [data]="tileCategory"
+                    title="{{ tileCategory.name | translate }}">
                     <ng-container class="block-node">
                         <table matTooltip="{{ tileCategory.amountOfMotions }} {{ 'Motions' | translate }} – {{ tileCategory.name | translate }}">
                             <tbody>

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

@@ -85,6 +85,10 @@
 }
 
 os-grid-layout {
+    .color-select {
+        width: 100%;
+        padding: 0 8px;
+    }
     .tile-block-title {
         font-size: 36px;
 
@@ -93,5 +97,14 @@ os-grid-layout {
             width: 36px;
             height: 36px;
         }
+
+        .mat-badge-content {
+            right: -22px;
+            top: -11px;
+            font-size: 16px;
+            width: 30px;
+            height: 30px;
+            line-height: 30px;
+        }
     }
 }

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

@@ -127,6 +127,16 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion, Motio
      */
     public informationOfMotionsInTileCategories: { [id: number]: TileCategoryInformation } = {};
 
+    /**
+     * The verbose name for the motions.
+     */
+    public motionsVerboseName: string;
+
+    /**
+     * Store the view as member - if the user changes the view, this member is as well changed.
+     */
+    private storedView: string;
+
     /**
      * Constructor implements title and translation Module.
      *
@@ -190,31 +200,33 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion, Motio
     public async ngOnInit(): Promise<void> {
         super.setTitle('Motions');
         this.initTable();
-        const storedView = await this.storage.get<string>('motionListView');
+        this.storedView = await this.storage.get<string>('motionListView');
+        this.subscriptions.push(
             this.configService
                 .get<boolean>('motions_statutes_enabled')
-            .subscribe(enabled => (this.statutesEnabled = enabled));
+                .subscribe(enabled => (this.statutesEnabled = enabled)),
             this.configService.get<string>('motions_recommendations_by').subscribe(recommender => {
                 this.recommendationEnabled = !!recommender;
-        });
+            }),
             this.motionBlockRepo.getViewModelListObservable().subscribe(mBs => {
                 this.motionBlocks = mBs;
                 this.updateStateColumnVisibility();
-        });
+            }),
             this.categoryRepo.getViewModelListObservable().subscribe(cats => {
                 this.categories = cats;
                 if (cats.length > 0) {
-                this.selectedView = storedView || 'tiles';
+                    this.selectedView = this.storedView || 'tiles';
                 } else {
                     this.selectedView = 'list';
                 }
                 this.updateStateColumnVisibility();
-        });
+            }),
             this.tagRepo.getViewModelListObservable().subscribe(tags => {
                 this.tags = tags;
                 this.updateStateColumnVisibility();
-        });
+            }),
-        this.workflowRepo.getViewModelListObservable().subscribe(wfs => (this.workflows = wfs));
+            this.workflowRepo.getViewModelListObservable().subscribe(wfs => (this.workflows = wfs))
+        );
         this.setFulltextFilter();
     }
 
@@ -255,6 +267,7 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion, Motio
                 }
 
                 this.tileCategories = Object.values(this.informationOfMotionsInTileCategories);
+                this.motionsVerboseName = this.motionRepo.getVerboseName(motions.length > 1);
             })
         );
     }
@@ -491,6 +504,7 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion, Motio
      */
     public onChangeView(value: string): void {
         this.selectedView = value;
+        this.storedView = value;
         this.storage.set('motionListView', value);
         if (value === 'list') {
             this.initTable();

client/src/assets/styles/global-components-style.scss

@@ -57,6 +57,13 @@
         border-color: mat-color($background, selected-button);
     }
 
+    .tile-text {
+        color: mat-color($foreground, text);
+    }
+    .tile-color {
+        background-color: mat-color($background, selected-button);
+    }
+
     .main-nav-color {
         color: mat-color($foreground, secondary-text);
     }

client/src/styles.scss

@@ -32,7 +32,6 @@
     @include os-sorting-tree-style($theme);
     @include os-global-spinner-theme($theme);
     @include os-tile-style($theme);
-    @include os-block-tile-style($theme);
     /** More components are added here */
 }