New design proposal for visualization and edition page of item.

This commit is contained in:
Mateus Machado Luna 2019-08-02 16:04:35 -03:00
parent 42351d4962
commit 46744ec1ad
5 changed files with 229 additions and 209 deletions

View File

@ -258,7 +258,7 @@
<!-- Comment Status ------------------------ -->
<b-field
:addons="false"
:label="$i18n.get('label_comment_status')">
:label="$i18n.get('label_allow_comments')">
<b-switch
id="tainacan-checkbox-comment-status"
size="is-small"

View File

@ -340,23 +340,6 @@
</div>
</div>
<!-- Comment Status ------------------------ -->
<b-field
:addons="false"
v-if="collectionAllowComments == 'open'">
<label class="label">{{ $i18n.get('label_comment_status') }}</label>
<b-switch
id="tainacan-checkbox-comment-status"
size="is-small"
true-value="open"
false-value="closed"
v-model="form.comment_status" />
<help-button
:title="$i18n.getHelperTitle('items', 'comment_status')"
:message="$i18n.getHelperMessage('items', 'comment_status')"/>
</b-field>
<br>
<!-- Hook for extra Form options -->
<template
v-if="formHooks != undefined &&
@ -382,50 +365,88 @@
v-html="formHooks['item']['begin-right'].join('')"/>
</template>
<div class="columns">
<!-- Collection -------------------------------- -->
<div class="column is-narrow">
<div class="section-label">
<label>{{ $i18n.get('collection') }}</label>
</div>
<div class="section-status">
<div class="field has-addons">
<span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-collection"/>
</span>
{{ collectionName }}
</span>
</div>
</div>
</div>
<!-- Visibility (status public or private) -------------------------------- -->
<div
style="flex-wrap: wrap"
class="column is-narrow">
<div class="section-label">
<label>{{ $i18n.get('label_visibility') }}</label>
<span class="required-metadatum-asterisk">*</span>
<help-button
:title="$i18n.get('label_visibility')"
:message="$i18n.get('info_visibility_helper')"/>
</div>
<div class="section-status">
<div
style="display: flex; flex-direction: column;"
class="field has-addons">
<b-radio
v-model="visibility"
value="publish"
native-value="publish">
<span class="icon">
<i class="tainacan-icon tainacan-icon-public"/>
</span>
{{ $i18n.get('publish_visibility') }}
</b-radio>
<b-radio
v-model="visibility"
value="private"
native-value="private">
<span class="icon">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
{{ $i18n.get('private_visibility') }}
</b-radio>
</div>
</div>
</div>
<!-- Comment Status ------------------------ -->
<div
class="column is-narrow"
v-if="collectionAllowComments == 'open'">
<div class="section-label">
<label>{{ $i18n.get('label_comments') }}</label>
<help-button
:title="$i18n.getHelperTitle('items', 'comment_status')"
:message="$i18n.getHelperMessage('items', 'comment_status')"/>
</div>
<div class="section-status">
<div class="field has-addons">
<b-switch
id="tainacan-checkbox-comment-status"
size="is-small"
true-value="open"
false-value="closed"
v-model="form.comment_status">
{{ $i18n.get('label_allow_comments') }}
</b-switch>
</div>
</div>
</div>
</div>
<!-- Visibility (status public or private) -------------------------------- -->
<div class="section-label">
<label>{{ $i18n.get('label_visibility') }}</label>
<span class="required-metadatum-asterisk">*</span>
<help-button
:title="$i18n.get('label_visibility')"
:message="$i18n.get('info_visibility_helper')"/>
</div>
<div class="section-status">
<div class="field has-addons">
<b-radio
v-model="visibility"
value="publish"
native-value="publish">
<span class="icon">
<i class="tainacan-icon tainacan-icon-public"/>
</span>
{{ $i18n.get('publish_visibility') }}
</b-radio>
<b-radio
v-model="visibility"
value="private"
native-value="private">
<span class="icon">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
{{ $i18n.get('private_visibility') }}
</b-radio>
</div>
</div>
<!-- Collection -------------------------------- -->
<div class="section-label">
<label>{{ $i18n.get('collection') }}</label>
</div>
<div class="section-collection">
<div class="field has-addons">
<p>
{{ collectionName }}
</p>
</div>
</div>
<b-tabs v-model="activeTab">
<!-- Metadata from Collection-------------------------------- -->
@ -436,10 +457,7 @@
</span>
<span>{{ $i18n.get('metadata') }}</span>
</template>
<span class="section-label">
<label>{{ $i18n.get('metadata') }}</label>
</span>
<br>
<a
class="collapse-all"
@click="toggleCollapseAll()">
@ -484,9 +502,7 @@
</span>
</span>
</template>
<div class="section-label">
<label>{{ $i18n.get('label_attachments') }}</label>
</div>
<div class="section-box section-attachments">
<button
type="button"
@ -663,7 +679,7 @@
v-if="!isOnSequenceEdit || (group != null && group.items_count != undefined && group.items_count == itemPosition)"
@click="onSubmit('draft')"
type="button"
class="button is-secondary">{{ $i18n.get('label_return_to_draft') }}</button>
class="button is-secondary">{{ isOnSequenceEdit ? $i18n.get('label_save_as_draft') : $i18n.get('label_return_to_draft') }}</button>
<button
v-else
@click="onSubmit('draft', 'next')"
@ -1389,6 +1405,11 @@ export default {
}
}
.tainacan-form > .columns {
margin-left: $page-side-padding;
margin-right: $page-side-padding;
}
.column.is-5 {
padding-left: $page-side-padding;
padding-right: $page-side-padding;
@ -1401,6 +1422,10 @@ export default {
padding-left: 0;
padding-right: $page-side-padding;
.columns .column {
padding: 1rem $page-side-padding 0 24px;
}
.field {
padding: 10px 0px 14px 60px;
}
@ -1433,11 +1458,10 @@ export default {
}
.section-box {
background-color: white;
padding: 26px;
margin-top: 16px;
margin-bottom: 38px;
padding: 0 $page-side-padding 0 0;
margin-top: 14px;
margin-bottom: 32px;
ul {
display: flex;
@ -1461,10 +1485,17 @@ export default {
}
}
}
.section-status{
padding: 16px 0;
.field .b-radio {
margin-right: 24px;
.section-status {
padding-bottom: 16px;
font-size: 0.75rem;
.field {
padding: 10px 0 14px 0px !important;
.b-radio {
margin-right: 24px;
margin-left: 0;
}
.icon {
font-size: 18px !important;
color: $gray3;

View File

@ -92,22 +92,7 @@
:src="thumbPlaceholderPath">
</figure>
</div>
</div>
<!-- Comment Status ------------------------ -->
<b-field
:addons="true"
:label="$i18n.get('label_comment_status') + ': '"
v-if="collectionAllowComments == 'open'">
<!-- <b-switch
id="tainacan-checkbox-comment-status"
size="is-small"
true-value="open"
false-value="closed"
v-model="item.comment_status"
disabled/> -->
<span style="font-size: 0.875rem; top: -0.15rem; position: relative;">{{ item.comment_status == 'open' ? $i18n.get('label_yes') : $i18n.get('label_no') }}</span>
</b-field>
</div>
<!-- Hook for extra Form options -->
<template
@ -134,9 +119,30 @@
v-html="formHooks['view-item']['begin-right'].join('')"/>
</template>
<div class="columns">
<div class="column">
<!-- Visibility (status public or private) -------------------------------- -->
<div
style="flex-wrap: wrap"
class="columns">
<!-- Collection -------------------------------- -->
<div class="column is-narrow">
<div class="section-label">
<label>{{ $i18n.get('collection') }}</label>
</div>
<div class="section-status">
<div class="field has-addons">
<span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-collection"/>
</span>
{{ collectionName }}
</span>
</div>
</div>
</div>
<!-- Visibility (status public or private) -------------------------------- -->
<div class="column is-narrow">
<div class="section-label">
<label>{{ $i18n.get('label_visibility') }}</label>
</div>
@ -155,39 +161,32 @@
</div>
</div>
</div>
<div class="column">
<!-- Collection -------------------------------- -->
<!-- Comment Status ------------------------ -->
<div
v-if="collectionAllowComments == 'open'"
class="column is-narrow">
<div class="section-label">
<label>{{ $i18n.get('collection') }}</label>
<label>{{ $i18n.get('label_comments') }}</label>
</div>
<div class="section-status">
<div class="field has-addons">
<span>
{{ collectionName }}
<span
v-if="item.comment_status != 'open'"
class="icon">
<i class="tainacan-icon tainacan-icon-close"/>
</span>
<span
v-if="item.comment_status == 'open'"
class="icon">
<i class="tainacan-icon tainacan-icon-approved"/>
</span>
{{ item.comment_status == 'open' ? $i18n.get('label_allowed') : $i18n.get('label_not_allowed') }}
</span>
</div>
</div>
</div>
<div class="column">
<!-- Exposers -------------------------------- -->
<div class="section-label">
<label>{{ $i18n.get('label_exposer_urls') }}</label>
</div>
<div class="section-status">
<button
class="button is-white"
:aria-label="$i18n.get('label_urls')"
:disabled="isLoading"
@click="openExposersModal()">
<span
style="padding: 0 8px;"
class="gray-icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-url"/>
</span>
<span class="is-hidden-touch">{{ $i18n.get('label_urls') }}</span>
</button>
</div>
</div>
</div>
<b-tabs v-model="activeTab">
@ -200,46 +199,17 @@
</template>
<!-- Metadata -------------------------------- -->
<div class="section-label">
<label>{{ $i18n.get('metadata') }}</label>
</div>
<br>
<a
class="collapse-all"
@click="open = !open">
{{ open ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowdown' : open, 'tainacan-icon-arrowright' : !open }"
class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
</span>
</a>
<div class="metadata-area">
<div
v-for="(metadatum, index) of metadatumList"
:key="index"
class="field">
<b-collapse
:aria-id="'metadatum-collapse-' + metadatum.id"
animation="filter-item"
:open="open">
<label
class="label"
slot="trigger"
slot-scope="props">
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowdown' : props.open, 'tainacan-icon-arrowright' : !props.open }"
class="has-text-secondary tainacan-icon tainacan-icon-20px"/>
</span>
{{ metadatum.metadatum.name }}
</label>
<div
:class="{ 'metadata-type-textarea': metadatum.metadatum.metadata_type_object.component == 'tainacan-textarea' }"
class="content">
<p v-html="metadatum.value_as_html != '' ? metadatum.value_as_html : `<span class='has-text-gray is-italic'>` + $i18n.get('label_value_not_informed') + `</span>`"/>
</div>
</b-collapse>
<label class="label">{{ metadatum.metadatum.name }}</label>
<div
:class="{ 'metadata-type-textarea': metadatum.metadatum.metadata_type_object.component == 'tainacan-textarea' }"
class="content">
<p v-html="metadatum.value_as_html != '' ? metadatum.value_as_html : `<span class='has-text-gray is-italic'>` + $i18n.get('label_value_not_informed') + `</span>`"/>
</div>
</div>
</div>
@ -270,10 +240,6 @@
</span>
</template>
<div class="section-label">
<label>{{ $i18n.get('label_attachments') }}</label>
</div>
<br>
<div class="section-box section-attachments">
<div class="uploaded-files">
<file-item
@ -298,10 +264,6 @@
<span>{{ $i18n.get('activities') }}</span>
</template>
<div class="section-label">
<label>{{ $i18n.get('activities') }}</label>
</div>
<br>
<activities-page />
</b-tab-item>
</b-tabs>
@ -314,19 +276,38 @@
class="button is-secondary"
style="margin-right: auto;"
:to="{ path: $routerHelper.getNewItemPath(collectionId)}">
{{ $i18n.get('label_create_another_item') }}
<!-- <span class="icon is-large">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-add"/>
</span> -->
<span>{{ $i18n.get('label_create_another_item') }}</span>
</router-link>
<router-link
v-if="item.current_user_can_edit"
class="button is-secondary"
class="button sequence-button"
:to="{ path: $routerHelper.getItemEditPath(collectionId, itemId)}">
{{ $i18n.getFrom('items','edit_item') }}
<span class="icon is-large">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-edit"/>
</span>
<span>{{ $i18n.getFrom('items','edit_item') }}</span>
</router-link>
<button
class="button sequence-button"
:aria-label="$i18n.get('label_urls')"
:disabled="isLoading"
@click="openExposersModal()">
<span class="icon is-large">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-url"/>
</span>
<span class="is-hidden-touch">{{ $i18n.get('label_urls') }}</span>
</button>
<a
target="_blank"
class="button is-success is-pulled-right"
class="button sequence-button is-pulled-right"
:href="item.url">
{{ $i18n.get('label_item_page_on_website') }}
<span class="icon is-large">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-see"/>
</span>
<span>{{ $i18n.get('label_item_page_on_website') }}</span>
</a>
</div>
</div>
@ -356,7 +337,6 @@
collectionId: Number,
itemId: Number,
isLoading: false,
isLoadingMetadatumMappers: false,
open: true,
collectionName: '',
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
@ -378,11 +358,6 @@
attachmentsList() {
return this.getAttachments().filter((attachment) => attachment.id != this.item.document);
},
metadatum_mappers: {
get() {
return this.getMetadatumMappers();
}
},
},
methods: {
...mapActions('item', [
@ -399,12 +374,6 @@
'getMetadata',
'getAttachments'
]),
...mapGetters('metadata', [
'getMetadatumMappers'
]),
...mapActions('metadata', [
'fetchMetadatumMappers',
]),
loadMetadata() {
// Obtains Item Metadatum
this.fetchMetadata(this.itemId).then(() => {
@ -433,15 +402,6 @@
// Puts loading on Item Loading
this.isLoading = true;
this.isLoadingMetadatumMappers = true;
this.fetchMetadatumMappers()
.then(() => {
this.isLoadingMetadatumMappers = false;
})
.catch(() => {
this.isLoadingMetadatumMappers = false;
});
// Obtains Item
this.fetchItem({
itemId: this.itemId,
@ -535,6 +495,8 @@
.tainacan-form > .columns {
margin-bottom: 70px;
margin-left: $page-side-padding;
margin-right: $page-side-padding;
}
.column.is-5 {
@ -549,8 +511,13 @@
padding-left: 0;
padding-right: $page-side-padding;
.field {
padding: 10px 0 14px 30px;
.columns .column {
padding: 1rem $page-side-padding 0 24px;
}
.field {
padding: 10px 0 14px 0px;
margin-left: -3px;
}
@media screen and (max-width: 769px) {
@ -558,12 +525,10 @@
width: 100%;
}
}
.collapse .collapse-content {
margin-left: 30px;
}
.b-tabs {
overflow: hidden !important;
margin-top: -15px;
}
}
@ -571,6 +536,7 @@
.field {
border-bottom: 1px solid $gray2;
padding: 10px 25px;
margin-left: 0px !important;
.label {
font-size: 14px;
@ -584,6 +550,16 @@
}
}
}
@media screen and (min-width: 1367px){
column-count: 2;
column-gap: $page-side-padding;
.field {
break-inside: avoid;
}
}
}
.section-label {
@ -596,22 +572,11 @@
}
}
.collapse-all {
font-size: 12px;
display: inline-flex;
align-items: center;
.icon {
vertical-align: bottom;
}
}
.section-box {
background-color: white;
padding: 26px;
margin-top: 16px;
margin-bottom: 38px;
padding: 0 $page-side-padding 0 0;
margin-top: 18px;
margin-bottom: 32px;
ul {
display: flex;
@ -713,6 +678,16 @@
margin-right: auto;
}
}
.sequence-button {
background-color: transparent;
color: $turquoise5;
border: none;
.icon {
margin-right: 5px !important;
}
}
}
</style>

View File

@ -6,6 +6,7 @@
a {
font-size: 0.8125rem;
color: black !important;
padding: 0.5rem 1.45rem;
border-bottom: 4px solid transparent;
transition: border-bottom-color ease 0.3s;
cursor: pointer !important;
@ -19,4 +20,13 @@
border-bottom-color: $turquoise5;
color: black !important;
}
.icon:first-child {
margin-right: 0.2rem;
margin-left: -3px;
}
}
.b-tabs {
.tab-content {
padding: 0.75rem 1.5rem;
}
}

View File

@ -225,7 +225,8 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_empty_header_image' => __( 'Empty Header Image', 'tainacan' ),
'label_enable_cover_page' => __( 'Enable Cover Page', 'tainacan' ),
'label_cover_page' => __( 'Cover Page', 'tainacan' ),
'label_comment_status' => __( 'Allow Comments', 'tainacan' ),
'label_allow_comments' => __( 'Allow comments', 'tainacan' ),
'label_comments' => __( 'Comments', 'tainacan' ),
'label_default_displayed_metadata' => __( 'Default Displayed Metadata', 'tainacan' ),
'label_display' => __( 'Display on Listing', 'tainacan' ),
'label_display_default' => __( 'Display by default', 'tainacan' ),
@ -426,6 +427,9 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_number_of_copies' => __( 'Number of copies', 'tainacan' ),
'label_return_to_list' => __( 'Return to list', 'tainacan' ),
'label_expose_only_displayed_metadata' => __( 'Expose only displayed metadata', 'tainacan' ),
'label_allowed' => __( 'Allowed', 'tainacan' ),
'label_not_allowed' => __( 'Not allowed', 'tainacan' ),
// Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
'instruction_delete_selected_items' => __( 'Delete selected items', 'tainacan' ),