tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/184' of github.com:tainacan/tainacan into feature/184

This commit is contained in:
vnmedeiros 2022-07-18 08:30:24 -03:00
parent bbc18797cf 34dadf8c1f
commit a500f57bbd
11 changed files with 1251 additions and 882 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/views/admin/components/edition/collection-edition-form.vue
View File

@ -430,63 +430,61 @@
</div>
<!-- Thumbnail -------------------------------- -->
<b-field :addons="false">
<div class="thumbnail-field">
<file-item
v-if="collection.thumbnail != undefined && ((collection.thumbnail['tainacan-medium'] != undefined && collection.thumbnail['tainacan-medium'] != false) || (collection.thumbnail.medium != undefined && collection.thumbnail.medium != false))"
:show-name="false"
:modal-on-click="true"
:size="146"
:file="{
media_type: 'image',
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium') ] },
title: $i18n.get('label_thumbnail'),
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(collection['thumbnail'], 'full') + `'/>`
}"/>
<figure
v-if="collection.thumbnail == undefined || ((collection.thumbnail.medium == undefined || collection.thumbnail.medium == false) && (collection.thumbnail['tainacan-medium'] == undefined || collection.thumbnail['tainacan-medium'] == false))"
class="image">
<span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
<img
:alt="$i18n.get('label_thumbnail')"
:src="$thumbHelper.getEmptyThumbnailPlaceholder()">
</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',
popperClass: ['tainacan-tooltip', 'tooltip']
}"
class="icon">
<i class="tainacan-icon tainacan-icon-edit"/>
</span>
</a>
<a
class="button is-rounded is-secondary"
id="button-delete-header-image"
:aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteThumbnail()">
<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 class="thumbnail-field">
<file-item
v-if="collection.thumbnail != undefined && ((collection.thumbnail['tainacan-medium'] != undefined && collection.thumbnail['tainacan-medium'] != false) || (collection.thumbnail.medium != undefined && collection.thumbnail.medium != false))"
:show-name="false"
:modal-on-click="true"
:size="146"
:file="{
media_type: 'image',
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium') ] },
title: $i18n.get('label_thumbnail'),
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(collection['thumbnail'], 'full') + `'/>`
}"/>
<figure
v-if="collection.thumbnail == undefined || ((collection.thumbnail.medium == undefined || collection.thumbnail.medium == false) && (collection.thumbnail['tainacan-medium'] == undefined || collection.thumbnail['tainacan-medium'] == false))"
class="image">
<span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
<img
:alt="$i18n.get('label_thumbnail')"
:src="$thumbHelper.getEmptyThumbnailPlaceholder()">
</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',
popperClass: ['tainacan-tooltip', 'tooltip']
}"
class="icon">
<i class="tainacan-icon tainacan-icon-edit"/>
</span>
</a>
<a
class="button is-rounded is-secondary"
id="button-delete-header-image"
:aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteThumbnail()">
<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>
</b-field>
</div>
</b-field>
<!-- Cover Page -------------------------------- -->
@ -1345,16 +1343,17 @@ export default {
position: relative;
}
&+.field {
&+.thumbnail-field {
opacity: 1.0;
transition: opacity 0.2s ease;
}
&:hover+.field {
opacity: 0.4;
&:hover+.thumbnail-field {
opacity: 0.3;
}
}
.thumbnail-field {
.thumbnail-field {
display: inline-block;
padding: 1rem;
margin-top: -120px;
margin-bottom: -30px;
@ -1422,15 +1421,14 @@ export default {
.label {
font-weight: normal;
margin-bottom: 0;
.help {
opacity: 0.7;
}
}
.control.is-expanded {
width: 100%;
}
}
.sorting-options+.help {
opacity: 0.7;
}
.status-radios {
display: flex;

69
src/views/admin/components/edition/item-attachments-edition-form.vue Normal file
View File

@ -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') }}&nbsp;
<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="($event) => $emit('openAttachmentsMediaFrame', $event)"
: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 !important;
padding-right: 0 !important;
}
</style>

190
src/views/admin/components/edition/item-document-edition-form.vue Normal file
View File

@ -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>

1452
src/views/admin/components/edition/item-edition-form.vue
View File

File diff suppressed because it is too large Load Diff

159
src/views/admin/components/edition/item-thumbnail-edition-form.vue Normal file
View File

@ -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="($event) => $emit('openThumbnailMediaFrame', $event)">
<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-left: 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>

33
src/views/admin/components/lists/attachments-list.vue
View File

@ -192,18 +192,12 @@
<style lang="scss" scoped>
@media screen and (max-width: 769px) {
.table-container {
padding-left: 1em;
padding-right: 1em;
}
.pagination-area {
margin-left: 0;
margin-right: 0;
}
.table-container {
width: 100%;
}
.uploaded-files {
display: block;
display: flex;
flex-wrap: wrap;
.file-item-container {
display: inline-block;
@ -235,4 +229,23 @@
}
}
}
@media screen and (max-width: 769px) {
.table-container {
padding-left: 1em;
padding-right: 1em;
}
.pagination-area {
margin-left: 0;
margin-right: 0;
justify-content: center;
}
.uploaded-files {
justify-content: center;
.file-item-container {
margin: 5px 7px;
}
}
}
</style>

37
src/views/admin/components/metadata-types/tainacan-form-item.vue
View File

@ -374,13 +374,14 @@
border-bottom: none;
padding: 10px !important;
.collapse-handle {
margin-left: -15px;
}
.child-metadata-inputs {
margin-left: 0.25em;
}
@media screen and (min-width: 770px) {
.collapse-handle {
margin-left: -15px;
}
}
}
.label {
@ -406,6 +407,10 @@
cursor: pointer;
margin-left: -42px;
line-height: 1.5em;
.tainacan-help-tooltip-trigger {
margin-right: auto;
}
}
.collapse-handle+div {
margin-top: 0.5em;
@ -413,5 +418,29 @@
.add-link {
font-size: 0.75em;
}
@media screen and (max-width: 769px) {
.collapse-handle {
font-size: 1em;
margin-left: 0;
margin-right: 22px;
width: 100%;
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
.label {
margin-left: 2px;
margin-right: 0.5em;
}
.icon {
margin-left: auto;
order: 3;
width: 2em;
justify-content: flex-end;
}
}
}
}
</style>

6
src/views/admin/components/other/checkbox-radio-metadata-input.vue
View File

@ -912,7 +912,8 @@
display: flex;
justify-content: space-between;
align-items: stretch;
padding: 2px 0;
margin-left: 0px !important;
padding: 2px 0 !important;
-webkit-break-inside: avoid;
break-inside: avoid;
@ -1127,7 +1128,8 @@
}
.tainacan-checkbox-search-section {
margin-bottom: 0;
margin: 0px !important;
padding: 0px !important;
.control {
margin: 0;

10
src/views/admin/js/admin-utilities.js
View File

@ -530,7 +530,11 @@ AdminOptionsHelperPlugin.install = function (Vue, options = {}) {
hideItemsListPageTitle: true,
hideItemEditionPageTitle: true,
hideBulkEditionPageTitle: true,
hideItemSingleCollectionName: true
hideItemSingleCollectionName: true,
hideItemEditionCollapses: true,
hideItemEditionMetadataTypes: true,
itemEditionDocumentInsideTabs: true,
itemEditionAttachmentsInsideTabs: true,
}
}
for (let adminSpecialMode in adminSpecialModes) {
@ -622,7 +626,11 @@ AdminOptionsHelperPlugin.install = function (Vue, options = {}) {
* hideItemEditionDocumentUrlInput
* hideItemEditionThumbnail
* hideItemEditionAttachments
* hideItemEditionCollapses
* hideItemEditionMetadataTypes
* allowItemEditionModalInsideModal // Not recommended!
* itemEditionDocumentInsideTabs
* itemEditionAttachmentInsideTabs
* hideBulkEditionPageTitle

43
src/views/admin/scss/_animations.scss
View File

@ -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 {

8
src/views/tainacan-i18n.php
View File

@ -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' ),