strepsirrhini/libreoffice-online
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Introduced tablet mode

Browse source 
* by reducing small device screen size limit to 767px
  tablets like iPad are not switched to the simple ui

* tablet is a mobile device without simple ui

* created global methods to detect ui mode
  window.mode.isTablet() / isMobile() / isDesktop()

* menubar / toolbar items can have 'tablet' property

* modification indicator is hidden in the tablet mode
  to allow layout menubar correctly in the vertical mode

* tablet mode has the menubar folded by default and
  hamburger menu icon to unfold it

* menubar hidden by default needed fix for calc due to
  additional row with formulas

Change-Id: I0d89427f6bfde015c645c597cb741c69b9031178
This commit is contained in:
Szymon Kłos 2018-11-28 12:02:02 +01:00 committed by Jan Holesovsky
parent 5822737a84
commit d2a4e1677f
7 changed files with 202 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
loleaflet/css/leaflet.css
View file

@ -788,7 +788,7 @@ input.clipboard {
}
}
@media (max-width: 768px),(max-device-height: 768px) {
@media (max-width: 767px),(max-device-height: 767px) {
.loleaflet-ruler {
height: 0px;
display: none;

2
loleaflet/css/loleaflet.css
View file

@ -79,7 +79,7 @@ body {
width: 0;
}
@media (max-width: 768px),(max-device-height: 768px) {
@media (max-width: 767px),(max-device-height: 767px) {
/* Show slidesorter beyond 768px only */
#presentation-controls-wrapper {
display: none;

1
loleaflet/css/toolbar.css
View file

@ -566,6 +566,7 @@ button.leaflet-control-search-next
.w2ui-icon.edit{ background: url('images/lc_editdoc.svg') no-repeat center !important; }
.w2ui-icon.fold{ background: url('images/fold.svg') no-repeat center !important; }
.w2ui-icon.unfold{ background: url('images/unfold.svg') no-repeat center !important; }
.w2ui-icon.hamburger{ background: url('images/hamburger.svg') no-repeat center !important; }
.w2ui-icon.setborderstyle{ background: url('images/lc_setborderstyle.svg') no-repeat center !important; }
.w2ui-icon.togglemergecells{ background: url('images/lc_togglemergecells.svg') no-repeat center !important; }
.w2ui-icon.wraptext{ background: url('images/lc_wraptext.svg') no-repeat center !important; }

83
loleaflet/images/hamburger.svg Normal file
View file

@ -0,0 +1,83 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="16"
height="16"
viewBox="0 0 16 16"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="hamburger.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="11.2"
inkscape:cx="8.3448691"
inkscape:cy="3.9243277"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1920"
inkscape:window-height="1013"
inkscape:window-x="0"
inkscape:window-y="30"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1036.3622)">
<g
id="g4200"
transform="matrix(1.1671511,0,0,1.1671511,-83.474328,423.38914)">
<rect
y="528.16132"
x="73.430588"
height="0.052888747"
width="9.9650106"
id="rect4166"
style="fill:#333333;fill-opacity:1;stroke:#333333;stroke-width:2.21024585;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="532.10724"
x="73.430588"
height="0.052888747"
width="9.9650106"
id="rect4166-9"
style="fill:#333333;fill-opacity:1;stroke:#333333;stroke-width:2.21024585;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="536.08466"
x="73.430595"
height="0.052888747"
width="9.9650106"
id="rect4166-9-0"
style="fill:#333333;fill-opacity:1;stroke:#333333;stroke-width:2.21024585;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

115
loleaflet/js/toolbar.js
View file

@ -9,16 +9,33 @@
var map;
function _useSimpleUI() {
// has to match small screen size requirement
function _inMobileMode() {
return L.Browser.mobile && $('#main-menu').css('display') === 'none';
}
// mobile device with big screen size
function _inTabletMode() {
return L.Browser.mobile && !_inMobileMode();
}
function _inDesktopMode() {
return !L.Browser.mobile;
}
function onDelete(e) {
if (e !== false) {
map.deletePage();
}
}
// make functions visible outside: window.mode.isMobile()
global.mode = {
isMobile: _inMobileMode,
isTablet: _inTabletMode,
isDesktop: _inDesktopMode
};
var nUsers, oneUser, noUser;
function _mobilify() {
@ -37,6 +54,43 @@ function _mobilify() {
statusbar.hide(item.id);
}
});
if (_inTabletMode()) {
toolbarUp.items.forEach(function(item) {
if (item.tablet === false && !item.hidden) {
toolbarUp.hide(item.id);
}
else if (item.tablet === true && item.hidden) {
toolbarUp.show(item.id);
}
});
statusbar.items.forEach(function(item) {
if (item.tablet === false && !item.hidden) {
statusbar.hide(item.id);
}
else if (item.tablet === true && item.hidden) {
statusbar.show(item.id);
}
});
}
}
function _prepareDesktop() {
var toolbarUp = w2ui['toolbar-up'];
var statusbar = w2ui['toolbar-down'];
toolbarUp.items.forEach(function(item) {
if (item.desktop === false && !item.hidden) {
toolbarUp.hide(item.id);
}
});
statusbar.items.forEach(function(item) {
if (item.desktop === false && !item.hidden) {
statusbar.hide(item.id);
}
});
}
function resizeToolbar() {
@ -249,7 +303,7 @@ function onClick(e, id, item, subItem) {
map.sendUnoCommand('.uno:StatusBarFunc', command);
});
}
else if (id === 'fold') {
else if (id === 'fold' || id === 'hamburger-tablet') {
map.toggleMenubar();
}
else if (id === 'fullscreen') {
@ -262,6 +316,7 @@ function onClick(e, id, item, subItem) {
L.toggleFullScreen();
}
else if (id === 'close' || id === 'closemobile') {
map.fire('postMessage', {msgId: 'close', args: {EverModified: map._everModified, Deprecated: true}});
map.fire('postMessage', {msgId: 'UI_Close', args: {EverModified: map._everModified}});
map.remove();
}
@ -634,6 +689,7 @@ var fontsizesSelectValue;
function createToolbar() {
var toolItems = [
{type: 'button', id: 'closemobile', img: 'closemobile', desktop: false, mobile: false, tablet: true},
{type: 'button', id: 'save', img: 'save', hint: _UNO('.uno:Save')},
{type: 'button', id: 'print', img: 'print', hint: _UNO('.uno:Print', 'text'), mobile: false},
{type: 'break', id: 'savebreak', mobile: false},
@ -776,10 +832,11 @@ function createToolbar() {
{type: 'button', id: 'specialcharacter', img: 'specialcharacter', hint: _UNO('.uno:InsertSymbol', '', true), uno: '.uno:InsertSymbol'},
{type: 'spacer'},
{type: 'button', id: 'edit', img: 'edit'},
{type: 'button', id: 'fold', img: 'fold', mobile: false}
{type: 'button', id: 'fold', img: 'fold', mobile: false},
{type: 'button', id: 'hamburger-tablet', img: 'hamburger', desktop: false, mobile: false, tablet: true}
];
if (_useSimpleUI()) {
if (_inMobileMode()) {
initMobileToolbar(toolItems);
} else {
initNormalToolbar(toolItems);
@ -1515,7 +1572,7 @@ function onDocLayerInit() {
]
});
if (!_useSimpleUI()) {
if (!_inMobileMode()) {
statusbar.insert('left', [
{type: 'break', id:'break1'},
{type: 'html', id: 'StatusDocPos',
@ -1556,7 +1613,7 @@ function onDocLayerInit() {
'breakspacing', 'defaultbullet', 'defaultnumbering', 'breakbullet', 'incrementindent', 'decrementindent',
'breakindent', 'inserttable', 'insertannotation');
if (!_useSimpleUI()) {
if (!_inMobileMode()) {
statusbar.insert('left', [
{type: 'break', id: 'break1'},
{type: 'html', id: 'StatePageNumber',
@ -1582,7 +1639,7 @@ function onDocLayerInit() {
if (!map['wopi'].HideExportOption) {
presentationToolbar.show('presentation', 'presentationbreak');
}
if (!_useSimpleUI()) {
if (!_inMobileMode()) {
statusbar.insert('left', [
{type: 'break', id: 'break1'},
{
@ -1620,11 +1677,38 @@ function onDocLayerInit() {
oneUser = _('1 user');
noUser = _('0 users');
$('#document-name-input').show();
if (_inDesktopMode()) {
_prepareDesktop();
}
}
updateUserListCount();
toolbarUp.refresh();
statusbar.refresh();
if (window.mode.isTablet()) {
// calc tablet version needs one more row before folding the menu
if (window.mode.isTablet() && map._docLayer._docType == 'spreadsheet') {
var content = $('#document-container');
if (content) {
var diff = 59;
var prevTop = content.css('top');
if (prevTop) {
prevTop = parseInt(prevTop.slice(0, -2)) + diff;
}
else {
prevTop = 0 + diff;
}
content.css({'top': String(prevTop) + 'px'});
}
}
// Fold menubar by default
map.toggleMenubar();
$('#tb_toolbar-up_item_fonts').css({'display': 'none'});
$('#tb_toolbar-up_item_fontsizes').css({'display': 'none'});
}
}
function onCommandStateChanged(e) {
@ -1820,7 +1904,7 @@ function onCommandStateChanged(e) {
// If in non-edit mode, will be taken care of when permission is changed to 'edit'
else if (map._permission === 'edit' && (state === 'enabled' || state === 'disabled')) {
var toolbarUp = toolbar;
if (_useSimpleUI()) {
if (_inMobileMode()) {
toolbarUp = statusbar;
}
if (state === 'enabled') {
@ -2238,17 +2322,14 @@ $(window).resize(function() {
$(document).ready(function() {
if (closebutton && !L.Browser.mobile) {
$('#closebuttonwrapper').show();
$('#closebutton').click(function() {
if (window.ThisIsAMobileApp) {
window.webkit.messageHandlers.lool.postMessage('BYE', '*');
} else {
map.fire('postMessage', {msgId: 'close', args: {EverModified: map._everModified, Deprecated: true}});
map.fire('postMessage', {msgId: 'UI_Close', args: {EverModified: map._everModified}});
}
map.remove();
});
}
$('#closebutton').click(function() {
map.fire('postMessage', {msgId: 'close', args: {EverModified: map._everModified, Deprecated: true}});
map.fire('postMessage', {msgId: 'UI_Close', args: {EverModified: map._everModified}});
map.remove();
});
// Attach insert file action
$('#insertgraphic').on('change', onInsertFile);
});

14
loleaflet/src/control/Control.Menubar.js
View file

@ -224,7 +224,7 @@ L.Control.Menubar = L.Control.extend({
{name: _('Keyboard shortcuts'), id: 'keyboard-shortcuts', type: 'action'},
{name: _('About'), id: 'about', type: 'action'}]
},
{name: _('Last modification'), id: 'last-mod', type: 'action'}
{name: _('Last modification'), id: 'last-mod', type: 'action', mobile: false, tablet: false}
],
presentation: [
@ -303,7 +303,7 @@ L.Control.Menubar = L.Control.extend({
{name: _('Keyboard shortcuts'), id: 'keyboard-shortcuts', type: 'action'},
{name: _('About'), id: 'about', type: 'action'}]
},
{name: _('Last modification'), id: 'last-mod', type: 'action'}
{name: _('Last modification'), id: 'last-mod', type: 'action', mobile: false, tablet: false}
],
spreadsheet: [
@ -397,7 +397,7 @@ L.Control.Menubar = L.Control.extend({
{name: _('Keyboard shortcuts'), id: 'keyboard-shortcuts', type: 'action'},
{name: _('About'), id: 'about', type: 'action'}]
},
{name: _('Last modification'), id: 'last-mod', type: 'action'}
{name: _('Last modification'), id: 'last-mod', type: 'action', mobile: false, tablet: false}
],
commandStates: {},
@ -911,6 +911,14 @@ L.Control.Menubar = L.Control.extend({
$(aItem).data('id', menu[i].id);
}
if (menu[i].tablet == false && window.mode.isTablet()) {
$(aItem).css('display', 'none');
}
if (menu[i].mobile == false && window.mode.isMobile()) {
$(aItem).css('display', 'none');
}
itemList.push(liItem);
}

9
loleaflet/src/map/Map.js
View file

@ -6,7 +6,12 @@
function moveObjectVertically(obj, diff) {
if (obj) {
var prevTop = obj.css('top');
prevTop = parseInt(prevTop.slice(0, -2)) + diff;
if (prevTop) {
prevTop = parseInt(prevTop.slice(0, -2)) + diff;
}
else {
prevTop = 0 + diff;
}
obj.css({'top': String(prevTop) + 'px'});
}
}
@ -1392,7 +1397,7 @@ L.Map = L.Evented.extend({
var obj = null;
if ($('.main-nav').css('display') === 'none') {
$('.main-nav').css({'display': ''});
if (closebutton) {
if (closebutton && !window.mode.isTablet()) {
$('#closebuttonwrapper').css({'display': ''});
}