Merge pull request #2646 from mike-esokia/PHRAS-2099_refacto_push_feedback

PHRAS-2099 WIP refacto push feedback

lib/Alchemy/Phrasea/Controller/Prod/LanguageController.php

@@ -153,6 +153,7 @@ class LanguageController
             'title notice'        => $translator->trans('prod:mapboxgl: title notice'),
             'description notice'  => $translator->trans('prod:mapboxgl: description notice'),
             'title-map-dialog'    => $translator->trans('prod:mapboxgl: title map dialog'),
+            'create new user'     => $translator->trans('prod:push: create new user'),
         ]);
     }
 }

templates/web/prod/User/Add.html.twig

@@ -4,57 +4,39 @@
         <table>
             <tr>
                 <td>
-                    <label for="">{{ 'First Name' | trans }} *</label>
+                    <input name="firstname" placeholder="{{ 'First Name' | trans }} *" type="text" value=""/>
                 </td>
                 <td>
-                    <input name="firstname" type="text" value=""/>
+                    <input name="lastname" placeholder="{{ 'Last Name' | trans }} *" type="text" value=""/>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <input name="email" placeholder="{{ 'Email Name' | trans }} *" type="text" value=""/>
                 </td>
             </tr>
             <tr>
                 <td>
-                    <label for="">{{ 'Last Name' | trans }} *</label>
+                    <input name="company" placeholder="{{ 'Company' | trans }}" type="text" value=""/>
                 </td>
                 <td>
-                    <input name="lastname" type="text" value=""/>
+                    <input name="job" placeholder="{{ 'Job' | trans }}" type="text" value=""/>
                 </td>
             </tr>
             <tr>
                 <td>
-                    <label for="">{{ 'Email Name' | trans }} *</label>
+                    <input name="city" placeholder="{{ 'City' | trans }}" type="text" value="" class="geoname_field"
+                           autocomplete="false"/>
                 </td>
                 <td>
-                    <input name="email" type="text" value=""/>
+                    <input name="pays" placeholder="{{ 'Pays' | trans }}" type="text" value="" class="geoname_field"
+                           autocomplete="false"/>
                 </td>
             </tr>
             <tr>
-                <td>
-                    <label for="">{{ 'Job' | trans }}</label>
-                </td>
-                <td>
-                    <input name="job" type="text" value=""/>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <label for="">{{ 'Company' | trans }}</label>
-                </td>
-                <td>
-                    <input name="company" type="text" value=""/>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <label for="">{{ 'City' | trans }}</label>
-                </td>
-                <td>
-                    <input name="city" type="text" value="" class="geoname_field" autocomplete="false"/>
-                </td>
-            </tr>
-            <tr>
-                <td></td>
-                <td>
-                    <button class="valid btn btn-inverse" type="submit">{{ 'Add' | trans }}</button>
-                    <button class="cancel btn btn-inverse" type="button">{{ 'Cancel' | trans }}</button>
+                <td colspan="2" style="text-align: center;padding: 10px 0px;">
+                    <button class="cancel" type="button">{{ 'Cancel' | trans }}</button>
+                    <button class="valid" type="submit">{{ 'Add' | trans }}</button>
                 </td>
             </tr>
             <tr>

templates/web/prod/actions/Push.html.twig

@@ -15,20 +15,22 @@
 <div class="PNB PushBox" id="PushBox" >
     <div class="PNB" style="width:205px;">
         <div class="PNB10 LeftColumn">
-            <div class="PNB" style="height:130px; text-align:center;">
+            <div class="PNB" style="text-align:center;">
                 {% if context == 'Push' %}
-                    <img style="margin:30px 0;" src="/assets/common/images/icons/push64.png"/>
+                    <img style="width: 36px; height: 36px" src="/assets/common/images/icons/push64.png"/>
                 {% else %}
-                    <img style="margin:30px 0;" src="/assets/common/images/icons/Feedback60.png"/>
+                    <img style="width: 36px; height: 36px" src="/assets/common/images/icons/Feedback60.png"/>
                 {% endif %}
             </div>
-            <div class="PNB content" style="top:150px; overflow-y:auto;">
+            <div class="PNB content" style="top:45px; overflow-y:auto;">
                 <div style="padding:10px">
-                    <h1>{{ 'Grant rights' | trans }}</h1>
+                    <span class="main-title"><img
+                                src="/assets/common/images/icons/hand-grey.png"/>{{ 'Grant rights' | trans }}</span>
                     <ul class="general_togglers">
                     {% if context == 'Feedback' %}
                         <li>
                             <button type="button" class="general_toggler btn btn-inverse" feature="agree">
+                                <img/>
                                 {{ 'Contributor' | trans }}
                             </button>
                         </li>
@@ -39,158 +41,164 @@
                         </li>
                     {% endif %}
                         <li>
-                            <button type="button" class="general_toggler btn btn-inverse" feature="HD">
+                            <button type="button" class="general_toggler" feature="HD">
+                                <img src="/assets/common/images/icons/download-blue.png" class="image-normal"/>
+                                <img src="/assets/common/images/icons/download-white.png" class="image-hover"/>
                                 {{ 'HD Download' | trans }}
                             </button>
                         </li>
                     </ul>
                 </div>
                 <div style="padding:10px;">
-                    <h1>{{ 'Lists' | trans }}</h1>
+                    <div class="list-container">
+                        <span class="main-title">
+                            <img src="/assets/common/images/icons/list-grey.png"/>{{ 'Lists' | trans }}</span>
+                        <ul class="list">
+                            {% for list in lists %}
+                                <li class="list" style="padding:6px 2px;position: relative;">
+                                    <a class="list_loader"
+                                       href="{{ path('prod_push_lists_list', { 'list_id' : list.getId() }) }}">
+                                        {#{% if list.getOwner(app.getAuthenticatedUser()).getRole() >= constant('Alchemy\\Phrasea\\Model\\Entities\\UsrListOwner::ROLE_EDITOR') %}#}
+                                        {#<img src="/assets/prod/images/Push/list-icon.png" />#}
+                                        {#{% else %}#}
+                                        {#<img src="/assets/common/images/icons/SHARE16.png" />#}
+                                        {#{% endif %}#}
+                                        {{ list.getName() }}
+                                        ({{ list.getEntries().count() }})
+                                    </a>
+                                    <button class="list-trash-btn">
+                                        <img src="/assets/common/images/icons/delete-black.png" class="image-normal"/>
+                                    </button>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
                     <span style="width:100%; display:block; text-align:center;">
                         <a href="#" class="btn btn-inverse list_manager">
+                            <img src="/assets/common/images/icons/manage-list-icon.png"/>
                             <b>{{ 'List Manager' | trans }}</b>
                         </a>
                     </span>
-                    <form class="list_saver">
-                        <div class="btn-toolbar">
-                            <input type="text" name="name" placeholder="{{ 'Save this list' | trans }}" />
-                            <button class="btn"><img src="/assets/prod/images/Push/save_list_as.png" /></button>
-                        </div>
-                    </form>
-                    <ul class="list">
-                        {% for list in lists %}
-                            <li class="list" style="padding:2px;">
-                                <a class="list_loader" href="{{ path('prod_push_lists_list', { 'list_id' : list.getId() }) }}">
-                                    {% if list.getOwner(app.getAuthenticatedUser()).getRole() >= constant('Alchemy\\Phrasea\\Model\\Entities\\UsrListOwner::ROLE_EDITOR') %}
-                                        <img src="/assets/prod/images/Push/list-icon.png" />
-                                    {% else %}
-                                        <img src="/assets/common/images/icons/SHARE16.png" />
-                                    {% endif %}
-                                    {{ list.getName() }}
-                                    ({{ list.getEntries().count() }})
-                                </a>
-                            </li>
-                        {% endfor %}
-                    </ul>
                 </div>
             </div>
         </div>
     </div>
     <div class="PNB" style="left:205px;">
-        <div class="PNB" style="height:150px;bottom:auto;line-height:26px">
+        <div class="PNB" style="height:56px;bottom:auto;line-height:26px">
             <div class="PNB10">
-                <table>
-                    <tr style="vertical-align:top;">
-                        <td>
-                            <div id="find-user">
-                                <input class="search" name="users-search" placeholder="{{ 'Users' | trans }}" type="text" style="width:210px;"/>
-                                <br/>
-                                {{ 'Select a user in the list' | trans }} <br/>
-                                {% if app.getAclForUser(app.getAuthenticatedUser()).has_right(constant('\\ACL::CANADMIN')) %}
-                                    {{ 'or' | trans }}
-                                    <a href="#" class="push-add-user btn btn-mini">{{ 'Add user' | trans }}</a>
-                                {% endif %}
-                            </div>
-                            <p id="recommanded-users">
-                                {% set recommendation = '' %}
-                                {% set total = RecommendedUsers|length %}
+                <div style="float: left;">
+                    <div id="find-user">
+                        <input class="search" name="users-search" placeholder="{{ 'Users' | trans }}" type="text"
+                               style="width:210px;"/>
+                    </div>
+                    <p id="recommanded-users">
+                        {% set recommendation = '' %}
+                        {% set total = RecommendedUsers|length %}
 
-                                {% for user in RecommendedUsers %}
-                                    {% if total <= 4 or loop.index <= 4 %}
-                                        {% if recommendation != '' and not loop.last %}
-                                            {% set recommendation = recommendation ~ ', ' %}
-                                        {% elseif recommendation != '' and loop.last %}
-                                            {% set recommendation = recommendation %}
-                                        {% endif %}
-                                        {% set recommendation = recommendation
-                                        ~ ' <a href="#" class="recommended_users UserTips" tooltipsrc="' ~ path('prod_tooltip_user', { 'usr_id' : user.getId() }) ~ '">'
-                                        ~ '<input type="hidden" name="usr_id" value="' ~ user.getId() ~ '" />'
-                                        ~ user.getDisplayName()
-                                        ~ '</a>' %}
-                                    {% endif %}
-                                {% endfor %}
-
-                                {% if total > 4 %}
-                                    {% set n = total - 4%}
-                                    {% set and_many_more %}
-                                        {% trans with {'%n%' : n} %}and %n% more peoples{% endtrans %}
-                                    {% endset %}
-                                    {% set recommendation = recommendation
-                                            ~ '<a href="#" class="recommended_users_list">'
-                                            ~ and_many_more ~ '</a>' %}
+                        {% for user in RecommendedUsers %}
+                            {% if total <= 4 or loop.index <= 4 %}
+                                {% if recommendation != '' and not loop.last %}
+                                    {% set recommendation = recommendation ~ ', ' %}
+                                {% elseif recommendation != '' and loop.last %}
+                                    {% set recommendation = recommendation %}
                                 {% endif %}
+                                {% set recommendation = recommendation
+                                ~ ' <a href="#" class="recommended_users UserTips" tooltipsrc="' ~ path('prod_tooltip_user', { 'usr_id' : user.getId() }) ~ '">'
+                                ~ '<input type="hidden" name="usr_id" value="' ~ user.getId() ~ '" />'
+                                ~ user.getDisplayName()
+                                ~ '</a>' %}
+                            {% endif %}
+                        {% endfor %}
 
-                                {% if recommendation != '' %}
-                                    {% set recommendation = '<br/>' ~ recommendation %}
-                                    {% if context == 'Push' %}
-                                        {% trans with {'%recommendation%' : recommendation} %}Please consider send this push to the following users : %recommendation%{% endtrans %}
-                                    {% else %}
-                                        {% trans with {'%recommendation%' : recommendation} %}Please consider send this validation to the following users : %recommendation%{% endtrans %}
-                                    {% endif %}
-                                {% endif %}
-                            </p>
+                        {% if total > 4 %}
+                            {% set n = total - 4 %}
+                            {% set and_many_more %}
+                                {% trans with {'%n%' : n} %}and %n% more peoples{% endtrans %}
+                            {% endset %}
+                            {% set recommendation = recommendation
+                            ~ '<a href="#" class="recommended_users_list">'
+                            ~ and_many_more ~ '</a>' %}
+                        {% endif %}
 
-                            <div style="display:none;" id="push_user_recommendations" title="{{ 'Users suggestion' | trans }}" >
-                                <table class="users" style="width:100%;">
-                                    {% for user in RecommendedUsers %}
-                                        <tr>
-                                            <td>
-                                                <img src="/assets/common/images/icons/user.png"/>
-                                            </td>
-                                            <td>
-                                                {{ user.getDisplayName() }}
-                                                <input type="hidden" name="usr_id" value="{{ user.getId() }}" />
-                                            </td>
-                                            <td>
-                                                <a href="#" class="adder">{{ 'Add' | trans }}</a>
-                                            </td>
-                                        </tr>
-                                    {% endfor %}
-                                </table>
-                            </div>
-                        </td>
-                        <td style="width:10px;"></td>
-                        <td>
-                            <p>
-                                {% if context == 'Push' %}
-                                    {{ 'Push::unpush permet d\'envoyer un lot d\'image a des destinataires' | trans }}
-                                {% else %}
-                                    {{ 'Push::une validation est une demande d\'appreciation a d\'autres personnes' | trans }}
-                                {% endif %}
-                            </p>
-                        </td>
-                    </tr>
-                </table>
+                        {% if recommendation != '' %}
+                            {% set recommendation = '<br/>' ~ recommendation %}
+                            {% if context == 'Push' %}
+                                {% trans with {'%recommendation%' : recommendation} %}Please consider send this push to the following users : %recommendation%{% endtrans %}
+                            {% else %}
+                                {% trans with {'%recommendation%' : recommendation} %}Please consider send this validation to the following users : %recommendation%{% endtrans %}
+                            {% endif %}
+                        {% endif %}
+                    </p>
+
+                    <div style="display:none;" id="push_user_recommendations" title="{{ 'Users suggestion' | trans }}">
+                        <table class="users" style="width:100%;">
+                            {% for user in RecommendedUsers %}
+                                <tr>
+                                    <td>
+                                        <img src="/assets/common/images/icons/user.png"/>
+                                    </td>
+                                    <td>
+                                        {{ user.getDisplayName() }}
+                                        <input type="hidden" name="usr_id" value="{{ user.getId() }}"/>
+                                    </td>
+                                    <td>
+                                        <a href="#" class="adder">{{ 'Add' | trans }}</a>
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                        </table>
+                    </div>
+                </div>
+                <div style="float: left;">
+                    {% if app.getAclForUser(app.getAuthenticatedUser()).has_right(constant('\\ACL::CANADMIN')) %}
+                        <a href="#" class="push-add-user btn">
+                            <img src="/assets/common/images/icons/blue-plus.png" class="image-normal">
+                            <img src="/assets/common/images/icons/white-plus.png" class="image-hover">
+                            <span>{{ 'Add user' | trans }}</span></a>
+                    {% endif %}
+                </div>
+                <img id="info-box-trigger" src="/assets/common/images/icons/info-white.png" width="18" height="18">
+                <div id="info-box" style="display: none">
+                    <p>
+                        {% if context == 'Push' %}
+                            {{ 'Push::unpush permet d\'envoyer un lot d\'image a des destinataires' | trans }}
+                        {% else %}
+                            {{ 'Push::une validation est une demande d\'appreciation a d\'autres personnes' | trans }}
+                        {% endif %}
+                    </p>
+                </div>
             </div>
         </div>
-        <div class="PNB" style="top:150px;">
+        <div class="PNB" style="top:45px;">
             <div class="PNB10 content user_content grey-bg">
                 <div class="PNB10 header">
                     <table style="table-layout:auto;">
                         <tr>
                             <td>
-                                {% if 'Push' == context %}
-                                    {% set nb_push_items = push.get_count_actionable() %}
-                                    {% if push.get_count_not_actionable() == 0 %}
-                                        {% trans with {'%nb_push_items%' : nb_push_items} %}You are about to push %nb_push_items% records.{% endtrans %}
+                                <span class="text">
+                                    {% if 'Push' == context %}
+                                        {% set nb_push_items = push.get_count_actionable() %}
+                                        {% if push.get_count_not_actionable() == 0 %}
+                                            {% trans with {'%nb_push_items%' : nb_push_items} %}You are about to push %nb_push_items% records.{% endtrans %}
+                                        {% else %}
+                                            {% set nb_not_available = push.get_count_not_actionable() %}
+                                            {% trans with {'%nb_push_items%' : nb_push_items, '%nb_not_available%' : nb_not_available} %}You are about to push %nb_push_items% records, %nb_not_available% records can not be processed.{% endtrans %}
+                                        {% endif %}
                                     {% else %}
-                                        {% set nb_not_available = push.get_count_not_actionable() %}
-                                        {% trans with {'%nb_push_items%' : nb_push_items, '%nb_not_available%' : nb_not_available} %}You are about to push %nb_push_items% records, %nb_not_available% records can not be processed.{% endtrans %}
+                                        {% set nb_push_items = push.get_count_actionable() %}
+                                        {% if push.get_count_not_actionable() == 0 %}
+                                            {% trans with {'%nb_push_items%' : nb_push_items} %}You are about to ask for feedback for %nb_push_items% records.{% endtrans %}
+                                        {% else %}
+                                            {% set nb_not_available = push.get_count_not_actionable() %}
+                                            {% trans with {'%nb_push_items%' : nb_push_items, '%nb_not_available%' : nb_not_available} %}You are about to ask for feedback for %nb_push_items% records, %nb_not_available% records can not be processed.{% endtrans %}
+                                        {% endif %}
                                     {% endif %}
-                                {% else %}
-                                    {% set nb_push_items = push.get_count_actionable() %}
-                                    {% if push.get_count_not_actionable() == 0 %}
-                                        {% trans with {'%nb_push_items%' : nb_push_items} %}You are about to ask for feedback for %nb_push_items% records.{% endtrans %}
-                                    {% else %}
-                                        {% set nb_not_available = push.get_count_not_actionable() %}
-                                        {% trans with {'%nb_push_items%' : nb_push_items, '%nb_not_available%' : nb_not_available} %}You are about to ask for feedback for %nb_push_items% records, %nb_not_available% records can not be processed.{% endtrans %}
-                                    {% endif %}
-                                {% endif %}
+                                </span>
                             </td>
                             <td class="options">
-                                <button class="select-all btn btn-inverse">{{ 'Select all' | trans }}</button>
-                                <button class="unselect-all btn btn-inverse">{{ 'Deselect all' | trans }}</button>
+                                <button class="select-all round-blue-border-btn">{{ 'Select all' | trans }}</button>
+                                <button class="unselect-all round-blue-border-btn">{{ 'Deselect all' | trans }}</button>
+                                <button class="delete-selection btn btn-inverse">{{ 'prod:push: delete selection' | trans }}</button>
                             </td>
                         </tr>
                     </table>
@@ -212,7 +220,17 @@
                     <div class="PNB badges"></div>
                 </form>
                 <div class="PNB10 footer">
-                    <button class="FeedbackSend btn btn-inverse">{{ "Send" | trans }}</button>
+                    <form class="list_saver">
+                        <div class="btn-toolbar">
+                            <input type="text" name="name" placeholder="{{ 'Save this list' | trans }}"/>
+                            <button class="saveList">
+                                <img src="/assets/common/images/icons/blue-save.png" class="image-normal"/>
+                                <img src="/assets/common/images/icons/white-save.png" class="image-hover"/>
+                                <span>{{ "prod:push:save list" | trans }}</span>
+                            </button>
+                        </div>
+                    </form>
+                    <button class="FeedbackSend">{{ "Send" | trans }}</button>
                 </div>
             </div>
         </div>

templates/web/prod/templates/push.html.twig

@@ -4,7 +4,7 @@
         <table>
             <tr>
                 <td class="icon">
-                    <img src="/assets/common/images/icons/user.png"/>
+                    <img src="/assets/common/images/icons/user-white.png"/>
                 </td>
                 <td class="infos">
                     <div style="margin:5px 10px 5px;">
@@ -72,7 +72,7 @@
     <table>
         <tr>
             <td class="icon">
-                <img src="/assets/common/images/icons/user.png"/>
+                <img src="/assets/common/images/icons/user-white.png"/>
             </td>
             <td class="infos">
                 <div>
@@ -100,8 +100,10 @@
                                 <input type="hidden" name="participants[<%= user.usr_id %>][see_others]" value="0" />
                             </td>
                             <td class="toggle status_off toggle_HD">
-                                <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_off" src="/assets/prod/images/Push/download_off_badge.png" />
-                                <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_on" src="/assets/prod/images/Push/download_badge.png" />
+                                <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_off"
+                                     src="/assets/prod/images/icons/download-white.png"/>
+                                <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_on"
+                                     src="/assets/prod/images/Push/download_blue.png"/>
                                 <input type="hidden" name="participants[<%= user.usr_id %>][HD]" value="0" />
                             </td>
                         </tr>
@@ -141,12 +143,12 @@
         </select>
     </div>
     <div class="control-group">
-        <label for="PushSendFormName">{% trans %}Name{% endtrans %}</label>
-        <input id="PushSendFormName" type="text" name="name" class="input-block-level"/>
+        <input id="PushSendFormName" placeholder="{% trans %}Name{% endtrans %}" type="text" name="name"
+               class="input-block-level"/>
     </div>
     <div class="control-group">
-        <label for="PushSendFormMessage">{% trans %}Message{% endtrans %}</label>
-        <textarea id="PushSendFormMessage" name="message" class="input-block-level" rows="6"></textarea>
+        <textarea id="PushSendFormMessage" placeholder="{% trans %}Message{% endtrans %}" name="message"
+                  class="input-block-level" rows="6"></textarea>
     </div>
     <div class="control-group">
         <label for="PushSendFormRecept" class="checkbox">
@@ -180,13 +182,13 @@
 <script type="text/template" id="push_badge_tpl">
 <div class="badge badge_<%= user.usr_id %>">
     <a href="#" class="deleter">
-        <img src="/assets/prod/images/Push/close_badge.png"/>
+        <i class="fa fa-times-circle"></i>
     </a>
     <input name="id" value="<%= user.usr_id %>" type="hidden" />
     <table>
         <tr>
             <td class="icon">
-                <img src="/assets/common/images/icons/user.png"/>
+                <img src="/assets/common/images/icons/user-white.png"/>
             </td>
             <td class="infos">
                 <div>
@@ -204,8 +206,10 @@
                         </tr>
                         <tr class="toggles">
                             <td class="toggle status_off toggle_HD">
-                                <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_off" src="/assets/prod/images/Push/download_off_badge.png" />
-                                <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_on" src="/assets/prod/images/Push/download_badge.png" />
+                                <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_off"
+                                     src="/assets/common/images/icons/download-white.png"/>
+                                <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_on"
+                                     src="/assets/common/images/icons/download-blue.png"/>
                                 <input type="hidden" name="participants[<%= user.usr_id %>][HD]" value="0" />
                             </td>
                         </tr>