Use same style for file inputs across templates

diff --git a/galette/templates/default/components/dynamic_fields.html.twig b/galette/templates/default/components/dynamic_fields.html.twig
index a635277fb039642d650a18c1d3eb8fbdac691c2d..71f03cd99a41660b69fc2ce7a44f0bc5459d78d8 100644 (file)
--- a/galette/templates/default/components/dynamic_fields.html.twig
+++ b/galette/templates/default/components/dynamic_fields.html.twig
@@ -73,16 +73,19 @@
             />
         </div>
     {% elseif get_class(field) == 'Galette\\DynamicFields\\File' %}
-        {% if object.id %}
-        <label class="labelalign" for="info_field_{{ field.getId() }}_{{ loop }}_new">{{ _T("new") }}</label>
-        {% endif %}
-        <input
-            type="file"
-            name="info_field_{{ field.getId() }}_{{ loop }}"
-            id="info_field_{{ field.getId() }}_{{ loop }}_new"
-            {% if field.isRequired() and valuedata == '' %} required="required"{% endif %}
-            {% if disabled %} disabled="disabled"{% endif %}
-        />
+        <div class="ui file action input">
+            <input
+                type="file"
+                name="info_field_{{ field.getId() }}_{{ loop }}"
+                id="info_field_{{ field.getId() }}_{{ loop }}_new"
+                {% if field.isRequired() and valuedata == '' %} required="required"{% endif %}
+                {% if disabled %} disabled="disabled"{% endif %}
+            />
+            <label for="info_field_{{ field.getId() }}_{{ loop }}_new" class="ui button">
+                <i class="blue upload icon"></i>
+                {% if object.id %}{{ _T("Choose another file") }}{% else %}{{ _T("Choose a file") }}{% endif %}
+            </label>
+        </div>
         {% if object.id %}
         <label class="labelalign" for="info_field_{{ field.getId() }}_{{ loop }}_current">{{ _T("current") }}</label>
         <a href="{{ url_for("getDynamicFile", {"id": object.id, "fid": field.getId(), "pos": loop, "name": valuedata}) }}">

diff --git a/galette/templates/default/components/forms/picture.html.twig b/galette/templates/default/components/forms/picture.html.twig
index 9f4eb41c00ef6bf7093111e412574659230959f8..0fdefd4fb63e98cd8c9b34017ea2168202e13b9e 100644 (file)
--- a/galette/templates/default/components/forms/picture.html.twig
+++ b/galette/templates/default/components/forms/picture.html.twig
@@ -11,11 +11,13 @@
         </div>
         <div class="content">
             <div class="description">
-                <label for="photo" class="ui labeled icon button{% if constant('GALETTE_MODE') == constant('\\Galette\\Core\\Galette::MODE_DEMO') %} disabled{% endif %}">
-                    <i class="blue upload icon"></i>
-                    {{ _T("Choose a file") }}
-                </label>
-                <input class="labelalign ui invisible file input" type="file" name="photo"/>
+                <div class="ui file action input">
+                    <input type="file" name="photo"/>
+                    <label for="photo" class="ui button{% if constant('GALETTE_MODE') == constant('\\Galette\\Core\\Galette::MODE_DEMO') %} disabled{% endif %}">
+                        <i class="blue upload icon"></i>
+                        {% if member.hasPicture() == 1 %}{{ _T("Choose another file") }}{% else %}{{ _T("Choose a file") }}{% endif %}
+                    </label>
+                </div>
             </div>
             <div class="extra">
     {% if member.hasPicture() == 1 %}

diff --git a/galette/templates/default/pages/import.html.twig b/galette/templates/default/pages/import.html.twig
index 0b9d884204d943974f6c70237e5025d339bc98e8..f5f0a605f7eb65e77d707e4a2c0b24c30be386b0 100644 (file)
--- a/galette/templates/default/pages/import.html.twig
+++ b/galette/templates/default/pages/import.html.twig
@@ -87,8 +87,15 @@
                     <div class="active content field">
                         <form class="ui form" action="{{ url_for('uploadImportFile') }}" method="post" enctype="multipart/form-data">
                             <div class="field">
-                                <label for="new_file">{{ _T('Select a file:') }}</label>
-                                <input class="labelalign" type="file" name="new_file" accept="text/csv" id="new_file"/>
+                                <div class="ui file action input">
+                                    <input type="file" name="new_file" accept="text/csv" id="new_file"/>
+                                    <label for="new_file" class="ui button">
+                                        <i class="blue file csv icon"></i>
+                                        {{ _T('Choose a file') }}
+                                    </label>
+                                </div>
+
+
                             </div>
                             <div class="ui basic center aligned segment">
                                 <button type="submit" name="upload" id="upload" class="ui labeled icon button">

diff --git a/galette/templates/default/pages/preferences.html.twig b/galette/templates/default/pages/preferences.html.twig
index 6572a39a24ac3db5c3d9fa2228c81b73e4c32673..ed341882752461e3fb1ec7ee81d7838747aa277b 100644 (file)
--- a/galette/templates/default/pages/preferences.html.twig
+++ b/galette/templates/default/pages/preferences.html.twig
@@ -48,15 +48,16 @@
                             <div class="image">
                                 <img src="{{ url_for('logo') }}" class="picture" width="{{ logo.getOptimalWidth() }}" height="{{ logo.getOptimalHeight() }}" alt="{{ _T("Current logo") }}"/>
                             </div>
-        {% else %}
-                            <label for="logo_picture" class="ui labeled icon button{% if constant('GALETTE_MODE') == constant('\\Galette\\Core\\Galette::MODE_DEMO') %} disabled{% endif %}">
-                                <i class="blue upload icon"></i>
-                                {{ _T("Choose a file") }}
-                            </label>
         {% endif %}
                             <div class="content">
                                 <div class="description">
-                                    <input type="file" name="logo" id="logo_picture" class="ui invisible file input"{% if constant('GALETTE_MODE') == constant('\\Galette\\Core\\Galette::MODE_DEMO') %} disabled="disabled"{% endif %}/>
+                                    <div class="ui file action input">
+                                        <input type="file" name="logo" id="logo_picture"{% if constant('GALETTE_MODE') == constant('\\Galette\\Core\\Galette::MODE_DEMO') %} disabled="disabled"{% endif %}/>
+                                        <label for="logo_picture" class="ui button{% if constant('GALETTE_MODE') == constant('\\Galette\\Core\\Galette::MODE_DEMO') %} disabled{% endif %}">
+                                            <i class="blue upload icon"></i>
+                                            {% if logo.isCustom() %}{{ _T("Choose another file") }}{% else %}{{ _T("Choose a file") }}{% endif %}
+                                        </label>
+                                    </div>
                                 </div>
                                 <div class="extra">
         {% if logo.isCustom() %}
@@ -659,15 +660,16 @@
                             <div class="image">
                                 <img src="{{ url_for('printLogo') }}" class="picture" width="{{ print_logo.getOptimalWidth() }}" height="{{ print_logo.getOptimalHeight() }}" alt="{{ _T("Current logo for printing") }}"/><br/>
                             </div>
-    {% else %}
-                            <label for="card_logo" class="ui labeled icon button{% if constant('GALETTE_MODE') == constant('\\Galette\\Core\\Galette::MODE_DEMO') %} disabled{% endif %}">
-                                <i class="blue upload icon"></i>
-                                {{ _T("Choose a file") }}
-                            </label>
     {% endif %}
                             <div class="content">
                                 <div class="description">
-                                    <input type="file" name="card_logo" id="card_logo" class="ui invisible file input"{% if constant('GALETTE_MODE') == constant('Galette\\Core\\Galette::MODE_DEMO') %} disabled="disabled"{% endif %}/>
+                                    <div class="ui file action input">
+                                        <input type="file" name="card_logo" id="card_logo"{% if constant('GALETTE_MODE') == constant('Galette\\Core\\Galette::MODE_DEMO') %} disabled="disabled"{% endif %}/>
+                                        <label for="card_logo" class="ui button{% if constant('GALETTE_MODE') == constant('\\Galette\\Core\\Galette::MODE_DEMO') %} disabled{% endif %}">
+                                            <i class="blue upload icon"></i>
+                                            {% if print_logo.isCustom() %}{{ _T("Choose another file") }}{% else %}{{ _T("Choose a file") }}{% endif %}
+                                        </label>
+                                    </div>
                                 </div>
                                 <div class="extra">
     {% if print_logo.isCustom() %}