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,60 +1,50 @@
-@import '~@angular/material/theming';
+.block-tile {
+    padding: 0;
 
-@mixin os-block-tile-style($theme) {
-    $primary: map-get(
-        $map: $theme,
-        $key: primary
-    );
+    .block-node-container {
+        position: relative;
+        padding-bottom: 50%;
+        min-width: 30%;
 
-    .block-tile {
-        padding: 0;
+        .tile-text {
+            padding: 8px 16px;
 
-        .block-node-container {
-            position: relative;
-            padding-bottom: 50%;
-            min-width: 30%;
-
-            .tile-text {
-                padding: 8px 16px;
-                background-color: mat-color($primary, lighter);
-
-                table {
-                    height: 100%;
-                    width: 100%;
-                    text-align: center;
-                    font-size: 24px;
-                    font-weight: 500;
-                }
-            }
-        }
-
-        .tile-content-node-container {
-            position: relative;
-            width: 100%;
-            margin: 8px 16px !important;
-
-            .tile-content {
-                margin-bottom: 0;
+            table {
                 height: 100%;
-
-                .tile-content-title {
-                    font-size: 20px;
-                    font-weight: unset;
-                    margin-bottom: 0;
-                    overflow: hidden;
-                }
+                width: 100%;
+                text-align: center;
+                font-size: 24px;
+                font-weight: 500;
             }
-
-            .tile-content-extra {
-                padding-top: 8px;
-            }
-        }
-
-        &:hover {
-            cursor: pointer;
-
-            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;
         }
     }
+
+    .tile-content-node-container {
+        position: relative;
+        width: 100%;
+        margin: 8px 16px !important;
+
+        .tile-content {
+            margin-bottom: 0;
+            height: 100%;
+
+            .tile-content-title {
+                font-size: 20px;
+                font-weight: unset;
+                margin-bottom: 0;
+                overflow: hidden;
+            }
+        }
+
+        .tile-content-extra {
+            padding-top: 8px;
+        }
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        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.configService
-            .get<boolean>('motions_statutes_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';
-            } 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.storedView = await this.storage.get<string>('motionListView');
+        this.subscriptions.push(
+            this.configService
+                .get<boolean>('motions_statutes_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 = 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.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 */
 }