fix(privacy): implement toggle disable and setting row fold

HabitRPG · Dec 27, 2024 · fb483e6 · fb483e6
1 parent f13fcdb
commit fb483e6
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 17 deletions.
diff --git a/website/client/src/components/settings/privacyModal.vue b/website/client/src/components/settings/privacyModal.vue
@@ -34,7 +34,10 @@
         <label class="mb-0">
           {{ $t('strictlyNecessary') }}
         </label>
-        <toggle-switch />
+        <toggle-switch
+          :checked="true"
+          :disabled="true"
+        />
       </div>
       <small>
         {{ $t('requiredToRun') }}
@@ -50,7 +53,10 @@
       <button class="btn btn-secondary mb-3">
         {{ $t('savePreferences') }}
       </button>
-      <a>
+      <a
+        href="/static/privacy"
+        target="_blank"
+      >
         {{ $t('habiticaPrivacyPolicy') }}
       </a>
     </div>

diff --git a/website/client/src/components/ui/toggleSwitch.vue b/website/client/src/components/ui/toggleSwitch.vue
@@ -26,12 +26,17 @@
           :checked="isChecked"
           :value="value"
           @change="handleChange"
+          :disabled="disabled"
         >
         <label
           class="toggle-switch-label"
           :for="toggleId"
         >
-          <span class="toggle-switch-inner"></span>
+          <span
+            class="toggle-switch-inner"
+            :class="{ disabled }"
+          >
+          </span>
           <span
             class="toggle-switch-switch"
             tabindex="0"
@@ -111,7 +116,7 @@
   .toggle-switch-inner:before {
     content: "";
     padding-left: 10px;
-    background-color: $green-50;
+    background-color: $green-10;
   }
 
   .toggle-switch-inner:after {
@@ -121,6 +126,10 @@
     text-align: right;
   }
 
+  .toggle-switch-inner.disabled:before, .toggle-switch-inner.disabled:after {
+    opacity: 0.5;
+  }
+
   .toggle-switch-switch {
     box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
     display: block;
@@ -181,6 +190,10 @@ export default {
     hoverText: {
       type: String,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {

diff --git a/website/client/src/pages/settings/components/saveCancelButtons.vue b/website/client/src/pages/settings/components/saveCancelButtons.vue
@@ -5,7 +5,7 @@
   >
     <button
       v-if="!hideSave"
-      class="btn btn-save"
+      class="btn btn-save mb-2"
       :class="primaryButtonColor ?? 'btn-primary'"
       type="submit"
       :disabled="disableSave"
@@ -61,8 +61,4 @@ export default {
     margin-top: 1.5rem;
   }
 }
-
-.btn-save {
-  margin-bottom: 1rem;
-}
 </style>
diff --git a/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue b/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue
@@ -1,6 +1,26 @@
 <template>
   <tr>
-    <td colspan="3">
+    <td colspan="3"
+      v-if="!mixinData.inlineSettingMixin.modalVisible"
+    >
+      <div class="d-flex justify-content-between align-items-center">
+        <h3
+          v-once
+          class="gray-50 mb-0"
+        >
+          {{ $t('yourPrivacyPreferences') }}
+        </h3>
+        <a
+          class="edit-link"
+          @click.prevent="openModal()"
+        >
+          {{ $t('edit') }}
+        </a>
+      </div>
+    </td>
+    <td colspan="3"
+      v-if="mixinData.inlineSettingMixin.modalVisible"
+    >
       <h3
         v-once
         class="purple-200 mb-0"
@@ -43,12 +63,10 @@
               {{ $t('usedForSupport') }}
             </small>
           </div>
-          <div class="d-flex flex-column justify-content-center">
-            <button class="btn btn-primary mx-auto mb-2">
-              {{ $t('save') }}
-            </button>
-            <a class="mx-auto mb-4">{{ $t('cancel') }}</a>
-          </div>
+          <save-cancel-buttons
+            class="mb-4"
+            @cancelClicked="requestCloseModal()"
+          />
         </div>
       </div>
     </td>
@@ -81,15 +99,19 @@
 </style>
 
 <script>
-import { mapState } from '@/libs/store';
+import SaveCancelButtons from '@/pages/settings/components/saveCancelButtons.vue';
 import ToggleSwitch from '@/components/ui/toggleSwitch.vue';
 import { GenericUserPreferencesMixin } from '@/pages/settings/components/genericUserPreferencesMixin';
+import { InlineSettingMixin } from '../components/inlineSettingMixin';
+import { mapState } from '@/libs/store';
 
 export default {
   mixins: [
     GenericUserPreferencesMixin,
+    InlineSettingMixin,
   ],
   components: {
+    SaveCancelButtons,
     ToggleSwitch,
   },
   computed: {