[Libreoffice-commits] online.git: Branch 'distro/collabora/collabora-online-2-0' - loleaflet/dist loleaflet/main.css loleaflet/src
Pranav Kant
pranavk at collabora.co.uk
Thu Jan 12 09:41:18 UTC 2017
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 | 137 +++++++++++-
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
13 files changed, 438 insertions(+), 363 deletions(-)
New commits:
commit e4430591f720d1851599fa9f883382e31c25d9b2
Author: Pranav Kant <pranavk at collabora.co.uk>
Date: Mon Jan 9 12:58:54 2017 +0530
Mobilify, responsive loleaflet UI to adapt to smaller screens
This is a cherry-pick of following commits:
loleaflet: Add main-menu to main html rather than dynamically
Change-Id: I3f3a8709104ee0805f509f2c1b5eae2194c5de72
(cherry picked from commit 3c1804e3b644befca8ca56200cf58b9b6a4aeafd)
loleaflet: Set mobile mode if width < 768px
Change-Id: I4732208d354b574218185c2693fd92d8e071307a
(cherry picked from commit e3e814fbf5d9a092edc15c11ded6d34dbc05ca1f)
loleaflet: Different css file for menubar
Change-Id: Ic7cf8445c52d3a87de0631d6317674d959d60cf4
(cherry picked from commit d0e8d4544d32e0262a01193cbb989fbe7754c89e)
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
(cherry picked from commit da36bfc520b75b5dd68212b7b12703fcfaf39798)
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
(cherry picked from commit da11a1fd94f472dae435fb4b887f02c5f6eb6b1b)
loleaflet: Introduce div wrappers
Change-Id: I19ae5daaa11e810b23a1d12b81c510ce96527ac7
(cherry picked from commit fac33f7a2fe1f6927cbe0fde04c06a1d2fcbcdf6)
loleaflet: Get rid of all fixed position
Change-Id: I104882d995722c14ddefeecf579d1233f37371d6
(cherry picked from commit bf7df9fa661ef99b2c9930b5a8ca7d5e3e6c6fa6)
Remove irrelevant toolbars
Change-Id: Ib8a8ea4fb597a5aaee802cb7ad04e893cd6eab75
(cherry picked from commit 4becb5b7e99b786c5ba0966a98509e4a8b513772)
tdf#100329: responsive menubar floating on left
Change-Id: I6089ed44a7920a79de7e89f1b0d884c2881d4c7c
(cherry picked from commit 70bbe20f958420bb1017fa03dd5abebe2043d32f)
loleaflet: No min-width, we want to mobilify
Change-Id: Ifa52f03683c32939369f0ab97e456f10b954ccf9
(cherry picked from commit e7101b6f936838db53a7ea6ff1cc385774c7d6c9)
loleaflet: On touch devices, don't disable dragging
Change-Id: I722070a7768d89b7b861df4afc37f68098ca9321
(cherry picked from commit b8fae541847612c65970ee7f1f3e51aa899ef702)
loleaflet: Fix close button alignment
Change-Id: I0a63229f37e0ea1c8e3c770afac0527890c328e1
(cherry picked from commit 90d48ee3c436678faae91289d33a8f7bd0243545)
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
(cherry picked from commit b34f5a38a279871dd7094677435641c83c8eef43)
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
(cherry picked from commit aa7ef0337cb5df4f080bfc21c8e54573a22d872d)
loleaflet: Remove items from statusbar in mobile mode
Change-Id: I8dbc356a2968764c72edf401d33399c92f9f73e4
(cherry picked from commit d6af42eae02a04b89dd052ae6df977f59809e729)
loleaflet: Mobilify for less than 768, not less than equal
Change-Id: I3c499e847674e57ba33859459ace794ff1b97c57
(cherry picked from commit 11ed5228062c5025bbe6ad15eb34d5d53e7f6ee5)
loleaflet: Mobilify the statusbar
Reduce userlist text to now only show the number of users in
mobile mode instead of 'x users' string. Drop the 'Document
saved' string notification.
Change-Id: Ife20a5fcea01301601912c734dae6c3d6504c4f5
(cherry picked from commit 3233ccee4c24b2c0e2ec3216d346cb00ecb91fda)
Reviewed-on: https://gerrit.libreoffice.org/32971
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 a0f3ef7..c8c5889 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -17,21 +17,30 @@
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;
+}
+
+#presentation-controls-wrapper {
+ background: #dfdfdf;
+ position: absolute;
+ top: 70px;
+ left: 0px;
+ 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/loleaflet.html b/loleaflet/dist/loleaflet.html
index b154b08..d7a9186 100644
--- a/loleaflet/dist/loleaflet.html
+++ b/loleaflet/dist/loleaflet.html
@@ -36,20 +36,35 @@
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>
- <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">
+ <!-- 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">
+ <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>
</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/menubar.css b/loleaflet/dist/menubar.css
new file mode 100644
index 0000000..69bd3b0
--- /dev/null
+++ b/loleaflet/dist/menubar.css
@@ -0,0 +1,216 @@
+#main-menu {
+ top: 30px;
+ height: 25px;
+ 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;
+ -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 {
+ 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;
+ 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;
+ background: transparent; /* we want them to be transparent always whether mobile or desktop */
+}
+.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 */
+
+.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/dist/partsPreviewControl.css b/loleaflet/dist/partsPreviewControl.css
index 550fb2f..4dc87f9 100644
--- a/loleaflet/dist/partsPreviewControl.css
+++ b/loleaflet/dist/partsPreviewControl.css
@@ -1,16 +1,9 @@
-.parts-preview-document {
- left: 214px !important;
+#document-container.parts-preview-document {
+ left: 214px;
}
-.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/sm-simple.css b/loleaflet/dist/sm-simple.css
deleted file mode 100644
index ac38a70..0000000
--- a/loleaflet/dist/sm-simple.css
+++ /dev/null
@@ -1,287 +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;
-}
-
-/* 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;
-}
-
-.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/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 {
diff --git a/loleaflet/dist/toolbar.css b/loleaflet/dist/toolbar.css
index 9aa20eb..47e4604 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 {
@@ -47,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 */
@@ -72,11 +56,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%;
diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js
index 2d4160d..332601a 100644
--- a/loleaflet/dist/toolbar/toolbar.js
+++ b/loleaflet/dist/toolbar/toolbar.js
@@ -4,16 +4,119 @@
/* global $ map closebutton w2ui w2utils vex _ */
+var mobileWidth = 768;
+
function onDelete(e) {
if (e !== false) {
map.deletePage();
}
}
+// 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'
+];
+
+var statusbarMobileItems = [
+ 'search',
+ 'searchprev',
+ 'searchnext',
+ 'cancelsearch',
+ 'left',
+ 'right',
+ 'userlist',
+ 'userlistbreak',
+ 'prev',
+ 'next'
+];
+
+var nUsers, oneUser, noUser;
+
+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;
+ 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);
+ }
+ }
+
+ for (itemIdx in statusbar.items) {
+ id = statusbar.items[itemIdx].id;
+ if (statusbarMobileItems.indexOf(id) === -1 && !statusbar.get(id).hidden) {
+ statusbar.hide(id);
+ }
+ }
+
+ nUsers = '%n';
+ oneUser = '1';
+ noUser = '0';
+ updateUserListCount();
+}
+
+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;
+ 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);
+ }
+ }
+
+ for (itemIdx in statusbar.items) {
+ id = statusbar.items[itemIdx].id;
+ if (statusbarMobileItems.indexOf(id) === -1 && statusbar.get(id).hidden) {
+ statusbar.show(id);
+ }
+ }
+
+ nUsers = _('%n users');
+ oneUser = _('1 user');
+ noUser = _('0 user');
+ updateUserListCount();
+}
+
function resizeToolbar() {
var hasMoreItems = false;
var toolbarUp = w2ui['toolbar-up'];
var toolbarUpMore = w2ui['toolbar-up-more'];
+
+ if ($(window).width() < mobileWidth) {
+ _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 +130,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() >= mobileWidth && itemId === 'resizebreak') {
return;
}
item = toolbarUp.get(itemId);
@@ -361,7 +464,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: 'html', id: 'fontcolor-html', html: '<input id="fontColorPicker" style="display:none;">'},
{type: 'button', id: 'fontcolor', img: 'color', hint: _('Font color')},
{type: 'html', id: 'backcolor-html', html: '<input id="backColorPicker" style="display:none;">'},
@@ -555,9 +658,9 @@ $(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: 'break', id: 'userlistbreak'},
{type: 'button', id: 'prev', img: 'prev', hint: _('Previous page')},
{type: 'button', id: 'next', img: 'next', hint: _('Next page')},
{type: 'break', id: 'prevnextbreak'},
@@ -879,6 +982,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');
@@ -897,6 +1004,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'];
@@ -908,10 +1021,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();
@@ -1417,16 +1540,16 @@ function getUserItem(viewId, userName, color) {
return html;
}
-var nUsers = _('%n users');
+
function updateUserListCount() {
var userlistItem = w2ui['toolbar-down'].get('userlist');
var count = $(userlistItem.html).find('#userlist_table tbody tr').length;
if (count > 1) {
userlistItem.text = nUsers.replace('%n', count);
} else if (count === 1) {
- userlistItem.text = _('1 user');
+ userlistItem.text = oneUser;
} else {
- userlistItem.text = _('No users');
+ userlistItem.text = noUser;
}
var zoomlevel = $('#zoomlevel').html();
diff --git a/loleaflet/main.css b/loleaflet/main.css
index d12c06c..1d8ccec 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');
+
@import url('plugins/draw-0.2.4/dist/leaflet.draw.css');
@import url('node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css');
@@ -15,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');
diff --git a/loleaflet/src/control/Control.Menubar.js b/loleaflet/src/control/Control.Menubar.js
index e854d5b..3193c17 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);
@@ -318,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;
},
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) {
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,
More information about the Libreoffice-commits
mailing list