Improved mobile views (Agenda list, motion block list/detail)

2019-10-07 15:10:59 +02:00 · 2019-10-07 15:10:59 +02:00 · 7aaad26b68
commit 7aaad26b68
parent f62b506dee
12 changed files with 92 additions and 41 deletions
--- a/client/src/app/shared/components/icon-container/icon-container.component.scss
+++ b/client/src/app/shared/components/icon-container/icon-container.component.scss
@ -39,6 +39,7 @@ os-icon-container {
        margin: auto 5px;
        text-overflow: ellipsis;
        overflow: hidden;
+        width: 100%;
    }

    .break-lines {
--- a/client/src/app/shared/components/list-view-table/list-view-table.component.ts
+++ b/client/src/app/shared/components/list-view-table/list-view-table.component.ts
@ -295,7 +295,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
            {
                prop: 'speaker',
                label: '',
-                width: this.columnMinWidth
+                width: '45px'
            },
            {
                prop: 'menu',
--- a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss
+++ b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss
@ -28,8 +28,8 @@ span.right-with-margin {

 .filter-count {
    font-style: italic;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-left: 24px;
+    margin-right: 5px;
 }

 .current-filters {
--- a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html
+++ b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html
@ -14,6 +14,7 @@

 <os-list-view-table
    [repo]="repo"
+    [vScrollFixed]="64"
    [allowProjector]="false"
    [showListOfSpeakers]="false"
    [columns]="tableColumnDefinition"
@ -34,7 +35,7 @@

    <!-- Amount -->
    <div *pblNgridCellDef="'amount'; row as category" class="cell-slot fill">
-        <span class="os-amount-chip">{{ category.motions.length }}</span>
+        <span class="os-amount-chip" matTooltip="{{ 'Motions' | translate }}">{{ category.motions.length }}</span>
    </div>
 </os-list-view-table>

--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html
@ -39,19 +39,54 @@
    (dataSourceChange)="onDataSourceChange($event)"
 >
    <!-- Title column -->
-    <div *pblNgridCellDef="'title'; row as motion; rowContext as rowContext" class="cell-slot fill motion-block-title">
+    <div *pblNgridCellDef="'title'; row as motion; rowContext as rowContext" class="cell-slot fill">
        <a class="detail-link" [routerLink]="motion.getDetailStateURL()" *ngIf="!isMultiSelect"></a>
-        <span>{{ motion.getTitle() }}</span>
+        <div class="column-title innerTable">
+            <div class="title-line ellipsis-overflow">
+                <!-- Is Favorite -->
+                <span *ngIf="motion.star" class="favorite-star">
+                    <mat-icon inline>star</mat-icon>
+                </span>
+
+                <!-- Has File -->
+                <span class="attached-files" *ngIf="motion.hasAttachments()">
+                    <mat-icon>attach_file</mat-icon>
+                </span>
+
+                <!-- The title -->
+                <span>
+                    <span *ngIf="motion.identifier">
+                        {{ motion.identifier }}
+                        <span>&middot;</span>
+                    </span>
+                    {{ motion.title }}
+                </span>
            </div>

-    <!-- State column -->
-    <div *pblNgridCellDef="'state'; row as motion" class="cell-slot fill">
-        <div class="chip-container">
-            <mat-basic-chip disableRipple [ngClass]="motion.stateCssColor">
+            <!-- Submitters -->
+            <div class="submitters-line ellipsis-overflow">
+                <span *ngIf="motion.submitters.length">
+                    <span translate>by</span>
+                    {{ motion.submitters }}
+                </span>
+
+                <span *ngIf="showSequential">
+                    <span *ngIf="motion.submitters.length">
+                        &middot;
+                    </span>
+                    <span translate>Sequential number</span>
+                    {{ motion.id }}
+                </span>
+            </div>
+
+            <!-- Workflow state -->
+            <div class="ellipsis-overflow white">
+                <mat-basic-chip *ngIf="motion.state" [ngClass]="motion.stateCssColor" [disabled]="true">
                    {{ getStateLabel(motion) }}
                </mat-basic-chip>
            </div>
        </div>
+    </div>

    <!-- Recommendation column -->
    <div *pblNgridCellDef="'recommendation'; row as motion" class="cell-slot fill">
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.scss
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.scss
@ -1,4 +1,5 @@
@import '~assets/styles/tables.scss';
+@import '~app/site/motions/styles/motion-list-styles.scss';

 .edit-form {
    overflow: hidden;
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts
@ -12,6 +12,7 @@ import { StorageService } from 'app/core/core-services/storage.service';
 import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service';
 import { MotionBlockRepositoryService } from 'app/core/repositories/motions/motion-block-repository.service';
 import { MotionRepositoryService } from 'app/core/repositories/motions/motion-repository.service';
+import { ConfigService } from 'app/core/ui-services/config.service';
 import { PromptService } from 'app/core/ui-services/prompt.service';
 import { ViewportService } from 'app/core/ui-services/viewport.service';
 import { ColumnRestriction } from 'app/shared/components/list-view-table/list-view-table.component';
@ -55,11 +56,6 @@ export class MotionBlockDetailComponent extends BaseListViewComponent<ViewMotion
            prop: 'title',
            width: 'auto'
        },
-        {
-            prop: 'state',
-            width: '30%',
-            minWidth: 60
-        },
        {
            prop: 'recommendation',
            label: this.translate.instant('Recommendation'),
@ -82,6 +78,11 @@ export class MotionBlockDetailComponent extends BaseListViewComponent<ViewMotion
        }
    ];

+    /**
+     * Value of the config variable `motions_show_sequential_numbers`
+     */
+    public showSequential: boolean;
+
    /**
     * The form to edit blocks
     */
@ -111,6 +112,7 @@ export class MotionBlockDetailComponent extends BaseListViewComponent<ViewMotion
        titleService: Title,
        protected translate: TranslateService,
        matSnackBar: MatSnackBar,
+        private configService: ConfigService,
        private route: ActivatedRoute,
        private router: Router,
        protected repo: MotionBlockRepositoryService,
@ -142,6 +144,10 @@ export class MotionBlockDetailComponent extends BaseListViewComponent<ViewMotion
                }
            })
        );
+        // load config variables
+        this.configService
+            .get<boolean>('motions_show_sequential_numbers')
+            .subscribe(show => (this.showSequential = show));
    }

    /**
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
@ -6,6 +6,7 @@
 <os-list-view-table
    class="block-list"
    [repo]="repo"
+    [vScrollFixed]="64"
    [showFilterBar]="true"
    [columns]="tableColumnDefinition"
    [sortService]="sortService"
@ -23,10 +24,13 @@
            [routerLink]="block.id"
            *ngIf="!isMultiSelect"
        ></a>
-        <div>
-            <mat-icon matTooltip="Internal" *ngIf="block.internal">lock</mat-icon>
+        <div class="innerTable">
+            <os-icon-container [noWrap]="true" [icon]="block.internal ? 'lock' : null" size="large" [matTooltip]="Internal">
+                <div class="ellipsis-overflow">
                    {{ title }}
                </div>
+            </os-icon-container>
+        </div>
    </div>

    <!-- Amount -->
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts
@ -71,7 +71,8 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
        },
        {
            prop: 'amount',
-            label: this.translate.instant('Motions')
+            label: this.translate.instant('Motions'),
+            width: '40px'
        }
    ];

--- 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
@ -26,23 +26,6 @@ $text-margin-top: 10px;

 .column-title {
    margin-top: $text-margin-top;
-
-    .title-line {
-        .attached-files {
-            .mat-icon {
-                display: inline-flex;
-                vertical-align: middle;
-                $icon-size: 16px;
-                font-size: $icon-size;
-                height: $icon-size;
-                width: $icon-size;
-            }
-        }
-
-        .favorite-star {
-            padding-right: 3px;
-        }
-    }
 }

 .column-state {
--- a/client/src/app/site/motions/styles/motion-list-styles.scss
+++ b/client/src/app/site/motions/styles/motion-list-styles.scss
@ -1,6 +1,21 @@
 .title-line {
    font-weight: 500;
    font-size: 16px;
+
+    .attached-files {
+        .mat-icon {
+            display: inline-flex;
+            vertical-align: middle;
+            $icon-size: 16px;
+            font-size: $icon-size;
+            height: $icon-size;
+            width: $icon-size;
+        }
+    }
+
+    .favorite-star {
+        padding-right: 3px;
+    }
 }

 .submitters-line {
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@ -655,6 +655,10 @@ button.mat-menu-item.selected {
    }
 }

+.cdk-column-menu {
+    padding: 0 16px 0 0 !important;
+}
+
 /** media queries */
@include desktop {
    .content-container {
@ -824,8 +828,8 @@ button.mat-menu-item.selected {

 .ellipsis-overflow {
    @extend .one-line;
-    padding-right: 3px;
-    margin-right: 3px;
+    padding-right: 0px;
+    margin-right: 0px;
 }

 .nowrap {