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

[Libreoffice Gerrit user]

 loleaflet/css/loleaflet.css                     |   35 ++++++++++++++++++++
 loleaflet/src/control/Control.ContextToolbar.js |   42 +++++++++++++++++++-----
 2 files changed, 69 insertions(+), 8 deletions(-)

New commits:
commit 532e70db8d719e5f330ab19bc40a78fe00fd7a05
Author:     Tor Lillqvist <tml at collabora.com>
AuthorDate: Fri May 31 19:30:24 2019 +0300
Commit:     Tor Lillqvist <tml at collabora.com>
CommitDate: Fri May 31 19:51:34 2019 +0300

    tdf#122572: Use a context toolbar in the iOS app that looks more native
    
    Not icons, but white text on black background, etc. This is how the
    native context toolbar (whatever it actually is called in iOS) looks
    in Notes and Pages and in text input fields in general.
    
    Change-Id: Ibfa149fa8a951046de25c71022ea5c5684cfcc02

diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 68626261b..ca6e9c9f7 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -361,6 +361,41 @@ body {
 		background: url('images/lc_paste.svg') no-repeat center !important;
 }
 
+.loleaflet-ios-context-table {
+	color: white;
+	text-decoration: underline;
+	font-size: 15px;
+	border-spacing: 0;
+}
+
+.loleaflet-ios-context-button {
+	background-color: black;
+	height: 40px;
+}
+
+.loleaflet-ios-context-left {
+    padding-left: 10px;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+}
+
+.loleaflet-ios-context-first-and-middle-entry {
+    padding-left: 8px;
+    padding-right: 8px;
+    border-right: 1px solid white;
+}
+
+.loleaflet-ios-context-last-entry {
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.loleaflet-ios-context-right {
+    padding-right: 10px;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
 .loleaflet-annotation-menu, .loleaflet-annotation-menu-redline {
 	background: url('images/submenu.svg') no-repeat center/contain !important;
 }
diff --git a/loleaflet/src/control/Control.ContextToolbar.js b/loleaflet/src/control/Control.ContextToolbar.js
index b1a8708ea..139636de8 100644
--- a/loleaflet/src/control/Control.ContextToolbar.js
+++ b/loleaflet/src/control/Control.ContextToolbar.js
@@ -2,6 +2,7 @@
 /*
  * L.Control.ContextToolbar.
  */
+/* global _ */
 
 L.Control.ContextToolbar = L.Control.extend({
 	options: {
@@ -41,19 +42,41 @@ L.Control.ContextToolbar = L.Control.extend({
 		    onUp = 'mouseup',
 		    onDown = 'mousedown',
 		    stopEvents = 'touchstart touchmove touchend mousedown mousemove mouseout mouseover mouseup mousewheel click scroll',
-		    container = L.DomUtil.create('table', 'loleaflet-context-table', this._container),
-		    tbody = L.DomUtil.create('tbody', '', container),
+		    container;
+
+		if (window.ThisIsTheiOSApp)
+			container = L.DomUtil.create('table', 'loleaflet-ios-context-table', this._container);
+		else
+			container = L.DomUtil.create('table', 'loleaflet-context-table', this._container);
+
+		var tbody = L.DomUtil.create('tbody', '', container),
 		    tr = L.DomUtil.create('tr', '', tbody);
 
-		this._cut = L.DomUtil.create(tagTd, 'loleaflet-context-button loleaflet-context-cut', tr);
+		if (window.ThisIsTheiOSApp) {
+			this._leftroundedend = L.DomUtil.create(tagTd, 'loleaflet-ios-context-button loleaflet-ios-context-left', tr);
+			this._cut = L.DomUtil.create(tagTd, 'loleaflet-ios-context-button loleaflet-ios-context-first-and-middle-entry loleaflet-ios-context-cut', tr);
+			// We have at the moment no translations for the bare words "Cut", "Copy",
+			// and "Paste". Only for the menu entries that start with a tilde. So let's
+			// do a horrible hack: Look up those and remove the tilde from the
+			// translation.
+			this._cut.innerHTML = _('~Cut').replace(/~/, '');
+			this._copy = L.DomUtil.create(tagTd, 'loleaflet-ios-context-button loleaflet-ios-context-first-and-middle-entry loleaflet-ios-context-copy', tr);
+			this._copy.innerHTML = _('~Copy').replace(/~/, '');
+			this._paste = L.DomUtil.create(tagTd, 'loleaflet-ios-context-button loleaflet-ios-context-last-entry loleaflet-ios-context-paste', tr);
+			this._paste.innerHTML = _('~Paste').replace(/~/, '');
+			this._rightroundedend = L.DomUtil.create(tagTd, 'loleaflet-ios-context-button loleaflet-ios-context-right', tr);
+		}
+		else {
+			this._cut = L.DomUtil.create(tagTd, 'loleaflet-context-button loleaflet-context-cut', tr);
+			this._copy = L.DomUtil.create(tagTd, 'loleaflet-context-button loleaflet-context-copy', tr);
+			this._paste = L.DomUtil.create(tagTd, 'loleaflet-context-button loleaflet-context-paste', tr);
+		}
 		L.DomEvent.on(this._cut, stopEvents,  L.DomEvent.stopPropagation)
 			.on(this._cut, onDown, this.onMouseDown, this)
 			.on(this._cut, onUp, this.onMouseUp, this);
-		this._copy = L.DomUtil.create(tagTd, 'loleaflet-context-button loleaflet-context-copy', tr);
 		L.DomEvent.on(this._copy, stopEvents,  L.DomEvent.stopPropagation)
 			.on(this._copy, onDown, this.onMouseDown, this)
 			.on(this._copy, onUp, this.onMouseUp, this);
-		this._paste = L.DomUtil.create(tagTd, 'loleaflet-context-button loleaflet-context-paste', tr);
 		L.DomEvent.on(this._paste, stopEvents,  L.DomEvent.stopPropagation)
 			.on(this._paste, onDown, this.onMouseDown, this)
 			.on(this._paste, onUp, this.onMouseUp, this);
@@ -90,13 +113,16 @@ L.Control.ContextToolbar = L.Control.extend({
 	onMouseUp: function (e) {
 		var target = e.target || e.srcElement;
 
-		if (L.DomUtil.hasClass(target, 'loleaflet-context-cut')) {
+		if (L.DomUtil.hasClass(target, 'loleaflet-context-cut') ||
+		   L.DomUtil.hasClass(target, 'loleaflet-ios-context-cut')) {
 			this._map._socket.sendMessage('uno .uno:Cut');
 		}
-		else if (L.DomUtil.hasClass(target, 'loleaflet-context-copy')) {
+		else if (L.DomUtil.hasClass(target, 'loleaflet-context-copy') ||
+			L.DomUtil.hasClass(target, 'loleaflet-ios-context-copy')) {
 			this._map._socket.sendMessage('uno .uno:Copy');
 		}
-		else if (L.DomUtil.hasClass(target, 'loleaflet-context-paste')) {
+		else if (L.DomUtil.hasClass(target, 'loleaflet-context-paste') ||
+			L.DomUtil.hasClass(target, 'loleaflet-ios-context-paste')) {
 			this._map._socket.sendMessage('uno .uno:Paste');
 		}