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 <[email protected]> AuthorDate: Tue Oct 8 16:42:01 2019 +0200 Commit: Szymon Kłos <[email protected]> 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 <[email protected]> AuthorDate: Tue Oct 8 10:50:20 2019 +0200 Commit: Szymon Kłos <[email protected]> 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); + } } } }); _______________________________________________ Libreoffice-commits mailing list [email protected] https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
