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.
This commit is contained in:
GabrielMeyer 2019-06-04 09:37:01 +02:00 committed by Emanuel Schütze
parent 35c8dc97f5
commit 5e3f710e4d
10 changed files with 139 additions and 36 deletions

View File

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

View File

@ -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;
}
}

View File

@ -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();
});
});

View File

@ -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';
}

View File

@ -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 },

View File

@ -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>
<span class="table-view-list-title">{{ item.getListTitle() }}</span>
<os-icon-container [icon]="item.closed ? 'check' : null" size="large">{{ item.getListTitle() }}</os-icon-container>
</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>
{{ item.verboseType | translate }}
<os-icon-container icon="visibility">{{ item.verboseType | translate }}</os-icon-container>
</div>
<div *ngIf="item.duration">
<mat-icon>access_time</mat-icon>
{{ durationService.durationToString(item.duration, 'h') }}
<div *ngIf="item.duration" class="spacer-top-5">
<os-icon-container icon="access_time">{{ durationService.durationToString(item.duration, 'h') }}</os-icon-container>
</div>
<div *ngIf="item.comment">
<mat-icon>comment</mat-icon>
{{ item.comment }}
<div *ngIf="item.comment" class="spacer-top-5">
<os-icon-container icon="comment">{{ item.comment }}</os-icon-container>
</div>
</div>
</div>

View File

@ -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>
<span> <mat-icon [inline]="true">data_usage</mat-icon> {{ file.size }} </span>
<os-icon-container icon="insert_drive_file">{{ file.type }}</os-icon-container>
<os-icon-container icon="data_usage">{{ file.size }}</os-icon-container>
</div>
</mat-cell>
</ng-container>

View File

@ -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">
<mat-icon>device_hub</mat-icon>
{{ motion.category }}
<div class="ellipsis-overflow" *ngIf="motion.category">
<os-icon-container icon="device_hub">{{ motion.category }}</os-icon-container>
</div>
<div class="small ellipsis-overflow" *ngIf="motion.motion_block">
<mat-icon>widgets</mat-icon>
{{ motion.motion_block.title }}
<div class="ellipsis-overflow spacer-top-5" *ngIf="motion.motion_block">
<os-icon-container icon="widgets">{{ motion.motion_block.title }}</os-icon-container>
</div>
<div class="small ellipsis-overflow" *ngIf="motion.tags && motion.tags.length">
<mat-icon>local_offer</mat-icon>
<div class="ellipsis-overflow spacer-top-5" *ngIf="motion.tags && motion.tags.length">
<os-icon-container icon="local_offer">
<span *ngFor="let tag of motion.tags; let last = last">
{{ tag.getTitle() }}
<span *ngIf="!last">,&nbsp;</span>
</span>
</os-icon-container>
</div>
</div>
</div>

View File

@ -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">
<mat-icon>people</mat-icon>
<span *ngFor="let group of user.groups; let last = last"
>{{ group.getTitle() | translate }}<span *ngIf="!last">,&nbsp;</span>
<div *ngIf="user.groups && user.groups.length">
<os-icon-container icon="people">
<span *ngFor="let group of user.groups; let last = last">
{{ group.getTitle() | translate }} <span *ngIf="!last">,&nbsp;</span>
</span>
</span>
<br *ngIf="user.groups && user.structure_level" />
<span *ngIf="user.structure_level"> <mat-icon>flag</mat-icon>{{ user.structure_level }}</span>
<br *ngIf="user.number" />
<span *ngIf="user.number"> <mat-icon>perm_identity</mat-icon>{{ user.number }}</span>
</os-icon-container>
</div>
<div *ngIf="user.structure_level" class="spacer-top-5">
<os-icon-container icon="flag">{{ user.structure_level }}</os-icon-container>
</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>

View File

@ -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';