feature/#28: Treeview: anchoring manifest title

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.13] - 2020-06-25
+
+### Added
+
+- Configured to anchor manifest title to top of the panel.
+
 ## [0.0.12] - 2020-06-22
 
 ### Added

quasar.conf.js

@@ -13,7 +13,8 @@ module.exports = function (ctx) {
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: [
       // 'app.scss'
-      '../statics/support.css'
+      '../statics/support.css',
+      '/quasar.treeview.scss'
     ],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
@@ -27,7 +28,7 @@ module.exports = function (ctx) {
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
 
       // 'roboto-font', // optional, you are not bound to it
-      // 'material-icons' // optional, you are not bound to it
+      'material-icons'
     ],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework

src/components/quasar-tree.vue

 <template>
   <div class="q-pa-md q-gutter-sm">
-    <q-tree style="cursor: pointer;"
-      :expanded.sync="expanded"
-      :icon="fasCaretRight"
+    <q-tree
+      class="view-tree"
       label-key="labelKey"
-      :nodes="tree"
       node-key="label"
-      selected-color="grey"
-      text-color="black"
-      >
+      :expanded.sync="expanded"
+      :nodes="tree"
+    >
     </q-tree>
   </div>
 </template>
 
 <script>
-import { fasCaretRight } from '@quasar/extras/fontawesome-v5';
+import matIcons from 'quasar/icon-set/material-icons';
 
 export default {
   name: 'Treeview',
@@ -29,7 +27,7 @@ export default {
     };
   },
   created() {
-    this.fasCaretRight = fasCaretRight;
+    this.$q.iconSet.set(matIcons);
   },
   mounted() {
     this.$root.$on('update-sequence-index', (index) => {

src/css/quasar.treeview.scss

+.view-tree {
+  max-height: 400px;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  .q-tree__node-collapsible .q-tree__children {
+    > .q-tree__node--parent {
+      > .q-tree__node-header {
+        left: 0;
+        position: sticky;
+        top: 0;
+        z-index: 99999;
+      }
+    }
+  }
+  .q-tree__node-header-content.col.row.no-wrap.items-center {
+    z-index: 999;
+  }
+  .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 {
+  display: none;
+}

src/views/quasar-mainview.vue

@@ -5,16 +5,11 @@
         <Toolbar heading="Treeview" />
         <q-separator />
 
-        <div class="scrollPanel">
-
-          <q-infinite-scroll>
-            <Treeview
-              :manifests="manifests"
-              :tree="tree"
-              >
-            </Treeview>
-          </q-infinite-scroll>
-        </div>
+        <Treeview
+          :manifests="manifests"
+          :tree="tree"
+          >
+        </Treeview>
       </template>
 
       <template v-slot:after>