Commit 594a26e8 authored by schneider210's avatar schneider210
Browse files

refactor: improve maintainability due to modularization

provide new component "annotionoptions"
parent 9190f9e4
Pipeline #200930 passed with stages
in 3 minutes and 44 seconds
<template>
<q-page-sticky
:offset="[18, 18]"
position="bottom-right"
>
<q-fab
color="primary"
direction="up"
vertical-actions-align="right"
:active-icon="fasChevronDown"
:icon="fasCog"
>
<q-fab-action
color="primary"
label="Highlight All Annotations in Text Panel"
label-position="left"
:disable="selectedAll"
:icon="fasEye"
@click="toggleTo(true)"
/>
<q-fab-action
color="primary"
label="Remove All Highlights in Text Panel"
label-position="left"
:disable="selectedNone"
:icon="fasEyeSlash"
@click="toggleTo(false)"
/>
</q-fab>
</q-page-sticky>
</template>
<script>
import {
fasChevronDown,
fasCog,
fasEye,
fasEyeSlash,
} from '@quasar/extras/fontawesome-v5';
export default {
name: 'AnnotationOptions',
props: {
selectedAll: {
type: Boolean,
},
selectedNone: {
type: Boolean,
},
toggleTo: {
type: Function,
default: () => null,
},
},
created() {
this.fasChevronDown = fasChevronDown;
this.fasCog = fasCog;
this.fasEye = fasEye;
this.fasEyeSlash = fasEyeSlash;
},
};
</script>
......@@ -10,35 +10,11 @@
:toggle="toggle"
/>
<q-page-sticky
:offset="[18, 18]"
position="bottom-right"
>
<q-fab
color="primary"
direction="up"
vertical-actions-align="right"
:active-icon="icons.fasChevronDown"
:icon="icons.fasCog"
>
<q-fab-action
color="primary"
label="Highlight All Annotations in Text Panel"
label-position="left"
:disable="selectedAll"
:icon="icons.fasEye"
@click="toggleTo(true)"
/>
<q-fab-action
color="primary"
label="Remove All Highlights in Text Panel"
label-position="left"
:disable="selectedNone"
:icon="icons.fasEyeSlash"
@click="toggleTo(false)"
/>
</q-fab>
</q-page-sticky>
<AnnotationOptions
:selected-all="selectedAll"
:selected-none="selectedNone"
:toggle-to="toggleTo"
/>
</div>
<div
......@@ -51,13 +27,17 @@
<script>
import * as Icons from '@quasar/extras/fontawesome-v5';
import AnnotationList from '@/components/annotationlist.vue';
import AnnotationOptions from '@/components/annotationoptions.vue';
import Notification from '@/components/notification.vue';
export default {
name: 'Annotations',
components: {
AnnotationList,
AnnotationOptions,
Notification,
},
props: {
......@@ -90,9 +70,6 @@ export default {
return this.config.annotations.types.map((type) => type.contenttype);
},
},
created() {
this.icons = Icons;
},
mounted() {
this.$root.$on('update-annotations', (content) => {
const parser = new DOMParser();
......
......@@ -31,7 +31,7 @@
-->
<script id="tido-config" type="application/json">
{
"entrypoint": "",
"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
"annotations": {
"show": true,
"types": [
......
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