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

Reply via email to