search favorite albums, tracks; reworked search ui generally

zeropointnine · Sep 9, 2021 · d4a433d · d4a433d
1 parent cb0571c
commit d4a433d
Show file tree

Hide file tree

Showing 19 changed files with 607 additions and 305 deletions.
diff --git a/dist/dist.sh b/dist/dist.sh
@@ -8,14 +8,14 @@ echo '************************************************'
 
 pkg ../package.json
 
-mv hqpwv-node16-macos hqpwv-server-0-9-4-macos
-mv hqpwv-node14-win.exe hqpwv-server-0-9-4-win.exe
-mv hqpwv-node16-linux hqpwv-server-0-9-4-linux.bin
+mv hqpwv-node16-macos hqpwv-server-0-9-5-macos
+mv hqpwv-node14-win.exe hqpwv-server-0-9-5-win.exe
+mv hqpwv-node16-linux hqpwv-server-0-9-5-linux.bin
 
-zip hqpwv-server-0-9-4-macos.zip hqpwv-server-0-9-4-macos 
-zip hqpwv-server-0-9-4-win.exe.zip hqpwv-server-0-9-4-win.exe
-zip hqpwv-server-0-9-4-linux.exe.zip hqpwv-server-0-9-4-linux.bin
+zip hqpwv-server-0-9-5-macos.zip hqpwv-server-0-9-5-macos 
+zip hqpwv-server-0-9-5-win.zip hqpwv-server-0-9-5-win.exe
+zip hqpwv-server-0-9-5-linux.zip hqpwv-server-0-9-5-linux.bin
 
-# rm hqpwv-server-0-9-4-macos
-# rm hqpwv-server-0-9-4-win.exe
-# rm hqpwv-server-0-9-4-linux.bin
+# rm hqpwv-server-0-9-5-macos
+# rm hqpwv-server-0-9-5-win.exe
+# rm hqpwv-server-0-9-5-linux.bin
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hqpwv",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "Remote control application for HQPlayer",
   "bin": "server/server.js",
   "homepage": "https://github.com/zeropointnine/hqpwv",

diff --git a/scss/base.scss b/scss/base.scss
@@ -121,7 +121,7 @@ $app-standard-duration: 400ms;
 	color: var(--col-text);
 
   // does nothing for chrome, safari
-  scrollbar-color: var(--col-listitem-selected-over) var(--col-listitem-less);
+  scrollbar-color: var(--col-text-less) var(--col-listitem-over);
 
   // Mobile Chrome: Prevent light blue pressed state on tappable things
   -webkit-tap-highlight-color: transparent;

diff --git a/scss/buttons.scss b/scss/buttons.scss
@@ -110,16 +110,15 @@
 // ---
 
 .textButton {
-  display: inline-block;
   border-radius: 6px;
-  vertical-align: top;
   height: 36px;
+  padding-top:8px;
   padding-left:12px;
   padding-right:12px;
   font-size:13px;
   font-weight: bold;
   text-transform: uppercase;
-  line-height:36px;
+  text-align:center; // for when button is given hard-coded width
   background-color: var(--col-listitem);
   cursor:pointer;
 

diff --git a/scss/library-view.scss b/scss/library-view.scss
@@ -126,7 +126,7 @@ $marginUnitMobile: 6px;
 
   .count {
     margin-left: 10px;
-    padding-top:4px;
+    padding-top: 2px;
     font-size: $font-size-smaller;
     color: var(--col-text-least);
   }
@@ -286,10 +286,12 @@ $marginUnitMobile: 6px;
 #libraryAlbumOptionsView {
   display:flex;
   position:relative;
+  margin-left:auto;
 }
 
 #libraryOptionsButtons {
   position:relative;
+  display:flex;
   height:$icon-button-side;
   &:before {
     content: ' ';
@@ -357,31 +359,57 @@ $marginUnitMobile: 6px;
   }
 }
 
+#librarySearchCloseButton {
+  display:none;
+  position:absolute;
+  right:16px;
+}
+
 // ---
 
-#librarySearchOptionsView {
+#librarySearchPanel {
+  display:none;
   position:relative;
-  background-color: var(--col-listitem-less);
-  border:1px solid var(--col-listitem-selected-over);
-  margin: $space-unit $space-unit ($space-unit * 1.5) $space-unit;
-  padding: $space-unit $space-unit $space-unit $space-unit;
+  margin: ($space-unit / 2) ($space-unit * 1) ($space-unit * 1.5) $space-unit;
 }
 
-#librarySearchCloseButton {
-  position:absolute;
-  right:6px;
-  top:6px;
+#artistsTabButton:before {
+  content: 'Artists'
+}
+#albumsTabButton:before {
+  content: 'Album titles'
+}
+#tracksTabButton:before {
+  content: 'Track titles'
+}
+@include mobile {
+  #artistsTabButton:before {
+    content: 'Artists'
+  }
+  #albumsTabButton:before {
+    content: 'Albums'
+  }
+  #tracksTabButton:before {
+    content: 'Tracks'
+  }
 }
 
-label {
-  display:block;
-  text-transform: uppercase;
-  font-size: $font-size-smaller;
-  font-weight: bold;
+#searchPanelContent {
+  padding: 16px;
+  border-left: 1px solid var(--col-listitem-selected);
+  border-right: 1px solid var(--col-listitem-selected);
+  border-bottom: 1px solid var(--col-listitem-selected);
+
+  opacity: 0.66;
+  pointer-events: none;
+
+  &.isEnabled {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 .inputLine {
-  margin-top: 16px;
   display:flex;
 }
 
@@ -400,6 +428,11 @@ label {
   width:100%;
 
   @include userSelect(auto);
+
+  &:disabled {
+    pointer-events:none;
+    opacity:0.66;
+  }
 }
 .lightTheme #librarySearchInput {
   border:1px solid var(--col-listitem);
@@ -411,24 +444,42 @@ label {
   margin-left:12px;
 }
 
-.controlsLine {
-  margin-top: 16px;
+.isDisabled #libraryAlbumOptionsView {
+  pointer-events: none;
+}
+
+.searchFavoritesLine {
   display:flex;
-  align-items:center;
+  margin-top:12px;
+  // justify-content: end;
+}
 
-  #searchArtistCheckbox { }
-  #searchAlbumCheckbox {
-    margin-left:16px;
-  }
-  #searchTrackCheckbox {
-    margin-left:16px;
+#albumFavoritesButton,
+#trackFavoritesButton {
+  padding-top:7px; // ugh
+  color: var(--col-text-least);
+  background-color:transparent;
+  margin-right:12px;
+  border: 1px solid var(--col-listitem-over);
+  &.isSelected {
+    color:var(--col-text);
   }
 }
 
-.isDisabled #libraryAlbumOptionsView {
-  pointer-events: none;
+#albumFavoritesButton:before {
+  content: 'Favorites albums';
+}
+#trackFavoritesButton:before {
+  content: 'Favorites tracks';
+}
+@include mobile {
+  #albumFavoritesButton:before {
+    content: 'Fav. albums';
+  }
+  #trackFavoritesButton:before {
+    content: 'Fav. tracks';
+  }
 }
-
 // ---
 
 // rem, container is flex wrap

diff --git a/scss/settings-both.scss b/scss/settings-both.scss
@@ -156,6 +156,7 @@ select * {
   }
 
   .savePresetLine {
+    display:flex;
     margin-left:$indent-left;
     @include mobile {
       margin-left:0;

diff --git a/scss/shared.scss b/scss/shared.scss
@@ -7,6 +7,13 @@
   transition: none !important;
 }
 
+label {
+  display:block;
+  text-transform: uppercase;
+  font-size: $font-size-smaller;
+  font-weight: bold;
+}
+
 .colorAccent {
   color: var(--col-accent);
 }

diff --git a/scss/widgets.scss b/scss/widgets.scss
@@ -121,6 +121,50 @@
   height: 30px;
 }
 
+// ---
+// tab bar
+
+.tabBar {
+  display:flex;
+}
+
+.tabButton {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  height: 36px;
+  padding-top:5px;
+  padding-left:12px;
+  padding-right:12px;
+  font-size:13px;
+  font-weight: bold;
+  text-transform: uppercase;
+
+  color:var(--col-text-least);
+  border-bottom: 1px solid var(--col-listitem-selected);
+  border-left: 1px solid var(--col-listitem-bg);
+  border-right: 1px solid var(--col-listitem-bg);
+  border-top: 1px solid var(--col-listitem-bg);
+  cursor:pointer;
+  &.isSelected {
+    color:var(--col-text);
+    border-bottom: 1px solid var(--col-bg);
+    border-left: 1px solid var(--col-listitem-selected);
+    border-right: 1px solid var(--col-listitem-selected);
+    border-top: 1px solid var(--col-listitem-selected);
+    pointer-events:none;
+  }
+  &:hover {
+    color:var(--col-text-less);
+  }
+}
+
+.tabBarSpacer {
+  flex: 1;
+  border-bottom: 1px solid var(--col-listitem-selected);
+}
+
+// ---
+
 .spinner {
   &:before {
     content: ' ';