From 9e4b90461d5018bbbdfbafa4b8e6c2c9a735d803 Mon Sep 17 00:00:00 2001 From: GabrielMeyer Date: Mon, 3 Jun 2019 12:32:58 +0200 Subject: [PATCH] Enhances the tile view - Adds subscriptions to the subscriptions-array from parent to clear them, after destroying the view - Removes filter and sort service, if the selected view is the tile-view Adds a second variable to hold the current selected view by user - Increases the size of the badge --- .../block-tile/block-tile.component.html | 4 +- .../block-tile/block-tile.component.scss | 94 +++++++++---------- .../sort-filter-bar.component.html | 11 ++- .../sort-filter-bar.component.ts | 26 +++++ .../motion-list/motion-list.component.html | 11 ++- .../motion-list/motion-list.component.scss | 13 +++ .../motion-list/motion-list.component.ts | 64 ++++++++----- .../styles/global-components-style.scss | 7 ++ client/src/styles.scss | 1 - 9 files changed, 146 insertions(+), 85 deletions(-) diff --git a/client/src/app/shared/components/block-tile/block-tile.component.html b/client/src/app/shared/components/block-tile/block-tile.component.html index 4f0f616de..25a4799b7 100644 --- a/client/src/app/shared/components/block-tile/block-tile.component.html +++ b/client/src/app/shared/components/block-tile/block-tile.component.html @@ -4,7 +4,7 @@ (click)="onClick($event)" >
-
+
@@ -18,7 +18,7 @@
-
+
diff --git a/client/src/app/shared/components/block-tile/block-tile.component.scss b/client/src/app/shared/components/block-tile/block-tile.component.scss index f6b206032..81a06190a 100644 --- a/client/src/app/shared/components/block-tile/block-tile.component.scss +++ b/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; + } } diff --git a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html index f2290c5d9..850d49747 100644 --- a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html +++ b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html @@ -1,9 +1,12 @@
-
+
{{ displayedCount }} of  {{ totalCount }}  · {{ extraItemInfo }}
+
+ {{ totalCount }} {{ itemsVerboseName }} +
Active filters: 
@@ -24,7 +27,7 @@ - - - diff --git a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.ts b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.ts index 6c4773aef..11b75b0a7 100644 --- a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.ts +++ b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.ts @@ -56,6 +56,12 @@ export class SortFilterBarComponent { @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(); @@ -71,6 +77,11 @@ export class SortFilterBarComponent { @ViewChild('sortBottomSheet') public sortBottomSheet: SortBottomSheetComponent; + /** + * 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 { } } + /** + * 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 */ diff --git a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html index 02c8fe674..1737ea6c5 100644 --- a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html +++ b/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)" > @@ -160,7 +162,14 @@ - +
diff --git a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.scss b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.scss index c10170818..f5ceb0779 100644 --- a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.scss +++ b/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; + } } } diff --git a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.ts b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.ts index 28acab5a4..d16cb29c9 100644 --- a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.ts +++ b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.ts @@ -127,6 +127,16 @@ export class MotionListComponent extends ListViewBaseComponent { super.setTitle('Motions'); this.initTable(); - const storedView = await this.storage.get('motionListView'); - this.configService - .get('motions_statutes_enabled') - .subscribe(enabled => (this.statutesEnabled = enabled)); - this.configService.get('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('motionListView'); + this.subscriptions.push( + this.configService + .get('motions_statutes_enabled') + .subscribe(enabled => (this.statutesEnabled = enabled)), + this.configService.get('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 1); }) ); } @@ -491,6 +504,7 @@ export class MotionListComponent extends ListViewBaseComponent