[Libreoffice-commits] online.git: Branch 'distro/collabora/collabora-online-2-0' - loleaflet/dist loleaflet/src
Pranav Kant
pranavk at collabora.co.uk
Fri Feb 24 14:45:06 UTC 2017
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 <pranavk at 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');
More information about the Libreoffice-commits
mailing list