Skip to content
GitLab
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
Hide whitespace changes
Inline Side-by-side
CHANGELOG.md
View file @ d4850b95
......@@ -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 @ d4850b95
......@@ -42,6 +42,7 @@ export default {
},
data() {
return {
annotations: {},
collection: {},
collectiontitle: '',
contenturl: '',
......
src/components/content.vue
View file @ d4850b95
......@@ -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 @ d4850b95
......@@ -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 @ d4850b95
......@@ -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 @ d4850b95
// global extra classes
.scrollPanel {
.scrollpanel {
position: relative;
.sticky {
......
src/index.template.html
View file @ d4850b95
......@@ -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 @ d4850b95
......@@ -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 @ d4850b95
......@@ -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