fix(options): fix displaying active options

exadel-inc · Jun 3, 2021 · 12abac8 · 12abac8
1 parent 7892b6c
commit 12abac8
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 98 deletions.
diff --git a/src/core/mode.less b/src/core/mode.less
@@ -1,44 +1,46 @@
 @import './variables';
 
-uip-root {
+.uip-root {
   &.vertical-mode {
     &.settings-attached {
       grid-template-columns: 15% calc(65% - 20px) calc(20% - 20px);
 
-      & > uip-editor {
+      & > .uip-editor {
         grid-column: 1 / 4;
       }
     }
 
     grid-template-columns: calc(20% - 10px) calc(80% - 10px);
     grid-template-rows: 1fr 550px 350px;
 
-    & > uip-snippets {
-      grid-column: 1 / 2;
-      grid-row: 2 / 3;
+    & > .uip-plugin {
+      &.uip-snippets {
+        grid-column: 1 / 2;
+        grid-row: 2 / 3;
 
-      .snippets-list-item {
-        border-bottom: 1px solid @element-border;
+        .snippets-list-item {
+          border-bottom: 1px solid @element-border;
 
-        &:not(:first-child) {
-          margin-top: 10px;
+          &:not(:first-child) {
+            margin-top: 10px;
+          }
         }
       }
-    }
 
-    & > uip-preview {
-      grid-column: 2 / 3;
-      grid-row: 2 / 3;
-    }
+      &.uip-preview {
+        grid-column: 2 / 3;
+        grid-row: 2 / 3;
+      }
 
-    & > uip-settings {
-      grid-column: 3 / 4;
-      grid-row: 2 / 3;
-    }
+      &.uip-settings {
+        grid-column: 3 / 4;
+        grid-row: 2 / 3;
+      }
 
-    & > uip-editor {
-      grid-column: 1 / 3;
-      grid-row: 3 / 4;
+      &.uip-editor {
+        grid-column: 1 / 3;
+        grid-row: 3 / 4;
+      }
     }
   }
 
@@ -47,52 +49,54 @@ uip-root {
     &.settings-attached {
       grid-template-columns: calc(75% - 10px) calc(25% - 10px);
 
-      & > uip-snippets, & > uip-editor {
+      & > .uip-snippets, & > .uip-editor {
         grid-column: 1 / 3;
       }
     }
 
     grid-template-columns: 100%;
     grid-template-rows: auto 1fr 550px 350px;
 
-    & > uip-snippets {
-      // add specificity
-      grid-column: 1 / 2;
-      grid-row: 2 / 3;
+    & > .uip-plugin {
+      &.uip-snippets {
+        // add specificity
+        grid-column: 1 / 2;
+        grid-row: 2 / 3;
 
-      ul.snippets-list {
-        margin-left: 5px;
-      }
+        .snippets-list {
+          margin-left: 5px;
+        }
 
-      ul.snippets-list li {
-        display: inline-block;
-
-        &:not(:last-child) {
-          &::after {
-            content: '|';
-            width: 5px;
-            height: 100%;
-            font-weight: 400;
-            margin: 0 20px;
-            color: @element-border;
+        .snippets-list .snippets-list-item {
+          display: inline-block;
+
+          &:not(:last-child) {
+            &::after {
+              content: '|';
+              width: 5px;
+              height: 100%;
+              font-weight: 400;
+              margin: 0 20px;
+              color: @element-border;
+            }
           }
         }
       }
-    }
 
-    & > uip-preview {
-      grid-column: 1 / 2;
-      grid-row: 3 / 4;
-    }
+      &.uip-preview {
+        grid-column: 1 / 2;
+        grid-row: 3 / 4;
+      }
 
-    & > uip-settings {
-      grid-column: 2 / 3;
-      grid-row: 3 / 4;
-    }
+      &.uip-settings {
+        grid-column: 2 / 3;
+        grid-row: 3 / 4;
+      }
 
-    & > uip-editor {
-      grid-column: 1 / 2;
-      grid-row: 4 / 5;
+      &.uip-editor {
+        grid-column: 1 / 2;
+        grid-row: 4 / 5;
+      }
     }
   }
 }
diff --git a/src/core/theme.less b/src/core/theme.less
@@ -1,26 +1,24 @@
 @import './variables';
 
-uip-root {
+.uip-root {
   &.uip-light-theme {
     background-color: @light-theme;
 
-    & > uip-snippets {
-      ul.snippets-list li {
-        &:not(:last-child) {
-          &::after {
-            color: @dark-text-decorator-color;
-          }
-        }
-      }
-    }
-
     & > .uip-plugin {
       background-color: @light-theme-section;
       color: @dark-text;
-    }
 
-    & > uip-settings {
-      uip-check-setting, uip-list-setting, uip-text-setting {
+      &.uip-snippets {
+        .snippets-list .snippets-list-item {
+          &:not(:last-child) {
+            &::after {
+              color: @dark-text-decorator-color;
+            }
+          }
+        }
+      }
+
+      &.uip-settings .uip-setting {
         label {
           color: @dark-text;
         }
@@ -31,23 +29,21 @@ uip-root {
   &.uip-dark-theme {
     background-color: @dark-theme;
 
-    & > uip-snippets {
-      ul.snippets-list li {
-        &:not(:last-child) {
-          &::after {
-            color: @light-text;
-          }
-        }
-      }
-    }
-
     & > .uip-plugin {
       background-color: @dark-theme-section;
       color: @light-text;
-    }
 
-    & > uip-settings {
-      uip-check-setting, uip-list-setting, uip-text-setting {
+      &.uip-snippets {
+        .snippets-list .snippets-list-item {
+          &:not(:last-child) {
+            &::after {
+              color: @light-text;
+            }
+          }
+        }
+      }
+
+      &.uip-settings .uip-setting {
         label {
           color: @light-text;
         }

diff --git a/src/options/options.less b/src/options/options.less
@@ -7,7 +7,7 @@
     transform: initial;
   }
 
-  input:checked + label {
+  .option-radio-btn:checked + .option-label {
     font-weight: @active-font-weight;
   }
 }
diff --git a/src/options/options.ts b/src/options/options.ts
@@ -1,6 +1,7 @@
 import {attr} from '@exadel/esl/modules/esl-base-element/core';
 import {bind} from '@exadel/esl/modules/esl-utils/decorators/bind';
 import {CSSClassUtils, ESLMediaQuery} from '@exadel/esl';
+import {generateUId} from '@exadel/esl/modules/esl-utils/misc/uid';
 
 import {UIPEditor} from '../editor/editor';
 import {UIPPlugin} from '../core/plugin';
@@ -54,41 +55,35 @@ export class UIPOptions extends UIPPlugin {
   protected renderMode() {
     const $mode = document.createElement('div');
     CSSClassUtils.add($mode, 'uip-option mode');
+    const modeOptionId = generateUId();
     $mode.innerHTML = `
         <div class="option-item">
-            <label class="option-label">
-            Vertical
-            <input type="radio" name="mode" mode="vertical"
+            <input type="radio" id=${modeOptionId}-vertical name=${modeOptionId}-mode mode="vertical"
             class="option-radio-btn" ${this.mode === 'vertical' ? 'checked' : ''}>
-            </label>
+            <label class="option-label" for=${modeOptionId}-vertical>Vertical</label>
         </div>
         <div class="option-item">
-            <label class="option-label">
-            Horizontal
-            <input type="radio" name="mode" mode="horizontal"
+            <input type="radio" id=${modeOptionId}-horizontal name=${modeOptionId}-mode mode="horizontal"
             class="option-radio-btn" ${this.mode === 'horizontal' ? 'checked' : ''}>
-            </label>
+            <label class="option-label" for=${modeOptionId}-horizontal>Horizontal</label>
         </div>`;
     this.appendChild($mode);
   }
 
   protected renderTheme() {
     const $theme = document.createElement('div');
     CSSClassUtils.add($theme, 'uip-option theme');
+    const themeOptionId = generateUId();
     $theme.innerHTML = `
         <div class="option-item">
-            <label class="option-label">
-            Light
-            <input type="radio" name="theme" theme="uip-light"
+            <input type="radio" id=${themeOptionId}-light name=${themeOptionId}-theme theme="uip-light"
             class="option-radio-btn" ${this.theme === 'uip-light' ? 'checked' : ''}>
-            </label>
+            <label class="option-label" for=${themeOptionId}-light>Light</label>
         </div>
         <div class="option-item">
-            <label class="option-label">
-            Dark
-            <input type="radio" name="theme" theme="uip-dark"
+            <input type="radio" id=${themeOptionId}-dark name=${themeOptionId}-theme theme="uip-dark"
             class="option-radio-btn" ${this.theme === 'uip-dark' ? 'checked' : ''}>
-            </label>
+            <label class="option-label" for=${themeOptionId}-dark>Dark</label>
         </div>`;
     this.appendChild($theme);
   }
@@ -97,8 +92,6 @@ export class UIPOptions extends UIPPlugin {
   protected _onOptionChange(e: Event) {
     const target = e.target as HTMLElement;
 
-    if (!target || target.classList.value !== 'option-radio-btn') return;
-
     const mode = target.getAttribute('mode');
     const theme = target.getAttribute('theme');