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

More and more work towards new item edition page UI.

This commit is contained in:
mateuswetah 2022-03-24 16:08:01 -03:00
parent 1e7f35b015
commit 9135844c3b
6 changed files with 110 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/tainacanicons.css
View File

@ -151,6 +151,9 @@
.tainacan-icon-items:before { .tainacan-icon-items:before {
content: "items"; content: "items";
} }
.tainacan-icon-item:before {
content: "item";
}
.tainacan-icon-menu:before { .tainacan-icon-menu:before {
content: "menu"; content: "menu";
} }

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

@ -120,6 +120,7 @@
<div class="b-tabs"> <div class="b-tabs">
<nav <nav
v-if="tabs.length >= 2"
role="list" role="list"
ref="tainacanTabsSwiper" ref="tainacanTabsSwiper"
v-swiper:mySwiper="swiperOptions" v-swiper:mySwiper="swiperOptions"
@ -175,7 +176,25 @@
</button> </button>
</nav> </nav>
<section class="tab-content"> <section
:style="tabs.length < 2 ? 'border-top: none;' : ''"
class="tab-content">
<div
v-if="tabs.length < 2"
class="section-label">
<label>
<span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-metadata"/>
</span>
{{ $i18n.get('metadata') }}&nbsp;
<span
v-if="metadatumList.length"
class="has-text-gray has-text-weight-normal">
({{ metadatumList.length }})
</span>
</label>
</div>
<!-- Metadata from Collection-------------------------------- --> <!-- Metadata from Collection-------------------------------- -->
<div <div
@ -336,39 +355,6 @@
</div> </div>
<!-- Attachments ------------------------------------------ -->
<div
v-if="activeTab === 'attachments' && !$adminOptions.hideItemEditionAttachments"
class="tab-item"
role="tabpanel"
aria-labelledby="attachments-tab-label"
tabindex="0">
<div v-if="item != undefined && item.id != undefined">
<div class="attachments-list-heading">
<button
style="margin-left: calc(var(--tainacan-one-column) + 12px)"
type="button"
class="button is-secondary"
@click.prevent="attachmentMediaFrame.openFrame($event)"
:disabled="isLoadingAttachments">
{{ $i18n.get("label_edit_attachments") }}
</button>
<p>
{{ $i18n.get("info_edit_attachments") }}
</p>
</div>
<attachments-list
v-if="item != undefined && item.id != undefined"
:item="item"
:is-editable="true"
:is-loading.sync="isLoadingAttachments"
@isLoadingAttachments="(isLoading) => isLoadingAttachments = isLoading"
@onDeleteAttachment="deleteAttachment($event)"/>
</div>
</div>
</section> </section>
</div> </div>
</div> </div>
@ -391,7 +377,12 @@
<div <div
v-if="!$adminOptions.hideItemEditionDocument" v-if="!$adminOptions.hideItemEditionDocument"
class="section-label"> class="section-label">
<label>{{ form.document != undefined && form.document != null && form.document != '' ? $i18n.get('label_document') : $i18n.get('label_document_empty') }}</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 <help-button
:title="$i18n.getHelperTitle('items', 'document')" :title="$i18n.getHelperTitle('items', 'document')"
:message="$i18n.getHelperMessage('items', 'document')"/> :message="$i18n.getHelperMessage('items', 'document')"/>
@ -483,7 +474,12 @@
<div <div
v-if="!$adminOptions.hideItemEditionThumbnail" v-if="!$adminOptions.hideItemEditionThumbnail"
class="section-label"> class="section-label">
<label>{{ $i18n.get('label_thumbnail') }}</label> <label>
<span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-image"/>
</span>
{{ $i18n.get('label_thumbnail') }}
</label>
<help-button <help-button
:title="$i18n.getHelperTitle('items', '_thumbnail_id')" :title="$i18n.getHelperTitle('items', '_thumbnail_id')"
:message="$i18n.getHelperMessage('items', '_thumbnail_id')"/> :message="$i18n.getHelperMessage('items', '_thumbnail_id')"/>
@ -575,12 +571,25 @@
<div <div
v-if="!$adminOptions.hideItemEditionAttachments" v-if="!$adminOptions.hideItemEditionAttachments"
class="section-label"> class="section-label">
<label>{{ $i18n.get('label_attachments') }}</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">
({{ totalAttachments }})
</span>
</label>
</div> </div>
<div <div
v-if="item != undefined && item.id != undefined && !isLoading && !$adminOptions.hideItemEditionAttachments" v-if="item != undefined && item.id != undefined && !isLoading && !$adminOptions.hideItemEditionAttachments"
class="section-box section-attachments"> class="section-box section-attachments">
<div class="attachments-list-heading"> <div class="attachments-list-heading">
<p>
{{ $i18n.get("info_edit_attachments") }}
</p>
<button <button
style="margin-left: calc(var(--tainacan-one-column) + 12px)" style="margin-left: calc(var(--tainacan-one-column) + 12px)"
type="button" type="button"
@ -589,9 +598,6 @@
:disabled="isLoadingAttachments"> :disabled="isLoadingAttachments">
{{ $i18n.get("label_edit_attachments") }} {{ $i18n.get("label_edit_attachments") }}
</button> </button>
<p>
{{ $i18n.get("info_edit_attachments") }}
</p>
</div> </div>
<attachments-list <attachments-list
@ -1007,14 +1013,6 @@ export default {
total: this.totalRelatedItems total: this.totalRelatedItems
}); });
} }
if (!this.$adminOptions.hideItemEditionAttachments) {
pageTabs.push({
slug: 'attachments',
icon: 'attachments',
name: this.$i18n.get('label_attachments'),
total: this.totalAttachments
});
}
return pageTabs; return pageTabs;
}, },
isCurrentlyFocusedOnCompoundMetadatum() { isCurrentlyFocusedOnCompoundMetadatum() {
@ -2003,7 +2001,7 @@ export default {
position: sticky; position: sticky;
top: -25px; top: -25px;
margin: 3px 0; margin: 3px 0;
max-height: calc(100vh - 202px); max-height: calc(100vh - 185px);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
@ -2036,6 +2034,15 @@ export default {
} }
} }
@media screen and (max-width: 1440px) {
&>.column.is-7 {
padding-left: 0.75em;
}
&>.column.is-5 {
padding-right: 0.75em;
}
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
@ -2108,6 +2115,10 @@ export default {
line-height: 1.2em; line-height: 1.2em;
} }
} }
.section-box+.section-label {
border-top: 1px dashed var(--tainacan-info-color);
padding-top: 6px;
}
.sub-header { .sub-header {
display: flex; display: flex;
@ -2194,12 +2205,6 @@ export default {
} }
} }
.section-box {
padding: 0 var(--tainacan-one-column);
margin-top: 12px;
margin-bottom: 24px;
position: relative;
}
.section-status { .section-status {
padding-bottom: 16px; padding-bottom: 16px;
font-size: 0.875em; font-size: 0.875em;
@ -2270,10 +2275,17 @@ export default {
} }
} }
.section-box {
padding: 0 1em 0 1.875em;
margin-top: 10px;
margin-bottom: 16px;
position: relative;
}
.document-buttons-row, .document-buttons-row,
.thumbnail-buttons-row { .thumbnail-buttons-row {
bottom: -6px; bottom: -6px;
left: 6px; left: 0.875em;
position: absolute; position: absolute;
} }
@ -2303,13 +2315,13 @@ export default {
.document-field { .document-field {
.document-field-content { .document-field-content {
max-height: 26vh; max-height: 32vh;
/deep/ img, /deep/ img,
/deep/ video, /deep/ video,
/deep/ figure { /deep/ figure {
max-width: 100%; max-width: 100%;
max-height: 26vh; max-height: 32vh;
width: auto; width: auto;
margin: 0; margin: 0;
} }
@ -2321,11 +2333,26 @@ export default {
/deep/ iframe, /deep/ iframe,
/deep/ blockquote { /deep/ blockquote {
max-width: 100%; max-width: 100%;
max-height: 26vh; max-height: 32vh;
width: 100%; width: 100%;
margin: 0; margin: 0;
min-height: 150px; min-height: 150px;
} }
@media screen and (max-height: 770px) {
max-height: 25vh;
/deep/ img,
/deep/ video,
/deep/ figure {
max-height: 25vh;
}
/deep/ audio,
/deep/ iframe,
/deep/ blockquote {
max-height: 25vh;
}
}
} }
.document-field-placeholder { .document-field-placeholder {
@ -2399,11 +2426,18 @@ export default {
.attachments-list-heading { .attachments-list-heading {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 12px; justify-content: space-between;
margin-bottom: 24px; margin-left: 1.5em;
margin-top: 10px;
margin-bottom: var(--tainacan-container-padding);
p {
color: var(--tainacan-info-color);
}
button { button {
margin-right: 12px; margin-left: 12px;
}
@media screen and (max-width: 768px) {
flex-wrap: wrap;
} }
} }

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

@ -194,7 +194,7 @@
.file-item-container { .file-item-container {
display: inline-block; display: inline-block;
margin: 15px; margin: 10px 12px;
position: relative; position: relative;
&:hover .file-item-control { &:hover .file-item-control {
@ -206,7 +206,7 @@
.file-item-control { .file-item-control {
position: absolute; position: absolute;
background-color: var(--tainacan-gray1); background-color: var(--tainacan-gray1);
width: 112px; width: 94px;
margin: 6px 0; margin: 6px 0;
bottom: 0px; bottom: 0px;
padding: 2px 8px 4px 8px; padding: 2px 8px 4px 8px;

6
src/views/admin/components/other/file-item.vue
View File

@ -5,10 +5,10 @@
:class="{'shows-modal-on-click' : modalOnClick}" :class="{'shows-modal-on-click' : modalOnClick}"
@click="modalOnClick? isPreviewModalActive = true : null"> @click="modalOnClick? isPreviewModalActive = true : null">
<figcaption <figcaption
:style="{ 'max-width': size != undefined ? size + 'px' : '112px' }" :style="{ 'max-width': size != undefined ? size + 'px' : '94px' }"
v-if="showName && file.title != undefined">{{ file.title }}</figcaption> v-if="showName && file.title != undefined">{{ file.title }}</figcaption>
<div <div
:style="{ 'width': size != undefined ? size + 'px' : '112px', 'height': size != undefined ? size + 'px' : '112px' }" :style="{ 'width': size != undefined ? size + 'px' : '94px', 'height': size != undefined ? size + 'px' : '94px' }"
class="image-wrapper"> class="image-wrapper">
<div <div
v-if="file.media_type == 'image'" v-if="file.media_type == 'image'"
@ -76,7 +76,7 @@ export default {
name: 'FileItem', name: 'FileItem',
props: { props: {
file: Object, file: Object,
size: 112, size: 94,
showName: false, showName: false,
isSelected: false, isSelected: false,
modalOnClick: true modalOnClick: true

4
src/views/admin/scss/_custom_variables.scss
View File

@ -79,6 +79,10 @@
// Not really used in EVERY container, but a rather frequent value // Not really used in EVERY container, but a rather frequent value
--tainacan-container-padding: #{$container-padding}; --tainacan-container-padding: #{$container-padding};
@media screen and (max-height: 770px) {
--tainacan-container-padding: #{$container-narrow-padding};
}
} }
#tainacan-admin-app, #tainacan-admin-app,

1
src/views/admin/scss/_variables.scss
View File

@ -145,6 +145,7 @@ $page-height: calc(100vh - 5.5em);
// Overall Pages padding: // Overall Pages padding:
$one-column: 4.166666667%; $one-column: 4.166666667%;
$container-padding: 25px; $container-padding: 25px;
$container-narrow-padding: 18px;
// Links // Links
$link: $secondary; $link: $secondary;