Merge pull request #4346 from emanuelschuetze/ui-improvements

UI improvements for motion detail/list view
This commit is contained in:
Emanuel Schütze 2019-02-14 21:57:06 +01:00 committed by GitHub
commit 4025e27e4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 86 additions and 83 deletions

View File

@ -853,7 +853,7 @@ export class MotionRepositoryService extends BaseRepository<ViewMotion, Motion>
/**
* Get the label for the motion's current state with the extension
* attached (if present). For cross-referencing other motions, `[motion:id]`
* attached (if available). For cross-referencing other motions, `[motion:id]`
* will replaced by the referenced motion's identifier (see {@link solveExtensionPlaceHolder})
*
* @param motion
@ -872,21 +872,19 @@ export class MotionRepositoryService extends BaseRepository<ViewMotion, Motion>
/**
* Get the label for the motion's current recommendation with the extension
* attached (if present)
* attached (if available)
*
* @param motion
* @returns the translated extension with the extension attached, 'not set'
* if no recommendation si set
* @returns the translated extension with the extension attached
*/
public getExtendedRecommendationLabel(motion: ViewMotion): string {
if (!motion.recommendation) {
return this.translate.instant('not set');
if (motion.recommendation) {
let rec = this.translate.instant(motion.recommendation.recommendation_label);
if (motion.recommendationExtension && motion.recommendation.show_recommendation_extension_field) {
rec += ' ' + this.solveExtensionPlaceHolder(motion.recommendationExtension);
}
return rec;
}
let rec = this.translate.instant(motion.recommendation.recommendation_label);
if (motion.recommendationExtension && motion.recommendation.show_recommendation_extension_field) {
rec += ' ' + this.solveExtensionPlaceHolder(motion.recommendationExtension);
}
return rec;
}
/**

View File

@ -24,8 +24,6 @@
.chip-container {
display: block;
height: 5em;
line-height: 5em;
}
.os-headed-listview-table {

View File

@ -184,7 +184,7 @@
<!-- support button -->
<button
type="button"
mat-raised-button
mat-stroked-button
color="primary"
(click)="support()"
*ngIf="perms.isAllowed('support', motion)"
@ -198,7 +198,7 @@
type="button"
*ngIf="perms.isAllowed('unsupport', motion)"
(click)="unsupport()"
mat-raised-button
mat-stroked-button
color="primary"
>
<mat-icon>thumb_down</mat-icon>
@ -208,10 +208,10 @@
<button type="button" *ngIf="motion.hasSupporters()" (click)="openSupportersDialog()" mat-button>
{{ motion.supporters.length }} {{ 'supporters' | translate }}
</button>
<p *ngIf="showSupporters">
<mat-chip-list *ngFor="let supporter of motion.supporters">
<mat-chip>{{ supporter.full_name }}</mat-chip>
</mat-chip-list>
<p *ngIf="showSupporters" class="supporters">
<span *ngFor="let supporter of motion.supporters; let last = last">
{{ supporter.full_name }}<span *ngIf="!last">, </span>
</span>
</p>
</div>
@ -251,7 +251,7 @@
<!-- Recommendation -->
<div *ngIf="recommender && !editMotion">
<h4>{{ recommender }}</h4>
<h4 *ngIf="perms.isAllowed('change_metadata', motion) || recommendationLabel">{{ recommender }}</h4>
<mat-menu #recommendationMenu="matMenu">
<button
*ngFor="let recommendation of motion.possibleRecommendations"
@ -272,7 +272,7 @@
</mat-menu>
<div *ngIf="perms.isAllowed('change_metadata', motion)">
<mat-basic-chip [matMenuTriggerFor]="recommendationMenu" class="bluegrey">
{{ recommendationLabel }}
{{ recommendationLabel || '' }}
</mat-basic-chip>
<div
*ngIf="motion.recommendation && motion.recommendation.show_recommendation_extension_field"
@ -300,10 +300,10 @@
</form>
</div>
</div>
<div *ngIf="!perms.isAllowed('change_metadata', motion)">
<div *ngIf="!perms.isAllowed('change_metadata', motion) && recommendationLabel">
<mat-basic-chip class="bluegrey"> {{ recommendationLabel }} </mat-basic-chip>
</div>
<button mat-button *ngIf="canFollowRecommendation()" (click)="onFollowRecButton()">
<button mat-stroked-button *ngIf="canFollowRecommendation()" (click)="onFollowRecButton()" class="spacer-top-10">
<span translate>Follow recommendation</span>
</button>
</div>
@ -311,7 +311,7 @@
<!-- Category -->
<!-- Disabled during "new motion" since changing has no effect -->
<div *ngIf="!editMotion && categoryObserver.value.length > 0">
<h4 translate>Category</h4>
<h4 *ngIf="perms.isAllowed('change_metadata', motion) || motion.category" translate>Category</h4>
<mat-menu #categoryMenu="matMenu">
<button
mat-menu-item
@ -327,10 +327,10 @@
[matMenuTriggerFor]="categoryMenu"
class="grey"
>
{{ motion.category ? motion.category : '' }}
{{ motion.category || '' }}
</mat-basic-chip>
<mat-basic-chip *ngIf="!perms.isAllowed('change_metadata', motion)" class="grey">
{{ motion.category ? motion.category : '' }}
<mat-basic-chip *ngIf="!perms.isAllowed('change_metadata', motion) && motion.category" class="grey">
{{ motion.category }}
</mat-basic-chip>
</div>
@ -373,7 +373,7 @@
<!-- Block -->
<div *ngIf="!editMotion && blockObserver.value.length > 0">
<h4 translate>Motion block</h4>
<h4 *ngIf="perms.isAllowed('change_metadata', motion) || motion.motion_block" translate>Motion block</h4>
<mat-menu #blockMenu="matMenu">
<button mat-menu-item *ngFor="let block of blockObserver.value" (click)="setBlock(block.id)">
<mat-icon *ngIf="motion.motion_block_id === block.id">check</mat-icon>
@ -385,10 +385,10 @@
[matMenuTriggerFor]="blockMenu"
class="grey"
>
{{ motion.motion_block ? motion.motion_block : '' }}
{{ motion.motion_block || '' }}
</mat-basic-chip>
<mat-basic-chip *ngIf="!perms.isAllowed('change_metadata', motion)" class="grey">
{{ motion.motion_block ? motion.motion_block : '' }}
<mat-basic-chip *ngIf="!perms.isAllowed('change_metadata', motion) && motion.motion_block" class="grey">
{{ motion.motion_block }}
</mat-basic-chip>
</div>

View File

@ -299,6 +299,11 @@ span {
.mat-chip-list-stacked {
.mat-chip {
margin: 4px 4px 4px 8px;
margin: 4px 4px 4px 4px;
}
}
.supporters {
font-size: 12px;
margin-top: 4px;
}

View File

@ -58,7 +58,7 @@
<mat-cell *matCellDef="let motion">
<div class="innerTable max-width">
<!-- title line -->
<div class="motion-list">
<div class="title-line ellipsis-overflow">
<!-- favorite icon -->
<span *ngIf="motion.star" class="favorite-star">
<mat-icon inline>star</mat-icon>
@ -73,31 +73,32 @@
</span>
</div>
<!-- submitters line -->
<div class="motion-list">
<span class="motion-list-from ellipsis-overflow" *ngIf="motion.submitters.length">
<span translate>by</span> {{ motion.submitters }}
</span>
<div class="submitters-line ellipsis-overflow" *ngIf="motion.submitters.length">
<span translate>by</span> {{ motion.submitters }}
</div>
<!-- state -->
<mat-basic-chip
*ngIf="motion.state"
[ngClass]="{
green: motion.state.css_class === 'success',
red: motion.state.css_class === 'danger',
grey: motion.state.css_class === 'default',
lightblue: motion.state.css_class === 'primary'
}"
[disabled]="true"
<!-- state line-->
<div class="ellipsis-overflow white">
<mat-basic-chip
*ngIf="motion.state"
[ngClass]="{
green: motion.state.css_class === 'success',
red: motion.state.css_class === 'danger',
grey: motion.state.css_class === 'default',
lightblue: motion.state.css_class === 'primary'
}"
[disabled]="true"
>
{{ getStateLabel(motion) }}
</mat-basic-chip>
</div>
<!-- recommendation line -->
<div *ngIf="motion.recommendation && motion.state.next_states_id.length > 0"
class="ellipsis-overflow white"
>
{{ getStateLabel(motion) }}
</mat-basic-chip>
<!-- recommendation -->
<span *ngIf="motion.recommendation && motion.state.next_states_id.length > 0">
<mat-basic-chip class="bluegrey" [disabled]="true">
{{ getRecommendationLabel(motion) }}
</mat-basic-chip>
</span>
</div>
</div>
</mat-cell>
</ng-container>
@ -106,12 +107,12 @@
<ng-container matColumnDef="state">
<mat-header-cell *matHeaderCellDef mat-sort-header>State</mat-header-cell>
<mat-cell *matCellDef="let motion">
<div class="innerTable">
<div class="small" *ngIf="motion.category">
<div class="innerTable state-column">
<div class="small ellipsis-overflow" *ngIf="motion.category">
<mat-icon>device_hub</mat-icon>
{{ motion.category }}
</div>
<div class="small" *ngIf="motion.motion_block">
<div class="small ellipsis-overflow" *ngIf="motion.motion_block">
<mat-icon>widgets</mat-icon>
{{ motion.motion_block.title }}
</div>

View File

@ -22,47 +22,40 @@
display: block;
padding-left: 10px;
.motion-list {
display: flex;
padding-right: 20px;
.title-line {
font-weight: 500;
font-size: 16px;
.motion-list-title,
.motion-list-from {
flex: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.motion-list-title {
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;
}
}
.motion-list-from {
.submitters-line {
color: rgba(0, 0, 0, 0.5);
font-size: 90%;
}
.attached-files {
.mat-icon {
display: inline-flex;
vertical-align: middle;
$icon-size: 16px;
font-size: $icon-size;
height: $icon-size;
width: $icon-size;
}
}
}
/** State */
.mat-column-state {
flex: 0 0 160px;
.state-column {
width: 160px;
}
mat-icon {
font-size: 150%;
}

View File

@ -193,10 +193,11 @@ mat-card {
/** size of the mat row */
mat-row {
height: 60px;
min-height: 60px;
}
mat-row.lg {
height: 90px;
height: 110px;
min-height: 90px;
}
mat-row:hover {
cursor: pointer;
@ -346,6 +347,7 @@ mat-expansion-panel {
border-radius: 5px !important;
padding: 4px 8px !important;
margin: 8px 8px 8px 0;
line-height: 2;
}
.mat-chip-list.user .mat-chip {
@ -645,4 +647,10 @@ button.mat-menu-item.selected {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 3px;
margin-right: 3px;
}
.white {
color: white;
}