loleaflet/dist/loleaflet.css | 27 ++++++++++++++++- loleaflet/dist/loleaflet.html | 3 + loleaflet/dist/menubar.css | 41 ++++++++++---------------- loleaflet/dist/spreadsheet.css | 16 +++++++--- loleaflet/dist/toolbar.css | 4 +- loleaflet/dist/toolbar/toolbar.js | 10 +++--- loleaflet/src/control/Control.ColumnHeader.js | 6 +-- loleaflet/src/control/Control.Menubar.js | 29 ++++++++++++------ loleaflet/src/control/Control.RowHeader.js | 4 +- 9 files changed, 90 insertions(+), 50 deletions(-)
New commits: commit d26a49ddd3bf13125be77d82dac80418e9b866c1 Author: Pranav Kant <pran...@collabora.co.uk> Date: Thu Jan 12 18:09:28 2017 +0530 loleaflet: Collapse to a single row in mobile mode Combination of following cherry picks: loleaflet: Collapse to a single row in mobile mode, more doc space (cherry picked from commit c20ff7adda74a5ac7cc6f9355a38c9ee5200a2f0) loleaflet: Put row column in a container Change-Id: Ib271a690783c51d19e3fd6c1634620740051e3bc (cherry picked from commit 15ed828698f12d690b2226f3b409a5e03e8a7650) Position row/col headers absolutely inside header frame ... so that its easy to move all of it when we switch from mobile mode and vice versa. Change-Id: If2db351aafc4a8fefa05bc88f73c0046a3f887b8 (cherry picked from commit 54e2b237b6bc4b1b2c3ab4d6563d243a77d63b6f) loleaflet: No need of resizebreak now ... as we have a mobile mode now where we remove drop downs anyways. Change-Id: Ic08634d25d6a3ae272e50642f34d2124c0472bf5 (cherry picked from commit 77b27255f1ae787e43edc29137e3be556a9d6040) loleaflet: right padding for hamburger option menu Change-Id: I1d946f537e66d637e82354ff3af80353a930d8eb (cherry picked from commit 21d3ef8c3362064303e9536756d7139463e7feb5) loleaflet: Remove useless rule This seems to be superfluous. w2ui library automatically set the width of the toolbar overriding this value always. Change-Id: Ia87018533f99769ef1dc48463ac58d32cbf40d9d (cherry picked from commit 17e2d42e9ed284e7fa163227328b72426ce10a7e) loleaflet: Set toolbar-up-more width to auto in low screen width Change-Id: I10c41630da3a3003db1663bea211b42335f468c8 (cherry picked from commit 9b564af0034330617377b1fae9f96ef2d5f22863) loleaflet: Move closebutton to menu bar option in mobile mode Change-Id: Ie6b9f507862e36ada44fda88acd96b1b495ae002 (cherry picked from commit 456afb50bd3487a4e5637ddf1857fa8b540aabfb) loleaflet: Remove this hamburger <-> closebutton animation Change-Id: I0c5a4ad2ee0b1d7041091d54c21f538c1a2912f8 (cherry picked from commit 9a4aba717a8b531d0f84e90f7c554497be9e2ef6) Reviewed-on: https://gerrit.libreoffice.org/33004 Reviewed-by: Andras Timar <andras.ti...@collabora.com> Tested-by: Andras Timar <andras.ti...@collabora.com> diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css index c8c5889..787a328 100644 --- a/loleaflet/dist/loleaflet.css +++ b/loleaflet/dist/loleaflet.css @@ -32,7 +32,7 @@ body { display: block; } -@media (max-width: 768px) { +@media (max-width: 767px) { /* Show slidesorter beyond 768px only */ #presentation-controls-wrapper { display: none; @@ -41,6 +41,31 @@ body { #document-container.parts-preview-document { left: 0px !important; } + #document-container.spreadsheet-document { + top: 93px !important; + } + #document-container { + top: 40px; + } + #spreadsheet-row-column-frame { + top: 73px !important; + } + /* There seems to be some bug in w2ui library - + * when we are in very low screen width, the toolbar-up-more + * toolbar's width doesn't adjust according to its children toolbar + * items and truncate all items but one. Lets override the width in + * mobile mode to prevent that. + */ + #toolbar-up-more { + width: auto !important; + } + /* We need to give space for options menu */ + #tb_toolbar-up_item_rightmenupadding { + padding-right: 40px; + } + #tb_toolbar-up_item_close { + display: none; + } } .loleaflet-font { diff --git a/loleaflet/dist/loleaflet.html b/loleaflet/dist/loleaflet.html index d7a9186..bfb3ed6 100644 --- a/loleaflet/dist/loleaflet.html +++ b/loleaflet/dist/loleaflet.html @@ -55,6 +55,9 @@ <input id="insertgraphic" type="file" onchange="onInsertFile()" style="position: fixed; top: -100em"> </div> + <div id="spreadsheet-row-column-frame"> + </div> + <div id="document-container"> <div id="map"></div> </div> diff --git a/loleaflet/dist/menubar.css b/loleaflet/dist/menubar.css index 72c8926..e7e6a86 100644 --- a/loleaflet/dist/menubar.css +++ b/loleaflet/dist/menubar.css @@ -1,9 +1,10 @@ #main-menu { - top: 30px; + top: 39px; height: 25px; padding-left: 125px; z-index: 1000; outline: none; + background-color: transparent; } .header-wrapper { @@ -12,6 +13,8 @@ } .main-nav { height: 30px; /* on mouseover menubar items, border emerges */ + position: absolute; + width: 100%; } /* Customizations to sm-simple theme to make it look like LO menu, lo-menu class */ @@ -117,8 +120,8 @@ .main-menu-btn { z-index: 2000; - float: left; - left: 35px; + float: right; + top: 5px; margin: 2px 10px; position: relative; display: inline-block; @@ -159,27 +162,6 @@ left: 0; } - -/* x icon */ - -#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon { - height: 0; - background: transparent; -} - -#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before { - top: 0; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after { - top: 0; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - - /* hide menu state checkbox (keep it visible to screen readers) */ #main-menu-state { @@ -204,6 +186,10 @@ display: block; } +.toolbar-wrapper { + position: relative; +} + @media (min-width: 768px) { /* hide the button in desktop view */ .main-menu-btn { @@ -217,4 +203,11 @@ #main-menu { top: 0; } + .main-nav { + position: static; + width: auto; + } + #menu-closedocument { + display: none; + } } diff --git a/loleaflet/dist/spreadsheet.css b/loleaflet/dist/spreadsheet.css index 0d5fc59..b75b78c 100644 --- a/loleaflet/dist/spreadsheet.css +++ b/loleaflet/dist/spreadsheet.css @@ -54,6 +54,14 @@ border-top: 0px; } +#spreadsheet-row-column-frame { + position: absolute; + left: 0; + right: 0; + top: 103px; + bottom: 65px; +} + .spreadsheet-header-corner { border: 1px solid darkgrey; background-color: lightgrey; @@ -63,7 +71,7 @@ padding: 0px; margin: 0px; left: 0px; - top: 103px; + top: 0; width: 48px; height: 19px; } @@ -76,7 +84,7 @@ display: inline-block; white-space: nowrap; left: 49px; - top: 103px; + top: 0; right: 0; height: 19px; overflow: hidden; @@ -123,9 +131,9 @@ position: absolute; left: 0; - top: 123px; + top: 20px; width: 48px; - bottom: 65px; + bottom: 0; overflow: hidden; } diff --git a/loleaflet/dist/toolbar.css b/loleaflet/dist/toolbar.css index 47e4604..4d4d483 100644 --- a/loleaflet/dist/toolbar.css +++ b/loleaflet/dist/toolbar.css @@ -18,8 +18,7 @@ #toolbar-up-more { position: absolute; right: 10px; - width: 200px; - top: 65px; + top: 40px; border: 1px solid darkgrey; z-index: 1000; display: none; @@ -55,6 +54,7 @@ height: 29px; width: 800px; } + #tb_toolbar-up_item_close { position: fixed; z-index: 1050; diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js index 86d034e..983b6d6 100644 --- a/loleaflet/dist/toolbar/toolbar.js +++ b/loleaflet/dist/toolbar/toolbar.js @@ -26,6 +26,8 @@ var toolbarUpMobileItems = [ 'centerpara', 'rightpara', 'justifypara', + 'right', + 'rightmenupadding', 'close' ]; @@ -129,10 +131,7 @@ function resizeToolbar() { // move items from toolbar-up -> toolbar-up-more while ($('#toolbar-up')[0].scrollWidth > Math.max($(window).width(), parseInt($('body').css('min-width')))) { - var itemId = toolbarUp.items[toolbarUp.items.length - 4].id; - if ($(window).width() >= mobileWidth && itemId === 'resizebreak') { - return; - } + var itemId = toolbarUp.items[toolbarUp.items.length - 5].id; item = toolbarUp.get(itemId); toolbarUp.remove(itemId); toolbarUpMore.insert(toolbarUpMore.items[0], item); @@ -463,7 +462,7 @@ $(function () { {type: 'html', id: 'styles', html: '<select class="styles-select"></select>'}, {type: 'html', id: 'fonts', html: '<select class="fonts-select"></select>'}, {type: 'html', id: 'fontsizes', html: '<select class="fontsizes-select"></select>'}, - {type: 'break', id: 'resizebreak'}, + {type: 'break'}, {type: 'button', id: 'bold', img: 'bold', hint: _('Bold'), uno: 'Bold'}, {type: 'button', id: 'italic', img: 'italic', hint: _('Italic'), uno: 'Italic'}, {type: 'button', id: 'underline', img: 'underline', hint: _('Underline'), uno: 'Underline'}, @@ -505,6 +504,7 @@ $(function () { {type: 'button', id: 'specialcharacter', img: 'specialcharacter', hint: _('Special Character')}, {type: 'html', id: 'right'}, {type: 'button', id: 'more', img: 'more', hint: _('More')}, + {type: 'html', id: 'rightmenupadding'}, {type: 'button', id: 'close', img: 'closedoc', hint: _('Close document'), hidden: true} ], onClick: function (e) { diff --git a/loleaflet/src/control/Control.ColumnHeader.js b/loleaflet/src/control/Control.ColumnHeader.js index cd231cc..dc7c2d2 100644 --- a/loleaflet/src/control/Control.ColumnHeader.js +++ b/loleaflet/src/control/Control.ColumnHeader.js @@ -22,10 +22,10 @@ L.Control.ColumnHeader = L.Control.Header.extend({ this._map.on('updateselectionheader', this._onUpdateSelection, this); this._map.on('clearselectionheader', this._onClearSelection, this); this._map.on('updatecurrentheader', this._onUpdateCurrentColumn, this); - var docContainer = this._map.options.documentContainer; - var cornerHeader = L.DomUtil.create('div', 'spreadsheet-header-corner', docContainer.parentElement); + var rowColumnFrame = L.DomUtil.get('spreadsheet-row-column-frame'); + var cornerHeader = L.DomUtil.create('div', 'spreadsheet-header-corner', rowColumnFrame); L.DomEvent.addListener(cornerHeader, 'click', this._onCornerHeaderClick, this); - var headersContainer = L.DomUtil.create('div', 'spreadsheet-header-columns-container', docContainer.parentElement); + var headersContainer = L.DomUtil.create('div', 'spreadsheet-header-columns-container', rowColumnFrame); this._columns = L.DomUtil.create('div', 'spreadsheet-header-columns', headersContainer); this._position = 0; diff --git a/loleaflet/src/control/Control.Menubar.js b/loleaflet/src/control/Control.Menubar.js index 3193c17..fbd2405 100644 --- a/loleaflet/src/control/Control.Menubar.js +++ b/loleaflet/src/control/Control.Menubar.js @@ -2,7 +2,7 @@ * Control.Menubar */ -/* global $ _ map title vex revHistoryEnabled */ +/* global $ _ map title vex revHistoryEnabled closebutton */ L.Control.Menubar = L.Control.extend({ // TODO: Some mechanism to stop the need to copy duplicate menus (eg. Help) options: { @@ -155,7 +155,8 @@ L.Control.Menubar = L.Control.extend({ {name: _('Help'), type: 'menu', menu: [ {name: _('Keyboard shortcuts'), id: 'keyboard-shortcuts', type: 'action'}, {name: _('About'), id: 'about', type: 'action'}] - } + }, + {name: _('Close'), id: 'closedocument', type: 'action'} ], presentation: [ @@ -213,7 +214,8 @@ L.Control.Menubar = L.Control.extend({ {name: _('Help'), type: 'menu', menu: [ {name: _('Keyboard shortcuts'), id: 'keyboard-shortcuts', type: 'action'}, {name: _('About'), id: 'about', type: 'action'}] - } + }, + {name: _('Close'), id: 'closedocument', type: 'action'} ], spreadsheet: [ @@ -259,7 +261,8 @@ L.Control.Menubar = L.Control.extend({ {name: _('Help'), type: 'menu', menu: [ {name: _('Keyboard shortcuts'), id: 'keyboard-shortcuts', type: 'action'}, {name: _('About'), id: 'about', type: 'action'}] - } + }, + {name: _('Close'), id: 'closedocument', type: 'action'} ], commandStates: {}, @@ -462,7 +465,11 @@ L.Control.Menubar = L.Control.extend({ // if we are being loaded inside an iframe, ask // our host to show revision history mode map.fire('postMessage', {msgId: 'rev-history'}); - } else if (id === 'repair') { + } else if (id === 'closedocument') { + map.fire('postMessage', {msgId: 'UI_Close'}); + map.remove(); + } + else if (id === 'repair') { map._socket.sendMessage('commandvalues command=.uno:DocumentRepair'); } else if (id === 'a4portrait') { map.sendUnoCommand('.uno:AttributePageSize {"AttributePageSize.Width":{"type":"long", "value": "21000"},"AttributePageSize.Height":{"type":"long", "value": "29700"}}'); @@ -513,10 +520,11 @@ L.Control.Menubar = L.Control.extend({ _createMenu: function(menu) { var itemList = []; for (var i in menu) { - if (menu[i].type === 'action' && - menu[i].id === 'rev-history' && - !revHistoryEnabled) { - continue; + if (menu[i].type === 'action') { + if ((menu[i].id === 'rev-history' && !revHistoryEnabled) || + (menu[i].id === 'closedocument' && !closebutton)) { + continue; + } } if (menu[i].id === 'print' && this._map['wopi'].HidePrintOption) @@ -538,6 +546,9 @@ L.Control.Menubar = L.Control.extend({ } var liItem = L.DomUtil.create('li', ''); + if (menu[i].id) { + liItem.id = 'menu-' + menu[i].id; + } var aItem = L.DomUtil.create('a', '', liItem); aItem.innerHTML = menu[i].name; diff --git a/loleaflet/src/control/Control.RowHeader.js b/loleaflet/src/control/Control.RowHeader.js index f2d5bfd..4152a4d 100644 --- a/loleaflet/src/control/Control.RowHeader.js +++ b/loleaflet/src/control/Control.RowHeader.js @@ -22,8 +22,8 @@ L.Control.RowHeader = L.Control.Header.extend({ this._map.on('updateselectionheader', this._onUpdateSelection, this); this._map.on('clearselectionheader', this._onClearSelection, this); this._map.on('updatecurrentheader', this._onUpdateCurrentRow, this); - var docContainer = this._map.options.documentContainer; - var headersContainer = L.DomUtil.create('div', 'spreadsheet-header-rows-container', docContainer.parentElement); + var rowColumnFrame = L.DomUtil.get('spreadsheet-row-column-frame'); + var headersContainer = L.DomUtil.create('div', 'spreadsheet-header-rows-container', rowColumnFrame); this._rows = L.DomUtil.create('div', 'spreadsheet-header-rows', headersContainer); this._position = 0; _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits