From e66922390dabe66e13a22522889ac1986216a577 Mon Sep 17 00:00:00 2001 From: Yuliya Adamska Date: Tue, 9 Jan 2024 15:12:59 +0300 Subject: [PATCH 1/4] feat: add inactive class to base setting --- src/plugins/settings/base-setting/base-setting.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/settings/base-setting/base-setting.ts b/src/plugins/settings/base-setting/base-setting.ts index 1eba614a..1629dc09 100644 --- a/src/plugins/settings/base-setting/base-setting.ts +++ b/src/plugins/settings/base-setting/base-setting.ts @@ -83,6 +83,7 @@ export abstract class UIPSetting extends UIPPlugin { if (!values.length) { this.disabled = true; this.setInconsistency(this.NO_TARGET_MSG); + this.classList.add('uip-inactive-setting'); } else if (values.some((value) => value !== values[0])) { this.setInconsistency(this.MULTIPLE_VALUE_MSG); } else { From ada4734dbef486bf20f7bfb0447153855bc9c9b6 Mon Sep 17 00:00:00 2001 From: Yuliya Adamska Date: Tue, 9 Jan 2024 15:14:20 +0300 Subject: [PATCH 2/4] chore: fix inconsistent initial state of bool setting --- .../settings/bool-setting/bool-setting.tsx | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/src/plugins/settings/bool-setting/bool-setting.tsx b/src/plugins/settings/bool-setting/bool-setting.tsx index dbcdac8d..2dc7c8f6 100644 --- a/src/plugins/settings/bool-setting/bool-setting.tsx +++ b/src/plugins/settings/bool-setting/bool-setting.tsx @@ -38,10 +38,12 @@ export class UIPBoolSetting extends UIPSetting { @memoize() protected get $inner(): HTMLElement { return ( - + <> + + ) as HTMLElement; } @@ -53,7 +55,6 @@ export class UIPBoolSetting extends UIPSetting { protected override connectedCallback(): void { super.connectedCallback(); - this.innerHTML = ''; this.appendChild(this.$inner); } @@ -81,15 +82,9 @@ export class UIPBoolSetting extends UIPSetting { } updateFrom(model: UIPStateModel): void { - this.disabled = false; + super.updateFrom(model); const attrValues = model.getAttribute(this.target, this.attribute); - - if (!attrValues.length) { - this.disabled = true; - return this.setInconsistency(this.NO_TARGET_MSG); - } - - this.mode === 'replace' ? this.updateReplace(attrValues) : this.updateAppend(attrValues); + if (attrValues.length) this.mode === 'replace' ? this.updateReplace(attrValues) : this.updateAppend(attrValues); } /** Updates setting's value for replace {@link mode} */ From a393d8733843f130c823f9cc331d7a22ce7f235e Mon Sep 17 00:00:00 2001 From: Yuliya Adamska Date: Tue, 9 Jan 2024 20:44:39 +0300 Subject: [PATCH 3/4] chore: set inconsistency msg as span element --- .../settings/bool-setting/bool-setting.less | 9 ++++++-- .../settings/bool-setting/bool-setting.tsx | 23 +++++++++---------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/plugins/settings/bool-setting/bool-setting.less b/src/plugins/settings/bool-setting/bool-setting.less index fd86fa60..1a89b40f 100644 --- a/src/plugins/settings/bool-setting/bool-setting.less +++ b/src/plugins/settings/bool-setting/bool-setting.less @@ -1,14 +1,19 @@ .uip-bool-setting { label { display: inline-flex; + flex-wrap: wrap; align-items: center; input { - margin: 5px 6px 2px; + margin: 5px 0 2px 6px; + } + + span { + margin-left: 6px; } } - .inconsistency-marker { + .inconsistency-msg { color: grey; &.disabled { diff --git a/src/plugins/settings/bool-setting/bool-setting.tsx b/src/plugins/settings/bool-setting/bool-setting.tsx index 2dc7c8f6..6a5a6a05 100644 --- a/src/plugins/settings/bool-setting/bool-setting.tsx +++ b/src/plugins/settings/bool-setting/bool-setting.tsx @@ -38,23 +38,22 @@ export class UIPBoolSetting extends UIPSetting { @memoize() protected get $inner(): HTMLElement { return ( - <> - - + ) as HTMLElement; } /** Container element for displaying inconsistency message */ @memoize() - protected get $inconsistencyMarker(): HTMLElement { - return
as HTMLElement; + protected get $inconsistencyMsg(): HTMLElement { + return as HTMLElement; } protected override connectedCallback(): void { super.connectedCallback(); + this.innerHTML = ''; this.appendChild(this.$inner); } @@ -121,17 +120,17 @@ export class UIPBoolSetting extends UIPSetting { } else { this.$field.checked = value !== null; } - this.$inconsistencyMarker.remove(); + this.$inconsistencyMsg.remove(); } protected setInconsistency(msg = this.INCONSISTENT_VALUE_MSG): void { this.$field.checked = false; - this.$inconsistencyMarker.innerText = msg; - this.append(this.$inconsistencyMarker); + this.$inconsistencyMsg.innerText = msg; + this.$inner.append(this.$inconsistencyMsg); } set disabled(force: boolean) { - this.$inconsistencyMarker.classList.toggle('disabled', force); + this.$inconsistencyMsg.classList.toggle('disabled', force); this.$field.toggleAttribute('disabled', force); } } From 03f4bb10e2820657019bf61498cf614119578190 Mon Sep 17 00:00:00 2001 From: Yuliya Adamska Date: Wed, 10 Jan 2024 17:51:03 +0300 Subject: [PATCH 4/4] chore: create classes for label field elements --- src/plugins/settings/base-setting/base-setting.ts | 8 ++++++++ src/plugins/settings/bool-setting/bool-setting.less | 7 ++++--- src/plugins/settings/bool-setting/bool-setting.tsx | 8 ++++---- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/plugins/settings/base-setting/base-setting.ts b/src/plugins/settings/base-setting/base-setting.ts index 1629dc09..e3e16b04 100644 --- a/src/plugins/settings/base-setting/base-setting.ts +++ b/src/plugins/settings/base-setting/base-setting.ts @@ -24,6 +24,14 @@ export abstract class UIPSetting extends UIPPlugin { /** Invalid value message */ @prop('Invalid setting value') public INVALID_VALUE_MSG: string; + /** Class for label field element */ + @attr({defaultValue: 'label-field'}) public labelFieldClass: string; + /** Class for label input element */ + @attr({defaultValue: 'label-input'}) public labelInputClass: string; + /** Class for label message element */ + @attr({defaultValue: 'label-msg'}) public labelMsgClass: string; + /** Class for inconsistent message element */ + @attr({defaultValue: 'inconsistency-msg'}) public inconsistencyMsgClass: string; /** {@link target} attribute which is changed by setting */ @attr() public attribute: string; diff --git a/src/plugins/settings/bool-setting/bool-setting.less b/src/plugins/settings/bool-setting/bool-setting.less index 1a89b40f..c7c4a293 100644 --- a/src/plugins/settings/bool-setting/bool-setting.less +++ b/src/plugins/settings/bool-setting/bool-setting.less @@ -1,14 +1,15 @@ .uip-bool-setting { - label { + .label-field { display: inline-flex; flex-wrap: wrap; align-items: center; - input { + .label-input { margin: 5px 0 2px 6px; } - span { + .label-msg, + .inconsistency-msg { margin-left: 6px; } } diff --git a/src/plugins/settings/bool-setting/bool-setting.tsx b/src/plugins/settings/bool-setting/bool-setting.tsx index 6a5a6a05..9a20bb15 100644 --- a/src/plugins/settings/bool-setting/bool-setting.tsx +++ b/src/plugins/settings/bool-setting/bool-setting.tsx @@ -32,15 +32,15 @@ export class UIPBoolSetting extends UIPSetting { const $field = document.createElement('input'); $field.type = 'checkbox'; $field.name = this.label; + $field.className = this.labelInputClass; return $field; } @memoize() protected get $inner(): HTMLElement { return ( -