Merge branch 'develop' into feature/compount-metadata-type-refactor
This commit is contained in:
mateuswetah
commit
634e4e69a6
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="item-edition-page-container">
|
||||
<div>
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoading"
|
||||
|
|
@ -36,297 +36,41 @@
|
|||
label-width="120px">
|
||||
<div class="columns">
|
||||
<div class="column is-5">
|
||||
<div
|
||||
:style="{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto'
|
||||
}">
|
||||
<!-- Hook for extra Form options -->
|
||||
<template
|
||||
v-if="formHooks != undefined &&
|
||||
formHooks['item'] != undefined &&
|
||||
formHooks['item']['begin-left'] != undefined">
|
||||
<form
|
||||
id="form-item-begin-left"
|
||||
class="form-hook-region"
|
||||
v-html="formHooks['item']['begin-left'].join('')"/>
|
||||
</template>
|
||||
|
||||
<!-- Hook for extra Form options -->
|
||||
<template
|
||||
v-if="formHooks != undefined &&
|
||||
formHooks['item'] != undefined &&
|
||||
formHooks['item']['begin-left'] != undefined">
|
||||
<form
|
||||
id="form-item-begin-left"
|
||||
class="form-hook-region"
|
||||
v-html="formHooks['item']['begin-left'].join('')"/>
|
||||
</template>
|
||||
|
||||
<!-- Document -------------------------------- -->
|
||||
<div class="section-label">
|
||||
<label>{{ form.document != undefined && form.document != null && form.document != '' ? $i18n.get('label_document') : $i18n.get('label_document_empty') }}</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'document')"
|
||||
:message="$i18n.getHelperMessage('items', 'document')"/>
|
||||
</div>
|
||||
<div class="section-box document-field">
|
||||
<div
|
||||
v-if="form.document != undefined && form.document != null &&
|
||||
form.document_type != undefined && form.document_type != null &&
|
||||
form.document != '' && form.document_type != 'empty'">
|
||||
<div v-if="form.document_type == 'attachment'">
|
||||
<!-- <div v-html="item.document_as_html" /> -->
|
||||
<document-item :document-html="item.document_as_html"/>
|
||||
<!-- Document -------------------------------- -->
|
||||
<div class="section-label">
|
||||
<label>{{ form.document != undefined && form.document != null && form.document != '' ? $i18n.get('label_document') : $i18n.get('label_document_empty') }}</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'document')"
|
||||
:message="$i18n.getHelperMessage('items', 'document')"/>
|
||||
</div>
|
||||
<div class="section-box document-field">
|
||||
<div
|
||||
v-if="form.document != undefined && form.document != null &&
|
||||
form.document_type != undefined && form.document_type != null &&
|
||||
form.document != '' && form.document_type != 'empty'">
|
||||
<div v-if="form.document_type == 'attachment'">
|
||||
<!-- <div v-html="item.document_as_html" /> -->
|
||||
<document-item :document-html="item.document_as_html"/>
|
||||
|
||||
<div class="document-buttons-row">
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
size="is-small"
|
||||
id="button-edit-document"
|
||||
:aria-label="$i18n.get('label_button_edit_document')"
|
||||
@click.prevent="setFileDocument($event)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
size="is-small"
|
||||
id="button-delete-document"
|
||||
:aria-label="$i18n.get('label_button_delete_document')"
|
||||
@click.prevent="removeDocument()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="form.document_type == 'text'">
|
||||
<div v-html="item.document_as_html" />
|
||||
<div class="document-buttons-row">
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
:aria-label="$i18n.get('label_button_edit_document')"
|
||||
id="button-edit-document"
|
||||
@click.prevent="setTextDocument()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
size="is-small"
|
||||
:aria-label="$i18n.get('label_button_delete_document')"
|
||||
id="button-delete-document"
|
||||
@click.prevent="removeDocument()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="form.document_type == 'url'">
|
||||
<div v-html="item.document_as_html" />
|
||||
<div class="document-buttons-row">
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
size="is-small"
|
||||
:aria-label="$i18n.get('label_button_edit_document')"
|
||||
id="button-edit-document"
|
||||
@click.prevent="setURLDocument()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
size="is-small"
|
||||
:aria-label="$i18n.get('label_button_delete_document')"
|
||||
id="button-delete-document"
|
||||
@click.prevent="removeDocument()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-else>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
@click.prevent="setFileDocument($event)">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-upload"/>
|
||||
</span>
|
||||
</button>
|
||||
<p>{{ $i18n.get('label_file') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
@click.prevent="setTextDocument()">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-text"/>
|
||||
</span>
|
||||
</button>
|
||||
<p>{{ $i18n.get('label_text') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
@click.prevent="setURLDocument()">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-url"/>
|
||||
</span>
|
||||
</button>
|
||||
<p>{{ $i18n.get('label_url') }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Text Insert Modal ----------------- -->
|
||||
<b-modal
|
||||
:can-cancel="false"
|
||||
:active.sync="isTextModalActive"
|
||||
:width="640"
|
||||
scroll="keep"
|
||||
trap-focus
|
||||
aria-modal
|
||||
aria-role="dialog">
|
||||
<div class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_write_text') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<b-input
|
||||
type="textarea"
|
||||
v-model="textContent"/>
|
||||
|
||||
<div class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-cancel-text-content-writing"
|
||||
class="button is-outlined"
|
||||
type="button"
|
||||
@click="cancelTextWriting()">
|
||||
{{ $i18n.get('cancel') }}</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-submit-text-content-writing"
|
||||
type="submit"
|
||||
@click.prevent="confirmTextWriting()"
|
||||
class="button is-success">
|
||||
{{ $i18n.get('save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<!-- URL Insert Modal ----------------- -->
|
||||
<b-modal
|
||||
:can-cancel="false"
|
||||
:active.sync="isURLModalActive"
|
||||
:width="640"
|
||||
scroll="keep"
|
||||
trap-focus
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
aria-modal
|
||||
aria-role="dialog">
|
||||
<div class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_insert_url') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<b-input v-model="urlLink"/>
|
||||
|
||||
<div class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-cancel-url-link-selection"
|
||||
class="button is-outlined"
|
||||
type="button"
|
||||
@click="cancelURLSelection()">
|
||||
{{ $i18n.get('cancel') }}</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-submit-url-link-selection"
|
||||
@click.prevent="confirmURLSelection()"
|
||||
class="button is-success">
|
||||
{{ $i18n.get('save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<!-- Thumbnail -------------------------------- -->
|
||||
<div class="section-label">
|
||||
<label>{{ $i18n.get('label_thumbnail') }}</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', '_thumbnail_id')"
|
||||
:message="$i18n.getHelperMessage('items', '_thumbnail_id')"/>
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-if="!isLoading"
|
||||
class="section-box section-thumbnail">
|
||||
<div class="thumbnail-field">
|
||||
<file-item
|
||||
v-if="item.thumbnail != undefined && ((item.thumbnail['tainacan-medium'] != undefined && item.thumbnail['tainacan-medium'] != false) || (item.thumbnail.medium != undefined && item.thumbnail.medium != false))"
|
||||
:show-name="false"
|
||||
:modal-on-click="false"
|
||||
:size="178"
|
||||
:file="{
|
||||
media_type: 'image',
|
||||
thumbnails: { 'tainacan-medium': [ item.thumbnail['tainacan-medium'] ? item.thumbnail['tainacan-medium'][0] : item.thumbnail.medium[0] ] },
|
||||
title: $i18n.get('label_thumbnail'),
|
||||
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + item.thumbnail.full[0] + `'/>`
|
||||
}"/>
|
||||
<figure
|
||||
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail['tainacan-medium'] == undefined || item.thumbnail['tainacan-medium'] == false))"
|
||||
class="image">
|
||||
<span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
|
||||
<img
|
||||
:alt="$i18n.get('label_thumbnail')"
|
||||
:src="thumbPlaceholderPath">
|
||||
</figure>
|
||||
<div class="thumbnail-buttons-row">
|
||||
<div class="document-buttons-row">
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
id="button-edit-thumbnail"
|
||||
:aria-label="$i18n.get('label_button_edit_thumb')"
|
||||
@click.prevent="thumbnailMediaFrame.openFrame($event)">
|
||||
size="is-small"
|
||||
id="button-edit-document"
|
||||
:aria-label="$i18n.get('label_button_edit_document')"
|
||||
@click.prevent="setFileDocument($event)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
|
|
@ -338,36 +82,285 @@
|
|||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="item.thumbnail.thumbnail != undefined && item.thumbnail.thumbnail != false"
|
||||
id="button-delete-thumbnail"
|
||||
class="button is-rounded is-secondary"
|
||||
:aria-label="$i18n.get('label_button_delete_thumb')"
|
||||
@click="deleteThumbnail()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
size="is-small"
|
||||
id="button-delete-document"
|
||||
:aria-label="$i18n.get('label_button_delete_document')"
|
||||
@click.prevent="removeDocument()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="form.document_type == 'text'">
|
||||
<div v-html="item.document_as_html" />
|
||||
<div class="document-buttons-row">
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
:aria-label="$i18n.get('label_button_edit_document')"
|
||||
id="button-edit-document"
|
||||
@click.prevent="setTextDocument()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
size="is-small"
|
||||
:aria-label="$i18n.get('label_button_delete_document')"
|
||||
id="button-delete-document"
|
||||
@click.prevent="removeDocument()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="form.document_type == 'url'">
|
||||
<div v-html="item.document_as_html" />
|
||||
<div class="document-buttons-row">
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
size="is-small"
|
||||
:aria-label="$i18n.get('label_button_edit_document')"
|
||||
id="button-edit-document"
|
||||
@click.prevent="setURLDocument()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
size="is-small"
|
||||
:aria-label="$i18n.get('label_button_delete_document')"
|
||||
id="button-delete-document"
|
||||
@click.prevent="removeDocument()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hook for extra Form options -->
|
||||
<template
|
||||
v-if="formHooks != undefined &&
|
||||
formHooks['item'] != undefined &&
|
||||
formHooks['item']['end-left'] != undefined">
|
||||
<form
|
||||
id="form-item-end-left"
|
||||
class="form-hook-region"
|
||||
v-html="formHooks['item']['end-left'].join('')"/>
|
||||
</template>
|
||||
<ul v-else>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
@click.prevent="setFileDocument($event)">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-upload"/>
|
||||
</span>
|
||||
</button>
|
||||
<p>{{ $i18n.get('label_file') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
@click.prevent="setTextDocument()">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-text"/>
|
||||
</span>
|
||||
</button>
|
||||
<p>{{ $i18n.get('label_text') }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
@click.prevent="setURLDocument()">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-url"/>
|
||||
</span>
|
||||
</button>
|
||||
<p>{{ $i18n.get('label_url') }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Text Insert Modal ----------------- -->
|
||||
<b-modal
|
||||
:can-cancel="false"
|
||||
:active.sync="isTextModalActive"
|
||||
:width="640"
|
||||
scroll="keep"
|
||||
trap-focus
|
||||
aria-modal
|
||||
aria-role="dialog">
|
||||
<div class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_write_text') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<b-input
|
||||
type="textarea"
|
||||
v-model="textContent"/>
|
||||
|
||||
<div class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-cancel-text-content-writing"
|
||||
class="button is-outlined"
|
||||
type="button"
|
||||
@click="cancelTextWriting()">
|
||||
{{ $i18n.get('cancel') }}</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-submit-text-content-writing"
|
||||
type="submit"
|
||||
@click.prevent="confirmTextWriting()"
|
||||
class="button is-success">
|
||||
{{ $i18n.get('save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<!-- URL Insert Modal ----------------- -->
|
||||
<b-modal
|
||||
:can-cancel="false"
|
||||
:active.sync="isURLModalActive"
|
||||
:width="640"
|
||||
scroll="keep"
|
||||
trap-focus
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
aria-modal
|
||||
aria-role="dialog">
|
||||
<div class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_insert_url') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<b-input v-model="urlLink"/>
|
||||
|
||||
<div class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-cancel-url-link-selection"
|
||||
class="button is-outlined"
|
||||
type="button"
|
||||
@click="cancelURLSelection()">
|
||||
{{ $i18n.get('cancel') }}</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-submit-url-link-selection"
|
||||
@click.prevent="confirmURLSelection()"
|
||||
class="button is-success">
|
||||
{{ $i18n.get('save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<!-- Thumbnail -------------------------------- -->
|
||||
<div class="section-label">
|
||||
<label>{{ $i18n.get('label_thumbnail') }}</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', '_thumbnail_id')"
|
||||
:message="$i18n.getHelperMessage('items', '_thumbnail_id')"/>
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-if="!isLoading"
|
||||
class="section-box section-thumbnail">
|
||||
<div class="thumbnail-field">
|
||||
<file-item
|
||||
v-if="item.thumbnail != undefined && ((item.thumbnail['tainacan-medium'] != undefined && item.thumbnail['tainacan-medium'] != false) || (item.thumbnail.medium != undefined && item.thumbnail.medium != false))"
|
||||
:show-name="false"
|
||||
:modal-on-click="false"
|
||||
:size="178"
|
||||
:file="{
|
||||
media_type: 'image',
|
||||
thumbnails: { 'tainacan-medium': [ item.thumbnail['tainacan-medium'] ? item.thumbnail['tainacan-medium'][0] : item.thumbnail.medium[0] ] },
|
||||
title: $i18n.get('label_thumbnail'),
|
||||
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + item.thumbnail.full[0] + `'/>`
|
||||
}"/>
|
||||
<figure
|
||||
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail['tainacan-medium'] == undefined || item.thumbnail['tainacan-medium'] == false))"
|
||||
class="image">
|
||||
<span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
|
||||
<img
|
||||
:alt="$i18n.get('label_thumbnail')"
|
||||
:src="thumbPlaceholderPath">
|
||||
</figure>
|
||||
<div class="thumbnail-buttons-row">
|
||||
<a
|
||||
class="button is-rounded is-secondary"
|
||||
id="button-edit-thumbnail"
|
||||
:aria-label="$i18n.get('label_button_edit_thumb')"
|
||||
@click.prevent="thumbnailMediaFrame.openFrame($event)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="item.thumbnail.thumbnail != undefined && item.thumbnail.thumbnail != false"
|
||||
id="button-delete-thumbnail"
|
||||
class="button is-rounded is-secondary"
|
||||
:aria-label="$i18n.get('label_button_delete_thumb')"
|
||||
@click="deleteThumbnail()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hook for extra Form options -->
|
||||
<template
|
||||
v-if="formHooks != undefined &&
|
||||
formHooks['item'] != undefined &&
|
||||
formHooks['item']['end-left'] != undefined">
|
||||
<form
|
||||
id="form-item-end-left"
|
||||
class="form-hook-region"
|
||||
v-html="formHooks['item']['end-left'].join('')"/>
|
||||
</template>
|
||||
</div>
|
||||
<div class="column is-7">
|
||||
|
||||
|
|
@ -935,13 +928,6 @@ export default {
|
|||
});
|
||||
this.cleanLastUpdated();
|
||||
},
|
||||
mounted() {
|
||||
// Watch Scroll
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs['item-edition-page-container'])
|
||||
this.$refs['item-edition-page-container'].addEventListener('scroll', this.handleScroll);
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
eventBusItemMetadata.$off('isUpdatingValue');
|
||||
eventBusItemMetadata.$off('hasErrorsOnForm');
|
||||
|
|
@ -1425,15 +1411,7 @@ export default {
|
|||
path: this.$routerHelper.getCollectionSequenceEditPath(this.collectionId, this.sequenceId, this.itemPosition - 1),
|
||||
query: { collapses: this.metadataCollapses }
|
||||
});
|
||||
},
|
||||
handleScroll: _.throttle((scrollEvent) => {
|
||||
if (!scrollEvent.target.classList.contains('hide-footer'))
|
||||
scrollEvent.target.classList.add('hide-footer');
|
||||
|
||||
setTimeout(() => {
|
||||
scrollEvent.target.classList.remove('hide-footer');
|
||||
}, 1000)
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1533,10 +1511,6 @@ export default {
|
|||
.b-tabs {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
&.hide-footer footer {
|
||||
bottom: -65px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-label {
|
||||
|
|
@ -1674,7 +1648,6 @@ export default {
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
transition: bottom 0.5s ease-in;
|
||||
|
||||
.form-submission-footer {
|
||||
.button {
|
||||
|
|
|
|||
|
|
@ -111,7 +111,6 @@
|
|||
<help-button
|
||||
:title="$i18n.getHelperTitle('metadata', 'display')"
|
||||
:message="$i18n.getHelperMessage('metadata', 'display')"/>
|
||||
|
||||
</label>
|
||||
|
||||
<b-field>
|
||||
|
|
|
|||
|
|
@ -436,7 +436,8 @@
|
|||
<!-- ITEMS LIST AREA (ASIDE THE ASIDE) ------------------------- -->
|
||||
<div
|
||||
id="items-list-area"
|
||||
class="items-list-area">
|
||||
class="items-list-area"
|
||||
@mousemove="handleMouseMoveOverList">
|
||||
|
||||
<!-- ADVANCED SEARCH -->
|
||||
<div
|
||||
|
|
@ -592,9 +593,11 @@
|
|||
</section>
|
||||
|
||||
<!-- Pagination -->
|
||||
<pagination
|
||||
:is-sorting-by-custom-metadata="isSortingByCustomMetadata"
|
||||
v-if="totalItems > 0 && (advancedSearchResults || !openAdvancedSearch)"/>
|
||||
<div ref="items-pagination">
|
||||
<pagination
|
||||
:is-sorting-by-custom-metadata="isSortingByCustomMetadata"
|
||||
v-if="totalItems > 0 && (advancedSearchResults || !openAdvancedSearch)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1195,6 +1198,30 @@
|
|||
}
|
||||
});
|
||||
}, 500),
|
||||
handleMouseMoveOverList: _.debounce( function($event) {
|
||||
|
||||
if (this.$refs['items-pagination']) {
|
||||
const bounding = this.$refs['items-pagination'].getBoundingClientRect();
|
||||
const isHidden = !(bounding.top >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight));
|
||||
|
||||
if (isHidden && ($event.screenY + 150 >= window.screen.height)) {
|
||||
if (!(this.$refs['items-pagination'].classList.contains('floating-pagination'))) {
|
||||
this.$refs['items-pagination'].classList.add('floating-pagination');
|
||||
if (this.$refs['items-pagination'].children[0]) {
|
||||
this.$refs['items-pagination'].children[0].style.setProperty('width', 'calc(' + this.$refs['items-pagination'].clientWidth + 'px + 0.75em)');
|
||||
this.$refs['items-pagination'].children[0].style.setProperty('margin-left', '0px');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$refs['items-pagination'].classList.remove('floating-pagination')
|
||||
if (this.$refs['items-pagination'].children[0]) {
|
||||
this.$refs['items-pagination'].children[0].style.removeProperty('width');
|
||||
this.$refs['items-pagination'].children[0].style.removeProperty('margin');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}, 1000),
|
||||
removeEventListeners() {
|
||||
// Component
|
||||
this.$off();
|
||||
|
|
@ -1575,7 +1602,26 @@
|
|||
margin-right: var(--tainacan-one-column);
|
||||
}
|
||||
|
||||
.floating-pagination {
|
||||
min-height: 42px;
|
||||
|
||||
.pagination-area {
|
||||
opacity: 0.75;
|
||||
background: var(--tainacan-background-color);
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
padding-left: calc(var(--tainacan-one-column) + 0.75em);
|
||||
padding-right: calc(var(--tainacan-one-column) + 0.75em);
|
||||
padding-bottom: 6px;
|
||||
bottom: -12px;
|
||||
animation: appear-from-bottom 0.2s;
|
||||
transition: bottom 0.3s, opacity 0.3s, position 0.3s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<b-loading
|
||||
:active.sync="isLoading"
|
||||
:can-cancel="false"/>
|
||||
|
|
@ -266,7 +265,7 @@
|
|||
</b-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<footer class="footer">
|
||||
<div class="form-submission-footer">
|
||||
<router-link
|
||||
v-if="item.current_user_can_edit && $route.query.recent == true"
|
||||
|
|
@ -307,7 +306,7 @@
|
|||
<span>{{ $i18n.get('label_item_page_on_website') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -290,6 +290,14 @@ $modal-z: 9999999;
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes appear-from-bottom {
|
||||
from {
|
||||
bottom: -48px;
|
||||
}
|
||||
to {
|
||||
bottom: -12px;
|
||||
}
|
||||
}
|
||||
@keyframes expand {
|
||||
from {
|
||||
max-height: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue