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

PHRAS-2099 refacto ui of push and feedback screens

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

@@ -19,7 +19,7 @@
                 {% if context == 'Push' %}
                     <img style="width: 36px; height: 36px" src="/assets/common/images/icons/push64.png"/>
                 {% else %}
-                    <img style="width: 36px; height: 36px" src="/assets/common/images/icons/Feedback60.png"/>
+                    <img style="width: 36px; height: 36px" src="/assets/common/images/icons/validation.png"/>
                 {% endif %}
             </div>
             <div class="PNB content" style="top:45px; overflow-y:auto;">
@@ -29,20 +29,27 @@
                     <ul class="general_togglers">
                     {% if context == 'Feedback' %}
                         <li>
-                            <button type="button" class="general_toggler btn btn-inverse" feature="agree">
+                            <button type="button" class="general_toggler" feature="agree">
-                                <img/>
+                                <img src="/assets/common/images/icons/green-pen.png" class="image-normal"/>
+                                <img src="/assets/common/images/icons/white-pen.png" class="image-hover"/>
                                 {{ 'Contributor' | trans }}
                             </button>
                         </li>
                         <li>
-                            <button type="button" class="general_toggler btn btn-inverse" feature="see_others">
+                            <button type="button" class="general_toggler" feature="see_others">
+                                <img src="/assets/common/images/icons/green-user.png" class="image-normal"/>
+                                <img src="/assets/common/images/icons/white-user.png" class="image-hover"/>
                                 {{ 'See others' | trans }}
                             </button>
                         </li>
                     {% endif %}
                         <li>
                             <button type="button" class="general_toggler" feature="HD">
-                                <img src="/assets/common/images/icons/download-blue.png" class="image-normal"/>
+                                {% if context == 'Push' %}
+                                    <img src="/assets/common/images/icons/download-blue.png" class="image-normal"/>
+                                {% else %}
+                                    <img src="/assets/common/images/icons/download-green.png" class="image-normal"/>
+                                {% endif %}
                                 <img src="/assets/common/images/icons/download-white.png" class="image-hover"/>
                                 {{ 'HD Download' | trans }}
                             </button>
@@ -55,7 +62,8 @@
                             <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;">
+                                <li class="list" style="padding:6px 2px;position: relative;"
+                                    data-list-id= {{ list.getId() }}>
                                     <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') %}#}
@@ -68,6 +76,7 @@
                                     </a>
                                     <button class="list-trash-btn">
                                         <img src="/assets/common/images/icons/delete-black.png" class="image-normal"/>
+                                        <img src="/assets/common/images/icons/delete-white.png" class="image-hover"/>
                                     </button>
                                 </li>
                             {% endfor %}
@@ -151,10 +160,17 @@
                 </div>
                 <div style="float: left;">
                     {% if app.getAclForUser(app.getAuthenticatedUser()).has_right(constant('\\ACL::CANADMIN')) %}
-                        <a href="#" class="push-add-user btn">
+                        {% if context == 'Push' %}
-                            <img src="/assets/common/images/icons/blue-plus.png" class="image-normal">
+                            <a href="#" class="push-add-user btn">
-                            <img src="/assets/common/images/icons/white-plus.png" class="image-hover">
+                                <img src="/assets/common/images/icons/blue-plus.png" class="image-normal">
-                            <span>{{ 'Add user' | trans }}</span></a>
+                                <img src="/assets/common/images/icons/white-plus.png" class="image-hover">
+                                <span>{{ 'Add user' | trans }}</span></a>
+                        {% else %}
+                            <a href="#" class="push-add-user btn validation">
+                                <img src="/assets/common/images/icons/green-plus.png" class="image-normal">
+                                <img src="/assets/common/images/icons/white-plus.png" class="image-hover">
+                                <span>{{ 'Add user' | trans }}</span></a>
+                        {% endif %}
                     {% endif %}
                 </div>
                 <img id="info-box-trigger" src="/assets/common/images/icons/info-white.png" width="18" height="18">
@@ -224,13 +240,21 @@
                         <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"/>
+                                {% if context == 'Push' %}
+                                    <img src="/assets/common/images/icons/blue-save.png" class="image-normal"/>
+                                {% else %}
+                                    <img src="/assets/common/images/icons/green-save.png" class="image-normal"/>
+                                {% endif %}
                                 <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>
+                    {% if context == 'Push' %}
+                        <button class="FeedbackSend">{{ "Send" | trans }}</button>
+                    {% else %}
+                        <button class="FeedbackSend validation">{{ "Send" | trans }}</button>
+                    {% endif %}
                 </div>
             </div>
         </div>

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

@@ -66,7 +66,7 @@
 <script type="text/template" id="feedback_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>
@@ -90,20 +90,24 @@
                         </tr>
                         <tr class="toggles">
                             <td class="toggle status_on toggle_agree">
-                                <img title="{% trans %}User contribute to the feedback{% endtrans %}" class="toggle_off" src="/assets/prod/images/Push/contributeur_off_badge.png" />
+                                <img title="{% trans %}User contribute to the feedback{% endtrans %}" class="toggle_off"
-                                <img title="{% trans %}User contribute to the feedback{% endtrans %}" class="toggle_on" src="/assets/prod/images/Push/contributeur_badge.png" />
+                                     src="/assets/common/images/icons/grey-pen.png"/>
+                                <img title="{% trans %}User contribute to the feedback{% endtrans %}" class="toggle_on"
+                                     src="/assets/common/images/icons/dark-green-pen.png"/>
                                 <input type="hidden" name="participants[<%= user.usr_id %>][agree]" value="1" />
                             </td>
                             <td class="toggle status_off toggle_see_others">
-                                <img title="{% trans %}User can see others choices{% endtrans %}" class="toggle_off" src="/assets/prod/images/Push/see_other_off_badge.png" />
+                                <img title="{% trans %}User can see others choices{% endtrans %}" class="toggle_off"
-                                <img title="{% trans %}User can see others choices{% endtrans %}" class="toggle_on" src="/assets/prod/images/Push/see_other_badge.png" />
+                                     src="/assets/common/images/icons/grey-user.png"/>
+                                <img title="{% trans %}User can see others choices{% endtrans %}" class="toggle_on"
+                                     src="/assets/common/images/icons/dark-green-user.png"/>
                                 <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/icons/download-white.png"/>
+                                     src="/assets/common/images/icons/download-grey.png"/>
                                 <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_on"
-                                     src="/assets/prod/images/Push/download_blue.png"/>
+                                     src="/assets/common/images/icons/dark-green-download.png"/>
                                 <input type="hidden" name="participants[<%= user.usr_id %>][HD]" value="0" />
                             </td>
                         </tr>
@@ -207,9 +211,9 @@
                         <tr class="toggles">
                             <td class="toggle status_off toggle_HD">
                                 <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_off"
-                                     src="/assets/common/images/icons/download-white.png"/>
+                                     src="/assets/common/images/icons/download-grey.png"/>
                                 <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_on"
-                                     src="/assets/common/images/icons/download-blue.png"/>
+                                     src="/assets/common/images/icons/dark-blue-download.png"/>
                                 <input type="hidden" name="participants[<%= user.usr_id %>][HD]" value="0" />
                             </td>
                         </tr>