Merge remote-tracking branch 'delta/negue/ui/setting' into negue/ui/s…

…etting
HabitRPG · Sep 5, 2023 · 962e88a · 962e88a
2 parents 5655a33 + ea8563c
commit 962e88a
Show file tree

Hide file tree

Showing 27 changed files with 78 additions and 81 deletions.
diff --git a/...nt/src/components/header/messageCount.vue → ...onents/header/messageCount.functional.vue b/...nt/src/components/header/messageCount.vue → ...onents/header/messageCount.functional.vue
diff --git a/...der/notifications/challengeInvitation.vue → ...ations/challengeInvitation.functional.vue b/...der/notifications/challengeInvitation.vue → ...ations/challengeInvitation.functional.vue
diff --git a/website/client/src/components/header/notificationsDropdown.vue b/website/client/src/components/header/notificationsDropdown.vue
@@ -117,14 +117,14 @@ import * as quests from '@/../../common/script/content/quests';
 import { hasCompletedOnboarding } from '@/../../common/script/libs/onboarding';
 import notificationsIcon from '@/assets/svg/notifications.svg';
 import MenuDropdown from '../ui/customMenuDropdown';
-import MessageCount from './messageCount.vue';
+import MessageCount from './messageCount.functional.vue';
 import { CONSTANTS, getLocalSetting, setLocalSetting } from '@/libs/userlocalManager';
 import successImage from '@/assets/svg/success.svg';
 import starBadge from '@/assets/svg/star-badge.svg';
 
 // Notifications
 import CARD_RECEIVED from './notifications/cardReceived';
-import CHALLENGE_INVITATION from './notifications/challengeInvitation.vue';
+import CHALLENGE_INVITATION from './notifications/challengeInvitation.functional.vue';
 import GIFT_ONE_GET_ONE from './notifications/g1g1';
 import GROUP_TASK_ASSIGNED from './notifications/groupTaskAssigned';
 import GROUP_TASK_CLAIMED from './notifications/groupTaskClaimed';

diff --git a/website/client/src/components/header/userDropdown.vue b/website/client/src/components/header/userDropdown.vue
@@ -141,7 +141,7 @@
 import { mapState } from '@/libs/store';
 import userIcon from '@/assets/svg/user.svg';
 import MenuDropdown from '../ui/customMenuDropdown';
-import MessageCount from './messageCount.vue';
+import MessageCount from './messageCount.functional.vue';
 import { EVENTS } from '@/libs/events';
 import { PAGES } from '@/libs/consts';
 

diff --git a/website/client/src/components/static/home.vue b/website/client/src/components/static/home.vue
@@ -880,8 +880,6 @@ export default {
   },
   mounted () {
     hello.init({
-      facebook: process.env.FACEBOOK_KEY, // eslint-disable-line
-      // windows: WINDOWS_CLIENT_ID,
       google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
     });
     this.$store.dispatch('common:setTitle', {

diff --git a/website/client/src/components/ui/informationIcon.vue b/website/client/src/components/ui/informationIcon.vue
@@ -35,7 +35,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-
-</style>
diff --git a/website/client/src/pages/settings/components/inlineSettingMixin.js b/website/client/src/pages/settings/components/inlineSettingMixin.js
@@ -20,15 +20,18 @@ export const sharedInlineSettingStore = reactive({
 export const InlineSettingMixin = {
   data () {
     return {
-      // todo before merge use mixinData property
-      modalVisible: false,
-      sharedState: sharedInlineSettingStore,
+      mixinData: {
+        inlineSettingMixin: {
+          modalVisible: false,
+          sharedState: sharedInlineSettingStore,
+        },
+      },
     };
   },
   methods: {
     openModal () {
-      if (this.sharedState.inlineSettingAlreadyOpen) {
-        if (this.sharedState.inlineSettingUnsavedValues) {
+      if (this.mixinData.inlineSettingMixin.sharedState.inlineSettingAlreadyOpen) {
+        if (this.mixinData.inlineSettingMixin.sharedState.inlineSettingUnsavedValues) {
           if (window.confirm(this.$t('confirmCancelChanges'))) {
             this._hidePrevious();
             this._openIt();
@@ -43,22 +46,22 @@ export const InlineSettingMixin = {
       this._openIt();
     },
     _openIt () {
-      this.sharedState.markAsOpened(this);
-      this.modalVisible = true;
+      this.mixinData.inlineSettingMixin.sharedState.markAsOpened(this);
+      this.mixinData.inlineSettingMixin.modalVisible = true;
 
       this.$el.scrollTo({
         behavior: 'smooth',
       });
     },
     _hidePrevious () {
-      this.sharedState.instanceOfCurrentlyOpened.resetControls();
-      this.sharedState.instanceOfCurrentlyOpened.closeModal();
+      this.mixinData.inlineSettingMixin.sharedState.instanceOfCurrentlyOpened.resetControls();
+      this.mixinData.inlineSettingMixin.sharedState.instanceOfCurrentlyOpened.closeModal();
     },
     /**
      * This is just for the cancel buttons - so that they also ask if there are unchanged values
      */
     requestCloseModal () {
-      if (this.sharedState.inlineSettingUnsavedValues && !window.confirm(this.$t('confirmCancelChanges'))) {
+      if (this.mixinData.inlineSettingMixin.sharedState.inlineSettingUnsavedValues && !window.confirm(this.$t('confirmCancelChanges'))) {
         return;
       }
 
@@ -69,11 +72,11 @@ export const InlineSettingMixin = {
      * This is for the save methods to call it after they are done
      */
     closeModal () {
-      this.modalVisible = false;
-      this.sharedState.markAsClosed();
+      this.mixinData.inlineSettingMixin.modalVisible = false;
+      this.mixinData.inlineSettingMixin.sharedState.markAsClosed();
     },
     modalValuesChanged (value = true) {
-      this.sharedState.inlineSettingUnsavedValues = value;
+      this.mixinData.inlineSettingMixin.sharedState.inlineSettingUnsavedValues = value;
     },
     resetControls () {},
   },

diff --git a/website/client/src/pages/settings/components/saveCancelButtons.vue b/website/client/src/pages/settings/components/saveCancelButtons.vue
@@ -27,7 +27,26 @@
 <script>
 export default {
   name: 'SaveCancelButtons',
-  props: ['hideSave', 'hideCancel', 'disableSave', 'primaryButtonLabel', 'primaryButtonColor', 'noPadding'],
+  props: {
+    hideSave: {
+      type: Boolean,
+    },
+    hideCancel: {
+      type: Boolean,
+    },
+    disableSave: {
+      type: Boolean,
+    },
+    noPadding: {
+      type: Boolean,
+    },
+    primaryButtonLabel: {
+      type: String,
+    },
+    primaryButtonColor: {
+      type: String,
+    },
+  },
 };
 </script>
 

diff --git a/website/client/src/pages/settings/promoCode.vue b/website/client/src/pages/settings/promoCode.vue
@@ -15,7 +15,7 @@
         >
           <input
             v-model="couponCode"
-            class="form-control"
+            class="form-control w-100"
             type="text"
             :placeholder="$t('promoPlaceholder')"
           >
@@ -41,15 +41,15 @@
             <div class="form-group">
               <input
                 v-model="codes.event"
-                class="form-control"
+                class="form-control w-100"
                 type="text"
                 placeholder="Event code (eg, 'wondercon')"
               >
             </div>
             <div class="form-group">
               <input
                 v-model="codes.count"
-                class="form-control"
+                class="form-control w-100"
                 type="number"
                 placeholder="Number of codes to generate (eg, 250)"
               >
@@ -74,12 +74,6 @@
   </div>
 </template>
 
-<style scoped>
-  .form-control {
-    width: 100%;
-  }
-</style>
-
 <script>
 import axios from 'axios';
 import { mapState } from '@/libs/store';

diff --git a/website/client/src/pages/settings/settingRows/audioThemeSetting.vue b/website/client/src/pages/settings/settingRows/audioThemeSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!modalVisible"
+      v-if="!mixinData.inlineSettingMixin.modalVisible"
     >
       <td
         v-once
@@ -22,7 +22,7 @@
       </td>
     </tr>
     <tr
-      v-if="modalVisible"
+      v-if="mixinData.inlineSettingMixin.modalVisible"
       class="expanded"
     >
       <td colspan="3">

diff --git a/website/client/src/pages/settings/settingRows/classSetting.vue b/website/client/src/pages/settings/settingRows/classSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment v-if="allowedToChangeClass">
     <tr
-      v-if="!modalVisible"
+      v-if="!mixinData.inlineSettingMixin.modalVisible"
     >
       <td class="settings-label">
         {{ $t("changeClassSetting") }}
@@ -22,7 +22,7 @@
       </td>
     </tr>
     <tr
-      v-if="modalVisible"
+      v-if="mixinData.inlineSettingMixin.modalVisible"
       class="expanded"
     >
       <td colspan="3">

diff --git a/website/client/src/pages/settings/settingRows/dateFormatSetting.vue b/website/client/src/pages/settings/settingRows/dateFormatSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!modalVisible"
+      v-if="!mixinData.inlineSettingMixin.modalVisible"
     >
       <td class="settings-label">
         {{ $t("dateFormat") }}
@@ -19,7 +19,7 @@
       </td>
     </tr>
     <tr
-      v-if="modalVisible"
+      v-if="mixinData.inlineSettingMixin.modalVisible"
       class="expanded"
     >
       <td colspan="3">

diff --git a/website/client/src/pages/settings/settingRows/dayStartAdjustmentSetting.vue b/website/client/src/pages/settings/settingRows/dayStartAdjustmentSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!modalVisible"
+      v-if="!mixinData.inlineSettingMixin.modalVisible"
     >
       <td class="settings-label">
         {{ $t("dayStartAdjustment") }}
@@ -19,7 +19,7 @@
       </td>
     </tr>
     <tr
-      v-if="modalVisible"
+      v-if="mixinData.inlineSettingMixin.modalVisible"
       class="expanded"
     >
       <td colspan="3">

diff --git a/website/client/src/pages/settings/settingRows/deleteAccount.vue b/website/client/src/pages/settings/settingRows/deleteAccount.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!modalVisible"
+      v-if="!mixinData.inlineSettingMixin.modalVisible"
     >
       <td class="settings-label">
         {{ $t("deleteAccount") }}
@@ -18,7 +18,7 @@
       </td>
     </tr>
     <tr
-      v-if="modalVisible"
+      v-if="mixinData.inlineSettingMixin.modalVisible"
       class="expanded"
     >
       <td colspan="3">

diff --git a/website/client/src/pages/settings/settingRows/displayNameSetting.vue b/website/client/src/pages/settings/settingRows/displayNameSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!modalVisible"
+      v-if="!mixinData.inlineSettingMixin.modalVisible"
     >
       <td class="settings-label">
         {{ $t("displayName") }}
@@ -19,7 +19,7 @@
       </td>
     </tr>
     <tr
-      v-if="modalVisible"
+      v-if="mixinData.inlineSettingMixin.modalVisible"
       class="expanded"
     >
       <td colspan="3">

diff --git a/website/client/src/pages/settings/settingRows/fixValuesSetting.vue b/website/client/src/pages/settings/settingRows/fixValuesSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!modalVisible"
+      v-if="!mixinData.inlineSettingMixin.modalVisible"
     >
       <td class="settings-label">
         {{ $t("fixValues") }}
@@ -18,7 +18,7 @@
       </td>
     </tr>
     <tr
-      v-if="modalVisible"
+      v-if="mixinData.inlineSettingMixin.modalVisible"
       class="expanded"
     >
       <td
@@ -76,7 +76,7 @@
         </div>
 
         <save-cancel-buttons
-          :disable-save="!sharedState.inlineSettingUnsavedValues"
+          :disable-save="!mixinData.inlineSettingMixin.sharedState.inlineSettingUnsavedValues"
           class="mt-4"
           @saveClicked="save()"
           @cancelClicked="requestCloseModal()"
@@ -241,10 +241,6 @@ export default {
         this.restoreValues.exp = 0;
       }
 
-      // todo
-      // this.user.stats = clone(this.restoreValues.stats);
-      // this.user.achievements.streak = clone(this.restoreValues.achievements.streak);
-
       const settings = {
         'stats.hp': Number(this.restoreValues.hp),
         'stats.exp': Number(this.restoreValues.exp),

diff --git a/website/client/src/pages/settings/settingRows/languageSetting.vue b/website/client/src/pages/settings/settingRows/languageSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!modalVisible"
+      v-if="!mixinData.inlineSettingMixin.modalVisible"
     >
       <td class="settings-label">
         {{ $t("language") }}
@@ -19,7 +19,7 @@
       </td>
     </tr>
     <tr
-      v-if="modalVisible"
+      v-if="mixinData.inlineSettingMixin.modalVisible"
       class="expanded"
     >
       <td colspan="3">

diff --git a/website/client/src/pages/settings/settingRows/loginMethods.vue b/website/client/src/pages/settings/settingRows/loginMethods.vue
@@ -81,7 +81,6 @@ export default {
     });
 
     hello.init({
-      facebook: process.env.FACEBOOK_KEY, // eslint-disable-line no-process-env
       google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line no-process-env
     }, {
       redirect_uri: '', // eslint-disable-line

diff --git a/website/client/src/pages/settings/settingRows/passwordSetting.vue b/website/client/src/pages/settings/settingRows/passwordSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!modalVisible"
+      v-if="!mixinData.inlineSettingMixin.modalVisible"
     >
       <td class="settings-label">
         {{ $t("password") }}
@@ -17,7 +17,7 @@
       </td>
     </tr>
     <tr
-      v-if="modalVisible"
+      v-if="mixinData.inlineSettingMixin.modalVisible"
       class="expanded"
     >
       <td
@@ -111,10 +111,6 @@ input {
   color: $green-50;
 }
 
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
 </style>
 
 <script>

diff --git a/website/client/src/pages/settings/settingRows/resetAccount.vue b/website/client/src/pages/settings/settingRows/resetAccount.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!modalVisible"
+      v-if="!mixinData.inlineSettingMixin.modalVisible"
     >
       <td class="settings-label">
         {{ $t("resetAccount") }}
@@ -19,7 +19,7 @@
       </td>
     </tr>
     <tr
-      v-if="modalVisible"
+      v-if="mixinData.inlineSettingMixin.modalVisible"
       class="expanded"
     >
       <td colspan="3">