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

src/admin/components/edition/collection-edition-form.vue

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

src/admin/components/edition/item-edition-form.vue

@@ -2,7 +2,7 @@
     <div class="page-container">
         <div class="tainacan-page-title">
             <h2>{{ $i18n.get('title_item_edition') }}</h2>
-            <a class="is-success">Voltar</a>
+            <a class="is-secondary">{{ $i18n.get('return') }}</a>
             <hr>
         </div>
         <form 
@@ -93,9 +93,11 @@
                             :active.sync="isTextModalActive" 
                             :width="640" 
                             scroll="keep">
-                        <div class="modal-area">
+                        <div class="tainacan-modal-content">
+                            <div class="tainacan-modal-title">
                                 <h2>{{ $i18n.get('instruction_write_text') }}</h2>
-                            <br>
+                                <hr>
+                            </div>
                             <b-input 
                                     type="textarea"
                                     v-model="textContent"/>
@@ -126,9 +128,11 @@
                             :active.sync="isURLModalActive" 
                             :width="640" 
                             scroll="keep">
-                        <div class="modal-area">
+                        <div class="tainacan-modal-content">   
+                            <div class="tainacan-modal-title">
                                 <h2>{{ $i18n.get('instruction_insert_url') }}</h2>
-                            <br>
+                                <hr>
+                            </div>
                             <b-input v-model="urlLink"/>
 
                             <div class="field is-grouped form-submit">
@@ -206,6 +210,15 @@
                 <div class="column is-1" />
                 <div class="column is-7">
                     <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 -------------------------------- --> 
                     <b-field 
@@ -232,7 +245,9 @@
                     <tainacan-form-item 
                             v-for="(field, index) in fieldList"
                             :key="index"
-                        :field="field"/>    
+                            :field="field"
+                            :is-collapsed="!fieldCollapses[index]" />   
+  
                 </div>
             </div>
 
@@ -274,6 +289,8 @@ export default {
             item: null,
             collectionId: Number,
             isLoading: false,
+            fieldCollapses: [],
+            collapseAll: false,        
             form: {
                 collectionId: Number,
                 status: '',
@@ -380,8 +397,11 @@ export default {
         },
         loadMetadata() { 
             // Obtains Item Field
-            this.fetchFields(this.itemId).then(() => {
+            this.fetchFields(this.itemId).then((fields) => {
                 this.isLoading = false;
+                for (let field of fields) {
+                    this.fieldCollapses.push(false);
+                }
             });
         }, 
         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-weight: 500 !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 {
         border: 1px solid $draggable-border-color;
         padding: 30px;
+        margin-top: 16px;
         margin-bottom: 38px;
 
         ul { 
@@ -603,7 +622,7 @@ export default {
             position: absolute;
             margin-left: 10px;
             margin-right: 10px;
-            bottom: 50%;
+            bottom: 45%;
             font-size: 0.8rem;
             font-weight: bold;
             z-index: 99;

src/admin/components/edition/term-edition-form.vue

@@ -15,7 +15,7 @@
                                 class="button is-rounred is-secondary"
                                 id="button-edit-thumbnail"
                                 :aria-label="$i18n.get('label_button_edit_header_image')"
-                                @click="editImage($event, true)">
+                                @click="headerImageMediaFrame.openFrame($event)">
                             <b-icon icon="pencil"/>
                         </a>
                         <figure class="image is-128x128">
@@ -97,6 +97,7 @@
 
 <script>
     import {mapActions, mapGetters} from 'vuex';
+    import wpMediaFrames from '../../js/wp-media-frames';
 
     export default {
         name: 'TermEditionForm',
@@ -104,7 +105,7 @@
             return {
                 formErrors: {},
                 headerPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_rectangle.png',
-                frameUploader: undefined,
+                headerImageMediaFrame: undefined
             }
         },
         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',
-                        close: false
                         },
-                    multiple: false,
+                        relatedPostId: this.editForm.id,
-                    library: {
+                        onSave: (croppedImage) => {
-                        type: 'image',
-                    },
-                    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_id: croppedImage.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) {
                 if(attributes instanceof Object){
@@ -265,6 +209,9 @@
                     this.formErrors[attributes] = undefined;
                 }
             },
+        },
+        created() {
+            this.initializeMediaFrames();
         }
     }
 </script>

src/admin/js/wp-media-frames.js

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

src/admin/scss/tainacan-admin.scss

@@ -42,6 +42,10 @@ html {
     z-index: 9999999 !important;
 }
 
+.modal-background {
+    background-color: rgba(0, 0, 0, 0.70);
+}
+
 /* Rules for sizing the icon. */
 .material-icons.md-18 { font-size: 18px; }
 .material-icons.md-24 { font-size: 24px; }
@@ -80,7 +84,7 @@ html {
     }
 }
 
-.tainacan-page-title {
+.tainacan-page-title, .tainacan-modal-title {
     h1, h2 {
         font-size: 20px;
         font-weight: 500;
@@ -88,16 +92,26 @@ html {
         display: inline-block;
     }
     a{
-        font-weight: bold;
+        font-weight: 500;
         float: right;
     }
     hr{
         margin-top: 2px;
+        margin-bottom: 60px;
         height: 1px;
         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...)
 .notices {
     z-index: 99999999999999 !important;

src/admin/tainacan-admin-i18n.php

@@ -28,6 +28,7 @@ return [
 	'remove'                                   => __( 'Remove', 'tainacan' ),
 	'save'                                     => __( 'Save', 'tainacan' ),
 	'next'                                     => __( 'Next', 'tainacan' ),
+	'return'                                     => __( 'Return', 'tainacan' ),
 	'see'                                      => __( 'See', 'tainacan' ),
 	'search'                                   => __( 'Search', 'tainacan' ),
 	'advanced_search'                          => __( 'Advanced Search', 'tainacan' ),
@@ -162,6 +163,8 @@ return [
 	'label_text'		 					   => __( 'Texto', 'tainacan' ),
 	'label_url'	 							   => __( 'URL', '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
 	'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_item_thumbnail'  	   	 => __( 'Select a thumbnail image for item', '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_document_file_for_item'  => __( 'Select a document file for item', 'tainacan' ),
 	'instruction_insert_url'					 => __( 'Insert URL', 'tainacan' ),

src/classes/field-types/tainacan-form-item.vue

@@ -1,17 +1,26 @@
 <template>
     <b-field
             :addons="false"
-            :label="field.field.name"
             :message="getErrorMessage"
             :type="fieldTypeMessage">
+        <b-collapse >
+            <span @click="isCollapsed = !isCollapsed">
+                <b-icon 
+                        type="is-secondary"
+                        :icon="!isCollapsed ? 'menu-down' : 'menu-right'" />
+                <label class="label">{{ field.field.name }}</label>
                 <span
                         v-if="field.field.required == 'yes'" 
                         class="required-field-asterisk" 
                         :class="fieldTypeMessage">*</span>
+                <span class="field-type">({{ $i18n.get(field.field.field_type_object.component) }})</span>      
+            </span>
             <help-button 
                     :title="field.field.name" 
                     :message="field.field.description"/>
-        <div v-if="isTextInputComponent( field.field.field_type_object.component )">
+            <div   
+                    v-show="!isCollapsed" 
+                    v-if="isTextInputComponent( field.field.field_type_object.component )">
                 <component 
                         :id="field.field.field_type_object.component + '-' + field.field.slug" 
                         :is="field.field.field_type_object.component" 
@@ -39,7 +48,9 @@
                             @click="addInput">+</a>
                 </div>
             </div>
-        <div v-else>
+            <div 
+                    v-show="!isCollapsed"
+                    v-else>
                 <component
                         :id="field.field.field_type_object.component + '-' + field.field.slug"
                         :is="field.field.field_type_object.component" 
@@ -47,6 +58,7 @@
                         :field="field" 
                         @blur="changeValue()"/>
             </div>
+        </b-collapse>
     </b-field>
 </template>
 
@@ -58,7 +70,8 @@
         props: {
             field: {
                 type: Object
-            }
+            },
+            isCollapsed: Boolean
         },
         data(){
             return {
@@ -125,8 +138,36 @@
     }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+    @import '../../admin/scss/_variables.scss'; 
+
     .multiple-inputs {
         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>