diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less index cf35f72e2..90878510e 100644 --- a/customize.dist/src/less/dropdown.less +++ b/customize.dist/src/less/dropdown.less @@ -64,7 +64,7 @@ .fa { width: 20px; text-align: center; - margin-right: 5px; + margin-right: 5px !important; } &:hover { diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index fca423e9a..a01c7591c 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -25,7 +25,22 @@ color: inherit; } +#cke_editor1 { + .cke_inner { + bottom: 0; + right: 0; + display: flex; + flex-flow: column; + height: 100vh; + width: 100vw; + } +} +.cke_toolbox_main { + display: inline-block; + margin-bottom: -3px; +} #cke_1_contents { + flex: 1; margin-top: -1px; display: flex; overflow: visible; @@ -51,11 +66,12 @@ box-sizing: border-box; .close { position: absolute; - margin-top: -11px; + margin-top: -10px; margin-left: 149px; font-size: 15px; opacity: 0.5; cursor: pointer; + text-shadow: unset; &:hover { opacity: 1; } @@ -112,6 +128,9 @@ body { left: 0; top: 96px; bottom: 0; + .close { + color: @color; + } } .cryptpad-limit { text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color; @@ -216,6 +235,13 @@ body { } .cryptpad-toolbar { + * { + outline-width: 0; + &:focus { + outline-width: 0; + } + } + @toolbar-green: #5cb85c; box-sizing: border-box; diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js index 8fe8116f9..1fff916f1 100644 --- a/www/common/toolbar2.js +++ b/www/common/toolbar2.js @@ -247,6 +247,10 @@ define([ throw new Error("You must provide a `userList` object to display the userlist"); } var $content = $('
', {'class': 'userlist-drawer'}); + $content.on('drop dragover', function (e) { + e.preventDefault(); + e.stopPropagation(); + }); var $closeIcon = $('', {"class": "fa fa-window-close close"}).appendTo($content); $('

').text(Messages.users).appendTo($content); $('

', {'class': USERLIST_CLS}).appendTo($content); @@ -266,26 +270,31 @@ define([ } var $ck = config.$container.find('.cke_toolbox_main'); + var mobile = $('body').width() <= 600; var hide = function () { $content.hide(); $button.removeClass('active'); $ck.css({ - 'display': '', 'padding-left': '', - 'margin-bottom': '' }); }; var show = function () { $content.show(); + if (mobile) { + $ck.hide(); + } $button.addClass('active'); $ck.css({ - 'display': 'inline-block', 'padding-left': '175px', - 'margin-bottom': '-3px' }); - $content.css('margin-top', (-$ck.height())+'px'); + var h = $ck.is(':visible') ? -$ck.height() : 0; + $content.css('margin-top', h+'px'); }; - + $(window).on('cryptpad-ck-toolbar', function () { + if (mobile && $ck.is(':visible')) { return void hide(); } + if ($content.is(':visible')) { return void show(); } + hide(); + }); $closeIcon.click(hide); $button.click(function () { var visible = $content.is(':visible'); @@ -298,7 +307,7 @@ define([ Cryptpad.getAttribute('userlist-drawer', function (err, val) { - if (val === false) { return void hide(); } + if (val === false || mobile) { return void hide(); } show(); }); diff --git a/www/drive/file.less b/www/drive/file.less index 613dc714a..d5840332b 100644 --- a/www/drive/file.less +++ b/www/drive/file.less @@ -46,6 +46,7 @@ body { } img.icon { max-width: 20px; + max-height: 16px; } .unselectable { @@ -481,6 +482,7 @@ span { } img.icon { height: 48px; + max-height: none; max-width: none; margin: 8px 0; } @@ -595,6 +597,13 @@ span { display: flex; flex-flow: row; + * { + outline-width: 0; + &:focus { + outline-width: 0; + } + } + .newPadContainer { display: inline-block; height: 100%; @@ -680,19 +689,6 @@ span { position: relative; display: inline-block; } - /*.right { - float: right; - /* Right-side buttons */ - /* button { - display: inline-block; - &.active { - display: none; - } - .fa { - margin-right: 0px; - } - } - }*/ .dropdown-bar-content { margin-right: 2px; } @@ -710,13 +706,19 @@ span { max-width: 100%; text-align: left; .element { + display: inline-block; + height: 32px; + line-height: 32px; font-size: 17px; - padding: 5px; + padding: 0 5px; border: 0; background: darken(@toolbar-drive-bg, 10%); color: @toolbar-drive-color; box-sizing: border-box; transition: all 0.15s; + &.separator { + color: #ccc; + } &.clickable { cursor: pointer; &:hover { diff --git a/www/drive/main.js b/www/drive/main.js index 762de5d7d..f2acbea38 100644 --- a/www/drive/main.js +++ b/www/drive/main.js @@ -1280,11 +1280,11 @@ define([ if (idx === 0) { name = getPrettyName(p); } else { - var $span2 = $('', {'class': 'element'}).text(' > '); - $title.append($span2); + var $span2 = $('', {'class': 'element separator'}).text(' / '); + $title.prepend($span2); } - $span.text(name).appendTo($title); + $span.text(name).prependTo($title); }); return $title; }; diff --git a/www/pad/main.js b/www/pad/main.js index bf90468f8..654f34d5c 100644 --- a/www/pad/main.js +++ b/www/pad/main.js @@ -515,7 +515,9 @@ define([ }; updateIcon(); $collapse.click(function () { - $existingButton.click(); + $(window).trigger('resize'); + $iframe.find('.cke_toolbox_main').toggle(); + $(window).trigger('cryptpad-ck-toolbar'); updateIcon(); }); $rightside.append($collapse);