Merge pull request #631 from exadel-inc/feature/inactive-setting-class

feat: add inactive class to base setting

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;
 
@@ -83,6 +91,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 {

src/plugins/settings/bool-setting/bool-setting.less

@@ -1,14 +1,20 @@
 .uip-bool-setting {
-  label {
+  .label-field {
     display: inline-flex;
+    flex-wrap: wrap;
     align-items: center;
 
-    input {
-      margin: 5px 6px 2px;
+    .label-input {
+      margin: 5px 0 2px 6px;
+    }
+
+    .label-msg,
+    .inconsistency-msg {
+      margin-left: 6px;
     }
   }
 
-  .inconsistency-marker {
+  .inconsistency-msg {
     color: grey;
 
     &.disabled {

src/plugins/settings/bool-setting/bool-setting.tsx

@@ -32,23 +32,23 @@ 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 (
-      <label>
-        {this.$field}
-        {this.label}
+      <label class={this.labelFieldClass}>
+        {this.$field}<span class={this.labelMsgClass}>{this.label}</span>
       </label>
     ) as HTMLElement;
   }
 
   /** Container element for displaying inconsistency message */
   @memoize()
-  protected get $inconsistencyMarker(): HTMLElement {
-    return <div className="inconsistency-marker"/> as HTMLElement;
+  protected get $inconsistencyMsg(): HTMLElement {
+    return <span className={this.inconsistencyMsgClass}/> as HTMLElement;
   }
 
   protected override connectedCallback(): void {
@@ -81,15 +81,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} */
@@ -126,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);
   }
 }