Merge branch 'feature/#19-Optimizing-panel' into 'develop'

feature/#19: Optimizing Treeview-Panel

See merge request subugoe/emo/Qviewer!20

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.12] - 2020-06-22
+
+### Added
+
+- Added behaviour to Optimize scroll panels.
+- Fixed panel icons to top of the panel.
+
+### Fixed
+
+- item is now highlighted when the user clicks a nav navbuttons
+- click events are bound for the zoom icons are now bound to the embracing buttons instead of the icons
 ## [0.0.11] - 2020-06-19
 
 ### Added

package-lock.json

@@ -4249,6 +4249,16 @@
       "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz",
@@ -7574,6 +7584,13 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -15499,6 +15516,7 @@
           "dev": true,
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },
@@ -16135,6 +16153,7 @@
           "dev": true,
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },

src/components/content.vue

 <template>
-  <div style="margin: 16px;">
-    <q-btn
-      class="q-mr-sm q-mb-sm cursor-pointer"
-      color="grey-8"
-      round
-      flat
-      size="md"
-      >
-      <q-icon
-        size="sm"
-        :name="fasSearchPlus"
-        title="Increase"
-        @click="increase()"
-      />
-    </q-btn>
-    <q-btn
-      class="q-mr-sm q-mb-sm cursor-pointer"
-      color="grey-8"
-      round
-      flat
-      size="md"
-      >
-      <q-icon
-        size="sm"
-        :name="fasSearchMinus"
-        title="Decrease"
-        @click="decrease()"
-      />
-    </q-btn>
-
-  <div class="content" :style="`font-size: ${fontsize}px`" :id="nodeid" v-html="content"></div>
-</div>
+  <div>
+    <div class="row iconPosition">
+      <div style="margin: 16px;">
+        <q-btn
+          class="q-mr-sm q-mb-sm cursor-pointer iconPosition"
+          color="grey-8"
+          round
+          flat
+          size="md"
+          @click="increase()"
+          >
+          <q-icon
+            size="sm"
+            :name="fasSearchPlus"
+            title="Increase"
+          />
+        </q-btn>
+        <q-btn
+          class="q-mr-sm q-mb-sm cursor-pointer iconPosition"
+          color="grey-8"
+          round
+          flat
+          size="md"
+          @click="decrease()"
+          >
+          <q-icon
+            size="sm"
+            :name="fasSearchMinus"
+            title="Decrease"
+          />
+        </q-btn>
+      </div>
+    </div>
+    <div class="row">
+      <div
+        class="col-md-10 offset-md-1" :style="`font-size: ${fontsize}px`"
+        :id="nodeid" v-html="content">
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -97,7 +105,12 @@ export default {
 </script>
 
 <style scoped>
-.content {
-  margin: 16px;
-}
+  .content {
+    margin: 16px;
+  }
+  .iconPosition {
+    position: sticky;
+    top: 0;
+    background: #fff;
+  }
 </style>

src/components/openseadragon.vue

 <template>
-  <figure id="openseadragon">
-    <nav>
+  <div>
+    <div style="margin: 16px;">
       <q-btn
         v-for="(btn, idx) in buttons" :key="idx"
         class="q-mr-sm q-mb-sm"
@@ -12,8 +12,13 @@
         >
         <q-icon size="sm" :name="btn.svg" />
       </q-btn>
-    </nav>
-  </figure>
+    </div>
+    <div>
+      <figure id="openseadragon">
+        <nav />
+      </figure>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -71,9 +76,9 @@ export default {
 </script>
 
 <style scoped>
-figure {
-  height: 100vh;
-  margin: 16px;
-  overflow: hidden;
-}
+  figure {
+    height: 50vh;
+    margin: 8px;
+    overflow: hidden;
+  }
 </style>

src/components/quasar-tree.vue

@@ -6,7 +6,6 @@
       label-key="labelKey"
       :nodes="tree"
       node-key="label"
-      :selected.sync="selected"
       selected-color="grey"
       text-color="black"
       >

src/views/quasar-mainview.vue

@@ -5,11 +5,16 @@
         <Toolbar heading="Treeview" />
         <q-separator />
 
-        <Treeview
-          :manifests="manifests"
-          :tree="tree"
-          >
-        </Treeview>
+        <div class="scrollPanel">
+
+          <q-infinite-scroll>
+            <Treeview
+              :manifests="manifests"
+              :tree="tree"
+              >
+            </Treeview>
+          </q-infinite-scroll>
+        </div>
       </template>
 
       <template v-slot:after>
@@ -18,14 +23,19 @@
             <Toolbar heading="Text" />
             <q-separator />
 
-            <Content
-              :key="contenturl"
-              :contenturl="contenturl"
-              :fontsize="fontsize"
-              :manifests="manifests"
-              :request="request"
-              >
-            </Content>
+            <div class="scrollPanel">
+
+              <q-infinite-scroll>
+                <Content
+                  :key="contenturl"
+                  :contenturl="contenturl"
+                  :fontsize="fontsize"
+                  :manifests="manifests"
+                  :request="request"
+                  >
+                </Content>
+              </q-infinite-scroll>
+            </div>
           </template>
 
           <template v-slot:after>
@@ -45,14 +55,19 @@
                 <Toolbar heading="Metadata" />
                 <q-separator />
 
-                <Metadata v-if="manifests.length"
-                  :collection="collection"
-                  :config="config"
-                  :language="language"
-                  :manifests="manifests"
-                  :pagelabel="pagelabel"
-                  >
-                </Metadata>
+                <div class="scrollPanel">
+
+                  <q-infinite-scroll>
+                    <Metadata v-if="manifests.length"
+                      :collection="collection"
+                      :config="config"
+                      :language="language"
+                      :manifests="manifests"
+                      :pagelabel="pagelabel"
+                      >
+                    </Metadata>
+                  </q-infinite-scroll>
+                </div>
               </template>
             </q-splitter>
           </template>
@@ -151,3 +166,15 @@ export default {
   },
 };
 </script>
+
+<style lang="css" scoped>
+  .scrollPanel {
+    max-height: 450px;
+    overflow: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollPanel::-webkit-scrollbar {
+    display: none;
+  }
+</style>