web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve mobile support for the toolbar and the drive

Browse Source
This commit is contained in:
yflory 2017-02-06 18:06:59 +01:00
parent 9f1789b2d2
commit ac79fbb5a2
10 changed files with 256 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/main.css
View File

@ -64,7 +64,7 @@
.alertify .dialog > *, .alertify .dialog > *,
.alertify .alert > * { .alertify .alert > * {
width: 30%; width: 30%;
min-width: 500px; width: 500px;
max-width: 95%; max-width: 95%;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;

2
customize.dist/src/less/alertify.less
View File

@ -72,7 +72,7 @@
> * { > * {
width: 30%; width: 30%;
min-width: 500px; width: 500px;
max-width: 95%; max-width: 95%;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;

123
customize.dist/src/less/toolbar.less
View File

@ -41,6 +41,7 @@
button { button {
&#shareButton { &#shareButton {
// Bootstrap 4 colors
color: #fff; color: #fff;
background: #5cb85c; background: #5cb85c;
border-color: #5cb85c; border-color: #5cb85c;
@ -51,6 +52,9 @@
span { span {
color: #fff; color: #fff;
} }
.large {
margin-left: 5px;
}
} }
} }
@ -97,24 +101,6 @@
background-image:linear-gradient(to bottom,#f2f2f2,#ccc); background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
} }
} }
.large {
@media screen and (max-width: 800px) {
display: none;
}
@media screen and (min-width: 801px) {
display: inline-block;
}
}
.small {
@media screen and (max-width: 800px) {
display: inline-block;
}
@media screen and (min-width: 801px) {
display: none;
}
}
.cryptpad-state { .cryptpad-state {
line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */ line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
} }
@ -150,6 +136,74 @@
height: 24px; height: 24px;
} }
} }
.big {
@media screen and (max-width: @media-not-big) {
display: none;
}
@media screen and (min-width: @media-not-small) {
display: inline-block;
}
}
.small {
@media screen and (max-width: @media-not-big) {
display: inline-block;
}
@media screen and (min-width: @media-not-small) {
display: none;
}
}
.med-big {
@media screen and (max-width: @media-medium-screen) {
display: none;
}
@media screen and (min-width: (@media-medium-screen + 1px)) {
display: inline-block;
}
}
.med-small {
@media screen and (max-width: @media-medium-screen) {
display: inline-block;
}
@media screen and (min-width: (@media-medium-screen + 1px)) {
display: none;
}
}
.large {
@media screen and (max-width: @media-narrow-screen) {
display: none;
}
@media screen and (min-width: (@media-narrow-screen + 1px)) {
display: inline-block;
}
}
.narrow {
@media screen and (max-width: @media-narrow-screen) {
display: inline-block;
}
@media screen and (min-width: (@media-narrow-screen + 1px)) {
display: none;
}
}
}
.cryptpad-toolbar:not(.notitle) {
.cryptpad-toolbar-top {
@media screen and (max-width: @media-medium-screen) {
height: 67px;
}
.cryptpad-link, .cryptpad-user {
@media screen and (max-width: @media-medium-screen) {
top: 35px;
}
@media screen and (min-width: (@media-medium-screen + 1px)) {
top: 0px;
}
}
}
} }
.cryptpad-toolbar-top { .cryptpad-toolbar-top {
@ -157,9 +211,6 @@
text-align: center; text-align: center;
height: 32px; height: 32px;
position: relative; position: relative;
@media screen and (max-width: @media-narrow-screen) {
height: 67px;
}
.cryptpad-title { .cryptpad-title {
.title, .pencilIcon { .title, .pencilIcon {
font-size: 1.5em; font-size: 1.5em;
@ -212,12 +263,6 @@
position: absolute; position: absolute;
left: 0px; left: 0px;
height: 32px; height: 32px;
@media screen and (max-width: (@media-short-screen - 1px)) {
top: 35px;
}
@media screen and (min-width: @media-short-screen) {
top: 0px;
}
a.cryptpad-logo { a.cryptpad-logo {
cursor: pointer; cursor: pointer;
@ -242,41 +287,19 @@
cursor: pointer; cursor: pointer;
} }
} }
.big {
@media screen and (max-width: @media-narrow-screen) {
display: none;
}
@media screen and (min-width: (@media-narrow-screen + 1px)) {
display: inline-block;
}
}
.small {
@media screen and (max-width: @media-narrow-screen) {
display: inline-block;
}
@media screen and (min-width: (@media-narrow-screen + 1px)) {
display: none;
}
}
} }
.cryptpad-user { .cryptpad-user {
position: absolute; position: absolute;
right: 0; right: 0;
span:not(.cryptpad-lag) { span:not(.cryptpad-lag) {
vertical-align: top; vertical-align: top;
display: inline-block; //display: inline-block;
} }
button { button {
span.fa { span.fa {
vertical-align: baseline; vertical-align: baseline;
} }
} }
@media screen and (max-width: @media-narrow-screen) {
top: 3em;
}
@media screen and (min-width: (@media-narrow-screen + 1px)) {
top: 0px;
}
} }
} }
.cryptpad-toolbar-leftside { .cryptpad-toolbar-leftside {

1
customize.dist/src/less/variables.less
View File

@ -69,6 +69,7 @@
@media-short-screen: 450px; @media-short-screen: 450px;
@media-narrow-screen: 400px; @media-narrow-screen: 400px;
@media-medium-screen: 600px;
@toolbar-gradient-start: #f5f5f5; @toolbar-gradient-start: #f5f5f5;
@toolbar-gradient-end: #DDDDDD; @toolbar-gradient-end: #DDDDDD;

146
customize.dist/toolbar.css
View File

@ -124,6 +124,9 @@
.cryptpad-toolbar button#shareButton span { .cryptpad-toolbar button#shareButton span {
color: #fff; color: #fff;
} }
.cryptpad-toolbar button#shareButton .large {
margin-left: 5px;
}
.cryptpad-toolbar .cryptpad-lag { .cryptpad-toolbar .cryptpad-lag {
box-sizing: content-box; box-sizing: content-box;
height: 16px; height: 16px;
@ -166,26 +169,6 @@
.cryptpad-toolbar button:hover { .cryptpad-toolbar button:hover {
background-image: linear-gradient(to bottom, #f2f2f2, #ccc); background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
} }
@media screen and (max-width: 800px) {
.cryptpad-toolbar .large {
display: none;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar .large {
display: inline-block;
}
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar .small {
display: inline-block;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar .small {
display: none;
}
}
.cryptpad-toolbar .cryptpad-state { .cryptpad-toolbar .cryptpad-state {
line-height: 32px; line-height: 32px;
/* equivalent to 26px + 2*2px margin used for buttons */ /* equivalent to 26px + 2*2px margin used for buttons */
@ -218,17 +201,89 @@
.cryptpad-toolbar select option { .cryptpad-toolbar select option {
height: 24px; height: 24px;
} }
@media screen and (max-width: 800px) {
.cryptpad-toolbar .big {
display: none;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar .big {
display: inline-block;
}
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar .small {
display: inline-block;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar .small {
display: none;
}
}
@media screen and (max-width: 600px) {
.cryptpad-toolbar .med-big {
display: none;
}
}
@media screen and (min-width: 601px) {
.cryptpad-toolbar .med-big {
display: inline-block;
}
}
@media screen and (max-width: 600px) {
.cryptpad-toolbar .med-small {
display: inline-block;
}
}
@media screen and (min-width: 601px) {
.cryptpad-toolbar .med-small {
display: none;
}
}
@media screen and (max-width: 400px) {
.cryptpad-toolbar .large {
display: none;
}
}
@media screen and (min-width: 401px) {
.cryptpad-toolbar .large {
display: inline-block;
}
}
@media screen and (max-width: 400px) {
.cryptpad-toolbar .narrow {
display: inline-block;
}
}
@media screen and (min-width: 401px) {
.cryptpad-toolbar .narrow {
display: none;
}
}
@media screen and (max-width: 600px) {
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top {
height: 67px;
}
}
@media screen and (max-width: 600px) {
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-link,
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-user {
top: 35px;
}
}
@media screen and (min-width: 601px) {
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-link,
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-user {
top: 0px;
}
}
.cryptpad-toolbar-top { .cryptpad-toolbar-top {
display: block; display: block;
text-align: center; text-align: center;
height: 32px; height: 32px;
position: relative; position: relative;
} }
@media screen and (max-width: 400px) {
.cryptpad-toolbar-top {
height: 67px;
}
}
.cryptpad-toolbar-top .cryptpad-title .title, .cryptpad-toolbar-top .cryptpad-title .title,
.cryptpad-toolbar-top .cryptpad-title .pencilIcon { .cryptpad-toolbar-top .cryptpad-title .pencilIcon {
font-size: 1.5em; font-size: 1.5em;
@ -278,16 +333,6 @@
left: 0px; left: 0px;
height: 32px; height: 32px;
} }
@media screen and (max-width: 449px) {
.cryptpad-toolbar-top .cryptpad-link {
top: 35px;
}
}
@media screen and (min-width: 450px) {
.cryptpad-toolbar-top .cryptpad-link {
top: 0px;
}
}
.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo { .cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo {
cursor: pointer; cursor: pointer;
height: 32px; height: 32px;
@ -309,47 +354,16 @@
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }
@media screen and (max-width: 400px) {
.cryptpad-toolbar-top .cryptpad-link .big {
display: none;
}
}
@media screen and (min-width: 401px) {
.cryptpad-toolbar-top .cryptpad-link .big {
display: inline-block;
}
}
@media screen and (max-width: 400px) {
.cryptpad-toolbar-top .cryptpad-link .small {
display: inline-block;
}
}
@media screen and (min-width: 401px) {
.cryptpad-toolbar-top .cryptpad-link .small {
display: none;
}
}
.cryptpad-toolbar-top .cryptpad-user { .cryptpad-toolbar-top .cryptpad-user {
position: absolute; position: absolute;
right: 0; right: 0;
} }
.cryptpad-toolbar-top .cryptpad-user span:not(.cryptpad-lag) { .cryptpad-toolbar-top .cryptpad-user span:not(.cryptpad-lag) {
vertical-align: top; vertical-align: top;
display: inline-block;
} }
.cryptpad-toolbar-top .cryptpad-user button span.fa { .cryptpad-toolbar-top .cryptpad-user button span.fa {
vertical-align: baseline; vertical-align: baseline;
} }
@media screen and (max-width: 400px) {
.cryptpad-toolbar-top .cryptpad-user {
top: 3em;
}
}
@media screen and (min-width: 401px) {
.cryptpad-toolbar-top .cryptpad-user {
top: 0px;
}
}
.cryptpad-toolbar-leftside { .cryptpad-toolbar-leftside {
float: left; float: left;
margin-bottom: -1px; margin-bottom: -1px;

33
www/common/toolbar.js
View File

@ -63,7 +63,7 @@ define([
}); });
}; };
var createRealtimeToolbar = function ($container) { var createRealtimeToolbar = function ($container, config) {
var $toolbar = $('<div>', { var $toolbar = $('<div>', {
'class': TOOLBAR_CLS, 'class': TOOLBAR_CLS,
id: uid(), id: uid(),
@ -72,6 +72,11 @@ define([
.append($('<div>', {'class': LEFTSIDE_CLS})) .append($('<div>', {'class': LEFTSIDE_CLS}))
.append($('<div>', {'class': RIGHTSIDE_CLS})); .append($('<div>', {'class': RIGHTSIDE_CLS}));
// The 'notitle' class removes the line added for the title with a small screen
if (!config || typeof config !== "object") {
$toolbar.addClass('notitle');
}
$container.prepend($toolbar); $container.prepend($toolbar);
styleToolbar($container); styleToolbar($container);
return $toolbar; return $toolbar;
@ -81,7 +86,7 @@ define([
if (config.displayed.indexOf('spinner') !== -1) { if (config.displayed.indexOf('spinner') !== -1) {
var $spinner = $('<span>', { var $spinner = $('<span>', {
id: uid(), id: uid(),
'class': SPINNER_CLS + ' fa fa fa-spinner fa-pulse', 'class': SPINNER_CLS + ' fa fa-spinner fa-pulse',
}).hide(); }).hide();
$container.prepend($spinner); $container.prepend($spinner);
return $spinner[0]; return $spinner[0];
@ -117,10 +122,9 @@ define([
// Share button // Share button
if (config.displayed.indexOf('share') !== -1) { if (config.displayed.indexOf('share') !== -1) {
var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'}); var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
var $span = $('<span>', {'class': 'large'}).append($shareIcon.clone()).append(' ' +Messages.shareButton); var $span = $('<span>', {'class': 'large'}).append(' ' +Messages.shareButton);
var $spanSmall = $('<span>', {'class': 'small'}).append($shareIcon.clone());
var dropdownConfigShare = { var dropdownConfigShare = {
text: $('<div>').append($span).append($spanSmall).html(), text: $('<div>').append($shareIcon).append($span).html(),
options: [] options: []
}; };
var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare); var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
@ -234,7 +238,7 @@ define([
var viewersText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer; var viewersText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer;
var editorsText = numberOfEditUsers > 1 ? Messages.editors : Messages.editor; var editorsText = numberOfEditUsers > 1 ? Messages.editors : Messages.editor;
var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText); var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
var $spansmall = $('<span>', {'class': 'small'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers); var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
$userButtons.find('.buttonTitle').html('').append($span).append($spansmall); $userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
} }
@ -314,8 +318,8 @@ define([
'class': "cryptpad-logo" 'class': "cryptpad-logo"
}).append($imgTag); }).append($imgTag);
var $span = $('<span>').text('CryptPad'); var $span = $('<span>').text('CryptPad');
var $aTagBig = $aTagSmall.clone().addClass('big').append($span); var $aTagBig = $aTagSmall.clone().addClass('large').append($span);
$aTagSmall.addClass('small'); $aTagSmall.addClass('narrow');
var onClick = function (e) { var onClick = function (e) {
e.preventDefault(); e.preventDefault();
window.location = "/"; window.location = "/";
@ -362,7 +366,9 @@ define([
content: Messages.type[p] content: Messages.type[p]
}); });
}); });
var $newButton = $('<div>').append($('<span>', {'class': 'fa fa-plus'})).append(Messages.newButton); var $plusIcon = $('<span>', {'class': 'fa fa-plus'});
var $newbig = $('<span>', {'class': 'big'}).append(' ' +Messages.newButton);
var $newButton = $('<div>').append($plusIcon).append($newbig);
var dropdownConfig = { var dropdownConfig = {
text: $newButton.html(), // Button initial text text: $newButton.html(), // Button initial text
options: pads_options, // Entries displayed in the menu options: pads_options, // Entries displayed in the menu
@ -436,12 +442,13 @@ define([
}); });
} }
var $icon = $('<span>', {'class': 'fa fa-user'}); var $icon = $('<span>', {'class': 'fa fa-user'});
var $button = $('<div>').append($icon).append($displayedName.clone()); var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
var $userButton = $('<div>').append($icon).append($userbig);
if (account) { if (account) {
$button.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')')); $userbig.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')'));
} }
var dropdownConfigUser = { var dropdownConfigUser = {
text: $button.html(), // Button initial text text: $userButton.html(), // Button initial text
options: options, // Entries displayed in the menu options: options, // Entries displayed in the menu
left: true, // Open to the left of the button left: true, // Open to the left of the button
}; };
@ -555,7 +562,7 @@ define([
var Cryptpad = config.common; var Cryptpad = config.common;
config.displayed = config.displayed || []; config.displayed = config.displayed || [];
var toolbar = createRealtimeToolbar($container); var toolbar = createRealtimeToolbar($container, config.title);
var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), config, readOnly, Cryptpad); var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), config, readOnly, Cryptpad);
var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad); var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS)); var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));

23
www/drive/file.css
View File

@ -29,6 +29,20 @@ body {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
} }
@media screen and (max-width: 600px) {
.app-container {
display: block;
}
.app-container #tree {
resize: none;
width: 100%;
max-width: unset;
border-bottom: 1px solid #ccc;
}
.app-container #tree .category2 {
margin-top: 0.5em;
}
}
.fa { .fa {
/*min-width: 17px;*/ /*min-width: 17px;*/
margin-right: 3px; margin-right: 3px;
@ -188,7 +202,6 @@ span.fa-folder-open {
margin-top: 10px; margin-top: 10px;
} }
#content .info-box { #content .info-box {
height: 40px;
line-height: 40px; line-height: 40px;
padding-left: 10px; padding-left: 10px;
margin: 10px auto; margin: 10px auto;
@ -347,17 +360,17 @@ span.fa-folder-open {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
#driveToolbar .dropdown-bar.right { #driveToolbar .right {
float: right; float: right;
/* Right-side buttons */ /* Right-side buttons */
} }
#driveToolbar .dropdown-bar.right button { #driveToolbar .right button {
display: inline-block; display: inline-block;
} }
#driveToolbar .dropdown-bar.right button.active { #driveToolbar .right button.active {
display: none; display: none;
} }
#driveToolbar .dropdown-bar.right button .fa { #driveToolbar .right button .fa {
margin-right: 0px; margin-right: 0px;
} }
#driveToolbar .dropdown-bar-content { #driveToolbar .dropdown-bar-content {

37
www/drive/file.less
View File

@ -18,6 +18,8 @@
@toolbar-path-bg: #fff; @toolbar-path-bg: #fff;
@toolbar-path-border: #888; @toolbar-path-border: #888;
@size-mobile: 600px;
/* PAGE */ /* PAGE */
html, body { html, body {
@ -51,6 +53,18 @@ body {
width: 100%; width: 100%;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
@media screen and (max-width: @size-mobile) {
display: block;
#tree {
resize: none;
width: 100%;
max-width: unset;
border-bottom: 1px solid @toolbar-border-col;
.category2 {
margin-top: 0.5em;
}
}
}
} }
.fa { .fa {
@ -228,7 +242,6 @@ span {
margin-top: 10px; margin-top: 10px;
} }
.info-box { .info-box {
height: 40px;
line-height: 40px; line-height: 40px;
padding-left: 10px; padding-left: 10px;
margin: 10px auto; margin: 10px auto;
@ -404,17 +417,17 @@ span {
line-height: 1em; line-height: 1em;
position: relative; position: relative;
display: inline-block; display: inline-block;
&.right { }
float: right; .right {
/* Right-side buttons */ float: right;
button { /* Right-side buttons */
display: inline-block; button {
&.active { display: inline-block;
display: none; &.active {
} display: none;
.fa { }
margin-right: 0px; .fa {
} margin-right: 0px;
} }
} }
} }

1
www/drive/index.html
View File

@ -2,6 +2,7 @@
<html class="cp"> <html class="cp">
<head> <head>
<title>CryptDrive</title> <title>CryptDrive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link rel="icon" type="image/png" <link rel="icon" type="image/png"
href="/customize/main-favicon.png" href="/customize/main-favicon.png"

38
www/drive/main.js
View File

@ -29,7 +29,8 @@ define([
var APP = window.APP = { var APP = window.APP = {
editable: false, editable: false,
Cryptpad: Cryptpad, Cryptpad: Cryptpad,
loggedIn: Cryptpad.isLoggedIn() loggedIn: Cryptpad.isLoggedIn(),
mobile: $('body').width() <= 600 // Menu and content area are not inline-block anymore for mobiles
}; };
var stringify = APP.stringify = function (obj) { var stringify = APP.stringify = function (obj) {
@ -353,6 +354,14 @@ define([
} else { } else {
$element.removeClass("selected"); $element.removeClass("selected");
} }
$driveToolbar.find('#contextButton').css({
background: '#000'
});
window.setTimeout(function () {
$driveToolbar.find('#contextButton').css({
background: ''
});
}, 500);
}; };
// Open the selected context menu on the closest "li" element // Open the selected context menu on the closest "li" element
@ -776,6 +785,9 @@ define([
if (!path || path.length === 0) { return; } if (!path || path.length === 0) { return; }
var isTrash = filesOp.isPathInTrash(path); var isTrash = filesOp.isPathInTrash(path);
var $title = $('<span>', {'class': 'path unselectable'}); var $title = $('<span>', {'class': 'path unselectable'});
if (APP.mobile) {
return $title;
}
path.forEach(function (p, idx) { path.forEach(function (p, idx) {
if (isTrash && [1,2].indexOf(idx) !== -1) { return; } if (isTrash && [1,2].indexOf(idx) !== -1) { return; }
@ -1142,7 +1154,9 @@ define([
var $toolbar = $driveToolbar; var $toolbar = $driveToolbar;
$toolbar.html(''); $toolbar.html('');
var $leftside = $('<div>', {'class': 'leftside'}).appendTo($toolbar); var $leftside = $('<div>', {'class': 'leftside'}).appendTo($toolbar);
$leftside.width($tree.width()); if (!APP.mobile) {
$leftside.width($tree.width());
}
var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar); var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
return $toolbar; return $toolbar;
}; };
@ -1307,6 +1321,25 @@ define([
var $modeButton = createViewModeButton().appendTo($toolbar.find('.rightside')); var $modeButton = createViewModeButton().appendTo($toolbar.find('.rightside'));
var $title = createTitle(path).appendTo($toolbar.find('.rightside')); var $title = createTitle(path).appendTo($toolbar.find('.rightside'));
if (APP.mobile) {
var $context = $('<button>', {'class': 'element right dropdown-bar', id: 'contextButton'});
$context.append($('<span>', {'class': 'fa fa-caret-down'}));
$context.click(function (e) {
e.preventDefault();
e.stopPropagation();
var $li = $content.find('.selected');
if ($li.length !== 1) {
$li = $tree.find('.element.active').closest('li');
}
$iframe.find('.contextMenu').css({
top: ($li.offset().top + 10) + 'px',
left: ($li.offset().left + 50) + 'px'
});
$li.contextmenu();
});
$context.appendTo($toolbar.find('.rightside'));
}
// NewButton can be undefined if we're in read only mode // NewButton can be undefined if we're in read only mode
$toolbar.find('.leftside').append(createNewButton(isInRoot)); $toolbar.find('.leftside').append(createNewButton(isInRoot));
@ -1761,6 +1794,7 @@ define([
}); });
$iframe.find('#tree').mousedown(function (e) { $iframe.find('#tree').mousedown(function (e) {
if (APP.mobile) { return; }
if (APP.resizeTree) { return; } if (APP.resizeTree) { return; }
APP.resizeTree = window.setInterval(function () { APP.resizeTree = window.setInterval(function () {
$driveToolbar.find('.leftside').width($tree.width()); $driveToolbar.find('.leftside').width($tree.width());