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 = [
style({ transform: 'translateY(0%)', opacity: 1 }),
animate(
'200ms ease-in-out',
'150ms ease-in-out',
style({
transform: 'translateY(0%)',
opacity: 0
@ -11,16 +11,17 @@ const fadeVanish = [
)
];
const fadeAppear = [
style({ transform: 'translateY(0%)', opacity: 0 }),
animate('200ms ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))
];
// Requires more generic way to trigger parallel animations
// const fadeAppear = [
// style({ transform: 'translateY(0%)', opacity: 0 }),
// animate('200ms ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))
// ];
const justEnterDom = [style({ opacity: 0 })];
const fadeMoveIn = [
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', [
@ -30,28 +31,19 @@ export const pageTransition = trigger('pageTransition', [
/** keep the dom clean - let all items "just" enter */
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-expansion-panel', justEnterDom, { optional: true }),
/** parallel vanishing */
group([
query(':leave .on-transition-fade', fadeVanish, { optional: true }),
query(':leave mat-card', fadeVanish, { optional: true }),
query(':leave mat-row', fadeVanish, { optional: true }),
query(':leave mat-expansion-panel', fadeVanish, { optional: true })
query(':leave mat-row', fadeVanish, { optional: true })
]),
/** parallel appearing */
group([
/** animate fade in for the selected components */
query(':enter .on-transition-fade', fadeAppear, { optional: true }),
/** Staggered appearing = "one after another" */
query(':enter mat-card', stagger(50, 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">
<!-- 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>
</button>
</mat-toolbar>
<mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" class="sticky-toolbar">
<div class="toolbar-left">
<!-- Nav menu -->
<button
mat-icon-button
class="on-transition-fade"
*ngIf="vp.isMobile && nav && !multiSelectMode"
(click)="clickHamburgerMenu()"
>
<button mat-icon-button *ngIf="vp.isMobile && nav && !multiSelectMode" (click)="clickHamburgerMenu()">
<mat-icon>menu</mat-icon>
</button>
<!-- Exit / Back button -->
<button
mat-icon-button
class="on-transition-fade"
*ngIf="!nav && !editMode && !multiSelectMode"
(click)="onBackButton()"
>
<button mat-icon-button *ngIf="!nav && !editMode && !multiSelectMode" (click)="onBackButton()">
<mat-icon>arrow_back</mat-icon>
</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>
</button>
<div class="toolbar-left-text on-transition-fade" *ngIf="!multiSelectMode">
<div class="toolbar-left-text" *ngIf="!multiSelectMode">
<!-- Title slot -->
<ng-content select=".title-slot"></ng-content>
</div>
@ -39,21 +29,20 @@
<!-- centered information slot -->
<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>
</div>
<div class="spacer"></div>
<div class="toolbar-right">
<!-- Extra controls slot -->
<div class="extra-controls-wrapper on-transition-fade">
<div class="extra-controls-wrapper">
<ng-content select=".extra-controls-slot"></ng-content>
</div>
<!-- Main action button - desktop -->
<button
mat-icon-button
class="on-transition-fade"
*ngIf="mainButtonIcon == 'add' && mainButton && !editMode && !vp.isMobile && !multiSelectMode"
(click)="sendMainEvent()"
>
@ -61,7 +50,6 @@
</button>
<button
mat-icon-button
class="on-transition-fade"
*ngIf="mainButtonIcon == 'edit' && mainButton && !editMode && !vp.isMobile && !multiSelectMode"
(click)="sendMainEvent()"
>
@ -72,7 +60,7 @@
<button mat-button *ngIf="editMode" (click)="save()"><strong translate class="upper">Save</strong></button>
<!-- 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>
</mat-toolbar>
@ -80,7 +68,7 @@
<button
mat-fab
class="head-button on-transition-fade"
class="head-button "
*ngIf="mainButton && !editMode && vp.isMobile && !multiSelectMode"
(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
*ngIf="showFilterBar"
[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 -->
<div class="filter-count" *ngIf="filterService">
<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)"
(cdkDragStarted)="dragStarted(i)"
>
<div class="section-one " cdkDragHandle *ngIf="enable">
<div class="section-one" cdkDragHandle *ngIf="enable">
<mat-icon>drag_indicator</mat-icon>
</div>
<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-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">
{{ option.label | translate }}
</mat-option>
@ -139,7 +139,7 @@
</mat-select>
</div>
<div class="table-container">
<table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort>
<table mat-table [dataSource]="dataSource" matSort>
<!-- Status column -->
<ng-container matColumnDef="status" class="first-column" sticky>
<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">
<!-- Title -->
<h1 class="los-title on-transition-fade">{{ viewListOfSpeakers.getTitle() }}</h1>
<h1 class="los-title">{{ viewListOfSpeakers.getTitle() }}</h1>
<!-- List of finished speakers -->
<mat-expansion-panel *ngIf="finishedSpeakers && finishedSpeakers.length > 0" class="finished-list">
@ -89,12 +89,20 @@
<!-- Start, start and delete buttons -->
<span *osPerms="'agenda.can_manage_list_of_speakers'">
<!-- 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>
</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>
</button>

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

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

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

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

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

@ -4,6 +4,6 @@
</div>
</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>
</mat-card>

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

@ -39,7 +39,7 @@
</div>
</div>
<mat-table class="on-transition-fade" [dataSource]="dataSource" matSort>
<mat-table [dataSource]="dataSource" matSort>
<!-- Timestamp -->
<ng-container matColumnDef="time">
<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-table>
<mat-paginator class="on-transition-fade" [pageSizeOptions]="pageSizes"></mat-paginator>
<mat-paginator [pageSizeOptions]="pageSizes"></mat-paginator>
<mat-menu #historyMenu="matMenu">
<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>
</os-head-bar>
<div class="custom-table-header flex-spaced on-transition-fade">
<div class="custom-table-header flex-spaced">
<div class="filter-count">
<span> {{ seenNodes[0] }}&nbsp;</span><span translate>of</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>
{{ category.prefixedName }}
</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 -->
<ng-container matColumnDef="title">
<mat-header-cell *matHeaderCellDef> <span translate>Motion</span> </mat-header-cell>
@ -93,21 +93,15 @@
<div class="os-form-card-mobile" mat-dialog-content>
<form class="edit-form" [formGroup]="editForm" (ngSubmit)="save()" (keydown)="onKeyDown($event)">
<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>
<input matInput osAutofocus placeholder="{{ 'Name' | translate }}" formControlName="name" required/>
<input matInput osAutofocus placeholder="{{ 'Name' | translate }}" formControlName="name" required />
</mat-form-field>
</form>
</div>
<div mat-dialog-actions>
<button
type="submit"
mat-button
[disabled]="!editForm.valid"
color="primary"
(click)="save()"
>
<button type="submit" mat-button [disabled]="!editForm.valid" color="primary" (click)="save()">
<span translate>Save</span>
</button>
<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 -->
<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 -->
<ng-container matColumnDef="title">
<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>
</ng-container>
<mat-action-row>
<button
*ngIf="editId !== section.id"
mat-button
class="on-transition-fade"
(click)="onEditButton(section)"
mat-icon-button
>
<button *ngIf="editId !== section.id" mat-button (click)="onEditButton(section)" mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
<button
*ngIf="editId === section.id"
mat-button
class="on-transition-fade"
(click)="editId = null"
mat-icon-button
>
<button *ngIf="editId === section.id" mat-button (click)="editId = null" mat-icon-button>
<mat-icon>cancel</mat-icon>
</button>
<button
*ngIf="editId === section.id"
mat-button
class="on-transition-fade"
(click)="onSaveButton(section)"
mat-icon-button
>
<button *ngIf="editId === section.id" mat-button (click)="onSaveButton(section)" mat-icon-button>
<mat-icon>save</mat-icon>
</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>
</button>
</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>
</os-head-bar>
<form [formGroup]="contentForm" (ngSubmit)="saveAmendment()" class="on-transition-fade">
<form [formGroup]="contentForm" (ngSubmit)="saveAmendment()">
<mat-horizontal-stepper #matStepper linear>
<mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
<ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
@ -52,10 +52,11 @@
<section *ngFor="let paragraph of contentForm.value.selectedParagraphs">
<h4>
<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">
{{ 'Line' | translate }} {{ paragraph.lineFrom }}
- {{ paragraph.lineTo - 1 }}:</span>
{{ 'Line' | translate }} {{ paragraph.lineFrom }} - {{ paragraph.lineTo - 1 }}:</span
>
</h4>
<editor [formControlName]="'text_' + paragraph.paragraphNo" [init]="tinyMceSettings"></editor>
</section>

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

@ -20,7 +20,7 @@
</div>
<!-- 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">
<button mat-button (click)="navigateToMotion(previousMotion)">
<!-- possible icons:
@ -103,7 +103,7 @@
<div class="content-container" (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
<!-- Title -->
<div class="title on-transition-fade" *ngIf="motion && !editMotion">
<div class="title" *ngIf="motion && !editMotion">
<div class="title-line">
<h1>{{ motion.title }}</h1>
<button mat-icon-button color="primary" (click)="toggleFavorite()">
@ -133,9 +133,8 @@
<ng-template #mobileView>
<div *ngIf="motion" class="mobile-view">
<!-- Meta info -->
<div class="on-transition-fade"><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
<div><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
<!-- Content -->
<mat-card [ngClass]="editMotion ? 'os-form-card-mobile' : 'os-card'">
@ -152,7 +151,7 @@
<ng-template #desktopView>
<div class="desktop-view" *ngIf="motion">
<div class="desktop-left on-transition-fade">
<div class="desktop-left">
<!-- Meta Info -->
<div><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
@ -439,9 +438,11 @@
<ng-template #contentTemplate>
<form class="motion-content" [formGroup]="contentForm" (keydown)="onKeyDown($event)">
<!-- 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 -->
<div class="motion-text-controls">
<mat-form-field class="motion-goto-line" *ngIf="highlightedLineOpened">
@ -472,23 +473,20 @@
<mat-icon>cancel</mat-icon>
</button>
<button
type="button"
mat-button
[matMenuTriggerFor]="lineNumberingMenu"
>
<button type="button" mat-button [matMenuTriggerFor]="lineNumberingMenu">
<mat-icon>format_list_numbered</mat-icon>
&nbsp;<span translate>Line numbering</span>
<span *ngIf="lnMode === LineNumberingMode.None">
&nbsp;(<span translate>none</span>)
</span>
<span *ngIf="lnMode === LineNumberingMode.None"> &nbsp;(<span translate>none</span>) </span>
</button>
<button
type="button"
mat-button
[matMenuTriggerFor]="changeRecoMenu"
*ngIf="
motion && !motion.isParagraphBasedAmendment() && allChangingObjects && allChangingObjects.length > 0
motion &&
!motion.isParagraphBasedAmendment() &&
allChangingObjects &&
allChangingObjects.length > 0
"
>
<mat-icon>rate_review</mat-icon>
@ -649,11 +647,17 @@
></os-motion-detail-diff>
<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
*ngIf="
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"
translate
@ -930,11 +934,7 @@
outside
</button>
<mat-divider></mat-divider>
<button
mat-menu-item
*ngIf="!highlightedLineOpened"
(click)="highlightedLineOpened = true"
>
<button mat-menu-item *ngIf="!highlightedLineOpened" (click)="highlightedLineOpened = true">
<mat-icon>redo</mat-icon>
<span translate>Go to line</span>
</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>
</ng-container>
<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 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 }}">
{{ getIcon(key) }}
</mat-icon>
@ -55,18 +55,10 @@
<button mat-icon-button matTooltip="{{ 'Edit' | translate }}" (click)="editPoll()">
<mat-icon inline>edit</mat-icon>
</button>
<button
mat-icon-button
matTooltip="{{ 'Print ballot papers' | translate }}"
(click)="printBallots()"
>
<button mat-icon-button matTooltip="{{ 'Print ballot papers' | translate }}" (click)="printBallots()">
<mat-icon inline>local_printshop</mat-icon>
</button>
<button
mat-icon-button
matTooltip="{{ 'Delete' | translate }}"
(click)="deletePoll()"
>
<button mat-icon-button matTooltip="{{ 'Delete' | translate }}" (click)="deletePoll()">
<mat-icon inline>delete</mat-icon>
</button>
</ng-container>

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

@ -107,7 +107,7 @@
</mat-select>
</div>
<div class="table-container">
<table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort>
<table mat-table [dataSource]="dataSource" matSort>
<!-- Status column -->
<ng-container matColumnDef="status" sticky>
<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>
<!-- Edit button -->
<div class="extra-controls-slot on-transition-fade">
<div class="extra-controls-slot">
<button mat-icon-button (click)="onEditWorkflowButton()">
<mat-icon>edit</mat-icon>
</button>
@ -24,7 +24,7 @@
</div>
<div class="scrollable-matrix">
<table mat-table class="on-transition-fade" [dataSource]="getTableDataSource()">
<table mat-table [dataSource]="getTableDataSource()">
<ng-container matColumnDef="perm" sticky>
<mat-header-cell class="group-head-table-cell" *matHeaderCellDef translate>Permissions</mat-header-cell>
<mat-cell *matCellDef="let perm">
@ -112,13 +112,9 @@
-
</div>
<div *ngIf="state.restriction.length">
<span
*ngFor="
let restriction of state.restriction;
let last = last
"
>
{{ getRestrictionLabel(restriction) | translate }}<span *ngIf="!last">,&nbsp;</span>
<span *ngFor="let restriction of state.restriction; let last = last">
{{ getRestrictionLabel(restriction) | translate
}}<span *ngIf="!last">,&nbsp;</span>
</span>
</div>
</div>
@ -193,7 +189,11 @@
<!-- Select restriction menu -->
<mat-menu matMenuContent #restrictionMenu="matMenu">
<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>
<span>{{ restriction.label | translate }}</span>
</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>
</div>
<div class="table-container">
<table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort>
<table mat-table [dataSource]="dataSource" matSort>
<!-- Status column -->
<ng-container matColumnDef="status" sticky>
<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
*ngIf="editId !== statuteParagraph.id"
mat-button
class="on-transition-fade"
(click)="onEditButton(statuteParagraph)"
mat-icon-button
>
<mat-icon>edit</mat-icon>
</button>
<button
*ngIf="editId === statuteParagraph.id"
mat-button
class="on-transition-fade"
(click)="onCancelUpdate()"
mat-icon-button
>
<button *ngIf="editId === statuteParagraph.id" mat-button (click)="onCancelUpdate()" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<button
*ngIf="editId === statuteParagraph.id"
mat-button
class="on-transition-fade"
(click)="onSaveButton(statuteParagraph)"
mat-icon-button
>
<mat-icon>save</mat-icon>
</button>
<button
mat-button
class="on-transition-fade"
(click)="onDeleteButton(statuteParagraph)"
mat-icon-button
>
<button mat-button (click)="onDeleteButton(statuteParagraph)" mat-icon-button>
<mat-icon>delete</mat-icon>
</button>
</mat-action-row>

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

@ -25,7 +25,7 @@
</div>
<!-- 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()">
<mat-icon>delete</mat-icon>
<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"
(mainEvent)="setEditMode(!editGroup)">
<os-head-bar [mainButton]="true" [nav]="false" (mainEvent)="setEditMode(!editGroup)">
<!-- Title -->
<div class="title-slot">
<h2 translate>Groups</h2>
</div>
</os-head-bar>
<div class="hint-text on-transition-fade">
<div class="hint-text">
<span translate>All your changes are saved immediately.</span>
</div>
<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-panel-title>
{{ app.name | translate }}
@ -19,7 +18,7 @@
</mat-expansion-panel-header>
<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>
<mat-header-cell *matHeaderCellDef translate>Permissions</mat-header-cell>
<mat-cell *matCellDef="let perm">
@ -36,8 +35,11 @@
</mat-header-cell>
<mat-cell *matCellDef="let perm">
<div class="inner-table">
<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]="group.hasPermission(perm.value)"
(change)="togglePerm(group, perm.value)"
></mat-checkbox>
<mat-checkbox *ngIf="group.id === 2" [checked]="true" [disabled]="true"></mat-checkbox>
</div>
</mat-cell>
@ -58,8 +60,14 @@
<div class="os-form-card-mobile" mat-dialog-content>
<form class="edit-form" [formGroup]="groupForm" (keydown)="keyDownFunction($event)">
<mat-form-field>
<input type="text" matInput osAutofocus required formControlName="name"
placeholder="{{ 'New group name' | translate}}">
<input
type="text"
matInput
osAutofocus
required
formControlName="name"
placeholder="{{ 'New group name' | translate }}"
/>
<mat-error *ngIf="groupForm.invalid" translate>Required</mat-error>
</mat-form-field>
</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-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">
{{ option.label | translate }}
</mat-option>
@ -143,7 +143,7 @@
<mat-option value="noerror" translate>Show correct entries only</mat-option>
</mat-select>
<div class="table-container">
<table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort>
<table mat-table [dataSource]="dataSource" matSort>
<!-- Status column -->
<ng-container matColumnDef="status" sticky>
<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;
}
/** helper classes for animation */
.on-transition-fade {
z-index: 100;
}
mat-expansion-panel {
border-radius: 0 !important;
}