- {
+export class TileSelectorTileComponent {
@Input() tile: ITileConfig;
@Input() active: boolean;
+ @Input() smaller = false;
+
@Output() tileSelect = new EventEmitter();
public onClick(tile: ITileConfig) {
diff --git a/src/frontend/packages/core/src/shared/components/tile-selector/tile-selector.component.html b/src/frontend/packages/core/src/shared/components/tile-selector/tile-selector.component.html
index b3b0112dae..7f05aa5e7d 100644
--- a/src/frontend/packages/core/src/shared/components/tile-selector/tile-selector.component.html
+++ b/src/frontend/packages/core/src/shared/components/tile-selector/tile-selector.component.html
@@ -11,7 +11,7 @@
- {{ tile.graphic.matIcon }}
-
- 
-
+
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/tile-selector-tile/tile-selector-tile.component.scss b/src/frontend/packages/core/src/shared/components/tile-selector-tile/tile-selector-tile.component.scss
index 68db7e8382..2a6328ad84 100644
--- a/src/frontend/packages/core/src/shared/components/tile-selector-tile/tile-selector-tile.component.scss
+++ b/src/frontend/packages/core/src/shared/components/tile-selector-tile/tile-selector-tile.component.scss
@@ -1,74 +1,82 @@
-.tile-selector {
- $tile-height: 200px;
- border-radius: 3px;
- cursor: pointer;
- display: flex;
- flex-direction: column;
- height: $tile-height;
- opacity: .5;
- transition: transform .2s ease;
- user-select: none;
- width: 100%;
- &__taller {
- height: 260px;
- }
- &:hover {
- opacity: 1;
- transform: scale(1.02);
- }
- &__more {
- align-items: center;
+@mixin create($tile-height: 200px, $icon-size: 80px) {
+ $img-size: $tile-height / 2;
+
+ .tile-selector {
+ border-radius: 3px;
cursor: pointer;
display: flex;
- font-size: 16px;
+ flex-direction: column;
height: $tile-height;
- justify-content: center;
- }
+ opacity: .5;
+ transition: transform .2s ease;
+ user-select: none;
+ width: 100%;
- &:active {
- transform: scale(.98);
- }
+ &:hover {
+ opacity: 1;
+ transform: scale(1.02);
+ }
+ &__more {
+ align-items: center;
+ cursor: pointer;
+ display: flex;
+ font-size: 16px;
+ height: $tile-height;
+ justify-content: center;
+ }
- &__active {
- opacity: 1;
- }
+ &:active {
+ transform: scale(.98);
+ }
- &__header {
- align-items: center;
- display: flex;
- flex: 2;
- justify-content: center;
- width: 100%;
+ &__active {
+ opacity: 1;
+ }
+
+ &__header {
+ align-items: center;
+ display: flex;
+ flex: 2;
+ justify-content: center;
+ width: 100%;
- img {
- height: 100px;
+ img {
+ height: $img-size;
+ }
}
- }
- &__description {
- flex: 0;
- padding: 10px;
- text-align: center;
- }
+ &__description {
+ flex: 0;
+ padding: 10px;
+ text-align: center;
+ }
- &__content {
- display: flex;
- flex: 0;
- flex-direction: column;
- justify-content: center;
- opacity: .8;
- padding: 0 1em;
- position: relative;
- text-align: center;
- word-wrap: break-word;
+ &__content {
+ display: flex;
+ flex: 0;
+ flex-direction: column;
+ justify-content: center;
+ opacity: .8;
+ padding: 0 1em;
+ position: relative;
+ text-align: center;
+ word-wrap: break-word;
+ }
+
+ &__icon {
+ font-size: $icon-size;
+ height: $icon-size;
+ opacity: .6;
+ width: $icon-size;
+ }
}
+}
+
+.tile-selector-parent {
+ @include create;
- $icon-size: 80px;
- &__icon {
- font-size: $icon-size;
- height: $icon-size;
- opacity: .6;
- width: $icon-size;
+ &.smaller {
+ @include create(160px, 60px);
}
}
diff --git a/src/frontend/packages/core/src/shared/components/tile-selector-tile/tile-selector-tile.component.ts b/src/frontend/packages/core/src/shared/components/tile-selector-tile/tile-selector-tile.component.ts
index f4f6a69ec7..5b11d6ac48 100644
--- a/src/frontend/packages/core/src/shared/components/tile-selector-tile/tile-selector-tile.component.ts
+++ b/src/frontend/packages/core/src/shared/components/tile-selector-tile/tile-selector-tile.component.ts
@@ -1,17 +1,20 @@
-import { Component, Input, EventEmitter, Output } from '@angular/core';
-import { ITileConfig, ITileIconConfig, ITileImgConfig, ITileData } from '../tile/tile-selector.types';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { ITileConfig, ITileData, ITileGraphic } from '../tile/tile-selector.types';
@Component({
selector: 'app-tile-selector-tile',
templateUrl: './tile-selector-tile.component.html',
styleUrls: ['./tile-selector-tile.component.scss']
})
-export class TileSelectorTileComponent
+
+
+
-
+ {{ tile.graphic.matIcon }}
+
+
+
+
+
+
+ {{ tile.label }}
+{{ tile.description }}
-
- {{ tile.label }}
-{{ tile.description }}
-