Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

customize.dist/src/less/dropdown.less

@@ -64,7 +64,7 @@
             .fa {
                 width: 20px;
                 text-align: center;
-                margin-right: 5px;
+                margin-right: 5px !important;
             }
 
             &:hover {

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;
@@ -219,6 +238,13 @@ body {
 }
 
 .cryptpad-toolbar {
+    * {
+        outline-width: 0;
+        &:focus {
+            outline-width: 0;
+        }
+    }
+
     @toolbar-green: #5cb85c;
 
     box-sizing: border-box;

www/common/toolbar2.js

@@ -247,6 +247,10 @@ define([
             throw new Error("You must provide a `userList` object to display the userlist");
         }
         var $content = $('<div>', {'class': 'userlist-drawer'});
+        $content.on('drop dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
         var $closeIcon = $('<span>', {"class": "fa fa-window-close close"}).appendTo($content);
         $('<h2>').text(Messages.users).appendTo($content);
         $('<p>', {'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();
         });
 

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 {

www/drive/main.js

@@ -1280,11 +1280,11 @@ define([
 
                 if (idx === 0) { name = getPrettyName(p); }
                 else {
-                    var $span2 = $('<span>', {'class': 'element'}).text(' > ');
+                    var $span2 = $('<span>', {'class': 'element separator'}).text(' / ');
-                    $title.append($span2);
+                    $title.prepend($span2);
                 }
 
-                $span.text(name).appendTo($title);
+                $span.text(name).prependTo($title);
             });
             return $title;
         };

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);