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

Updates on Collection Edition Form.

This commit is contained in:
Mateus Machado Luna 2018-08-21 14:45:16 -03:00
parent 65e7096826
commit 06f154c760
2 changed files with 70 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,15 +50,22 @@
<b-field :addons="false"> <b-field :addons="false">
<label class="label">{{ $i18n.get('label_thumbnail') }}</label> <label class="label">{{ $i18n.get('label_thumbnail') }}</label>
<div class="thumbnail-field"> <div class="thumbnail-field">
<file-item
<figure class="image"> v-if="collection.thumbnail != undefined && ((collection.thumbnail.tainacan_medium != undefined && collection.thumbnail.tainacan_medium != false) || (collection.thumbnail.medium != undefined && collection.thumbnail.medium != false))"
<span :show-name="false"
v-if="collection.thumbnail.thumb == undefined || collection.thumbnail.thumb == false" :size="178"
class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span> :file="{
media_type: 'image',
guid: { rendered: collection.thumbnail.tainacan_medium ? collection.thumbnail.tainacan_medium : collection.thumbnail.medium },
title: { rendered: $i18n.get('label_thumbnail')},
description: { rendered: `<img alt='Thumbnail' src='` + 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 <img
id="thumbail-image"
:alt="$i18n.get('label_thumbnail')" :alt="$i18n.get('label_thumbnail')"
:src="(collection.thumbnail.thumb == undefined || collection.thumbnail.thumb == false) ? thumbPlaceholderPath : collection.thumbnail.thumb"> :src="thumbPlaceholderPath">
</figure> </figure>
<div class="thumbnail-buttons-row"> <div class="thumbnail-buttons-row">
<a <a
@ -246,19 +253,20 @@
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'status')" :title="$i18n.getHelperTitle('collections', 'status')"
:message="$i18n.getHelperMessage('collections', 'status')"/> :message="$i18n.getHelperMessage('collections', 'status')"/>
<b-select <div class="status-radios">
expanded <b-radio
id="tainacan-select-status"
v-model="form.status" v-model="form.status"
@focus="clearErrors('status')"
:placeholder="$i18n.get('instruction_select_a_status')">
<option
v-for="statusOption in statusOptions" v-for="statusOption in statusOptions"
:key="statusOption.value" :key="statusOption.value"
:value="statusOption.value" :native-value="statusOption.value">
:disabled="statusOption.disabled">{{ statusOption.label }} <span class="icon has-text-gray">
</option> <i
</b-select> class="mdi mdi-18px"
:class="'mdi-' + getStatusIcon(statusOption.value)"/>
</span>
{{ statusOption.label }}
</b-radio>
</div>
</b-field> </b-field>
<!-- Name -------------------------------- --> <!-- Name -------------------------------- -->
@ -267,6 +275,7 @@
:label="$i18n.get('label_name')" :label="$i18n.get('label_name')"
:type="editFormErrors['name'] != undefined ? 'is-danger' : ''" :type="editFormErrors['name'] != undefined ? 'is-danger' : ''"
:message="editFormErrors['name'] != undefined ? editFormErrors['name'] : ''"> :message="editFormErrors['name'] != undefined ? editFormErrors['name'] : ''">
<span class="required-metadatum-asterisk">*</span>
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'name')" :title="$i18n.getHelperTitle('collections', 'name')"
:message="$i18n.getHelperMessage('collections', 'name')"/> :message="$i18n.getHelperMessage('collections', 'name')"/>
@ -408,6 +417,7 @@
<script> <script>
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import wpMediaFrames from '../../js/wp-media-frames'; import wpMediaFrames from '../../js/wp-media-frames';
import FileItem from '../other/file-item.vue';
import { wpAjax } from '../../js/mixins'; import { wpAjax } from '../../js/mixins';
export default { export default {
@ -474,6 +484,9 @@ export default {
isUpdatingSlug: false, isUpdatingSlug: false,
} }
}, },
components: {
FileItem
},
methods: { methods: {
...mapActions('collection', [ ...mapActions('collection', [
'sendCollection', 'sendCollection',
@ -733,6 +746,15 @@ export default {
} }
} }
); );
},
getStatusIcon(status) {
switch(status) {
case 'publish': return 'earth';
case 'private': return 'lock';
case 'draft': return 'clipboard-text';
case 'trash': return 'delete';
default: return 'file';
}
} }
}, },
created(){ created(){
@ -821,6 +843,9 @@ export default {
@import "../../scss/_variables.scss"; @import "../../scss/_variables.scss";
.column {
padding: 0;
}
.field { .field {
position: relative; position: relative;
@ -853,9 +878,7 @@ export default {
} }
} }
.header-field { .header-field {
img {
padding: 20px;
}
.image-placeholder { .image-placeholder {
position: absolute; position: absolute;
left: 30%; left: 30%;
@ -874,41 +897,39 @@ export default {
} }
.header-buttons-row { .header-buttons-row {
text-align: right; text-align: right;
top: -35px; top: -15px;
right: 20px;
position: relative; position: relative;
} }
} }
.thumbnail-field { .thumbnail-field {
max-height: 208px; // padding: 26px;
margin-bottom: 180px; // margin-top: 16px;
margin-top: -20px; // margin-bottom: 38px;
.content { .content {
padding: 10px; padding: 10px;
font-size: 0.8em; font-size: 0.8em;
} }
img { img {
border-radius: 100px;
position: absolute;
height: 178px; height: 178px;
width: 178px; width: 178px;
padding: 20px;
} }
.image-placeholder { .image-placeholder {
position: relative; position: absolute;
left: 40px; margin-left: 45px;
bottom: -100px; margin-right: 45px;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: bold; font-weight: bold;
z-index: 99; z-index: 99;
text-align: center; text-align: center;
color: $gray4; color: $gray4;
top: 70px;
max-width: 90px;
} }
.thumbnail-buttons-row { .thumbnail-buttons-row {
position: relative; position: relative;
left: 60px; left: 86px;
bottom: -142px; bottom: 20px;
} }
} }
.selected-cover-page { .selected-cover-page {
@ -932,6 +953,14 @@ export default {
.icon { color: $gray2; } .icon { color: $gray2; }
} }
} }
.status-radios {
display: flex;
.control-lable {
display: flex;
align-items: center;
}
}
.moderators-empty-list { .moderators-empty-list {
color: $gray4; color: $gray4;
font-size: 0.85rem; font-size: 0.85rem;

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

@ -210,16 +210,16 @@
<div class="section-box section-thumbnail"> <div class="section-box section-thumbnail">
<div class="thumbnail-field"> <div class="thumbnail-field">
<file-item <file-item
v-if="item.thumbnail.thumb != undefined && item.thumbnail.thumb != false" 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" :show-name="false"
:size="178" :size="178"
:file="{ :file="{
media_type: 'image', media_type: 'image',
guid: { rendered: item.thumbnail.thumb }, guid: { rendered: item.thumbnail.tainacan_medium ? item.thumbnail.tainacan_medium : item.thumbnail.medium },
title: { rendered: $i18n.get('label_thumbnail')}, title: { rendered: $i18n.get('label_thumbnail')},
description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full + `'/>` }}"/> description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full + `'/>` }}"/>
<figure <figure
v-if="item.thumbnail.thumb == undefined || item.thumbnail.thumb == false" 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"> class="image">
<span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span> <span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
<img <img
@ -249,6 +249,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Comment Status ------------------------ --> <!-- Comment Status ------------------------ -->
<b-field <b-field
:addons="false" :addons="false"
@ -264,6 +265,7 @@
:title="$i18n.getHelperTitle('items', 'comment_status')" :title="$i18n.getHelperTitle('items', 'comment_status')"
:message="$i18n.getHelperMessage('items', 'comment_status')"/> :message="$i18n.getHelperMessage('items', 'comment_status')"/>
</b-field> </b-field>
<!-- Attachments ------------------------------------------ --> <!-- Attachments ------------------------------------------ -->
<div class="section-label"> <div class="section-label">
<label>{{ $i18n.get('label_attachments') }}</label> <label>{{ $i18n.get('label_attachments') }}</label>
@ -323,40 +325,6 @@
</div> </div>
</div> </div>
<!-- Status -------------------------------- -->
<!--<div class="section-label">
<label>{{ $i18n.get('label_status') }}</label>
<span class="required-metadatum-asterisk">*</span>
<help-button
:title="$i18n.getHelperTitle('items', 'status')"
:message="$i18n.getHelperMessage('items', 'status')"/>
</div>
<div class="section-status">
<div class="field has-addons">
<b-select
v-model="form.status"
:placeholder="$i18n.get('instruction_select_a_status')">
<option
:id="`status-option-${statusOption.value}`"
v-for="statusOption in statusOptions"
:key="statusOption.value"
:value="statusOption.value"
:disabled="statusOption.disabled">{{ statusOption.label }}
</option>
</b-select>
<div class="control">
<button
type="button"
id="button-submit-item-creation"
@click.prevent="onSubmit"
class="button is-success">
{{ $i18n.get('save') }}
</button>
</div>
</div>
</div>-->
<!-- Collection -------------------------------- --> <!-- Collection -------------------------------- -->
<div class="section-label"> <div class="section-label">
<label>{{ $i18n.get('collection') }}</label> <label>{{ $i18n.get('collection') }}</label>