From e884d8a513c8dd2df3564b3021bfa0d46bfe74d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 29 May 2023 21:24:06 +0300 Subject: [PATCH] RED-5875: Material upgrade - checkbox --- src/assets/styles/common-checkbox.scss | 75 ++++++++++++------- src/assets/styles/common-chips.scss | 6 +- src/assets/styles/common-inputs.scss | 10 ++- src/assets/styles/common-texts.scss | 5 ++ src/lib/common-ui.module.ts | 2 +- .../confirmation-dialog.component.ts | 2 +- .../filter-card/filter-card.component.ts | 2 +- src/lib/filtering/filters.module.ts | 2 +- 8 files changed, 72 insertions(+), 32 deletions(-) diff --git a/src/assets/styles/common-checkbox.scss b/src/assets/styles/common-checkbox.scss index 2965c7e..a204877 100644 --- a/src/assets/styles/common-checkbox.scss +++ b/src/assets/styles/common-checkbox.scss @@ -1,39 +1,64 @@ -.mat-checkbox .mat-checkbox-frame { - border: 1px solid var(--iqser-grey-5); +$checkbox-size: 16px; +$ripple-size: 26px; + +.mat-mdc-checkbox .mdc-checkbox { + flex: 0 0 $checkbox-size; + width: $checkbox-size; + height: $checkbox-size; } -.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, -.mat-checkbox-checked.mat-accent .mat-checkbox-background { - margin-top: 1px; - margin-left: 1px; - width: 18px; - height: 18px; -} +.mat-mdc-checkbox, +.mdc-checkbox { + --mdc-checkbox-state-layer-size: $checkbox-size; + --mdc-checkbox-unselected-icon-color: var(--iqser-grey-5); + --mdc-checkbox-unselected-hover-icon-color: var(--iqser-grey-5); + --mdc-checkbox-unselected-pressed-icon-color: var(--iqser-grey-5); + --mdc-checkbox-unselected-focus-icon-color: var(--iqser-grey-5); + --mdc-theme-text-primary-on-background: var(--iqser-text); + --mdc-checkbox-disabled-selected-icon-color: var(--iqser-primary); + --mdc-checkbox-disabled-unselected-icon-color: var(--iqser-grey-5); -.mat-checkbox-layout { - align-items: center !important; - - .mat-checkbox-inner-container { - margin-left: 0; + .mdc-form-field > label { + padding-left: 8px; + line-height: 24px; } - .mat-checkbox-label { - font-size: var(--iqser-font-size); - color: var(--iqser-text); + .mdc-checkbox__ripple { + background: var(--iqser-background); + width: $ripple-size; + height: $ripple-size; + left: calc(($checkbox-size - $ripple-size) / 2); + top: calc(($checkbox-size - $ripple-size) / 2); + } - display: flex; - align-items: center; + .mdc-checkbox__background { + border-width: 1px; + width: $checkbox-size; + height: $checkbox-size; + top: 0 !important; + left: 0 !important; + } - > *:not(:last-child) { - margin-right: 8px; - } + .mat-mdc-checkbox-touch-target { + position: unset; + height: $ripple-size; + width: $ripple-size; + transform: translate(calc(($checkbox-size - $ripple-size) / 2), calc(($checkbox-size - $ripple-size) / 2)); } } -.mat-checkbox.error .mat-checkbox-label { - color: var(--iqser-primary); +.mdc-checkbox label { + font-size: var(--iqser-font-size); + color: var(--iqser-text); + + display: flex; + align-items: center; + + > *:not(:last-child) { + margin-right: 8px; + } } -.mat-checkbox-disabled { +.mat-mdc-checkbox-disabled .mdc-checkbox { opacity: 0.5; } diff --git a/src/assets/styles/common-chips.scss b/src/assets/styles/common-chips.scss index 8d035e0..9cdc7ea 100644 --- a/src/assets/styles/common-chips.scss +++ b/src/assets/styles/common-chips.scss @@ -15,9 +15,13 @@ mat-chip-listbox { } } +.mat-mdc-standard-chip, +.mat-mdc-standard-chip.mat-primary.mat-mdc-chip-selected { + --mdc-chip-label-text-color: var(--iqser-text); +} + .mdc-evolution-chip-set mat-chip-option.mat-mdc-standard-chip { background-color: var(--iqser-background); - color: var(--iqser-text); border-radius: 4px; margin: 0 0 2px 0; padding: 0 12px; diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss index 2cf9920..09eff2e 100644 --- a/src/assets/styles/common-inputs.scss +++ b/src/assets/styles/common-inputs.scss @@ -9,6 +9,12 @@ iqser-dynamic-input { display: flex; } +.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix { + padding-top: 0; + padding-bottom: 0; + min-height: var(--iqser-inputs-height); +} + .iqser-input-group { display: flex; flex-direction: column; @@ -85,7 +91,7 @@ iqser-dynamic-input { background: var(--iqser-background); } - input, + input:not([type='checkbox']), textarea { box-sizing: border-box; margin-top: 3px; @@ -179,7 +185,7 @@ iqser-dynamic-input { } } - label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) { + > label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) { opacity: 0.7; font-size: 11px; letter-spacing: 0; diff --git a/src/assets/styles/common-texts.scss b/src/assets/styles/common-texts.scss index 4bb6202..bfd8b03 100644 --- a/src/assets/styles/common-texts.scss +++ b/src/assets/styles/common-texts.scss @@ -1,5 +1,10 @@ @use 'common-mixins' as mixins; +* { + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; +} + .text-muted { opacity: 0.7; } diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index 63e3168..ba91d2e 100644 --- a/src/lib/common-ui.module.ts +++ b/src/lib/common-ui.module.ts @@ -7,7 +7,7 @@ import { CommonUiOptions, IqserAppConfig, ModuleOptions } from './utils'; import { ConnectionStatusComponent, FullPageErrorComponent } from './error'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; +import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar'; import { MatTooltipModule } from '@angular/material/tooltip'; import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services'; diff --git a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts index 408b949..0f1c635 100644 --- a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts +++ b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts @@ -6,7 +6,7 @@ import { CircleButtonComponent, IconButtonComponent, IconButtonTypes } from '../ import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common'; import { MatIconModule } from '@angular/material/icon'; import { FormsModule } from '@angular/forms'; -import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; +import { MatCheckboxModule } from '@angular/material/checkbox'; import { ValuesOf } from '../../utils'; export const TitleColors = { diff --git a/src/lib/filtering/filter-card/filter-card.component.ts b/src/lib/filtering/filter-card/filter-card.component.ts index 3734126..d7c7c8f 100644 --- a/src/lib/filtering/filter-card/filter-card.component.ts +++ b/src/lib/filtering/filter-card/filter-card.component.ts @@ -10,7 +10,7 @@ import { Filter } from '../models/filter'; import { map } from 'rxjs/operators'; import { shareDistinctLast, shareLast } from '../../utils'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { MAT_LEGACY_CHECKBOX_DEFAULT_OPTIONS as MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/legacy-checkbox'; +import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox'; const areExpandable = (nestedFilter: INestedFilter) => !!nestedFilter?.children?.length; const atLeastOneIsExpandable = pipe( diff --git a/src/lib/filtering/filters.module.ts b/src/lib/filtering/filters.module.ts index 7554ec8..e13a6e8 100644 --- a/src/lib/filtering/filters.module.ts +++ b/src/lib/filtering/filters.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; +import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatMenuModule } from '@angular/material/menu'; import { TranslateModule } from '@ngx-translate/core'; import { ChevronButtonComponent, IconButtonComponent } from '../buttons';