Skip to content

Commit

Permalink
Merge pull request #73 from zyfra/fix/tooltip
Browse files Browse the repository at this point in the history
chore: release 1.0.0-beta.25
  • Loading branch information
ZurabDev committed Mar 10, 2023
2 parents 321335a + bc1367c commit 1442907
Show file tree
Hide file tree
Showing 61 changed files with 829 additions and 185 deletions.
3 changes: 2 additions & 1 deletion .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ _Выберите нужное отметив галочку [x]_
- [ ] `@prizm-ui/components`
- [ ] `@prizm-ui/install`
- [ ] `@prizm-ui/icons`
- [ ] `@prizm-ui/flag-icons`
- [ ] `@prizm-ui/theme`
- [ ] `@prizm-ui/charts`

### Компонент

Expand Down Expand Up @@ -78,7 +80,6 @@ Dependencies:

- _Название проекта_


### Скрин / Видео проблемы

_Скриншот.jpg_
Expand Down
3 changes: 3 additions & 0 deletions .github/ISSUE_TEMPLATE/feature_request.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,13 @@ assignees: ''

### Библиотека

- [ ] `@prizm-ui/core`
- [ ] `@prizm-ui/components`
- [ ] `@prizm-ui/install`
- [ ] `@prizm-ui/icons`
- [ ] `@prizm-ui/flag-icons`
- [ ] `@prizm-ui/theme`
- [ ] `@prizm-ui/charts`

### Компонент

Expand Down
4 changes: 3 additions & 1 deletion .github/ISSUE_TEMPLATE/question.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,13 @@ assignees: ''

### Библиотека

- [ ] `@prizm-ui/core`
- [ ] `@prizm-ui/components`
- [ ] `@prizm-ui/install`
- [ ] `@prizm-ui/icons`
- [ ] `@prizm-ui/flag-icons`
- [ ] `@prizm-ui/theme`
- [ ] `@prizm-ui/charts`

### Компонент

Expand Down Expand Up @@ -42,7 +45,6 @@ Dependencies:

- _Название проекта_


### Вопрос

_Чем более подробно будет описан вопрос, тем лучше будет дан ответ_
Expand Down
2 changes: 1 addition & 1 deletion .gitlab-ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ Release package:
- npm publish --access public --userconfig ~/.npmrc --verbose core || exit_code=0
- npm publish --access public --userconfig ~/.npmrc --verbose icons/base || exit_code=0
- npm publish --access public --userconfig ~/.npmrc --verbose icons/flags || exit_code=0
- npm publish --access public --userconfig ~/.npmrc --verbose schematics || exit_code=0
# - npm publish --access public --userconfig ~/.npmrc --verbose schematics || exit_code=0
- npm publish --access public --userconfig ~/.npmrc --verbose theme || exit_code=0
- npm publish --access public --userconfig ~/.npmrc --verbose charts || exit_code=0
when: manual
Expand Down
2 changes: 0 additions & 2 deletions .gitlab/issue_templates/bug.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,6 @@ Dependencies:
### Проект в котором используется КБ

- _Название проекта_
- _Ссылка на репозитории_
- _Ссылка на стенд с проблемой_

### Скрин / Видео проблемы

Expand Down
2 changes: 0 additions & 2 deletions .gitlab/issue_templates/question.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ Dependencies:
### Проект в котором используется Prizm

- _Название проекта_
- _Ссылка на репозитории_
- _Ссылка на стенд с проблемой_

### Вопрос

Expand Down
15 changes: 15 additions & 0 deletions apps/doc/src/app/about-prizm/changelog/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,21 @@

All notable changes to this project will be documented in this file.

## [1.0.0-beta.25](https://github.com/zyfra/Prizm) (10-03-2023)

### BUG FIXES

- fix(components/tooltip): recalc on left and right position [#34](https://github.com/zyfra/Prizm/issues/34)
- chore: correct old helper issues templates
- fix(components/overlay): fix case with not correct display overlay [#4](https://github.com/zyfra/Prizm/issues/4)
- fix(components/confirm): fix console errors [#31](https://github.com/zyfra/Prizm/issues/31)
- feat(components/dialogs): invert theme inside dialog and confirm dialog [#74](https://github.com/zyfra/Prizm/issues/74)

### Features

- feat(theme): new inverted theme directive
- feat(doc/theme): examples how to use theme and inverted theme directive

## [1.0.0-beta.24](https://github.com/zyfra/Prizm) (03-03-2023)

### BUG FIXES
Expand Down
13 changes: 11 additions & 2 deletions apps/doc/src/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -565,11 +565,20 @@ export const ROUTES: Routes = [
title: 'Overlay',
},
},
{
path: 'tools/theme-service',
loadChildren: (): Promise<unknown> =>
import('./tools/theme-service/theme.module').then(i => i.ThemeModule),
data: {
title: 'Theme Service',
},
},
{
path: 'tools/theme',
loadChildren: (): Promise<unknown> => import('./tools/theme/theme.module').then(i => i.ThemeModule),
loadChildren: (): Promise<unknown> =>
import('./tools/inverted-theme/inverted-theme.module').then(i => i.InvertedThemeModule),
data: {
title: 'Theme',
title: 'Theme Module',
},
},
{
Expand Down
50 changes: 48 additions & 2 deletions apps/doc/src/app/components/table/table-example.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,13 @@
</ng-template>

<ng-template prizmDocPageTab prizmDocHost>
<prizm-doc-demo>
<prizm-doc-demo class="remove-sticky">
<prizm-scrollbar class="scrollable">
<table
[style.--prizm-table-row-odd-background]="prizmTableRowOddBackground"
[style.--prizm-table-row-hover-background]="prizmTableRowHoverBackground"
[style.--prizm-table-row-background]="prizmTableRowBackground"
[style.--prizm-table-row-cursor]="prizmTableRowCursor"
prizmTable
class="table"
#element="prizmTable"
Expand Down Expand Up @@ -101,7 +105,49 @@
</table>
</prizm-scrollbar>
</prizm-doc-demo>
<prizm-doc-documentation heading="PrizmTbodyComponent" hostComponentKey="PrizmTbodyComponent">
<prizm-doc-documentation heading="PrizmTrComponent">
<ng-template
documentationPropertyName="status"
documentationPropertyType="PrizmTableCellStatus"
documentationPropertyMode="input"
>
Status
</ng-template>
<ng-template
documentationPropertyName="prizm-table-row-hover-background"
documentationPropertyType="string"
documentationPropertyMode="css-var"
[(documentationPropertyValue)]="prizmTableRowHoverBackground"
>
Row background on hover
</ng-template>

<ng-template
documentationPropertyName="prizm-table-row-odd-background"
documentationPropertyType="string"
documentationPropertyMode="css-var"
[(documentationPropertyValue)]="prizmTableRowOddBackground"
>
Row background odd
</ng-template>
<ng-template
documentationPropertyName="prizm-table-row-background"
documentationPropertyType="string"
documentationPropertyMode="css-var"
[(documentationPropertyValue)]="prizmTableRowBackground"
>
Row background even
</ng-template>
<ng-template
documentationPropertyName="prizm-table-row-cursor"
documentationPropertyType="string"
documentationPropertyMode="css-var"
[(documentationPropertyValue)]="prizmTableRowCursor"
>
Row cursor
</ng-template>
</prizm-doc-documentation>
<prizm-doc-documentation heading="PrizmTbodyComponent">
<ng-template
documentationPropertyName="data"
documentationPropertyType="Record<string, any>"
Expand Down
5 changes: 4 additions & 1 deletion apps/doc/src/app/components/table/table-example.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ import { TABLE_EXAMPLE_DATA_1 } from './table-example.const';
})
export class TableExampleComponent {
public products: ITableProduct[] = TABLE_EXAMPLE_DATA_1;

public prizmTableRowOddBackground: string = null;
public prizmTableRowBackground: string = null;
public prizmTableRowCursor = 'pointer';
public prizmTableRowHoverBackground: string = null;
public columns: string[] = ['code', 'name', 'category', 'count'];
public columnsVarians: string[][] = [
['code', 'name'],
Expand Down
10 changes: 6 additions & 4 deletions apps/doc/src/app/logo/logo.component.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
import { map } from 'rxjs/operators';
import { debounceTime, filter, map } from 'rxjs/operators';
import { PrizmThemeService } from '@prizm-ui/theme';
import { LOCAL_STORAGE } from '@ng-web-apis/common';
import { PrizmIconsSvgRegistry, PrizmIconSvgEnum, prizmIconSvgOtherGitHub } from '@prizm-ui/icons';
Expand All @@ -11,7 +11,11 @@ import { PrizmIconsSvgRegistry, PrizmIconSvgEnum, prizmIconSvgOtherGitHub } from
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LogoComponent {
readonly isNight$ = this.themeSwitcher.change$.pipe(map(i => i.theme === 'dark'));
readonly isNight$ = this.themeSwitcher.change$.pipe(
filter(i => i.el === this.themeSwitcher.rootElement),
map(i => i.theme === 'dark'),
debounceTime(0)
);

readonly githubSvgName = PrizmIconSvgEnum.OTHER_GIT_HUB;

Expand All @@ -25,8 +29,6 @@ export class LogoComponent {

public onMode(isNight: boolean): void {
this.themeSwitcher.update(isNight ? 'dark' : 'light');
/* update taiga doc theme */
// this.docEl.onMode(isNight);
}
}

Expand Down
10 changes: 8 additions & 2 deletions apps/doc/src/app/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -537,8 +537,14 @@ export const pages: PrizmOrderedDocPage = [
},
{
section: SectionNameEnum.tools,
title: 'Theme',
keywords: 'theme, тема, цвета, типография, colors, typography',
title: 'Theme Service',
keywords: 'theme, service, тема, цвета, типография, colors, typography',
route: '/tools/theme-service',
},
{
section: SectionNameEnum.tools,
title: 'Theme Module',
keywords: 'theme, module, тема, цвета, типография, colors, typography',
route: '/tools/theme',
},
// TODO active after finish charts
Expand Down
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>
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 apps/doc/src/app/tools/inverted-theme/examples/import-module.md
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 {}
```
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>
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
);
}
}
Loading

0 comments on commit 1442907

Please sign in to comment.