-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: add theme-switcher * chore: change navigation * chore: add color list * chore: add example * chore: add different colors * chore: add code * chore: add host binding * chore: add properties * chore: can change colors * chore: add signals * chore: add more examples * chore: remove service * chore: split components * chore: add more colors and examples * fix: add formControl input year * chore: remove background * chore: rename theme generator * chore: change example * chore: add all colors * fix: fix cspell * chore: add more inputs * chore: example only change * chore: change navigation * chore: change icon * chore: remove extra code * chore: use camelCase * chore: use camelCase only
- Loading branch information
Showing
9 changed files
with
566 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
135 changes: 135 additions & 0 deletions
135
...aiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| <div | ||
| tuiAppearance="whiteblock" | ||
| tuiCardLarge="normal" | ||
| class="example-block" | ||
| > | ||
| <div tuiHeader="l"> | ||
| <h3 tuiTitle> | ||
| Title example | ||
| <div tuiSubtitle>Subtitle example</div> | ||
| </h3> | ||
| </div> | ||
| <tui-input-number | ||
| [formControl]="exampleControl" | ||
| [tuiTextfieldPrefix]="'USD' | tuiCurrency" | ||
| > | ||
| Type a sum | ||
| </tui-input-number> | ||
| <div class="tui-row"> | ||
| <div class="tui-col_md-6"> | ||
| <div | ||
| tuiCardLarge | ||
| tuiSurface="elevated" | ||
| > | ||
| <header tuiHeader> | ||
| <h1 tuiTitle> | ||
| Title | ||
| <span tuiSubtitle>Subtitle</span> | ||
| </h1> | ||
| </header> | ||
|
|
||
| <button | ||
| *tuiRepeatTimes="let index of 3" | ||
| tuiCell="l" | ||
| tuiDropdownAlign="right" | ||
| tuiDropdownOpen | ||
| [tuiDropdown]="dropdown" | ||
| [tuiDropdownSided]="true" | ||
| > | ||
| <tui-avatar | ||
| appearance="primary" | ||
| src="@tui.star" | ||
| /> | ||
|
|
||
| <div tuiTitle> | ||
| Title | ||
| <div tuiSubtitle>Description</div> | ||
| </div> | ||
|
|
||
| <tui-icon | ||
| icon="@tui.chevron-right" | ||
| tuiAppearance="icon" | ||
| /> | ||
| </button> | ||
|
|
||
| <button | ||
| tuiLink | ||
| type="button" | ||
| > | ||
| Show all | ||
| </button> | ||
| </div> | ||
|
|
||
| <ng-template | ||
| #dropdown | ||
| let-close | ||
| > | ||
| <tui-data-list> | ||
| <tui-opt-group> | ||
| <button | ||
| *ngFor="let item of ['Edit', 'Download', 'Rename', 'Delete']" | ||
| tuiOption | ||
| > | ||
| {{ item }} | ||
| </button> | ||
| </tui-opt-group> | ||
| <tui-opt-group> | ||
| <button | ||
| tuiOption | ||
| (click)="close()" | ||
| > | ||
| Nevermind | ||
| </button> | ||
| </tui-opt-group> | ||
| </tui-data-list> | ||
| </ng-template> | ||
| </div> | ||
| <div class="tui-col_md-6"> | ||
| <div | ||
| tuiCardLarge | ||
| tuiSurface="elevated" | ||
| > | ||
| <tui-input-year | ||
| [formControl]="exampleYearControl" | ||
| [tuiTextfieldCleaner]="true" | ||
| > | ||
| Choose a year | ||
| <input | ||
| placeholder="Not 2022 please" | ||
| tuiTextfieldLegacy | ||
| /> | ||
| </tui-input-year> | ||
| <div class="list"> | ||
| @for (badge of badges; track $index) { | ||
| <tui-badge [appearance]="badge"> | ||
| {{ badge.charAt(0).toUpperCase() + badge.slice(1) }} | ||
| </tui-badge> | ||
| } | ||
| </div> | ||
| <input | ||
| size="m" | ||
| tuiCheckbox | ||
| type="checkbox" | ||
| [ngModel]="true" | ||
| /> | ||
| <input | ||
| size="m" | ||
| tuiSwitch | ||
| type="checkbox" | ||
| [disabled]="true" | ||
| [ngModel]="true" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="list"> | ||
| @for (button of buttons; track $index) { | ||
| <button | ||
| tuiButton | ||
| [appearance]="button" | ||
| > | ||
| {{ button.charAt(0).toUpperCase() + button.slice(1) }} | ||
| </button> | ||
| } | ||
| </div> | ||
| </div> |
31 changes: 31 additions & 0 deletions
31
...aiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| @media (max-width: 1250px) { | ||
| .tui-row { | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| .tui-col_md-6 { | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| .example-block { | ||
| position: sticky; | ||
| top: 7rem; | ||
| height: max-content; | ||
| background-color: var(--tui-background-base); | ||
|
|
||
| @media (max-width: 570px) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .list { | ||
| display: flex; | ||
| gap: 1rem; | ||
| flex-wrap: wrap; | ||
| } | ||
|
|
||
| .actions { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } |
83 changes: 83 additions & 0 deletions
83
.../taiga-lumbermill/src/dashboards/theme-generator/theme-example/theme-example.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import {CommonModule} from '@angular/common'; | ||
| import type {Signal} from '@angular/core'; | ||
| import {ChangeDetectionStrategy, Component, Input, signal} from '@angular/core'; | ||
| import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; | ||
| import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce'; | ||
| import {TuiRepeatTimes} from '@taiga-ui/cdk'; | ||
| import { | ||
| TuiAppearance, | ||
| TuiButton, | ||
| TuiDataList, | ||
| TuiDropdown, | ||
| TuiHint, | ||
| TuiIcon, | ||
| TuiLink, | ||
| TuiOptGroup, | ||
| TuiSurface, | ||
| TuiTextfield, | ||
| TuiTitle, | ||
| } from '@taiga-ui/core'; | ||
| import {TuiAvatar, TuiBadge, TuiCheckbox, TuiSwitch} from '@taiga-ui/kit'; | ||
| import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout'; | ||
| import { | ||
| TuiInputNumberModule, | ||
| TuiInputYearModule, | ||
| TuiTextfieldControllerModule, | ||
| } from '@taiga-ui/legacy'; | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| selector: 'lmb-theme-example', | ||
| imports: [ | ||
| CommonModule, | ||
| FormsModule, | ||
| ReactiveFormsModule, | ||
| TuiAppearance, | ||
| TuiAvatar, | ||
| TuiBadge, | ||
| TuiButton, | ||
| TuiCardLarge, | ||
| TuiCell, | ||
| TuiCheckbox, | ||
| TuiCurrencyPipe, | ||
| TuiDataList, | ||
| TuiDropdown, | ||
| TuiHeader, | ||
| TuiHint, | ||
| TuiIcon, | ||
| TuiInputNumberModule, | ||
| TuiInputYearModule, | ||
| TuiLink, | ||
| TuiOptGroup, | ||
| TuiRepeatTimes, | ||
| TuiSurface, | ||
| TuiSwitch, | ||
| TuiTextfield, | ||
| TuiTextfieldControllerModule, | ||
| TuiTitle, | ||
| ], | ||
| templateUrl: './theme-example.component.html', | ||
| styleUrl: './theme-example.component.less', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| host: { | ||
| '[style]': 'this.theme()', | ||
| }, | ||
| }) | ||
| export class ThemeExampleComponent { | ||
| protected readonly exampleControl = new FormControl(100); | ||
| protected readonly exampleYearControl = new FormControl<number | null>(null); | ||
| protected readonly badges = [ | ||
| 'primary', | ||
| 'accent', | ||
| 'success', | ||
| 'error', | ||
| 'warning', | ||
| 'neutral', | ||
| 'info', | ||
| ]; | ||
|
|
||
| protected readonly buttons = ['primary', 'accent', 'destructive', 'flat', 'outline']; | ||
|
|
||
| @Input() | ||
| public theme: Signal<string> = signal(''); | ||
| } |
25 changes: 25 additions & 0 deletions
25
apps/taiga-lumbermill/src/dashboards/theme-generator/theme-generator.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <div class="list-colors"> | ||
| <div tuiHeader="m"> | ||
| <h3 tuiTitle>Colors</h3> | ||
| </div> | ||
| @for (inputColor of themeData; track $index) { | ||
| <tui-input-color | ||
| tuiTextfieldSize="m" | ||
| [colors]="palette" | ||
| [(ngModel)]="colors[$index]" | ||
| (ngModelChange)="colors[$index].set($event)" | ||
| > | ||
| {{ inputColor.name }} | ||
| </tui-input-color> | ||
| } | ||
| <code> | ||
| :root {{ '{' }} | ||
| @for (inputColor of themeData; track $index) { | ||
| <br /> | ||
| {{ inputColor.variable }}: {{ colors[$index]() }}; | ||
| } | ||
| <br /> | ||
| {{ '}' }} | ||
| </code> | ||
| </div> | ||
| <lmb-theme-example [theme]="theme" /> |
Oops, something went wrong.