mirror of
https://github.com/Elvanos/fantasia-archive.git
synced 2024-06-02 10:24:54 +12:00
0.1.7-DEV-5: finished killing bugs in the document previews
This commit is contained in:
Elvanos
parent
e1de700431
commit
0b41f5c1bd
|
|
@ -9,11 +9,12 @@
|
|||
:offset="[0, 0]"
|
||||
:anchor="customAnchor"
|
||||
:self="customSelf"
|
||||
@show="openDocumentPreview"
|
||||
@before-show="openDocumentPreview"
|
||||
@before-hide="consitentDocumentPreviewSwitch"
|
||||
v-model="documentPreviewSwitch"
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
ref="documentPreview"
|
||||
>
|
||||
<div
|
||||
v-if="localBlueprint"
|
||||
|
|
@ -107,9 +108,11 @@
|
|||
:editMode="false"
|
||||
:current-id="localDocument._id"
|
||||
:recursive="true"
|
||||
:special-z-index="(specialZIndex)"
|
||||
@menu-mode="reactToMenuMode"
|
||||
@menu-enter="reactToMenuEnter"
|
||||
@menu-leave="reactToMenuLeave"
|
||||
@set-new-parent-id="setOtherContent"
|
||||
/>
|
||||
|
||||
<Field_MultiRelationship
|
||||
|
|
@ -122,9 +125,11 @@
|
|||
:editMode="false"
|
||||
:current-id="localDocument._id"
|
||||
:recursive="true"
|
||||
:special-z-index="specialZIndex"
|
||||
@menu-mode="reactToMenuMode"
|
||||
@menu-enter="reactToMenuEnter"
|
||||
@menu-leave="reactToMenuLeave"
|
||||
@set-new-parent-id="setOtherContent"
|
||||
/>
|
||||
|
||||
<Field_Wysiwyg
|
||||
|
|
@ -171,6 +176,7 @@ import Field_SingleSelect from "src/components/fields/Field_SingleSelect.vue"
|
|||
import Field_MultiSelect from "src/components/fields/Field_MultiSelect.vue"
|
||||
import Field_Wysiwyg from "src/components/fields/Field_Wysiwyg.vue"
|
||||
import Field_Tags from "src/components/fields/Field_Tags.vue"
|
||||
import { extend } from "quasar"
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
|
|
@ -198,24 +204,32 @@ export default class DocumentPreview extends BaseClass {
|
|||
*/
|
||||
@Prop() readonly documentId!: string
|
||||
|
||||
@Prop() readonly forceRefresh!: string
|
||||
setOtherContent (id:string) {
|
||||
this.hasOtherContent = true
|
||||
this.setNewDocumentID(id).catch(e => console.log(e))
|
||||
}
|
||||
|
||||
@Watch("forceRefresh")
|
||||
reactToForceRefresh () {
|
||||
this.reactToDocumentIDChange()
|
||||
async setNewDocumentID (id: string) {
|
||||
this.localDocument = extend(true, {}, this.SGET_document(id))
|
||||
if (!this.localDocument) {
|
||||
// @ts-ignore
|
||||
this.localDocument = extend(true, {}, this.SGET_openedDocument(id))
|
||||
}
|
||||
if (this.localDocument) {
|
||||
this.localBlueprint = this.SGET_blueprint(this.localDocument.type)
|
||||
|
||||
await this.$nextTick()
|
||||
|
||||
document.querySelectorAll(".documentPreviewWrapper").forEach(e => {
|
||||
e.scrollTop = 0
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@Watch("documentId", { immediate: true })
|
||||
reactToDocumentIDChange () {
|
||||
reactToDocumentIDChange (val: string) {
|
||||
if (this.documentId) {
|
||||
this.localDocument = this.SGET_document(this.documentId)
|
||||
if (!this.localDocument) {
|
||||
// @ts-ignore
|
||||
this.localDocument = this.SGET_openedDocument(this.documentId)
|
||||
}
|
||||
if (this.localDocument) {
|
||||
this.localBlueprint = this.SGET_blueprint(this.localDocument.type)
|
||||
}
|
||||
this.setNewDocumentID(val).catch(e => console.log(e))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -300,13 +314,21 @@ export default class DocumentPreview extends BaseClass {
|
|||
documentPreviewClose () {
|
||||
this.documentPreviewLock = false
|
||||
this.documentPreviewSwitch = false
|
||||
this.hasOtherContent = false
|
||||
}
|
||||
|
||||
documentPreviewLock = false
|
||||
documentPreviewSwitch = false
|
||||
|
||||
hasOtherContent = false
|
||||
|
||||
openDocumentPreview () {
|
||||
this.documentPreviewLock = true
|
||||
if (!this.hasOtherContent) {
|
||||
this.documentPreviewLock = true
|
||||
if (this.documentId) {
|
||||
this.setNewDocumentID(this.documentId).catch(e => console.log(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
clearCloseTimer () {
|
||||
|
|
@ -345,6 +367,8 @@ export default class DocumentPreview extends BaseClass {
|
|||
pointer-events: all !important;
|
||||
padding: 0 !important;
|
||||
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
|
||||
height: 600px;
|
||||
background-color: map-get($customColors, 'gunmetal-lighter') !important;
|
||||
}
|
||||
|
||||
.documentPreviewContent {
|
||||
|
|
|
|||
|
|
@ -152,6 +152,7 @@
|
|||
context-menu
|
||||
auto-close
|
||||
separate-close-popup
|
||||
content-style="z-index: 1000000000 !important;"
|
||||
>
|
||||
|
||||
<q-list class="bg-gunmetal-light text-accent">
|
||||
|
|
|
|||
|
|
@ -35,12 +35,48 @@
|
|||
v-if="!editMode && localInput"
|
||||
class="connectionList"
|
||||
dense>
|
||||
<div
|
||||
v-for="single in localInput"
|
||||
:key="single._id"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
v-if="recursive"
|
||||
class="relationshipOpeningButton q-btn q-btn-item non-selectable no-outline q-btn--flat q-btn--round text-primary q-btn--actionable q-focusable q-hoverable q-btn--wrap q-btn--dense"
|
||||
@click.stop.prevent.left="openNewTab(single)"
|
||||
v-ripple
|
||||
>
|
||||
<span class="q-focus-helper"></span>
|
||||
<i
|
||||
style="font-size: 20px;"
|
||||
class="mdi mdi-open-in-new q-icon notranslate text-primary"
|
||||
/>
|
||||
<q-tooltip :delay="500">
|
||||
Open in new tab without leaving this one
|
||||
</q-tooltip>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="recursive"
|
||||
class="relationshipChangeParent q-btn q-btn-item non-selectable no-outline q-btn--flat q-btn--round text-primary q-btn--actionable q-focusable q-hoverable q-btn--wrap q-btn--dense"
|
||||
@click.stop.prevent.left="setNewParentId(single._id)"
|
||||
v-ripple
|
||||
>
|
||||
<span class="q-focus-helper"></span>
|
||||
<i
|
||||
style="font-size: 20px;"
|
||||
class="mdi mdi-eye-outline q-icon notranslate text-primary"
|
||||
/>
|
||||
<q-tooltip :delay="500">
|
||||
Change preview to this document
|
||||
</q-tooltip>
|
||||
</div>
|
||||
|
||||
<q-item
|
||||
v-for="single in localInput"
|
||||
:key="single._id"
|
||||
clickable
|
||||
class="text-primary"
|
||||
@mouseleave="setDocumentPreviewClose"
|
||||
clickable
|
||||
class="text-primary"
|
||||
:class="{'hasSetParentButton': recursive}"
|
||||
@mouseleave="setDocumentPreviewClose"
|
||||
>
|
||||
<documentPreview
|
||||
v-if="!recursive || preventPreviewsDocuments"
|
||||
|
|
@ -48,8 +84,8 @@
|
|||
:external-close-trigger="documentPreviewClose"
|
||||
/>
|
||||
<q-item-section
|
||||
@click.left="openExistingDocumentRoute(single)"
|
||||
@click.middle="openNewTab(single)"
|
||||
@click.stop.prevent.left="openExistingDocumentRoute(single)"
|
||||
@click.stop.prevent.middle="openNewTab(single)"
|
||||
>
|
||||
<span class="text-weight-medium">
|
||||
<span class="isDeadIndicator" v-if="single.isDead">
|
||||
|
|
@ -62,92 +98,81 @@
|
|||
<span class="inline-block q-ml-xs text-italic connectionNote">
|
||||
{{retrieveNoteText(single._id)}}
|
||||
</span>
|
||||
<q-btn
|
||||
tabindex="-1"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
dark
|
||||
color="primary"
|
||||
icon="mdi-open-in-new"
|
||||
size="12px"
|
||||
class="relationshipOpeningButton"
|
||||
@click.stop.prevent.left="openNewTab(single)"
|
||||
>
|
||||
<q-tooltip :delay="500">
|
||||
Open in new tab without leaving this one
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
</q-item-section>
|
||||
<q-menu
|
||||
touch-position
|
||||
context-menu
|
||||
auto-close
|
||||
separate-close-popup
|
||||
@before-show="menuMode(true)"
|
||||
@before-hide="menuMode(false)"
|
||||
@mouseleave="menuLeave"
|
||||
@mouseenter="menuEnter"
|
||||
:dense="recursive"
|
||||
touch-position
|
||||
context-menu
|
||||
auto-close
|
||||
separate-close-popup
|
||||
@before-show="menuMode(true)"
|
||||
@before-hide="menuMode(false)"
|
||||
@mouseleave="menuLeave"
|
||||
@mouseenter="menuEnter"
|
||||
:dense="recursive"
|
||||
:content-style="`z-index: ${(specialZIndex !== 999) ? specialZIndex+1 : '' } !important;`"
|
||||
>
|
||||
|
||||
>
|
||||
<q-list class="bg-gunmetal-light text-accent">
|
||||
|
||||
<q-list class="bg-gunmetal-light text-accent">
|
||||
|
||||
<template>
|
||||
<q-item clickable @click="copyName(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Copy name</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-text-recognition" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyTextColor(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Copy text color</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-eyedropper" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyBackgroundColor(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Copy background color</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-format-color-fill" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator dark />
|
||||
<q-item clickable @click="openExistingInput(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Open document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-book-open-page-variant-outline" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="editExistingInput(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Edit document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-pencil" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="addNewUnderParent(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Create new document with this document as parent</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="primary" name="mdi-file-tree" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyTargetDocument(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Copy this document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="primary" name="mdi-content-copy" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
<template>
|
||||
<q-item clickable @click="copyName(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Copy name</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-text-recognition" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyTextColor(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Copy text color</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-eyedropper" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyBackgroundColor(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Copy background color</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-format-color-fill" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator dark />
|
||||
<q-item clickable @click="openExistingInput(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Open document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-book-open-page-variant-outline" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="editExistingInput(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Edit document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-pencil" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="addNewUnderParent(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Create new document with this document as parent</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="primary" name="mdi-file-tree" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyTargetDocument(fixGetCorrectDocument(single))">
|
||||
<q-item-section>Copy this document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="primary" name="mdi-content-copy" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
|
||||
</q-menu>
|
||||
|
||||
</q-item>
|
||||
|
||||
</div>
|
||||
|
||||
</q-list>
|
||||
|
||||
<div class="flex" v-if="editMode">
|
||||
<div class="flex" v-if="editMode" @mouseleave="setDocumentPreviewClose">
|
||||
<q-select
|
||||
@mouseleave="setDocumentPreviewClose"
|
||||
menu-anchor="bottom middle"
|
||||
menu-self="top middle"
|
||||
class="multiRelashionshipSelect"
|
||||
|
|
@ -188,6 +213,7 @@
|
|||
:color="(scope.opt.isAutoGenerated) ? 'teal-3' : 'accent'"
|
||||
text-color="dark"
|
||||
class="text-bold"
|
||||
@mouseleave="setDocumentPreviewClose"
|
||||
>
|
||||
|
||||
<q-tooltip
|
||||
|
|
@ -214,11 +240,22 @@
|
|||
Open in new tab without leaving this one
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
<documentPreview
|
||||
v-if="(!recursive || preventPreviewsDocuments) && !scope.opt.isAutoGenerated"
|
||||
:document-id="scope.opt._id"
|
||||
:external-close-trigger="documentPreviewClose"
|
||||
/>
|
||||
<q-menu
|
||||
v-if="!scope.opt.isAutoGenerated"
|
||||
touch-position
|
||||
context-menu
|
||||
auto-close
|
||||
separate-close-popup
|
||||
@before-show="menuMode(true)"
|
||||
@before-hide="menuMode(false)"
|
||||
@mouseleave="menuLeave"
|
||||
@mouseenter="menuEnter"
|
||||
:dense="recursive"
|
||||
>
|
||||
|
||||
<q-list class="bg-gunmetal-light text-accent">
|
||||
|
|
@ -281,8 +318,9 @@
|
|||
:key="opt.id"
|
||||
:style="`background-color: ${opt.bgColor}`"
|
||||
:title="(disabledIDList.includes(opt._id)) ? 'This option is unavailable for selection as it is already paired to another.': ''"
|
||||
@mouseleave="setDocumentPreviewClose"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
:style="`color: ${retrieveIconColor(opt)}`"
|
||||
:name="(opt.isCategory) ? 'fas fa-folder-open' : opt.icon"
|
||||
|
|
@ -311,11 +349,23 @@
|
|||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<documentPreview
|
||||
v-if="!recursive || preventPreviewsDocuments"
|
||||
:document-id="opt._id"
|
||||
:external-close-trigger="documentPreviewClose"
|
||||
:custom-anchor="'top start'"
|
||||
:custom-self="'center right'"
|
||||
/>
|
||||
<q-menu
|
||||
touch-position
|
||||
context-menu
|
||||
auto-close
|
||||
separate-close-popup
|
||||
@before-show="menuMode(true)"
|
||||
@before-hide="menuMode(false)"
|
||||
@mouseleave="menuLeave"
|
||||
@mouseenter="menuEnter"
|
||||
:dense="recursive"
|
||||
>
|
||||
|
||||
<q-list class="bg-gunmetal-light text-accent">
|
||||
|
|
@ -473,6 +523,8 @@ export default class Field_MultiRelationship extends FieldBase {
|
|||
// BASIC FIELD DATA
|
||||
/****************************************************************/
|
||||
|
||||
@Prop({ default: 999 }) readonly specialZIndex!: number
|
||||
|
||||
/**
|
||||
* Prevent document preview in already existing previews
|
||||
*/
|
||||
|
|
@ -969,6 +1021,11 @@ export default class Field_MultiRelationship extends FieldBase {
|
|||
menuLeave () {
|
||||
return true
|
||||
}
|
||||
|
||||
@Emit()
|
||||
setNewParentId (id: string) {
|
||||
return id
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -983,20 +1040,44 @@ table {
|
|||
<style lang="scss">
|
||||
.connectionList {
|
||||
.q-item {
|
||||
padding-right: 30px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
padding-right: 30px;
|
||||
|
||||
&.hasSetParentButton {
|
||||
padding-right: 60px;
|
||||
}
|
||||
}
|
||||
.q-item__section {
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.relationshipOpeningButton {
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
}
|
||||
.relationshipOpeningButton {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 29px;
|
||||
width: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.relationshipChangeParent {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 29px;
|
||||
width: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1004,5 +1085,4 @@ table {
|
|||
color: #000;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,115 +34,139 @@
|
|||
v-if="!editMode && localInput"
|
||||
class="connectionList"
|
||||
dense>
|
||||
<q-item
|
||||
clickable
|
||||
class="text-primary"
|
||||
@mouseleave="setDocumentPreviewClose"
|
||||
<div
|
||||
style="position: relative;"
|
||||
>
|
||||
<q-item-section
|
||||
@click.left="openExistingDocumentRoute(localInput)"
|
||||
@click.middle="openNewTab(localInput)"
|
||||
>
|
||||
<span class="text-weight-medium">
|
||||
<span class="isDeadIndicator" v-if="localInput.isDead">
|
||||
†
|
||||
</span>
|
||||
<span :class="{'isDead': (localInput.isDead && !hideDeadCrossThrough)}">
|
||||
{{stripTags(localInput.label)}}
|
||||
</span>
|
||||
</span>
|
||||
<span class="inline-block q-ml-xs text-italic connectionNote">
|
||||
{{retrieveNoteText()}}
|
||||
</span>
|
||||
<q-btn
|
||||
tabindex="-1"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
dark
|
||||
color="primary"
|
||||
icon="mdi-open-in-new"
|
||||
size="12px"
|
||||
class="relationshipOpeningButton"
|
||||
@click.stop.prevent.left="openNewTab(localInput)"
|
||||
>
|
||||
<q-tooltip :delay="500">
|
||||
Open in new tab without leaving this one
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-section>
|
||||
<q-menu
|
||||
touch-position
|
||||
context-menu
|
||||
auto-close
|
||||
separate-close-popup
|
||||
@before-show="menuMode(true)"
|
||||
@before-hide="menuMode(false)"
|
||||
@mouseleave="menuLeave"
|
||||
@mouseenter="menuEnter"
|
||||
:dense="recursive"
|
||||
<div
|
||||
v-if="recursive"
|
||||
class="relationshipOpeningButton q-btn q-btn-item non-selectable no-outline q-btn--flat q-btn--round text-primary q-btn--actionable q-focusable q-hoverable q-btn--wrap q-btn--dense"
|
||||
@click.stop.prevent.left="openNewTab(localInput)"
|
||||
v-ripple
|
||||
>
|
||||
<span class="q-focus-helper"></span>
|
||||
<i
|
||||
style="font-size: 20px;"
|
||||
class="mdi mdi-open-in-new q-icon notranslate text-primary"
|
||||
/>
|
||||
<q-tooltip :delay="500">
|
||||
Open in new tab without leaving this one
|
||||
</q-tooltip>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="recursive"
|
||||
class="relationshipChangeParent q-btn q-btn-item non-selectable no-outline q-btn--flat q-btn--round text-primary q-btn--actionable q-focusable q-hoverable q-btn--wrap q-btn--dense"
|
||||
@click.stop.prevent.left="setNewParentId(localInput._id)"
|
||||
v-ripple
|
||||
>
|
||||
<span class="q-focus-helper"></span>
|
||||
<i
|
||||
style="font-size: 20px;"
|
||||
class="mdi mdi-eye-outline q-icon notranslate text-primary"
|
||||
/>
|
||||
<q-tooltip :delay="500">
|
||||
Change preview to this document
|
||||
</q-tooltip>
|
||||
</div>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
class="text-primary"
|
||||
:class="{'hasSetParentButton': recursive}"
|
||||
@mouseleave="setDocumentPreviewClose"
|
||||
>
|
||||
<q-item-section
|
||||
@click.stop.prevent.left="openExistingDocumentRoute(localInput)"
|
||||
@click.stop.prevent.middle="openNewTab(localInput)"
|
||||
>
|
||||
<span class="text-weight-medium">
|
||||
<span class="isDeadIndicator" v-if="localInput.isDead">
|
||||
†
|
||||
</span>
|
||||
<span :class="{'isDead': (localInput.isDead && !hideDeadCrossThrough)}">
|
||||
{{stripTags(localInput.label)}}
|
||||
</span>
|
||||
</span>
|
||||
<span class="inline-block q-ml-xs text-italic connectionNote">
|
||||
{{retrieveNoteText()}}
|
||||
</span>
|
||||
</q-item-section>
|
||||
<q-menu
|
||||
touch-position
|
||||
context-menu
|
||||
auto-close
|
||||
separate-close-popup
|
||||
@before-show="menuMode(true)"
|
||||
@before-hide="menuMode(false)"
|
||||
@mouseleave="menuLeave"
|
||||
@mouseenter="menuEnter"
|
||||
:dense="recursive"
|
||||
:content-style="`z-index: ${(specialZIndex !== 999) ? specialZIndex+1 : '' } !important;`"
|
||||
>
|
||||
|
||||
<q-list class="bg-gunmetal-light text-accent">
|
||||
<q-list class="bg-gunmetal-light text-accent">
|
||||
|
||||
<template>
|
||||
<q-item clickable @click="copyName(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Copy name</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-text-recognition" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyTextColor(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Copy text color</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-eyedropper" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyBackgroundColor(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Copy background color</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-format-color-fill" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator dark />
|
||||
<q-item clickable @click="openExistingInput(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Open document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-book-open-page-variant-outline" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="editExistingInput(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Edit document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-pencil" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="addNewUnderParent(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Create new document with this document as parent</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="primary" name="mdi-file-tree" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyTargetDocument(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Copy this document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="primary" name="mdi-content-copy" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
<template>
|
||||
<q-item clickable @click="copyName(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Copy name</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-text-recognition" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyTextColor(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Copy text color</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-eyedropper" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyBackgroundColor(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Copy background color</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-format-color-fill" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator dark />
|
||||
<q-item clickable @click="openExistingInput(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Open document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-book-open-page-variant-outline" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="editExistingInput(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Edit document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-pencil" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="addNewUnderParent(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Create new document with this document as parent</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="primary" name="mdi-file-tree" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="copyTargetDocument(fixGetCorrectDocument(localInput))">
|
||||
<q-item-section>Copy this document</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="primary" name="mdi-content-copy" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
|
||||
</q-menu>
|
||||
<documentPreview
|
||||
v-if="!recursive || preventPreviewsDocuments"
|
||||
:document-id="localInput._id"
|
||||
:external-close-trigger="documentPreviewClose"
|
||||
/>
|
||||
</q-item>
|
||||
</div>
|
||||
|
||||
</q-menu>
|
||||
<documentPreview
|
||||
v-if="!recursive || preventPreviewsDocuments"
|
||||
:document-id="localInput._id"
|
||||
:external-close-trigger="documentPreviewClose"
|
||||
/>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
<div class="flex" v-if="editMode">
|
||||
<div class="flex" v-if="editMode" @mouseleave="setDocumentPreviewClose">
|
||||
<q-select
|
||||
@mouseleave="setDocumentPreviewClose"
|
||||
class="singleRelashionshipSelect"
|
||||
menu-anchor="bottom middle"
|
||||
menu-self="top middle"
|
||||
|
|
@ -183,6 +207,7 @@
|
|||
:color="(scope.opt.isAutoGenerated) ? 'teal-3' : 'accent'"
|
||||
text-color="dark"
|
||||
class="text-bold"
|
||||
@mouseleave="setDocumentPreviewClose"
|
||||
>
|
||||
<q-tooltip
|
||||
v-if="scope.opt.isAutoGenerated"
|
||||
|
|
@ -209,11 +234,22 @@
|
|||
Open in new tab without leaving this one
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
<documentPreview
|
||||
v-if="(!recursive || preventPreviewsDocuments) && !scope.opt.isAutoGenerated"
|
||||
:document-id="scope.opt._id"
|
||||
:external-close-trigger="documentPreviewClose"
|
||||
/>
|
||||
<q-menu
|
||||
touch-position
|
||||
context-menu
|
||||
auto-close
|
||||
separate-close-popup
|
||||
v-if="!scope.opt.isAutoGenerated"
|
||||
touch-position
|
||||
context-menu
|
||||
auto-close
|
||||
separate-close-popup
|
||||
@before-show="menuMode(true)"
|
||||
@before-hide="menuMode(false)"
|
||||
@mouseleave="menuLeave"
|
||||
@mouseenter="menuEnter"
|
||||
:dense="recursive"
|
||||
>
|
||||
|
||||
<q-list class="bg-gunmetal-light text-accent">
|
||||
|
|
@ -308,11 +344,23 @@
|
|||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<documentPreview
|
||||
v-if="!recursive || preventPreviewsDocuments"
|
||||
:document-id="opt._id"
|
||||
:external-close-trigger="documentPreviewClose"
|
||||
:custom-anchor="'top start'"
|
||||
:custom-self="'center right'"
|
||||
/>
|
||||
<q-menu
|
||||
touch-position
|
||||
context-menu
|
||||
auto-close
|
||||
separate-close-popup
|
||||
@before-show="menuMode(true)"
|
||||
@before-hide="menuMode(false)"
|
||||
@mouseleave="menuLeave"
|
||||
@mouseenter="menuEnter"
|
||||
:dense="recursive"
|
||||
>
|
||||
|
||||
<q-list class="bg-gunmetal-light text-accent">
|
||||
|
|
@ -425,6 +473,8 @@ export default class Field_SingleRelationship extends FieldBase {
|
|||
// BASIC FIELD DATA
|
||||
/****************************************************************/
|
||||
|
||||
@Prop({ default: 999 }) readonly specialZIndex!: number
|
||||
|
||||
/**
|
||||
* Prevent document preview in already existing previews
|
||||
*/
|
||||
|
|
@ -901,6 +951,11 @@ export default class Field_SingleRelationship extends FieldBase {
|
|||
menuLeave () {
|
||||
return true
|
||||
}
|
||||
|
||||
@Emit()
|
||||
setNewParentId (id: string) {
|
||||
return id
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -915,8 +970,12 @@ table {
|
|||
<style lang="scss">
|
||||
.connectionList {
|
||||
.q-item {
|
||||
padding-right: 30px;
|
||||
padding-left: 10px;
|
||||
padding-right: 30px;
|
||||
|
||||
&.hasSetParentButton {
|
||||
padding-right: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.q-item__section {
|
||||
|
|
@ -924,11 +983,32 @@ table {
|
|||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.relationshipOpeningButton {
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
}
|
||||
.relationshipOpeningButton {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 29px;
|
||||
width: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.relationshipChangeParent {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 29px;
|
||||
width: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
## THE GM BATCH
|
||||
|
||||
- Add hover/on-demand document preview to relationships
|
||||
- Add category for diseases/curses/etc
|
||||
- Add category for classes/occupations
|
||||
- Add category for skill/spells, edit magic and tech category
|
||||
|
||||
- Export for MD/PDF/ODT/DOCX
|
||||
- Selective export per field basis
|
||||
|
|
@ -30,11 +32,10 @@
|
|||
|
||||
- Add "Predecessors", "Successors", "Date of start", "Date of end" and "How long it lasted" fields to locations and all other groups
|
||||
|
||||
- Add category for skill/spells, edit magic and tech category
|
||||
- Add category for materials/resources OR adapt Items category
|
||||
- Add category for diseases/curses/etc
|
||||
- Add category for classes/jobs
|
||||
|
||||
- Add advanced search capabilities to the hierarchical tree
|
||||
- Add keybinds on button tooltips
|
||||
|
||||
### Project settings
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue