wip - refactor ui of push screen

package.json

@@ -66,7 +66,7 @@
     "normalize-css": "^2.1.0",
     "npm": "^6.0.0",
     "npm-modernizr": "^2.8.3",
-    "phraseanet-production-client": "^0.33.0",
+    "phraseanet-production-client": "../Phraseanet-production-client",
     "requirejs": "^2.3.5",
     "tinymce": "^4.0.28",
     "underscore": "^1.8.3",

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,34 +41,27 @@
                         </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"/>
                                 {{ 'HD Download' | trans }}
                             </button>
                         </li>
                     </ul>
                 </div>
                 <div style="padding:10px;">
-                    <h1>{{ 'Lists' | trans }}</h1>
+                    <div class="list-container">
-                    <span style="width:100%; display:block; text-align:center;">
+                        <span class="main-title"><img
-                        <a href="#" class="btn btn-inverse list_manager">
+                                    src="/assets/common/images/icons/list-grey.png"/>{{ 'Lists' | trans }}</span>
-                            <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() }) }}">
+                                    <a class="list_loader"
-                                    {% if list.getOwner(app.getAuthenticatedUser()).getRole() >= constant('Alchemy\\Phrasea\\Model\\Entities\\UsrListOwner::ROLE_EDITOR') %}
+                                       href="{{ path('prod_push_lists_list', { 'list_id' : list.getId() }) }}">
-                                        <img src="/assets/prod/images/Push/list-icon.png" />
+                                        {#{% if list.getOwner(app.getAuthenticatedUser()).getRole() >= constant('Alchemy\\Phrasea\\Model\\Entities\\UsrListOwner::ROLE_EDITOR') %}#}
-                                    {% else %}
+                                        {#<img src="/assets/prod/images/Push/list-icon.png" />#}
-                                        <img src="/assets/common/images/icons/SHARE16.png" />
+                                        {#{% else %}#}
-                                    {% endif %}
+                                        {#<img src="/assets/common/images/icons/SHARE16.png" />#}
+                                        {#{% endif %}#}
                                         {{ list.getName() }}
                                         ({{ list.getEntries().count() }})
                                     </a>
@@ -74,23 +69,23 @@
                             {% 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>
+                </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>
+                <div style="float: left;">
-                    <tr style="vertical-align:top;">
-                        <td>
                     <div id="find-user">
-                                <input class="search" name="users-search" placeholder="{{ 'Users' | trans }}" type="text" style="width:210px;"/>
+                        <input class="search" name="users-search" placeholder="{{ 'Users' | trans }}" type="text"
-                                <br/>
+                               style="width:210px;"/>
-                                {{ '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 = '' %}
@@ -112,7 +107,7 @@
                         {% endfor %}
 
                         {% if total > 4 %}
-                                    {% set n = total - 4%}
+                            {% set n = total - 4 %}
                             {% set and_many_more %}
                                 {% trans with {'%n%' : n} %}and %n% more peoples{% endtrans %}
                             {% endset %}
@@ -131,7 +126,7 @@
                         {% endif %}
                     </p>
 
-                            <div style="display:none;" id="push_user_recommendations" title="{{ 'Users suggestion' | trans }}" >
+                    <div style="display:none;" id="push_user_recommendations" title="{{ 'Users suggestion' | trans }}">
                         <table class="users" style="width:100%;">
                             {% for user in RecommendedUsers %}
                                 <tr>
@@ -140,7 +135,7 @@
                                     </td>
                                     <td>
                                         {{ user.getDisplayName() }}
-                                                <input type="hidden" name="usr_id" value="{{ user.getId() }}" />
+                                        <input type="hidden" name="usr_id" value="{{ user.getId() }}"/>
                                     </td>
                                     <td>
                                         <a href="#" class="adder">{{ 'Add' | trans }}</a>
@@ -149,9 +144,15 @@
                             {% endfor %}
                         </table>
                     </div>
-                        </td>
+                </div>
-                        <td style="width:10px;"></td>
+                <div style="float: left;">
-                        <td>
+                    {% 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"><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 }}
@@ -159,17 +160,16 @@
                             {{ 'Push::une validation est une demande d\'appreciation a d\'autres personnes' | trans }}
                         {% endif %}
                     </p>
-                        </td>
-                    </tr>
-                </table>
                 </div>
             </div>
-        <div class="PNB" style="top:150px;">
+        </div>
+        <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>
+                                <span class="text">
                                     {% if 'Push' == context %}
                                         {% set nb_push_items = push.get_count_actionable() %}
                                         {% if push.get_count_not_actionable() == 0 %}
@@ -187,10 +187,11 @@
                                             {% 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="select-all round-blue-border-btn">{{ 'Select all' | trans }}</button>
-                                <button class="unselect-all btn btn-inverse">{{ 'Deselect all' | trans }}</button>
+                                <button class="unselect-all round-blue-border-btn">{{ 'Deselect all' | trans }}</button>
                             </td>
                         </tr>
                     </table>
@@ -212,7 +213,15 @@
                     <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"/><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_off"
-                                <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_on" src="/assets/prod/images/Push/download_badge.png" />
+                                     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>
@@ -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_off"
-                                <img title="{% trans %}User can download HD{% endtrans %}" class="toggle_on" src="/assets/prod/images/Push/download_badge.png" />
+                                     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>