From f9f82d72981cbf47e00a188f44be854fc8dca408 Mon Sep 17 00:00:00 2001
From: Graham Steffaniak <gtsteff@gmail.com>
Date: Sat, 19 Aug 2023 10:07:24 -0500
Subject: [PATCH] updated

---
 CHANGELOG.md                       |   8 +
 frontend/src/components/Search.vue | 388 ++++++++++++++++++++++++-----
 frontend/src/css/base.css          |  21 --
 frontend/src/css/header.css        | 171 -------------
 4 files changed, 340 insertions(+), 248 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb752368..903a3ff7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+
+# v0.2.0
+
+ - Works with new more advanced filebrowser.json 
+ - improved GUI
+   - more unified coehisive look
+ - 
+
 # v0.1.4
  - various UI fixes
    - Added download button back to toolbar
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index af161734..9d2e7cc0 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -1,12 +1,27 @@
 <template>
   <div id="search" @click="open" v-bind:class="{ active, ongoing }">
     <div id="input">
-      <button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
+      <button
+        v-if="active"
+        class="action"
+        @click="close"
+        :aria-label="$t('buttons.close')"
+        :title="$t('buttons.close')"
+      >
         <i class="material-icons">close</i>
       </button>
       <i v-else class="material-icons">search</i>
-      <input class="main-input" type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active"
-        v-model.trim="value" :aria-label="$t('search.search')" :placeholder="$t('search.search')" />
+      <input
+        class="main-input"
+        type="text"
+        @keyup.exact="keyup"
+        @input="submit"
+        ref="input"
+        :autofocus="active"
+        v-model.trim="value"
+        :aria-label="$t('search.search')"
+        :placeholder="$t('search.search')"
+      />
     </div>
     <div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
       <div id="result-list">
@@ -14,7 +29,12 @@
           Search Context: {{ getContext(this.$route.path) }}
         </div>
         <ul v-show="results.length > 0">
-          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
+          <li
+            v-for="(s, k) in results"
+            :key="k"
+            @click.stop.prevent="navigateTo(s.url)"
+            style="cursor: pointer"
+          >
             <router-link to="#" event="">
               <i v-if="s.dir" class="material-icons folder-icons"> folder </i>
               <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@@ -37,13 +57,26 @@
           </div>
         </div>
         <template v-if="isEmpty">
-          <button class="mobile-boxes" v-if="value.length === 0 && !showBoxes " @click="resetSearchFilters()" >Reset filters</button>
-          <template v-if="value.length === 0 && showBoxes ">
+          <button
+            class="mobile-boxes"
+            v-if="value.length === 0 && !showBoxes"
+            @click="resetSearchFilters()"
+          >
+            Reset filters
+          </button>
+          <template v-if="value.length === 0 && showBoxes">
             <div class="boxes">
               <h3>{{ $t("search.types") }}</h3>
               <div>
-                <div class="mobile-boxes" tabindex="0" v-for="(v, k) in boxes" :key="k" role="button"
-                  @click="addToTypes('type:' + k)" :aria-label="v.label">
+                <div
+                  class="mobile-boxes"
+                  tabindex="0"
+                  v-for="(v, k) in boxes"
+                  :key="k"
+                  role="button"
+                  @click="addToTypes('type:' + k)"
+                  :aria-label="v.label"
+                >
                   <i class="material-icons">{{ v.icon }}</i>
                   <p>{{ v.label }}</p>
                 </div>
@@ -53,10 +86,8 @@
         </template>
       </div>
     </div>
-    <div v-if="!isMobile && active" id="result-desktop" ref="result">
-      <div class="searchContext">
-          Search Context: {{ getContext(this.$route.path) }}
-        </div>
+    <div v-show="!isMobile && active" id="result-desktop" ref="result">
+      <div class="searchContext">Search Context: {{ getContext(this.$route.path) }}</div>
       <div id="result-list">
         <template>
           <p v-show="isEmpty && isRunning" id="renew">
@@ -67,37 +98,73 @@
             <div class="helpButton" @click="toggleHelp()">Help</div>
           </div>
           <div class="helpText" v-if="showHelp">
-            <p>Search occurs on each character you type (3 character minimum for search terms).</p>
-            <p><b>The index:</b> Search utilizes the index which automatically gets updated on the configured interval
-              (default: 5 minutes).
-              Searching when the program has just started may result in incomplete results.</p>
-            <p><b>Filter by type:</b> You can have multiple type filters by adding <code>type:condition</code> followed by
-              search terms.</p>
-            <p><b>Multiple Search terms:</b> Additional terms separated by <code>|</code>,
-              for example <code>"test|not"</code> searches for both terms independently.</p>
-            <p><b>File size:</b> Searching files by size may have significantly longer search times.</p>
+            <p>
+              Search occurs on each character you type (3 character minimum for search
+              terms).
+            </p>
+            <p>
+              <b>The index:</b> Search utilizes the index which automatically gets updated
+              on the configured interval (default: 5 minutes). Searching when the program
+              has just started may result in incomplete results.
+            </p>
+            <p>
+              <b>Filter by type:</b> You can have multiple type filters by adding
+              <code>type:condition</code> followed by search terms.
+            </p>
+            <p>
+              <b>Multiple Search terms:</b> Additional terms separated by <code>|</code>,
+              for example <code>"test|not"</code> searches for both terms independently.
+            </p>
+            <p>
+              <b>File size:</b> Searching files by size may have significantly longer
+              search times.
+            </p>
           </div>
           <template>
-            <ButtonGroup :buttons="folderSelect" @button-clicked="addToTypes" @remove-button-clicked="removeFromTypes"
-              @disableAll="folderSelectClicked()" @enableAll="resetButtonGroups()" />
-            <ButtonGroup :buttons="typeSelect" @button-clicked="addToTypes" @remove-button-clicked="removeFromTypes"
-              :isDisabled="isTypeSelectDisabled" />
+            <ButtonGroup
+              :buttons="folderSelect"
+              @button-clicked="addToTypes"
+              @remove-button-clicked="removeFromTypes"
+              @disableAll="folderSelectClicked()"
+              @enableAll="resetButtonGroups()"
+            />
+            <ButtonGroup
+              :buttons="typeSelect"
+              @button-clicked="addToTypes"
+              @remove-button-clicked="removeFromTypes"
+              :isDisabled="isTypeSelectDisabled"
+            />
             <div class="sizeConstraints">
               <div class="sizeInputWrapper">
                 <p>Smaller Than:</p>
-                <input class="sizeInput" v-model="smallerThan" type="text" placeholder="number">
+                <input
+                  class="sizeInput"
+                  v-model="smallerThan"
+                  type="text"
+                  placeholder="number"
+                />
                 <p>MB</p>
               </div>
               <div class="sizeInputWrapper">
                 <p>Larger Than:</p>
-                <input class="sizeInput" v-model="largerThan" type="text" placeholder="number">
+                <input
+                  class="sizeInput"
+                  v-model="largerThan"
+                  type="text"
+                  placeholder="number"
+                />
                 <p>MB</p>
               </div>
             </div>
           </template>
         </template>
         <ul v-show="results.length > 0">
-          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
+          <li
+            v-for="(s, k) in results"
+            :key="k"
+            @click.stop.prevent="navigateTo(s.url)"
+            style="cursor: pointer"
+          >
             <router-link to="#" event="">
               <i v-if="s.dir" class="material-icons folder-icons"> folder </i>
               <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@@ -118,15 +185,213 @@
 
 <style>
 .main-input {
-  width: 100%
+  width: 100%;
 }
 .searchContext {
   width: 100%;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   background: var(--blue);
   color: white;
   border: 1px solid rgba(0, 0, 0, 0.05);
 }
+#result-desktop #result-list {
+  transition: width 0.3s ease 0s;
+  max-width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-color: gray;
+  width: 30em;
+  padding-top: 0em;
+  border-bottom-right-radius: 1em;
+  border-width: 2px;
+  border-bottom-left-radius: 1em;
+  background-color: white;
+  max-height: 80vh;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  -webkit-box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
+}
+
+#result-list.active {
+  width: 65em !important;
+  max-width: 85vw !important;
+}
+
+/* Animations */
+@keyframes SlideDown {
+  0% {
+    transform: translateY(-3em);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+/* Search */
+#search {
+  flex-basis: auto;
+  min-width: 35em;
+  height: 3em;
+  display: flex;
+  flex-direction: column;
+}
+
+#search #input {
+  background-color: rgba(100, 100, 100, 0.2);
+  display: flex;
+  height: 100%;
+  padding: 0em 0.75em;
+  border-radius: 0.3em;
+  transition: 1s ease all;
+  align-items: center;
+  z-index: 2;
+}
+
+#search input {
+  border: 0;
+  background-color: transparent;
+  padding: 0;
+}
+
+#result-list p {
+  margin: 1em;
+}
+
+/* Hiding scrollbar for Chrome, Safari and Opera */
+#result-list::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hiding scrollbar for IE, Edge and Firefox */
+#result-list {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.text-container {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  text-align: left;
+  direction: rtl;
+}
+
+
+#search #result {
+  padding-top: 1em;
+  overflow: hidden;
+  background: white;
+  display: flex;
+  top: -4em;
+  flex-direction: column;
+  align-items: center;
+  text-align: left;
+  color: rgba(0, 0, 0, 0.6);
+  height: 0;
+  transition: 2s ease height, 2s ease padding;
+  z-index: 1;
+}
+
+body.rtl #search #result {
+  direction: ltr;
+}
+
+#search #result > div > *:first-child {
+  margin-top: 0;
+}
+
+body.rtl #search #result {
+  direction: rtl;
+  text-align: right;
+}
+
+/* Search Results */
+body.rtl #search #result ul > * {
+  direction: ltr;
+  text-align: left;
+}
+
+#search ul {
+  margin-top: 1em;
+  padding: 0;
+  list-style: none;
+}
+
+#search li {
+  margin: 0.5em;
+}
+
+#search #renew {
+  width: 100%;
+  text-align: center;
+  display: none;
+  margin: 1em;
+  max-width: none;
+}
+
+#search.ongoing #renew {
+  display: block;
+}
+#search.active #input {
+  border-top-left-radius: 1em;
+  border-top-right-radius: 1em;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+/* Search Input Placeholder */
+#search::-webkit-input-placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+#search:-moz-placeholder {
+  opacity: 1;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+#search::-moz-placeholder {
+  opacity: 1;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+#search:-ms-input-placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Search Boxes */
+#search .boxes {
+  margin: 1em;
+  text-align: center;
+}
+
+#search .boxes h3 {
+  margin: 0;
+  font-weight: 500;
+  font-size: 1em;
+  color: #212121;
+  padding: 0.5em;
+}
+
+body.rtl #search .boxes h3 {
+  text-align: right;
+}
+
+#search .boxes p {
+  margin: 1em 0 0;
+}
+
+#search .boxes i {
+  color: #fff !important;
+  font-size: 3.5em;
+}
+
+#result-desktop {
+  animation: SlideDown 0.5s forwards;
+}
 
 .mobile-boxes {
   cursor: pointer;
@@ -140,16 +405,16 @@
 }
 /* Hiding scrollbar for Chrome, Safari and Opera */
 .mobile-boxes::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 /* Hiding scrollbar for IE, Edge and Firefox */
 .mobile-boxes {
-  scrollbar-width: none;  /* Firefox */
-  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
 }
 .helpText {
-  padding: 1em
+  padding: 1em;
 }
 
 .sizeConstraints {
@@ -178,7 +443,7 @@
   border-style: groove;
   display: flex;
   background-color: rgb(245, 245, 245);
-  padding: .25em;
+  padding: 0.25em;
   height: 3em;
   align-items: center;
 }
@@ -251,6 +516,16 @@ export default {
     };
   },
   watch: {
+    active(active) {
+      const resultList = document.getElementById("result-list");
+      if (active) {
+        setTimeout(() => {
+          resultList.classList.add("active");
+        }, 100);
+        return true;
+      }
+      resultList.classList.remove("active");
+    },
     show(val, old) {
       this.active = val === "search";
       if (old === "search" && !this.active) {
@@ -305,7 +580,7 @@ export default {
       return this.ongoing;
     },
     searchHelp() {
-      return this.showHelp
+      return this.showHelp;
     },
   },
   mounted() {
@@ -333,14 +608,14 @@ export default {
       }
       parts.pop();
       parts = parts.join("/") + "/";
-      if (str.endsWith("/")){
-        parts = "/" + parts
+      if (str.endsWith("/")) {
+        parts = "/" + parts;
       }
       return parts;
     },
     baseName(str) {
-      let parts = str.replace(/(\/$|^\/)/, "").split("/")
-      return parts.pop()
+      let parts = str.replace(/(\/$|^\/)/, "").split("/");
+      return parts.pop();
     },
     ...mapMutations(["showHover", "closeHovers", "setReload"]),
     open() {
@@ -359,19 +634,20 @@ export default {
     },
     addToTypes(string) {
       if (this.searchTypes.includes(string)) {
-        return true
+        return true;
       }
       if (string == null || string == "") {
-        return false
+        return false;
       }
-      this.searchTypes = this.searchTypes + string + " "
+      this.searchTypes = this.searchTypes + string + " ";
+
     },
-    resetSearchFilters(){
-      this.searchTypes= "";
+    resetSearchFilters() {
+      this.searchTypes = "";
     },
     removeFromTypes(string) {
       if (string == null || string == "") {
-        return false
+        return false;
       }
       this.searchTypes = this.searchTypes.replace(string + " ", "");
       if (this.isMobile) {
@@ -379,7 +655,7 @@ export default {
       }
     },
     folderSelectClicked() {
-      this.isTypeSelectDisabled = true;  // Disable the other ButtonGroup
+      this.isTypeSelectDisabled = true; // Disable the other ButtonGroup
     },
     resetButtonGroups() {
       this.isTypeSelectDisabled = false;
@@ -390,15 +666,15 @@ export default {
       if (this.value === "" || this.value.length < 3) {
         this.ongoing = false;
         this.results = [];
-        this.noneMessage = "Not enough characters to search (min 3)"
-        return
+        this.noneMessage = "Not enough characters to search (min 3)";
+        return;
       }
-      let searchTypesFull = this.searchTypes
+      let searchTypesFull = this.searchTypes;
       if (this.largerThan != "") {
-        searchTypesFull = searchTypesFull + "type:largerThan=" + this.largerThan + " "
+        searchTypesFull = searchTypesFull + "type:largerThan=" + this.largerThan + " ";
       }
       if (this.smallerThan != "") {
-        searchTypesFull = searchTypesFull + "type:smallerThan=" + this.smallerThan + " "
+        searchTypesFull = searchTypesFull + "type:smallerThan=" + this.smallerThan + " ";
       }
       let path = this.$route.path;
       this.ongoing = true;
@@ -408,13 +684,13 @@ export default {
         this.$showError(error);
       }
       if (this.results.length == 0 && this.ongoing == false) {
-        this.noneMessage = "No results found in indexed search."
+        this.noneMessage = "No results found in indexed search.";
       }
       this.ongoing = false;
     },
     toggleHelp() {
-      this.showHelp = !this.showHelp
-    }
+      this.showHelp = !this.showHelp;
+    },
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 397c7db5..026487ae 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -165,28 +165,7 @@ body.rtl .breadcrumbs a {
   transition: 0.2s ease width;
 }
 
-/* Animations */
-@keyframes flyInFromTop {
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
 
-#search.active #input  {
-  border-top-left-radius: 1em;
-  border-top-right-radius: 1em;
-  border-bottom-left-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-
-#result-desktop {
-  animation: flyInFromTop 0.5s forwards;
-}
 
 /* File Selection */
 #file-selection {
diff --git a/frontend/src/css/header.css b/frontend/src/css/header.css
index e45d1fa1..4538728d 100644
--- a/frontend/src/css/header.css
+++ b/frontend/src/css/header.css
@@ -59,131 +59,6 @@ header>div div {
   position: relative;
 }
 
-/* Search */
-#search {
-  min-width: 40em;
-  height: 3em;
-}
-
-#search #input {
-  background-color: rgba(100, 100, 100, 0.2);
-  display: flex;
-  height: 100%;
-  padding: 0em 0.75em;
-  border-radius: 0.3em;
-  transition: 1s ease all;
-  align-items: center;
-  z-index: 2;
-}
-
-#search input {
-  border: 0;
-  background-color: transparent;
-  padding: 0;
-}
-
-#result-list p {
-  margin: 1em;
-}
-#result-list {
-  width: 60em;
-  max-width: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  border-color: gray;
-}
-/* Hiding scrollbar for Chrome, Safari and Opera */
-#result-list::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hiding scrollbar for IE, Edge and Firefox */
-#result-list {
-scrollbar-width: none;  /* Firefox */
--ms-overflow-style: none;  /* IE and Edge */
-}
-@media (min-width: 800px) {
-  #result-list {
-    padding-top: 2em;
-    border-bottom-right-radius: 1em;
-    border-width: 2px;
-    border-bottom-left-radius: 1em;
-    background-color: white;
-    max-height: 80vh;
-    left: 50%;
-    max-width: 90vw;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-    -webkit-box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
-    box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
-  }
-}
-
-.text-container {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  text-align: left;
-  direction: rtl;
-}
-
-#search #result {
-  padding-top: 1em;
-  overflow: hidden;
-  background: white;
-  display: flex;
-  top: -4em;
-  flex-direction: column;
-  align-items: center;
-  text-align: left;
-  color: rgba(0, 0, 0, 0.6);
-  height: 0;
-  transition: 2s ease height, 2s ease padding;
-  z-index: 1;
-}
-
-body.rtl #search #result {
-  direction: ltr;
-}
-
-#search #result>div>*:first-child {
-  margin-top: 0;
-}
-
-body.rtl #search #result {
-  direction: rtl;
-  text-align: right;
-}
-
-/* Search Results */
-body.rtl #search #result ul>* {
-  direction: ltr;
-  text-align: left;
-}
-
-#search ul {
-  margin-top: 1em;
-  padding: 0;
-  list-style: none;
-}
-
-#search li {
-  margin: .5em;
-}
-
-#search #renew {
-  width: 100%;
-  text-align: center;
-  display: none;
-  margin: 1em;
-  max-width: none;
-}
-
-#search.ongoing #renew {
-  display: block;
-}
-
 /* Icon Colors */
 .folder-icons {
   color: var(--icon-blue);
@@ -205,49 +80,3 @@ body.rtl #search #result ul>* {
   color: plum;
 }
 
-/* Search Input Placeholder */
-#search::-webkit-input-placeholder {
-  color: rgba(255, 255, 255, .5);
-}
-
-#search:-moz-placeholder {
-  opacity: 1;
-  color: rgba(255, 255, 255, .5);
-}
-
-#search::-moz-placeholder {
-  opacity: 1;
-  color: rgba(255, 255, 255, .5);
-}
-
-#search:-ms-input-placeholder {
-  color: rgba(255, 255, 255, .5);
-}
-
-/* Search Boxes */
-#search .boxes {
-  margin: 1em;
-  text-align: center;
-}
-
-#search .boxes h3 {
-  margin: 0;
-  font-weight: 500;
-  font-size: 1em;
-  color: #212121;
-  padding: .5em;
-}
-
-body.rtl #search .boxes h3 {
-  text-align: right;
-}
-
-
-#search .boxes p {
-  margin: 1em 0 0;
-}
-
-#search .boxes i {
-  color: #fff !important;
-  font-size: 3.5em;
-}