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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -340,23 +340,6 @@
</div> </div>
</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 --> <!-- Hook for extra Form options -->
<template <template
v-if="formHooks != undefined && v-if="formHooks != undefined &&
@ -382,50 +365,88 @@
v-html="formHooks['item']['begin-right'].join('')"/> v-html="formHooks['item']['begin-right'].join('')"/>
</template> </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"> <b-tabs v-model="activeTab">
<!-- Metadata from Collection-------------------------------- --> <!-- Metadata from Collection-------------------------------- -->
@ -436,10 +457,7 @@
</span> </span>
<span>{{ $i18n.get('metadata') }}</span> <span>{{ $i18n.get('metadata') }}</span>
</template> </template>
<span class="section-label">
<label>{{ $i18n.get('metadata') }}</label>
</span>
<br>
<a <a
class="collapse-all" class="collapse-all"
@click="toggleCollapseAll()"> @click="toggleCollapseAll()">
@ -484,9 +502,7 @@
</span> </span>
</span> </span>
</template> </template>
<div class="section-label">
<label>{{ $i18n.get('label_attachments') }}</label>
</div>
<div class="section-box section-attachments"> <div class="section-box section-attachments">
<button <button
type="button" type="button"
@ -663,7 +679,7 @@
v-if="!isOnSequenceEdit || (group != null && group.items_count != undefined && group.items_count == itemPosition)" v-if="!isOnSequenceEdit || (group != null && group.items_count != undefined && group.items_count == itemPosition)"
@click="onSubmit('draft')" @click="onSubmit('draft')"
type="button" 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 <button
v-else v-else
@click="onSubmit('draft', 'next')" @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 { .column.is-5 {
padding-left: $page-side-padding; padding-left: $page-side-padding;
padding-right: $page-side-padding; padding-right: $page-side-padding;
@ -1401,6 +1422,10 @@ export default {
padding-left: 0; padding-left: 0;
padding-right: $page-side-padding; padding-right: $page-side-padding;
.columns .column {
padding: 1rem $page-side-padding 0 24px;
}
.field { .field {
padding: 10px 0px 14px 60px; padding: 10px 0px 14px 60px;
} }
@ -1433,11 +1458,10 @@ export default {
} }
.section-box { .section-box {
background-color: white; background-color: white;
padding: 26px; padding: 0 $page-side-padding 0 0;
margin-top: 16px; margin-top: 14px;
margin-bottom: 38px; margin-bottom: 32px;
ul { ul {
display: flex; display: flex;
@ -1461,10 +1485,17 @@ export default {
} }
} }
} }
.section-status{ .section-status {
padding: 16px 0; padding-bottom: 16px;
.field .b-radio { font-size: 0.75rem;
margin-right: 24px;
.field {
padding: 10px 0 14px 0px !important;
.b-radio {
margin-right: 24px;
margin-left: 0;
}
.icon { .icon {
font-size: 18px !important; font-size: 18px !important;
color: $gray3; color: $gray3;

237
src/admin/pages/singles/item-page.vue
View File

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

10
src/admin/scss/_tabs.scss
View File

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

6
src/admin/tainacan-admin-i18n.php
View File

@ -225,7 +225,8 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_empty_header_image' => __( 'Empty Header Image', 'tainacan' ), 'label_empty_header_image' => __( 'Empty Header Image', 'tainacan' ),
'label_enable_cover_page' => __( 'Enable Cover Page', 'tainacan' ), 'label_enable_cover_page' => __( 'Enable Cover Page', 'tainacan' ),
'label_cover_page' => __( '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_default_displayed_metadata' => __( 'Default Displayed Metadata', 'tainacan' ),
'label_display' => __( 'Display on Listing', 'tainacan' ), 'label_display' => __( 'Display on Listing', 'tainacan' ),
'label_display_default' => __( 'Display by default', '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_number_of_copies' => __( 'Number of copies', 'tainacan' ),
'label_return_to_list' => __( 'Return to list', 'tainacan' ), 'label_return_to_list' => __( 'Return to list', 'tainacan' ),
'label_expose_only_displayed_metadata' => __( 'Expose only displayed metadata', '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 // Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ), 'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
'instruction_delete_selected_items' => __( 'Delete selected items', 'tainacan' ), 'instruction_delete_selected_items' => __( 'Delete selected items', 'tainacan' ),