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
Emanuel Schütze
parent
35c8dc97f5
commit
5e3f710e4d
@ -0,0 +1,4 @@
|
||||
<mat-icon>{{ icon }}</mat-icon>
|
||||
<span class="content-node">
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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';
|
||||
}
|
||||
@ -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 },
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
<span *ngFor="let tag of motion.tags; let last = last">
|
||||
{{ tag.getTitle() }}
|
||||
<span *ngIf="!last">, </span>
|
||||
</span>
|
||||
<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">, </span>
|
||||
</span>
|
||||
</os-icon-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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">, </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>
|
||||
<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">, </span>
|
||||
</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>
|
||||
|
||||
@ -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';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user