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

Merge pull request #4781 from tsiegleauq/faster-animations

Browse Source 
Speed up animations.
This commit is contained in:
Emanuel Schütze 2019-06-17 12:25:59 +02:00 committed by GitHub
commit cab8dba016
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 134 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/app/shared/animations.ts
View File

@ -3,7 +3,7 @@ import { trigger, animate, transition, style, query, stagger, group } from '@ang
const fadeVanish = [ const fadeVanish = [
style({ transform: 'translateY(0%)', opacity: 1 }), style({ transform: 'translateY(0%)', opacity: 1 }),
animate( animate(
'200ms ease-in-out', '150ms ease-in-out',
style({ style({
transform: 'translateY(0%)', transform: 'translateY(0%)',
opacity: 0 opacity: 0
@ -11,16 +11,17 @@ const fadeVanish = [
) )
]; ];
const fadeAppear = [ // Requires more generic way to trigger parallel animations
style({ transform: 'translateY(0%)', opacity: 0 }), // const fadeAppear = [
animate('200ms ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 })) // style({ transform: 'translateY(0%)', opacity: 0 }),
]; // animate('200ms ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))
// ];
const justEnterDom = [style({ opacity: 0 })]; const justEnterDom = [style({ opacity: 0 })];
const fadeMoveIn = [ const fadeMoveIn = [
style({ transform: 'translateY(30px)' }), style({ transform: 'translateY(30px)' }),
animate('250ms ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 })) animate('150ms ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 }))
]; ];
export const pageTransition = trigger('pageTransition', [ export const pageTransition = trigger('pageTransition', [
@ -30,28 +31,19 @@ export const pageTransition = trigger('pageTransition', [
/** keep the dom clean - let all items "just" enter */ /** keep the dom clean - let all items "just" enter */
query(':enter mat-card', justEnterDom, { optional: true }), query(':enter mat-card', justEnterDom, { optional: true }),
query(':enter .on-transition-fade', justEnterDom, { optional: true }),
query(':enter mat-row', justEnterDom, { optional: true }), query(':enter mat-row', justEnterDom, { optional: true }),
query(':enter mat-expansion-panel', justEnterDom, { optional: true }),
/** parallel vanishing */ /** parallel vanishing */
group([ group([
query(':leave .on-transition-fade', fadeVanish, { optional: true }),
query(':leave mat-card', fadeVanish, { optional: true }), query(':leave mat-card', fadeVanish, { optional: true }),
query(':leave mat-row', fadeVanish, { optional: true }), query(':leave mat-row', fadeVanish, { optional: true })
query(':leave mat-expansion-panel', fadeVanish, { optional: true })
]), ]),
/** parallel appearing */ /** parallel appearing */
group([ group([
/** animate fade in for the selected components */
query(':enter .on-transition-fade', fadeAppear, { optional: true }),
/** Staggered appearing = "one after another" */ /** Staggered appearing = "one after another" */
query(':enter mat-card', stagger(50, fadeMoveIn), { optional: true }), query(':enter mat-card', stagger(50, fadeMoveIn), { optional: true }),
query(':enter mat-row', stagger(30, fadeMoveIn), { optional: true }) query(':enter mat-row', stagger(30, fadeMoveIn), { optional: true })
// disabled for now. They somehow appear expanded which looks strange
// query(':enter mat-expansion-panel', stagger(30, fadeMoveIn), { optional: true })
]) ])
]) ])
]); ]);

30
client/src/app/shared/components/head-bar/head-bar.component.html
View File

@ -1,37 +1,27 @@
<mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" *ngIf="!vp.isMobile"> <mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" *ngIf="!vp.isMobile">
<!-- Nav menu --> <!-- Nav menu -->
<button mat-icon-button class="on-transition-fade" *ngIf="!multiSelectMode" (click)="clickHamburgerMenu()"> <button mat-icon-button *ngIf="!multiSelectMode" (click)="clickHamburgerMenu()">
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
</mat-toolbar> </mat-toolbar>
<mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" class="sticky-toolbar"> <mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" class="sticky-toolbar">
<div class="toolbar-left"> <div class="toolbar-left">
<!-- Nav menu --> <!-- Nav menu -->
<button <button mat-icon-button *ngIf="vp.isMobile && nav && !multiSelectMode" (click)="clickHamburgerMenu()">
mat-icon-button
class="on-transition-fade"
*ngIf="vp.isMobile && nav && !multiSelectMode"
(click)="clickHamburgerMenu()"
>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<!-- Exit / Back button --> <!-- Exit / Back button -->
<button <button mat-icon-button *ngIf="!nav && !editMode && !multiSelectMode" (click)="onBackButton()">
mat-icon-button
class="on-transition-fade"
*ngIf="!nav && !editMode && !multiSelectMode"
(click)="onBackButton()"
>
<mat-icon>arrow_back</mat-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>
<!-- Cancel edit button --> <!-- Cancel edit button -->
<button mat-icon-button class="on-transition-fade" *ngIf="editMode" (click)="sendMainEvent()"> <button mat-icon-button *ngIf="editMode" (click)="sendMainEvent()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<div class="toolbar-left-text on-transition-fade" *ngIf="!multiSelectMode"> <div class="toolbar-left-text" *ngIf="!multiSelectMode">
<!-- Title slot --> <!-- Title slot -->
<ng-content select=".title-slot"></ng-content> <ng-content select=".title-slot"></ng-content>
</div> </div>
@ -39,21 +29,20 @@
<!-- centered information slot --> <!-- centered information slot -->
<div *ngIf="!multiSelectMode" class="spacer"></div> <div *ngIf="!multiSelectMode" class="spacer"></div>
<div class="toolbar-centered on-transition-fade" *ngIf="multiSelectMode"> <div class="toolbar-centered" *ngIf="multiSelectMode">
<ng-content select=".central-info-slot"></ng-content> <ng-content select=".central-info-slot"></ng-content>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="toolbar-right"> <div class="toolbar-right">
<!-- Extra controls slot --> <!-- Extra controls slot -->
<div class="extra-controls-wrapper on-transition-fade"> <div class="extra-controls-wrapper">
<ng-content select=".extra-controls-slot"></ng-content> <ng-content select=".extra-controls-slot"></ng-content>
</div> </div>
<!-- Main action button - desktop --> <!-- Main action button - desktop -->
<button <button
mat-icon-button mat-icon-button
class="on-transition-fade"
*ngIf="mainButtonIcon == 'add' && mainButton && !editMode && !vp.isMobile && !multiSelectMode" *ngIf="mainButtonIcon == 'add' && mainButton && !editMode && !vp.isMobile && !multiSelectMode"
(click)="sendMainEvent()" (click)="sendMainEvent()"
> >
@ -61,7 +50,6 @@
</button> </button>
<button <button
mat-icon-button mat-icon-button
class="on-transition-fade"
*ngIf="mainButtonIcon == 'edit' && mainButton && !editMode && !vp.isMobile && !multiSelectMode" *ngIf="mainButtonIcon == 'edit' && mainButton && !editMode && !vp.isMobile && !multiSelectMode"
(click)="sendMainEvent()" (click)="sendMainEvent()"
> >
@ -72,7 +60,7 @@
<button mat-button *ngIf="editMode" (click)="save()"><strong translate class="upper">Save</strong></button> <button mat-button *ngIf="editMode" (click)="save()"><strong translate class="upper">Save</strong></button>
<!-- Menu button slot --> <!-- Menu button slot -->
<ng-content class="on-transition-fade" *ngIf="!editMode" select=".menu-slot"></ng-content> <ng-content *ngIf="!editMode" select=".menu-slot"></ng-content>
</div> </div>
</mat-toolbar> </mat-toolbar>
@ -80,7 +68,7 @@
<button <button
mat-fab mat-fab
class="head-button on-transition-fade" class="head-button "
*ngIf="mainButton && !editMode && vp.isMobile && !multiSelectMode" *ngIf="mainButton && !editMode && vp.isMobile && !multiSelectMode"
(click)="sendMainEvent()" (click)="sendMainEvent()"
> >

2
client/src/app/shared/components/list-view-table/list-view-table.component.html
View File

@ -1,4 +1,4 @@
<mat-drawer-container class="on-transition-fade" *ngIf="columns && columnSet"> <mat-drawer-container *ngIf="columns && columnSet">
<os-sort-filter-bar <os-sort-filter-bar
*ngIf="showFilterBar" *ngIf="showFilterBar"
[filterCount]="countFilter" [filterCount]="countFilter"

2
client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html
View File

@ -1,4 +1,4 @@
<div class="custom-table-header flex-spaced on-transition-fade"> <div class="custom-table-header flex-spaced">
<!-- Amount of filters --> <!-- Amount of filters -->
<div class="filter-count" *ngIf="filterService"> <div class="filter-count" *ngIf="filterService">
<span>{{ displayedCount }}&nbsp;</span><span translate>of</span> <span>{{ displayedCount }}&nbsp;</span><span translate>of</span>

2
client/src/app/shared/components/sorting-list/sorting-list.component.html
View File

@ -9,7 +9,7 @@
(click)="onItemClick($event, i)" (click)="onItemClick($event, i)"
(cdkDragStarted)="dragStarted(i)" (cdkDragStarted)="dragStarted(i)"
> >
<div class="section-one " cdkDragHandle *ngIf="enable"> <div class="section-one" cdkDragHandle *ngIf="enable">
<mat-icon>drag_indicator</mat-icon> <mat-icon>drag_indicator</mat-icon>
</div> </div>
<div class="section-two"> <div class="section-two">

4
client/src/app/site/agenda/components/agenda-import-list/agenda-import-list.component.html
View File

@ -79,7 +79,7 @@
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label translate>Text separator</mat-label> <mat-label translate>Text separator</mat-label>
<mat-select class="selection" (selectionChange)="selectTextSep($event)" value="&quot;"> <mat-select class="selection" (selectionChange)="selectTextSep($event)" value='"'>
<mat-option *ngFor="let option of textSeparators" [value]="option.value"> <mat-option *ngFor="let option of textSeparators" [value]="option.value">
{{ option.label | translate }} {{ option.label | translate }}
</mat-option> </mat-option>
@ -139,7 +139,7 @@
</mat-select> </mat-select>
</div> </div>
<div class="table-container"> <div class="table-container">
<table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
<!-- Status column --> <!-- Status column -->
<ng-container matColumnDef="status" class="first-column" sticky> <ng-container matColumnDef="status" class="first-column" sticky>
<mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-header-cell *matHeaderCellDef></mat-header-cell>

14
client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.html
View File

@ -13,7 +13,7 @@
<mat-card class="os-card speaker-card" *ngIf="viewListOfSpeakers"> <mat-card class="os-card speaker-card" *ngIf="viewListOfSpeakers">
<!-- Title --> <!-- Title -->
<h1 class="los-title on-transition-fade">{{ viewListOfSpeakers.getTitle() }}</h1> <h1 class="los-title">{{ viewListOfSpeakers.getTitle() }}</h1>
<!-- List of finished speakers --> <!-- List of finished speakers -->
<mat-expansion-panel *ngIf="finishedSpeakers && finishedSpeakers.length > 0" class="finished-list"> <mat-expansion-panel *ngIf="finishedSpeakers && finishedSpeakers.length > 0" class="finished-list">
@ -89,12 +89,20 @@
<!-- Start, start and delete buttons --> <!-- Start, start and delete buttons -->
<span *osPerms="'agenda.can_manage_list_of_speakers'"> <span *osPerms="'agenda.can_manage_list_of_speakers'">
<!-- start button --> <!-- start button -->
<button mat-icon-button matTooltip="{{ 'Begin speech' | translate }}" (click)="onStartButton(speaker)"> <button
mat-icon-button
matTooltip="{{ 'Begin speech' | translate }}"
(click)="onStartButton(speaker)"
>
<mat-icon>play_arrow</mat-icon> <mat-icon>play_arrow</mat-icon>
</button> </button>
<!-- star button --> <!-- star button -->
<button mat-icon-button matTooltip="{{ 'Mark speaker' | translate }}" (click)="onMarkButton(speaker)"> <button
mat-icon-button
matTooltip="{{ 'Mark speaker' | translate }}"
(click)="onMarkButton(speaker)"
>
<mat-icon>{{ speaker.marked ? 'star' : 'star_border' }}</mat-icon> <mat-icon>{{ speaker.marked ? 'star' : 'star_border' }}</mat-icon>
</button> </button>

15
client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
View File

@ -56,12 +56,15 @@
</div> </div>
<ng-template #metaInfoTemplate> <ng-template #metaInfoTemplate>
<mat-card class="os-card " *ngIf="assignment"> <mat-card class="os-card" *ngIf="assignment">
<div *ngIf="!editAssignment && assignment.getTitle"> <div *ngIf="!editAssignment && assignment.getTitle">
<h1>{{ assignment.getTitle() }}</h1> <h1>{{ assignment.getTitle() }}</h1>
</div> </div>
<div *ngIf="assignment"> <div *ngIf="assignment">
<div *ngIf="assignment.assignment.description" [innerHTML]="getSanitizedText(assignment.assignment.description)"></div> <div
*ngIf="assignment.assignment.description"
[innerHTML]="getSanitizedText(assignment.assignment.description)"
></div>
</div> </div>
<div class="meta-info-grid"> <div class="meta-info-grid">
<div class="number-of-elected"> <div class="number-of-elected">
@ -111,8 +114,7 @@
</ng-template> </ng-template>
<!-- poll template --> <!-- poll template -->
<ng-template #pollTemplate <ng-template #pollTemplate>
>
<div class="ballot-controls-grid"> <div class="ballot-controls-grid">
<div class="ballot-title" *ngIf="assignment && assignment.polls && assignment.polls.length"> <div class="ballot-title" *ngIf="assignment && assignment.polls && assignment.polls.length">
<h3 translate>Election result</h3> <h3 translate>Election result</h3>
@ -205,7 +207,10 @@
</div> </div>
</div> </div>
</div> </div>
<mat-divider *ngIf="assignment && assignment.polls && assignment.polls.length" class="candidate-list-separator"></mat-divider> <mat-divider
*ngIf="assignment && assignment.polls && assignment.polls.length"
class="candidate-list-separator"
></mat-divider>
</ng-template> </ng-template>
<!-- Form --> <!-- Form -->

6
client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
View File

@ -40,7 +40,7 @@
</mat-menu> </mat-menu>
</div> </div>
<div class="on-transition-fade poll-main-content" *ngIf="poll.options"> <div class="poll-main-content" *ngIf="poll.options">
<div *ngIf="pollData"> <div *ngIf="pollData">
<div class="poll-grid"> <div class="poll-grid">
<div></div> <div></div>
@ -105,7 +105,7 @@
<div> <div>
<div *ngIf="poll.has_votes"> <div *ngIf="poll.has_votes">
<div *ngFor="let vote of option.votes" class="spacer-bottom-10"> <div *ngFor="let vote of option.votes" class="spacer-bottom-10">
<div class="poll-progress on-transition-fade"> <div class="poll-progress">
<span *ngIf="vote.value !== 'Votes'" <span *ngIf="vote.value !== 'Votes'"
>{{ pollService.getLabel(vote.value) | translate }}:</span >{{ pollService.getLabel(vote.value) | translate }}:</span
> >
@ -184,7 +184,7 @@
<div *ngIf="canManage" class="hint-form" [formGroup]="descriptionForm"> <div *ngIf="canManage" class="hint-form" [formGroup]="descriptionForm">
<mat-form-field class="wide"> <mat-form-field class="wide">
<mat-label translate>Hint for ballot paper</mat-label> <mat-label translate>Hint for ballot paper</mat-label>
<input matInput formControlName="description"/> <input matInput formControlName="description" />
</mat-form-field> </mat-form-field>
<button mat-icon-button [disabled]="!dirtyDescription" (click)="onEditDescriptionButton()"> <button mat-icon-button [disabled]="!dirtyDescription" (click)="onEditDescriptionButton()">
<mat-icon inline>check</mat-icon> <mat-icon inline>check</mat-icon>

2
client/src/app/site/common/components/error/error.component.html
View File

@ -4,6 +4,6 @@
</div> </div>
</os-head-bar> </os-head-bar>
<mat-card class="os-card on-transition-fade"> <mat-card class="os-card">
<h1 translate>You do not have the required permission to see that page!</h1> <h1 translate>You do not have the required permission to see that page!</h1>
</mat-card> </mat-card>

4
client/src/app/site/history/components/history-list/history-list.component.html
View File

@ -39,7 +39,7 @@
</div> </div>
</div> </div>
<mat-table class="on-transition-fade" [dataSource]="dataSource" matSort> <mat-table [dataSource]="dataSource" matSort>
<!-- Timestamp --> <!-- Timestamp -->
<ng-container matColumnDef="time"> <ng-container matColumnDef="time">
<mat-header-cell *matHeaderCellDef translate>Timestamp</mat-header-cell> <mat-header-cell *matHeaderCellDef translate>Timestamp</mat-header-cell>
@ -77,7 +77,7 @@
<mat-row *matRowDef="let row; columns: getRowDef()" (click)="onClickRow(row)"></mat-row> <mat-row *matRowDef="let row; columns: getRowDef()" (click)="onClickRow(row)"></mat-row>
</mat-table> </mat-table>
<mat-paginator class="on-transition-fade" [pageSizeOptions]="pageSizes"></mat-paginator> <mat-paginator [pageSizeOptions]="pageSizes"></mat-paginator>
<mat-menu #historyMenu="matMenu"> <mat-menu #historyMenu="matMenu">
<button mat-menu-item class="red-warning-text" (click)="clearHistory()"> <button mat-menu-item class="red-warning-text" (click)="clearHistory()">

2
client/src/app/site/motions/modules/call-list/call-list.component.html
View File

@ -12,7 +12,7 @@
</div> </div>
</os-head-bar> </os-head-bar>
<div class="custom-table-header flex-spaced on-transition-fade"> <div class="custom-table-header flex-spaced">
<div class="filter-count"> <div class="filter-count">
<span> {{ seenNodes[0] }}&nbsp;</span><span translate>of</span> <span> {{ seenNodes[0] }}&nbsp;</span><span translate>of</span>
<span>&nbsp;{{ seenNodes[1] }}</span> <span>&nbsp;{{ seenNodes[1] }}</span>

14
client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.html
View File

@ -22,7 +22,7 @@
<span>{{ getLevelDashes(category) }}</span> <span>{{ getLevelDashes(category) }}</span>
{{ category.prefixedName }} {{ category.prefixedName }}
</h2> </h2>
<table class="os-headed-listview-table on-transition-fade" mat-table [dataSource]="dataSources[category.id]"> <table class="os-headed-listview-table" mat-table [dataSource]="dataSources[category.id]">
<!-- title column --> <!-- title column -->
<ng-container matColumnDef="title"> <ng-container matColumnDef="title">
<mat-header-cell *matHeaderCellDef> <span translate>Motion</span> </mat-header-cell> <mat-header-cell *matHeaderCellDef> <span translate>Motion</span> </mat-header-cell>
@ -93,21 +93,15 @@
<div class="os-form-card-mobile" mat-dialog-content> <div class="os-form-card-mobile" mat-dialog-content>
<form class="edit-form" [formGroup]="editForm" (ngSubmit)="save()" (keydown)="onKeyDown($event)"> <form class="edit-form" [formGroup]="editForm" (ngSubmit)="save()" (keydown)="onKeyDown($event)">
<mat-form-field> <mat-form-field>
<input matInput osAutofocus placeholder="{{ 'Prefix' | translate }}" formControlName="prefix"/> <input matInput osAutofocus placeholder="{{ 'Prefix' | translate }}" formControlName="prefix" />
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput osAutofocus placeholder="{{ 'Name' | translate }}" formControlName="name" required/> <input matInput osAutofocus placeholder="{{ 'Name' | translate }}" formControlName="name" required />
</mat-form-field> </mat-form-field>
</form> </form>
</div> </div>
<div mat-dialog-actions> <div mat-dialog-actions>
<button <button type="submit" mat-button [disabled]="!editForm.valid" color="primary" (click)="save()">
type="submit"
mat-button
[disabled]="!editForm.valid"
color="primary"
(click)="save()"
>
<span translate>Save</span> <span translate>Save</span>
</button> </button>
<button type="button" mat-button [mat-dialog-close]="null"> <button type="button" mat-button [mat-dialog-close]="null">

2
client/src/app/site/motions/modules/category/components/category-list/category-list.component.html
View File

@ -49,7 +49,7 @@
<!-- Table --> <!-- Table -->
<mat-card class="os-card"> <mat-card class="os-card">
<table class="os-headed-listview-table on-transition-fade" mat-table [dataSource]="dataSource"> <table class="os-headed-listview-table" mat-table [dataSource]="dataSource">
<!-- title column --> <!-- title column -->
<ng-container matColumnDef="title"> <ng-container matColumnDef="title">
<mat-header-cell *matHeaderCellDef> <mat-header-cell *matHeaderCellDef>

26
client/src/app/site/motions/modules/motion-comment-section/motion-comment-section-list.component.html
View File

@ -126,34 +126,16 @@
<div class="spacer-left" *ngIf="section.write_groups.length === 0" translate>No groups selected</div> <div class="spacer-left" *ngIf="section.write_groups.length === 0" translate>No groups selected</div>
</ng-container> </ng-container>
<mat-action-row> <mat-action-row>
<button <button *ngIf="editId !== section.id" mat-button (click)="onEditButton(section)" mat-icon-button>
*ngIf="editId !== section.id"
mat-button
class="on-transition-fade"
(click)="onEditButton(section)"
mat-icon-button
>
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
</button> </button>
<button <button *ngIf="editId === section.id" mat-button (click)="editId = null" mat-icon-button>
*ngIf="editId === section.id"
mat-button
class="on-transition-fade"
(click)="editId = null"
mat-icon-button
>
<mat-icon>cancel</mat-icon> <mat-icon>cancel</mat-icon>
</button> </button>
<button <button *ngIf="editId === section.id" mat-button (click)="onSaveButton(section)" mat-icon-button>
*ngIf="editId === section.id"
mat-button
class="on-transition-fade"
(click)="onSaveButton(section)"
mat-icon-button
>
<mat-icon>save</mat-icon> <mat-icon>save</mat-icon>
</button> </button>
<button mat-button class="on-transition-fade" (click)="onDeleteButton(section)" mat-icon-button> <button mat-button (click)="onDeleteButton(section)" mat-icon-button>
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</mat-action-row> </mat-action-row>

9
client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
View File

@ -15,7 +15,7 @@
</div> </div>
</os-head-bar> </os-head-bar>
<form [formGroup]="contentForm" (ngSubmit)="saveAmendment()" class="on-transition-fade"> <form [formGroup]="contentForm" (ngSubmit)="saveAmendment()">
<mat-horizontal-stepper #matStepper linear> <mat-horizontal-stepper #matStepper linear>
<mat-step [completed]="contentForm.value.selectedParagraphs.length > 0"> <mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
<ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template> <ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
@ -52,10 +52,11 @@
<section *ngFor="let paragraph of contentForm.value.selectedParagraphs"> <section *ngFor="let paragraph of contentForm.value.selectedParagraphs">
<h4> <h4>
<span *ngIf="paragraph.lineFrom >= paragraph.lineTo - 1" class="line-number"> <span *ngIf="paragraph.lineFrom >= paragraph.lineTo - 1" class="line-number">
{{ 'Line' | translate }} {{ paragraph.lineFrom }}:</span> {{ 'Line' | translate }} {{ paragraph.lineFrom }}:</span
>
<span *ngIf="paragraph.lineFrom < paragraph.lineTo - 1" class="line-number"> <span *ngIf="paragraph.lineFrom < paragraph.lineTo - 1" class="line-number">
{{ 'Line' | translate }} {{ paragraph.lineFrom }} {{ 'Line' | translate }} {{ paragraph.lineFrom }} - {{ paragraph.lineTo - 1 }}:</span
- {{ paragraph.lineTo - 1 }}:</span> >
</h4> </h4>
<editor [formControlName]="'text_' + paragraph.paragraphNo" [init]="tinyMceSettings"></editor> <editor [formControlName]="'text_' + paragraph.paragraphNo" [init]="tinyMceSettings"></editor>
</section> </section>

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

@ -20,7 +20,7 @@
</div> </div>
<!-- Back and forth buttons --> <!-- Back and forth buttons -->
<div *ngIf="!editMotion && !vp.isMobile" class="extra-controls-slot on-transition-fade"> <div *ngIf="!editMotion && !vp.isMobile" class="extra-controls-slot">
<div *ngIf="previousMotion"> <div *ngIf="previousMotion">
<button mat-button (click)="navigateToMotion(previousMotion)"> <button mat-button (click)="navigateToMotion(previousMotion)">
<!-- possible icons: <!-- possible icons:
@ -103,7 +103,7 @@
<div class="content-container" (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')"> <div class="content-container" (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
<!-- Title --> <!-- Title -->
<div class="title on-transition-fade" *ngIf="motion && !editMotion"> <div class="title" *ngIf="motion && !editMotion">
<div class="title-line"> <div class="title-line">
<h1>{{ motion.title }}</h1> <h1>{{ motion.title }}</h1>
<button mat-icon-button color="primary" (click)="toggleFavorite()"> <button mat-icon-button color="primary" (click)="toggleFavorite()">
@ -133,9 +133,8 @@
<ng-template #mobileView> <ng-template #mobileView>
<div *ngIf="motion" class="mobile-view"> <div *ngIf="motion" class="mobile-view">
<!-- Meta info --> <!-- Meta info -->
<div class="on-transition-fade"><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div> <div><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
<!-- Content --> <!-- Content -->
<mat-card [ngClass]="editMotion ? 'os-form-card-mobile' : 'os-card'"> <mat-card [ngClass]="editMotion ? 'os-form-card-mobile' : 'os-card'">
@ -152,7 +151,7 @@
<ng-template #desktopView> <ng-template #desktopView>
<div class="desktop-view" *ngIf="motion"> <div class="desktop-view" *ngIf="motion">
<div class="desktop-left on-transition-fade"> <div class="desktop-left">
<!-- Meta Info --> <!-- Meta Info -->
<div><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div> <div><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
@ -439,9 +438,11 @@
<ng-template #contentTemplate> <ng-template #contentTemplate>
<form class="motion-content" [formGroup]="contentForm" (keydown)="onKeyDown($event)"> <form class="motion-content" [formGroup]="contentForm" (keydown)="onKeyDown($event)">
<!-- Toolbar with text controls and buttonf for managing the (modified) final version--> <!-- Toolbar with text controls and buttonf for managing the (modified) final version-->
<div class="motion-text-toolbar-wrapper outline-border-bottom" *ngIf="!editMotion && !motion.isStatuteAmendment()"> <div
class="motion-text-toolbar-wrapper outline-border-bottom"
*ngIf="!editMotion && !motion.isStatuteAmendment()"
>
<!-- Line Number and Diff buttons --> <!-- Line Number and Diff buttons -->
<div class="motion-text-controls"> <div class="motion-text-controls">
<mat-form-field class="motion-goto-line" *ngIf="highlightedLineOpened"> <mat-form-field class="motion-goto-line" *ngIf="highlightedLineOpened">
@ -472,23 +473,20 @@
<mat-icon>cancel</mat-icon> <mat-icon>cancel</mat-icon>
</button> </button>
<button <button type="button" mat-button [matMenuTriggerFor]="lineNumberingMenu">
type="button"
mat-button
[matMenuTriggerFor]="lineNumberingMenu"
>
<mat-icon>format_list_numbered</mat-icon> <mat-icon>format_list_numbered</mat-icon>
&nbsp;<span translate>Line numbering</span> &nbsp;<span translate>Line numbering</span>
<span *ngIf="lnMode === LineNumberingMode.None"> <span *ngIf="lnMode === LineNumberingMode.None"> &nbsp;(<span translate>none</span>) </span>
&nbsp;(<span translate>none</span>)
</span>
</button> </button>
<button <button
type="button" type="button"
mat-button mat-button
[matMenuTriggerFor]="changeRecoMenu" [matMenuTriggerFor]="changeRecoMenu"
*ngIf=" *ngIf="
motion && !motion.isParagraphBasedAmendment() && allChangingObjects && allChangingObjects.length > 0 motion &&
!motion.isParagraphBasedAmendment() &&
allChangingObjects &&
allChangingObjects.length > 0
" "
> >
<mat-icon>rate_review</mat-icon> <mat-icon>rate_review</mat-icon>
@ -649,11 +647,17 @@
></os-motion-detail-diff> ></os-motion-detail-diff>
<div *ngIf="isFinalEdit"> <div *ngIf="isFinalEdit">
<editor [hidden]="!isFinalEdit" formControlName="modified_final_version" [init]="tinyMceSettings" required></editor> <editor
[hidden]="!isFinalEdit"
formControlName="modified_final_version"
[init]="tinyMceSettings"
required
></editor>
<div <div
*ngIf=" *ngIf="
contentForm.get('modified_final_version').invalid && contentForm.get('modified_final_version').invalid &&
(contentForm.get('modified_final_version').dirty || contentForm.get('modified_final_version').touched) (contentForm.get('modified_final_version').dirty ||
contentForm.get('modified_final_version').touched)
" "
class="red-warning-text" class="red-warning-text"
translate translate
@ -930,11 +934,7 @@
outside outside
</button> </button>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<button <button mat-menu-item *ngIf="!highlightedLineOpened" (click)="highlightedLineOpened = true">
mat-menu-item
*ngIf="!highlightedLineOpened"
(click)="highlightedLineOpened = true"
>
<mat-icon>redo</mat-icon> <mat-icon>redo</mat-icon>
<span translate>Go to line</span> <span translate>Go to line</span>
</button> </button>

16
client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.html
View File

@ -4,9 +4,9 @@
<span *ngIf="pollIndex">&nbsp;({{ pollIndex + 1 }})</span> <span *ngIf="pollIndex">&nbsp;({{ pollIndex + 1 }})</span>
</ng-container> </ng-container>
<ng-container class="meta-text-block-content"> <ng-container class="meta-text-block-content">
<div *ngIf="poll.has_votes" class="on-transition-fade poll-result"> <div *ngIf="poll.has_votes" class="poll-result">
<div *ngFor="let key of pollValues"> <div *ngFor="let key of pollValues">
<div class="poll-progress on-transition-fade" *ngIf="poll[key] !== undefined"> <div class="poll-progress" *ngIf="poll[key] !== undefined">
<mat-icon class="main-nav-color" matTooltip="{{ getLabel(key) | translate }}"> <mat-icon class="main-nav-color" matTooltip="{{ getLabel(key) | translate }}">
{{ getIcon(key) }} {{ getIcon(key) }}
</mat-icon> </mat-icon>
@ -55,18 +55,10 @@
<button mat-icon-button matTooltip="{{ 'Edit' | translate }}" (click)="editPoll()"> <button mat-icon-button matTooltip="{{ 'Edit' | translate }}" (click)="editPoll()">
<mat-icon inline>edit</mat-icon> <mat-icon inline>edit</mat-icon>
</button> </button>
<button <button mat-icon-button matTooltip="{{ 'Print ballot papers' | translate }}" (click)="printBallots()">
mat-icon-button
matTooltip="{{ 'Print ballot papers' | translate }}"
(click)="printBallots()"
>
<mat-icon inline>local_printshop</mat-icon> <mat-icon inline>local_printshop</mat-icon>
</button> </button>
<button <button mat-icon-button matTooltip="{{ 'Delete' | translate }}" (click)="deletePoll()">
mat-icon-button
matTooltip="{{ 'Delete' | translate }}"
(click)="deletePoll()"
>
<mat-icon inline>delete</mat-icon> <mat-icon inline>delete</mat-icon>
</button> </button>
</ng-container> </ng-container>

2
client/src/app/site/motions/modules/motion-import/motion-import-list.component.html
View File

@ -107,7 +107,7 @@
</mat-select> </mat-select>
</div> </div>
<div class="table-container"> <div class="table-container">
<table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
<!-- Status column --> <!-- Status column -->
<ng-container matColumnDef="status" sticky> <ng-container matColumnDef="status" sticky>
<mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell> <mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell>

20
client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.html
View File

@ -7,7 +7,7 @@
</div> </div>
<!-- Edit button --> <!-- Edit button -->
<div class="extra-controls-slot on-transition-fade"> <div class="extra-controls-slot">
<button mat-icon-button (click)="onEditWorkflowButton()"> <button mat-icon-button (click)="onEditWorkflowButton()">
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
</button> </button>
@ -24,7 +24,7 @@
</div> </div>
<div class="scrollable-matrix"> <div class="scrollable-matrix">
<table mat-table class="on-transition-fade" [dataSource]="getTableDataSource()"> <table mat-table [dataSource]="getTableDataSource()">
<ng-container matColumnDef="perm" sticky> <ng-container matColumnDef="perm" sticky>
<mat-header-cell class="group-head-table-cell" *matHeaderCellDef translate>Permissions</mat-header-cell> <mat-header-cell class="group-head-table-cell" *matHeaderCellDef translate>Permissions</mat-header-cell>
<mat-cell *matCellDef="let perm"> <mat-cell *matCellDef="let perm">
@ -112,13 +112,9 @@
- -
</div> </div>
<div *ngIf="state.restriction.length"> <div *ngIf="state.restriction.length">
<span <span *ngFor="let restriction of state.restriction; let last = last">
*ngFor=" {{ getRestrictionLabel(restriction) | translate
let restriction of state.restriction; }}<span *ngIf="!last">,&nbsp;</span>
let last = last
"
>
{{ getRestrictionLabel(restriction) | translate }}<span *ngIf="!last">,&nbsp;</span>
</span> </span>
</div> </div>
</div> </div>
@ -193,7 +189,11 @@
<!-- Select restriction menu --> <!-- Select restriction menu -->
<mat-menu matMenuContent #restrictionMenu="matMenu"> <mat-menu matMenuContent #restrictionMenu="matMenu">
<ng-template let-state="state" matMenuContent> <ng-template let-state="state" matMenuContent>
<button mat-menu-item *ngFor="let restriction of restrictions" (click)="onSetRestriction(restriction.key, state)"> <button
mat-menu-item
*ngFor="let restriction of restrictions"
(click)="onSetRestriction(restriction.key, state)"
>
<mat-icon *ngIf="state.restriction.includes(restriction.key)">check</mat-icon> <mat-icon *ngIf="state.restriction.includes(restriction.key)">check</mat-icon>
<span>{{ restriction.label | translate }}</span> <span>{{ restriction.label | translate }}</span>
</button> </button>

2
client/src/app/site/motions/modules/statute-paragraph/components/statute-import-list/statute-import-list.component.html
View File

@ -97,7 +97,7 @@
</mat-select> </mat-select>
</div> </div>
<div class="table-container"> <div class="table-container">
<table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
<!-- Status column --> <!-- Status column -->
<ng-container matColumnDef="status" sticky> <ng-container matColumnDef="status" sticky>
<mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell> <mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell>

17
client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
View File

@ -83,36 +83,23 @@
<button <button
*ngIf="editId !== statuteParagraph.id" *ngIf="editId !== statuteParagraph.id"
mat-button mat-button
class="on-transition-fade"
(click)="onEditButton(statuteParagraph)" (click)="onEditButton(statuteParagraph)"
mat-icon-button mat-icon-button
> >
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
</button> </button>
<button <button *ngIf="editId === statuteParagraph.id" mat-button (click)="onCancelUpdate()" mat-icon-button>
*ngIf="editId === statuteParagraph.id"
mat-button
class="on-transition-fade"
(click)="onCancelUpdate()"
mat-icon-button
>
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<button <button
*ngIf="editId === statuteParagraph.id" *ngIf="editId === statuteParagraph.id"
mat-button mat-button
class="on-transition-fade"
(click)="onSaveButton(statuteParagraph)" (click)="onSaveButton(statuteParagraph)"
mat-icon-button mat-icon-button
> >
<mat-icon>save</mat-icon> <mat-icon>save</mat-icon>
</button> </button>
<button <button mat-button (click)="onDeleteButton(statuteParagraph)" mat-icon-button>
mat-button
class="on-transition-fade"
(click)="onDeleteButton(statuteParagraph)"
mat-icon-button
>
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</mat-action-row> </mat-action-row>

2
client/src/app/site/tags/components/tag-list/tag-list.component.html
View File

@ -25,7 +25,7 @@
</div> </div>
<!-- remove button --> <!-- remove button -->
<div class="extra-controls-slot on-transition-fade"> <div class="extra-controls-slot">
<button type="button" mat-button *ngIf="!isMultiSelect && editTag && !newTag" (click)="deleteSelectedTag()"> <button type="button" mat-button *ngIf="!isMultiSelect && editTag && !newTag" (click)="deleteSelectedTag()">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
<span translate>Delete</span> <span translate>Delete</span>

26
client/src/app/site/users/components/group-list/group-list.component.html
View File

@ -1,17 +1,16 @@
<os-head-bar [mainButton]="true" [nav]="false" <os-head-bar [mainButton]="true" [nav]="false" (mainEvent)="setEditMode(!editGroup)">
(mainEvent)="setEditMode(!editGroup)">
<!-- Title --> <!-- Title -->
<div class="title-slot"> <div class="title-slot">
<h2 translate>Groups</h2> <h2 translate>Groups</h2>
</div> </div>
</os-head-bar> </os-head-bar>
<div class="hint-text on-transition-fade"> <div class="hint-text">
<span translate>All your changes are saved immediately.</span> <span translate>All your changes are saved immediately.</span>
</div> </div>
<mat-accordion *ngFor="let app of appPermissions"> <mat-accordion *ngFor="let app of appPermissions">
<mat-expansion-panel class="mat-elevation-z0" [expanded]=true> <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
{{ app.name | translate }} {{ app.name | translate }}
@ -19,7 +18,7 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="scrollable-perm-matrix"> <div class="scrollable-perm-matrix">
<table mat-table class="on-transition-fade" [dataSource]="getTableDataSource(app.permissions)"> <table mat-table [dataSource]="getTableDataSource(app.permissions)">
<ng-container matColumnDef="perm" sticky> <ng-container matColumnDef="perm" sticky>
<mat-header-cell *matHeaderCellDef translate>Permissions</mat-header-cell> <mat-header-cell *matHeaderCellDef translate>Permissions</mat-header-cell>
<mat-cell *matCellDef="let perm"> <mat-cell *matCellDef="let perm">
@ -36,8 +35,11 @@
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let perm"> <mat-cell *matCellDef="let perm">
<div class="inner-table"> <div class="inner-table">
<mat-checkbox *ngIf="group.id !== 2" [checked]="group.hasPermission(perm.value)" <mat-checkbox
(change)="togglePerm(group, perm.value)"></mat-checkbox> *ngIf="group.id !== 2"
[checked]="group.hasPermission(perm.value)"
(change)="togglePerm(group, perm.value)"
></mat-checkbox>
<mat-checkbox *ngIf="group.id === 2" [checked]="true" [disabled]="true"></mat-checkbox> <mat-checkbox *ngIf="group.id === 2" [checked]="true" [disabled]="true"></mat-checkbox>
</div> </div>
</mat-cell> </mat-cell>
@ -58,8 +60,14 @@
<div class="os-form-card-mobile" mat-dialog-content> <div class="os-form-card-mobile" mat-dialog-content>
<form class="edit-form" [formGroup]="groupForm" (keydown)="keyDownFunction($event)"> <form class="edit-form" [formGroup]="groupForm" (keydown)="keyDownFunction($event)">
<mat-form-field> <mat-form-field>
<input type="text" matInput osAutofocus required formControlName="name" <input
placeholder="{{ 'New group name' | translate}}"> type="text"
matInput
osAutofocus
required
formControlName="name"
placeholder="{{ 'New group name' | translate }}"
/>
<mat-error *ngIf="groupForm.invalid" translate>Required</mat-error> <mat-error *ngIf="groupForm.invalid" translate>Required</mat-error>
</mat-form-field> </mat-form-field>
</form> </form>

4
client/src/app/site/users/components/user-import/user-import-list.component.html
View File

@ -81,7 +81,7 @@
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label translate>Text separator</mat-label> <mat-label translate>Text separator</mat-label>
<mat-select class="selection" (selectionChange)="selectTextSep($event)" value="&quot;"> <mat-select class="selection" (selectionChange)="selectTextSep($event)" value='"'>
<mat-option *ngFor="let option of textSeparators" [value]="option.value"> <mat-option *ngFor="let option of textSeparators" [value]="option.value">
{{ option.label | translate }} {{ option.label | translate }}
</mat-option> </mat-option>
@ -143,7 +143,7 @@
<mat-option value="noerror" translate>Show correct entries only</mat-option> <mat-option value="noerror" translate>Show correct entries only</mat-option>
</mat-select> </mat-select>
<div class="table-container"> <div class="table-container">
<table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
<!-- Status column --> <!-- Status column -->
<ng-container matColumnDef="status" sticky> <ng-container matColumnDef="status" sticky>
<mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell> <mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell>

5
client/src/styles.scss
View File

@ -461,11 +461,6 @@ mat-paginator {
flex: 1 1 auto; flex: 1 1 auto;
} }
/** helper classes for animation */
.on-transition-fade {
z-index: 100;
}
mat-expansion-panel { mat-expansion-panel {
border-radius: 0 !important; border-radius: 0 !important;
} }