From d5bf60f93dea2fc96c7b75e21439944a93cb3f5f Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 24 Sep 2022 21:20:24 +0300
Subject: [PATCH] restyle global search input

~ remove switch button, add click listeners to svg
---
 src/assets/icons/arrow.svg                    |  3 +
 src/assets/scss/Global/app-grid.scss          |  7 ++-
 .../RightSideBar/NowPlayingRight.vue          |  6 +-
 src/components/RightSideBar/SearchInput.vue   | 57 ++++++++++++-------
 4 files changed, 50 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/icons/arrow.svg

diff --git a/src/assets/icons/arrow.svg b/src/assets/icons/arrow.svg
new file mode 100644
index 00000000..65b600cb
--- /dev/null
+++ b/src/assets/icons/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.69434 13.6455C5.69434 13.9092 5.80859 14.1641 6.01074 14.3574L11.8027 20.1494C12.0137 20.3516 12.251 20.4482 12.4883 20.4482C13.042 20.4482 13.4375 20.0527 13.4375 19.5254C13.4375 19.2529 13.332 19.0156 13.1562 18.8486L11.1875 16.8535L8.58594 14.4805L10.6426 14.6035H21.3301C21.9014 14.6035 22.3057 14.208 22.3057 13.6455C22.3057 13.0742 21.9014 12.6875 21.3301 12.6875H10.6426L8.59473 12.8105L11.1875 10.4375L13.1562 8.44238C13.332 8.2666 13.4375 8.0293 13.4375 7.75684C13.4375 7.22949 13.042 6.84277 12.4883 6.84277C12.251 6.84277 12.0137 6.93066 11.7852 7.15039L6.01074 12.9336C5.80859 13.1182 5.69434 13.3818 5.69434 13.6455Z" fill="#F2F2F2"/>
+</svg>
diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss
index 0d317a7a..3db29970 100644
--- a/src/assets/scss/Global/app-grid.scss
+++ b/src/assets/scss/Global/app-grid.scss
@@ -1,12 +1,12 @@
 #app-grid {
   display: grid;
   grid-template-columns: min-content 1fr 29rem;
-  grid-template-rows: max-content 1fr max-content;
+  grid-template-rows: 42px 1fr max-content;
   grid-template-areas:
     "l-sidebar nav search-input"
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
-    "l-sidebar content bottombar";
+    "bottombar bottombar bottombar";
   height: calc(100vh);
   gap: 1rem;
   padding: $small 0;
@@ -112,4 +112,7 @@
 
 .b-bar {
   grid-area: bottombar;
+  width: calc(100% + 1.25rem);
+  margin-left: -$small;
+  margin-bottom: -$small;
 }
diff --git a/src/components/RightSideBar/NowPlayingRight.vue b/src/components/RightSideBar/NowPlayingRight.vue
index e416fe4b..2b8b8e3f 100644
--- a/src/components/RightSideBar/NowPlayingRight.vue
+++ b/src/components/RightSideBar/NowPlayingRight.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar bg-primary pad-medium rounded" v-if="settings.show_alt_np">
+  <div class="b-bar bg-primary pad-medium noscroll" v-if="settings.show_alt_np">
     <div class="info">
       <img
         :src="paths.images.thumb.large + queue.currenttrack?.image"
@@ -51,9 +51,11 @@ const settings = useSettingsStore();
   display: grid;
   grid-template-rows: 1fr max-content;
   gap: 1rem;
-  padding: 1rem;
+  // padding: 1rem;
   padding-bottom: 1rem;
   position: relative;
+  height: 55px;
+  // width: 100%;
 
   .time {
     display: grid;
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index 013a120f..1d614328 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/src/components/RightSideBar/SearchInput.vue
@@ -1,6 +1,22 @@
 <template>
   <div id="gsearch-input">
-    <div id="ginner" tabindex="0" class="bg-primary rounded-sm">
+    <div id="ginner" tabindex="0" class="bg-primary">
+      <button
+        :title="
+          tabs.current === tabs.tabs.search
+            ? 'back to queue'
+            : 'go to search'
+        "
+      >
+        <SearchSvg
+          v-if="tabs.current === tabs.tabs.queue"
+          @click.prevent="tabs.switchToSearch"
+        />
+        <BackSvg
+          v-if="tabs.current === tabs.tabs.search"
+          @click.prevent="tabs.switchToQueue"
+        />
+      </button>
       <input
         id="globalsearch"
         v-model.trim="search.query"
@@ -9,9 +25,8 @@
         @blur.prevent="removeFocusedClass"
         @focus.prevent="addFocusedClass"
       />
-      <SearchSvg />
     </div>
-    <div class="buttons rounded-sm bg-primary">
+    <!-- <div class="buttons rounded-sm bg-primary">
       <button
         @click="tabs.switchToQueue"
         v-if="tabs.current !== tabs.tabs.queue"
@@ -27,13 +42,14 @@
       >
         <SearchSvg />
       </button>
-    </div>
+    </div> -->
+    <!-- <button>Global Search this that</button> -->
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import QueueSvg from "@/assets/icons/queue.svg";
+import BackSvg from "@/assets/icons/arrow.svg";
 import SearchSvg from "@/assets/icons/search.svg";
 import useSearchStore from "@/stores/search";
 import useTabStore from "@/stores/tabs";
@@ -59,26 +75,29 @@ function removeFocusedClass() {
 #gsearch-input {
   display: grid;
   grid-template-columns: 1fr max-content;
-  gap: 1rem;
-
-  .buttons {
-    display: grid;
-    grid-auto-flow: column;
-    overflow: hidden;
-
-    button {
-      padding: 0 $small;
-      height: 100%;
-      border-radius: 0;
-    }
-  }
+  border-radius: 3rem;
 
   #ginner {
     width: 100%;
     display: flex;
     align-items: center;
-    gap: $smaller;
+    gap: $small;
     padding: 0 $small;
+    border-radius: 3rem;
+
+    button {
+      background: transparent;
+      width: 3rem;
+      padding: 0;
+      border-radius: 3rem;
+      cursor: pointer;
+      margin-left: -$smaller;
+
+      &:hover {
+        transition: all 0.2s ease;
+        background-color: $gray2;
+      }
+    }
 
     input {
       width: 100%;