Commit daeebebf authored by dindigala's avatar dindigala
Browse files

feature/#28: Treeview: anchoring manifest title

parent 34ad3dea
......@@ -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
......
......@@ -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
......
<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) => {
......
.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;
}
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment