Settings updates

src/components/Lists/ListSettings.vue

@@ -7,7 +7,7 @@
         @open="open"
         @close="close"
     >
-        <button class="small primary">
+        <button class="small">
             <i class="fas fa-sliders-h" />
         </button>
 
@@ -54,65 +54,67 @@
                     </span>
                 </div>
             </section>
+        </div>
 
-            <footer>
-                <modal
-                    v-if="localList.games && localList.games.length"
-                    ref="addList"
-                    :message="warningMessage"
-                    title="Are you sure?"
-                    :action-text="$t('list.delete')"
-                    padded
-                    @action="deleteList"
-                >
-                    <button
-                        class="danger"
-                        :title="$t('list.delete')"
-                    >
-                        <i class="far fa-trash-alt" />
-                        {{ $t('list.delete') }}
-                    </button>
-                </modal>
-
+        <div slot="footer">
+            <modal
+                v-if="localList && localList.games && localList.games.length"
+                ref="addList"
+                :message="warningMessage"
+                title="Are you sure?"
+                :action-text="$t('list.delete')"
+                action-button-class="danger"
+                padded
+                confirm
+                @action="deleteList"
+            >
                 <button
-                    v-else
                     class="danger"
                     :title="$t('list.delete')"
-                    @click="deleteList"
                 >
                     <i class="far fa-trash-alt" />
                     {{ $t('list.delete') }}
                 </button>
+            </modal>
 
-                <!-- <button
-                    class="primary hollow"
-                    :title="$t('list.moveLeft')"
-                    :disabled="isFirst"
-                    @click="moveList(listIndex, listIndex - 1)"
-                >
-                    <i class="fas fa-arrow-left" />
+            <button
+                v-else
+                class="danger"
+                :title="$t('list.delete')"
+                @click="deleteList"
+            >
+                <i class="far fa-trash-alt" />
+                {{ $t('list.delete') }}
+            </button>
 
-                    {{ $t('list.moveLeft') }}
-                </button>
+            <!-- <button
+                class="primary hollow"
+                :title="$t('list.moveLeft')"
+                :disabled="isFirst"
+                @click="moveList(listIndex, listIndex - 1)"
+            >
+                <i class="fas fa-arrow-left" />
 
-                <button
-                    class="primary hollow"
-                    :title="$t('list.moveRight')"
-                    :disabled="isLast"
-                    @click="moveList(listIndex, listIndex + 1)"
-                >
-                    {{ $t('list.moveRight') }}
-                    <i class="fas fa-arrow-right" />
-                </button> -->
+                {{ $t('list.moveLeft') }}
+            </button>
 
-                <button
-                    class="primary"
-                    :title="$t('global.save')"
-                    @click="save"
-                >
-                    {{ $t('global.save') }}
-                </button>
-            </footer>
+            <button
+                class="primary hollow"
+                :title="$t('list.moveRight')"
+                :disabled="isLast"
+                @click="moveList(listIndex, listIndex + 1)"
+            >
+                {{ $t('list.moveRight') }}
+                <i class="fas fa-arrow-right" />
+            </button> -->
+
+            <button
+                class="primary"
+                :title="$t('global.save')"
+                @click="save"
+            >
+                {{ $t('global.save') }}
+            </button>
         </div>
     </modal>
 </template>

src/components/Settings/GameBoardSettings.vue

@@ -32,7 +32,7 @@
                 <i class="fas fa-palette" />
                 <h5>Global theme</h5>
 
-                <select v-model="value.theme[platform.code]">
+                <select v-model="value[platform.code].theme">
                     <option v-for="{ id, name } in themes" :key="id" :value="id">
                         {{ name }}
                     </option>
@@ -62,11 +62,12 @@
                 <h5>{{ $t('gameBoard.settings.dangerZone') }}</h5>
 
                 <modal
-                    :action-text="`Delete forever`"
+                    action-text="Delete forever"
+                    action-button-class="danger"
+                    confirm
                     :message="`Your ${platform.name} collection will be deleted forever.`"
                     :title="`Delete ${platform.name} collection`"
                     padded
-                    show-close
                     @action="deletePlatform"
                 >
                     <button
@@ -136,6 +137,13 @@ export default {
         },
     },
 
+    mounted() {
+        if (!this.value.theme) {
+            this.value.theme = {};
+            this.value.theme[this.platform.code] = 'theme-default';
+        }
+    },
+
     methods: {
         deletePlatform() {
             this.$store.commit('REMOVE_PLATFORM');

src/components/Settings/SettingsActions.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-    <section class="account-setting">
+    <div class="settings-actions">
         <button class="secondary" @click="signOut">
             <i class="fas fa-sign-out-alt" />
             {{ $t('settings.signOut') }}
@@ -18,7 +18,11 @@
                 {{ $t('settings.deleteAccount.button') }}
             </button>
         </modal>
-    </section>
+
+        <button class="primary" @click="save">
+            {{ $t('global.save') }}
+        </button>
+    </div>
 </template>
 
 <script>
@@ -89,6 +93,10 @@ export default {
                     this.$bus.$emit('TOAST', { message: error, type: 'error' });
                 });
         },
+
+        save() {
+            this.$emit('save');
+        },
     },
 };
 </script>
@@ -96,9 +104,8 @@ export default {
 <style lang="scss" rel="stylesheet/scss" scoped>
     @import "~styles/styles";
 
-    .account-setting {
-        display: grid;
-        grid-template-columns: 80px 200px;
-        grid-gap: $gp;
+    .settings-actions {
+        display: flex;
+        justify-content: space-between;
     }
 </style>

src/components/Settings/SettingsGlobal.vue

@@ -1,11 +1,6 @@
 <template lang="html">
     <section class="setting-box">
         <h3>General</h3>
-        <div class="reloading" v-if="reloading">
-            <i class="fas fa-sync-alt fast-spin" />
-            <br>
-            {{ $t('settings.reloading') }}
-        </div>
 
         <div class="setting">
             <i class="fas fa-language" />
@@ -24,27 +19,14 @@
                 <option value="cs">🇨🇿 {{ $t('settings.languages.cs') }}</option>
             </select>
         </div>
+        <small>Browser reload required</small>
     </section>
 </template>
 
 <script>
-import themes from '@/themes';
-import ToggleSwitch from '@/components/ToggleSwitch';
-
 export default {
-    components: {
-        ToggleSwitch,
-    },
-
     props: {
         value: Object,
-        reloading: Boolean,
-    },
-
-    data() {
-        return {
-            themes,
-        };
     },
 
     computed: {

src/pages/Settings.vue

@@ -5,12 +5,13 @@
         </button>
 
         <div class="settings" slot="content">
-            <general-settings v-model="localSettings" :reloading="reloading" />
-            <game-board-settings v-model="localSettings" :reloading="reloading" />
-            <platforms-settings v-model="localSettings" :reloading="reloading" />
-            <tags-settings v-model="localSettings" :reloading="reloading" />
-            <account-settings v-model="localSettings" :reloading="reloading" />
+            <!-- <pre>{{ localSettings }}</pre> -->
+            <settings-global v-model="localSettings" />
+            <game-board-settings v-model="localSettings" />
+            <tags-settings v-model="localSettings" />
         </div>
+
+        <settings-actions slot="footer" @save="save" />
     </modal>
 </template>
 
@@ -19,9 +20,8 @@ import { mapState } from 'vuex';
 import 'firebase/firestore';
 import 'firebase/auth';
 import GameBoardSettings from '@/components/Settings/GameBoardSettings';
-import GeneralSettings from '@/components/Settings/GeneralSettings';
-import PlatformsSettings from '@/components/Settings/PlatformsSettings';
-import AccountSettings from '@/components/Settings/AccountSettings';
+import SettingsGlobal from '@/components/Settings/SettingsGlobal';
+import SettingsActions from '@/components/Settings/SettingsActions';
 import AboutSettings from '@/components/Settings/AboutSettings';
 import TagsSettings from '@/components/Settings/TagsSettings';
 import Modal from '@/components/Modal';
@@ -33,9 +33,8 @@ export default {
         Modal,
         Releases,
         GameBoardSettings,
-        GeneralSettings,
-        PlatformsSettings,
-        AccountSettings,
+        SettingsGlobal,
+        SettingsActions,
         AboutSettings,
         TagsSettings,
     },
@@ -54,43 +53,6 @@ export default {
                     global: 'theme-default',
                 },
             },
-            settingsSections: [
-                {
-                    name: 'global',
-                    icon: 'fas fa-sliders-h',
-                    component: 'GeneralSettings',
-                },
-                {
-                    name: 'tags',
-                    icon: 'fas fa-tag',
-                    component: 'TagsSettings',
-                },
-                {
-                    name: 'platforms',
-                    icon: 'fas fa-gamepad',
-                    component: 'PlatformsSettings',
-                },
-                {
-                    name: 'gameBoard',
-                    icon: 'fab fa-trello',
-                    component: 'GameBoardSettings',
-                },
-                {
-                    name: 'account',
-                    icon: 'fas fa-user',
-                    component: 'AccountSettings',
-                },
-                {
-                    name: 'releases',
-                    icon: 'fas fa-rocket',
-                    component: 'Releases',
-                },
-                {
-                    name: 'about',
-                    icon: 'fas fa-info',
-                    component: 'AboutSettings',
-                },
-            ],
         };
     },
 
@@ -106,28 +68,6 @@ export default {
         },
     },
 
-    watch: {
-        localSettings: {
-            handler(oldValue, newValue) {
-                if (newValue && Object.keys(newValue).length) {
-                    this.save();
-
-                    if (newValue
-                            && newValue.language !== undefined
-                            && this.language !== newValue.language
-                    ) {
-                        this.reloading = true;
-
-                        setTimeout(() => {
-                            window.location.reload();
-                        }, 2000);
-                    }
-                }
-            },
-            deep: true,
-        },
-    },
-
     mounted() {
         this.localSettings = this.settings !== null
             ? JSON.parse(JSON.stringify(this.settings))
@@ -136,7 +76,6 @@ export default {
 
     methods: {
         save() {
-            // TODO: call action directly
             this.$bus.$emit('SAVE_SETTINGS', this.localSettings);
         },
     },