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.si...@collabora.com>
AuthorDate: Tue Nov 26 12:44:48 2019 +0100
Commit: Pedro Pinto da Silva <pedro.si...@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.si...@collabora.com>
Tested-by: Pedro Pinto da Silva <pedro.si...@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)) {
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
