-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
61 changed files
with
723 additions
and
81 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
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
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
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
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
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
22 changes: 22 additions & 0 deletions
22
apps/doc/src/app/tools/inverted-theme/examples/base/base.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,22 @@ | ||
<h1>Set theme for any element</h1> | ||
<div class="block"> | ||
<button prizmButton (click)="toggle()">Toggle</button> | ||
<button prizmButton (click)="light()">Light</button> | ||
<button prizmButton (click)="dark()">Dark</button> | ||
</div> | ||
<br /><br /> | ||
<div> | ||
<div [(prizmTheme)]="themeValue"> | ||
<prizm-widget title="Заголовок виджета"> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et | ||
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip | ||
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu | ||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia | ||
deserunt mollit anim id est laborum. | ||
</prizm-widget> | ||
</div> | ||
</div> | ||
|
||
<div *ngIf="themeValue"> | ||
Current theme value: <b>{{ themeValue }}</b> | ||
</div> |
34 changes: 34 additions & 0 deletions
34
apps/doc/src/app/tools/inverted-theme/examples/base/base.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,34 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'prizm-theme-base-example', | ||
templateUrl: './base.component.html', | ||
styles: [ | ||
` | ||
.block { | ||
display: flex; | ||
gap: 1rem; | ||
} | ||
.zone { | ||
padding: 1rem; | ||
border-radius: 0.5rem; | ||
border: 1px solid #ccc; | ||
} | ||
`, | ||
], | ||
}) | ||
export class PrizmThemeBaseExampleComponent { | ||
themeValue = 'light'; | ||
|
||
public light(): void { | ||
this.themeValue = 'light'; | ||
} | ||
|
||
public dark(): void { | ||
this.themeValue = 'dark'; | ||
} | ||
|
||
public toggle(): void { | ||
this.themeValue = this.themeValue === 'light' ? 'dark' : 'light'; | ||
} | ||
} |
13 changes: 13 additions & 0 deletions
13
apps/doc/src/app/tools/inverted-theme/examples/import-module.md
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,13 @@ | ||
```ts | ||
import { NgModule } from '@angular/core'; | ||
import { PrizmThemeModule } from '@prizm-ui/theme'; | ||
// ... | ||
|
||
@NgModule({ | ||
imports: [ | ||
// ... | ||
PrizmThemeModule, | ||
], | ||
}) | ||
export class MyModule {} | ||
``` |
32 changes: 32 additions & 0 deletions
32
apps/doc/src/app/tools/inverted-theme/examples/inverted/inverted.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,32 @@ | ||
<h1>Set theme and inverted theme for any element via our directives</h1> | ||
<div class="block"> | ||
<button prizmButton (click)="toggle()">Toggle theme</button> | ||
<button prizmButton (click)="light()">Light</button> | ||
<button prizmButton (click)="dark()">Dark</button> | ||
</div> | ||
<br /><br /> | ||
<div #zone> | ||
<div | ||
prizmThemeInverted | ||
(prizmThemeChange)="invetedThemeValue = $event" | ||
[invertedValues]="{ light: 'dark', dark: 'light' }" | ||
[themeElement]="zone" | ||
> | ||
<prizm-widget title="Заголовок виджета"> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et | ||
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip | ||
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu | ||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia | ||
deserunt mollit anim id est laborum. | ||
</prizm-widget> | ||
</div> | ||
</div> | ||
|
||
<div *ngIf="el"> | ||
<p> | ||
Parent theme: <b>{{ theme.getByElement(zone) }}</b> | ||
</p> | ||
<p> | ||
Inverted theme: <b>{{ invetedThemeValue }}</b> | ||
</p> | ||
</div> |
40 changes: 40 additions & 0 deletions
40
apps/doc/src/app/tools/inverted-theme/examples/inverted/inverted.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,40 @@ | ||
import { Component, ElementRef, ViewChild } from '@angular/core'; | ||
import { PrizmThemeService } from '@prizm-ui/theme'; | ||
|
||
@Component({ | ||
selector: 'prizm-theme-inverted-example', | ||
templateUrl: './inverted.component.html', | ||
styles: [ | ||
` | ||
.block { | ||
display: flex; | ||
gap: 1rem; | ||
} | ||
.zone { | ||
padding: 1rem; | ||
border-radius: 0.5rem; | ||
border: 1px solid #ccc; | ||
} | ||
`, | ||
], | ||
}) | ||
export class PrizmThemeInvertedExampleComponent { | ||
@ViewChild('zone', { static: true, read: ElementRef }) el: ElementRef; | ||
public invetedThemeValue: string; | ||
constructor(public readonly theme: PrizmThemeService) {} | ||
|
||
public light(): void { | ||
this.theme.update('light', this.el.nativeElement); | ||
} | ||
|
||
public dark(): void { | ||
this.theme.update('dark', this.el.nativeElement); | ||
} | ||
|
||
public toggle(): void { | ||
this.theme.update( | ||
this.theme.getByElement(this.el.nativeElement) === 'light' ? 'dark' : 'light', | ||
this.el.nativeElement | ||
); | ||
} | ||
} |
Oops, something went wrong.