Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-5875: Material upgrade - dark theme, other fixes

Browse Source
This commit is contained in:
Adina Țeudan 2023-05-31 23:36:49 +03:00
parent f555ff2bcc
commit 851b165f7b
4 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/app.module.ts
View File

@ -7,6 +7,7 @@ import { BaseScreenComponent } from '@components/base-screen/base-screen.compone
import { MissingTranslationHandler } from '@ngx-translate/core'; import { MissingTranslationHandler } from '@ngx-translate/core';
import { import {
CachingModule, CachingModule,
ChevronButtonComponent,
CircleButtonComponent, CircleButtonComponent,
CommonUiModule, CommonUiModule,
EmptyStateComponent, EmptyStateComponent,
@ -169,6 +170,7 @@ export const appModuleFactory = (config: AppConfig) => {
IconButtonComponent, IconButtonComponent,
TenantPipe, TenantPipe,
MatDividerModule, MatDividerModule,
ChevronButtonComponent,
], ],
providers: [ providers: [
{ {

9
apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html
View File

@ -22,10 +22,11 @@
</a> </a>
<ng-container *ngIf="is(breadcrumb, 'dropdown')"> <ng-container *ngIf="is(breadcrumb, 'dropdown')">
<button [matMenuTriggerFor]="dropdownMenu" class="dropdown-breadcrumb" mat-button> <iqser-chevron-button
<span>{{ breadcrumb.name$ | async }}</span> [label]="breadcrumb.name$ | async"
<mat-icon svgIcon="iqser:arrow-down"></mat-icon> [matMenuTriggerFor]="dropdownMenu"
</button> class="dropdown-breadcrumb"
></iqser-chevron-button>
<mat-menu #dropdownMenu="matMenu" class="padding-bottom-8"> <mat-menu #dropdownMenu="matMenu" class="padding-bottom-8">
<a <a

34
apps/red-ui/src/assets/styles/red-material-theme.scss
View File

@ -43,7 +43,7 @@ $gn-next-primary: mat.define-palette($primary-palette, default, lighter, darker,
$gn-next-secondary: mat.define-palette($secondary-palette, default, lighter, darker, text); $gn-next-secondary: mat.define-palette($secondary-palette, default, lighter, darker, text);
$gn-next-warning: mat.define-palette($red-palette, default, lighter, darker, text); $gn-next-warning: mat.define-palette($red-palette, default, lighter, darker, text);
$gn-next-mat-theme: mat.define-light-theme( $light-theme: mat.define-light-theme(
( (
color: ( color: (
primary: $gn-next-primary, primary: $gn-next-primary,
@ -53,7 +53,18 @@ $gn-next-mat-theme: mat.define-light-theme(
) )
); );
@include mat.all-component-themes($gn-next-mat-theme); $dark-theme: mat.define-dark-theme(
(
color: (
primary: $gn-next-primary,
accent: $gn-next-secondary,
warn: $gn-next-warning,
),
)
);
@include mat.core-theme($light-theme);
@include mat.all-component-themes($light-theme);
$custom-typography: mat.define-typography-config( $custom-typography: mat.define-typography-config(
$font-family: 'Inter, sans-serif', $font-family: 'Inter, sans-serif',
@ -64,20 +75,11 @@ $custom-typography: mat.define-typography-config(
@include mat.all-component-typographies($custom-typography); @include mat.all-component-typographies($custom-typography);
.mat-flat-button { * {
min-width: unset !important; --mdc-theme-text-primary-on-background: var(--iqser-text);
--mdc-theme-surface: var(--iqser-popup-background);
} }
.mat-progress-spinner circle, .dark {
.mat-spinner circle { @include mat.all-component-colors($dark-theme);
stroke: var(--iqser-primary);
}
.mat-progress-bar-fill::after {
background-color: var(--iqser-primary);
}
.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background,
.mat-checkbox-checked.mat-primary .mat-checkbox-background {
background-color: var(--iqser-primary);
} }

2
libs/common-ui

@ -1 +1 @@
Subproject commit efa522939167c34abf3200a042f8aa7dc5fe7c93 Subproject commit 47080bcd8b18ac0a01417d5e5b5a433e8b11f581