loleaflet/dist/loleaflet.css | 23 ++++++++++++++ loleaflet/dist/loleaflet.html | 2 - loleaflet/dist/menubar.css | 19 ++++++++++-- loleaflet/dist/spreadsheet.css | 10 +++++- loleaflet/src/control/Control.Menubar.js | 49 ++++++++++++++++++++++--------- loleaflet/src/map/Map.js | 13 ++++++-- 6 files changed, 96 insertions(+), 20 deletions(-)
New commits: commit 6fd2e0ab5e5b919b5bfc17a942178e9c8d81a704 Author: Pranav Kant <pran...@collabora.co.uk> Date: Fri Feb 17 19:54:11 2017 +0530 Minimizing loleaflet UI for readonly documents. This is a cherry-pick of following commits : loleaflet: Vanish UI in readonly mode (cherry picked from commit e4ed4c1ad2a23c919114a973b3eb0e32a6547d67) loleaflet: Fix readonly UI for impress (cherry picked from commit c3f9ebb888ac41502c6dd7080063a4d12d1c62ef) loleaflet: fix readonly UI for spreadsheets (cherry picked from commit 8fa0bb54bda8c41f594770267c70c13a454e7eaf) diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css index 787a328..da8a073 100644 --- a/loleaflet/dist/loleaflet.css +++ b/loleaflet/dist/loleaflet.css @@ -8,6 +8,19 @@ left: 0px; } +#document-container.readonly { + top: 30px; +} + +#toolbar-wrapper.readonly { + display: none; +} + +#logo.readonly { + background-size: 100px; + top: -5px; +} + #map { position: absolute; top: 0px; @@ -32,6 +45,10 @@ body { display: block; } +#presentation-controls-wrapper.readonly { + top: 30px; +} + @media (max-width: 767px) { /* Show slidesorter beyond 768px only */ #presentation-controls-wrapper { @@ -44,12 +61,18 @@ body { #document-container.spreadsheet-document { top: 93px !important; } + #document-container.spreadsheet-document.readonly { + top: 50px !important; + } #document-container { top: 40px; } #spreadsheet-row-column-frame { top: 73px !important; } + #spreadsheet-row-column-frame.readonly { + top: 30px !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 diff --git a/loleaflet/dist/loleaflet.html b/loleaflet/dist/loleaflet.html index bfb3ed6..cde000b 100644 --- a/loleaflet/dist/loleaflet.html +++ b/loleaflet/dist/loleaflet.html @@ -47,7 +47,7 @@ </label> <ul id="main-menu" class="sm sm-simple lo-menu"></ul> </nav> - <div class="toolbar-wrapper"> + <div id="toolbar-wrapper"> <div id="toolbar-up"></div> <div id="formulabar"></div> <div id="toolbar-up-more"></div> diff --git a/loleaflet/dist/menubar.css b/loleaflet/dist/menubar.css index e7e6a86..70fdaee 100644 --- a/loleaflet/dist/menubar.css +++ b/loleaflet/dist/menubar.css @@ -7,6 +7,10 @@ background-color: transparent; } +#main-menu.readonly { + top: 30px; +} + .header-wrapper { background: #efefef; /* Fill up white areas with grey */ min-height: 70px; /* Map starts from 70px onwards in case of writer, calc */ @@ -186,10 +190,11 @@ display: block; } -.toolbar-wrapper { +#toolbar-wrapper { position: relative; } +/* desktop mode */ @media (min-width: 768px) { /* hide the button in desktop view */ .main-menu-btn { @@ -201,13 +206,23 @@ display: block; } #main-menu { - top: 0; + top: 0 !important; } .main-nav { position: static; width: auto; } + /* + * In desktop mode, we already have the close button from the toolbar + */ #menu-closedocument { display: none; } + /* In readonly mode, we have no toolbar => no close button, + * so only way to close the document is file menu option + */ + #menu-closedocument.readonly { + display: block; + top: 3px; /* This is not a menu, plain action, but we want it to appear like a menu */ + } } diff --git a/loleaflet/dist/spreadsheet.css b/loleaflet/dist/spreadsheet.css index b75b78c..15ea4ff 100644 --- a/loleaflet/dist/spreadsheet.css +++ b/loleaflet/dist/spreadsheet.css @@ -3,7 +3,11 @@ top: 123px; left: 50px; bottom: 65px; - } +} + +#document-container.spreadsheet-document.readonly { + top: 50px; +} .spreadsheet-tabs-container { margin: 0; @@ -62,6 +66,10 @@ bottom: 65px; } +#spreadsheet-row-column-frame.readonly { + top: 30px; +} + .spreadsheet-header-corner { border: 1px solid darkgrey; background-color: lightgrey; diff --git a/loleaflet/src/control/Control.Menubar.js b/loleaflet/src/control/Control.Menubar.js index 4128280..279bd6a 100644 --- a/loleaflet/src/control/Control.Menubar.js +++ b/loleaflet/src/control/Control.Menubar.js @@ -7,7 +7,7 @@ L.Control.Menubar = L.Control.extend({ // TODO: Some mechanism to stop the need to copy duplicate menus (eg. Help) options: { text: [ - {name: _('File'), type: 'menu', menu: [ + {name: _('File'), id: 'file', type: 'menu', menu: [ {name: _('Save'), id: 'save', type: 'unocommand', uno: '.uno:Save'}, {name: _('Print'), id: 'print', type: 'action'}, {name: _('See revision history'), id: 'rev-history', type: 'action'}, @@ -28,7 +28,7 @@ L.Control.Menubar = L.Control.extend({ {type: 'separator'}, {name: _('Select all'), type: 'unocommand', uno: '.uno:SelectAll'}] }, - {name: _('View'), type: 'menu', menu: [ + {name: _('View'), id: 'view', type: 'menu', menu: [ {name: _('Full screen'), id: 'fullscreen', type: 'action'}, {type: 'separator'}, {name: _('Zoom in'), id: 'zoomin', type: 'action'}, @@ -152,7 +152,7 @@ L.Control.Menubar = L.Control.extend({ {name: _('Cell'), type: 'unocommand', uno: '.uno:EntireCell'}]}, {name: _('Merge cells'), type: 'unocommand', uno: '.uno:MergeCells'}] }, - {name: _('Help'), type: 'menu', menu: [ + {name: _('Help'), id: 'help', type: 'menu', menu: [ {name: _('Keyboard shortcuts'), id: 'keyboard-shortcuts', type: 'action'}, {name: _('About'), id: 'about', type: 'action'}] }, @@ -160,7 +160,7 @@ L.Control.Menubar = L.Control.extend({ ], presentation: [ - {name: _('File'), type: 'menu', menu: [ + {name: _('File'), id: 'file', type: 'menu', menu: [ {name: _('Save'), id: 'save', type: 'unocommand', uno: '.uno:Save'}, {name: _('Print'), id: 'print', type: 'action'}, {name: _('See revision history'), id: 'rev-history', type: 'action'}, @@ -180,7 +180,7 @@ L.Control.Menubar = L.Control.extend({ {type: 'separator'}, {name: _('Select all'), type: 'unocommand', uno: '.uno:SelectAll'}] }, - {name: _('View'), type: 'menu', menu: [ + {name: _('View'), id: 'view', type: 'menu', menu: [ {name: _('Full screen'), id: 'fullscreen', type: 'action'}, {type: 'separator'}, {name: _('Zoom in'), id: 'zoomin', type: 'action'}, @@ -211,7 +211,7 @@ L.Control.Menubar = L.Control.extend({ {type: 'separator'}, {name: _('Fullscreen presentation'), id: 'fullscreen-presentation', type: 'action'}] }, - {name: _('Help'), type: 'menu', menu: [ + {name: _('Help'), id: 'help', type: 'menu', menu: [ {name: _('Keyboard shortcuts'), id: 'keyboard-shortcuts', type: 'action'}, {name: _('About'), id: 'about', type: 'action'}] }, @@ -219,7 +219,7 @@ L.Control.Menubar = L.Control.extend({ ], spreadsheet: [ - {name: _('File'), type: 'menu', menu: [ + {name: _('File'), id: 'file', type: 'menu', menu: [ {name: _('Save'), id: 'save', type: 'unocommand', uno: '.uno:Save'}, {name: _('Print'), id: 'print', type: 'action'}, {name: _('See revision history'), id: 'rev-history', type: 'action'}, @@ -239,7 +239,7 @@ L.Control.Menubar = L.Control.extend({ {type: 'separator'}, {name: _('Select all'), type: 'unocommand', uno: '.uno:SelectAll'}] }, - {name: _('View'), type: 'menu', menu: [ + {name: _('View'), id: 'view', type: 'menu', menu: [ {name: _('Full screen'), id: 'fullscreen', type: 'action'}] }, {name: _('Insert'), type: 'menu', menu: [ @@ -258,7 +258,7 @@ L.Control.Menubar = L.Control.extend({ {name: _('Delete row'), type: 'unocommand', uno: '.uno:DeleteRows'}, {name: _('Delete column'), type: 'unocommand', uno: '.uno:DeleteColumns'}] }, - {name: _('Help'), type: 'menu', menu: [ + {name: _('Help'), id: 'help', type: 'menu', menu: [ {name: _('Keyboard shortcuts'), id: 'keyboard-shortcuts', type: 'action'}, {name: _('About'), id: 'about', type: 'action'}] }, @@ -267,11 +267,16 @@ L.Control.Menubar = L.Control.extend({ commandStates: {}, - allowedViewModeActions: ['downloadas-pdf', 'downloadas-odt', 'downloadas-doc', 'downloadas-docx', - 'downloadas-odp', 'downloadas-ppt', 'downloadas-pptx', - 'downloadas-ods', 'downloadas-xls', 'downloadas-xlsx', - 'fullscreen', 'zoomin', 'zoomout', 'zoomreset', - 'about', 'keyboard-shortcuts'] + // Only these menu options will be visible in readonly mode + allowedReadonlyMenus: ['file', 'downloadas', 'view', 'help'], + + allowedViewModeActions: [ + 'downloadas-pdf', 'downloadas-odt', 'downloadas-doc', 'downloadas-docx', // file menu + 'downloadas-odp', 'downloadas-ppt', 'downloadas-pptx', // file menu + 'downloadas-ods', 'downloadas-xls', 'downloadas-xlsx', // file menu + 'fullscreen', 'zoomin', 'zoomout', 'zoomreset', // view menu + 'about', 'keyboard-shortcuts' // help menu + ] }, onAdd: function (map) { @@ -520,6 +525,18 @@ L.Control.Menubar = L.Control.extend({ _createMenu: function(menu) { var itemList = []; for (var i in menu) { + if (map._permission === 'readonly' && menu[i].type === 'menu') { + var found = false; + for (var j in this.options.allowedReadonlyMenus) { + if (this.options.allowedReadonlyMenus[j] === menu[i].id) { + found = true; + break; + } + } + if (!found) + continue; + } + if (menu[i].type === 'action') { if ((menu[i].id === 'rev-history' && !revHistoryEnabled) || (menu[i].id === 'closedocument' && !closebutton)) { @@ -548,6 +565,10 @@ L.Control.Menubar = L.Control.extend({ var liItem = L.DomUtil.create('li', ''); if (menu[i].id) { liItem.id = 'menu-' + menu[i].id; + if (menu[i].id === 'closedocument' && map._permission === 'readonly') { + // see corresponding css rule for readonly class usage + L.DomUtil.addClass(liItem, 'readonly'); + } } var aItem = L.DomUtil.create('a', '', liItem); aItem.innerHTML = menu[i].name; diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js index d7b50b0..e97b19e 100644 --- a/loleaflet/src/map/Map.js +++ b/loleaflet/src/map/Map.js @@ -95,11 +95,20 @@ L.Map = L.Evented.extend({ }; this.initComplete = false; - this.on('updatepermission', function() { + this.on('updatepermission', function(e) { if (!this.initComplete) { this._fireInitComplete('updatepermission'); } - }); + + if (e.perm === 'readonly') { + L.DomUtil.addClass(this._container.parentElement, 'readonly'); + L.DomUtil.addClass(L.DomUtil.get('logo'), 'readonly'); + L.DomUtil.addClass(L.DomUtil.get('toolbar-wrapper'), 'readonly'); + L.DomUtil.addClass(L.DomUtil.get('main-menu'), 'readonly'); + L.DomUtil.addClass(L.DomUtil.get('presentation-controls-wrapper'), 'readonly'); + L.DomUtil.addClass(L.DomUtil.get('spreadsheet-row-column-frame'), 'readonly'); + } + }, this); this.on('doclayerinit', function() { if (!this.initComplete) { this._fireInitComplete('doclayerinit'); _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits