Merge pull request #144 from pacien/oz-search-overhaul

viewer: major code and search mode overhaul

>  Search indicator in the breadcrumbs: should be shown as clickable instead of being .disabled
Not agreeing with this one.

26 files changed, 437 insertions, 285 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index ed69841..ea25513 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -27,6 +27,10 @@
   color: red;
 }
 
+button svg + span {
+  margin-left: 7px;
+}
+
 // === Tools
 
 .nowrap {
@@ -66,11 +70,10 @@
 // Disable sticky hover styling on touch devices,
 // on which the virtual cursor doesn't leave the element after being tapped.
 // The fix can be applied to `a` elements by using the .link class.
-@media (hover:none), (hover:on-demand) {
+@media (hover: none), (hover: on-demand) {
   .link:hover {
     color: $link !important;
   }
-
   .disabled:hover {
     color: $disabled-color !important;
   }
@@ -90,7 +93,7 @@
 }
 .scrollbar::-webkit-scrollbar-thumb {
   box-shadow: inset 0 0 1px black;
-  background-color: $toolbar-color;
+  background-color: $scrollbar-color;
 }
 
 // === Thumbnail tiles alignment
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 0a921a9..26cb355 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -18,9 +18,8 @@
 -- along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-@import '_buefy_variables.scss';
-@import 'palette.scss';
-
+@import "_buefy_variables.scss";
+@import "palette.scss";
 
 // Buefy components
 
@@ -44,7 +43,14 @@ $loading-background: $palette-800;
 $title-color: $palette-200;
 $title-size: $size-5;
 $tag-background-color: $palette-800;
-
+$button-color: $palette-100;
+$button-active-color: $palette-100;
+$button-active-border-color: $palette-500;
+$button-background-color: $palette-700;
+$button-border-color: $palette-500;
+$button-focus-color: $button-color;
+$button-focus-border-color: $link;
+$button-focus-box-shadow-size: 0;
 
 // Custom components
 
@@ -54,14 +60,13 @@ $panel-left-bgcolor: $palette-800;
 $panel-left-txtcolor: $primary;
 $command-buttons-bgcolor: $palette-700;
 $content-bgcolor: $palette-900;
-$toolbar-color: $palette-300;  // FIXME: should be named "scrollbar"
+$scrollbar-color: $palette-300;
 $loader-color: $palette-800;
 $input-tag-delete-background-color: $palette-700;
 $breadcrumb-margins: 12px;
 $breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px;
 $thumbnail-other-size: 120px;
 
-
 // Layout
 
 $layout-top: 45px;
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 7f7ef7d..2ac1216 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -29,24 +29,32 @@
   >
     <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
     <ul class="ld-breadcrumb">
-      <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
+      <li v-for="(item,idx) in currentItemPath" :key="item.path">
         <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
         <router-link :to="item.path" class="link">
           <fa-icon :icon="getIcon(item)" size="lg" />
           {{item.title}}
         </router-link>
       </li>
+      <li v-if="searchMode">
+        <fa-icon icon="angle-right" class="disabled" />
+        <router-link :to="$route" class="link">
+          <fa-icon icon="search" size="lg" class="disabled" />
+        </router-link>
+      </li>
     </ul>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Ref, Watch } from "vue-property-decorator";
-import DragScrollClickFix from "@/dragscrollclickfix";
-import Tools from "@/tools";
+import { Component, Vue, Ref, Watch, Prop } from "vue-property-decorator";
+import DragScrollClickFix from "@/services/dragscrollclickfix";
+import Navigation from "@/services/navigation";
 
 @Component
 export default class LdBreadcrumb extends Vue {
+  @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
+  @Prop(Boolean) readonly searchMode!: boolean;
   @Ref() readonly breadcrumb!: HTMLUListElement;
 
   readonly dragScrollClickFix = new DragScrollClickFix();
@@ -66,7 +74,7 @@ export default class LdBreadcrumb extends Vue {
     this.overflowMask = this.breadcrumb.scrollLeft > 1;
   }
 
-  @Watch("$galleryStore.currentItemPath")
+  @Watch("currentItemPath")
   changedCurrentItemPath() {
     this.$nextTick(() => {
       this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth;
@@ -75,7 +83,7 @@ export default class LdBreadcrumb extends Vue {
   }
 
   getIcon(item: Gallery.Item) {
-    return Tools.getIcon(item);
+    return Navigation.getIcon(item);
   }
 }
 </script>
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 7590ea7..c0b86be 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -23,14 +23,6 @@
     <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" />
     </a>
-    <router-link
-      to="/"
-      class="command-secondary"
-      :class="{'disabled': isRoot()}"
-      :title="$t('command.home')"
-    >
-      <fa-icon icon="home" size="lg" />
-    </router-link>
     <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)">