From b0dba481d834d77bcf36b1ef0a488ce8f4fc3eb2 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 2 Mar 2018 18:33:43 +0100
Subject: [PATCH] Fix small UI issues and IE issues

---
 customize.dist/pages.js                       | 12 ++--
 .../src/less2/include/creation.less           |  5 ++
 customize.dist/src/less2/include/help.less    | 32 +++++++++++
 .../src/less2/include/markdown-toolbar.less   | 20 +++++++
 customize.dist/src/less2/include/toolbar.less | 57 +++----------------
 www/common/common-interface.js                |  4 +-
 www/common/common-ui-elements.js              | 26 ++++++++-
 www/common/diffMarked.js                      |  5 +-
 www/common/toolbar3.js                        |  4 +-
 www/pad/app-pad.less                          |  6 +-
 www/pad/inner.js                              |  1 -
 www/poll/inner.js                             |  1 +
 www/whiteboard/app-whiteboard.less            | 13 ++++-
 www/whiteboard/inner.js                       |  8 +++
 14 files changed, 126 insertions(+), 68 deletions(-)
 create mode 100644 customize.dist/src/less2/include/help.less
 create mode 100644 customize.dist/src/less2/include/markdown-toolbar.less

diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 811714531..9dd366da2 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -756,10 +756,14 @@ define([
     Pages['/whiteboard/'] = Pages['/whiteboard/index.html'] = function () {
         return [
             appToolbar(),
-            h('div#cp-app-whiteboard-canvas-area', h('canvas#cp-app-whiteboard-canvas', {
-                width: 600,
-                height: 600
-            })),
+            h('div#cp-app-whiteboard-canvas-area',
+                h('div#cp-app-whiteboard-container',
+                    h('canvas#cp-app-whiteboard-canvas', {
+                        width: 600,
+                        height: 600
+                    })
+                )
+            ),
             h('div#cp-app-whiteboard-controls', {
                 style: {
                     display: 'block',
diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less
index 2ca8cc402..16bce0637 100644
--- a/customize.dist/src/less2/include/creation.less
+++ b/customize.dist/src/less2/include/creation.less
@@ -25,6 +25,7 @@
         text-align: center;
         font: @colortheme_app-font;
         width: 100%;
+        outline: none;
         & > div {
             width: 60vw;
             max-width: 100%;
@@ -88,6 +89,10 @@
                 &:hover {
                     background: darken(@colortheme_loading-bg, 5%);
                 }
+                &.cp-creation-button-selected {
+                    color: darken(@colortheme_loading-bg, 10%);
+                    background: @colortheme_loading-color;
+                }
             }
         }
 
diff --git a/customize.dist/src/less2/include/help.less b/customize.dist/src/less2/include/help.less
new file mode 100644
index 000000000..905c453fb
--- /dev/null
+++ b/customize.dist/src/less2/include/help.less
@@ -0,0 +1,32 @@
+@import (once) "./colortheme-all.less";
+
+.help_main (@color, @bg-color) {
+    .cp-help-container {
+        position: relative;
+        background-color: lighten(@bg-color, 15%);
+        &.cp-help-hidden {
+            display: none;
+        }
+
+        .cp-help-close {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+        }
+        .cp-help-text {
+            color: @color;
+            margin: 0;
+            padding: 15px;
+            h1 {
+                font-size: 20px;
+            }
+            h2 {
+                font-size: 18px;
+            }
+            h3 {
+                font-size: 16px;
+            }
+            ul, ol, p { margin: 0; }
+        }
+    }
+}
diff --git a/customize.dist/src/less2/include/markdown-toolbar.less b/customize.dist/src/less2/include/markdown-toolbar.less
new file mode 100644
index 000000000..4fb466525
--- /dev/null
+++ b/customize.dist/src/less2/include/markdown-toolbar.less
@@ -0,0 +1,20 @@
+@import (once) "./colortheme-all.less";
+
+.markdownToolbar_main (@color, @bg-color) {
+    .cp-markdown-toolbar {
+        height: @toolbar_line-height;
+        background-color: lighten(@bg-color, 20%);
+        display: none;
+        button {
+            height: @toolbar_line-height !important;
+            outline: 0;
+            color: @color;
+            .toolbar_button;
+            font: normal normal normal 14px/1 FontAwesome;
+            &:hover {
+                background-color: lighten(@bg-color, 8%);
+            }
+            &.cp-markdown-help { float: right; }
+        }
+    }
+}
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index b6258c4fe..a0c01e377 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -8,6 +8,8 @@
 @import (once) "./tools.less";
 @import (once) "./icons.less";
 @import (once) "./modal.less";
+@import (once) "./markdown-toolbar.less";
+@import (once) "./help.less";
 
 .toolbar_main (
     @color: @colortheme_default-color, // Color of the text for the toolbar
@@ -24,6 +26,8 @@
     .ckeditor_fix();
     .history_main();
     .iconColors_main();
+    .markdownToolbar_main(@color, @bg-color);
+    .help_main(@color, @bg-color);
 
     .cp-toolbar-container {
         display: flex;
@@ -239,55 +243,6 @@
         }
     }
 
-    // TODO(cjd) This ought to be in a less file for markdown-based editors
-    .cp-markdown-toolbar {
-        height: @toolbar_line-height;
-        background-color: lighten(@bg-color, 20%);
-        display: none;
-        button {
-            height: @toolbar_line-height !important;
-            outline: 0;
-            color: @color;
-            .toolbar_button;
-            font: normal normal normal 14px/1 FontAwesome;
-            &:hover {
-                background-color: lighten(@bg-color, 8%);
-            }
-            &.cp-markdown-help { float: right; }
-        }
-    }
-
-    // TODO put in a different less file
-    .cp-help-container {
-        position: relative;
-        background-color: lighten(@bg-color, 15%);
-        &.cp-help-hidden {
-            display: none;
-        }
-
-        .cp-help-close {
-            position: absolute;
-            top: 5px;
-            right: 5px;
-        }
-        .cp-help-text {
-            color: @color;
-            margin: 0;
-            padding: 15px;
-            h1 {
-                font-size: 20px;
-            }
-            h2 {
-                font-size: 18px;
-            }
-            h3 {
-                font-size: 16px;
-            }
-            ul, ol, p { margin: 0; }
-        }
-    }
-
-
     .cp-toolbar-userlist-drawer {
         background-color: @bg-color;
         color: @color;
@@ -450,6 +405,7 @@
                             font-size: @colortheme_app-font-size;
                             flex: 1;
                             max-width: none;
+                            line-height: calc(@toolbar_line-height - 12px); // padding + border
                         }
                     }
                 }
@@ -615,7 +571,7 @@
             }
             input {
                 max-width: ~"calc(100% - 40px)";
-                flex: 1;
+                //flex: 1;
                 vertical-align: middle;
                 box-sizing: border-box;
                 cursor: auto;
@@ -623,6 +579,7 @@
                 font-size: 20px;
                 padding: 5px 5px;
                 height: 40px;
+                line-height: 28px; // padding + border
             }
         }
         .cp-toolbar-link, .cp-toolbar-new {
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index 4822e357b..5286a9ac6 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -668,7 +668,6 @@ define([
                 position: 'bottom',
                 distance: 0,
                 performance: true,
-                dynamicTitle: true,
                 delay: [delay, 0],
                 sticky: true
             });
@@ -691,6 +690,9 @@ define([
             mutations.forEach(function(mutation) {
                 if (mutation.type === "childList") {
                     for (var i = 0; i < mutation.addedNodes.length; i++) {
+                        if ($(mutation.addedNodes[i]).attr('title')) {
+                            addTippy(0, mutation.addedNodes[i]);
+                        }
                         $(mutation.addedNodes[i]).find('[title]').each(addTippy);
                     }
                     for (var j = 0; j < mutation.removedNodes.length; j++) {
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 35a5d38ec..de550dc0c 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -588,7 +588,6 @@ define([
                             return;
                         });
                     });
-
                 });
                 break;
             case 'present':
@@ -1777,7 +1776,7 @@ define([
 
         var $body = $('body');
         var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body);
-        var $creation = $('<div>', { id: 'cp-creation' }).appendTo($creationContainer);
+        var $creation = $('<div>', { id: 'cp-creation', tabindex: 1 }).appendTo($creationContainer);
 
         var setHTML = function (e, html) {
             e.innerHTML = html;
@@ -1980,6 +1979,29 @@ define([
             $ok[0],
             $spinner[0]
         ])).appendTo($creation);
+
+        var selected = -1;
+        var next = function () {
+            selected = ++selected % $creation.find('button').length;
+            $creation.find('button').removeClass('cp-creation-button-selected');
+            $($creation.find('button').get(selected)).addClass('cp-creation-button-selected');
+        };
+
+        $creation.keydown(function (e) {
+            if (e.which === 9) {
+                e.preventDefault();
+                e.stopPropagation();
+                next();
+                return;
+            }
+            if (e.which === 13) {
+                if ($creation.find('.cp-creation-button-selected').length === 1) {
+                    $creation.find('.cp-creation-button-selected').click();
+                }
+                return;
+            }
+        });
+        $creation.focus();
     };
 
     UIElements.onServerError = function (common, err, toolbar, cb) {
diff --git a/www/common/diffMarked.js b/www/common/diffMarked.js
index f79d8cbdc..47e869fc9 100644
--- a/www/common/diffMarked.js
+++ b/www/common/diffMarked.js
@@ -116,6 +116,7 @@ define([
 
     /*  remove listeners from the DOM */
     var removeListeners = function (root) {
+        if (!root) { return; }
         slice(root.attributes).map(function (attr) {
             if (/^on/i.test(attr.name)) {
                 console.log('removing attribute', attr.name, root.attributes[attr.name]);
@@ -171,7 +172,9 @@ define([
             return mt + '</media-tag>';
         });
 
-        var safe_newHtmlFixed = domFromHTML(unsafe_newHtmlFixed).body.outerHTML;
+        var newDomFixed = domFromHTML(unsafe_newHtmlFixed);
+        if (!newDomFixed || !newDomFixed.body) { return; }
+        var safe_newHtmlFixed = newDomFixed.body.outerHTML;
         var $div = $('<div>', {id: id}).append(safe_newHtmlFixed);
 
         var Dom = domFromHTML($('<div>').append($div).html());
diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js
index a000025d1..38cb2d759 100644
--- a/www/common/toolbar3.js
+++ b/www/common/toolbar3.js
@@ -318,7 +318,7 @@ define([
                 $span.append($rightCol);
             } else {
                 Common.displayAvatar($span, data.avatar, name, function ($img) {
-                    if (data.avatar && $img.length) {
+                    if (data.avatar && $img && $img.length) {
                         avatars[data.avatar] = $img[0].outerHTML;
                     }
                     $span.append($rightCol);
@@ -610,7 +610,7 @@ define([
                 });
             });
             $('.cp-toolbar-top').append($msg);
-            UI.addTooltips();
+            //UI.addTooltips();
         });
     };
 
diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less
index 9e1b1da78..fa7d1142a 100644
--- a/www/pad/app-pad.less
+++ b/www/pad/app-pad.less
@@ -13,7 +13,6 @@
     #cke_1_top {
         overflow: visible;
         padding: 0px;
-        display: flex;
     }
     .cke_toolbox_main {
         background-color: @colortheme_pad-toolbar-bg;
@@ -23,10 +22,7 @@
         }
     }
     .cke_wysiwyg_frame {
-        min-width: 60%;
-    }
-    #cke_1_toolbox {
-        flex: 1;
+        width: 100%;
     }
     #cke_editor1 {
         display: flex;
diff --git a/www/pad/inner.js b/www/pad/inner.js
index 4aff47102..5d161142b 100644
--- a/www/pad/inner.js
+++ b/www/pad/inner.js
@@ -629,7 +629,6 @@ define([
                         'max-width: 50em; padding: 20px 30px; margin: 0 auto; min-height: 100%;'+
                         'box-sizing: border-box; overflow: auto;'+
                     '}' +
-                    'html.cke_body_width { overflow: hidden; }' +
                     '.cke_body_width body > *:first-child { margin-top: 0; }';
                 Ckeditor.addCss(newCss);
                 Ckeditor.plugins.addExternal('mediatag','/pad/', 'mediatag-plugin.js');
diff --git a/www/poll/inner.js b/www/poll/inner.js
index 6a77db8a9..a8deebbfe 100644
--- a/www/poll/inner.js
+++ b/www/poll/inner.js
@@ -820,6 +820,7 @@ define([
     var checkDeletedCells = function () {
         // faster than forEach?
         var c;
+        if (!APP.proxy || !APP.proxy.content) { return; }
         for (var k in APP.proxy.content.cells) {
             c = Render.getCoordinates(k);
             if (APP.proxy.content.colsOrder.indexOf(c[0]) === -1 ||
diff --git a/www/whiteboard/app-whiteboard.less b/www/whiteboard/app-whiteboard.less
index 7bbb7fbaf..1aba715a9 100644
--- a/www/whiteboard/app-whiteboard.less
+++ b/www/whiteboard/app-whiteboard.less
@@ -42,6 +42,13 @@
         display: none;
     }
 
+    #cp-app-whiteboard-container {
+        flex: 1;
+        display: flex;
+        flex-flow: column;
+        overflow: auto;
+    }
+
     // created in the html
     #cp-app-whiteboard-canvas-area {
         flex: 1;
@@ -51,6 +58,8 @@
     .cp-app-whiteboard-canvas-container {
         margin: auto;
         background: white;
+        flex: 1;
+        min-height: 0;
         & > canvas {
             border: 1px solid black;
         }
@@ -71,7 +80,7 @@
         border-top: 1px solid black;
         background: white;
 
-        padding: 1em;
+        padding: 10px;
 
         & > * + * {
             margin: 0;
@@ -127,7 +136,7 @@
         display: flex;
         justify-content: space-between;
 
-        padding: 1em;
+        padding: 10px;
 
         span.cp-app-whiteboard-palette-color {
             height: 4vw;
diff --git a/www/whiteboard/inner.js b/www/whiteboard/inner.js
index 7228f50c4..efa8edd87 100644
--- a/www/whiteboard/inner.js
+++ b/www/whiteboard/inner.js
@@ -454,6 +454,14 @@ define([
             var $properties = common.createButton('properties', true);
             toolbar.$drawer.append($properties);
 
+            if (Messages.whiteboardHelp) {
+                var $appContainer = $('#cp-app-whiteboard-container');
+                var helpMenu = common.createHelpMenu();
+                $appContainer.prepend(helpMenu.menu);
+                $(helpMenu.text).html(Messages.whiteboardHelp);
+                toolbar.$drawer.append(helpMenu.button);
+            }
+
             if (!readOnly) {
                 makeColorButton($rightside);