Commit 34ad3dea authored by dindigala's avatar dindigala
Browse files

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

feature/#19: Optimizing Treeview-Panel

See merge request subugoe/emo/Qviewer!20
parents 7849735c f8d6d587
Pipeline #140900 passed with stages
in 2 minutes and 43 seconds
...@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file. ...@@ -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/), 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). 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 ## [0.0.11] - 2020-06-19
### Added ### Added
......
...@@ -4249,6 +4249,16 @@ ...@@ -4249,6 +4249,16 @@
"integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==", "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
"dev": true "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": { "bl": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz", "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz",
...@@ -7574,6 +7584,13 @@ ...@@ -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": { "filesize": {
"version": "3.6.1", "version": "3.6.1",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz", "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
...@@ -15499,6 +15516,7 @@ ...@@ -15499,6 +15516,7 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1" "nan": "^2.12.1"
} }
}, },
...@@ -16135,6 +16153,7 @@ ...@@ -16135,6 +16153,7 @@
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1" "nan": "^2.12.1"
} }
}, },
......
<template> <template>
<div style="margin: 16px;"> <div>
<q-btn <div class="row iconPosition">
class="q-mr-sm q-mb-sm cursor-pointer" <div style="margin: 16px;">
color="grey-8" <q-btn
round class="q-mr-sm q-mb-sm cursor-pointer iconPosition"
flat color="grey-8"
size="md" round
> flat
<q-icon size="md"
size="sm" @click="increase()"
:name="fasSearchPlus" >
title="Increase" <q-icon
@click="increase()" size="sm"
/> :name="fasSearchPlus"
</q-btn> title="Increase"
<q-btn />
class="q-mr-sm q-mb-sm cursor-pointer" </q-btn>
color="grey-8" <q-btn
round class="q-mr-sm q-mb-sm cursor-pointer iconPosition"
flat color="grey-8"
size="md" round
> flat
<q-icon size="md"
size="sm" @click="decrease()"
:name="fasSearchMinus" >
title="Decrease" <q-icon
@click="decrease()" size="sm"
/> :name="fasSearchMinus"
</q-btn> title="Decrease"
/>
<div class="content" :style="`font-size: ${fontsize}px`" :id="nodeid" v-html="content"></div> </q-btn>
</div> </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> </template>
<script> <script>
...@@ -97,7 +105,12 @@ export default { ...@@ -97,7 +105,12 @@ export default {
</script> </script>
<style scoped> <style scoped>
.content { .content {
margin: 16px; margin: 16px;
} }
.iconPosition {
position: sticky;
top: 0;
background: #fff;
}
</style> </style>
<template> <template>
<figure id="openseadragon"> <div>
<nav> <div style="margin: 16px;">
<q-btn <q-btn
v-for="(btn, idx) in buttons" :key="idx" v-for="(btn, idx) in buttons" :key="idx"
class="q-mr-sm q-mb-sm" class="q-mr-sm q-mb-sm"
...@@ -12,8 +12,13 @@ ...@@ -12,8 +12,13 @@
> >
<q-icon size="sm" :name="btn.svg" /> <q-icon size="sm" :name="btn.svg" />
</q-btn> </q-btn>
</nav> </div>
</figure> <div>
<figure id="openseadragon">
<nav />
</figure>
</div>
</div>
</template> </template>
<script> <script>
...@@ -71,9 +76,9 @@ export default { ...@@ -71,9 +76,9 @@ export default {
</script> </script>
<style scoped> <style scoped>
figure { figure {
height: 100vh; height: 50vh;
margin: 16px; margin: 8px;
overflow: hidden; overflow: hidden;
} }
</style> </style>
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
label-key="labelKey" label-key="labelKey"
:nodes="tree" :nodes="tree"
node-key="label" node-key="label"
:selected.sync="selected"
selected-color="grey" selected-color="grey"
text-color="black" text-color="black"
> >
......
...@@ -5,11 +5,16 @@ ...@@ -5,11 +5,16 @@
<Toolbar heading="Treeview" /> <Toolbar heading="Treeview" />
<q-separator /> <q-separator />
<Treeview <div class="scrollPanel">
:manifests="manifests"
:tree="tree" <q-infinite-scroll>
> <Treeview
</Treeview> :manifests="manifests"
:tree="tree"
>
</Treeview>
</q-infinite-scroll>
</div>
</template> </template>
<template v-slot:after> <template v-slot:after>
...@@ -18,14 +23,19 @@ ...@@ -18,14 +23,19 @@
<Toolbar heading="Text" /> <Toolbar heading="Text" />
<q-separator /> <q-separator />
<Content <div class="scrollPanel">
:key="contenturl"
:contenturl="contenturl" <q-infinite-scroll>
:fontsize="fontsize" <Content
:manifests="manifests" :key="contenturl"
:request="request" :contenturl="contenturl"
> :fontsize="fontsize"
</Content> :manifests="manifests"
:request="request"
>
</Content>
</q-infinite-scroll>
</div>
</template> </template>
<template v-slot:after> <template v-slot:after>
...@@ -45,14 +55,19 @@ ...@@ -45,14 +55,19 @@
<Toolbar heading="Metadata" /> <Toolbar heading="Metadata" />
<q-separator /> <q-separator />
<Metadata v-if="manifests.length" <div class="scrollPanel">
:collection="collection"
:config="config" <q-infinite-scroll>
:language="language" <Metadata v-if="manifests.length"
:manifests="manifests" :collection="collection"
:pagelabel="pagelabel" :config="config"
> :language="language"
</Metadata> :manifests="manifests"
:pagelabel="pagelabel"
>
</Metadata>
</q-infinite-scroll>
</div>
</template> </template>
</q-splitter> </q-splitter>
</template> </template>
...@@ -151,3 +166,15 @@ export default { ...@@ -151,3 +166,15 @@ export default {
}, },
}; };
</script> </script>
<style lang="css" scoped>
.scrollPanel {
max-height: 450px;
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollPanel::-webkit-scrollbar {
display: none;
}
</style>
Supports Markdown
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