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

[Pedro Pinto Silva (via logerrit)]

 loleaflet/css/mobilewizard.css                   |   29 +++++++++++------------
 loleaflet/images/lc_helpindex_secondary.svg      |    4 +++
 loleaflet/src/control/Control.JSDialogBuilder.js |    4 +--
 loleaflet/src/control/Control.MobileWizard.js    |    4 +++
 4 files changed, 25 insertions(+), 16 deletions(-)

New commits:
commit 18e2137a17238ec81a26d2022983aec1b6148a08
Author:     Pedro Pinto Silva <pedro.silva at collabora.com>
AuthorDate: Tue Nov 26 12:44:48 2019 +0100
Commit:     Pedro Pinto da Silva <pedro.silva at collabora.com>
CommitDate: Tue Nov 26 12:49:16 2019 +0100

    funcWizard: style
    
    * Replace hardcoded info icon with the existent help icon from the theme
    * Add help background image to the description panel so the user knows at all times (even if looking away and then back) which screen he is and does know that to insert or go see all the function he needs to go back one level
    * text styling
    
    Change-Id: I717d42e7f2b6c54c595a2aefe454a1fa06c20072
    Reviewed-on: https://gerrit.libreoffice.org/83752
    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/mobilewizard.css b/loleaflet/css/mobilewizard.css
index 783d63d1e..4cb167a75 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -180,7 +180,12 @@
 		bottom: 0px;
 		width: 100%;
 	}
-
+	#mobile-wizard.funcwizard div#mobile-wizard-content.hideHelpBG {
+		background: none !important;
+	}
+	#mobile-wizard.funcwizard div#mobile-wizard-content.showHelpBG {
+		background: url(images/lc_helpindex_secondary.svg) no-repeat right 16px bottom 88px / 124px !important;
+	}
 	#mobile-wizard-content:not(.with-slide-sorter-above){
 		top: 63px !important;
 	}
@@ -272,6 +277,7 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
+		background-color: #fff;
 	}
 
 	.ui-header.mobile-wizard:active {
@@ -323,25 +329,20 @@
 	}
 
 	.func-info-icon {
-		display: table-cell;
-		padding-left: 8px;
-		padding-right: 8px;
-		background: transparent;
-		font-size: 1.2em;
-		font-weight: bold;
-		color: #aaa !important;
-		vertical-align: middle;
-		border-radius: 100px;
-		border: solid 2px #aaa;
+		display: block;
+		background: url(images/lc_helpindex.svg) no-repeat center;
+		min-width: 28px;
+		min-height: 28px;
 	}
 
 	.func-info-sig {
-		margin-left: 1em;
-		margin-bottom: 2em;
+		margin: 1em 0px 1em 4%;
+		font-weight: bold;
+		color: #444444 !important;
 	}
 
 	.func-info-desc {
-		margin-left: 1em;
+		margin-left: 4%;
 	}
 
 	.entry-value {
diff --git a/loleaflet/images/lc_helpindex_secondary.svg b/loleaflet/images/lc_helpindex_secondary.svg
new file mode 100644
index 000000000..96d6567a2
--- /dev/null
+++ b/loleaflet/images/lc_helpindex_secondary.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <circle cx="12" cy="12" r="10" fill="#e6e6e6"/>
+ <path d="m12 5c-2.21 0-4 1.79-4 4h2c0-1.1 0.9-2 2-2s2 0.9 2 2c0 0.55-0.21984 1.0502-0.58984 1.4102l-1.2402 1.2598c-0.72 0.73-1.1699 1.7301-1.1699 2.8301v0.5h2c0-1.5 0.44992-2.1001 1.1699-2.8301l0.90039-0.91992c0.57-0.57 0.92969-1.37 0.92969-2.25 0-2.21-1.79-4-4-4zm-1 13v2h2v-2z" fill="#fff"/>
+</svg>
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index ba39f3d2d..51be4b3f5 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -283,8 +283,8 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		titleSpan.innerHTML = data.text;
 
 		var rightDiv = L.DomUtil.create('div', 'ui-header-right', sectionTitle);
-		var arrowSpan = L.DomUtil.create('span', 'func-info-icon', rightDiv);
-		arrowSpan.innerHTML = 'i';
+		var arrowSpan = L.DomUtil.create('div', 'func-info-icon', rightDiv);
+		arrowSpan.innerHTML = '';
 
 		var contentDiv = L.DomUtil.create('div', 'ui-content level-' + builder._currentDepth + ' mobile-wizard', parentContainer);
 		contentDiv.title = data.text;
diff --git a/loleaflet/src/control/Control.MobileWizard.js b/loleaflet/src/control/Control.MobileWizard.js
index 69205e60f..2af4f2cf9 100644
--- a/loleaflet/src/control/Control.MobileWizard.js
+++ b/loleaflet/src/control/Control.MobileWizard.js
@@ -105,6 +105,8 @@ L.Control.MobileWizard = L.Control.extend({
 		var titles = '.ui-header.level-' + this.getCurrentLevel() + '.mobile-wizard';
 		$(titles).hide('slide', { direction: 'left' }, 'fast');
 		$(contentToShow).siblings().hide();
+		$('#mobile-wizard.funcwizard div#mobile-wizard-content').removeClass('hideHelpBG');
+		$('#mobile-wizard.funcwizard div#mobile-wizard-content').addClass('showHelpBG');
 		$(contentToShow).show('slide', { direction: 'right' }, 'fast');
 
 		this._currentDepth++;
@@ -137,6 +139,8 @@ L.Control.MobileWizard = L.Control.extend({
 
 			$('.ui-content.level-' + this._currentDepth + '.mobile-wizard').siblings().show('slide', { direction: 'left' }, 'fast');
 			$('.ui-content.level-' + this._currentDepth + '.mobile-wizard').hide();
+			$('#mobile-wizard.funcwizard div#mobile-wizard-content').removeClass('showHelpBG');
+			$('#mobile-wizard.funcwizard div#mobile-wizard-content').addClass('hideHelpBG');
 			$('.ui-header.level-' + this._currentDepth + '.mobile-wizard').show('slide', { direction: 'left' }, 'fast');
 
 			if (this._currentDepth == 0 || (this._isTabMode && this._currentDepth == 1)) {