From ab8a78021efc1d364b98826b04cb2f09755af635 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 15 Dec 2021 21:11:29 -0800
Subject: [PATCH] Tracks will now select when single clicked

---
 resources/cider-ui/style.less                 |  5 +++++
 resources/cider-ui/views/components/queue.ejs | 10 ++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index 67002132..1fc424d8 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -8,6 +8,7 @@
   --mediaItemRadiusRound: 100%;
   --contentInnerPadding: 16px;
   --navbarHeight: 48px;
+  --selected: rgb(130 130 130 / 30%);
   --keyColor: #fa586a;
   --keyColor-rgb: 250, 88, 106;
   --keyColor-rollover: #ff8a9c;
@@ -1895,6 +1896,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     flex: 0 0 auto;
   }
 
+  &.selected {
+    background: var(--selected);
+  }
+
   .queue-info {
     display:flex;
     flex-direction: column;
diff --git a/resources/cider-ui/views/components/queue.ejs b/resources/cider-ui/views/components/queue.ejs
index 4f135c34..33d4ee4b 100644
--- a/resources/cider-ui/views/components/queue.ejs
+++ b/resources/cider-ui/views/components/queue.ejs
@@ -12,7 +12,11 @@
             <draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
                 <template v-for="(queueItem, position) in queueItems">
                     <div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
-                    <div class="cd-queue-item" @dblclick="playQueueItem(position)" v-else :key="position" @contextmenu="queueContext($event, queueItem.item, position)">
+                    <div class="cd-queue-item"
+                         :class="{selected: position == selected}"
+                         @click="selected = position"
+                         @dblclick="playQueueItem(position)" v-else :key="position"
+                         @contextmenu="queueContext($event, queueItem.item, position)">
                         <div class="row">
                             <div class="col-auto flex-center">
                                 <div class="artwork">
@@ -39,7 +43,8 @@
             return {
                 drag: false,
                 queuePosition: 0,
-                queueItems: []
+                queueItems: [],
+                selected: -1
             }
         },
         mounted() {
@@ -83,6 +88,7 @@
                 }
             },
             move() {
+                this.selected = -1
                 app.mk.queue._queueItems = this.queueItems;
                 app.mk.queue._reindex()
             }