Adds a new component for icons

- An icon followed by text (or something else) can replaced by this new component, to verify a unified size and layout.
- Replaces also existing components with this new one.

client/src/app/shared/components/icon-container/icon-container.component.html

@@ -0,0 +1,4 @@
+<mat-icon>{{ icon }}</mat-icon>
+<span class="content-node">
+    <ng-content></ng-content>
+</span>

client/src/app/shared/components/icon-container/icon-container.component.scss

@@ -0,0 +1,39 @@
+os-icon-container {
+    display: flex;
+    align-items: center;
+
+    & + & {
+        margin-top: 5px;
+    }
+
+    &.medium-container {
+        $size: 18px;
+        line-height: $size;
+
+        mat-icon {
+            font-size: $size;
+            height: $size;
+            width: $size;
+        }
+    }
+
+    &.large-container {
+        $size: 24px;
+        line-height: $size;
+
+        mat-icon {
+            font-size: $size;
+            width: $size;
+            height: $size;
+        }
+
+        .content-node {
+            font-size: 16px;
+            font-weight: 500;
+        }
+    }
+
+    .content-node {
+        margin: auto 5px;
+    }
+}

client/src/app/shared/components/icon-container/icon-container.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconContainerComponent } from './icon-container.component';
+import { E2EImportsModule } from 'e2e-imports.module';
+
+describe('IconContainerComponent', () => {
+    let component: IconContainerComponent;
+    let fixture: ComponentFixture<IconContainerComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(IconContainerComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

client/src/app/shared/components/icon-container/icon-container.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, HostBinding } from '@angular/core';
+
+@Component({
+    selector: 'os-icon-container',
+    templateUrl: './icon-container.component.html',
+    styleUrls: ['./icon-container.component.scss']
+})
+export class IconContainerComponent {
+    /**
+     * HostBinding to add the necessary class related to the size.
+     */
+    @HostBinding('class')
+    public get classes(): string {
+        switch (this.size) {
+            case 'medium':
+                return 'medium-container';
+            case 'large':
+                return 'large-container';
+        }
+    }
+
+    /**
+     * Input for the used icon.
+     */
+    @Input()
+    public icon: string;
+
+    /**
+     * Optional size property. Can be large, if needed.
+     */
+    @Input()
+    public size: 'medium' | 'large' = 'medium';
+}

client/src/app/shared/shared.module.ts

@@ -88,6 +88,7 @@ import { SpeakerButtonComponent } from './components/speaker-button/speaker-butt
 import { GridLayoutComponent } from './components/grid-layout/grid-layout.component';
 import { TileComponent } from './components/tile/tile.component';
 import { BlockTileComponent } from './components/block-tile/block-tile.component';
+import { IconContainerComponent } from './components/icon-container/icon-container.component';
 
 /**
  * Share Module for all "dumb" components and pipes.
@@ -217,7 +218,8 @@ import { BlockTileComponent } from './components/block-tile/block-tile.component
         GridLayoutComponent,
         TileComponent,
         BlockTileComponent,
-        ScrollingModule
+        ScrollingModule,
+        IconContainerComponent
     ],
     declarations: [
         PermsDirective,
@@ -249,7 +251,8 @@ import { BlockTileComponent } from './components/block-tile/block-tile.component
         SpeakerButtonComponent,
         GridLayoutComponent,
         TileComponent,
-        BlockTileComponent
+        BlockTileComponent,
+        IconContainerComponent
     ],
     providers: [
         { provide: DateAdapter, useClass: OpenSlidesDateAdapter },

client/src/app/site/agenda/components/agenda-list/agenda-list.component.html

@@ -44,8 +44,7 @@
             <mat-header-cell *matHeaderCellDef mat-sort-header>Topic</mat-header-cell>
             <mat-cell *matCellDef="let item">
                 <div [ngStyle]="{ 'margin-left': item.level * 25 + 'px' }">
-                    <span *ngIf="item.closed"> <mat-icon class="done-check">check</mat-icon> </span>
+                    <os-icon-container [icon]="item.closed ? 'check' : null" size="large">{{ item.getListTitle() }}</os-icon-container>
-                    <span class="table-view-list-title">{{ item.getListTitle() }}</span>
                 </div>
             </mat-cell>
         </ng-container>
@@ -57,16 +56,13 @@
                 <div class="fill">
                     <div class="info-col-items">
                         <div *osPerms="'agenda.can_manage'; and: item.verboseType">
-                            <mat-icon>visibility</mat-icon>
+                            <os-icon-container icon="visibility">{{ item.verboseType | translate }}</os-icon-container>
-                            {{ item.verboseType | translate }}
                         </div>
-                        <div *ngIf="item.duration">
+                        <div *ngIf="item.duration" class="spacer-top-5">
-                            <mat-icon>access_time</mat-icon>
+                            <os-icon-container icon="access_time">{{ durationService.durationToString(item.duration, 'h') }}</os-icon-container>
-                            {{ durationService.durationToString(item.duration, 'h') }}
                         </div>
-                        <div *ngIf="item.comment">
+                        <div *ngIf="item.comment" class="spacer-top-5">
-                            <mat-icon>comment</mat-icon>
+                            <os-icon-container icon="comment">{{ item.comment }}</os-icon-container>
-                            {{ item.comment }}
                         </div>
                     </div>
                 </div>

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html

@@ -63,8 +63,8 @@
             <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
             <mat-cell *matCellDef="let file">
                 <div class="file-info-cell">
-                    <span> <mat-icon [inline]="true">insert_drive_file</mat-icon> {{ file.type }} </span>
+                    <os-icon-container icon="insert_drive_file">{{ file.type }}</os-icon-container>
-                    <span> <mat-icon [inline]="true">data_usage</mat-icon> {{ file.size }} </span>
+                    <os-icon-container icon="data_usage">{{ file.size }}</os-icon-container>
                 </div>
             </mat-cell>
         </ng-container>

client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html

@@ -114,20 +114,19 @@
                     <mat-cell (click)="openEditInfo(motion, $event)" *matCellDef="let motion">
                         <div class="fill">
                             <div class="innerTable state-column">
-                                <div class="small ellipsis-overflow" *ngIf="motion.category">
+                                <div class="ellipsis-overflow" *ngIf="motion.category">
-                                    <mat-icon>device_hub</mat-icon>
+                                    <os-icon-container icon="device_hub">{{ motion.category }}</os-icon-container>
-                                    {{ motion.category }}
                                 </div>
-                                <div class="small ellipsis-overflow" *ngIf="motion.motion_block">
+                                <div class="ellipsis-overflow spacer-top-5" *ngIf="motion.motion_block">
-                                    <mat-icon>widgets</mat-icon>
+                                    <os-icon-container icon="widgets">{{ motion.motion_block.title }}</os-icon-container>
-                                    {{ motion.motion_block.title }}
                                 </div>
-                                <div class="small ellipsis-overflow" *ngIf="motion.tags && motion.tags.length">
+                                <div class="ellipsis-overflow spacer-top-5" *ngIf="motion.tags && motion.tags.length">
-                                    <mat-icon>local_offer</mat-icon>
+                                    <os-icon-container icon="local_offer">
-                                    <span *ngFor="let tag of motion.tags; let last = last">
+                                        <span *ngFor="let tag of motion.tags; let last = last">
-                                        {{ tag.getTitle() }}
+                                            {{ tag.getTitle() }}
-                                        <span *ngIf="!last">,&nbsp;</span>
+                                            <span *ngIf="!last">,&nbsp;</span>
-                                    </span>
+                                        </span>
+                                    </os-icon-container>
                                 </div>
                             </div>
                         </div>

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

@@ -54,16 +54,19 @@
             <mat-cell (click)="openEditInfo(user, $event)" *matCellDef="let user">
                 <div class="fill">
                     <div class="groupsCell">
-                        <span *ngIf="user.groups && user.groups.length">
+                        <div *ngIf="user.groups && user.groups.length">
-                            <mat-icon>people</mat-icon>
+                            <os-icon-container icon="people">
-                            <span *ngFor="let group of user.groups; let last = last"
+                                <span *ngFor="let group of user.groups; let last = last">
-                                >{{ group.getTitle() | translate }}<span *ngIf="!last">,&nbsp;</span>
+                                    {{ group.getTitle() | translate }} <span *ngIf="!last">,&nbsp;</span>
-                            </span>
+                                </span>
-                        </span>
+                            </os-icon-container>
-                        <br *ngIf="user.groups && user.structure_level" />
+                        </div>
-                        <span *ngIf="user.structure_level"> <mat-icon>flag</mat-icon>{{ user.structure_level }}</span>
+                        <div *ngIf="user.structure_level" class="spacer-top-5">
-                        <br *ngIf="user.number" />
+                            <os-icon-container icon="flag">{{ user.structure_level }}</os-icon-container>
-                        <span *ngIf="user.number"> <mat-icon>perm_identity</mat-icon>{{ user.number }}</span>
+                        </div>
+                        <div *ngIf="user.number" class="spacer-top-5">
+                            <os-icon-container icon="perm_identity">{{ user.number }}</os-icon-container>
+                        </div>
                     </div>
                 </div>
             </mat-cell>

client/src/styles.scss

@@ -18,6 +18,7 @@
 @import './app/site/global-spinner/global-spinner.component.scss';
 @import './app/shared/components/tile/tile.component.scss';
 @import './app/shared/components/block-tile/block-tile.component.scss';
+@import './app/shared/components/icon-container/icon-container.component.scss';
 
 /** fonts */
 @import './assets/styles/fonts.scss';