From 82b745a735002ca97cfbc053cf3e241df883d93e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Onur=20G=C3=BCm=C3=BC=C5=9F?= <10urgumus@gmail.com>
Date: Thu, 20 Jan 2022 04:49:57 +0300
Subject: [PATCH] Added Play and Shuffle icons to the list view

for making it more Apple-like
---
 src/renderer/style.less                     | 25 ++++++++++++++++
 src/renderer/views/pages/cider-playlist.ejs | 32 ++++++++++-----------
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 1019972a..b92149e5 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2062,6 +2062,31 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+.md-ico-play {
+  content:url("./assets/playPng.png");
+  width: 10px;
+  height: 12px; 
+  margin-right: 1px;
+  align-self: center;
+}
+
+.md-ico-shuffle {
+  content:url("./assets/shufflePng.png");
+  width: 15px;
+  height: 13px; 
+  margin-right: 1px;
+  align-self: center;
+}
+
+.md-ico-remove {
+  content:url("./assets/feather/x-circlePng.png");
+  width: 16px;
+  height: 16px; 
+  margin-right: 1px;
+  margin-bottom: -1.5px;
+  align-self: center;
+}
+
 .md-select {
   width: 100%;
   padding: 6px;
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 1ee19af1..0e8de09b 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -62,20 +62,20 @@
                                 </div>
                             </template>
                             <div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}">
-                                <button class="md-btn" style="min-width: 120px;"
-                                        @click="app.mk.shuffleMode = 0; play()">
+                                <button class="md-btn" style="min-width: 100px;"
+                                        @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
                                     Play
                                 </button>
-                                <button class="md-btn" style="min-width: 120px;"
-                                        @click="app.mk.shuffleMode = 1;play()">
+                                <button class="md-btn" style="min-width: 100px;"
+                                        @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
                                     Shuffle
                                 </button>
-                                <button class="md-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
-                                        @click="confirmButton()">
+                                <button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
+                                        @click="confirmButton()"> <img class="md-ico-remove">
                                     {{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
                                 </button>
-                                <button class="md-btn" style="min-width: 120px;" v-if="confirm==true"
-                                        @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
+                                <button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
+                                        @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img class="md-ico-remove">
                                     Confirm?
                                 </button>
                                 <button class="more-btn-round" style="float:right;" @click="menu">
@@ -98,20 +98,20 @@
                     </div>
                     <div class="col-auto flex-center">
                         <div>
-                            <button class="md-btn" style="min-width: 120px;"
-                                    @click="app.mk.shuffleMode = 0; play()">
+                            <button class="md-btn" style="min-width: 100px;"
+                                    @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
                                 Play
                             </button>
-                            <button class="md-btn" style="min-width: 120px;"
-                                    @click="app.mk.shuffleMode = 1;play()">
+                            <button class="md-btn" style="min-width: 100px;"
+                                    @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
                                 Shuffle
                             </button>
-                            <button class="md-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
-                                    @click="confirmButton()">
+                            <button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
+                                    @click="confirmButton()"> <img class="md-ico-remove">
                                 {{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
                             </button>
-                            <button class="md-btn" style="min-width: 120px;" v-if="confirm==true"
-                                    @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
+                            <button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
+                                    @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img class="md-ico-remove">
                                 Confirm?
                             </button>
                         </div>