Mailing form improvements

diff --git a/galette/templates/default/elements/mailing_recipients.html.twig b/galette/templates/default/elements/mailing_recipients.html.twig
index 90f93ba2cab41ac189a57a92a9e134f6c530825c..c03a42416618b6249490fd66ed3b73d078ee9e75 100644 (file)
--- a/galette/templates/default/elements/mailing_recipients.html.twig
+++ b/galette/templates/default/elements/mailing_recipients.html.twig
@@ -4,19 +4,21 @@
         {% if mailing.current_step == constant('Galette\\Core\\Mailing::STEP_SENT') %}
                 <p>{{ _T("Your message has been sent to <strong>%s members</strong>")|replace({'%s': count}) }}</p>
         {% else %}
-                <p id="recipients_count">{{ _T("You are about to send an e-mail to <strong>%s members</strong>")|replace({'%s': count}) }}</p>
+                <p id="recipients_count">{{ _T("You are about to send an e-mail to <strong>%s members</strong>")|replace({'%s': count})|raw }}</p>
         {% endif %}
     {% else %}
         {% if count_unreachables > 0 %}
-                <p id="recipients_count"><strong>{{ _T("None of the selected members has an email address.") }}</strong></p>
+                <p id="recipients_count"><em>{{ _T("None of the selected members has an email address.") }}</em></p>
          {% else %}
-                <p id="recipients_count"><strong>{{ _T("No member selected (yet).") }}</strong></p>
+                <p id="recipients_count"><em>{{ _T("No member selected (yet).") }}</em></p>
          {% endif %}
     {% endif %}
     {% if count_unreachables > 0 %}
-                <p id="unreachables_count">
-                    <strong>{{ count_unreachables }} {% if count_unreachables != 1 %}{{ _T("unreachable members:") }}{% else %}{{ _T("unreachable member:") }}{% endif %}</strong><br/>
-                    {{ _T("Some members you have selected have no e-mail address. However, you can generate envelope labels to contact them by snail mail.") }}
-                    <br/><a class="ui labeled icon button" href="{{ url_for('pdf-members-labels') }}?from=mailing"><i class="address card icon"></i> {{ _T("Generate labels") }}</a>
-                </p>
+                <div id="unreachables_count" class="ui message">
+                    <div class="header">
+                        {{ count_unreachables }} {% if count_unreachables != 1 %}{{ _T("unreachable members:") }}{% else %}{{ _T("unreachable member:") }}{% endif %}
+                    </div>
+                    <p>{{ _T("Some members you have selected have no e-mail address. However, you can generate envelope labels to contact them by snail mail.") }}</p>
+                    <a class="ui basic labeled icon button" href="{{ url_for('pdf-members-labels') }}?from=mailing"><i class="th icon"></i> {{ _T("Generate labels") }}</a>
+                </div>
     {% endif %}

diff --git a/galette/templates/default/pages/mailing_form.html.twig b/galette/templates/default/pages/mailing_form.html.twig
index acc2e47f873c80f84b0a5109df16e31a671905b0..aa98b6ccea21f7366253c83c1c98a1815d678cf5 100644 (file)
--- a/galette/templates/default/pages/mailing_form.html.twig
+++ b/galette/templates/default/pages/mailing_form.html.twig
@@ -15,65 +15,98 @@
                         {{ _T("Mailing information") }}
                     </div>
                     <div class="active content field">
-                        {% include "elements/mailing_recipients.html.twig" %}
-    {% if mailing.current_step == constant('Galette\\Core\\Mailing::STEP_SENT') %}
-        {% set path = url_for('members') %}
-        {% set text = _T("Go back to members list") %}
-    {% else %}
-        {% set path = '#' %}
-        {% set text = _T("Manage selected members") %}
-    {% endif %}
-                        <a
-                            id="btnusers"
-                            href="{{ path }}"
-                            class="jsonly disabled ui labeled icon button"
-                        >
-                            <i class="users icon"></i>
-                            {{ text }}
-                        </a>
-                        <noscript>
-                            <div class="ui message">{{ _T("This feature requires javascript.") }}</div>
-                        </noscript>
-                    </div>
-                </div>
-            </div>
-        {% if mailing.current_step == constant('Galette\\Core\\Mailing::STEP_START') %}
-            <div class="ui basic fitted segment">
-                <div class="ui styled fluid accordion row">
-                    <div class="active title">
-                        <i class="jsonly displaynone icon dropdown"></i>
-                        {{ _T("Attachments") }}
-                    </div>
-                    <div class="active content field">
-                        {% if attachments|length > 0 %}
-                            <label>
-                                {{ _T("Existing attachments:") }}
-                            </label>
-                            <ul id="existing_attachments">
+                        <div class="three fields">
+                            <div class="field">
+                                <label for="sender">{{ _T("Sender") }}</label>
+                                <select name="sender" id="sender" class="ui dropdown nochosen">
+                                    <option value="{{ constant('Galette\\Core\\GaletteMail::SENDER_PREFS') }}">{{ _T("from preferences") }}</option>
+                                {% if not login.isSuperAdmin() %}
+                                    <option value="{{ constant('Galette\\Core\\GaletteMail::SENDER_CURRENT') }}">{{ _T("current logged in user") }}</option>
+                                {% endif %}
+                                    <option value="{{ constant('Galette\\Core\\GaletteMail::SENDER_OTHER') }}">{{ _T("other") }}</option>
+                                </select>
+                            </div>
+                            <div class="field required">
+                                <label for="sender_name">{{ _T("Name") }}</label>
+                                <input type="text" name="sender_name" id="sender_name" value="{{ preferences.pref_email_nom }}" disabled="disabled"/>
+                            </div>
+                            <div class="field required">
+                                <label for="sender_address">{{ _T("Address") }}</label>
+                                <input type="text" name="sender_address" id="sender_address" value="{{ preferences.pref_email }}" disabled="disabled"/>
+                            </div>
+                        </div>
+                        <div class="ui section divider"></div>
+                        <div class="two fields">
+                            <div class="field">
+                                <label>{{ _T("Recipients") }}</label>
+                                {% include "elements/mailing_recipients.html.twig" %}
+                                {% if mailing.current_step == constant('Galette\\Core\\Mailing::STEP_SENT') %}
+                                    {% set path = url_for('members') %}
+                                    {% set text = _T("Go back to members list") %}
+                                {% else %}
+                                    {% set path = '#' %}
+                                    {% set text = _T("Manage selected members") %}
+                                {% endif %}
+                                <a
+                                    id="btnusers"
+                                    href="{{ path }}"
+                                    class="jsonly disabled ui labeled icon button"
+                                >
+                                    <i class="blue users icon"></i>
+                                    {{ text }}
+                                </a>
+                                <noscript>
+                                    <div class="ui compact message">{{ _T("This feature requires javascript.") }}</div>
+                                </noscript>
+                            </div>
+    {% if mailing.current_step == constant('Galette\\Core\\Mailing::STEP_START') %}
+                            <div class="field">
+                            {% if attachments|length > 0 %}
+                                <div class="ui tiny header">
+                                    <i class="paperclip icon"></i>
+                                    <div class="content">{{ _T("Existing attachments:") }}</div>
+                                </div>
+                                <div id="existing_attachments" class="ui middle aligned divided selection list">
                                 {% for attachment in attachments %}
-                                <li>
-                                    <a
-                                        href="?remove_attachment={{ attachment.getFileName() }}"
-                                        class="rm_attachement tooltip delete"
-                                    >
-                                        <i class="ui trash alt red icon"></i>
-                                        <span class="displaynone">{{ _T("Remove attachment") }}</span>
-                                    </a>
-                                    {{ attachment.getFileName() }}
-                                </li>
+                                    <div class="item">
+                                        <div class="content">
+                                            <a
+                                                href="?remove_attachment={{ attachment.getFileName() }}"
+                                                class="rm_attachement tooltip delete"
+                                            >
+                                                <i class="ui trash alt red icon"></i>
+                                                <span class="sr-only">{{ _T("Remove attachment") }}</span>
+                                            </a>
+                                            {{ attachment.getFileName() }}
+                                        </div>
+                                    </div>
                                 {% endfor %}
-                            </ul>
-                        {% endif %}
-                        <label for="attachment" title="{{ _T("Select attachments") }}">{{ _T("Add attachment") }}</label>
-                        <div class="ui right corner labeled input">
-                            <div class="ui corner label">
-                                <i class="circular inverted primary link icon info tooltip" title="{{ _T("Select files to add as attachments.<br/>Multiple file selection using 'ctrl' or 'shift' keys are only available on compatible browsers.") }}"></i>
+                                </div>
+                            {% else %}
+                                <div class="ui tiny header">
+                                    <i class="paperclip icon"></i>
+                                    <div class="content">{{ _T("Attachments") }}</div>
+                                </div>
+                            {% endif %}
+                                <div class="ui file action input">
+                                    <div class="ui corner labeled input">
+                                        <input type="file" name="attachment[]" id="attachment" multiple="multiple"/>
+                                        <div class="ui corner label">
+                                            <i class="circular inverted primary link small icon info tooltip" title="{{ _T("Select files to add as attachments.<br/>Multiple file selection using 'ctrl' or 'shift' keys are only available on compatible browsers.") }}"></i>
+                                        </div>
+                                    </div>
+                                    <label for="attachment" class="ui button">
+                                        <i class="blue upload icon"></i>
+                                        {{ _T("Add attachment") }}
+                                    </label>
+                                </div>
                             </div>
-                            <input type="file" name="attachment[]" id="attachment" multiple="multiple">
+    {% endif %}
                         </div>
                     </div>
                 </div>
             </div>
+        {% if mailing.current_step == constant('Galette\\Core\\Mailing::STEP_START') %}
 
             <div class="ui basic fitted segment">
                 <div class="ui styled fluid accordion row">
@@ -82,24 +115,6 @@
                         {{ _T("Write your mailing") }}
                     </div>
                     <div class="active content field">
-                        <div class="inline field">
-                            <label for="sender">{{ _T("Sender") }}</label>
-                            <select name="sender" id="sender" class="ui dropdown nochosen">
-                                <option value="{{ constant('Galette\\Core\\GaletteMail::SENDER_PREFS') }}">{{ _T("from preferences") }}</option>
-            {% if not login.isSuperAdmin() %}
-                                <option value="{{ constant('Galette\\Core\\GaletteMail::SENDER_CURRENT') }}">{{ _T("current logged in user") }}</option>
-            {% endif %}
-                                <option value="{{ constant('Galette\\Core\\GaletteMail::SENDER_OTHER') }}">{{ _T("other") }}</option>
-                            </select>
-                        </div>
-                        <div class="field required">
-                            <label for="sender_name">{{ _T("Name") }}</label>
-                            <input type="text" name="sender_name" id="sender_name" value="{{ preferences.pref_email_nom }}" disabled="disabled"/>
-                        </div>
-                        <div class="field required">
-                            <label for="sender_address">{{ _T("Address") }}</label>
-                            <input type="text" name="sender_address" id="sender_address" value="{{ preferences.pref_email }}" disabled="disabled"/>
-                        </div>
                         <div class="field required">
                             <label for="mailing_objet">{{ _T("Object:") }}</label>
                             <input type="text" name="mailing_objet" id="mailing_objet" value="{{ mailing.subject }}" size="80" required/>
@@ -109,83 +124,93 @@
                             <textarea name="mailing_corps" id="mailing_corps" cols="80" rows="15" required>{% if mailing.message %}{{ mailing.message|escape }}{% endif %}</textarea>
                             <input type="hidden" name="html_editor_active" id="html_editor_active" value="{% if html_editor_active %}1{% else %}0{% endif %}"/>
                         </div>
-                        <div id="summernote_toggler" class="jsonly displaynone ui basic right aligned fitted segment">
-                            <a class="ui blue tertiary button" href="javascript:activateMailingEditor('mailing_corps');" id="activate_editor">{{ _T("Activate HTML editor") }}</a>
+                        <div class="ui basic horizontal equal width segments">
+                            <div class="ui basic fitted segment">
+                                <div class="ui toggle checkbox">
+                                    <input type="checkbox" name="mailing_html" id="mailing_html" value="1" {% if mailing.html == 1 or preferences.pref_editor_enabled == 1 %}checked="checked"{% endif %}/>
+                                    <label for="mailing_html">{{ _T("Interpret HTML") }}</label>
+                                </div>
+                            </div>
+                            <div id="summernote_toggler" class="jsonly hidden ui basic fitted right aligned segment">
+                                <a class="ui blue tertiary button" href="javascript:activateMailingEditor('mailing_corps');" id="activate_editor">{{ _T("Activate HTML editor") }}</a>
+                            </div>
                         </div>
                         <div class="inline field">
-                            <input type="checkbox" name="mailing_html" id="mailing_html" value="1" {% if mailing.html == 1 or preferences.pref_editor_enabled == 1 %}checked="checked"{% endif %}/><label for="mailing_html">{{ _T("Interpret HTML") }}</label>
                         </div>
                     </div>
                 </div>
             </div>
 
             <div class="ui basic center aligned segment">
-                <button type="submit" name="mailing_go" id="btnpreview" class="ui labeled icon button">
-                    <i class="eye icon" aria-hidden="true"></i>
-                    {{ _T("Preview") }}
-                </button>
-                <button type="submit" name="mailing_save" class="ui labeled icon button action">
-                    <i class="save icon" aria-hidden="true"></i>
-                    {{ _T("Save") }}
-                </button>
-                <button type="submit" name="mailing_confirm" class="ui labeled icon button {% if constant('GALETTE_MODE') == 'DEMO' %} disabled" disabled="disabled{% endif %}">
-                    <i class="rocket icon" aria-hidden="true"></i>
-                    {{ _T("Send") }}
-                </button>
-                <button type="submit" name="mailing_cancel" formnovalidate class="ui labeled icon button">
-                    <i class="trash icon" aria-hidden="true"></i>
-                    {{ _T("Cancel mailing") }}
-                </button>
+                <div class="ui wrapping spaced buttons">
+                    <button type="submit" name="mailing_go" id="btnpreview" class="ui labeled icon button">
+                        <i class="eye blue icon" aria-hidden="true"></i>
+                        {{ _T("Preview") }}
+                    </button>
+                    <button type="submit" name="mailing_save" class="ui labeled icon button action">
+                        <i class="save green icon" aria-hidden="true"></i>
+                        {{ _T("Save") }}
+                    </button>
+                    <button type="submit" name="mailing_confirm" class="ui labeled icon button {% if constant('GALETTE_MODE') == 'DEMO' %} disabled" disabled="disabled{% endif %}">
+                        <i class="rocket red icon" aria-hidden="true"></i>
+                        {{ _T("Send") }}
+                    </button>
+                    <button type="submit" name="mailing_cancel" formnovalidate class="ui labeled icon button">
+                        <i class="times icon" aria-hidden="true"></i>
+                        {{ _T("Cancel mailing") }}
+                    </button>
+                </div>
             </div>
         {% endif %}
         {% if mailing.current_step == constant('Galette\\Core\\Mailing::STEP_PREVIEW') %}
             <div class="ui basic fitted segment">
                 <div class="ui styled fluid accordion row">
                     <div class="active title">
-                        <i class="jsonly displaynone icon dropdown"></i>
+                        <i class="jsonly hidden icon dropdown"></i>
                         {{ _T("Preview your mailing") }}
                     </div>
                     <div class="active content field">
-                        <div class="ui basic segments form">
-                            <div class="ui segment">
-                                <div class="inline field">
-                                    <label>{{ _T("Subject:") }}</label>
-                                    <span>{{ mailing.subject }}</span>
-                                </div>
-                            </div>
-                            <div class="ui segment">
-                                <div class="field">
-                                    <label>{{ _T("Message:") }}</label>
-
+                        <table class="ui very basic striped unstackable table">
+                            <tbody>
+                                <tr>
+                                    <th class="two wide">{{ _T("Subject:") }}</th>
+                                    <td>{{ mailing.subject }}</td>
+                                </tr>
+                                <tr>
+                                    <th class="two wide">{{ _T("Message:") }}</th>
+                                    <td>
             {% if mailing.html %}
-                                    <div>{{ mailing.message }}</div>
+                                        {{ mailing.message }}
             {% else %}
-                                    <pre>{{ mailing.wrapped_message }}</pre>
+                                        <pre>{{ mailing.wrapped_message }}</pre>
             {% endif %}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
 
-                                </div>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>
 
             <div class="ui basic center aligned segment">
-                <button type="submit" name="mailing_reset" class="ui labeled icon button">
-                    <i class="backward icon"></i>
-                    {{ _T("Modifiy mailing") }}
-                </button>
-                <button type="submit" name="mailing_confirm"{% if constant('GALETTE_MODE') == 'DEMO' %} class="ui labeled icon button disabled" disabled="disabled"{% else %} class="ui labeled icon button"{% endif %}>
-                    <i class="rocket icon" aria-hidden="true"></i>
-                    {{ _T("Send") }}
-                </button>
-                <button type="submit" name="mailing_cancel" formnovalidate class="ui labeled icon button">
-                    <i class="trash red icon" aria-hidden="true"></i>
-                    {{ _T("Cancel mailing") }}
-                </button>
+                <div class="ui wrapped wrapping spaced buttons">
+                    <button type="submit" name="mailing_reset" class="ui labeled icon button">
+                        <i class="backward icon"></i>
+                        {{ _T("Modifiy mailing") }}
+                    </button>
+                    <button type="submit" name="mailing_confirm"{% if constant('GALETTE_MODE') == 'DEMO' %} class="ui labeled icon button disabled" disabled="disabled"{% else %} class="ui labeled icon button"{% endif %}>
+                        <i class="rocket icon" aria-hidden="true"></i>
+                        {{ _T("Send") }}
+                    </button>
+                    <button type="submit" name="mailing_cancel" formnovalidate class="ui labeled icon button">
+                        <i class="trash red icon" aria-hidden="true"></i>
+                        {{ _T("Cancel mailing") }}
+                    </button>
 
-                <input type="hidden" name="mailing_objet" value="{{ mailing.subject }}"/>
-                <input type="hidden" name="mailing_corps" value="{% if mailing.message %}{{ mailing.message|escape }}{% endif %}"/>
+                    <input type="hidden" name="mailing_objet" value="{{ mailing.subject }}"/>
+                    <input type="hidden" name="mailing_corps" value="{% if mailing.message %}{{ mailing.message|escape }}{% endif %}"/>
+                </div>
             </div>
         {% endif %}
             {% include "components/forms/csrf.html.twig" %}
@@ -207,7 +232,7 @@
             var _body = $('#mailing_corps').val();
             var _html = $('#mailing_html').is(':checked');
             var _attachments = [];
-            $('#existing_attachments li').each(function(){
+            $('#existing_attachments .item').each(function(){
                 _attachments[_attachments.length] = $(this).text();
             });
             $.ajax({
@@ -370,24 +395,29 @@
             });
         }
 
-        $('.rm_attachement').click(function(){
+        $('.rm_attachement').click(function(event){
+            event.preventDefault();
             var _link = $(this);
             $('body').modal({
                 title: '{{ _T("Remove attachment") }}',
-                class: 'fullscreen scrolling',
+                class: 'tiny',
                 content: '{{ _T("Are you sure you want to remove this attachment?") }}<br/>{{ _T("This will immediately remove attachment from disk and cannot be undo.") }}',
+                onApprove: function() {
+                    window.location.href = '{{ url_for('mailing') }}' + _link.attr('href');
+                },
                 actions: [{
                     text    : '{{ _T("Remove")|e('js') }}',
                     class   : 'red approve',
-                    click   : function() {
-                        window.location.href = '{{ url_for('mailing') }}' + _link.attr('href');
-                    }
                 }, {
                     text    : '{{ _T("Cancel")|e('js') }}',
                     class   : 'cancel'
-                }]
+                }],
+                className: {
+                    'title': 'center aligned header',
+                    'content': 'center aligned content',
+                    'actions': 'center aligned actions'
+                }
             }).modal('show');
-            return false;
         });
 
         $('#sender').on('change', function() {