Make file input layout and fix the image preview

forkcms · Feb 15, 2021 · 42956c1 · 42956c1
1 parent ea10faf
commit 42956c1
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 14 deletions.
diff --git a/src/Backend/Core/Engine/Form.php b/src/Backend/Core/Engine/Form.php
@@ -102,7 +102,7 @@ public function addEditor($name, $value = null, $class = null, $classError = nul
     public function addFile($name, $class = null, $classError = null): SpoonFormFile
     {
         $name = (string) $name;
-        $class = (string) ($class ?? 'custom-file-input');
+        $class = (string) ($class ?? 'form-control');
         $classError = (string) ($classError ?? 'error form-control-danger is-invalid');
 
         // add element
@@ -123,7 +123,7 @@ public function addFile($name, $class = null, $classError = null): SpoonFormFile
     public function addImage($name, $class = null, $classError = null): FormImage
     {
         $name = (string) $name;
-        $class = (string) ($class ?? 'custom-file-input');
+        $class = (string) ($class ?? 'form-control');
         $classError = (string) ($classError ?? 'error form-control-danger is-invalid');
 
         // add element

diff --git a/src/Backend/Core/Js/Components/Forms.js b/src/Backend/Core/Js/Components/Forms.js
@@ -17,15 +17,15 @@ export class Forms {
   }
 
   fileUpload () {
-    $('.custom-file-input').on('change', (event) => {
+    $('.form-control[type="file"]').on('change', (event) => {
       let file = ''
       event = event.originalEvent
 
       for (let i = 0; i < event.target.files.length; i++) {
         file = event.target.files[i]
       }
 
-      $(event.currentTarget).siblings('.custom-file-label').text(file.name)
+      $(event.currentTarget).siblings('.form-label').text(file.name)
     })
   }
 
@@ -51,8 +51,8 @@ export class Forms {
   }
 
   imagePreview () {
-    $('input[type=file]').on('change', () => {
-      const imageField = $(this).get(0)
+    $('input[type=file]').on('change', (event) => {
+      const imageField = event.target
       // make sure we are uploading an image by checking the data attribute
       if (imageField.getAttribute('data-fork-cms-role') === 'image-field' && imageField.files && imageField.files[0]) {
         // get the image preview by matching the image-preview data-id to the ImageField id

diff --git a/src/Backend/Core/Layout/Sass/_bootstrap-variables.scss b/src/Backend/Core/Layout/Sass/_bootstrap-variables.scss
@@ -560,7 +560,7 @@ $table-border-factor:         .1;
 $table-border-width:          $border-width;
 $table-border-color:          $gray-200;
 
-$table-striped-order:         odd;
+$table-striped-order:         even;
 
 $table-group-separator-color: $gray-200;
 
@@ -833,7 +833,7 @@ $form-range-thumb-disabled-bg:             $gray-500;
 $form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 
 $form-file-button-color:          $input-color;
-$form-file-button-bg:             $input-group-addon-bg;
+$form-file-button-bg:             $gray-200;
 $form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%);
 
 $form-floating-height:            add(3.5rem, $input-height-border);

diff --git a/src/Backend/Core/Layout/Sass/components/_tables.scss b/src/Backend/Core/Layout/Sass/components/_tables.scss
@@ -16,6 +16,13 @@
   width: 5%;
 }
 
+.table > tbody > tr > td,
+.table > tbody > tr > th,
+.table > tfoot > tr > td {
+  border: 0;
+  vertical-align: middle;
+}
+
 .table-align-top {
 
   > tbody > tr > td,

diff --git a/src/Backend/Core/Layout/Templates/FormLayout.html.twig b/src/Backend/Core/Layout/Templates/FormLayout.html.twig
@@ -2,7 +2,7 @@
 
 {% block form_widget_simple -%}
   {% if type is not defined or type != 'hidden' %}
-    {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control' ~ (type|default('') == 'file' ? '-file custom-file-input' : ''))|trim}) -%}
+    {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
   {% endif %}
   {%- if type is defined and (type == 'range' or type == 'color') %}
     {# Attribute "required" is not supported #}

diff --git a/src/Backend/Modules/Blog/Layout/Templates/Edit.html.twig b/src/Backend/Modules/Blog/Layout/Templates/Edit.html.twig
@@ -75,10 +75,8 @@
                           </label>
                         </div>
                         <div class="col-lg-9">
-                          <div class="custom-file">
-                            {% form_field image %}
-                            <label class="custom-file-label" for="image">{{ 'lbl.ChooseFile'|trans|ucfirst }}</label>
-                          </div>
+                          <label class="form-label" for="image">{{ 'lbl.ChooseFile'|trans|ucfirst }}</label>
+                          {% form_field image %}
                           {% form_field_error image %}
                           {% if item.image %}
                             <div class="form-check">

diff --git a/src/Backend/Modules/MediaLibrary/Layout/Templates/MediaItemIndex.html.twig b/src/Backend/Modules/MediaLibrary/Layout/Templates/MediaItemIndex.html.twig
@@ -82,7 +82,7 @@
                 {% endif %}
               {% endif %}
               {% if isAllowedAction('MediaFolderEdit') %}
-                {{ macro.buttonIcon('', 'pencil', 'lbl.EditMediaFolder'|trans|ucfirst, 'btn-default', {"data-toggle":"modal", "data-target":"#editMediaFolderDialog", "type":"button" } ) }}
+                {{ macro.buttonIcon('', 'pencil-alt', 'lbl.EditMediaFolder'|trans|ucfirst, 'btn-default', {"data-toggle":"modal", "data-target":"#editMediaFolderDialog", "type":"button" } ) }}
               {% endif %}
             </div>
           </div>