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

Merge pull request #3917 from MaximilianKrambach/os3/material-icons

Browse Source 
Adding material icons
This commit is contained in:
Sean 2018-10-12 15:20:21 +02:00 committed by GitHub
commit 1b3a287642
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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;