Skip to content
GitLab
Commit b5899025 authored by schneider210's avatar schneider210
Browse files

Merge branch 'feature/#49-panel-grouping' into 'develop' 

Feature/#49 panel grouping

See merge request subugoe/emo/Qviewer!36
parents 9fd13e9c d4850b95
Pipeline #146682 passed with stages
in 2 minutes and 19 seconds
Hide whitespace changes
Inline Side-by-side
CHANGELOG.md
View file @ b5899025
......@@ -5,6 +5,18 @@ 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).
## [1.1.1] - 2020-08-03
### Fixed
- fix tree bug if meta panel is active. implement listener for active panel tab
## [1.1.0] - 2020-07-29
### Added
- metadata panel exchanged by annotation panel (no content yet). therefore metadata goes into the tree panel.
both of the latter became tabs inside this one panel.
- panel order changed to: contents / metadata (tabs), image, text, annotations
## [1.0.1]- 2020-07-30
### Changed
......
src/App.vue
View file @ b5899025
......@@ -42,6 +42,7 @@ export default {
},
data() {
return {
annotations: {},
collection: {},
collectiontitle: '',
contenturl: '',
......
src/components/content.vue
View file @ b5899025
......@@ -11,33 +11,25 @@
title="Increase Textsize"
@click="increase()"
>
<q-icon
size="sm"
:name="fasSearchPlus"
/>
<q-icon :name="fasSearchPlus" size="sm" />
</q-btn>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
round
flat
round
size="md"
title="Decrease Textsize"
@click="decrease()"
>
<q-icon
size="sm"
:name="fasSearchMinus"
/>
<q-icon :name="fasSearchMinus" />
</q-btn>
</div>
</div>
<div class="row" style="display: contents">
<div
:style="`font-size: ${fontsize}px`"
:id="nodeid" v-html="content">
</div>
<div :id="nodeid" :style="`font-size: ${fontsize}px`" v-html="content"></div>
</div>
</div>
</template>
......
src/components/navbar.vue
View file @ b5899025
......@@ -2,8 +2,8 @@
<div>
<q-btn
unelevated
color="black q-pr-sm"
class="q-mb-md"
color="black q-pr-sm"
:disabled="itemindex <= 0"
@click="toggleSheet(--itemindex)"
>
......
src/components/softwareinfo.vue
View file @ b5899025
......@@ -22,7 +22,7 @@
<p>Copyright (c) 2020 Göttingen University - Göttingen State and University Library</p>
<p class="q-mb-none">
Version 1.0.0, licensed under GNU Affero General Public License v3.0
Version 1.1.1, licensed under GNU Affero General Public License v3.0
</p>
</q-card-section>
......
src/css/global.scss
View file @ b5899025
// global extra classes
.scrollPanel {
.scrollpanel {
position: relative;
.sticky {
......
src/index.template.html
View file @ b5899025
......@@ -25,7 +25,7 @@
<script id="emo-config" type="application/json">
{
"entrypoint": "https://ahikar-test.sub.uni-goettingen.de/api/textapi/ahikar/3r9ps/collection.json",
"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/3r9ps/collection.json",
"headers": {
"all": true,
"info": true,
......@@ -37,23 +37,24 @@
"manifest": "Manuscript"
},
"panels": {
"tree": {
"name": "Contents",
"tabs": {
"default": "contents",
"name": "Contents & Meta",
"position": 1,
"show": true
},
"text": {
"name": "Text",
"image": {
"name": "Image",
"position": 2,
"show": true
},
"image": {
"name": "Image",
"text": {
"name": "Text",
"position": 3,
"show": true
},
"metadata": {
"name": "Metadata",
"annotations": {
"name": "Annotations",
"position": 4,
"show": true
}
......
src/mixins/navigation.js
View file @ b5899025
......@@ -8,15 +8,18 @@ export default {
return {
itemindex: 0,
sequenceindex: 0,
tab: '',
};
},
methods: {
toggleSheet(itemIndex) {
const link = this.itemurls[itemIndex];
const tree = document.getElementsByClassName('view-tree')[0];
if (this.tab !== 'contents') {
const link = this.itemurls[itemIndex];
window.location.hash = `selectedItem-${link}`;
window.location.hash = `selectedItem-${link}`;
tree.scrollBy(0, -80);
const tree = document.getElementsByClassName('view-tree')[0];
tree.scrollBy(0, -80);
}
this.sequenceindex = this.computedsequenceindex;
this.updateItem(this.itemurls[itemIndex], this.sequenceindex);
......@@ -90,6 +93,10 @@ export default {
},
},
mounted() {
this.$root.$on('update-tab', (tab) => {
this.tab = tab;
});
this.$root.$on('update-item-index', (index) => {
this.itemindex = index;
});
......
src/views/quasar-mainview.vue
View file @ b5899025
......@@ -2,27 +2,76 @@
<q-page>
<q-splitter v-model="splitterone" :limits="[0, 100]">
<template v-show="config.panels.tree.show && states.tree" v-slot:before>
<Toolbar :heading="config.panels.tree.name" />
<template v-show="config.panels.tabs.show && states.tabs" v-slot:before>
<Toolbar :heading="config.panels.tabs.name" />
<q-separator />
<Treeview v-if="tree.length && manifests.length"
:manifests="manifests"
:tree="tree"
>
</Treeview>
<q-card>
<q-tabs v-model="tab"
align="right"
active-bg-color="grey-4"
>
<q-tab name="contents" label="Contents" @click="updateTab()" />
<q-tab name="meta" label="Metadata" @click="updateTab()" />
</q-tabs>
<q-separator />
<q-tab-panels v-model="tab" animated keep-alive>
<q-tab-panel name="contents">
<Treeview v-if="tree.length && manifests.length"
:manifests="manifests"
:tree="tree"
>
</Treeview>
</q-tab-panel>
<q-tab-panel name="meta">
<div class="scrollpanel">
<Metadata v-if="manifests.length"
:collection="collection"
:config="config"
:language="language"
:manifests="manifests"
:itemlabel="itemlabel"
>
</Metadata>
</div>
</q-tab-panel>
</q-tab-panels>
</q-card>
</template>
<template v-slot:after>
<q-splitter v-model="splittertwo" :limits="[0, 100]">
<template v-show="config.panels.image.show && states.image && imageurl" v-slot:before>
<Toolbar :heading="config.panels.image.name" />
<q-separator />
<div class="q-pa-md q-gutter-sm overflow-hidden">
<div class="scrollpanel">
<OpenSeadragon
:key="imageurl"
:imageurl="imageurl"
>
</OpenSeadragon>
</div>
</div>
</template>
<template v-slot:after>
<q-splitter v-model="splitterthree" :limits="[0, 100]">
<template v-show="config.panels.text.show && states.text" v-slot:before>
<Toolbar :heading="config.panels.text.name" />
<q-separator />
<div class="q-pa-md q-gutter-sm">
<div class="scrollPanel">
<div class="scrollpanel">
<q-infinite-scroll>
<Content
:key="contenturl"
......@@ -37,46 +86,19 @@
</div>
</template>
<template v-slot:after>
<q-splitter v-model="splitterthree" :limits="[0, 100]">
<template v-show="config.panels.image.show && states.image && imageurl" v-slot:before>
<Toolbar :heading="config.panels.image.name" />
<q-separator />
<div class="q-pa-md q-gutter-sm" style="overflow:hidden">
<div class="scrollPanel">
<OpenSeadragon
:key="imageurl"
:imageurl="imageurl"
>
</OpenSeadragon>
</div>
</div>
</template>
<template v-show="config.panels.metadata.show && states.metadata" v-slot:after>
<Toolbar :heading="config.panels.metadata.name" />
<q-separator />
<div class="scrollPanel">
<q-infinite-scroll>
<Metadata v-if="manifests.length"
:collection="collection"
:config="config"
:language="language"
:manifests="manifests"
:itemlabel="itemlabel"
>
</Metadata>
</q-infinite-scroll>
</div>
</template>
</q-splitter>
<template v-show="config.panels.annotations.show && states.annotations" v-slot:after>
<Toolbar :heading="config.panels.annotations.name" />
<q-separator />
</template>
</q-splitter>
</template>
</q-splitter>
</template>
</q-splitter>
</q-page>
</template>
......@@ -110,7 +132,7 @@ export default {
},
data() {
return {
// status: tree, text, image, metadata
// status: tree, image, text, annotations
matrix: [
{ state: [1, 1, 1, 1], ratio: [25, 33, 50] },
{ state: [0, 0, 0, 0], ratio: [0, 0, 0] },
......@@ -133,6 +155,7 @@ export default {
splittertwo: 33,
splitterthree: 50,
states: {},
tab: '',
};
},
methods: {
......@@ -167,6 +190,9 @@ export default {
}
});
},
updateTab() {
this.$root.$emit('update-tab', this.tab);
},
},
created() {
// filter the panel's showcases and leave the config object untouched
......@@ -174,6 +200,8 @@ export default {
this.states[panel] = states.show;
});
this.setSplitterRatio(this.states);
this.tab = this.config.panels.tabs.default;
},
mounted() {
// emitted by @/components/togglebar.vue
......@@ -194,13 +222,13 @@ export default {
<style lang="scss" scoped>
@import '../css/responsive-heights.scss';
.scrollPanel {
.scrollpanel {
-ms-overflow-style: none;
overflow: auto;
scrollbar-width: none;
@include makeResponsiveHeight();
}
.scrollPanel::-webkit-scrollbar {
.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