From 9ed6a0210ff0d0d9ca433edfe2f2772ee876fa21 Mon Sep 17 00:00:00 2001
From: Mike Ng <mike.esokia@gmail.com>
Date: Mon, 21 Aug 2017 14:34:53 +0400
Subject: [PATCH] Porting PHRAS-1434, PHRAS-1435, PHRAS-1436, PHRAS-1437,
 PHRAS-1457 to 4.1

---
 resources/www/lightbox/styles/main-ie6.scss   |  2 +
 resources/www/lightbox/styles/main.scss       |  2 +
 templates/web/prod/index.html.twig            | 46 +++++++++++++------
 .../web/prod/preview/basket_train.html.twig   | 28 ++++++-----
 templates/web/prod/preview/caption.html.twig  | 14 +++---
 .../web/prod/preview/feed_train.html.twig     | 28 ++++++-----
 .../web/prod/preview/reg_train.html.twig      | 28 ++++++-----
 .../web/prod/preview/result_train.html.twig   | 23 ++++++----
 .../preview/result_train_options.html.twig    | 26 ++++++-----
 9 files changed, 124 insertions(+), 73 deletions(-)

diff --git a/resources/www/lightbox/styles/main-ie6.scss b/resources/www/lightbox/styles/main-ie6.scss
index 712e4cd28c..1ed7a23f10 100644
--- a/resources/www/lightbox/styles/main-ie6.scss
+++ b/resources/www/lightbox/styles/main-ie6.scss
@@ -402,6 +402,8 @@ table th i {
 #sc_wrapper .thumb_wrapper {
   position: absolute;
   top: 28px;
+  left: 0px;
+  right: 0px;
 }
 
 .record_display_box .notes_overlay {
diff --git a/resources/www/lightbox/styles/main.scss b/resources/www/lightbox/styles/main.scss
index c7e460aad1..10dae5bdc3 100644
--- a/resources/www/lightbox/styles/main.scss
+++ b/resources/www/lightbox/styles/main.scss
@@ -453,6 +453,8 @@ table th i {
 #sc_wrapper .thumb_wrapper {
   position: absolute;
   top: 28px;
+  left: 0px;
+  right: 0px;
 }
 
 .record_display_box {
diff --git a/templates/web/prod/index.html.twig b/templates/web/prod/index.html.twig
index ca81ae2ab4..b3f1d5eca4 100644
--- a/templates/web/prod/index.html.twig
+++ b/templates/web/prod/index.html.twig
@@ -667,29 +667,37 @@
     </div>
 
     <div id="PREVIEWBOX" class="PNB10 ui-dialog " style="overflow:hidden;">
-        <div class="PNB" style="right:180px;">
-            <div id="PREVIEWTITLE" style="height:55px;bottom:auto;" class="PNB">
-                <div class="PNB10 ui-corner-top" id='PREVIEWTITLEWRAPPER'>
-                    <div style="padding-top: 0px; padding-left: 5px;">
-                        <span id="PREVIEWTITLE_COLLLOGO"> </span>
-                        &nbsp;
-                        <span id="PREVIEWTITLE_COLLNAME"> </span>
-                        &nbsp;
-                        <span id="SPANTITLE"> </span>
-                    </div>
+        <div id="PREVIEWTITLE" style="height:55px;bottom:auto;" class="PNB">
+            <div class="PNB10 ui-corner-top" id='PREVIEWTITLEWRAPPER'>
+                <div style="padding-top: 0px; padding-left: 5px;">
+                    <span id="PREVIEWTITLE_COLLLOGO"> </span>
+                    &nbsp;
+                    <span id="PREVIEWTITLE_COLLNAME"> </span>
+                    &nbsp;
+                    <span id="SPANTITLE"> </span>
                 </div>
             </div>
+        </div>
+        <div class="PNB" style="right:180px;">
             <div class="PNB" style="top:55px;">
                 <div id="PREVIEWLEFT" class="preview_col PNB" style="width:60%;right:auto;overflow:hidden;">
-                    <div id="PREVIEWCURRENT" class="ui-corner-bottom PNB10" style="top:0;height:116px;bottom:auto;">
+                    <div id="PREVIEWCURRENT" class="ui-corner-bottom PNB10" style="top:11px;height:116px;bottom:auto;">
                         <div id="PREVIEWCURRENTGLOB" style=""></div>
                     </div>
+                    <div class="PNB10" style="top:146px;">
+                        <button id="left-btn" class="invisible-btn preview-navigate-action" data-direction="backward">
+                            <i class="icon-caret-left"></i>
+                        </button>
+                        <button id="right-btn" class="invisible-btn preview-navigate-action" data-direction="forward">
+                            <i class="icon-caret-right"></i>
+                        </button>
+                    </div>
                     <div id="PREVIEWIMGCONT" class="dblclick preview_col_cont PNB10" style="overflow:hidden;top:146px;"></div>
                 </div>
                 <div class="gui_vsplitter gui_vsplitter2" style="left:60%;">
 
                 </div>
-                <div id="PREVIEWRIGHT" class="preview_col PNB">
+                <div id="PREVIEWRIGHT" class="preview_col PNB" style="top:0px;left:60%;overflow:hidden;">
                     <div id="PREVIEWIMGDESC" class="PNB10">
                         <ul class="PNB" style="height:30px;bottom:auto;">
                             <li><a href="#PREVIEWIMGDESCINNER-BOX">{{ 'preview:: Description' | trans }}</a></li>
@@ -720,8 +728,8 @@
                     <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>
                 </button>
             </div>
-            <div id="PREVIEWOTHERS" style="top:40px;" class="PNB10 ui-corner-all">
-                <div id="PREVIEWOTHERSINNER" style=""></div>
+            <div id="PREVIEWOTHERS" style="top:95px;" class="PNB10 ui-corner-all">
+            <div id="PREVIEWOTHERSINNER" style=""></div>
             </div>
         </div>
     </div>
@@ -767,4 +775,14 @@
     <div id="modal_feed" title="{{ 'action : publier' | trans }}" style="display:none;"></div>
     <div id="dialog_dwnl" title="{{ 'action : exporter' | trans }}" style="display:none;"></div>
     <script type="text/javascript" id="bitly_loader"></script>
+    <script type="text/javascript">
+        $(document).ready(function(){
+            $('#right-btn').mouseenter(function() {
+                $('#right-btn i').stop(true, true).fadeIn(200).delay(500).fadeOut(200);
+            });
+            $('#left-btn').mouseenter(function() {
+                $('#left-btn i').stop(true, true).fadeIn(200).delay(500).fadeOut(200);
+            });
+        });
+    </script>
 {% endblock %}
diff --git a/templates/web/prod/preview/basket_train.html.twig b/templates/web/prod/preview/basket_train.html.twig
index d5b2ef8c04..14715074dd 100644
--- a/templates/web/prod/preview/basket_train.html.twig
+++ b/templates/web/prod/preview/basket_train.html.twig
@@ -47,14 +47,20 @@
 
    </ul>
   </div>
-  <div class="cont_infos">
-    <div>
-      <img src="/assets/common/images/icons/light_left.gif" style="margin-right:10px;" class="preview-navigate-action" data-direction="backward"/>
-      <img src="/assets/common/images/icons/light_right.gif" style="margin-left:10px;" class="preview-navigate-action" data-direction="forward"/><br/>
-      <span class="preview-start-slideshow-action" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
-      <span class="preview-stop-slideshow-action" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>
-    </div>
-  </div>
-  <div id="PREVIEWTOOL">
-  {% include 'prod/preview/tools.html.twig' %}
-  </div>
+ <div class="wrapper_diaspo">
+   <div class="cont_infos">
+     <div>
+         <button class="preview-navigate-action" data-direction="backward">
+             <i class="icon-caret-left"></i>
+         </button>
+         <button class="preview-navigate-action" data-direction="forward">
+             <i class="icon-caret-right"></i>
+         </button><br/>
+       <span onclick="startSlide()" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
+       <span onclick="stopSlide()" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>
+     </div>
+   </div>
+   <div id="PREVIEWTOOL">
+       {% include 'prod/preview/tools.html.twig' %}
+   </div>
+ </div>
diff --git a/templates/web/prod/preview/caption.html.twig b/templates/web/prod/preview/caption.html.twig
index dd35fc3148..4f4b08063a 100644
--- a/templates/web/prod/preview/caption.html.twig
+++ b/templates/web/prod/preview/caption.html.twig
@@ -6,19 +6,19 @@
   {% if can_edit %}
     <div class="edit_button" style="text-align:right">
         <a href="#" class="edit-record-action" data-kind="record" data-id="{{ record.get_serialize_key }}">
-        <img style="vertical-align:middle" src="/assets/common/images/icons/ppen_history.png" width="16" class="btn-image"/>
-        {{ 'action : editer' | trans }}
+        <img style="vertical-align:middle" src="/assets/common/images/icons/ppen_history.png" />
+        <span style="vertical-align: middle">{{ 'action : editer' | trans }}</span>
       </a>
     </div>
   {% endif %}
-  <div style="text-align:center;">
+<div style="text-align:center;">
     {% for flag in record_flags(record) %}
       <img src="{{ flag.path }}" title="{{ attribute(flag.labels, app.locale) }}" />
     {% endfor %}
-  </div>
+</div>
 
-  {% if record.is_from_reg()  %}
+{% if record.is_from_reg()  %}
     {{macro.caption(record, can_see_business)}}
-  {% else %}
+{% else %}
     {{macro.caption(record, can_see_business)}}
-  {% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/templates/web/prod/preview/feed_train.html.twig b/templates/web/prod/preview/feed_train.html.twig
index bcbfa1bc79..867de472d0 100644
--- a/templates/web/prod/preview/feed_train.html.twig
+++ b/templates/web/prod/preview/feed_train.html.twig
@@ -45,14 +45,20 @@
 
    </ul>
   </div>
-  <div class="cont_infos">
-    <div>
-      <img src="/assets/common/images/icons/light_left.gif" style="margin-right:10px;" class="preview-navigate-action" data-direction="backward"/>
-      <img src="/assets/common/images/icons/light_right.gif" style="margin-left:10px;" class="preview-navigate-action" data-direction="forward"/><br/>
-      <span class="preview-start-slideshow-action" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
-      <span class="preview-stop-slideshow-action" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>
-    </div>
-  </div>
-  <div id="PREVIEWTOOL">
-  {% include 'prod/preview/tools.html.twig' %}
-  </div>
+ <div class="wrapper_diaspo">
+   <div class="cont_infos">
+     <div>
+         <button class="preview-navigate-action" data-direction="backward">
+             <i class="icon-caret-left"></i>
+         </button>
+         <button class="preview-navigate-action" data-direction="forward">
+             <i class="icon-caret-right"></i>
+         </button><br/>
+         <span onclick="startSlide()" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
+         <span onclick="stopSlide()" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>
+     </div>
+   </div>
+   <div id="PREVIEWTOOL">
+       {% include 'prod/preview/tools.html.twig' %}
+   </div>
+ </div>
diff --git a/templates/web/prod/preview/reg_train.html.twig b/templates/web/prod/preview/reg_train.html.twig
index c6a5c7fa9c..743e3ca8c4 100644
--- a/templates/web/prod/preview/reg_train.html.twig
+++ b/templates/web/prod/preview/reg_train.html.twig
@@ -80,15 +80,21 @@
     {% endfor %}
 
     </ul>
-          </div>
-          <div class="cont_infos">
-          <div>
-          <img src="/assets/common/images/icons/light_left.gif" style="margin-right:10px;" class="preview-navigate-action" data-direction="backward"/>
-          <img src="/assets/common/images/icons/light_right.gif" style="margin-left:10px;" class="preview-navigate-action" data-direction="forward"/><br/>
-          <span class="preview-start-slideshow-action" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
-          <span class="preview-stop-slideshow-action" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>
-          </div>
-          </div>
-          <div id="PREVIEWTOOL">
+  </div>
+    <div class="wrapper_diaspo">
+        <div class="cont_infos">
+            <div>
+                <button class="preview-navigate-action" data-direction="backward">
+                    <i class="icon-caret-left"></i>
+                </button>
+                <button class="preview-navigate-action" data-direction="forward">
+                    <i class="icon-caret-right"></i>
+                </button><br/>
+                <span onclick="startSlide()" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
+                <span onclick="stopSlide()" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>
+            </div>
+        </div>
+        <div id="PREVIEWTOOL">
             {% include 'prod/preview/tools.html.twig' %}
-          </div>
+        </div>
+    </div>
diff --git a/templates/web/prod/preview/result_train.html.twig b/templates/web/prod/preview/result_train.html.twig
index f6ac58bb79..4c4beb41d6 100644
--- a/templates/web/prod/preview/result_train.html.twig
+++ b/templates/web/prod/preview/result_train.html.twig
@@ -41,12 +41,19 @@
 
     </ul>
   </div>
-  <div class="cont_infos">
-    <div>
-      <img src="/assets/common/images/icons/light_left.gif" style="margin-right:10px;" class="preview-navigate-action" data-direction="backward">
-      <img src="/assets/common/images/icons/light_right.gif" style="margin-left:10px;" class="preview-navigate-action" data-direction="forward"><br/>
-      <span class="preview-start-slideshow-action" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }} </span>
-      <span class="preview-stop-slideshow-action" id="stop_slide"> {{ 'preview:: arreter le diaporama' | trans }} </span>
+<div class="wrapper_diaspo">
+    <div class="cont_infos">
+        <div>
+            <button class="preview-navigate-action" data-direction="backward">
+                <i class="icon-caret-left"></i>
+            </button>
+            <button class="preview-navigate-action" data-direction="forward">
+                <i class="icon-caret-right"></i>
+            </button><br/>
+            <span onclick="startSlide()" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }} </span>
+            <span onclick="stopSlide()" id="stop_slide"> {{ 'preview:: arreter le diaporama' | trans }} </span>
+        </div>
     </div>
-  </div>
-  <div id="PREVIEWTOOL"></div>
+    <div id="PREVIEWTOOL"></div>
+</div>
+
diff --git a/templates/web/prod/preview/result_train_options.html.twig b/templates/web/prod/preview/result_train_options.html.twig
index 0d497b8260..be233ff88a 100644
--- a/templates/web/prod/preview/result_train_options.html.twig
+++ b/templates/web/prod/preview/result_train_options.html.twig
@@ -1,12 +1,16 @@
 
-            <div id="PREVIEWCURRENTCONT" class="PNB10">
-              <div style="margin:2px 0;">
-                <img src="/assets/common/images/icons/light_left.gif" style="margin-right:20px;" class="preview-navigate-action" data-direction="backward"/>
-                <span class="preview-start-slideshow-action" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
-                <span class="preview-stop-slideshow-action" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>
-                <img src="/assets/common/images/icons/light_right.gif" style="margin-left:20px;"  class="preview-navigate-action" data-direction="forward"/><br/>
-              </div>
-            </div>
-            <div id="PREVIEWTOOL" style="top:0;bottom:auto;">
-              {% include 'prod/preview/tools.html.twig' %}
-            </div>
+<div id="PREVIEWCURRENTCONT" class="PNB10">
+    <div style="margin:2px 0;" class="cont_infos">
+        <button class="preview-navigate-action" data-direction="backward">
+            <i class="icon-caret-left"></i>
+        </button>
+        <span onclick="startSlide()" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
+        <span onclick="stopSlide()" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>
+        <button class="preview-navigate-action" data-direction="forward">
+            <i class="icon-caret-right"></i>
+        </button><br/>
+    </div>
+</div>
+<div id="PREVIEWTOOL" style="top:0;bottom:auto;">
+    {% include 'prod/preview/tools.html.twig' %}
+</div>
\ No newline at end of file