feature/#19: Optimizing Treeview-Panel

CHANGELOG.md

@@ -5,6 +5,12 @@ 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.14] - 2020-06-24
+
+### Fixed
+
+- Reverted the changes and fixed the icons to nest inside image.
+
 ## [0.0.13] - 2020-06-25
 
 ### Added

src/components/content.vue

 <template>
   <div>
     <div class="row iconPosition">
-      <div style="margin: 16px;">
+      <div class="content">
         <q-btn
-          class="q-mr-sm q-mb-sm cursor-pointer iconPosition"
+          class="q-mr-sm q-mb-sm cursor-pointer"
           color="grey-8"
-          round
           flat
+          round
           size="md"
           @click="increase()"
           >
@@ -17,7 +17,7 @@
           />
         </q-btn>
         <q-btn
-          class="q-mr-sm q-mb-sm cursor-pointer iconPosition"
+          class="q-mr-sm q-mb-sm cursor-pointer"
           color="grey-8"
           round
           flat

src/components/openseadragon.vue

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

src/css/quasar.treeview.scss

@@ -6,6 +6,7 @@
   .q-tree__node-collapsible .q-tree__children {
     > .q-tree__node--parent {
       > .q-tree__node-header {
+        background: white;
         left: 0;
         position: sticky;
         top: 0;
@@ -18,23 +19,6 @@
   }
   .q-tree__children {
     cursor: pointer;
-
-    i.q-tree__arrow.q-mr-xs.material-icons.q-icon.notranslate.q-tree__arrow--rotate {
-      position: static;
-      transform: none;
-
-      &::after {
-        background-color: white;
-        box-shadow: 1px 1px 0px #dcdcdc;
-        content: "";
-        height: 100%;
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: 100%;
-        z-index: -1;
-      }
-    }
   }
 }
 .view-tree::-webkit-scrollbar {

src/views/quasar-mainview.vue

@@ -39,11 +39,13 @@
                 <Toolbar heading="Image" />
                 <q-separator />
 
-                <OpenSeadragon
-                  :key="imageurl"
-                  :imageurl="imageurl"
-                  >
-                </OpenSeadragon>
+                <div style="overflow:hidden">
+                  <OpenSeadragon
+                    :key="imageurl"
+                    :imageurl="imageurl"
+                    >
+                  </OpenSeadragon>
+                </div>
               </template>
 
               <template v-show="panels.metadata" v-slot:after>