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

Add Material Icon library

Browse Source 
replace font-awesome icons with material icons
This commit is contained in:
Sean Engelhardt 2018-10-11 14:03:44 +02:00 committed by Maximilian Krambach
parent 54ee775c64
commit 2cc9188962
38 changed files with 2284 additions and 2286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/angular.json
View File

@ -23,7 +23,7 @@
"polyfills": "src/polyfills.ts", "polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json", "tsConfig": "src/tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"], "assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"], "styles": ["src/styles.scss", "node_modules/material-design-icons/iconfont/material-icons.css"],
"scripts": [] "scripts": []
}, },
"configurations": { "configurations": {

4357
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
client/package.json
View File

@ -26,13 +26,11 @@
"@angular/platform-browser": "^7.0.0-rc.0", "@angular/platform-browser": "^7.0.0-rc.0",
"@angular/platform-browser-dynamic": "^7.0.0-rc.0", "@angular/platform-browser-dynamic": "^7.0.0-rc.0",
"@angular/router": "^7.0.0-rc.0", "@angular/router": "^7.0.0-rc.0",
"@fortawesome/angular-fontawesome": "0.1.0-10",
"@fortawesome/fontawesome-svg-core": "^1.2.4",
"@fortawesome/free-solid-svg-icons": "^5.3.1",
"@ngx-pwa/local-storage": "^6.1.1", "@ngx-pwa/local-storage": "^6.1.1",
"@ngx-translate/core": "^10.0.2", "@ngx-translate/core": "^10.0.2",
"@ngx-translate/http-loader": "^3.0.1", "@ngx-translate/http-loader": "^3.0.1",
"core-js": "^2.5.4", "core-js": "^2.5.4",
"material-design-icons": "^3.0.1",
"ngx-mat-select-search": "^1.4.0", "ngx-mat-select-search": "^1.4.0",
"roboto-fontface": "^0.10.0", "roboto-fontface": "^0.10.0",
"rxjs": "^6.3.3", "rxjs": "^6.3.3",

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

@ -1,7 +1,7 @@
<mat-toolbar color='primary'> <mat-toolbar color='primary'>
<button *ngIf="plusButton" class='head-button on-transition-fade' (click)=clickPlusButton() <button *ngIf="plusButton" class='head-button on-transition-fade' (click)=clickPlusButton()
mat-fab> mat-fab>
<fa-icon icon='plus'></fa-icon> <mat-icon>add</mat-icon>
</button> </button>
<span class='app-name on-transition-fade'> <span class='app-name on-transition-fade'>
@ -11,15 +11,16 @@
<span class='spacer'></span> <span class='spacer'></span>
<button *ngIf="menuList" class='on-transition-fade' [matMenuTriggerFor]="ellipsisMenu" mat-icon-button> <button *ngIf="menuList" class='on-transition-fade' [matMenuTriggerFor]="ellipsisMenu" mat-icon-button>
<fa-icon icon='ellipsis-v'></fa-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</mat-toolbar> </mat-toolbar>
<mat-menu #ellipsisMenu="matMenu"> <mat-menu #ellipsisMenu="matMenu">
<ng-container *ngFor="let item of menuList"> <ng-container *ngFor="let item of menuList">
<button mat-menu-item *osPerms="item.perm" (click)=clickMenu(item)> <button mat-menu-item *osPerms="item.perm" (click)=clickMenu(item)>
<fa-icon *ngIf="item.icon" [icon]='item.icon'></fa-icon> <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
{{item.text | translate}} {{item.text | translate}}
</button> </button>
</ng-container> </ng-container>

2
client/src/app/shared/components/head-bar/head-bar.component.ts
View File

@ -29,7 +29,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
* myMenu = [ * myMenu = [
* { * {
* text: 'Download All', * text: 'Download All',
* icon: 'download', * icon: 'save_alt',
* action: 'downloadAllFiles' * action: 'downloadAllFiles'
* }, * },
* ]; * ];

2
client/src/app/shared/components/search-value-selector/search-value-selector.component.html
View File

@ -16,7 +16,7 @@
</p> </p>
<mat-chip-list #chipList> <mat-chip-list #chipList>
<mat-chip *ngFor="let selectedItem of thisSelector?.value" (removed)="remove(selectedItem)">{{selectedItem.name}} <mat-chip *ngFor="let selectedItem of thisSelector?.value" (removed)="remove(selectedItem)">{{selectedItem.name}}
<fa-icon matSuffix icon="times" (click)="remove(selectedItem)"></fa-icon> <mat-icon (click)="remove(selectedItem)">cancel</mat-icon>
</mat-chip> </mat-chip>
</mat-chip-list> </mat-chip-list>
</div> </div>

3
client/src/app/shared/components/search-value-selector/search-value-selector.component.scss
View File

@ -1,3 +0,0 @@
fa-icon {
padding-left: 5px;
}

17
client/src/app/shared/shared.module.ts
View File

@ -19,7 +19,8 @@ import {
MatTooltipModule, MatTooltipModule,
MatDatepickerModule, MatDatepickerModule,
MatNativeDateModule, MatNativeDateModule,
DateAdapter DateAdapter,
MatIconModule
} from '@angular/material'; } from '@angular/material';
import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatChipsModule } from '@angular/material'; import { MatChipsModule } from '@angular/material';
@ -31,11 +32,6 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
// FontAwesome modules
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
// ngx-translate // ngx-translate
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
@ -52,8 +48,6 @@ import { SearchValueSelectorComponent } from './components/search-value-selector
import { OpenSlidesDateAdapter } from './date-adapter'; import { OpenSlidesDateAdapter } from './date-adapter';
import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.component'; import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.component';
library.add(fas);
/** /**
* Share Module for all "dumb" components and pipes. * Share Module for all "dumb" components and pipes.
* *
@ -90,7 +84,10 @@ library.add(fas);
MatSnackBarModule, MatSnackBarModule,
MatChipsModule, MatChipsModule,
MatTooltipModule, MatTooltipModule,
FontAwesomeModule, // TODO: there is an error with missing icons
// we either wait or include a fixed version manually (dirty)
// https://github.com/google/material-design-icons/issues/786
MatIconModule,
TranslateModule.forChild(), TranslateModule.forChild(),
RouterModule, RouterModule,
NgxMatSelectSearchModule NgxMatSelectSearchModule
@ -119,8 +116,8 @@ library.add(fas);
MatSnackBarModule, MatSnackBarModule,
MatChipsModule, MatChipsModule,
MatTooltipModule, MatTooltipModule,
MatIconModule,
NgxMatSelectSearchModule, NgxMatSelectSearchModule,
FontAwesomeModule,
TranslateModule, TranslateModule,
PermsDirective, PermsDirective,
DomChangeDirective, DomChangeDirective,

2
client/src/app/site/agenda/agenda.config.ts
View File

@ -9,7 +9,7 @@ export const AgendaAppConfig: AppConfig = {
{ {
route: '/agenda', route: '/agenda',
displayName: 'Agenda', displayName: 'Agenda',
icon: 'calendar', icon: 'today', // 'calendar_today' aligns wrong!
weight: 200, weight: 200,
permission: 'agenda.can_see' permission: 'agenda.can_see'
} }

2
client/src/app/site/assignments/assignment-list/assignment-list.component.ts
View File

@ -22,7 +22,7 @@ export class AssignmentListComponent extends ListViewBaseComponent<ViewAssignmen
public assignmentMenu = [ public assignmentMenu = [
{ {
text: 'Download All', text: 'Download All',
icon: 'download', icon: 'save_alt',
action: 'downloadAssignmentButton' action: 'downloadAssignmentButton'
} }
]; ];

2
client/src/app/site/assignments/assignments.config.ts
View File

@ -8,7 +8,7 @@ export const AssignmentsAppConfig: AppConfig = {
{ {
route: '/assignments', route: '/assignments',
displayName: 'Elections', displayName: 'Elections',
icon: 'chart-pie', icon: 'poll', // TODO not yet available: 'how_to_vote',
weight: 400, weight: 400,
permission: 'assignments.can_see' permission: 'assignments.can_see'
} }

4
client/src/app/site/common/components/start/start.component.html
View File

@ -8,9 +8,9 @@
<span> {{welcomeText | translate}} </span> <span> {{welcomeText | translate}} </span>
<button mat-button (click)="TranslateTest()">Translate in console</button> <button mat-button (click)="TranslateTest()">Translate in console</button>
<br/> <br />
<button mat-button (click)="giveDataStore()">print the dataStore</button> <button mat-button (click)="giveDataStore()">print the dataStore</button>
<br/> <br />
<input matInput #motionNumber placeholder="Number of Motions to add" value="100"> <input matInput #motionNumber placeholder="Number of Motions to add" value="100">
<button mat-button (click)="createMotions(motionNumber.value)">Add Random Motions</button> <button mat-button (click)="createMotions(motionNumber.value)">Add Random Motions</button>
</div> </div>

2
client/src/app/site/config/components/config-field/config-field.component.html
View File

@ -21,7 +21,7 @@
<mat-label translate>{{ configItem.label }}</mat-label> <mat-label translate>{{ configItem.label }}</mat-label>
<mat-hint *ngIf="configItem.helpText" translate>{{ configItem.helpText }}</mat-hint> <mat-hint *ngIf="configItem.helpText" translate>{{ configItem.helpText }}</mat-hint>
<span matSuffix> <span matSuffix>
<fa-icon pull="right" class="text-success" *ngIf="updateSuccessIcon" icon='check-circle'></fa-icon> <mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon>
</span> </span>
<mat-error *ngIf="error"> <mat-error *ngIf="error">
{{ error }} {{ error }}

2
client/src/app/site/config/config.config.ts
View File

@ -8,7 +8,7 @@ export const ConfigAppConfig: AppConfig = {
{ {
route: '/settings', route: '/settings',
displayName: 'Settings', displayName: 'Settings',
icon: 'cog', icon: 'settings',
weight: 700, weight: 700,
permission: 'core.can_manage_config' permission: 'core.can_manage_config'
} }

3
client/src/app/site/login/components/login-mask/login-mask.component.html
View File

@ -8,7 +8,8 @@
<mat-form-field> <mat-form-field>
<input matInput required placeholder="Password" formControlName="password" [type]="!hide ? 'password' : 'text'" <input matInput required placeholder="Password" formControlName="password" [type]="!hide ? 'password' : 'text'"
[errorStateMatcher]="parentErrorStateMatcher"> [errorStateMatcher]="parentErrorStateMatcher">
<fa-icon matSuffix [icon]="!hide ? 'eye-slash' : 'eye'" (click)="hide = !hide"></fa-icon> <mat-icon matSuffix (click)="hide = !hide">{{ hide ? "visibility_off" : "visibility_on" }}</mat-icon>
<mat-error>{{loginErrorMsg}}</mat-error> <mat-error>{{loginErrorMsg}}</mat-error>
</mat-form-field> </mat-form-field>

2
client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html
View File

@ -22,7 +22,7 @@
<ng-container matColumnDef="download"> <ng-container matColumnDef="download">
<mat-header-cell *matHeaderCellDef mat-sort-header> Download </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> Download </mat-header-cell>
<mat-cell (click)="download(file)" *matCellDef="let file"> <mat-cell (click)="download(file)" *matCellDef="let file">
<fa-icon icon='download'></fa-icon> <mat-icon>save_alt</mat-icon>
</mat-cell> </mat-cell>
</ng-container> </ng-container>

2
client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts
View File

@ -24,7 +24,7 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile>
public extraMenu = [ public extraMenu = [
{ {
text: 'Download', text: 'Download',
icon: 'download', icon: 'save_alt',
action: 'downloadAllFiles' action: 'downloadAllFiles'
} }
]; ];

2
client/src/app/site/mediafiles/mediafile.config.ts
View File

@ -8,7 +8,7 @@ export const MediafileAppConfig: AppConfig = {
{ {
route: '/mediafiles', route: '/mediafiles',
displayName: 'Files', displayName: 'Files',
icon: 'paperclip', icon: 'attach_file',
weight: 600, weight: 600,
permission: 'mediafiles.can_see' permission: 'mediafiles.can_see'
} }

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

@ -2,7 +2,7 @@
</os-head-bar> </os-head-bar>
<div class='custom-table-header on-transition-fade'> <div class='custom-table-header on-transition-fade'>
<button mat-button> <button mat-button>
<fa-icon icon="search"></fa-icon> <mat-icon>search</mat-icon>
</button> </button>
</div> </div>
<mat-accordion class="os-card"> <mat-accordion class="os-card">
@ -40,18 +40,18 @@
<mat-action-row> <mat-action-row>
<button *ngIf="!category.edit" mat-button class='on-transition-fade' (click)=onEditButton(category) <button *ngIf="!category.edit" mat-button class='on-transition-fade' (click)=onEditButton(category)
mat-icon-button> mat-icon-button>
<fa-icon icon='pen'></fa-icon> <mat-icon>add</mat-icon>
</button> </button>
<button *ngIf="category.edit" mat-button class='on-transition-fade' (click)=onCancelButton(category) <button *ngIf="category.edit" mat-button class='on-transition-fade' (click)=onCancelButton(category)
mat-icon-button> mat-icon-button>
<fa-icon icon='times'></fa-icon> <mat-icon>close</mat-icon>
</button> </button>
<button *ngIf="category.edit" mat-button class='on-transition-fade' (click)=onSaveButton(category) <button *ngIf="category.edit" mat-button class='on-transition-fade' (click)=onSaveButton(category)
mat-icon-button> mat-icon-button>
<fa-icon icon='save'></fa-icon> <mat-icon>save</mat-icon>
</button> </button>
<button mat-button class='on-transition-fade' (click)=onDeleteButton(category) mat-icon-button> <button mat-button class='on-transition-fade' (click)=onDeleteButton(category) mat-icon-button>
<fa-icon icon='trash'></fa-icon> <mat-icon>delete</mat-icon>
</button> </button>
</mat-action-row> </mat-action-row>
</mat-expansion-panel> </mat-expansion-panel>

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

@ -38,14 +38,14 @@
{{ section.name }} {{ section.name }}
</div> </div>
<div class="read"> <div class="read">
<fa-icon icon="eye"></fa-icon> <mat-icon>visibility</mat-icon>
{{ section.read_groups }} {{ section.read_groups }}
<ng-container *ngIf="section.read_groups.length === 0"> <ng-container *ngIf="section.read_groups.length === 0">
&ndash; &ndash;
</ng-container> </ng-container>
</div> </div>
<div class="write"> <div class="write">
<fa-icon icon="pen"></fa-icon> <mat-icon>add</mat-icon>
{{ section.write_groups }} {{ section.write_groups }}
<ng-container *ngIf="section.write_groups.length === 0"> <ng-container *ngIf="section.write_groups.length === 0">
&ndash; &ndash;
@ -90,18 +90,18 @@
<mat-action-row> <mat-action-row>
<button *ngIf="editId !== section.id" mat-button class="on-transition-fade" (click)="onEditButton(section)" <button *ngIf="editId !== section.id" mat-button class="on-transition-fade" (click)="onEditButton(section)"
mat-icon-button> mat-icon-button>
<fa-icon icon='pen'></fa-icon> <mat-icon>add</mat-icon>
</button> </button>
<button *ngIf="editId === section.id" mat-button class="on-transition-fade" (click)="editId = null" <button *ngIf="editId === section.id" mat-button class="on-transition-fade" (click)="editId = null"
mat-icon-button> mat-icon-button>
<fa-icon icon='times'></fa-icon> <mat-icon>cancel</mat-icon>
</button> </button>
<button *ngIf="editId === section.id" mat-button class="on-transition-fade" (click)="onSaveButton(section)" <button *ngIf="editId === section.id" mat-button class="on-transition-fade" (click)="onSaveButton(section)"
mat-icon-button> mat-icon-button>
<fa-icon icon='save'></fa-icon> <mat-icon>save</mat-icon>
</button> </button>
<button mat-button class='on-transition-fade' (click)=onDeleteButton(section) mat-icon-button> <button mat-button class='on-transition-fade' (click)=onDeleteButton(section) mat-icon-button>
<fa-icon icon='trash'></fa-icon> <mat-icon>delete</mat-icon>
</button> </button>
</mat-action-row> </mat-action-row>
</mat-expansion-panel> </mat-expansion-panel>

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

@ -2,8 +2,8 @@
<button (click)='editMotionButton()' [ngClass]="{'save-button': editMotion}" class='generic-mini-button on-transition-fade' <button (click)='editMotionButton()' [ngClass]="{'save-button': editMotion}" class='generic-mini-button on-transition-fade'
mat-mini-fab> mat-mini-fab>
<fa-icon *ngIf="!editMotion" icon='pen'></fa-icon> <mat-icon *ngIf="!editMotion">add</mat-icon>
<fa-icon *ngIf="editMotion" icon='check'></fa-icon> <mat-icon *ngIf="editMotion">check</mat-icon>
</button> </button>
<div class='motion-title on-transition-fade'> <div class='motion-title on-transition-fade'>
@ -24,13 +24,13 @@
<!-- Button on the right--> <!-- Button on the right-->
<div *ngIf="editMotion"> <div *ngIf="editMotion">
<button (click)='cancelEditMotionButton()' class='on-transition-fade' color="warn" mat-raised-button> <button (click)='cancelEditMotionButton()' class='on-transition-fade' color="warn" mat-raised-button>
<span translate>Abort</span> <span translate>Cancel</span>
<fa-icon class="icon-text-distance" icon='times'></fa-icon> <mat-icon class="icon-text-distance">cancel</mat-icon>
</button> </button>
</div> </div>
<div *ngIf="!editMotion"> <div *ngIf="!editMotion">
<button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="motionExtraMenu"> <button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="motionExtraMenu">
<fa-icon icon='ellipsis-v'></fa-icon> <mat-icon icon>more_vert</mat-icon>
</button> </button>
</div> </div>
@ -53,7 +53,7 @@
<mat-expansion-panel #metaInfoPanel [expanded]='this.editMotion && this.newMotion' class='meta-info-block meta-info-panel'> <mat-expansion-panel #metaInfoPanel [expanded]='this.editMotion && this.newMotion' class='meta-info-block meta-info-panel'>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
<fa-icon icon='info-circle' [fixedWidth]="true"></fa-icon> <mat-icon>info</mat-icon>
<span translate>Meta information</span> <span translate>Meta information</span>
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
@ -68,7 +68,7 @@
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
<fa-icon icon='file-signature' [fixedWidth]="true"></fa-icon> <mat-icon icon>speaker_notes</mat-icon>
<span translate>Personal note</span> <span translate>Personal note</span>
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
@ -79,7 +79,7 @@
<mat-expansion-panel #contentPanel [expanded]='true' class='content-panel'> <mat-expansion-panel #contentPanel [expanded]='true' class='content-panel'>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
<fa-icon icon='align-left' [fixedWidth]="true"></fa-icon> <mat-icon>format_align_left</mat-icon>
<span translate>Content</span> <span translate>Content</span>
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
@ -107,8 +107,8 @@
<mat-card-title> <mat-card-title>
<span translate>Personal Note</span> <span translate>Personal Note</span>
<div class="title-right"> <div class="title-right">
<fa-icon icon="pen" [fixedWidth]=" true"></fa-icon> <mat-icon>add</mat-icon>
<fa-icon icon="ellipsis-v" [fixedWidth]="true"></fa-icon> <mat-icon>more_vert</mat-icon>
</div> </div>
</mat-card-title> </mat-card-title>
@ -191,7 +191,7 @@
<mat-option *ngFor="let state of motionCopy.nextStates" [value]="state.id">{{state}}</mat-option> <mat-option *ngFor="let state of motionCopy.nextStates" [value]="state.id">{{state}}</mat-option>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-option> <mat-option>
<fa-icon icon='exclamation-triangle'></fa-icon><span translate>Reset State</span> <mat-icon>replay</mat-icon><span translate>Reset State</span>
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
@ -211,7 +211,7 @@
<!-- TODO has no effect --> <!-- TODO has no effect -->
<mat-option> <mat-option>
<fa-icon icon='exclamation-triangle'></fa-icon> <mat-icon>replay</mat-icon>
<span translate>Reset recommendation</span> <span translate>Reset recommendation</span>
</mat-option> </mat-option>
</mat-select> </mat-select>
@ -254,10 +254,10 @@
<!-- Line Number and Diff buttons--> <!-- Line Number and Diff buttons-->
<div class="motion-text-controls"> <div class="motion-text-controls">
<button type="button" mat-icon-button [matMenuTriggerFor]="lineNumberingMenu"> <button type="button" mat-icon-button [matMenuTriggerFor]="lineNumberingMenu">
<fa-icon icon="list-ol" [fixedWidth]="true"></fa-icon> <mat-icon>format_list_numbered</mat-icon>
</button> </button>
<button type="button" mat-icon-button [matMenuTriggerFor]="changeRecoMenu"> <button type="button" mat-icon-button [matMenuTriggerFor]="changeRecoMenu">
<fa-icon icon="edit" [fixedWidth]="true"></fa-icon> <mat-icon>rate_review</mat-icon>
</button> </button>
</div> </div>

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

@ -25,7 +25,7 @@ span {
} }
mat-panel-title { mat-panel-title {
fa-icon { mat-icon {
margin-right: 35px; //on line with text margin-right: 35px; //on line with text
} }
} }
@ -38,7 +38,7 @@ mat-panel-title {
font-size: 80%; font-size: 80%;
color: gray; color: gray;
fa-icon { mat-icon {
margin-left: 5px; margin-left: 5px;
} }
} }
@ -53,7 +53,7 @@ mat-panel-title {
} }
.mat-form-field-label-wrapper { .mat-form-field-label-wrapper {
fa-icon { mat-icon {
margin-left: 5px; margin-left: 5px;
} }
} }
@ -131,7 +131,7 @@ mat-expansion-panel {
.title-right { .title-right {
float: right; float: right;
fa-icon { mat-icon {
padding-left: 10px; padding-left: 10px;
} }
} }

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

@ -42,7 +42,7 @@
<mat-header-cell *matHeaderCellDef mat-sort-header> State </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> State </mat-header-cell>
<mat-cell *matCellDef="let motion"> <mat-cell *matCellDef="let motion">
<div *ngIf='isDisplayIcon(motion.state) && motion.state' class='innerTable'> <div *ngIf='isDisplayIcon(motion.state) && motion.state' class='innerTable'>
<fa-icon icon={{getStateIcon(motion.state)}}></fa-icon> <mat-icon>{{getStateIcon(motion.state)}}></mat-icon>
</div> </div>
</mat-cell> </mat-cell>
</ng-container> </ng-container>

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

@ -38,7 +38,7 @@
flex: 0 0 30px; flex: 0 0 30px;
text-align: center; text-align: center;
fa-icon { mat-icon {
font-size: 150%; font-size: 150%;
} }
} }

8
client/src/app/site/motions/components/motion-list/motion-list.component.ts
View File

@ -36,7 +36,7 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
public motionMenuList = [ public motionMenuList = [
{ {
text: 'Download', text: 'Download',
icon: 'download', icon: 'save_alt',
action: 'downloadMotions' action: 'downloadMotions'
}, },
{ {
@ -98,11 +98,11 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
public getStateIcon(state: WorkflowState): string { public getStateIcon(state: WorkflowState): string {
const stateName = state.name; const stateName = state.name;
if (stateName === 'accepted') { if (stateName === 'accepted') {
return 'thumbs-up'; return 'thumb_up';
} else if (stateName === 'rejected') { } else if (stateName === 'rejected') {
return 'thumbs-down'; return 'thumb_down';
} else if (stateName === 'not decided') { } else if (stateName === 'not decided') {
return 'question'; return 'help';
} else { } else {
return ''; return '';
} }

2
client/src/app/site/motions/motions.config.ts
View File

@ -22,7 +22,7 @@ export const MotionsAppConfig: AppConfig = {
{ {
route: '/motions', route: '/motions',
displayName: 'Motions', displayName: 'Motions',
icon: 'file-alt', icon: 'assignment',
weight: 300, weight: 300,
permission: 'motions.can_see' permission: 'motions.can_see'
} }

19
client/src/app/site/site.component.html
View File

@ -14,24 +14,24 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-nav-list> <mat-nav-list>
<a mat-list-item [matMenuTriggerFor]="languageMenu"> <a mat-list-item [matMenuTriggerFor]="languageMenu">
<fa-icon icon='globe-americas'></fa-icon> <mat-icon>language</mat-icon>
<span> {{getLangName(this.translate.currentLang)}} </span> <span> {{getLangName(this.translate.currentLang)}} </span>
</a> </a>
<a *ngIf="isLoggedIn" (click)='editProfile()' mat-list-item> <a *ngIf="isLoggedIn" (click)='editProfile()' mat-list-item>
<fa-icon icon='user-cog'></fa-icon> <mat-icon>person</mat-icon>
<span translate>Edit Profile</span> <span translate>Edit Profile</span>
</a> </a>
<a *ngIf="isLoggedIn" (click)='changePassword()' mat-list-item> <a *ngIf="isLoggedIn" (click)='changePassword()' mat-list-item>
<fa-icon icon='key'></fa-icon> <mat-icon>vpn_key</mat-icon>
<span translate>Change Password</span> <span translate>Change Password</span>
</a> </a>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<a *ngIf="isLoggedIn" (click)='logout()' mat-list-item> <a *ngIf="isLoggedIn" (click)='logout()' mat-list-item>
<fa-icon icon='sign-out-alt'></fa-icon> <mat-icon>exit_to_app</mat-icon>
<span translate>Logout</span> <span translate>Logout</span>
</a> </a>
<a *ngIf="!isLoggedIn" routerLink='/login' mat-list-item> <a *ngIf="!isLoggedIn" routerLink='/login' mat-list-item>
<fa-icon icon='sign-out-alt'></fa-icon> <mat-icon>exit_to_app</mat-icon>
<span translate>Login</span> <span translate>Login</span>
</a> </a>
</mat-nav-list> </mat-nav-list>
@ -48,13 +48,12 @@
<span *ngFor="let entry of mainMenuService.entries"> <span *ngFor="let entry of mainMenuService.entries">
<a [@navItemAnim] *osPerms="entry.permission" mat-list-item (click)='toggleSideNav()' <a [@navItemAnim] *osPerms="entry.permission" mat-list-item (click)='toggleSideNav()'
[routerLink]='entry.route' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}"> [routerLink]='entry.route' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}">
<fa-icon [icon]='entry.icon'></fa-icon> <mat-icon>{{entry.icon}}</mat-icon>{{ entry.displayName | translate}}
{{ entry.displayName | translate}}
</a> </a>
</span> </span>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<a [@navItemAnim] *osPerms="'core.can_see_projector'" mat-list-item routerLink='/projector' routerLinkActive='active' (click)='toggleSideNav()'> <a [@navItemAnim] *osPerms="'core.can_see_projector'" mat-list-item routerLink='/projector' routerLinkActive='active' (click)='toggleSideNav()'>
<fa-icon icon='video'></fa-icon> <mat-icon>videocam</mat-icon>
<span translate>Projector</span> <span translate>Projector</span>
</a> </a>
</mat-nav-list> </mat-nav-list>
@ -67,13 +66,13 @@
<!-- show/hide menu button --> <!-- show/hide menu button -->
<button mat-icon-button *ngIf="vp.isMobile" (click)='sideNav.toggle()'> <button mat-icon-button *ngIf="vp.isMobile" (click)='sideNav.toggle()'>
<fa-icon icon='bars'></fa-icon> <mat-icon>menu</mat-icon>
</button> </button>
<!-- glob search and generic menu on the right --> <!-- glob search and generic menu on the right -->
<span class='spacer'></span> <span class='spacer'></span>
<button mat-icon-button (click)='sideNav.toggle()'> <button mat-icon-button (click)='sideNav.toggle()'>
<fa-icon icon='search'></fa-icon> <mat-icon>search</mat-icon>
</button> </button>
</mat-toolbar> </mat-toolbar>
</header> </header>

8
client/src/app/site/site.component.scss-theme.scss
View File

@ -14,7 +14,7 @@
/** nav panel on the left */ /** nav panel on the left */
mat-sidenav { mat-sidenav {
/** rules for icons in the whole site-view */ /** rules for icons in the whole site-view */
.ng-fa-icon { mat-icon {
min-width: 20px; //puts the text to the right on the same level min-width: 20px; //puts the text to the right on the same level
margin-right: 10px; // the distance from the icon to the text margin-right: 10px; // the distance from the icon to the text
} }
@ -47,7 +47,7 @@
border-top-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25);
} }
fa-icon { mat-icon {
color: mat-color($background, raised-button); color: mat-color($background, raised-button);
} }
@ -62,7 +62,7 @@
/** style and align the nav icons the icons*/ /** style and align the nav icons the icons*/
.main-nav { .main-nav {
fa-icon { mat-icon {
color: mat-color($foreground, icon); color: mat-color($foreground, icon);
} }
span { span {
@ -73,7 +73,7 @@
/** style the active link */ /** style the active link */
.active { .active {
.ng-fa-icon { mat-icon {
color: mat-color($primary); color: mat-color($primary);
} }
span { span {

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

@ -1,8 +1,8 @@
<mat-toolbar color='primary'> <mat-toolbar color='primary'>
<button *osPerms="'users.can_manage'" (click)='newGroupButton()' class='generic-mini-button on-transition-fade' <button *osPerms="'users.can_manage'" (click)='newGroupButton()' class='generic-mini-button on-transition-fade'
mat-mini-fab> mat-mini-fab>
<fa-icon *ngIf="!newGroup" icon='plus'></fa-icon> <mat-icon *ngIf="!newGroup">add</mat-icon>
<fa-icon *ngIf="newGroup" icon='times'></fa-icon> <mat-icon *ngIf="newGroup">cancel</mat-icon>
</button> </button>
<div class="on-transition-fade"> <div class="on-transition-fade">
@ -19,7 +19,7 @@
</mat-form-field> </mat-form-field>
<button type="submit" mat-mini-fab color="primary"> <button type="submit" mat-mini-fab color="primary">
<fa-icon icon="save"></fa-icon> <mat-icon>save</mat-icon>
</button> </button>
</form> </form>
</div> </div>
@ -31,15 +31,15 @@
</mat-form-field> </mat-form-field>
<button type="submit" mat-mini-fab color="primary"> <button type="submit" mat-mini-fab color="primary">
<fa-icon icon="save"></fa-icon> <mat-icon>save</mat-icon>>
</button> </button>
<button type="button" mat-mini-fab color="warn" (click)="deleteSelectedGroup()" [disabled]="isProtected(selectedGroup)"> <button type="button" mat-mini-fab color="warn" (click)="deleteSelectedGroup()" [disabled]="isProtected(selectedGroup)">
<fa-icon icon="trash"></fa-icon> <mat-icon>delete</mat-icon>
</button> </button>
<button type="button" mat-mini-fab color="primary" (click)="cancelEditing()"> <button type="button" mat-mini-fab color="primary" (click)="cancelEditing()">
<fa-icon icon="times"></fa-icon> <mat-icon>cancel</mat-icon>
</button> </button>
</form> </form>
</div> </div>

12
client/src/app/site/users/components/user-detail/user-detail.component.html
View File

@ -2,8 +2,8 @@
<button *osPerms="'users.can_manage';or:ownPage" (click)='editUserButton()' [ngClass]="{'save-button': editUser}" <button *osPerms="'users.can_manage';or:ownPage" (click)='editUserButton()' [ngClass]="{'save-button': editUser}"
class='generic-mini-button on-transition-fade' mat-mini-fab> class='generic-mini-button on-transition-fade' mat-mini-fab>
<fa-icon *ngIf='!editUser' icon='pen'></fa-icon> <mat-icon *ngIf='!editUser'>add</mat-icon>
<fa-icon *ngIf='editUser' icon='check'></fa-icon> <mat-icon *ngIf='editUser'>check</mat-icon>
</button> </button>
<div class="on-transition-fade"> <div class="on-transition-fade">
@ -23,13 +23,13 @@
<!-- Button on the right--> <!-- Button on the right-->
<div *ngIf="editUser"> <div *ngIf="editUser">
<button (click)='cancelEditMotionButton()' class='on-transition-fade' color="warn" mat-raised-button> <button (click)='cancelEditMotionButton()' class='on-transition-fade' color="warn" mat-raised-button>
<span translate>Abort</span> <span translate>Cancel</span>
<fa-icon class="icon-text-distance" icon='times'></fa-icon> <mat-icon class="icon-text-distance">cancel</mat-icon>
</button> </button>
</div> </div>
<div *ngIf="!editUser"> <div *ngIf="!editUser">
<button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="userExtraMenu"> <button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="userExtraMenu">
<fa-icon icon='ellipsis-v'></fa-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
@ -102,7 +102,7 @@
[value]='user.initialPassword'> [value]='user.initialPassword'>
<mat-hint align="end">Generate</mat-hint> <mat-hint align="end">Generate</mat-hint>
<button type="button" mat-button matSuffix mat-icon-button [disabled]='!newUser' (click)='generatePassword()'> <button type="button" mat-button matSuffix mat-icon-button [disabled]='!newUser' (click)='generatePassword()'>
<fa-icon icon='magic'></fa-icon> <mat-icon>sync_problem</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
</div> </div>

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

@ -24,12 +24,12 @@
<mat-cell *matCellDef="let user"> <mat-cell *matCellDef="let user">
<div class='groupsCell'> <div class='groupsCell'>
<span *ngIf="user.groups.length > 0"> <span *ngIf="user.groups.length > 0">
<fa-icon icon="users"></fa-icon> <mat-icon>people</mat-icon>
{{user.groups}} {{user.groups}}
</span> </span>
<br *ngIf="user.groups && user.structureLevel"> <br *ngIf="user.groups && user.structureLevel">
<span *ngIf="user.structureLevel"> <span *ngIf="user.structureLevel">
<fa-icon icon="flag"></fa-icon> <mat-icon>flag</mat-icon>
{{user.structureLevel}} {{user.structureLevel}}
</span> </span>
</div> </div>
@ -41,7 +41,7 @@
<mat-header-cell *matHeaderCellDef mat-sort-header> Presence </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> Presence </mat-header-cell>
<mat-cell *matCellDef="let user"> <mat-cell *matCellDef="let user">
<div *ngIf="user.isActive"> <div *ngIf="user.isActive">
<fa-icon icon="check-square"></fa-icon> <mat-icon>check_box</mat-icon>
<span translate>Present</span> <span translate>Present</span>
</div> </div>
</mat-cell> </mat-cell>

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

@ -3,7 +3,7 @@
vertical-align: middle; vertical-align: middle;
line-height: normal; line-height: normal;
fa-icon { mat-icon {
font-size: 80%; font-size: 80%;
} }
} }
@ -20,7 +20,7 @@
.mat-column-presence { .mat-column-presence {
flex: 0 0 60px; flex: 0 0 60px;
fa-icon { mat-icon {
font-size: 100%; font-size: 100%;
margin-right: 5px; margin-right: 5px;
} }

6
client/src/app/site/users/components/user-list/user-list.component.ts
View File

@ -23,18 +23,18 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
public userMenuList = [ public userMenuList = [
{ {
text: 'Groups', text: 'Groups',
icon: 'users', icon: 'people',
action: 'toGroups', action: 'toGroups',
perm: 'users.can_manage' perm: 'users.can_manage'
}, },
{ {
text: 'Import', text: 'Import',
icon: 'download', icon: 'save_alt',
action: 'toGroups' action: 'toGroups'
}, },
{ {
text: 'Export', text: 'Export',
icon: 'file-export', icon: 'archive',
action: 'toGroups' action: 'toGroups'
} }
]; ];

2
client/src/app/site/users/users.config.ts
View File

@ -14,7 +14,7 @@ export const UsersAppConfig: AppConfig = {
{ {
route: '/users', route: '/users',
displayName: 'Participants', displayName: 'Participants',
icon: 'user', icon: 'people',
weight: 500, weight: 500,
permission: 'users.can_see_name' permission: 'users.can_see_name'
} }

2
client/src/assets/i18n/de.json
View File

@ -1,5 +1,5 @@
{ {
"Abort": "", "Cancel": "",
"About Me": "", "About Me": "",
"Category": "", "Category": "",
"Change Password": "Passwort ändern", "Change Password": "Passwort ändern",

2
client/src/assets/i18n/en.json
View File

@ -1,5 +1,5 @@
{ {
"Abort": "", "Cancel": "",
"About Me": "", "About Me": "",
"Category": "", "Category": "",
"Change Password": "", "Change Password": "",

2
client/src/assets/i18n/fr.json
View File

@ -1,5 +1,5 @@
{ {
"Abort": "", "Cancel": "",
"About Me": "", "About Me": "",
"Category": "", "Category": "",
"Change Password": "", "Change Password": "",

4
client/src/styles.scss
View File

@ -12,9 +12,13 @@
@include angular-material-theme($openslides-theme); @include angular-material-theme($openslides-theme);
@include openslides-components-theme($openslides-theme); @include openslides-components-theme($openslides-theme);
* { * {
font-family: Roboto, Arial, Helvetica, sans-serif; font-family: Roboto, Arial, Helvetica, sans-serif;
} }
mat-icon {
font-family: MaterialIcons-Regular;
}
body { body {
// background: #e8eaed; // background: #e8eaed;