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.
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
......
......@@ -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"
}
},
......
<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>
<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>
......@@ -6,7 +6,6 @@
label-key="labelKey"
:nodes="tree"
node-key="label"
:selected.sync="selected"
selected-color="grey"
text-color="black"
>
......
......@@ -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>
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