[Libreoffice-commits] online.git: 2 commits - loleaflet/css loleaflet/html loleaflet/src
Szymon Kłos (via logerrit)
logerrit at kemper.freedesktop.org
Tue Oct 8 14:43:36 UTC 2019
loleaflet/css/toolbar.css | 25 +++++
loleaflet/html/loleaflet.html.m4 | 3
loleaflet/src/control/Control.JSDialogBuilder.js | 107 ++++++++++++++++++++---
loleaflet/src/control/Control.MobileWizard.js | 20 +++-
4 files changed, 140 insertions(+), 15 deletions(-)
New commits:
commit 5fba4dc23122022887fd12e50ad401380151607b
Author: Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Tue Oct 8 16:42:01 2019 +0200
Commit: Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Tue Oct 8 16:42:45 2019 +0200
jsdialogs: move tabs to a separate container
Change-Id: I08723d02f47553644c29780f41a0a74470995d8c
diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index 642e58ca8..b24e8bb3f 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -926,6 +926,10 @@ tr.useritem > td > img {
width: 100%;
}
+#mobile-wizard-tabs {
+ height: 42px;
+}
+
#mobile-wizard-content *{
font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
color: #212121;
diff --git a/loleaflet/html/loleaflet.html.m4 b/loleaflet/html/loleaflet.html.m4
index 72abb80ca..eafa2b306 100644
--- a/loleaflet/html/loleaflet.html.m4
+++ b/loleaflet/html/loleaflet.html.m4
@@ -192,7 +192,8 @@ ifelse(MOBILEAPP,[true],
<td id="mobile-wizard-title" class="ui-widget"></td>
</tr>
</table>
- <div id="mobile-wizard-content">
+ <div id="mobile-wizard-tabs"></div>
+ <div id="mobile-wizard-content"></div>
</div>
<!-- Remove if you don't want the About dialog -->
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 48d478bf2..c575d3627 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -188,7 +188,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
},
_panelTabsHandler: function(parentContainer, data, builder) {
- var tabsContainer = L.DomUtil.create('div', 'ui-tabs mobile-wizard ui-widget', parentContainer);
+ var tabsContainer = L.DomUtil.create('div', 'ui-tabs mobile-wizard ui-widget');
var contentsContainer = L.DomUtil.create('div', 'ui-tabs-content mobile-wizard ui-widget', parentContainer);
var title1 = builder._cleanText(data.children[1].children[0].id);
@@ -236,12 +236,15 @@ L.Control.JSDialogBuilder = L.Control.extend({
$(contentDiv2).hide();
if (builder.wizard) {
+ builder.wizard.setTabs(tabsContainer);
+
$(tab1).click(function() {
$(tab1).addClass('selected');
$(tab2).removeClass('selected');
$(contentDiv).show();
$(contentDiv2).hide();
});
+
$(tab2).click(function() {
$(tab2).addClass('selected');
$(tab1).removeClass('selected');
@@ -252,6 +255,9 @@ L.Control.JSDialogBuilder = L.Control.extend({
console.debug('Builder used outside of mobile wizard: please implement the click handler');
}
+ $(tab1).click();
+ builder.wizard.goLevelDown(contentDiv);
+
return false;
},
diff --git a/loleaflet/src/control/Control.MobileWizard.js b/loleaflet/src/control/Control.MobileWizard.js
index 4da1fb2cc..04def764b 100644
--- a/loleaflet/src/control/Control.MobileWizard.js
+++ b/loleaflet/src/control/Control.MobileWizard.js
@@ -3,13 +3,14 @@
* L.Control.MobileWizard
*/
-/* global $ w2ui*/
+/* global $ w2ui */
L.Control.MobileWizard = L.Control.extend({
_inMainMenu: true,
_isActive: false,
_currentDepth: 0,
_mainTitle: '',
+ _isTabMode: false,
onAdd: function (map) {
this.map = map;
@@ -24,6 +25,9 @@ L.Control.MobileWizard = L.Control.extend({
this._inMainMenu = true;
this.content.empty();
this.backButton.addClass('close-button');
+ $('#mobile-wizard-tabs').empty();
+ $('#mobile-wizard-content').css('top', '48px');
+ this._isTabMode = false;
},
_setupBackButton: function() {
@@ -52,8 +56,16 @@ L.Control.MobileWizard = L.Control.extend({
return this._currentDepth;
},
+ setTabs: function(tabs) {
+ $('#mobile-wizard-tabs').empty();
+ $('#mobile-wizard-tabs').append(tabs);
+ $('#mobile-wizard-content').css('top', '110px');
+ this._isTabMode = true;
+ },
+
goLevelDown: function(contentToShow) {
- this.backButton.removeClass('close-button');
+ if (!this._isTabMode || this._currentDepth > 0)
+ this.backButton.removeClass('close-button');
var titles = '.ui-header.level-' + this.getCurrentLevel() + '.mobile-wizard';
$(titles).hide('slide', { direction: 'left' }, 'fast');
@@ -66,7 +78,7 @@ L.Control.MobileWizard = L.Control.extend({
},
goLevelUp: function() {
- if (this._inMainMenu) {
+ if (this._inMainMenu || (this._isTabMode && this._currentDepth == 1)) {
this._hideWizard();
this._currentDepth = 0;
if (window.mobileWizard === true) {
@@ -87,7 +99,7 @@ L.Control.MobileWizard = L.Control.extend({
$('.ui-content.level-' + this._currentDepth + '.mobile-wizard').hide();
$('.ui-header.level-' + this._currentDepth + '.mobile-wizard').show('slide', { direction: 'left' }, 'fast');
- if (this._currentDepth == 0) {
+ if (this._currentDepth == 0 || (this._isTabMode && this._currentDepth == 1)) {
this._inMainMenu = true;
this.backButton.addClass('close-button');
}
commit 1004e5e7ea7d068c63b692917481b62d766302c7
Author: Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Tue Oct 8 10:50:20 2019 +0200
Commit: Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Tue Oct 8 16:42:45 2019 +0200
jsdialogs: if only two panels, create tabs
Change-Id: I714d1cb3f1babb80a85b303163ca8437d4f75be3
diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index 56b85ac3d..642e58ca8 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -1008,3 +1008,24 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
.menu-entry-no-icon {
padding-left: 42px;
}
+
+.ui-tabs.mobile-wizard {
+ text-align: center;
+}
+
+.ui-tab.mobile-wizard {
+ display: inline-table;
+ height: 36px;
+ line-height: 36px;
+ vertical-align: middle;
+ margin: 5px;
+ padding: 5px;
+ border-radius: 10px;
+ border: solid 1px #0b87e7;
+}
+
+.ui-tab.selected.mobile-wizard {
+ color: white;
+ background-color: #eaf5ff;
+ border: none;
+}
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 138a4eb9a..48d478bf2 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -36,6 +36,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
this._controlHandlers['grid'] = this._containerHandler;
this._controlHandlers['frame'] = this._frameHandler;
this._controlHandlers['panel'] = this._panelHandler;
+ this._controlHandlers['paneltabs'] = this._panelTabsHandler;
this._controlHandlers['container'] = this._containerHandler;
this._controlHandlers['window'] = this._containerHandler;
this._controlHandlers['borderwindow'] = this._containerHandler;
@@ -186,6 +187,74 @@ L.Control.JSDialogBuilder = L.Control.extend({
return false;
},
+ _panelTabsHandler: function(parentContainer, data, builder) {
+ var tabsContainer = L.DomUtil.create('div', 'ui-tabs mobile-wizard ui-widget', parentContainer);
+ var contentsContainer = L.DomUtil.create('div', 'ui-tabs-content mobile-wizard ui-widget', parentContainer);
+
+ var title1 = builder._cleanText(data.children[1].children[0].id);
+ var icon1 = builder._createIconPath(title1);
+
+ var tab1 = L.DomUtil.create('div', 'ui-tab mobile-wizard', tabsContainer);
+
+ var button = L.DomUtil.create('img', 'ui-tab-content mobile-wizard unobutton', tab1);
+ button.src = icon1;
+
+ var label = L.DomUtil.create('span', 'ui-tab-content mobile-wizard unolabel', tab1);
+ label.innerHTML = title1;
+
+ var contentDiv = L.DomUtil.create('div', 'ui-content level-' + builder._currentDepth + ' mobile-wizard', contentsContainer);
+ contentDiv.title = title1;
+
+ builder._currentDepth++;
+ for (var i = 0; i < data.children[1].children[0].children.length; i++) {
+ builder.build(contentDiv, [data.children[1].children[0].children[i]]);
+ }
+ builder._currentDepth--;
+
+ $(contentDiv).hide();
+
+
+ var tab2 = L.DomUtil.create('div', 'ui-tab mobile-wizard', tabsContainer);
+
+ var title2 = builder._cleanText(data.children[3].children[0].id);
+ var icon2 = builder._createIconPath(title2);
+
+ var button2 = L.DomUtil.create('img', 'ui-tab-content mobile-wizard unobutton', tab2);
+ button2.src = icon2;
+
+ var label2 = L.DomUtil.create('span', 'ui-tab-content mobile-wizard unolabel', tab2);
+ label2.innerHTML = title2;
+
+ var contentDiv2 = L.DomUtil.create('div', 'ui-content level-' + builder._currentDepth + ' mobile-wizard', contentsContainer);
+ contentDiv2.title = title2;
+
+ builder._currentDepth++;
+ for (i = 0; i < data.children[3].children[0].children.length; i++) {
+ builder.build(contentDiv2, [data.children[3].children[0].children[i]]);
+ }
+ builder._currentDepth--;
+
+ $(contentDiv2).hide();
+ if (builder.wizard) {
+ $(tab1).click(function() {
+ $(tab1).addClass('selected');
+ $(tab2).removeClass('selected');
+ $(contentDiv).show();
+ $(contentDiv2).hide();
+ });
+ $(tab2).click(function() {
+ $(tab2).addClass('selected');
+ $(tab1).removeClass('selected');
+ $(contentDiv).hide();
+ $(contentDiv2).show();
+ });
+ } else {
+ console.debug('Builder used outside of mobile wizard: please implement the click handler');
+ }
+
+ return false;
+ },
+
_radiobuttonControl: function(parentContainer, data, builder) {
var radiobutton = L.DomUtil.createWithId('input', data.id, parentContainer);
radiobutton.type = 'radio';
@@ -325,9 +394,12 @@ L.Control.JSDialogBuilder = L.Control.extend({
return false;
},
- _createIconPathFronUnoCommand: function(command) {
- var commandName = command.substring('.uno:'.length);
- return 'images/lc_' + commandName.toLowerCase() + '.svg';
+ _createIconPath: function(name) {
+ var cleanName = name;
+ var prefixLength = '.uno:'.length;
+ if (name.substr(0, prefixLength) == '.uno:')
+ cleanName = name.substr(prefixLength);
+ return 'images/lc_' + cleanName.toLowerCase() + '.svg';
},
_unoToolButton: function(parentContainer, data, builder) {
@@ -339,7 +411,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
var id = data.command.substr('.uno:'.length);
div.id = id;
- var icon = builder._createIconPathFronUnoCommand(data.command);
+ var icon = builder._createIconPath(data.command);
var buttonId = id + 'img';
button = L.DomUtil.create('img', 'ui-content unobutton', div);
@@ -459,13 +531,22 @@ L.Control.JSDialogBuilder = L.Control.extend({
var handler = this._controlHandlers[childType];
- if (handler)
- processChildren = handler(childObject, childData, this);
- else
- console.warn('Unsupported control type: \"' + childType + '\"');
+ var twoPanelsAsChildren = childData.children && childData.children.length == 5
+ && childData.children[1] && childData.children[1].type == 'panel'
+ && childData.children[3] && childData.children[3].type == 'panel';
- if (processChildren && childData.children != undefined)
- this.build(childObject, childData.children);
+ if (twoPanelsAsChildren) {
+ handler = this._controlHandlers['paneltabs'];
+ processChildren = handler(childObject, childData, this);
+ } else {
+ if (handler)
+ processChildren = handler(childObject, childData, this);
+ else
+ console.warn('Unsupported control type: \"' + childType + '\"');
+
+ if (processChildren && childData.children != undefined)
+ this.build(childObject, childData.children);
+ }
}
}
});
More information about the Libreoffice-commits
mailing list