Replace more jQuery UI tabs with SUI

diff --git a/galette/templates/default/elements/edit_pdf_models.html.twig b/galette/templates/default/elements/edit_pdf_models.html.twig
index 570e2dbea2de99dd049952065ac48f862e391626..5e4888c5be825cb9d5b61067e13b4c94d9413ceb 100644 (file)
--- a/galette/templates/default/elements/edit_pdf_models.html.twig
+++ b/galette/templates/default/elements/edit_pdf_models.html.twig
@@ -40,7 +40,7 @@
                     </div>
 {% endif %}
             </div>
-            <div class="ui basic center aligned segment">
+            <div class="ui basic fitted segment">
                 <input type="hidden" name="store" value="true"/>
                 <input type="hidden" name="model_id" value="{{ model.id }}"/>
 {% if model.id <= 4 %}
@@ -49,6 +49,7 @@
                 <button type="submit" class="ui labeled icon primary button action">
                     <i class="save icon"></i> {{ _T("Save") }}
                 </button>
+                <span id="legend-container"></span>
                 {% include 'components/forms/csrf.html.twig' %}
             </div>
         </form>

diff --git a/galette/templates/default/pages/configuration_dynamic_fields.html.twig b/galette/templates/default/pages/configuration_dynamic_fields.html.twig
index 9926b1877ef93ce78c108a6ac8c1ddcfdb8eee98..84f378c9cf85ccba65fdbffc21c13459b1c1f1fd 100644 (file)
--- a/galette/templates/default/pages/configuration_dynamic_fields.html.twig
+++ b/galette/templates/default/pages/configuration_dynamic_fields.html.twig
@@ -1,36 +1,32 @@
 {% extends 'page.html.twig' %}
 
 {% block content %}
-    <section class="tabbed">
-        <div id="configfiches_tabs">
+    <div class="ui three item top attached stackable tabs menu">
+{% for key, form in all_forms %}
+        <a href="{{ path_for('configureDynamicFields', {'form_name': key}) }}" class="item{% if form_name == key %} active{% endif %}" data-tab="{{ loop.index }}">{{ form }}</a>
+{% endfor %}
+    </div>
+{% for key, form in all_forms %}
+    <div class="ui bottom attached{% if form_name == key %} active{% endif %} tab segment" data-tab="{{ loop.index }}">
+    {% if form_name == key %}
+        {% include 'elements/edit_dynamic_fields.html.twig' %}
+        <div class="ui basic fitted segment">
             <a
                 id="addfield"
                 href="{{ path_for('addDynamicField', {'form_name': form_name}) }}"
-                class="ui compact icon green button tab-button tooltip"
+                class="ui labeled icon primary button tooltip"
                 data-html="{{ _T("Add")|e("js") }}"
             >
                 <i class="plus icon"></i>
-                <span class="sr-only">{{ _T("Add") }}</span>
+                {{ _T("Add") }}
             </a>
-            <ul>
-{% for key, form in all_forms %}
-                <li{% if form_name == key %} class="ui-tabs-selected {{ loop.index0 }}"{% endif %}><a href="{{ path_for('configureDynamicFields', {'form_name': key}) }}">{{ form }}</a></li>
-{% endfor %}
-            </ul>
-            <div id="ui-tabs-{{ form_name }}">
-                {% include 'elements/edit_dynamic_fields.html.twig' %}
-            </div>
         </div>
-    </section>
+    {% endif %}
+    </div>
+{% endfor %}
 {% endblock %}
 
 {% block javascripts %}
-{% set activetab = "" %}
-{% for key, form in all_forms %}
-    {% if form_name == key %}
-        {% set activetab = loop.index0 %}
-    {% endif %}
-{% endfor %}
         <script type="text/javascript">
             var _form_name;
             $('#addfield').click(function(e){
@@ -66,37 +62,5 @@
                     }
                 });
             });
-
-            $('#configfiches_tabs').tabs({
-                active: {{ activetab }},
-                load: function(event, ui) {
-                    $('#configfiches_tabs input:submit, #configfiches_tabs .button, #configfiches_tabs input:reset').button();
-                },
-                beforeLoad: function(event, ui) {
-                    _form_name = ui.ajaxSettings.url.split('/');
-                    _form_name = _form_name[_form_name.length-1]
-
-                    if ( ui.ajaxSettings.url == '{{ path_for('configureDynamicFields', {'form_name': form_name}) }}'
-                        ||  ui.ajaxSettings.url == '{{ path_for('configureDynamicFields') }}'
-                    ) {
-                        var _current = $('#ui-tabs-{{ form_name }}');
-                        if (_current) {
-                            $('#'+ui.panel[0].id).append(_current)
-                        }
-                        return false; //avoid reloading first tab onload
-                    }
-
-                    var _dimmer = $('<div id="jsloader" class="ui active page dimmer"><div class="ui text loader">{{ _T("Currently loading...") }}</div><p></p></div>');
-                    $('body').append(_dimmer);
-
-                    ui.jqXHR.always(function(){
-                        $('#jsloader').remove();
-                    });
-
-                    ui.jqXHR.fail(function(){
-                        alert('{{ _T("An error occurred :(")|e("js") }}');
-                    });
-                }
-            });
         </script>
 {% endblock %}

diff --git a/galette/templates/default/pages/configuration_pdf_models.html.twig b/galette/templates/default/pages/configuration_pdf_models.html.twig
index 293212b5a79cf6b8795990ff2e93a12682461dd3..61183906c5a60df511282647ed0f63ef2d90fb4a 100644 (file)
--- a/galette/templates/default/pages/configuration_pdf_models.html.twig
+++ b/galette/templates/default/pages/configuration_pdf_models.html.twig
@@ -1,67 +1,23 @@
 {% extends 'page.html.twig' %}
 
-{% set activetab = '' %}
-{% for m in models %}
-    {% if m.id == model.id %}
-        {% set activetab = loop.index0 %}
-    {% endif %}
-{% endfor %}
-
 {% block content %}
-        <div class="tabbed">
-        <div id="tabs">
-            <ul>
+        <div class="ui four item top attached stackable tabs menu">
 {% for m in models %}
-                <li{% if m.id == model.id %} class="ui-tabs-selected"{% endif %}><a href="{{ path_for('pdfModels', {'id': m.id}) }}">{{ m.name }}</a></li>
+            <a href="{{ path_for('pdfModels', {'id': m.id}) }}" class="item{% if m.id == model.id %} active{% endif %}" data-tab="{{ m.id }}">{{ m.name }}</a>
 {% endfor %}
-            </ul>
-            <div id="ui-tabs-{{ activetab }}">
-{% include 'elements/edit_pdf_models.html.twig' %}
-            </div>
         </div>
+{% for m in models %}
+        <div class="ui bottom attached{% if m.id == model.id %} active{% endif %} tab segment" data-tab="{{ loop.index }}">
+    {% if m.id == model.id %}
+        {% include 'elements/edit_pdf_models.html.twig' %}
+    {% endif %}
         </div>
+{% endfor %}
 {% endblock %}
 
 {% block javascripts %}
         <script type="text/javascript">
-            _addLegenButton('#tabs');
-
-            $(function(){
-                $('#tabs').tabs({
-                    active: {{ activetab }},
-                    load: function(event, ui) {
-                        $('#tabs input:submit, #tabs .button, #tabs input:reset' ).button();
-                        _handleLegend($(event.currentTarget).attr('href').replace('{{ path_for("pdfModels") }}/', ''));
-                    },
-                    {# Cannot include loader.js.twig here because we need to use beforeSend specificaly... #}
-                    beforeLoad: function(event, ui) {
-                        _tab_name = ui.ajaxSettings.url.split('/');
-                        _tab_name = _tab_name[_tab_name.length-1];
-
-                        _handleLegend({{ model.id }});
-
-                        if ( ui.ajaxSettings.url == '{{ path_for("pdfModels", {"id": model.id}) }}'
-                             ||  ui.ajaxSettings.url == '{{ path_for("pdfModels") }}'
-                        ) {
-                            var _current = $('#ui-tabs-{{ activetab }}');
-                            if (_current) {
-                                $('#'+ui.panel[0].id).append(_current)
-                            }
-                            return false; //avoid reloading first tab onload
-                        }
-
-                        var _dimmer = $('<div id="jsloader" class="ui active page dimmer"><div class="ui text loader">{{ _T("Currently loading...") }}</div><p></p></div>');
-                        $('body').append(_dimmer);
-
-                        ui.jqXHR.always(function(){
-                            $('#jsloader').remove();
-                        });
-
-                        ui.jqXHR.fail(function(){
-                            alert('{{ _T("An error occurred :(")|e("js") }}');
-                        });
-                    }
-                });
-            });
+            _addLegenButton('#legend-container');
+            _handleLegend();
         </script>
 {% endblock %}