Adds shortcuts to mobile app header/panel.
This commit is contained in:
mateuswetah
parent
3b6b9ebb57
commit
12a7823e93
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Attachments -------------------------------- -->
|
||||
<div
|
||||
v-if="!$adminOptions.hideItemEditionAttachments"
|
||||
class="section-label">
|
||||
<label>
|
||||
<span class="icon has-text-gray4">
|
||||
<i class="tainacan-icon tainacan-icon-attachments"/>
|
||||
</span>
|
||||
{{ $i18n.get('label_attachments') }}
|
||||
<span
|
||||
v-if="totalAttachments"
|
||||
class="has-text-gray has-text-weight-normal"
|
||||
style="font-size: 0.875em;">
|
||||
({{ totalAttachments }})
|
||||
</span>
|
||||
</label>
|
||||
<help-button
|
||||
:title="$i18n.get('label_attachments')"
|
||||
:message="$i18n.get('info_edit_attachments')"/>
|
||||
<button
|
||||
style="float: right; font-size: 0.875em; margin: 2px 5px;"
|
||||
type="button"
|
||||
class="link-style"
|
||||
@click.prevent="$emit('openAttachmentsMediaFrame')"
|
||||
:disabled="isLoading">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-edit"/>
|
||||
</span>
|
||||
{{ $i18n.get('label_add_or_update_attachments') }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="item != undefined && item.id != undefined && !isLoading && !$adminOptions.hideItemEditionAttachments"
|
||||
class="section-box section-attachments">
|
||||
|
||||
<attachments-list
|
||||
:item="item"
|
||||
:is-editable="true"
|
||||
:should-load-attachments="shouldLoadAttachments"
|
||||
@onDeleteAttachment="($event) => $emit('onDeleteAttachment', $event)"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AttachmentsList from '../lists/attachments-list.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AttachmentsList
|
||||
},
|
||||
props: {
|
||||
item: Object,
|
||||
form: Object,
|
||||
totalAttachments: Number,
|
||||
isLoading: Boolean,
|
||||
shouldLoadAttachments: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section-attachments {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-if="!$adminOptions.hideItemEditionDocument"
|
||||
class="section-label">
|
||||
<label>
|
||||
<span class="icon has-text-gray4">
|
||||
<i :class="'tainacan-icon tainacan-icon-' + ( (!form.document_type || form.document_type == 'empty' ) ? 'item' : (form.document_type == 'attachment' ? 'attachments' : form.document_type))"/>
|
||||
</span>
|
||||
{{ 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
|
||||
v-if="!$adminOptions.hideItemEditionDocument"
|
||||
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'"
|
||||
class="document-field-content">
|
||||
<div v-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="($event) => $emit('onSetDocument', $event, form.document_type)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'bottom',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
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="$emit('onRemoveDocument')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
v-else
|
||||
class="document-field-placeholder">
|
||||
<li v-if="!$adminOptions.hideItemEditionDocumentFileInput">
|
||||
<button
|
||||
type="button"
|
||||
@click.prevent="($event) => $emit('onSetFileDocument', $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 v-if="!$adminOptions.hideItemEditionDocumentTextInput">
|
||||
<button
|
||||
type="button"
|
||||
@click.prevent="$emit('onSetTextDocument')">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-text"/>
|
||||
</span>
|
||||
</button>
|
||||
<p>{{ $i18n.get('label_text') }}</p>
|
||||
</li>
|
||||
<li v-if="!$adminOptions.hideItemEditionDocumentUrlInput">
|
||||
<button
|
||||
type="button"
|
||||
@click.prevent="$emit('onSetURLDocument')">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: Object,
|
||||
form: Object
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.document-field {
|
||||
|
||||
.document-field-content {
|
||||
max-height: 32vh;
|
||||
|
||||
/deep/ img,
|
||||
/deep/ video,
|
||||
/deep/ figure {
|
||||
max-width: 100%;
|
||||
max-height: 32vh;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
/deep/ a {
|
||||
min-height: 60px;
|
||||
display: block;
|
||||
}
|
||||
/deep/ audio,
|
||||
/deep/ iframe,
|
||||
/deep/ blockquote {
|
||||
max-width: 100%;
|
||||
max-height: 32vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 760px) {
|
||||
max-height: 25vh;
|
||||
|
||||
/deep/ img,
|
||||
/deep/ video,
|
||||
/deep/ figure {
|
||||
max-height: 25vh;
|
||||
}
|
||||
/deep/ audio,
|
||||
/deep/ iframe,
|
||||
/deep/ blockquote {
|
||||
max-height: 25vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-field-placeholder {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
padding: 1.5rem 1rem 2rem 1rem;
|
||||
border: 1px solid var(--tainacan-input-border-color);
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
button {
|
||||
border-radius: 1px;
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
border: none;
|
||||
background-color: var(--tainacan-background-color);
|
||||
color: var(--tainacan-secondary);
|
||||
margin-bottom: 6px;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--tainacan-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: var(--tainacan-secondary);
|
||||
font-size: 0.8125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.document-buttons-row {
|
||||
bottom: -6px;
|
||||
left: 0.875em;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-if="!$adminOptions.hideItemEditionThumbnail"
|
||||
class="section-label">
|
||||
<label>
|
||||
<span class="icon has-text-gray4">
|
||||
<i class="tainacan-icon tainacan-icon-image"/>
|
||||
</span>
|
||||
{{ $i18n.get('label_thumbnail') }}
|
||||
</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', '_thumbnail_id')"
|
||||
:message="$i18n.getHelperMessage('items', '_thumbnail_id')"/>
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-if="!isLoading && !$adminOptions.hideItemEditionThumbnail"
|
||||
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="120"
|
||||
:file="{
|
||||
media_type: 'image',
|
||||
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_mimetype) ] },
|
||||
title: $i18n.get('label_thumbnail'),
|
||||
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(item['thumbnail'], 'full', item.document_mimetype) + `'/>`
|
||||
}"/>
|
||||
<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"
|
||||
v-if="item.document_type == 'empty' && item.document_mimetype == 'empty'">
|
||||
{{ $i18n.get('label_empty_thumbnail') }}
|
||||
</span>
|
||||
<img
|
||||
:alt="$i18n.get('label_thumbnail')"
|
||||
:src="$thumbHelper.getEmptyThumbnailPlaceholder(item.document_mimetype)">
|
||||
</figure>
|
||||
<b-field
|
||||
:addons="false"
|
||||
:label="$i18n.get('label_thumbnail_alt')">
|
||||
<help-button
|
||||
:title="$i18n.get('label_thumbnail_alt')"
|
||||
:message="$i18n.get('info_thumbnail_alt')"/>
|
||||
<textarea
|
||||
id="tainacan-text-description"
|
||||
class="textarea"
|
||||
rows="4"
|
||||
:value="form.thumbnail_alt"
|
||||
@input="$emit('onUpdateThumbnailAlt')" />
|
||||
</b-field>
|
||||
<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="$emit('openThumbnailMediaFrame')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'bottom',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="item.thumbnail && 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="$emit('onDeleteThumbnail')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileItem from '../other/file-item.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FileItem
|
||||
},
|
||||
props: {
|
||||
item: Object,
|
||||
form: Object
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section-thumbnaill {
|
||||
padding-right: 0;
|
||||
}
|
||||
.thumbnail-buttons-row {
|
||||
bottom: -6px;
|
||||
left: 0.875em;
|
||||
position: absolute;
|
||||
}
|
||||
.thumbnail-field {
|
||||
display: flex;
|
||||
|
||||
.field {
|
||||
margin-top: -1em;
|
||||
width: 100%;
|
||||
}
|
||||
.content {
|
||||
padding: 10px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
img {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
}
|
||||
.image-placeholder {
|
||||
position: absolute;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
text-align: center;
|
||||
color: var(--tainacan-info-color);
|
||||
top: 34px;
|
||||
max-width: 84px;
|
||||
}
|
||||
|
||||
.thumbnail-alt-input {
|
||||
.label {
|
||||
font-size: 0.875em;
|
||||
font-weight: 500;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0.15em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -355,6 +355,49 @@
|
|||
animation-timing-function: ease;
|
||||
}
|
||||
|
||||
|
||||
// Mobile panel
|
||||
@keyframes panel-from-top-in {
|
||||
from {
|
||||
opacity: 0.8;
|
||||
-ms-transform: translate(0%, -75%); /* IE 9 */
|
||||
-webkit-transform: translate(0%, -75%); /* Safari */
|
||||
transform: translate(0%, -75%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-ms-transform: translate(0, 0); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0); /* Safari */
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes panel-from-top-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-ms-transform: translate(0, 0); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0); /* Safari */
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0.8;
|
||||
-ms-transform: translate(0%, -80%); /* IE 9 */
|
||||
-webkit-transform: translate(0%, -80%); /* Safari */
|
||||
transform: translate(0%, -80%);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-from-top-enter-active {
|
||||
animation-name: panel-from-top-in;
|
||||
animation-duration: 0.3s;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
.panel-from-top-leave-active {
|
||||
animation-name: panel-from-top-out;
|
||||
animation-duration: 0.2s;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
// Slide
|
||||
@keyframes slide-left-in {
|
||||
from {
|
||||
|
|
|
|||
|
|
@ -635,6 +635,13 @@ return apply_filters( 'tainacan-i18n', [
|
|||
'label_move_down' => __( 'Move down', 'tainacan' ),
|
||||
'label_view_modes_public_list' => __( 'Items view modes in the public list', 'tainacan' ),
|
||||
'label_default' => __( 'Default', 'tainacan' ),
|
||||
'label_tainacan_mobile_panel' => __( 'Tainacan Mobile Panel', 'tainacan' ),
|
||||
'label_close_panel' => __( 'Close panel', 'tainacan' ),
|
||||
'label_shortcuts' => __( 'Shortcuts', 'tainacan' ),
|
||||
'label_all_metadata' => __( 'All metadata', 'tainacan' ),
|
||||
'label_document_and_thumbnail' => __( 'Document and thumbnail', 'tainacan' ),
|
||||
'label_all_attachments' => __( 'All attachments', 'tainacan' ),
|
||||
'label_only_required_metadata' => __( 'Only required metadata', 'tainacan' ),
|
||||
|
||||
// Instructions. More complex sentences to guide user and placeholders
|
||||
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
||||
|
|
@ -705,6 +712,7 @@ return apply_filters( 'tainacan-i18n', [
|
|||
'instruction_click_to_load_filter' => __( 'Click to load the filter', 'tainacan' ),
|
||||
'instruction_collection_description' => __( 'Enter the collection description here...', 'tainacan' ),
|
||||
'instruction_collection_name' => __( 'Enter the collection name here...', 'tainacan' ),
|
||||
'instruction_click_to_easily_see' => __( 'Click to easily see', 'tainacan' ),
|
||||
|
||||
// Info. Other feedback to user.
|
||||
'info_items_tab_all' => __( 'Every item, except by those sent to trash.', 'tainacan' ),
|
||||
|
|
|
|||
Loading…
Reference in New Issue