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;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
.break-lines {

View File

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

View File

@ -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 {

View File

@ -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>

View File

@ -39,17 +39,52 @@
(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>
<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>
<!-- State column -->
<div *pblNgridCellDef="'state'; row as motion" class="cell-slot fill">
<div class="chip-container">
<mat-basic-chip disableRipple [ngClass]="motion.stateCssColor">
{{ getStateLabel(motion) }}
</mat-basic-chip>
<!-- 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>
<!-- 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>

View File

@ -1,4 +1,5 @@
@import '~assets/styles/tables.scss';
@import '~app/site/motions/styles/motion-list-styles.scss';
.edit-form {
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 { 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));
}
/**

View File

@ -6,6 +6,7 @@
<os-list-view-table
class="block-list"
[repo]="repo"
[vScrollFixed]="64"
[showFilterBar]="true"
[columns]="tableColumnDefinition"
[sortService]="sortService"
@ -23,9 +24,12 @@
[routerLink]="block.id"
*ngIf="!isMultiSelect"
></a>
<div>
<mat-icon matTooltip="Internal" *ngIf="block.internal">lock</mat-icon>
{{ title }}
<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>

View File

@ -71,7 +71,8 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
},
{
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 {
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 {

View File

@ -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 {

View File

@ -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 {