From 3896b19c308f7ae0cb8b4a56cdac16f09e9768fd Mon Sep 17 00:00:00 2001 From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com> Date: Tue, 2 Apr 2024 11:07:25 +0200 Subject: [PATCH] [ACS-7351] ng15 Manage rules fixes (#3751) * [ACS-7351] ng15 manage rules fixes * [ACS-7351] cr fix * [ACS-7351] cr fix --- .../manage-rules.smart-component.scss | 13 ++++++- .../actions/rule-action.ui-component.ts | 19 ++++------ .../options/rule-options.ui-component.scss | 2 +- .../rule-details.ui-component.scss | 4 ++ .../src/lib/ui/overrides/ay11.scss | 38 +++++-------------- projects/aca-content/src/lib/ui/theme.scss | 13 +++++++ 6 files changed, 45 insertions(+), 44 deletions(-) diff --git a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss index 14407d18ce..0120a27761 100644 --- a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss +++ b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss @@ -49,7 +49,7 @@ z-index: 1; display: flex; flex-direction: row; - align-items: center; + align-items: flex-start; overflow-x: auto; justify-content: space-between; padding: 12px 20px; @@ -75,7 +75,7 @@ } } - &__buttons { + .aca-manage-rules__container__rule-details__header__buttons { display: flex; flex-direction: row; align-items: stretch; @@ -86,7 +86,16 @@ &#delete-rule-btn { padding: 0 8px; + margin: 0; min-width: unset; + + mat-icon { + margin: 0; + padding: 0; + width: 24px; + height: 24px; + font-size: 24px; + } } } } diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.ts b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.ts index c912ed95d8..69088ba699 100644 --- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.ts +++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.ts @@ -176,8 +176,13 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh ngOnChanges(changes: SimpleChanges): void { const readOnly = changes['readOnly']?.currentValue; if (readOnly !== undefined && readOnly !== null) { - this.readOnly = readOnly; - this.setDisabledState(readOnly); + if (readOnly) { + this.readOnly = true; + this.form.disable(); + } else { + this.readOnly = false; + this.form.enable(); + } } } @@ -337,16 +342,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh }); } - setDisabledState(isDisabled: boolean) { - if (isDisabled) { - this.readOnly = true; - this.form.disable(); - } else { - this.readOnly = false; - this.form.enable(); - } - } - private parseConstraintsToSelectOptions(constraints: ConstraintValue[]): CardViewSelectItemOption[] { return constraints .sort((a, b) => { diff --git a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss index af7a9f4105..826b721c3f 100644 --- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss +++ b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss @@ -8,7 +8,7 @@ flex-direction: column; } - &.aca-read-only &__checkbox label > span:first-child { + &.aca-read-only &__checkbox > div > div:first-child { display: none; } diff --git a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss index bf8bdccaa1..8015a47a81 100644 --- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss +++ b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss @@ -81,6 +81,10 @@ .mat-mdc-select-disabled .mat-mdc-select-value { color: inherit; } + + .mat-mdc-select-arrow-wrapper { + display: none; + } } } } diff --git a/projects/aca-content/src/lib/ui/overrides/ay11.scss b/projects/aca-content/src/lib/ui/overrides/ay11.scss index db9c8d033e..510a845628 100644 --- a/projects/aca-content/src/lib/ui/overrides/ay11.scss +++ b/projects/aca-content/src/lib/ui/overrides/ay11.scss @@ -101,50 +101,30 @@ } } - // TODO investigate after app is run - .mat-mdc-slide-toggle { - /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ - .mat-slide-toggle-thumb { + .mat-mdc-slide-toggle .mdc-form-field { + .mdc-switch .mdc-switch__handle { width: 15px; height: 15px; transform: translate(20%, 50%); background-color: #484a4d; } - /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ - .mat-slide-toggle-bar { + .mdc-switch .mdc-switch__track { border-radius: 15px; height: 20px; } - /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ - .mat-slide-toggle-thumb-container { - top: -5px; + .mdc-switch__handle-track { + top: -15px; } - /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ - .mat-slide-toggle-ripple { + .mdc-switch__ripple { display: none; } + } - &.cdk-keyboard-focused { - /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ - .mat-slide-toggle-bar { - outline: 2px solid var(--theme-blue-button-color); - } - } - - &.mat-primary.mat-checked:not(.mat-disabled) { - /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ - .mat-slide-toggle-bar { - background-color: var(--theme-blue-button-color); - } - - /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */ - .mat-slide-toggle-thumb { - background-color: white; - } - } + .mat-mdc-slide-toggle.cdk-keyboard-focused .mdc-form-field .mdc-switch .mdc-switch__track { + outline: 2px solid var(--theme-blue-button-color); } .mat-mdc-outlined-button, diff --git a/projects/aca-content/src/lib/ui/theme.scss b/projects/aca-content/src/lib/ui/theme.scss index 1e0212306d..d4da364cdb 100644 --- a/projects/aca-content/src/lib/ui/theme.scss +++ b/projects/aca-content/src/lib/ui/theme.scss @@ -18,6 +18,19 @@ mat-icon { color: var(--theme-secondary-text); } +mat-slide-toggle { + .mdc-switch__icons { + display: none; + } + + .mdc-switch--unselected.mdc-switch:enabled .mdc-switch__track::before, + .mdc-switch--unselected.mdc-switch:enabled:active .mdc-switch__track::before, + .mdc-switch--unselected.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before, + .mdc-switch--unselected.mdc-switch:enabled:hover:not(:focus:active) .mdc-switch__track::before { + background: var(--adf-theme-foreground-disabled-text-color); + } +} + .mat-mdc-tab-list { .mat-mdc-tab-labels { .mdc-tab--active {