From cef5446b5003bb1176b6aff1a2352179055633d5 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Wed, 14 Oct 2020 14:48:27 -0700
Subject: [PATCH] more modal clean up

---
 src/components/Board/AddList.vue          | 19 ++++-------
 src/components/Lists/ListPreferences.vue  | 17 ++++------
 src/components/Lists/ListSettings.vue     |  8 ++++-
 src/components/Lists/RenameList.vue       | 17 ++++------
 src/components/Lists/SortList.vue         | 40 +++++++++++++----------
 src/components/ModalHeader.vue            | 19 +++++++++--
 src/components/SessionExpired.vue         | 12 ++-----
 src/components/Settings/BoardSettings.vue | 40 ++++++++++-------------
 8 files changed, 87 insertions(+), 85 deletions(-)

diff --git a/src/components/Board/AddList.vue b/src/components/Board/AddList.vue
index ffd99601..8a31fb1f 100644
--- a/src/components/Board/AddList.vue
+++ b/src/components/Board/AddList.vue
@@ -3,11 +3,11 @@
     v-b-modal="modalId"
     :title="$t('board.addList.title')"
     size="sm"
-    variant="light"
+    variant="primary"
     v-b-tooltip.hover.left
     ref="addList"
   >
-    <icon name="plus" />
+    <icon name="plus" white />
 
     <b-modal
       :id="modalId"
@@ -18,21 +18,14 @@
       :body-text-variant="nightMode ? 'white' : null"
       :footer-bg-variant="nightMode ? 'dark' : null"
       :footer-text-variant="nightMode ? 'white' : null"
+      footer-class="d-flex justify-content-between"
       @show="reset"
     >
       <template v-slot:modal-header="{ close }">
         <modal-header
           :title="$t('board.addList.title')"
-          header-class="border-0"
-        >
-          <b-button
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
+          @close="close"
+        />
       </template>
 
       <form ref="addListForm" @submit.stop.prevent="submit">
@@ -53,7 +46,7 @@
       </form>
 
       <template v-slot:modal-footer="{ cancel }">
-        <b-button @click="cancel">
+        <b-button @click="cancel" variant="light">
           {{ $t('global.cancel') }}
         </b-button>
 
diff --git a/src/components/Lists/ListPreferences.vue b/src/components/Lists/ListPreferences.vue
index 17636261..e3392ce8 100644
--- a/src/components/Lists/ListPreferences.vue
+++ b/src/components/Lists/ListPreferences.vue
@@ -5,20 +5,14 @@
 
     <b-modal
       :id="modalId"
+      footer-class="d-flex justify-content-between"
       @show="getSettings"
     >
       <template v-slot:modal-header="{ close }">
         <modal-header
           :title="$t('board.list.settings')"
-        >
-          <b-button
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
+          @close="close"
+        />
       </template>
 
       <form ref="renameListForm" @submit.stop.prevent="save">
@@ -78,7 +72,10 @@
       </form>
 
       <template v-slot:modal-footer="{ cancel }">
-        <b-button @click="cancel">
+        <b-button
+          variant="light"
+          @click="cancel"
+        >
           Cancel
         </b-button>
 
diff --git a/src/components/Lists/ListSettings.vue b/src/components/Lists/ListSettings.vue
index d4af1835..e51977f8 100644
--- a/src/components/Lists/ListSettings.vue
+++ b/src/components/Lists/ListSettings.vue
@@ -1,5 +1,11 @@
 <template lang="html">
-  <b-dropdown size="sm" class="m-1" right variant="transparent" no-caret>
+  <b-dropdown
+    size="sm"
+    class="m-1"
+    right
+    variant="transparent"
+    no-caret
+  >
     <template v-slot:button-content>
       <icon name="triangle-down" small />
     </template>
diff --git a/src/components/Lists/RenameList.vue b/src/components/Lists/RenameList.vue
index 1be9203e..1684fedd 100644
--- a/src/components/Lists/RenameList.vue
+++ b/src/components/Lists/RenameList.vue
@@ -11,20 +11,14 @@
       :body-text-variant="nightMode ? 'white' : null"
       :footer-bg-variant="nightMode ? 'dark' : null"
       :footer-text-variant="nightMode ? 'white' : null"
+      footer-class="d-flex justify-content-between"
       @show="getListName"
     >
       <template v-slot:modal-header="{ close }">
         <modal-header
           :title="$t('board.list.renameList')"
-        >
-          <b-button
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
+          @close="close"
+        />
       </template>
 
       <form ref="renameListForm" @submit.stop.prevent="submit">
@@ -46,7 +40,10 @@
       </form>
 
       <template v-slot:modal-footer="{ cancel }">
-        <b-button @click="cancel">
+        <b-button
+          variant="light"
+          @click="cancel"
+        >
           {{ $t('global.cancel') }}
         </b-button>
 
diff --git a/src/components/Lists/SortList.vue b/src/components/Lists/SortList.vue
index 34a71f8c..77d6151f 100644
--- a/src/components/Lists/SortList.vue
+++ b/src/components/Lists/SortList.vue
@@ -5,27 +5,26 @@
 
     <b-modal
       :id="modalId"
+      :header-bg-variant="nightMode ? 'dark' : null"
+      :header-text-variant="nightMode ? 'white' : null"
+      :body-bg-variant="nightMode ? 'dark' : null"
+      :body-text-variant="nightMode ? 'white' : null"
+      :footer-bg-variant="nightMode ? 'dark' : null"
+      :footer-text-variant="nightMode ? 'white' : null"
+      footer-class="d-flex justify-content-between"
       @show="getSortValue"
     >
       <template v-slot:modal-header="{ close }">
         <modal-header
           :title="$t('board.list.sortList')"
-        >
-          <b-button
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
+          @close="close"
+        />
       </template>
 
       <form ref="renameListForm" @submit.stop.prevent="save">
         <b-form-radio-group
           v-model="sortOrder"
           buttons
-          stacked
           variant="primary"
           :options="sortingOptions"
         />
@@ -41,8 +40,11 @@
       </form>
 
       <template v-slot:modal-footer="{ cancel }">
-        <b-button @click="cancel">
-          Cancel
+        <b-button
+          variant="light"
+          @click="cancel"
+        >
+          {{ $t('global.cancel') }}
         </b-button>
 
         <b-button
@@ -51,7 +53,7 @@
           @click="save"
         >
           <b-spinner small v-if="saving" />
-          <span v-else>Save</span>
+          <span v-else>{{ $t('global.save') }}</span>
         </b-button>
       </template>
     </b-modal>
@@ -59,6 +61,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   props: {
     listIndex: Number,
@@ -70,16 +74,18 @@ export default {
       sortOrder: null,
       saving: false,
       sortingOptions: [
-        { text: 'Custom', value: 'sortByCustom' },
-        { text: 'Name', value: 'sortByName' },
-        { text: 'Rating', value: 'sortByRating' },
+        { text: this.$t('board.list.sortByCustom'), value: 'sortByCustom' },
+        { text: this.$t('board.list.sortByName'), value: 'sortByName' },
+        { text: this.$t('board.list.sortByRating'), value: 'sortByRating' },
+        { text: this.$t('board.list.sortByProgress'), value: 'sortByProgress' },
         // { text: 'Release date', value: 'sortByReleaseDate' },
-        { text: 'Progress', value: 'sortByProgress' },
       ],
     };
   },
 
   computed: {
+    ...mapGetters(['nightMode']),
+
     modalId() {
       return `sort-list-${this.listIndex}`;
     },
diff --git a/src/components/ModalHeader.vue b/src/components/ModalHeader.vue
index d9b88370..f216a069 100644
--- a/src/components/ModalHeader.vue
+++ b/src/components/ModalHeader.vue
@@ -5,18 +5,31 @@
       <small>{{ subtitle }}</small>
     </div>
 
-    <div class="actions">
-      <slot />
-    </div>
+    <slot />
+
+    <b-button
+      :variant="nightMode ? 'dark' : 'light'"
+      size="sm"
+      class="ml-auto"
+      @click="$emit('close')"
+    >
+      <icon name="x" />
+    </b-button>
   </header>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   props: {
     title: String,
     subtitle: String,
   },
+
+  computed: {
+    ...mapGetters(['nightMode']),
+  },
 };
 </script>
 
diff --git a/src/components/SessionExpired.vue b/src/components/SessionExpired.vue
index 12065aaf..e518569a 100644
--- a/src/components/SessionExpired.vue
+++ b/src/components/SessionExpired.vue
@@ -1,3 +1,4 @@
+<!-- TODO: translate -->
 <template lang="html">
   <b-modal
     centered
@@ -14,15 +15,8 @@
     <template v-slot:modal-header="{ close }">
       <modal-header
         title="Uh oh!"
-      >
-        <b-button
-          variant="light"
-          size="sm"
-          @click="close"
-        >
-          <icon name="x" />
-        </b-button>
-      </modal-header>
+        @close="close"
+      />
     </template>
 
     Your session has expired.
diff --git a/src/components/Settings/BoardSettings.vue b/src/components/Settings/BoardSettings.vue
index 212a0773..9ccf4911 100644
--- a/src/components/Settings/BoardSettings.vue
+++ b/src/components/Settings/BoardSettings.vue
@@ -12,7 +12,6 @@
 
     <b-modal
       id="board-settings"
-      title="Board settings"
       size="lg"
       :header-bg-variant="nightMode ? 'dark' : null"
       :header-text-variant="nightMode ? 'white' : null"
@@ -20,27 +19,20 @@
       :body-text-variant="nightMode ? 'white' : null"
       :footer-bg-variant="nightMode ? 'dark' : null"
       :footer-text-variant="nightMode ? 'white' : null"
+      footer-class="d-flex justify-content-between"
       @show="init"
       @hide="hide"
     >
       <template v-slot:modal-header="{ close }">
         <modal-header
-          title="Board settings"
-          header-class="border-0"
-        >
-          <b-button
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
+          :title="$t('board.settings.title')"
+          @close="close"
+        />
       </template>
 
       <form ref="boardSettingsForm" @submit.stop.prevent="submit">
         <b-form-group
-          label="Board name"
+          :label="$t('board.settings.nameLabel')"
           label-for="name"
         >
           <b-form-input
@@ -51,7 +43,7 @@
         </b-form-group>
 
         <b-form-group
-          label="Board description"
+          :label="$t('board.settings.descriptionLabel')"
           label-for="description"
         >
           <b-form-textarea
@@ -96,14 +88,14 @@
               v-if="wallpaper"
               @click="removeWallpaper"
             >
-              Remove wallpaper
+              {{ $t('board.settings.removeWallpaper') }}
             </b-dropdown-item>
 
             <b-dropdown-item
               variant="primary"
               v-b-modal:wallpapers
             >
-              Upload wallpaper
+              {{ $t('board.settings.uploadWallpaper') }}
             </b-dropdown-item>
 
             <b-dropdown-item
@@ -122,10 +114,12 @@
         </b-form-group>
 
         <div v-else>
-          No wallpapers uploaded yet.
-          <b-button v-b-modal:wallpapers>Manage files</b-button>
-        </div>
+          {{ $t('board.settings.noWallpapers') }}
 
+          <b-button v-b-modal:wallpapers>
+            {{ $t('board.settings.managefiles') }}
+          </b-button>
+        </div>
 
         <b-img
           v-if="wallpaper && wallpaperUrl"
@@ -135,7 +129,9 @@
           fluid
         />
 
-        <b-button v-b-toggle.platforms>Change board platforms</b-button>
+        <b-button v-b-toggle.platforms>
+          {{ $t('board.settings.changePlatform') }}
+        </b-button>
 
         <b-collapse id="platforms" class="mt-2">
           <platform-picker v-model="board.platforms" />
@@ -147,7 +143,7 @@
           variant="danger"
           @click="confirmDelete"
         >
-          Delete board
+          {{ $t('board.settings.deleteBoard') }}
         </b-button>
 
         <b-button
@@ -156,7 +152,7 @@
           @click="saveSettings"
         >
           <b-spinner small v-if="saving" />
-          <span v-else>Save</span>
+          <span v-else>{{ $t('global.save') }}</span>
         </b-button>
       </template>
     </b-modal>