From c5c922e2c54c0a894e579ed92f919ebf3ea6a9cf Mon Sep 17 00:00:00 2001
From: Etienne Gutbub <e.gutbub@monsieurbiz.com>
Date: Wed, 12 Jun 2024 17:24:45 +0200
Subject: [PATCH] feat(Modal Buttons): improve readability for action buttons

---
 .../MediaManager/Modal/Content/_deleteFolder.html.twig    | 4 ++--
 .../Admin/MediaManager/Modal/Content/_newFolder.html.twig | 6 +++---
 .../MediaManager/Modal/Content/_renameFolder.html.twig    | 6 +++---
 .../views/Admin/MediaManager/Modal/_content.html.twig     | 8 +++++---
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/Resources/views/Admin/MediaManager/Modal/Content/_deleteFolder.html.twig b/src/Resources/views/Admin/MediaManager/Modal/Content/_deleteFolder.html.twig
index 7b409c7..79ba741 100644
--- a/src/Resources/views/Admin/MediaManager/Modal/Content/_deleteFolder.html.twig
+++ b/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>
diff --git a/src/Resources/views/Admin/MediaManager/Modal/Content/_newFolder.html.twig b/src/Resources/views/Admin/MediaManager/Modal/Content/_newFolder.html.twig
index 8aa57fb..2a66568 100644
--- a/src/Resources/views/Admin/MediaManager/Modal/Content/_newFolder.html.twig
+++ b/src/Resources/views/Admin/MediaManager/Modal/Content/_newFolder.html.twig
@@ -1,6 +1,5 @@
-<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 
@@ -8,12 +7,13 @@
                 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')}}')"
diff --git a/src/Resources/views/Admin/MediaManager/Modal/Content/_renameFolder.html.twig b/src/Resources/views/Admin/MediaManager/Modal/Content/_renameFolder.html.twig
index 3ce27c6..8ad5793 100644
--- a/src/Resources/views/Admin/MediaManager/Modal/Content/_renameFolder.html.twig
+++ b/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() }}')"
diff --git a/src/Resources/views/Admin/MediaManager/Modal/_content.html.twig b/src/Resources/views/Admin/MediaManager/Modal/_content.html.twig
index cfc5b35..9a9ed14 100644
--- a/src/Resources/views/Admin/MediaManager/Modal/_content.html.twig
+++ b/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' %}