From 36130791ec68d909a0ae3c729423b112a3d563a5 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 12 Mar 2018 17:06:07 -0300
Subject: [PATCH] Adds basic styling to taincan-form class.

---
 .../edition/collection-edition-form.vue       |  2 +-
 .../components/edition/field-edition-form.vue |  6 +--
 .../components/edition/item-edition-form.vue  |  2 +-
 src/admin/components/lists/fields-list.vue    |  5 +--
 src/admin/components/lists/filters-list.vue   |  4 +-
 .../components/navigation/tainacan-header.vue |  2 +-
 src/admin/scss/_variables.scss                |  2 +
 src/admin/scss/tainacan-admin.scss            | 43 ++++++++++++++++++-
 8 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/admin/components/edition/collection-edition-form.vue b/src/admin/components/edition/collection-edition-form.vue
index 35789414e..e6c75b718 100644
--- a/src/admin/components/edition/collection-edition-form.vue
+++ b/src/admin/components/edition/collection-edition-form.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="page-container primary-page">
         <b-tag v-if="collection != null && collection != undefined" :type="'is-' + getStatusColor(collection.status)" v-text="collection.status"></b-tag>
-        <form label-width="120px">
+        <form class="tainacan-form" label-width="120px">
             <b-field 
                 :label="$i18n.get('label_name')"
                 :type="editFormErrors['name'] != undefined ? 'is-danger' : ''" 
diff --git a/src/admin/components/edition/field-edition-form.vue b/src/admin/components/edition/field-edition-form.vue
index f53937084..8d65ccd6c 100644
--- a/src/admin/components/edition/field-edition-form.vue
+++ b/src/admin/components/edition/field-edition-form.vue
@@ -1,5 +1,5 @@
 <template>
-    <form id="fieldEditForm" v-on:submit.prevent="saveEdition(editForm)">    
+    <form id="fieldEditForm" class="tainacan-form" v-on:submit.prevent="saveEdition(editForm)">    
         
         <b-field 
             :label="$i18n.get('label_name')" 
@@ -71,7 +71,7 @@
 
         <component
                 :errors="formErrors['field_type_options']"
-                v-if="editForm.field_type_object && field.field_type_object.form_component"
+                v-if="(editForm.field_type_object && field.field_type_object.form_component) || field.edit_form == ''"
                 :is="editForm.field_type_object.form_component"
                 :field="editForm"
                 v-model="editForm.field_type_options">
@@ -121,7 +121,7 @@ export default {
             this.formErrors = {};
             this.formErrorMessage = '';
 
-            if (field.field_type_object && field.field_type_object.form_component) {
+            if ((field.field_type_object && field.field_type_object.form_component) || field.edit_form == '') {
                 
                 this.updateField({collectionId: this.collectionId, fieldId: field.id, isRepositoryLevel: this.isRepositoryLevel, options: this.editForm})
                     .then((field) => {
diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue
index c56d81c35..35c4eeb92 100644
--- a/src/admin/components/edition/item-edition-form.vue
+++ b/src/admin/components/edition/item-edition-form.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="page-container">
         <b-tag v-if="item != null && item != undefined" :type="'is-' + getStatusColor(item.status)" v-text="item.status"></b-tag>
-        <form label-width="120px">
+        <form class="tainacan-form" label-width="120px">
             <b-field :label="$i18n.get('label_status')">
                 <b-select 
                         id="status-select"
diff --git a/src/admin/components/lists/fields-list.vue b/src/admin/components/lists/fields-list.vue
index 90a7b428d..7e1300a6a 100644
--- a/src/admin/components/lists/fields-list.vue
+++ b/src/admin/components/lists/fields-list.vue
@@ -12,7 +12,7 @@
                         :options="{group: { name:'fields', pull: false, put: true }, 'handle': '.handle', chosenClass: 'sortable-chosen', filter: '.not-sortable-item'}">
                         <div  
                             class="active-field-item" 
-                            :class="{'not-sortable-item': field.id == undefined || openedFieldId == field.id, 'inherited-field': field.collection_id != collectionId}" 
+                            :class="{'not-sortable-item': field.id == undefined, 'not-focusable-item': openedFieldId == field.id, 'inherited-field': field.collection_id != collectionId}" 
                             v-for="(field, index) in activeFieldList" :key="index">
                             <div class="handle">
                                 <b-icon type="is-gray" class="is-pulled-left" icon="drag"></b-icon>
@@ -258,10 +258,9 @@ export default {
                 height: 1em; 
                 width: 1em;
             }
-            &.not-sortable-item, &.not-sortable-item:hover {
+            &.not-sortable-item, &.not-sortable-item:hover, &.not-focusable-item, &.not-focusable-item:hover {
                 box-shadow: none !important;
                 top: 0px !important;
-                color: gray;
                 cursor: default;
             }
             &.inherited-field {
diff --git a/src/admin/components/lists/filters-list.vue b/src/admin/components/lists/filters-list.vue
index 497696df8..82debdebc 100644
--- a/src/admin/components/lists/filters-list.vue
+++ b/src/admin/components/lists/filters-list.vue
@@ -12,7 +12,7 @@
                         :options="{group: { name:'filters', pull: false, put: true }, 'handle': '.handle', chosenClass: 'sortable-chosen', filter: '.not-sortable-item'}">
                         <div  
                             class="active-filter-item" 
-                            :class="{'not-sortable-item': filter.id == undefined || openedFilterId == filter.id, 'inherited-filter': filter.collection_id != collectionId}" 
+                            :class="{'not-sortable-item': filter.id == undefined, 'not-focusable-item': openedFilterId == filter.id, 'inherited-filter': filter.collection_id != collectionId}" 
                             v-for="(filter, index) in activeFilterList" :key="index">
                                 <div class="handle">
                                     <b-icon type="is-gray" class="is-pulled-left" icon="drag"></b-icon>
@@ -260,7 +260,7 @@ export default {
                 height: 1em; 
                 width: 1em;
             }
-            &.not-sortable-item, &.not-sortable-item:hover {
+            &.not-sortable-item, &.not-sortable-item:hover, &.not-focusable-item, &.not-focusable-item:hover  {
                 box-shadow: none !important;
                 top: 0px !important;
                 color: gray;
diff --git a/src/admin/components/navigation/tainacan-header.vue b/src/admin/components/navigation/tainacan-header.vue
index 287ae6cfd..9be91d069 100644
--- a/src/admin/components/navigation/tainacan-header.vue
+++ b/src/admin/components/navigation/tainacan-header.vue
@@ -112,7 +112,7 @@ export default {
     
     // Tainacan Header
     #tainacan-header{
-        background-color: $light;
+        background-color: $header-color;
         height: $header-height;
         max-height: $header-height;
         width: 100%;
diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss
index 345d11479..0dcd42228 100644
--- a/src/admin/scss/_variables.scss
+++ b/src/admin/scss/_variables.scss
@@ -16,6 +16,8 @@ $primary-dark: #55A0AF;
 $primary-darker: darken($primary-dark, 5%);
 
 $separator-color: #2a6e77;
+$header-color: #ececec;
+$tainacan-input-color: #f0f0f0;
 
 $gray: #898d8f; 
 $gray-invert: findColorInvert($gray);
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index bfe4a80bf..5ba33494e 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -74,7 +74,44 @@ html {
     z-index: 99999999 !important;
 }
 
-// Buttons border radius are bigger in Tainacan
+// Input components used in forms are gray in Tainacan
+.tainacan-form {
+    .input, .textarea {
+        border: none;
+        border-radius: 1px !important;
+        background-color: $tainacan-input-color;
+        color: black;
+        box-shadow: none;
+    }
+    .select {
+        padding-top: 0px !important;
+        select {
+            border: none;
+            border-radius: 1px !important;
+            font-weight: normal;
+            height: 30px !important;
+            padding: 2px 25px 2px 15px!important;
+            margin-top: 0px !important;
+            margin-bottom: 0px !important;
+            background-color: $tainacan-input-color;
+            color: black;
+            &:focus>option:checked, &:focus>option:hover {
+                background-color: $primary-lighter !important;
+            }
+        }
+        &:not(.is-multiple)::after {
+            content: "\F35D" !important;
+            font: normal normal normal 24px/1 "Material Design Icons" !important;
+            border: none !important;
+            transform: none;
+            margin-top: -0.6em;
+            right: 0.95em;
+            color: $primary;
+        }       
+    }
+}
+
+// Some components have a different style in listing pages
 .button {
     border-radius: 6px !important;
     font-weight: normal;
@@ -86,6 +123,7 @@ html {
 .select {
     padding-top: 0px !important;
     select {
+        border: none;
         border-radius: 6px !important;
         font-weight: normal;
         height: 30px !important;
@@ -108,6 +146,9 @@ html {
 }
 .dropdown {
     .dropdown-trigger{
+        .button {
+            border: none;
+        }
         .icon {
             color: $primary;
         }