[Libreoffice-commits] online.git: loleaflet/css loleaflet/js

[Pedro Pinto Silva (via logerrit)]

 loleaflet/css/toolbar-mobile.css |   17 ++++++++++++++---
 loleaflet/js/w2ui-1.5.rc1.js     |    6 +++---
 2 files changed, 17 insertions(+), 6 deletions(-)

New commits:
commit a4b146ec518bdbf1235d9dd7dd5d412d8e3ad8dd
Author:     Pedro Pinto Silva <pedro.silva at collabora.com>
AuthorDate: Tue Jan 7 17:27:21 2020 +0100
Commit:     Pedro Pinto da Silva <pedro.silva at collabora.com>
CommitDate: Tue Jan 7 17:36:21 2020 +0100

    Mobile: w2ui scroll elements:
    - Enable and adjust elements when on mobile so they are visible but discreet (without covering icons)
    - Make them not clickable when on mobile (thus avoiding unwanted scrolled due to users mistaps
    - Make their parent aware of the ongoing scrolling and call w2ui resize on it (thus making the left and right indicator showing and hiding as we please)
    - Test and adjust so this changes do affect affect the click listening on desktop etc
    
    Change-Id: Ic35dadb71e7fd6ae3ff2fad3e52d5219e7520c55
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/86364
    Reviewed-by: Pedro Pinto da Silva <pedro.silva at collabora.com>
    Tested-by: Pedro Pinto da Silva <pedro.silva at collabora.com>

diff --git a/loleaflet/css/toolbar-mobile.css b/loleaflet/css/toolbar-mobile.css
index 3bfcb6a79..8d11b4971 100644
--- a/loleaflet/css/toolbar-mobile.css
+++ b/loleaflet/css/toolbar-mobile.css
@@ -36,9 +36,20 @@
 	}
 	#toolbar-down > .w2ui-scroll-wrapper::-webkit-scrollbar { /*webkit only*/
 		display: none;
-}
-	.w2ui-scroll-right,.w2ui-scroll-left{
-		display: none !important;
+	}
+	#toolbar-down .w2ui-scroll-left, #toolbar-down .w2ui-scroll-right{
+		background: linear-gradient(to left, #fff0 50%, #0b87e730 95%, #0a77cc52 100%);
+		height: 100%;
+		top: 0%;
+		box-shadow: none;
+	}
+	#toolbar-down .w2ui-scroll-right{
+		right: 0;
+		-webkit-transform: rotate(180deg);
+		-moz-transform: rotate(180deg);
+		-ms-transform: rotate(180deg);
+		-o-transform: rotate(180deg);
+		transform: rotate(180deg);
 	}
 	#addressInput{
 		width: 60px !important;
diff --git a/loleaflet/js/w2ui-1.5.rc1.js b/loleaflet/js/w2ui-1.5.rc1.js
index 8d6562a6e..a9e48c1b2 100644
--- a/loleaflet/js/w2ui-1.5.rc1.js
+++ b/loleaflet/js/w2ui-1.5.rc1.js
@@ -13700,7 +13700,7 @@ var w2prompt = function (label, title, callBack) {
             }
             if (!this.box) return;
             // render all buttons
-            var html = '<div class="w2ui-scroll-wrapper" onmousedown="var el=w2ui[\''+ this.name +'\']; if (el) el.resize();">'+
+            var html = '<div class="w2ui-scroll-wrapper" onmousedown="var el=w2ui[\''+ this.name +'\']; if (el) el.resize();" onscroll="var el=w2ui[\'editbar\']; if (el) el.resize();">'+
                        '<table cellspacing="0" cellpadding="0" width="100%"><tbody>'+
                        '<tr>';
             for (var i = 0; i < this.items.length; i++) {
@@ -13718,8 +13718,8 @@ var w2prompt = function (label, title, callBack) {
             html += '<td width="100%" id="tb_'+ this.name +'_right" align="right">'+ this.right +'</td>';
             html += '</tr>'+
                     '</tbody></table></div>'+
-                    '<div class="w2ui-scroll-left" onmousedown="event.preventDefault()" onclick="var el=w2ui[\''+ this.name +'\']; if (el) el.scroll(\'left\');"></div>'+
-                    '<div class="w2ui-scroll-right" onmousedown="event.preventDefault()" onclick="var el=w2ui[\''+ this.name +'\']; if (el) el.scroll(\'right\');"></div>';
+                    '<div class="w2ui-scroll-left" onmousedown="event.preventDefault()" onclick="if($(this).closest(\'#toolbar-up\').length>0 || $(\'#toolbar-down\').width() > 768){var el=w2ui[\''+ this.name +'\']; if (el) el.scroll(\'left\');}"></div>'+
+                    '<div class="w2ui-scroll-right" onmousedown="event.preventDefault()" onclick="if($(this).closest(\'#toolbar-up\').length>0 || $(\'#toolbar-down\').width() > 768){var el=w2ui[\''+ this.name +'\']; if (el) el.scroll(\'right\');}"></div>';
             $(this.box)
                 .attr('name', this.name)
                 .addClass('w2ui-reset w2ui-toolbar')