ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #4346 from emanuelschuetze/ui-improvements

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/app/core/repositories/motions/motion-repository.service.ts
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 * 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}) * will replaced by the referenced motion's identifier (see {@link solveExtensionPlaceHolder})
* *
* @param motion * @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 * Get the label for the motion's current recommendation with the extension
* attached (if present) * attached (if available)
* *
* @param motion * @param motion
* @returns the translated extension with the extension attached, 'not set' * @returns the translated extension with the extension attached
* if no recommendation si set
*/ */
public getExtendedRecommendationLabel(motion: ViewMotion): string { public getExtendedRecommendationLabel(motion: ViewMotion): string {
if (!motion.recommendation) { if (motion.recommendation) {
return this.translate.instant('not set'); 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;
} }
/** /**

2
client/src/app/site/motions/components/motion-block-detail/motion-block-detail.component.scss
View File

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

36
client/src/app/site/motions/components/motion-detail/motion-detail.component.html
View File

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

7
client/src/app/site/motions/components/motion-detail/motion-detail.component.scss
View File

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

49
client/src/app/site/motions/components/motion-list/motion-list.component.html
View File

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

43
client/src/app/site/motions/components/motion-list/motion-list.component.scss
View File

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

12
client/src/styles.scss
View File

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