Merge pull request #19 from etienne-monsieurbiz/feature/rename-folder

Modal Buttons: improve readability for action buttons

Author: maximehuran

src/Resources/views/Admin/MediaManager/Modal/Content/_deleteFolder.html.twig

@@ -1,13 +1,13 @@
 {% if path is not empty and is_empty_files_list(files) %}
-<div class="ui list">
+<div class="ui relaxed horizontal list">
     <div class="item monsieurbiz-sylius-file-manager__item monsieurbiz-sylius-file-manager__item-new-folder">
-        <i class="trash icon"></i>
         <div class="content">
             <div 
                 class="description monsieurbiz-sylius-file-manager__new-folder-label ui button mini negative" 
                 style="max-width: 200px;color: white;" 
                 onclick="monsieurbizSyliusMediaManagerDeleteFolder('{{ inputName | escape('js') }}', '{{ folder | escape('js')}}', '{{ path | escape('js')}}', '{{ 'monsieurbiz_sylius_media_manager.ui.delete_folder_confirm' | trans({'%path%': path}) | escape('js')}}')"
             >
+                <i class="trash icon"></i>
                     {{ 'monsieurbiz_sylius_media_manager.ui.delete_folder' | trans }}
             </div>
         </div>

src/Resources/views/Admin/MediaManager/Modal/Content/_newFolder.html.twig

@@ -1,19 +1,19 @@
-<div class="ui list">
+<div class="ui relaxed horizontal list">
     <div class="item monsieurbiz-sylius-file-manager__item monsieurbiz-sylius-file-manager__item-new-folder">
-        <i class="plus icon"></i>
         <div class="content">
             {# Button to create folder #}
             <div 
                 class="description monsieurbiz-sylius-file-manager__new-folder-label ui button mini basic"
                 style="max-width: 200px;" 
                 onclick="this.style.display='none';this.parentNode.querySelector('.monsieurbiz-sylius-file-manager__new-folder').style.display='block';this.parentNode.querySelector('.monsieurbiz-sylius-file-manager__new-folder input').focus();"
             >
+                <i class="plus icon"></i>
                 {{ 'monsieurbiz_sylius_media_manager.ui.create_folder' | trans }}
             </div>
 
             {# Form to create folder #}
             <div class="description monsieurbiz-sylius-file-manager__new-folder ui form mini" style="display: none;">
-                <input type="text" name="folder" class="ui field" style="max-width: 200px;height:28px;"/>
+                <input type="text" name="folder" class="ui field" style="max-width: 200px;height:28px; width: auto;"/>
                 <div 
                     class="ui button mini" 
                     onclick="monsieurbizSyliusMediaManagerCreateFolder(this.parentNode.querySelector('input'), '{{ inputName | escape('js') }}', '{{ folder | escape('js')}}', '{{ path | escape('js')}}')"

src/Resources/views/Admin/MediaManager/Modal/Content/_renameFolder.html.twig

@@ -1,19 +1,19 @@
 {% if path is not empty %}
-    <div class="ui list">
+    <div class="ui relaxed horizontal list">
         <div class="item monsieurbiz-sylius-file-manager__item monsieurbiz-sylius-file-manager__item-rename-folder">
-            <i class="edit icon"></i>
             <div class="content">
                 <div
                         class="description monsieurbiz-sylius-file-manager__rename-folder-label ui button mini secondary"
                         style="max-width: 200px;color: white;"
                         onclick="this.style.display='none';this.parentNode.querySelector('.monsieurbiz-sylius-file-manager__rename-folder').style.display='block';this.parentNode.querySelector('.monsieurbiz-sylius-file-manager__rename-folder input').focus();"
                 >
+                    <i class="edit icon"></i>
                     {{ 'monsieurbiz_sylius_media_manager.ui.rename_folder' | trans }}
                 </div>
 
                 {# Form to rename folder #}
                 <div class="description monsieurbiz-sylius-file-manager__rename-folder ui form mini" style="display: none;">
-                    <input type="text" name="folder" class="ui field" style="max-width: 200px;height:28px;"/>
+                    <input type="text" name="folder" class="ui field" style="max-width: 200px;height:28px;width: auto;"/>
                     <div
                             class="ui button mini"
                             onclick="monsieurbizSyliusMediaManagerRenameFolder(this.parentNode.querySelector('input'), '{{ inputName | escape('js') }}', '{{ folder | escape('js')}}', '{{ path | escape('js')}}', '{{ 'monsieurbiz_sylius_media_manager.ui.rename_folder_confirm'| trans({'%path%': path}) | escape('js') }}', '{{ 'monsieurbiz_sylius_media_manager.ui.rename_folder_confirm_bis'| trans() }}')"

src/Resources/views/Admin/MediaManager/Modal/_content.html.twig

@@ -1,4 +1,6 @@
-{% include '@MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Modal/Content/_newFolder.html.twig' %}
-{% include '@MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Modal/Content/_deleteFolder.html.twig' %}
-{% include '@MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Modal/Content/_renameFolder.html.twig' %}
+<div>
+    {% include '@MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Modal/Content/_newFolder.html.twig' %}
+    {% include '@MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Modal/Content/_renameFolder.html.twig' %}
+    {% include '@MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Modal/Content/_deleteFolder.html.twig' %}
+</div>
 {% include '@MonsieurBizSyliusMediaManagerPlugin/Admin/MediaManager/Modal/Content/_files.html.twig' %}