[Libreoffice-commits] online.git: Branch 'distro/collabora/collabora-online-2-0' - loleaflet/dist loleaflet/src
Pranav Kant
pranavk at collabora.co.uk
Fri Jan 13 10:04:41 UTC 2017
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 <pranavk at 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.timar at collabora.com>
Tested-by: Andras Timar <andras.timar at 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;
}
- at media (max-width: 768px) {
+ at 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;
More information about the Libreoffice-commits
mailing list