Rework checkboxes with SUI

diff --git a/galette/templates/default/components/forms/input.html.twig b/galette/templates/default/components/forms/input.html.twig
index b3254a8b584df694f68bfacee7aa99be9217db71..c7850d2070d4396a8098b25c5991eea7dbad12ff 100644 (file)
--- a/galette/templates/default/components/forms/input.html.twig
+++ b/galette/templates/default/components/forms/input.html.twig
@@ -2,6 +2,9 @@
 {% if notag is not defined %}
 <div{% if component_id is defined %} id="{{ component_id }}"{% endif %} class="{{ component_class ?? 'inline field' }}{% if required is defined and required == true %} required{% endif %}">
 {% endif %}
+    {% if type is defined and type == 'checkbox' %}
+        <div class="ui toggle{% if checked is defined and checked == true %} checked{% endif %} right aligned checkbox">
+    {% else %}
     {% block label %}
         <label for="{{ id }}"{% if title is defined %} title="{{ title }}"{% endif %}{% if labelclass is defined %} class="{% if labelclass is defined %}{{ labelclass }}{% endif %}"{% endif %}>
         {% if masschange ?? false %}
@@ -11,6 +14,7 @@
             {{ label }}
         </label>
     {% endblock %}
+    {% endif %}
     {% if type is defined and type == 'password' %}<div class="ui input">{% endif %}
     {% if search_id is defined %}<div id="{{ search_id }}" class="ui search field input"><div class="ui icon input">{% endif %}
     {% block element %}<input
@@ -27,11 +31,23 @@
         {% if autocomplete is defined %} autocomplete="{{ autocomplete }}"{% endif %}
         {% if autofocus is defined %} autofocus{% endif %}
         {% if size is defined %} size="{{ size }}"{% endif %}
-        {% if checked is defined and checked == true %} checked="checked"{% endif %}
+        {% if checked is defined and checked == true %} checked{% endif %}
         />
     {% endblock %}
-    {% if search_id is defined %}<i class="search icon"></i></div></div>{% endif %}
+    {% if search_id is defined %}<i class="jsonly hidden search icon"></i></div></div>{% endif %}
     {% if type is defined and type == 'password' %}</div>{% endif %}
+    {% if type is defined and type == 'checkbox' %}
+    {% block label_after %}
+        <label for="{{ id }}"{% if title is defined %} title="{{ title }}"{% endif %}{% if labelclass is defined %} class="{% if labelclass is defined %}{{ labelclass }}{% endif %}"{% endif %}>
+        {% if masschange ?? false %}
+            {# Add a checkbox for fields to change on mass edition #}
+            <input type="checkbox" name="mass_{{ entry.field_id }}" class="mass_checkbox"/>
+        {% endif %}
+            {{ label }}
+        </label>
+    {% endblock %}
+        </div>
+    {% endif %}
     {% if tip is defined and tip != '' %}<i class="circular inverted primary small icon info tooltip" data-html="{{ tip }}"></i>{% endif %}
     {% if example is defined %}<span class="exemple">{{ example }}</span>{% endif %}
 {% if notag is not defined %}

diff --git a/galette/templates/default/components/forms/picture.html.twig b/galette/templates/default/components/forms/picture.html.twig
index 7be7312bfc9b27c5656618b002f57a9fe1313a63..a466278a5572cfd620ef990970718b4d087c570e 100644 (file)
--- a/galette/templates/default/components/forms/picture.html.twig
+++ b/galette/templates/default/components/forms/picture.html.twig
@@ -1,13 +1,26 @@
-<div class="field">
-    <label>{{ _T("Picture:") }}</label>
+<div class="field ui items">
+    <label for="photo">{{ _T("Picture:") }}</label>
+    <div class="item">
+        <div class="image">
     {% if member.id %}
         {% set photo_id = member.id %}
     {% else %}
         {% set photo_id = 0 %}
     {% endif %}
-    <img id="photo_adh" src="{{ path_for("photo", {"id": photo_id, "rand": time}) }}" class="picture" width="{{ member.picture.getOptimalWidth() }}" height="{{ member.picture.getOptimalHeight() }}" alt="{{ _T("Picture") }}"/><br/>
-{% if member.hasPicture() == 1 %}
-    <label for="del_photo" class="labelalign">{{ _T("Delete image") }}</label> <input type="checkbox" name="del_photo" id="del_photo" value="1"/><br/>
-{% endif %}
-    <input class="labelalign" type="file" name="photo"/>
+            <img id="photo_adh" src="{{ path_for("photo", {"id": photo_id, "rand": time}) }}" class="picture" width="{{ member.picture.getOptimalWidth() }}" height="{{ member.picture.getOptimalHeight() }}" alt="{{ _T("Picture") }}"/>
+        </div>
+        <div class="content">
+            <div class="description">
+                <input class="labelalign" type="file" name="photo"/>
+            </div>
+            <div class="extra">
+    {% if member.hasPicture() == 1 %}
+                <div class="ui toggle checkbox">
+                    <input type="checkbox" name="del_photo" id="del_photo" value="1"/>
+                    <label for="del_photo" class="labelalign">{{ _T("Delete image") }}</label>
+                </div>
+    {% endif %}
+            </div>
+        </div>
+    </div>
 </div>

diff --git a/ui/semantic/galette/modules/checkbox.overrides b/ui/semantic/galette/modules/checkbox.overrides
new file mode 100644 (file)
index 0000000..5a4d9ab
--- /dev/null
+++ b/ui/semantic/galette/modules/checkbox.overrides
@@ -0,0 +1,11 @@
+/*******************************
+         Galette Overrides
+*******************************/
+
+.ui.right.aligned.toggle.checkbox label {
+    font-weight: bold;
+}
+.ui.right.aligned.toggle.checkbox input:checked ~ label,
+.ui.right.aligned.toggle.checkbox input:active ~ label {
+ color: @textColor !important;
+}

diff --git a/ui/semantic/galette/modules/checkbox.variables b/ui/semantic/galette/modules/checkbox.variables
new file mode 100644 (file)
index 0000000..46c37fb
--- /dev/null
+++ b/ui/semantic/galette/modules/checkbox.variables
@@ -0,0 +1,3 @@
+/************************************
+     Galette Variable Overrides
+************************************/

diff --git a/ui/semantic/theme.config b/ui/semantic/theme.config
index 3f460ea2585ca5b40f689568defe1e9789631e0a..6dc94b3d4e32abd4b2170bc910ec952c8aab0cd7 100644 (file)
--- a/ui/semantic/theme.config
+++ b/ui/semantic/theme.config
@@ -52,7 +52,7 @@
 /* Modules */
 @accordion  : 'galette';
 @calendar   : 'default';
-@checkbox   : 'default';
+@checkbox   : 'galette';
 @dimmer     : 'default';
 @dropdown   : 'default';
 @embed      : 'default';