Merge pull request #4781 from tsiegleauq/faster-animations
Speed up animations.
This commit is contained in:
commit
cab8dba016
@ -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 })
|
||||
])
|
||||
])
|
||||
]);
|
||||
|
@ -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()"
|
||||
>
|
||||
|
@ -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"
|
||||
|
@ -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 }} </span><span translate>of</span>
|
||||
|
@ -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">
|
||||
|
@ -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=""">
|
||||
<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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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 -->
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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()">
|
||||
|
@ -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] }} </span><span translate>of</span>
|
||||
<span> {{ seenNodes[1] }}</span>
|
||||
|
@ -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,25 +93,19 @@
|
||||
<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()"
|
||||
>
|
||||
<span translate>Save</span>
|
||||
</button>
|
||||
<button type="button" mat-button [mat-dialog-close]="null">
|
||||
<span translate>Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
<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">
|
||||
<span translate>Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
@ -37,7 +37,7 @@
|
||||
*ngIf="!multipleParagraphsAllowed"
|
||||
class="paragraph-select"
|
||||
[checked]="isParagraphSelected(paragraph)"
|
||||
>
|
||||
>
|
||||
</mat-radio-button>
|
||||
<div class="paragraph-text motion-text" [innerHTML]="paragraph.safeHtml"></div>
|
||||
</section>
|
||||
@ -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>
|
||||
|
@ -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>
|
||||
<span translate>Line numbering</span>
|
||||
<span *ngIf="lnMode === LineNumberingMode.None">
|
||||
(<span translate>none</span>)
|
||||
</span>
|
||||
<span *ngIf="lnMode === LineNumberingMode.None"> (<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>
|
||||
@ -546,7 +544,7 @@
|
||||
(click)="deleteModifiedFinalVersion()"
|
||||
>
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
|
@ -4,9 +4,9 @@
|
||||
<span *ngIf="pollIndex"> ({{ 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>
|
||||
|
@ -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>
|
||||
@ -238,7 +238,7 @@
|
||||
*ngIf="hasError(entry, 'Tags')"
|
||||
matTooltip="{{ getVerboseError('Tags') | translate }}"
|
||||
>
|
||||
warning
|
||||
warning
|
||||
</mat-icon>
|
||||
<div *ngFor="let tag of entry.newEntry.csvTags">
|
||||
{{ tag.name }}
|
||||
|
@ -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">, </span>
|
||||
<span *ngFor="let restriction of state.restriction; let last = last">
|
||||
{{ getRestrictionLabel(restriction) | translate
|
||||
}}<span *ngIf="!last">, </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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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=""">
|
||||
<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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user