From 8c4f3212b50e7c4bbbcfae60eb1f50e96f97c609 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 9 Dec 2021 01:47:55 -0800
Subject: [PATCH] Styled user menu, added info for future about page

---
 resources/cider-ui-tests/style.less           | 84 ++++++++++++++-----
 resources/cider-ui-tests/views/main.ejs       | 50 ++++++-----
 .../cider-ui-tests/views/pages/about.ejs      | 19 +++++
 3 files changed, 109 insertions(+), 44 deletions(-)
 create mode 100644 resources/cider-ui-tests/views/pages/about.ejs

diff --git a/resources/cider-ui-tests/style.less b/resources/cider-ui-tests/style.less
index ba0afddd..def48d3b 100644
--- a/resources/cider-ui-tests/style.less
+++ b/resources/cider-ui-tests/style.less
@@ -305,6 +305,23 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   color: #eee;
   font-weight: 500;
   align-items: center;
+
+  &.active {
+    background:rgb(200 200 200 / 15%);
+    animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
+  }
+}
+
+@keyframes usermenuBtnClick {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
 }
 
 .app-sidebar-button>.sidebar-user-icon {
@@ -355,34 +372,57 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   height: 100%;
 }
 
-.search-hints-container {
-  position: absolute;
-  top: 44px;
-  width: 100%;
-  padding: 10px;
-  z-index: 1;
-  .search-hints {
+#cmenu() {
+  .container {
+    position: absolute;
+    width: 100%;
+    padding: 10px;
+    z-index: 1;
+  }
+  .body {
     background: #242424;
     padding: 6px;
     border-radius: 6px;
     width: 100%;
     box-shadow: var(--mediaItemShadow-Shadow);
+  }
+  .item {
+    background: transparent;
+    display: block;
+    width: 100%;
+    text-align: left;
+    color: #eee;
+    font-family: inherit;
+    font-size: 15px;
+    padding: 8px 12px;
+    border: 0px;
+    appearance: none;
+    border-radius: 6px;
+    margin: 2px 0px;
+    &:hover {
+      background: var(--keyColor);
+    }
+  }
+}
+
+.search-hints-container {
+  top: 44px;
+  #cmenu.container();
+  .search-hints {
+    #cmenu.body();
     .search-hint {
-      background: transparent;
-      display: block;
-      width: 100%;
-      text-align: left;
-      color: #eee;
-      font-family: inherit;
-      font-size: 15px;
-      padding: 8px 12px;
-      border: 0px;
-      appearance: none;
-      border-radius: 6px;
-      margin: 2px 0px;
-      &:hover {
-        background: var(--keyColor);
-      }
+      #cmenu.item();
+    }
+  }
+}
+
+.usermenu-container {
+  bottom: 66px;
+  #cmenu.container();
+  .usermenu-body {
+    #cmenu.body();
+    .usermenu-item {
+      #cmenu.item();
     }
   }
 }
diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index 85d5e89f..f3ef9299 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/resources/cider-ui-tests/views/main.ejs
@@ -127,16 +127,18 @@
                                @focus="search.showHints = true"
                                @blur="setTimeout(()=>{search.showHints = false}, 100)"
                                v-on:keyup.enter="searchQuery()"
-                               @change="showSearch();" @input="getSearchHints()" placeholder="Search..." v-model="search.term"
+                               @change="showSearch();" @input="getSearchHints()" placeholder="Search..."
+                               v-model="search.term"
                                class="search-input">
                     </div>
                 </div>
                 <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
-                <div class="search-hints">
-                    <button class="search-hint" v-for="hint in search.hints" @click="search.term = hint;search.showHints = false;searchQuery(hint)">
-                        {{ hint }}
-                    </button>
-                </div>
+                    <div class="search-hints">
+                        <button class="search-hint" v-for="hint in search.hints"
+                                @click="search.term = hint;search.showHints = false;searchQuery(hint)">
+                            {{ hint }}
+                        </button>
+                    </div>
                 </div>
                 <div class="app-sidebar-content">
                     <div class="app-sidebar-header-text">
@@ -163,22 +165,24 @@
                     </button>
                 </div>
                 <transition name="wpfade">
-                    <div class="app-sidebar-content" v-if="chrome.menuOpened">
-                        <button class="app-sidebar-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
-                            Toggle Personal Info
-                        </button>
-                        <button class="app-sidebar-item">
-                            About
-                        </button>
-                        <button class="app-sidebar-item">
-                            Discord
-                        </button>
-                        <button class="app-sidebar-item">
-                            Settings
-                        </button>
-                        <button class="app-sidebar-item">
-                            Sign Out
-                        </button>
+                    <div class="usermenu-container" v-if="chrome.menuOpened">
+                        <div class="usermenu-body">
+                            <button class="usermenu-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
+                                Toggle Personal Info
+                            </button>
+                            <button class="usermenu-item">
+                                About
+                            </button>
+                            <button class="usermenu-item">
+                                Discord
+                            </button>
+                            <button class="usermenu-item">
+                                Settings
+                            </button>
+                            <button class="usermenu-item">
+                                Sign Out
+                            </button>
+                        </div>
                     </div>
                 </transition>
                 <div class="app-sidebar-footer">
@@ -186,6 +190,8 @@
                            v-model="mk.volume"
                            v-if="typeof mk.volume != 'undefined'">
                     <button class="app-sidebar-button" style="width:100%"
+                            :class="{active: chrome.menuOpened}"
+                            @blur="chrome.menuOpened = false"
                             @click="chrome.menuOpened = !chrome.menuOpened">
                         <template v-if="chrome.userinfo.attributes">
                             <img class="sidebar-user-icon" loading="lazy"
diff --git a/resources/cider-ui-tests/views/pages/about.ejs b/resources/cider-ui-tests/views/pages/about.ejs
new file mode 100644
index 00000000..47da5814
--- /dev/null
+++ b/resources/cider-ui-tests/views/pages/about.ejs
@@ -0,0 +1,19 @@
+Major thanks to the Cider Development Team and all of our contributors.
+
+<p>"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link"
+                                       target="_blank"
+                                       rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a>
+    All Rights
+    Reserved.</p>
+
+cryptofyre - Developer - https://github.com/cryptofyre
+Core - Developer - https://github.com/coredev-uk
+Quacksire - Developer - https://github.com/child-duckling
+booploops - Developer - https://github.com/booploops
+vapormusic - Developer - https://github.com/vapormusic
+Void - Social Communications Team - https://twitter.com/MoonyVoid
+NoseySG - Social Communications Team - https://twitter.com/noah_grose
+
+<img class="md-contributors"
+     onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
+     src="https://contrib.rocks/image?repo=ciderapp/Cider"/>
\ No newline at end of file