From b711693162fe6e9092eb5011c4c539052d8111bb Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Sun, 21 Feb 2021 12:10:24 -0700
Subject: [PATCH] allow to select wallpaper from preview modal

---
 .../Wallpapers/PreviewWallpaperModal.vue      | 36 +++++++++++++++++--
 src/components/WallpapersList.vue             | 11 +++---
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/Wallpapers/PreviewWallpaperModal.vue b/src/components/Wallpapers/PreviewWallpaperModal.vue
index 63336110..464c9f06 100644
--- a/src/components/Wallpapers/PreviewWallpaperModal.vue
+++ b/src/components/Wallpapers/PreviewWallpaperModal.vue
@@ -1,14 +1,26 @@
 <template lang="html">
   <b-modal
     id="previewWallpaper"
+    :header-bg-variant="darkTheme ? 'dark' : null"
+    :header-text-variant="darkTheme ? 'white' : null"
+    :body-bg-variant="darkTheme ? 'dark' : null"
+    :body-text-variant="darkTheme ? 'white' : null"
     hide-footer
     size="xl"
   >
     <template v-slot:modal-header="{ close }">
       <modal-header
-        :title="wallpaper.name"
+        title="Wallpaper preview"
+        :subtitle="wallpaper.name"
         @close="close"
-      />
+      >
+        <b-button
+          v-if="selectable"
+          @click="select"
+        >
+          Select
+        </b-button>
+      </modal-header>
     </template>
 
     <b-img
@@ -20,9 +32,27 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   props: {
-    wallpaper: Object,
+    selectable: Boolean,
+    wallpaper: {
+      type: [Object, Boolean],
+      default: () => {},
+    },
+  },
+
+  computed: {
+    ...mapGetters(['darkTheme']),
+  },
+
+  methods: {
+    select() {
+      this.$emit('selected', this.wallpaper);
+
+      this.$bvModal.hide('previewWallpaper');
+    },
   },
 };
 </script>
diff --git a/src/components/WallpapersList.vue b/src/components/WallpapersList.vue
index f4bc396c..4d7bc0fd 100644
--- a/src/components/WallpapersList.vue
+++ b/src/components/WallpapersList.vue
@@ -1,13 +1,13 @@
 <template lang="html">
   <div class="wallpapers">
     <preview-wallpaper-modal
-      v-if="activeWallpaper"
       :wallpaper="activeWallpaper"
+      :selectable="selectable"
+      @selected="selected"
     />
 
     <b-card
       v-for="wallpaper in wallpapers"
-      @click="openModal(wallpaper)"
       :key="wallpaper.name"
       :img-src="wallpaper.url"
       :img-alt="wallpaper.name"
@@ -15,6 +15,7 @@
       bg-variant="transparent"
       img-width="180"
       class="mb-3 overflow-hidden word-wrap clickable"
+      @click="openModal(wallpaper)"
     >
       <h6>
         {{ wallpaper.name }}
@@ -26,7 +27,7 @@
 
       <b-button
         variant="danger"
-        @click="confirmDeleteWallpaper(wallpaper)"
+        @click.stop="confirmDeleteWallpaper(wallpaper)"
       >
         <i class="fas fa-trash-alt fa-fw" aria-hidden />
       </b-button>
@@ -34,7 +35,7 @@
       <b-button
         v-if="selectable"
         variant="primary"
-        @click="handleClick(wallpaper)"
+        @click.stop="selected(wallpaper)"
       >
         <i
           v-if="saving"
@@ -78,7 +79,7 @@ export default {
       this.$bvModal.show('previewWallpaper');
     },
 
-    handleClick(wallpaper) {
+    selected(wallpaper) {
       if (this.selectable) {
         this.$emit('selected', wallpaper);
       }