From 115f6831282d6d3475efa97e27862eb756b65dca Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Tue, 9 Feb 2021 21:55:19 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D1=81=D0=B5=D0=BB=D0=B5=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B0=20=D0=BE=D0=B1=D0=BE=D0=B5=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SettingsPage/include/ViewTab/Color.inc    | 36 ++++++++++++++-----
 client/quasar.js                              |  6 ++--
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/client/components/Reader/SettingsPage/include/ViewTab/Color.inc b/client/components/Reader/SettingsPage/include/ViewTab/Color.inc
index 842b86ef..b4093e03 100644
--- a/client/components/Reader/SettingsPage/include/ViewTab/Color.inc
+++ b/client/components/Reader/SettingsPage/include/ViewTab/Color.inc
@@ -22,8 +22,6 @@
                 </q-icon>
             </template>
         </q-input>
-
-        <span class="col" style="position: relative; top: 35px; left: 15px;">Обои:</span>
     </div>
 </div>
 
@@ -48,11 +46,33 @@
                 </q-icon>
             </template>
         </q-input>
-
-        <div class="q-px-sm"/>
-        <q-select class="col" v-model="wallpaper" :options="wallpaperOptions"
-            dropdown-icon="la la-angle-down la-sm"
-            outlined dense emit-value map-options
-        />
+    </div>
+</div>
+
+<div class="q-mt-md"/>
+<div class="item row">
+    <div class="label-2">Обои</div>
+    <div class="col row">
+        <q-select class="col-left no-mp" v-model="wallpaper" :options="wallpaperOptions"
+            dropdown-icon="la la-angle-down la-sm"
+            outlined dense emit-value map-options
+        >
+            <template v-slot:selected-item="scope">
+                <div >{{ scope.opt.label }}</div>
+                <div v-show="scope.opt.value" class="q-ml-sm" :class="scope.opt.value" style="width: 50px; height: 30px;"></div>
+            </template>
+
+            <template v-slot:option="scope">
+                <q-item
+                    v-bind="scope.itemProps"
+                    v-on="scope.itemEvents"
+                >
+                    <q-item-section>
+                        <q-item-label v-html="scope.opt.label" />
+                    </q-item-section>
+                    <q-item-section v-show="scope.opt.value" :class="scope.opt.value" style="min-width: 70px; min-height: 50px"/>
+                </q-item>
+            </template>
+        </q-select>
     </div>
 </div>
diff --git a/client/quasar.js b/client/quasar.js
index 52fa825b..38f6decc 100644
--- a/client/quasar.js
+++ b/client/quasar.js
@@ -21,7 +21,8 @@ import {QSlider} from 'quasar/src/components/slider';
 import {QTabs, QTab} from 'quasar/src/components/tabs';
 //import {QTabPanels, QTabPanel} from 'quasar/src/components/tab-panels';
 import {QSeparator} from 'quasar/src/components/separator';
-//import {QList, QItem, QItemSection, QItemLabel} from 'quasar/src/components/item';
+//import {QList} from 'quasar/src/components/item';
+import {QItem, QItemSection, QItemLabel} from 'quasar/src/components/item';
 import {QTooltip} from 'quasar/src/components/tooltip';
 import {QSpinner} from 'quasar/src/components/spinner';
 import {QTable, QTh, QTr, QTd} from 'quasar/src/components/table';
@@ -49,7 +50,8 @@ const components = {
     QTabs, QTab,
     //QTabPanels, QTabPanel,
     QSeparator,
-    //QList, QItem, QItemSection, QItemLabel,
+    //QList,
+    QItem, QItemSection, QItemLabel,
     QTooltip,
     QSpinner,
     QTable, QTh, QTr, QTd,