Merge pull request #5106 from emanuelschuetze/mobile-views

Improved mobile views (Agenda list, motion block list)
This commit is contained in:
Sean 2019-11-11 14:06:02 +01:00 committed by GitHub
commit e3e50c1730
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 92 additions and 41 deletions

View File

@ -39,6 +39,7 @@ os-icon-container {
margin: auto 5px; margin: auto 5px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
width: 100%;
} }
.break-lines { .break-lines {

View File

@ -295,7 +295,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
{ {
prop: 'speaker', prop: 'speaker',
label: '', label: '',
width: this.columnMinWidth width: '45px'
}, },
{ {
prop: 'menu', prop: 'menu',

View File

@ -28,8 +28,8 @@ span.right-with-margin {
.filter-count { .filter-count {
font-style: italic; font-style: italic;
margin-left: 10px; margin-left: 24px;
margin-right: 10px; margin-right: 5px;
} }
.current-filters { .current-filters {

View File

@ -14,6 +14,7 @@
<os-list-view-table <os-list-view-table
[repo]="repo" [repo]="repo"
[vScrollFixed]="64"
[allowProjector]="false" [allowProjector]="false"
[showListOfSpeakers]="false" [showListOfSpeakers]="false"
[columns]="tableColumnDefinition" [columns]="tableColumnDefinition"
@ -34,7 +35,7 @@
<!-- Amount --> <!-- Amount -->
<div *pblNgridCellDef="'amount'; row as category" class="cell-slot fill"> <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> </div>
</os-list-view-table> </os-list-view-table>

View File

@ -39,17 +39,52 @@
(dataSourceChange)="onDataSourceChange($event)" (dataSourceChange)="onDataSourceChange($event)"
> >
<!-- Title column --> <!-- 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> <a class="detail-link" [routerLink]="motion.getDetailStateURL()" *ngIf="!isMultiSelect"></a>
<span>{{ motion.getTitle() }}</span> <div class="column-title innerTable">
</div> <div class="title-line ellipsis-overflow">
<!-- Is Favorite -->
<span *ngIf="motion.star" class="favorite-star">
<mat-icon inline>star</mat-icon>
</span>
<!-- State column --> <!-- Has File -->
<div *pblNgridCellDef="'state'; row as motion" class="cell-slot fill"> <span class="attached-files" *ngIf="motion.hasAttachments()">
<div class="chip-container"> <mat-icon>attach_file</mat-icon>
<mat-basic-chip disableRipple [ngClass]="motion.stateCssColor"> </span>
{{ getStateLabel(motion) }}
</mat-basic-chip> <!-- The title -->
<span>
<span *ngIf="motion.identifier">
{{ motion.identifier }}
<span>&middot;</span>
</span>
{{ motion.title }}
</span>
</div>
<!-- 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>
</div> </div>

View File

@ -1,4 +1,5 @@
@import '~assets/styles/tables.scss'; @import '~assets/styles/tables.scss';
@import '~app/site/motions/styles/motion-list-styles.scss';
.edit-form { .edit-form {
overflow: hidden; overflow: hidden;

View File

@ -12,6 +12,7 @@ import { StorageService } from 'app/core/core-services/storage.service';
import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service'; import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service';
import { MotionBlockRepositoryService } from 'app/core/repositories/motions/motion-block-repository.service'; import { MotionBlockRepositoryService } from 'app/core/repositories/motions/motion-block-repository.service';
import { MotionRepositoryService } from 'app/core/repositories/motions/motion-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 { PromptService } from 'app/core/ui-services/prompt.service';
import { ViewportService } from 'app/core/ui-services/viewport.service'; import { ViewportService } from 'app/core/ui-services/viewport.service';
import { ColumnRestriction } from 'app/shared/components/list-view-table/list-view-table.component'; 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', prop: 'title',
width: 'auto' width: 'auto'
}, },
{
prop: 'state',
width: '30%',
minWidth: 60
},
{ {
prop: 'recommendation', prop: 'recommendation',
label: this.translate.instant('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 * The form to edit blocks
*/ */
@ -111,6 +112,7 @@ export class MotionBlockDetailComponent extends BaseListViewComponent<ViewMotion
titleService: Title, titleService: Title,
protected translate: TranslateService, protected translate: TranslateService,
matSnackBar: MatSnackBar, matSnackBar: MatSnackBar,
private configService: ConfigService,
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
protected repo: MotionBlockRepositoryService, 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));
} }
/** /**

View File

@ -6,6 +6,7 @@
<os-list-view-table <os-list-view-table
class="block-list" class="block-list"
[repo]="repo" [repo]="repo"
[vScrollFixed]="64"
[showFilterBar]="true" [showFilterBar]="true"
[columns]="tableColumnDefinition" [columns]="tableColumnDefinition"
[sortService]="sortService" [sortService]="sortService"
@ -23,9 +24,12 @@
[routerLink]="block.id" [routerLink]="block.id"
*ngIf="!isMultiSelect" *ngIf="!isMultiSelect"
></a> ></a>
<div> <div class="innerTable">
<mat-icon matTooltip="Internal" *ngIf="block.internal">lock</mat-icon> <os-icon-container [noWrap]="true" [icon]="block.internal ? 'lock' : null" size="large" [matTooltip]="Internal">
{{ title }} <div class="ellipsis-overflow">
{{ title }}
</div>
</os-icon-container>
</div> </div>
</div> </div>

View File

@ -71,7 +71,8 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
}, },
{ {
prop: 'amount', prop: 'amount',
label: this.translate.instant('Motions') label: this.translate.instant('Motions'),
width: '40px'
} }
]; ];

View File

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

View File

@ -1,6 +1,21 @@
.title-line { .title-line {
font-weight: 500; font-weight: 500;
font-size: 16px; 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 { .submitters-line {

View File

@ -655,6 +655,10 @@ button.mat-menu-item.selected {
} }
} }
.cdk-column-menu {
padding: 0 16px 0 0 !important;
}
/** media queries */ /** media queries */
@include desktop { @include desktop {
.content-container { .content-container {
@ -824,8 +828,8 @@ button.mat-menu-item.selected {
.ellipsis-overflow { .ellipsis-overflow {
@extend .one-line; @extend .one-line;
padding-right: 3px; padding-right: 0px;
margin-right: 3px; margin-right: 0px;
} }
.nowrap { .nowrap {