Commit d4850b95 authored by schneider210's avatar schneider210
Browse files

group contents and metadata in one single panel. exchnage meta by annotation...

group contents and metadata in one single panel. exchnage meta by annotation panel and adjust splitter ratios
parent 9fd13e9c
......@@ -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
......
......@@ -42,6 +42,7 @@ export default {
},
data() {
return {
annotations: {},
collection: {},
collectiontitle: '',
contenturl: '',
......
......@@ -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>
......
......@@ -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)"
>
......
......@@ -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>
......
// global extra classes
.scrollPanel {
.scrollpanel {
position: relative;
.sticky {
......
......@@ -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
}
......
......@@ -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;
});
......
......@@ -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>
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