feat(ui): implementation of layout for locked toggle (#1296)

Satellite-im · Feb 4, 2022 · d4151d8 · d4151d8
1 parent 81f6bad
commit d4151d8
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 35 deletions.
diff --git a/assets/styles/base.less b/assets/styles/base.less
@@ -232,25 +232,22 @@ button {
 .switch-container {
   .switch-button-control {
     .switch-button {
+      border: 0.125rem solid var(--flair-color);
+      box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.33);
+
       .sw-button {
-        border: 2px solid var(--flair-color);
         &:extend(.background-flair);
+        &:extend(.switch-off-glow-flair);
       }
 
-      border: 2px solid var(--flair-color);
-      box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.33);
-    }
-    .switch-button.enabled {
-      &:extend(.background-flair);
-      &:extend(.glow-flair);
-      .sw-button {
-        background: @white !important;
-      }
-    }
+      &.enabled {
+        &:extend(.background-flair);
+        &:extend(.glow-flair);
 
-    .switch-button {
-      .sw-button {
-        &:extend(.switch-off-glow-flair);
+        .sw-button {
+          border: 0.2rem solid var(--flair-color);
+          background: @white !important;
+        }
       }
     }
   }

diff --git a/components/interactables/Switch/Switch.html b/components/interactables/Switch/Switch.html
@@ -1,6 +1,10 @@
 <div class="switch-container">
   <div :class="`switch-button-control ${small ? 'is-small' : ''}`">
-    <div class="switch-button" :class="{ enabled: isEnabled }" @click="toggle">
+    <div
+      class="switch-button"
+      :class="{ enabled: isEnabled, locked: isLocked }"
+      @click="toggle"
+    >
       <div class="sw-button"></div>
     </div>
     <div class="switch-button-label">

diff --git a/components/interactables/Switch/Switch.less b/components/interactables/Switch/Switch.less
@@ -1,45 +1,71 @@
 .switch-container {
+  display: inline-flex;
+  align-content: flex-end;
+  margin: @light-spacing 0;
+  align-items: center;
+
   .is-small {
     transform: scale(0.75);
     transform-origin: 0;
   }
+
   .switch-label {
     display: inline-block;
     margin-left: 10px;
     padding-top: 3px;
   }
+
   .is-small-label {
     padding-top: 4.5px;
     margin-left: -5px;
     font-size: 12px;
   }
+
   .switch-button-control {
+    display: inline-block;
+
     .switch-button {
-      .sw-button {
-        height: calc(1.6em - (2 * 2px));
-        width: calc(1.6em - (2 * 2px));
-        border-radius: calc(1.6em - (2 * 2px));
-        transition: all @animation-speed-micro ease-in-out;
-      }
-      height: 1.6em;
-      width: calc(1.6em * 2);
-      border-radius: 1.6em;
+      position: relative;
+      height: 1.6rem;
+      width: calc(1.6rem * 2);
+      border-radius: 1.6rem;
       transition: all @animation-speed-micro ease-in-out;
       cursor: pointer;
-    }
-    .switch-button.enabled {
+
       .sw-button {
-        transform: translateX(calc(calc(1.6em - (2 * 2px)) + (2 * 2px)));
+        position: absolute;
+        top: 50%;
+        height: calc(1.6rem - (2 * 0.125rem) - 0.125rem);
+        width: calc(1.6rem - (2 * 0.125rem) - 0.125rem);
+        border-radius: calc(1.6rem - (2 * 0.125rem) - 0.125rem);
+        transition: transform @animation-speed-micro ease-in-out;
+        transform: translateY(-50%) translateX(1px);
+      }
+
+      &.enabled {
+        box-shadow: none;
+
+        .sw-button {
+          height: calc(1.6rem - (2 * 0.125rem));
+          width: calc(1.6rem - (2 * 0.125rem));
+          border-radius: calc(1.6rem - (2 * 0.125rem));
+          transform: translateY(-50%)
+            translateX(calc(calc(1.6rem - (2 * 0.125rem)) + (2 * 0.125rem)));
+        }
+      }
+
+      &.locked {
+        border-color: @gray;
+        .sw-button {
+          border-color: @gray;
+          background: @gray !important;
+          box-shadow: -5px 0px 20px -2px @gray !important;
+        }
       }
-      box-shadow: none;
     }
+
     .switch-button-label {
       margin-left: 10px;
     }
-    display: inline-block;
   }
-  display: inline-flex;
-  align-content: flex-end;
-  margin: @light-spacing 0;
-  align-items: center;
 }
diff --git a/components/interactables/Switch/Switch.vue b/components/interactables/Switch/Switch.vue
@@ -34,6 +34,15 @@ export default Vue.extend({
       required: false,
       default: '',
     },
+
+    /**
+     * If provided the button would appear as disabled and non interactable
+     */
+    isLocked: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   methods: {
     /**
@@ -42,7 +51,9 @@ export default Vue.extend({
      * @example
      */
     toggle() {
-      this.$emit('toggle', !this.isEnabled)
+      if (!this.isLocked) {
+        this.$emit('toggle', !this.isEnabled)
+      }
     },
   },
 })

diff --git a/components/views/settings/pages/privacy/Privacy.html b/components/views/settings/pages/privacy/Privacy.html
@@ -11,7 +11,7 @@
         :title="$t('pages.privacy.register.title')"
         :text="$t('pages.privacy.register.subtitle')"
       >
-        <InteractablesSwitch :isEnabled="true" />
+        <InteractablesSwitch isLocked />
       </SettingsUnit>
       <SettingsUnit
         :title="$t('pages.privacy.pin.title')"