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

Uses wpMediaFrame on TermEditionForm. More updates on ItemEditionPage (adds collapses for fields).

This commit is contained in:
mateuswetah 2018-04-27 23:43:43 -03:00
parent 3cfccecdc7
commit 167b021a9d
8 changed files with 2584 additions and 2560 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4806
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@ -577,8 +577,8 @@ export default {
frame_title: this.$i18n.get('instruction_select_collection_header_image'), frame_title: this.$i18n.get('instruction_select_collection_header_image'),
}, },
relatedPostId: this.collectionId, relatedPostId: this.collectionId,
onSave: (mediaId) => { onSave: (media) => {
this.updateHeaderImage({collectionId: this.collectionId, headerImageId: mediaId}) this.updateHeaderImage({collectionId: this.collectionId, headerImageId: media.id})
.then((res) => { .then((res) => {
this.collection.header_image = res.header_image; this.collection.header_image = res.header_image;
}) })

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

@ -2,7 +2,7 @@
<div class="page-container"> <div class="page-container">
<div class="tainacan-page-title"> <div class="tainacan-page-title">
<h2>{{ $i18n.get('title_item_edition') }}</h2> <h2>{{ $i18n.get('title_item_edition') }}</h2>
<a class="is-success">Voltar</a> <a class="is-secondary">{{ $i18n.get('return') }}</a>
<hr> <hr>
</div> </div>
<form <form
@ -93,9 +93,11 @@
:active.sync="isTextModalActive" :active.sync="isTextModalActive"
:width="640" :width="640"
scroll="keep"> scroll="keep">
<div class="modal-area"> <div class="tainacan-modal-content">
<h2>{{ $i18n.get('instruction_write_text') }}</h2> <div class="tainacan-modal-title">
<br> <h2>{{ $i18n.get('instruction_write_text') }}</h2>
<hr>
</div>
<b-input <b-input
type="textarea" type="textarea"
v-model="textContent"/> v-model="textContent"/>
@ -126,9 +128,11 @@
:active.sync="isURLModalActive" :active.sync="isURLModalActive"
:width="640" :width="640"
scroll="keep"> scroll="keep">
<div class="modal-area"> <div class="tainacan-modal-content">
<h2>{{ $i18n.get('instruction_insert_url') }}</h2> <div class="tainacan-modal-title">
<br> <h2>{{ $i18n.get('instruction_insert_url') }}</h2>
<hr>
</div>
<b-input v-model="urlLink"/> <b-input v-model="urlLink"/>
<div class="field is-grouped form-submit"> <div class="field is-grouped form-submit">
@ -206,6 +210,15 @@
<div class="column is-1" /> <div class="column is-1" />
<div class="column is-7"> <div class="column is-7">
<label class="section-label">{{ $i18n.get('fields') }}</label> <label class="section-label">{{ $i18n.get('fields') }}</label>
<br>
<a
class="collapse-all"
@click="toggleCollapseAll()">
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
<b-icon
type="is-secondary"
:icon=" collapseAll ? 'menu-down' : 'menu-right'" />
</a>
<!-- Status -------------------------------- --> <!-- Status -------------------------------- -->
<b-field <b-field
@ -230,9 +243,11 @@
<!-- Fields from Collection-------------------------------- --> <!-- Fields from Collection-------------------------------- -->
<tainacan-form-item <tainacan-form-item
v-for="(field, index) in fieldList" v-for="(field, index) in fieldList"
:key="index" :key="index"
:field="field"/> :field="field"
:is-collapsed="!fieldCollapses[index]" />
</div> </div>
</div> </div>
@ -274,6 +289,8 @@ export default {
item: null, item: null,
collectionId: Number, collectionId: Number,
isLoading: false, isLoading: false,
fieldCollapses: [],
collapseAll: false,
form: { form: {
collectionId: Number, collectionId: Number,
status: '', status: '',
@ -380,8 +397,11 @@ export default {
}, },
loadMetadata() { loadMetadata() {
// Obtains Item Field // Obtains Item Field
this.fetchFields(this.itemId).then(() => { this.fetchFields(this.itemId).then((fields) => {
this.isLoading = false; this.isLoading = false;
for (let field of fields) {
this.fieldCollapses.push(false);
}
}); });
}, },
setFileDocument(event) { setFileDocument(event) {
@ -478,6 +498,12 @@ export default {
} }
} }
); );
},
toggleCollapseAll() {
this.collapseAll = !this.collapseAll;
for (let i = 0; i < this.fieldCollapses.length; i++)
this.fieldCollapses[i] = this.collapseAll;
} }
}, },
@ -543,25 +569,18 @@ export default {
font-size: 16px !important; font-size: 16px !important;
font-weight: 500 !important; font-weight: 500 !important;
color: $tertiary !important; color: $tertiary !important;
line-height: 2.0em; line-height: 1.2em;
} }
.modal-area { .collapse-all {
background-color: white; font-size: 12px;
padding: 20px; .icon { vertical-align: bottom; }
h2 {
color: $tertiary;
font-size: 16px;
}
.form-submit {
padding: 1em 0em 0.4em 0em;
}
} }
.document-box { .document-box {
border: 1px solid $draggable-border-color; border: 1px solid $draggable-border-color;
padding: 30px; padding: 30px;
margin-top: 16px;
margin-bottom: 38px; margin-bottom: 38px;
ul { ul {
@ -603,7 +622,7 @@ export default {
position: absolute; position: absolute;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
bottom: 50%; bottom: 45%;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: bold; font-weight: bold;
z-index: 99; z-index: 99;

105
src/admin/components/edition/term-edition-form.vue
View File

@ -15,13 +15,13 @@
class="button is-rounred is-secondary" class="button is-rounred is-secondary"
id="button-edit-thumbnail" id="button-edit-thumbnail"
:aria-label="$i18n.get('label_button_edit_header_image')" :aria-label="$i18n.get('label_button_edit_header_image')"
@click="editImage($event, true)"> @click="headerImageMediaFrame.openFrame($event)">
<b-icon icon="pencil"/> <b-icon icon="pencil"/>
</a> </a>
<figure class="image is-128x128"> <figure class="image is-128x128">
<span <span
v-if="editForm.header_image === undefined || editForm.header_image === false" v-if="editForm.header_image === undefined || editForm.header_image === false"
class="image-placeholder">{{ $i18n.get('label_empty_header_image') }}</span> class="image-placeholder">{{ $i18n.get('label_empty_header_image') }}</span>
<img <img
:alt="$i18n.get('label_header_image')" :alt="$i18n.get('label_header_image')"
:src="(editForm.header_image === undefined || editForm.header_image === false) ? headerPlaceholderPath : editForm.header_image"> :src="(editForm.header_image === undefined || editForm.header_image === false) ? headerPlaceholderPath : editForm.header_image">
@ -97,6 +97,7 @@
<script> <script>
import {mapActions, mapGetters} from 'vuex'; import {mapActions, mapGetters} from 'vuex';
import wpMediaFrames from '../../js/wp-media-frames';
export default { export default {
name: 'TermEditionForm', name: 'TermEditionForm',
@ -104,7 +105,7 @@
return { return {
formErrors: {}, formErrors: {},
headerPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_rectangle.png', headerPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_rectangle.png',
frameUploader: undefined, headerImageMediaFrame: undefined
} }
}, },
props: { props: {
@ -179,82 +180,25 @@
} }
); );
}, },
editImage(event) { initializeMediaFrames() {
'use strict';
event.preventDefault();
// Create a new media frame this.headerImageMediaFrame = new wpMediaFrames.headerImageControl(
this.frameUploader = wp.media.frames.frame_uploader = wp.media({ 'my-header-image-media-frame', {
frame: 'select', button_labels: {
title: 'Select or Upload and Image.', frame_title: this.$i18n.get('instruction_select_term_header_image'),
button: { },
text: 'Select and Crop', relatedPostId: this.editForm.id,
close: false onSave: (croppedImage) => {
}, this.editForm = Object.assign({},
multiple: false, this.editForm,
library: { {
type: 'image', header_image_id: croppedImage.id.toString(),
}, header_image: croppedImage.url
uploader: true, }
states: [ );
new wp.media.controller.Library({
title: 'Corta pra mim!',
library: wp.media.query({type: 'image'}),
multiple: false,
date: false,
priority: 20,
suggestedWidth: 1000,
suggestedHeight: 200
}),
new wp.media.controller.Cropper({
imgSelectOptions: {
enable: true,
handles: true,
imageHeight: 200,
imageWidth: 1000,
instance: true,
keys: true,
maxWidth: 1000,
persistent: true,
x1: 0,
x2: 250,
y1: 0,
y2: 50
}
})
]
});
this.frameUploader.on('select', () => {
this.frameUploader.state('cropper').set('canSkipCrop', true);
this.frameUploader.setState('cropper');
});
this.frameUploader.on('skippedcrop', () => {
let media = this.frameUploader.state().get('selection').first().toJSON();
this.editForm = Object.assign({},
this.editForm,
{
header_image_id: media.id.toString(),
header_image: media.url
} }
); }
}); );
this.frameUploader.on('cropped', (croppedImage) => {
this.editForm = Object.assign({},
this.editForm,
{
header_image_id: croppedImage.attachment_id.toString(),
header_image: croppedImage.url
}
);
});
this.frameUploader.open();
}, },
clearErrors(attributes) { clearErrors(attributes) {
if(attributes instanceof Object){ if(attributes instanceof Object){
@ -265,6 +209,9 @@
this.formErrors[attributes] = undefined; this.formErrors[attributes] = undefined;
} }
}, },
},
created() {
this.initializeMediaFrames();
} }
} }
</script> </script>

5
src/admin/js/wp-media-frames.js
View File

@ -60,7 +60,6 @@ export default {
wp.media.view.settings.post = { wp.media.view.settings.post = {
id: this.params.relatedPostId id: this.params.relatedPostId
} }
console.log(wp.media.view.settings.post);
this.params.flex_width = 0; this.params.flex_width = 0;
this.params.flex_height = 0; this.params.flex_height = 0;
@ -114,6 +113,7 @@ export default {
headerImageControl: wp.customize.CroppedImageControl.extend({ headerImageControl: wp.customize.CroppedImageControl.extend({
initFrame: function() { initFrame: function() {
var l10n = _wpMediaViewsL10n; var l10n = _wpMediaViewsL10n;
wp.media.view.settings.post = { wp.media.view.settings.post = {
@ -153,7 +153,6 @@ export default {
] ]
}); });
//this.frame.state('cropper').set( 'canSkipCrop', true ); //this.frame.state('cropper').set( 'canSkipCrop', true );
this.frame.on( 'select', this.onSelect, this ); this.frame.on( 'select', this.onSelect, this );
@ -163,7 +162,7 @@ export default {
// Called on both skippedcrop and cropped states // Called on both skippedcrop and cropped states
setImageFromAttachment: function( attachment ) { setImageFromAttachment: function( attachment ) {
this.params.attachment = attachment; this.params.attachment = attachment;
this.params.onSave(attachment.id); this.params.onSave(attachment);
} }
}), }),

18
src/admin/scss/tainacan-admin.scss
View File

@ -42,6 +42,10 @@ html {
z-index: 9999999 !important; z-index: 9999999 !important;
} }
.modal-background {
background-color: rgba(0, 0, 0, 0.70);
}
/* Rules for sizing the icon. */ /* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; } .material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; } .material-icons.md-24 { font-size: 24px; }
@ -80,7 +84,7 @@ html {
} }
} }
.tainacan-page-title { .tainacan-page-title, .tainacan-modal-title {
h1, h2 { h1, h2 {
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
@ -88,16 +92,26 @@ html {
display: inline-block; display: inline-block;
} }
a{ a{
font-weight: bold; font-weight: 500;
float: right; float: right;
} }
hr{ hr{
margin-top: 2px; margin-top: 2px;
margin-bottom: 60px;
height: 1px; height: 1px;
background-color: $secondary; background-color: $secondary;
} }
} }
.tainacan-modal-content {
background-color: white;
padding: 52px 80px;
.form-submit {
padding: 80px 0em 0.4em 0em !important;
}
}
// Buefy notices (toast, snackbar...) // Buefy notices (toast, snackbar...)
.notices { .notices {
z-index: 99999999999999 !important; z-index: 99999999999999 !important;

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

@ -28,6 +28,7 @@ return [
'remove' => __( 'Remove', 'tainacan' ), 'remove' => __( 'Remove', 'tainacan' ),
'save' => __( 'Save', 'tainacan' ), 'save' => __( 'Save', 'tainacan' ),
'next' => __( 'Next', 'tainacan' ), 'next' => __( 'Next', 'tainacan' ),
'return' => __( 'Return', 'tainacan' ),
'see' => __( 'See', 'tainacan' ), 'see' => __( 'See', 'tainacan' ),
'search' => __( 'Search', 'tainacan' ), 'search' => __( 'Search', 'tainacan' ),
'advanced_search' => __( 'Advanced Search', 'tainacan' ), 'advanced_search' => __( 'Advanced Search', 'tainacan' ),
@ -162,6 +163,8 @@ return [
'label_text' => __( 'Texto', 'tainacan' ), 'label_text' => __( 'Texto', 'tainacan' ),
'label_url' => __( 'URL', 'tainacan' ), 'label_url' => __( 'URL', 'tainacan' ),
'label_select_file' => __( 'Select File', 'tainacan' ), 'label_select_file' => __( 'Select File', 'tainacan' ),
'label_expand_all' => __( 'Expand all', 'tainacan' ),
'label_collapse_all' => __( 'Collapse all', 'tainacan' ),
// Instructions. More complex sentences to guide user and placeholders // Instructions. More complex sentences to guide user and placeholders
'instruction_dragndrop_fields_collection' => __( 'Drag and drop Fields here to Collection.', 'tainacan' ), 'instruction_dragndrop_fields_collection' => __( 'Drag and drop Fields here to Collection.', 'tainacan' ),
@ -181,6 +184,7 @@ return [
'instruction_select_collection_thumbnail' => __( 'Select a thumbnail image for collection', 'tainacan' ), 'instruction_select_collection_thumbnail' => __( 'Select a thumbnail image for collection', 'tainacan' ),
'instruction_select_item_thumbnail' => __( 'Select a thumbnail image for item', 'tainacan' ), 'instruction_select_item_thumbnail' => __( 'Select a thumbnail image for item', 'tainacan' ),
'instruction_select_collection_header_image' => __( 'Select a header image for collection', 'tainacan' ), 'instruction_select_collection_header_image' => __( 'Select a header image for collection', 'tainacan' ),
'instruction_select_term_header_image' => __( 'Select a header image for term', 'tainacan' ),
'instruction_select_files_to_attach_to_item' => __( 'Select files to attach to item', 'tainacan' ), 'instruction_select_files_to_attach_to_item' => __( 'Select files to attach to item', 'tainacan' ),
'instruction_select_document_file_for_item' => __( 'Select a document file for item', 'tainacan' ), 'instruction_select_document_file_for_item' => __( 'Select a document file for item', 'tainacan' ),
'instruction_insert_url' => __( 'Insert URL', 'tainacan' ), 'instruction_insert_url' => __( 'Insert URL', 'tainacan' ),

127
src/classes/field-types/tainacan-form-item.vue
View File

@ -1,52 +1,64 @@
<template> <template>
<b-field <b-field
:addons="false" :addons="false"
:label="field.field.name"
:message="getErrorMessage" :message="getErrorMessage"
:type="fieldTypeMessage"> :type="fieldTypeMessage">
<span <b-collapse >
v-if="field.field.required == 'yes'" <span @click="isCollapsed = !isCollapsed">
class="required-field-asterisk" <b-icon
:class="fieldTypeMessage">*</span> type="is-secondary"
<help-button :icon="!isCollapsed ? 'menu-down' : 'menu-right'" />
:title="field.field.name" <label class="label">{{ field.field.name }}</label>
:message="field.field.description"/> <span
<div v-if="isTextInputComponent( field.field.field_type_object.component )"> v-if="field.field.required == 'yes'"
<component class="required-field-asterisk"
:id="field.field.field_type_object.component + '-' + field.field.slug" :class="fieldTypeMessage">*</span>
:is="field.field.field_type_object.component" <span class="field-type">({{ $i18n.get(field.field.field_type_object.component) }})</span>
v-model="inputs[0]" </span>
:field="field" <help-button
@blur="changeValue()"/> :title="field.field.name"
<div v-if="field.field.multiple == 'yes'"> :message="field.field.description"/>
<div <div
v-if="index > 0" v-show="!isCollapsed"
v-for="(input, index) in inputsList " v-if="isTextInputComponent( field.field.field_type_object.component )">
:key="index" <component
class="multiple-inputs"> :id="field.field.field_type_object.component + '-' + field.field.slug"
<component :is="field.field.field_type_object.component"
:id="field.field.field_type_object.component + '-' + field.field.slug" v-model="inputs[0]"
:is="field.field.field_type_object.component" :field="field"
v-model="inputs[index]" @blur="changeValue()"/>
:field="field" <div v-if="field.field.multiple == 'yes'">
@blur="changeValue()"/><a <div
class="button"
v-if="index > 0" v-if="index > 0"
@click="removeInput(index)">-</a> v-for="(input, index) in inputsList "
:key="index"
class="multiple-inputs">
<component
:id="field.field.field_type_object.component + '-' + field.field.slug"
:is="field.field.field_type_object.component"
v-model="inputs[index]"
:field="field"
@blur="changeValue()"/><a
class="button"
v-if="index > 0"
@click="removeInput(index)">-</a>
</div>
<a
class="button"
@click="addInput">+</a>
</div> </div>
<a
class="button"
@click="addInput">+</a>
</div> </div>
</div> <div
<div v-else> v-show="!isCollapsed"
<component v-else>
:id="field.field.field_type_object.component + '-' + field.field.slug" <component
:is="field.field.field_type_object.component" :id="field.field.field_type_object.component + '-' + field.field.slug"
v-model="inputs" :is="field.field.field_type_object.component"
:field="field" v-model="inputs"
@blur="changeValue()"/> :field="field"
</div> @blur="changeValue()"/>
</div>
</b-collapse>
</b-field> </b-field>
</template> </template>
@ -58,7 +70,8 @@
props: { props: {
field: { field: {
type: Object type: Object
} },
isCollapsed: Boolean
}, },
data(){ data(){
return { return {
@ -125,8 +138,36 @@
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
@import '../../admin/scss/_variables.scss';
.multiple-inputs { .multiple-inputs {
display: flex; display: flex;
} }
.field {
border-bottom: 1px solid $draggable-border-color;
padding: 10px 25px;
.label {
font-size: 14px;
font-weight: 500;
margin-left: 18px;
margin-bottom: 0.5em;
}
.field-type {
font-size: 13px;
font-weight: 400;
color: $gray;
top: -0.2em;
position: relative;
}
.help-wrapper {
top: -0.2em;
}
.collapse .collapse-content>div {
margin-left: 45px;
}
}
</style> </style>