[Libreoffice-commits] online.git: 15 commits - loleaflet/build loleaflet/dist loleaflet/main.css loleaflet/src
Pranav Kant
pranavk at collabora.co.uk
Wed Jan 11 11:43:22 UTC 2017
loleaflet/build/build.js | 2
loleaflet/dist/loleaflet.css | 35 +--
loleaflet/dist/loleaflet.html | 31 ++
loleaflet/dist/menubar.css | 216 +++++++++++++++++++
loleaflet/dist/partsPreviewControl.css | 15 -
loleaflet/dist/sm-simple.css | 287 --------------------------
loleaflet/dist/spreadsheet.css | 10
loleaflet/dist/toolbar.css | 25 --
loleaflet/dist/toolbar/toolbar.js | 117 ++++++++++
loleaflet/main.css | 4
loleaflet/src/control/Control.Menubar.js | 26 ++
loleaflet/src/control/Control.PartsPreview.js | 9
loleaflet/src/control/Permission.js | 4
loleaflet/src/core/Browser.js | 2
14 files changed, 422 insertions(+), 361 deletions(-)
New commits:
commit d6af42eae02a04b89dd052ae6df977f59809e729
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Wed Jan 11 13:55:53 2017 +0530
loleaflet: Remove items from statusbar in mobile mode
Change-Id: I8dbc356a2968764c72edf401d33399c92f9f73e4
diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js
index 5d93fc0..6835cc1 100644
--- a/loleaflet/dist/toolbar/toolbar.js
+++ b/loleaflet/dist/toolbar/toolbar.js
@@ -27,9 +27,23 @@ var toolbarUpMobileItems = [
'close'
];
+var statusbarMobileItems = [
+ 'search',
+ 'searchprev',
+ 'searchnext',
+ 'cancelsearch',
+ 'left',
+ 'right',
+ 'modifiedstatuslabel',
+ 'modifiedstatuslabelbreak',
+ 'prev',
+ 'next'
+];
+
function _mobilify() {
var toolbarUp = w2ui['toolbar-up'];
var toolbarUpMore = w2ui['toolbar-up-more'];
+ var statusbar = w2ui['toolbar-down'];
for (var itemIdx in toolbarUp.items) {
var id = toolbarUp.items[itemIdx].id;
@@ -43,11 +57,19 @@ function _mobilify() {
toolbarUpMore.hide(id);
}
}
+
+ for (itemIdx in statusbar.items) {
+ id = statusbar.items[itemIdx].id;
+ if (statusbarMobileItems.indexOf(id) === -1 && !statusbar.get(id).hidden) {
+ statusbar.hide(id);
+ }
+ }
}
function _unmobilify() {
var toolbarUp = w2ui['toolbar-up'];
var toolbarUpMore = w2ui['toolbar-up-more'];
+ var statusbar = w2ui['toolbar-down'];
for (var itemIdx in toolbarUp.items) {
var id = toolbarUp.items[itemIdx].id;
@@ -61,6 +83,13 @@ function _unmobilify() {
toolbarUpMore.show(id);
}
}
+
+ for (itemIdx in statusbar.items) {
+ id = statusbar.items[itemIdx].id;
+ if (statusbarMobileItems.indexOf(id) === -1 && statusbar.get(id).hidden) {
+ statusbar.show(id);
+ }
+ }
}
function resizeToolbar() {
@@ -631,7 +660,7 @@ $(function () {
{type: 'html', id: 'left'},
{type: 'html', id: 'right'},
{type: 'html', id: 'modifiedstatuslabel', html: '<div id="modifiedstatuslabel" class="loleaflet-font"></div>'},
- {type: 'break'},
+ {type: 'break', id: 'modifiedstatuslabelbreak'},
{type: 'drop', id: 'userlist', text: _('No users'), html: '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table></div>' },
{type: 'break'},
{type: 'button', id: 'prev', img: 'prev', hint: _('Previous page')},
commit aa7ef0337cb5df4f080bfc21c8e54573a22d872d
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Wed Jan 11 12:52:39 2017 +0530
Fix specificity and hide slide sorter for smaller screen width
Using !important always is not a good idea. You can't override an
!important with another !important and we have started to face
such situations now where we want to adjust element's alignment
based on media-screen width. Instead lets fix the specificity to
make this work.
.parts-preview-document or .spreadsheet-document would be
0-0-1-0. Use #document-container.parts-preview-document to
increase its specificity to 0-1-1-0 so that we can do without the
!important flag and use !important flag for media-screen blocks.
Change-Id: I1d15df492cdc7cd1cd09c3b43c8ea84295a07205
diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index e6ca00d..c8c5889 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -29,6 +29,18 @@ body {
bottom: 66px;
max-width: 214px;
border-top: 1px solid #b6b6b6;
+ display: block;
+}
+
+ at media (max-width: 768px) {
+ /* Show slidesorter beyond 768px only */
+ #presentation-controls-wrapper {
+ display: none;
+ }
+
+ #document-container.parts-preview-document {
+ left: 0px !important;
+ }
}
.loleaflet-font {
diff --git a/loleaflet/dist/partsPreviewControl.css b/loleaflet/dist/partsPreviewControl.css
index ecd9e57..4dc87f9 100644
--- a/loleaflet/dist/partsPreviewControl.css
+++ b/loleaflet/dist/partsPreviewControl.css
@@ -1,5 +1,5 @@
-.parts-preview-document {
- left: 214px !important;
+#document-container.parts-preview-document {
+ left: 214px;
}
#slide-sorter {
diff --git a/loleaflet/dist/spreadsheet.css b/loleaflet/dist/spreadsheet.css
index b53ba61..0d5fc59 100644
--- a/loleaflet/dist/spreadsheet.css
+++ b/loleaflet/dist/spreadsheet.css
@@ -1,8 +1,8 @@
-.spreadsheet-document {
- border-top: 1px solid #B6B6B6 !important;
- top: 123px !important;
- left: 50px !important;
- bottom: 65px !important;
+#document-container.spreadsheet-document {
+ border-top: 1px solid #B6B6B6;
+ top: 123px;
+ left: 50px;
+ bottom: 65px;
}
.spreadsheet-tabs-container {
commit b34f5a38a279871dd7094677435641c83c8eef43
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Wed Jan 11 12:22:03 2017 +0530
loleaflet: Wrap slide sorter and related refactoring
Slide sorter and presentation toolbar are now contained in a
presentation-controls-wrapper and alignment values are now
factored out and only present in the container now.
Also, position the presentation-toolbar absolutely outside of
container so that slidesorter scrollbar doesn't go behind the
toolbar hindering some view of the slide thumbnails.
This would also make the job of hiding/showing the whole control
easier.
Change-Id: I080e854906ef0635aba02cfeb687bf87463ef756
diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index ea4cf3d..e6ca00d 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -21,6 +21,16 @@ body {
margin: 0;
}
+#presentation-controls-wrapper {
+ background: #dfdfdf;
+ position: absolute;
+ top: 70px;
+ left: 0px;
+ bottom: 66px;
+ max-width: 214px;
+ border-top: 1px solid #b6b6b6;
+}
+
.loleaflet-font {
font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
diff --git a/loleaflet/dist/loleaflet.html b/loleaflet/dist/loleaflet.html
index a323646..04c6008 100644
--- a/loleaflet/dist/loleaflet.html
+++ b/loleaflet/dist/loleaflet.html
@@ -59,7 +59,12 @@
<div id="map"></div>
</div>
<div id="spreadsheet-toolbar"></div>
- <div id="presentation-toolbar"></div>
+
+ <div id="presentation-controls-wrapper">
+ <div id="slide-sorter"></div>
+ <div id="presentation-toolbar"></div>
+ </div>
+
<div id="toolbar-down"></div>
<div id="about-dialog" style="display:none; text-align: center;">
diff --git a/loleaflet/dist/partsPreviewControl.css b/loleaflet/dist/partsPreviewControl.css
index 550fb2f..ecd9e57 100644
--- a/loleaflet/dist/partsPreviewControl.css
+++ b/loleaflet/dist/partsPreviewControl.css
@@ -2,15 +2,8 @@
left: 214px !important;
}
-.parts-preview {
- background: #DFDFDF;
- position: absolute;
- top: 70px;
- left: 0px;
- bottom: 33px;
- max-width: 214px;
- overflow: hidden;
- border-top: 1px solid #B6B6B6;
+#slide-sorter {
+ height: 100%
}
.preview-frame {
diff --git a/loleaflet/dist/toolbar.css b/loleaflet/dist/toolbar.css
index 8b613ce..d678bf3 100644
--- a/loleaflet/dist/toolbar.css
+++ b/loleaflet/dist/toolbar.css
@@ -34,14 +34,11 @@
}
#presentation-toolbar {
- background: #DFDFDF;
- left: 0;
+ background-color: #dfdfdf;
text-align: center;
- bottom: 33px;
- width: 203px;
- padding: 0;
position: absolute;
z-index: 500;
+ width: 100%;
}
/* center the toolbar */
diff --git a/loleaflet/src/control/Control.PartsPreview.js b/loleaflet/src/control/Control.PartsPreview.js
index b18db96..c440910 100644
--- a/loleaflet/src/control/Control.PartsPreview.js
+++ b/loleaflet/src/control/Control.PartsPreview.js
@@ -11,8 +11,7 @@ L.Control.PartsPreview = L.Control.extend({
onAdd: function (map) {
this._previewInitialized = false;
this._previewTiles = [];
- var docContainer = map.options.documentContainer;
- this._partsPreviewCont = L.DomUtil.create('div', 'parts-preview', docContainer.parentElement);
+ this._partsPreviewCont = L.DomUtil.get('slide-sorter');
map.on('updateparts', this._updateDisabled, this);
map.on('updatepart', this._updatePart, this);
@@ -78,7 +77,7 @@ L.Control.PartsPreview = L.Control.extend({
},
_setPart: function (e) {
- var part = $('.parts-preview .mCSB_container .preview-frame').index(e.target.parentNode);
+ var part = $('#slide-sorter .mCSB_container .preview-frame').index(e.target.parentNode);
if (part !== null) {
this._map.setPart(parseInt(part));
}
@@ -150,7 +149,7 @@ L.Control.PartsPreview = L.Control.extend({
// the scrollbar has to be re-initialized here else it doesn't work
// probably a bug from the scrollbar
this._previewTiles[e.id].onload = function () {
- $('.parts-preview').mCustomScrollbar({
+ $('#slide-sorter').mCustomScrollbar({
axis: 'y',
theme: 'dark-thick',
scrollInertia: 0,
@@ -162,7 +161,7 @@ L.Control.PartsPreview = L.Control.extend({
},
_updatePreviewIds: function () {
- $('.parts-preview').mCustomScrollbar('update');
+ $('#slide-sorter').mCustomScrollbar('update');
},
_insertPreview: function (e) {
commit 90d48ee3c436678faae91289d33a8f7bd0243545
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Wed Jan 11 10:31:38 2017 +0530
loleaflet: Fix close button alignment
Change-Id: I0a63229f37e0ea1c8e3c770afac0527890c328e1
diff --git a/loleaflet/dist/toolbar.css b/loleaflet/dist/toolbar.css
index d4eee29..8b613ce 100644
--- a/loleaflet/dist/toolbar.css
+++ b/loleaflet/dist/toolbar.css
@@ -59,11 +59,10 @@
width: 800px;
}
#tb_toolbar-up_item_close {
- position: absolute;
- padding-right: 6px;
- margin-top: -25px;
+ position: fixed;
z-index: 1050;
right: 0;
+ top: 0;
}
#tb_toolbar-up_item_right {
width: 100%;
commit b8fae541847612c65970ee7f1f3e51aa899ef702
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Wed Jan 11 10:21:20 2017 +0530
loleaflet: On touch devices, don't disable dragging
Change-Id: I722070a7768d89b7b861df4afc37f68098ca9321
diff --git a/loleaflet/src/control/Permission.js b/loleaflet/src/control/Permission.js
index 5be2554..602de90 100644
--- a/loleaflet/src/control/Permission.js
+++ b/loleaflet/src/control/Permission.js
@@ -6,7 +6,9 @@ L.Map.include({
this._permission = perm;
if (perm === 'edit') {
this._socket.sendMessage('requestloksession');
- this.dragging.disable();
+ if (!L.Browser.touch) {
+ this.dragging.disable();
+ }
}
else if (perm === 'view' || perm === 'readonly') {
this.dragging.enable();
diff --git a/loleaflet/src/core/Browser.js b/loleaflet/src/core/Browser.js
index 38640b9..90912b8 100644
--- a/loleaflet/src/core/Browser.js
+++ b/loleaflet/src/core/Browser.js
@@ -30,7 +30,7 @@
mobile = typeof orientation !== 'undefined' || ua.indexOf('mobile') !== -1,
msPointer = !window.PointerEvent && window.MSPointerEvent,
- pointer = (window.PointerEvent && navigator.maxTouchPoints) || msPointer,
+ pointer = (window.PointerEvent && navigator.pointerEnabled && navigator.maxTouchPoints) || msPointer,
ie3d = ie && ('transition' in doc.style),
webkit3d = ('WebKitCSSMatrix' in window) && ('m11' in new window.WebKitCSSMatrix()) && !android23,
commit e7101b6f936838db53a7ea6ff1cc385774c7d6c9
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Tue Jan 10 23:54:04 2017 +0530
loleaflet: No min-width, we want to mobilify
Change-Id: Ifa52f03683c32939369f0ab97e456f10b954ccf9
diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index 4082350..ea4cf3d 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -19,7 +19,6 @@
body {
margin: 0;
- min-width: 600px;
}
.loleaflet-font {
commit 70bbe20f958420bb1017fa03dd5abebe2043d32f
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Tue Jan 10 23:38:06 2017 +0530
tdf#100329: responsive menubar floating on left
Change-Id: I6089ed44a7920a79de7e89f1b0d884c2881d4c7c
diff --git a/loleaflet/dist/loleaflet.html b/loleaflet/dist/loleaflet.html
index 58a9d34..a323646 100644
--- a/loleaflet/dist/loleaflet.html
+++ b/loleaflet/dist/loleaflet.html
@@ -40,6 +40,11 @@
<div class="header-wrapper">
<div id="logo" class="logo"></div>
<nav class="main-nav" role="navigation">
+ <!-- Mobile menu toggle button (hamburger/x icon) -->
+ <input id="main-menu-state" type="checkbox" />
+ <label class="main-menu-btn" for="main-menu-state">
+ <span class="main-menu-btn-icon"></span>
+ </label>
<ul id="main-menu" class="sm sm-simple lo-menu"></ul>
</nav>
<div class="toolbar-wrapper">
diff --git a/loleaflet/dist/menubar.css b/loleaflet/dist/menubar.css
index ade9518..69bd3b0 100644
--- a/loleaflet/dist/menubar.css
+++ b/loleaflet/dist/menubar.css
@@ -1,5 +1,5 @@
#main-menu {
- top: 0;
+ top: 30px;
height: 25px;
padding-left: 125px;
z-index: 1000;
@@ -58,6 +58,9 @@
background: #538ecd;
color: #fff;
}
+.lo-menu > li {
+ background: #efefef; /* top-level menus remain greyish */
+}
.lo-menu > li > a:hover, .lo-menu > li > a:focus, .lo-menu > li > a:active, .lo-menu > li > a.highlighted {
background: #fff;
color: #000;
@@ -81,6 +84,7 @@
.lo-menu ul a span.sub-arrow {
right: 0;
margin-right: 5px;
+ background: transparent; /* we want them to be transparent always whether mobile or desktop */
}
.lo-menu ul > li {
border-left: 0;
@@ -95,3 +99,118 @@
background-color: #efefef;
}
/* lo-menu customizations end */
+
+.main-nav:after {
+ clear: both;
+ content: "\00a0";
+ display: block;
+ height: 0;
+ font: 0px/0 serif;
+ overflow: hidden;
+}
+
+/* Mobile menu toggle button */
+
+.main-menu-btn {
+ z-index: 2000;
+ float: left;
+ left: 35px;
+ margin: 2px 10px;
+ position: relative;
+ display: inline-block;
+ width: 21px;
+ height: 21px;
+ text-indent: 21px;
+ white-space: nowrap;
+ overflow: hidden;
+ cursor: pointer;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+
+/* hamburger icon */
+
+.main-menu-btn-icon,
+.main-menu-btn-icon:before,
+.main-menu-btn-icon:after {
+ position: absolute;
+ top: 50%;
+ left: 2px;
+ height: 2px;
+ width: 20px;
+ background: #555;
+ -webkit-transition: all 0.25s;
+ transition: all 0.25s;
+}
+
+.main-menu-btn-icon:before {
+ content: '';
+ top: -7px;
+ left: 0;
+}
+
+.main-menu-btn-icon:after {
+ content: '';
+ top: 7px;
+ 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 {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ border: 0;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+}
+
+
+/* hide the menu in mobile view */
+
+#main-menu-state:not(:checked) ~ #main-menu {
+ display: none;
+}
+
+#main-menu-state:checked ~ #main-menu {
+ display: block;
+}
+
+ at media (min-width: 768px) {
+ /* hide the button in desktop view */
+ .main-menu-btn {
+ position: absolute;
+ top: -99999px;
+ }
+ /* always show the menu in desktop view */
+ #main-menu-state:not(:checked) ~ #main-menu {
+ display: block;
+ }
+ #main-menu {
+ top: 0;
+ }
+}
diff --git a/loleaflet/src/control/Control.Menubar.js b/loleaflet/src/control/Control.Menubar.js
index b475768..3193c17 100644
--- a/loleaflet/src/control/Control.Menubar.js
+++ b/loleaflet/src/control/Control.Menubar.js
@@ -316,6 +316,28 @@ L.Control.Menubar = L.Control.extend({
$('#main-menu').bind('beforeshow.smapi', {self: this}, this._beforeShow);
$('#main-menu').bind('click.smapi', {self: this}, this._onClicked);
+ // SmartMenus mobile menu toggle button
+ $(function() {
+ var $mainMenuState = $('#main-menu-state');
+ if ($mainMenuState.length) {
+ // animate mobile menu
+ $mainMenuState.change(function(e) {
+ var $menu = $('#main-menu');
+ if (this.checked) {
+ $menu.hide().slideDown(250, function() { $menu.css('display', ''); });
+ } else {
+ $menu.show().slideUp(250, function() { $menu.css('display', ''); });
+ }
+ });
+ // hide mobile menu beforeunload
+ $(window).bind('beforeunload unload', function() {
+ if ($mainMenuState[0].checked) {
+ $mainMenuState[0].click();
+ }
+ });
+ }
+ });
+
this._initialized = true;
},
commit 4becb5b7e99b786c5ba0966a98509e4a8b513772
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Tue Jan 10 21:49:15 2017 +0530
Remove irrelevant toolbars
Change-Id: Ib8a8ea4fb597a5aaee802cb7ad04e893cd6eab75
diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js
index 841db9e..5d93fc0 100644
--- a/loleaflet/dist/toolbar/toolbar.js
+++ b/loleaflet/dist/toolbar/toolbar.js
@@ -913,6 +913,10 @@ map.on('doclayerinit', function () {
{ func: '16', text: _('None'), icon: 'selected'},
]},
]);
+
+ // Remove irrelevant toolbars
+ $('#presentation-toolbar').hide();
+
break;
case 'text':
toolbarUp.remove('wraptextseparator', 'wraptext', 'togglemergecells', 'break-toggle', 'numberformatcurrency', 'numberformatpercent', 'numberformatdecimal', 'numberformatdate', 'numberformatincdecimals', 'numberformatdecdecimals', 'break-number', 'sortascending', 'sortdescending');
@@ -931,6 +935,12 @@ map.on('doclayerinit', function () {
{type: 'html', id: 'SelectionMode',
html: '<div id="StatusSelectionMode" class="loleaflet-font" title="'+_('Selection Mode')+ '" style="padding: 5px 5px;">  </div>' },
]);
+
+ // Remove irrelevant toolbars
+ $('#formulabar').hide();
+ $('#spreadsheet-toolbar').hide();
+ $('#presentation-toolbar').hide();
+
break;
case 'presentation':
var presentationToolbar = w2ui['presentation-toolbar'];
@@ -942,10 +952,20 @@ map.on('doclayerinit', function () {
{type: 'html', id: 'PageStatus',
html: '<div id="PageStatus" class="loleaflet-font" title="'+_('Number of Slides')+ '" style="padding: 5px 5px;">  </div>' },
]);
+
+ // Remove irrelevant toolbars
+ $('#formulabar').hide();
+ $('#spreadsheet-toolbar').hide();
+
break;
case 'drawing':
toolbarUp.remove('insertannotation', 'wraptextseparator', 'wraptext', 'togglemergecells', 'break-toggle', 'numberformatcurrency', 'numberformatpercent', 'numberformatdecimal', 'numberformatdate', 'numberformatincdecimals', 'numberformatdecdecimals', 'break-number', 'sortascending', 'sortdescending');
toolbarUpMore.remove('insertannotation', 'wraptextseparator', 'wraptext', 'togglemergecells', 'break-toggle', 'numberformatcurrency', 'numberformatpercent', 'numberformatdecimal', 'numberformatdate', 'numberformatincdecimals', 'numberformatdecdecimals', 'break-number', 'sortascending', 'sortdescending');
+
+ // Remove irrelevant toolbars
+ $('#formulabar').hide();
+ $('#spreadsheet-toolbar').hide();
+
break;
}
toolbarUp.refresh();
commit bf7df9fa661ef99b2c9930b5a8ca7d5e3e6c6fa6
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Tue Jan 10 21:18:05 2017 +0530
loleaflet: Get rid of all fixed position
Change-Id: I104882d995722c14ddefeecf579d1233f37371d6
diff --git a/loleaflet/dist/loleaflet.html b/loleaflet/dist/loleaflet.html
index 6b9d590..58a9d34 100644
--- a/loleaflet/dist/loleaflet.html
+++ b/loleaflet/dist/loleaflet.html
@@ -43,7 +43,6 @@
<ul id="main-menu" class="sm sm-simple lo-menu"></ul>
</nav>
<div class="toolbar-wrapper">
- <div id="toolbar" style="visibility: hidden;"></div>
<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 b1685aa..ade9518 100644
--- a/loleaflet/dist/menubar.css
+++ b/loleaflet/dist/menubar.css
@@ -1,15 +1,19 @@
#main-menu {
top: 0;
- position: fixed;
height: 25px;
- display: inline-flex;
- right: 0;
- left: 0;
padding-left: 125px;
z-index: 1000;
outline: none;
}
+.header-wrapper {
+ background: #efefef; /* Fill up white areas with grey */
+ min-height: 70px; /* Map starts from 70px onwards in case of writer, calc */
+}
+.main-nav {
+ height: 30px; /* on mouseover menubar items, border emerges */
+}
+
/* Customizations to sm-simple theme to make it look like LO menu, lo-menu class */
.lo-menu {
border: none;
diff --git a/loleaflet/dist/toolbar.css b/loleaflet/dist/toolbar.css
index 7451b40..d4eee29 100644
--- a/loleaflet/dist/toolbar.css
+++ b/loleaflet/dist/toolbar.css
@@ -1,21 +1,8 @@
-#toolbar {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- padding-bottom: 15px;
- text-align: center;
-}
-
#toolbar-up {
left: 0;
right: 0;
text-align: center;
- padding: 6px;
- padding-top: 6px;
- padding-bottom: 4px;
z-index: 1000;
- margin-top: 25px;
}
#toolbar-down {
commit fac33f7a2fe1f6927cbe0fde04c06a1d2fcbcdf6
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Tue Jan 10 20:56:08 2017 +0530
loleaflet: Introduce div wrappers
Change-Id: I19ae5daaa11e810b23a1d12b81c510ce96527ac7
diff --git a/loleaflet/dist/loleaflet.html b/loleaflet/dist/loleaflet.html
index 09fca48..6b9d590 100644
--- a/loleaflet/dist/loleaflet.html
+++ b/loleaflet/dist/loleaflet.html
@@ -36,15 +36,20 @@
The "map" div is the actual document and it has the document's size
and width, this being inside the smaller "document-container" will
cause the content to overflow, creating scrollbars -->
- <div id="logo" class="logo"></div>
- <ul id="main-menu" class="sm sm-simple lo-menu"></ul>
- <div>
- <div id="toolbar" style="visibility: hidden;"></div>
- <div id="toolbar-up"></div>
- <div id="formulabar"></div>
- <div id="toolbar-up-more"></div>
+
+ <div class="header-wrapper">
+ <div id="logo" class="logo"></div>
+ <nav class="main-nav" role="navigation">
+ <ul id="main-menu" class="sm sm-simple lo-menu"></ul>
+ </nav>
+ <div class="toolbar-wrapper">
+ <div id="toolbar" style="visibility: hidden;"></div>
+ <div id="toolbar-up"></div>
+ <div id="formulabar"></div>
+ <div id="toolbar-up-more"></div>
+ </div>
+ <input id="insertgraphic" type="file" onchange="onInsertFile()" style="position: fixed; top: -100em">
</div>
- <input id="insertgraphic" type="file" onchange="onInsertFile()" style="position: fixed; top: -100em">
<div id="document-container">
<div id="map"></div>
commit da11a1fd94f472dae435fb4b887f02c5f6eb6b1b
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Tue Jan 10 20:48:48 2017 +0530
tdf#100329: Hide some toolbar buttons when screen width is low
Most of these can easily be accessed from the menu bar. Lets keep
only most commonly used and simple toolbar items here.
Change-Id: If9ad379c6491b907a980e0ef5b4a46a60266fafe
diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js
index 4263580..841db9e 100644
--- a/loleaflet/dist/toolbar/toolbar.js
+++ b/loleaflet/dist/toolbar/toolbar.js
@@ -10,10 +10,70 @@ function onDelete(e) {
}
}
+// When we are in mobile view, only these items in toolbar-up will be shown
+var toolbarUpMobileItems = [
+ 'left',
+ 'save',
+ 'savebreak',
+ 'bold',
+ 'italic',
+ 'underline',
+ 'strikeout',
+ 'formatbreak',
+ 'leftpara',
+ 'centerpara',
+ 'rightpara',
+ 'justifypara',
+ 'close'
+];
+
+function _mobilify() {
+ var toolbarUp = w2ui['toolbar-up'];
+ var toolbarUpMore = w2ui['toolbar-up-more'];
+
+ for (var itemIdx in toolbarUp.items) {
+ var id = toolbarUp.items[itemIdx].id;
+ if (toolbarUpMobileItems.indexOf(id) === -1 && toolbarUp.get(id) && !toolbarUp.get(id).hidden) {
+ toolbarUp.hide(id);
+ }
+ }
+ for (itemIdx in toolbarUpMore.items) {
+ id = toolbarUpMore.items[itemIdx].id;
+ if (toolbarUpMobileItems.indexOf(id) === -1 && toolbarUp.get(id) && !toolbarUp.get(id).hidden) {
+ toolbarUpMore.hide(id);
+ }
+ }
+}
+
+function _unmobilify() {
+ var toolbarUp = w2ui['toolbar-up'];
+ var toolbarUpMore = w2ui['toolbar-up-more'];
+
+ for (var itemIdx in toolbarUp.items) {
+ var id = toolbarUp.items[itemIdx].id;
+ if (toolbarUpMobileItems.indexOf(id) === -1 && toolbarUp.get(id) && toolbarUp.get(id).hidden) {
+ toolbarUp.show(id);
+ }
+ }
+ for (itemIdx in toolbarUpMore.items) {
+ id = toolbarUpMore.items[itemIdx].id;
+ if (toolbarUpMobileItems.indexOf(id) === -1 && toolbarUpMore.get(id) && toolbarUpMore.get(id).hidden) {
+ toolbarUpMore.show(id);
+ }
+ }
+}
+
function resizeToolbar() {
var hasMoreItems = false;
var toolbarUp = w2ui['toolbar-up'];
var toolbarUpMore = w2ui['toolbar-up-more'];
+
+ if ($(window).width() <= 768) {
+ _mobilify();
+ } else {
+ _unmobilify();
+ }
+
// move items from toolbar-up-more -> toolbar-up
while ($('#toolbar-up')[0].scrollWidth <= $(window).width()) {
var item = toolbarUpMore.items[0];
@@ -27,7 +87,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 (itemId === 'resizebreak') {
+ if ($(window).width() > 768 && itemId === 'resizebreak') {
return;
}
item = toolbarUp.get(itemId);
@@ -362,7 +422,7 @@ $(function () {
{ text: _('Wrap through'), id: 'wrap-WrapThrough' }
]},
{type: 'button', id: 'save', img: 'save', hint: _('Save'), uno: 'Save'},
- {type: 'break'},
+ {type: 'break', id: 'savebreak'},
{type: 'button', id: 'undo', img: 'undo', hint: _('Undo'), uno: 'Undo'},
{type: 'button', id: 'redo', img: 'redo', hint: _('Redo'), uno: 'Redo'},
{type: 'button', id: 'repair', img: 'repair', hint: _('Document repair')},
@@ -375,7 +435,7 @@ $(function () {
{type: 'button', id: 'italic', img: 'italic', hint: _('Italic'), uno: 'Italic'},
{type: 'button', id: 'underline', img: 'underline', hint: _('Underline'), uno: 'Underline'},
{type: 'button', id: 'strikeout', img: 'strikeout', hint: _('Strikeout'), uno: 'Strikeout'},
- {type: 'break'},
+ {type: 'break', id: 'formatbreak'},
{type: 'button', id: 'insertfootnote', img: 'insertfootnote', hint: _('Insert Footnote'), uno: 'InsertFootnote' },
{type: 'break' },
{type: 'html', id: 'fontcolor-html', html: '<input id="fontColorPicker" style="display:none;">'},
commit da36bfc520b75b5dd68212b7b12703fcfaf39798
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Mon Jan 9 14:15:24 2017 +0530
loleaflet: New class lo-menu to override sm-simple theme
We can now directly use sm-simple.css from node_modules in its
pristine form and then use custom css rules to override to make
it look like LO menu bar instead of directly making changes in
sm-simple.css
Change-Id: I0773ca27fdf549d5c7df0bc781dfc019225d7cb6
diff --git a/loleaflet/build/build.js b/loleaflet/build/build.js
index 4165efb..33f782d 100644
--- a/loleaflet/build/build.js
+++ b/loleaflet/build/build.js
@@ -26,8 +26,8 @@ var CSSBundleFiles = [
'dist/scrollBar.css',
'dist/searchControl.css',
'dist/spreadsheet.css',
+ 'dist/menubar.css',
'plugins/draw-0.2.4/dist/leaflet.draw.css',
- 'dist/sm-simple.css'
];
var adminBundleFiles = [
diff --git a/loleaflet/dist/loleaflet.html b/loleaflet/dist/loleaflet.html
index 3546548..09fca48 100644
--- a/loleaflet/dist/loleaflet.html
+++ b/loleaflet/dist/loleaflet.html
@@ -37,7 +37,7 @@
and width, this being inside the smaller "document-container" will
cause the content to overflow, creating scrollbars -->
<div id="logo" class="logo"></div>
- <ul id="main-menu" class="sm sm-simple"></ul>
+ <ul id="main-menu" class="sm sm-simple lo-menu"></ul>
<div>
<div id="toolbar" style="visibility: hidden;"></div>
<div id="toolbar-up"></div>
diff --git a/loleaflet/dist/menubar.css b/loleaflet/dist/menubar.css
index 1020192..b1685aa 100644
--- a/loleaflet/dist/menubar.css
+++ b/loleaflet/dist/menubar.css
@@ -9,3 +9,85 @@
z-index: 1000;
outline: none;
}
+
+/* Customizations to sm-simple theme to make it look like LO menu, lo-menu class */
+.lo-menu {
+ border: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+
+.lo-menu a, .lo-menu a:hover, .lo-menu a:focus, .lo-menu a:active {
+ font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ line-height: 15px;
+}
+
+.lo-menu a.disabled {
+ cursor: default;
+}
+.lo-menu > li > a.has-submenu {
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-top: 8px;
+ z-index: 500;
+ border-left: 1px solid #efefef;
+ border-right: 1px solid #efefef;
+}
+
+.lo-menu {
+ background: #efefef;
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Chrome/Safari/Opera */
+ -khtml-user-select: none; /* Konqueror */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none;
+ cursor: default;
+}
+.lo-menu a, .lo-menu a:hover, .lo-menu a:focus, .lo-menu a:active, .lo-menu a.highlighted {
+ padding: 5px 15px;
+ color: #000;
+}
+.lo-menu a:hover, .lo-menu a:focus, .lo-menu a:active, .lo-menu a.highlighted {
+ background: #538ecd;
+ color: #fff;
+}
+.lo-menu > li > a:hover, .lo-menu > li > a:focus, .lo-menu > li > a:active, .lo-menu > li > a.highlighted {
+ background: #fff;
+ color: #000;
+ border-color: #bbbbbb;
+ border-bottom: 1px solid #bbb;
+}
+.lo-menu > li > a.highlighted {
+ border-bottom-color: #fff;
+}
+.lo-menu > li > ul {
+ margin-top: -1px !important;
+ z-index: 400;
+}
+.lo-menu > li > a span.sub-arrow {
+ display: none;
+}
+.lo-menu ul {
+ border: 1px solid #bbbbbb;
+ background: white;
+}
+.lo-menu ul a span.sub-arrow {
+ right: 0;
+ margin-right: 5px;
+}
+.lo-menu ul > li {
+ border-left: 0;
+ border-top: none;
+}
+.lo-menu a.separator {
+ height: 1px;
+ margin: 4px 0;
+ overflow: hidden;
+ padding-top: 0;
+ padding-bottom: 0;
+ background-color: #efefef;
+}
+/* lo-menu customizations end */
diff --git a/loleaflet/dist/sm-simple.css b/loleaflet/dist/sm-simple.css
deleted file mode 100644
index d955ab4..0000000
--- a/loleaflet/dist/sm-simple.css
+++ /dev/null
@@ -1,284 +0,0 @@
-.sm-simple {
- background: white;
-}
-.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active {
- padding: 13px 20px;
- /* make room for the toggle button (sub indicator) */
- padding-right: 58px;
- color: #555555;
- font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
- font-size: 12px;
- font-weight: normal;
- line-height: 15px;
- text-decoration: none;
-}
-.sm-simple a.current {
- background: #555555;
- color: white;
-}
-.sm-simple a.disabled {
- color: #cccccc;
-}
-.sm-simple a span.sub-arrow {
- position: absolute;
- top: 50%;
- margin-top: -17px;
- left: auto;
- right: 4px;
- width: 34px;
- height: 34px;
- overflow: hidden;
- font: bold 14px/34px monospace !important;
- text-align: center;
- text-shadow: none;
- background: rgba(0, 0, 0, 0.08);
-}
-.sm-simple a.highlighted span.sub-arrow:before {
- display: block;
- content: '-';
-}
-.sm-simple li {
-}
-.sm-simple > li:first-child {
- border-top: 0;
-}
-.sm-simple ul {
- background: #fff;
-}
-.sm-simple ul a, .sm-simple ul a:hover, .sm-simple ul a:focus, .sm-simple ul a:active {
- font-size: 12px;
- border-left: 8px solid transparent;
-}
-.sm-simple ul ul a,
-.sm-simple ul ul a:hover,
-.sm-simple ul ul a:focus,
-.sm-simple ul ul a:active {
- border-left: 16px solid transparent;
-}
-.sm-simple ul ul ul a,
-.sm-simple ul ul ul a:hover,
-.sm-simple ul ul ul a:focus,
-.sm-simple ul ul ul a:active {
- border-left: 24px solid transparent;
-}
-.sm-simple ul ul ul ul a,
-.sm-simple ul ul ul ul a:hover,
-.sm-simple ul ul ul ul a:focus,
-.sm-simple ul ul ul ul a:active {
- border-left: 32px solid transparent;
-}
-.sm-simple ul ul ul ul ul a,
-.sm-simple ul ul ul ul ul a:hover,
-.sm-simple ul ul ul ul ul a:focus,
-.sm-simple ul ul ul ul ul a:active {
- border-left: 40px solid transparent;
-}
-
-/*
-Switch to desktop layout
------------------------------------------------
-These transform the menu tree from
-collapsible to desktop (navbar + dropdowns)
------------------------------------------------*/
-/* start... (it's not recommended editing these rules) */
- at media (min-width: 768px) {
- .sm-simple ul {
- position: absolute;
- width: 12em;
- }
-
- .sm-simple li {
- float: left;
- }
-
- .sm-simple.sm-rtl li {
- float: right;
- }
-
- .sm-simple ul li {
- float: none;
- }
-
- .sm-simple a {
- white-space: nowrap;
- }
-
- .sm-simple ul a, .sm-simple.sm-vertical a {
- white-space: normal;
- }
-
- .sm-simple .sm-nowrap > li > a, .sm-simple .sm-nowrap > li > :not(ul) a {
- white-space: nowrap;
- }
-
- /* ...end */
- .sm-simple {
- background: #efefef;
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Chrome/Safari/Opera */
- -khtml-user-select: none; /* Konqueror */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none;
- cursor: default;
- }
- .sm-simple a.disabled {
- cursor: default;
- }
- .sm-simple > li > a.has-submenu {
- padding-left: 15px;
- padding-right: 15px;
- padding-top: 8px;
- z-index: 500;
- border-left: 1px solid #efefef;
- border-right: 1px solid #efefef;
- }
- .sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
- padding: 5px 15px;
- color: #000;
- }
- .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
- background: #538ecd;
- color: #fff;
- }
- .sm-simple > li > a:hover, .sm-simple > li > a:focus, .sm-simple > li > a:active, .sm-simple > li > a.highlighted {
- background: #fff;
- color: #000;
- border-color: #bbbbbb;
- border-bottom: 1px solid #bbb;
- }
- .sm-simple > li > a.highlighted {
- border-bottom-color: #fff;
- }
- .sm-simple a.current {
- background: #555555;
- color: white;
- }
- .sm-simple a.disabled {
- background: white;
- color: #cccccc;
- }
- .sm-simple a.has-submenu {
- padding-right: 32px;
- }
-
- .sm-simple > li > ul {
- margin-top: -1px !important;
- z-index: 400;
- }
- .sm-simple a span.sub-arrow {
- top: 50%;
- margin-top: -8px;
- right: 20px;
- width: 8px;
- height: 16px;
- font: 14px/16px monospace !important;
- background: transparent;
- }
- .sm-simple > li > a span.sub-arrow {
- display: none;
- }
- .sm-simple a.highlighted span.sub-arrow:before {
- display: none;
- }
- .sm-simple > li {
- border-top: 0;
- border-left: 1px solid #eeeeee;
- }
- .sm-simple > li:first-child {
- border-left: 0;
- }
- .sm-simple ul {
- border: 1px solid #bbbbbb;
- background: white;
- }
- .sm-simple ul a {
- border: 0 !important;
- }
- .sm-simple ul a.has-submenu {
- padding-right: 20px;
- }
- .sm-simple ul a span.sub-arrow {
- right: 0;
- margin-right: 5px;
- }
- .sm-simple ul > li {
- border-left: 0;
- }
- .sm-simple ul > li:first-child {
- border-top: 0;
- }
- .sm-simple a.separator {
- height: 1px;
- margin: 4px 0;
- overflow: hidden;
- padding-top: 0;
- padding-bottom: 0;
- background-color: #efefef;
- }
- .sm-simple span.scroll-up,
- .sm-simple span.scroll-down {
- position: absolute;
- display: none;
- visibility: hidden;
- overflow: hidden;
- background: white;
- height: 20px;
- }
- .sm-simple span.scroll-up-arrow, .sm-simple span.scroll-down-arrow {
- position: absolute;
- top: -2px;
- left: 50%;
- margin-left: -8px;
- width: 0;
- height: 0;
- overflow: hidden;
- border-width: 8px;
- border-style: dashed dashed solid dashed;
- border-color: transparent transparent #555555 transparent;
- }
- .sm-simple span.scroll-down-arrow {
- top: 6px;
- border-style: solid dashed dashed dashed;
- border-color: #555555 transparent transparent transparent;
- }
- .sm-simple.sm-rtl a.has-submenu {
- padding-right: 20px;
- padding-left: 32px;
- }
- .sm-simple.sm-rtl a span.sub-arrow {
- right: auto;
- left: 20px;
- }
- .sm-simple.sm-rtl.sm-vertical a.has-submenu {
- padding: 11px 20px;
- }
- .sm-simple.sm-rtl.sm-vertical a span.sub-arrow {
- right: 20px;
- margin-right: -12px;
- }
- .sm-simple.sm-rtl > li:first-child {
- border-left: 1px solid #eeeeee;
- }
- .sm-simple.sm-rtl > li:last-child {
- border-left: 0;
- }
- .sm-simple.sm-rtl ul a.has-submenu {
- padding: 11px 20px;
- }
- .sm-simple.sm-rtl ul a span.sub-arrow {
- right: 20px;
- margin-right: -12px;
- }
- .sm-simple.sm-vertical a span.sub-arrow {
- right: auto;
- margin-left: -12px;
- }
- .sm-simple.sm-vertical li {
- border-left: 0;
- border-top: 1px solid #eeeeee;
- }
- .sm-simple.sm-vertical > li:first-child {
- border-top: 0;
- }
-}
diff --git a/loleaflet/main.css b/loleaflet/main.css
index fe13a2b..1d8ccec 100644
--- a/loleaflet/main.css
+++ b/loleaflet/main.css
@@ -6,7 +6,7 @@
@import url('dist/scrollBar.css');
@import url('dist/searchControl.css');
@import url('dist/spreadsheet.css');
- at import url('dist/menubar.css');
+
@import url('plugins/draw-0.2.4/dist/leaflet.draw.css');
@import url('node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css');
@@ -16,6 +16,7 @@
@import url('node_modules/w2ui/w2ui.css');
@import url('node_modules/select2/dist/css/select2.css');
@import url('node_modules/smartmenus/dist/css/sm-core-css.css');
- at import url('dist/sm-simple.css');
+ at import url('node_modules/smartmenus/dist/css/sm-simple/sm-simple.css');
+ at import url('dist/menubar.css');
@import url('node_modules/jquery-ui/themes/ui-lightness/jquery-ui.css');
@import url('node_modules/evol-colorpicker/css/evol-colorpicker.css');
commit d0e8d4544d32e0262a01193cbb989fbe7754c89e
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Mon Jan 9 13:20:23 2017 +0530
loleaflet: Different css file for menubar
Change-Id: Ic7cf8445c52d3a87de0631d6317674d959d60cf4
diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index a0f3ef7..4082350 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -17,18 +17,6 @@
z-index: 10;
}
-#main-menu {
- top: 0;
- position: fixed;
- height: 25px;
- display: inline-flex;
- right: 0;
- left: 0;
- padding-left: 125px;
- z-index: 1000;
- outline: none;
-}
-
body {
margin: 0;
min-width: 600px;
diff --git a/loleaflet/dist/menubar.css b/loleaflet/dist/menubar.css
new file mode 100644
index 0000000..1020192
--- /dev/null
+++ b/loleaflet/dist/menubar.css
@@ -0,0 +1,11 @@
+#main-menu {
+ top: 0;
+ position: fixed;
+ height: 25px;
+ display: inline-flex;
+ right: 0;
+ left: 0;
+ padding-left: 125px;
+ z-index: 1000;
+ outline: none;
+}
diff --git a/loleaflet/main.css b/loleaflet/main.css
index d12c06c..fe13a2b 100644
--- a/loleaflet/main.css
+++ b/loleaflet/main.css
@@ -6,6 +6,7 @@
@import url('dist/scrollBar.css');
@import url('dist/searchControl.css');
@import url('dist/spreadsheet.css');
+ at import url('dist/menubar.css');
@import url('plugins/draw-0.2.4/dist/leaflet.draw.css');
@import url('node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css');
commit e3e814fbf5d9a092edc15c11ded6d34dbc05ca1f
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Mon Jan 9 13:19:03 2017 +0530
loleaflet: Set mobile mode if width < 768px
Change-Id: I4732208d354b574218185c2693fd92d8e071307a
diff --git a/loleaflet/dist/sm-simple.css b/loleaflet/dist/sm-simple.css
index ac38a70..d955ab4 100644
--- a/loleaflet/dist/sm-simple.css
+++ b/loleaflet/dist/sm-simple.css
@@ -74,214 +74,211 @@
border-left: 40px solid transparent;
}
-/* By default smartmenus is mobile first. But we don't need that for now, so
- just tranform the menu to desktop style (navbar + dropdowns).
- Uncomment below to enable mobile mode beyond min-width
-*/
-/* @media (min-width: 240px) {
+/*
Switch to desktop layout
-----------------------------------------------
These transform the menu tree from
collapsible to desktop (navbar + dropdowns)
-----------------------------------------------*/
/* start... (it's not recommended editing these rules) */
-.sm-simple ul {
- position: absolute;
- width: 12em;
-}
+ at media (min-width: 768px) {
+ .sm-simple ul {
+ position: absolute;
+ width: 12em;
+ }
-.sm-simple li {
- float: left;
-}
+ .sm-simple li {
+ float: left;
+ }
-.sm-simple.sm-rtl li {
- float: right;
-}
+ .sm-simple.sm-rtl li {
+ float: right;
+ }
-.sm-simple ul li {
- float: none;
-}
+ .sm-simple ul li {
+ float: none;
+ }
-.sm-simple a {
- white-space: nowrap;
-}
+ .sm-simple a {
+ white-space: nowrap;
+ }
-.sm-simple ul a, .sm-simple.sm-vertical a {
- white-space: normal;
-}
+ .sm-simple ul a, .sm-simple.sm-vertical a {
+ white-space: normal;
+ }
-.sm-simple .sm-nowrap > li > a, .sm-simple .sm-nowrap > li > :not(ul) a {
- white-space: nowrap;
-}
+ .sm-simple .sm-nowrap > li > a, .sm-simple .sm-nowrap > li > :not(ul) a {
+ white-space: nowrap;
+ }
-/* ...end */
-.sm-simple {
- background: #efefef;
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Chrome/Safari/Opera */
- -khtml-user-select: none; /* Konqueror */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none;
- cursor: default;
-}
-.sm-simple a.disabled {
- cursor: default;
-}
-.sm-simple > li > a.has-submenu {
- padding-left: 15px;
- padding-right: 15px;
- padding-top: 8px;
- z-index: 500;
- border-left: 1px solid #efefef;
- border-right: 1px solid #efefef;
-}
-.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
- padding: 5px 15px;
- color: #000;
-}
-.sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
- background: #538ecd;
- color: #fff;
-}
-.sm-simple > li > a:hover, .sm-simple > li > a:focus, .sm-simple > li > a:active, .sm-simple > li > a.highlighted {
- background: #fff;
- color: #000;
- border-color: #bbbbbb;
- border-bottom: 1px solid #bbb;
-}
-.sm-simple > li > a.highlighted {
- border-bottom-color: #fff;
-}
-.sm-simple a.current {
- background: #555555;
- color: white;
-}
-.sm-simple a.disabled {
- background: white;
- color: #cccccc;
-}
-.sm-simple a.has-submenu {
- padding-right: 32px;
-}
+ /* ...end */
+ .sm-simple {
+ background: #efefef;
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Chrome/Safari/Opera */
+ -khtml-user-select: none; /* Konqueror */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none;
+ cursor: default;
+ }
+ .sm-simple a.disabled {
+ cursor: default;
+ }
+ .sm-simple > li > a.has-submenu {
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-top: 8px;
+ z-index: 500;
+ border-left: 1px solid #efefef;
+ border-right: 1px solid #efefef;
+ }
+ .sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
+ padding: 5px 15px;
+ color: #000;
+ }
+ .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
+ background: #538ecd;
+ color: #fff;
+ }
+ .sm-simple > li > a:hover, .sm-simple > li > a:focus, .sm-simple > li > a:active, .sm-simple > li > a.highlighted {
+ background: #fff;
+ color: #000;
+ border-color: #bbbbbb;
+ border-bottom: 1px solid #bbb;
+ }
+ .sm-simple > li > a.highlighted {
+ border-bottom-color: #fff;
+ }
+ .sm-simple a.current {
+ background: #555555;
+ color: white;
+ }
+ .sm-simple a.disabled {
+ background: white;
+ color: #cccccc;
+ }
+ .sm-simple a.has-submenu {
+ padding-right: 32px;
+ }
-.sm-simple > li > ul {
- margin-top: -1px !important;
- z-index: 400;
-}
-.sm-simple a span.sub-arrow {
- top: 50%;
- margin-top: -8px;
- right: 20px;
- width: 8px;
- height: 16px;
- font: 14px/16px monospace !important;
- background: transparent;
-}
-.sm-simple > li > a span.sub-arrow {
- display: none;
-}
-.sm-simple a.highlighted span.sub-arrow:before {
- display: none;
-}
-.sm-simple > li {
- border-top: 0;
- border-left: 1px solid #eeeeee;
-}
-.sm-simple > li:first-child {
- border-left: 0;
-}
-.sm-simple ul {
- border: 1px solid #bbbbbb;
- background: white;
-}
-.sm-simple ul a {
- border: 0 !important;
-}
-.sm-simple ul a.has-submenu {
- padding-right: 20px;
-}
-.sm-simple ul a span.sub-arrow {
- right: 0;
- margin-right: 5px;
-}
-.sm-simple ul > li {
- border-left: 0;
-}
-.sm-simple ul > li:first-child {
- border-top: 0;
-}
-.sm-simple a.separator {
- height: 1px;
- margin: 4px 0;
- overflow: hidden;
- padding-top: 0;
- padding-bottom: 0;
- background-color: #efefef;
-}
-.sm-simple span.scroll-up,
-.sm-simple span.scroll-down {
- position: absolute;
- display: none;
- visibility: hidden;
- overflow: hidden;
- background: white;
- height: 20px;
-}
-.sm-simple span.scroll-up-arrow, .sm-simple span.scroll-down-arrow {
- position: absolute;
- top: -2px;
- left: 50%;
- margin-left: -8px;
- width: 0;
- height: 0;
- overflow: hidden;
- border-width: 8px;
- border-style: dashed dashed solid dashed;
- border-color: transparent transparent #555555 transparent;
-}
-.sm-simple span.scroll-down-arrow {
- top: 6px;
- border-style: solid dashed dashed dashed;
- border-color: #555555 transparent transparent transparent;
-}
-.sm-simple.sm-rtl a.has-submenu {
- padding-right: 20px;
- padding-left: 32px;
-}
-.sm-simple.sm-rtl a span.sub-arrow {
- right: auto;
- left: 20px;
-}
-.sm-simple.sm-rtl.sm-vertical a.has-submenu {
- padding: 11px 20px;
-}
-.sm-simple.sm-rtl.sm-vertical a span.sub-arrow {
- right: 20px;
- margin-right: -12px;
-}
-.sm-simple.sm-rtl > li:first-child {
- border-left: 1px solid #eeeeee;
-}
-.sm-simple.sm-rtl > li:last-child {
- border-left: 0;
-}
-.sm-simple.sm-rtl ul a.has-submenu {
- padding: 11px 20px;
-}
-.sm-simple.sm-rtl ul a span.sub-arrow {
- right: 20px;
- margin-right: -12px;
-}
-.sm-simple.sm-vertical a span.sub-arrow {
- right: auto;
- margin-left: -12px;
-}
-.sm-simple.sm-vertical li {
- border-left: 0;
- border-top: 1px solid #eeeeee;
-}
-.sm-simple.sm-vertical > li:first-child {
- border-top: 0;
+ .sm-simple > li > ul {
+ margin-top: -1px !important;
+ z-index: 400;
+ }
+ .sm-simple a span.sub-arrow {
+ top: 50%;
+ margin-top: -8px;
+ right: 20px;
+ width: 8px;
+ height: 16px;
+ font: 14px/16px monospace !important;
+ background: transparent;
+ }
+ .sm-simple > li > a span.sub-arrow {
+ display: none;
+ }
+ .sm-simple a.highlighted span.sub-arrow:before {
+ display: none;
+ }
+ .sm-simple > li {
+ border-top: 0;
+ border-left: 1px solid #eeeeee;
+ }
+ .sm-simple > li:first-child {
+ border-left: 0;
+ }
+ .sm-simple ul {
+ border: 1px solid #bbbbbb;
+ background: white;
+ }
+ .sm-simple ul a {
+ border: 0 !important;
+ }
+ .sm-simple ul a.has-submenu {
+ padding-right: 20px;
+ }
+ .sm-simple ul a span.sub-arrow {
+ right: 0;
+ margin-right: 5px;
+ }
+ .sm-simple ul > li {
+ border-left: 0;
+ }
+ .sm-simple ul > li:first-child {
+ border-top: 0;
+ }
+ .sm-simple a.separator {
+ height: 1px;
+ margin: 4px 0;
+ overflow: hidden;
+ padding-top: 0;
+ padding-bottom: 0;
+ background-color: #efefef;
+ }
+ .sm-simple span.scroll-up,
+ .sm-simple span.scroll-down {
+ position: absolute;
+ display: none;
+ visibility: hidden;
+ overflow: hidden;
+ background: white;
+ height: 20px;
+ }
+ .sm-simple span.scroll-up-arrow, .sm-simple span.scroll-down-arrow {
+ position: absolute;
+ top: -2px;
+ left: 50%;
+ margin-left: -8px;
+ width: 0;
+ height: 0;
+ overflow: hidden;
+ border-width: 8px;
+ border-style: dashed dashed solid dashed;
+ border-color: transparent transparent #555555 transparent;
+ }
+ .sm-simple span.scroll-down-arrow {
+ top: 6px;
+ border-style: solid dashed dashed dashed;
+ border-color: #555555 transparent transparent transparent;
+ }
+ .sm-simple.sm-rtl a.has-submenu {
+ padding-right: 20px;
+ padding-left: 32px;
+ }
+ .sm-simple.sm-rtl a span.sub-arrow {
+ right: auto;
+ left: 20px;
+ }
+ .sm-simple.sm-rtl.sm-vertical a.has-submenu {
+ padding: 11px 20px;
+ }
+ .sm-simple.sm-rtl.sm-vertical a span.sub-arrow {
+ right: 20px;
+ margin-right: -12px;
+ }
+ .sm-simple.sm-rtl > li:first-child {
+ border-left: 1px solid #eeeeee;
+ }
+ .sm-simple.sm-rtl > li:last-child {
+ border-left: 0;
+ }
+ .sm-simple.sm-rtl ul a.has-submenu {
+ padding: 11px 20px;
+ }
+ .sm-simple.sm-rtl ul a span.sub-arrow {
+ right: 20px;
+ margin-right: -12px;
+ }
+ .sm-simple.sm-vertical a span.sub-arrow {
+ right: auto;
+ margin-left: -12px;
+ }
+ .sm-simple.sm-vertical li {
+ border-left: 0;
+ border-top: 1px solid #eeeeee;
+ }
+ .sm-simple.sm-vertical > li:first-child {
+ border-top: 0;
+ }
}
-/*}*/
commit 3c1804e3b644befca8ca56200cf58b9b6a4aeafd
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Mon Jan 9 12:58:54 2017 +0530
loleaflet: Add main-menu to main html rather than dynamically
Change-Id: I3f3a8709104ee0805f509f2c1b5eae2194c5de72
diff --git a/loleaflet/dist/loleaflet.html b/loleaflet/dist/loleaflet.html
index d619c84..3546548 100644
--- a/loleaflet/dist/loleaflet.html
+++ b/loleaflet/dist/loleaflet.html
@@ -37,6 +37,7 @@
and width, this being inside the smaller "document-container" will
cause the content to overflow, creating scrollbars -->
<div id="logo" class="logo"></div>
+ <ul id="main-menu" class="sm sm-simple"></ul>
<div>
<div id="toolbar" style="visibility: hidden;"></div>
<div id="toolbar-up"></div>
diff --git a/loleaflet/src/control/Control.Menubar.js b/loleaflet/src/control/Control.Menubar.js
index e854d5b..b475768 100644
--- a/loleaflet/src/control/Control.Menubar.js
+++ b/loleaflet/src/control/Control.Menubar.js
@@ -273,9 +273,7 @@ L.Control.Menubar = L.Control.extend({
onAdd: function (map) {
this._initialized = false;
- var docContainer = map.options.documentContainer;
- this._menubarCont = L.DomUtil.create('ul', 'sm sm-simple', docContainer.parentElement);
- this._menubarCont.id = 'main-menu';
+ this._menubarCont = L.DomUtil.get('main-menu');
map.on('doclayerinit', this._onDocLayerInit, this);
map.on('commandstatechanged', this._onCommandStateChanged, this);
More information about the Libreoffice-commits
mailing list