New tooltips

customize.dist/src/less2/include/app-noscroll.less

@@ -7,6 +7,7 @@
     overflow: hidden;
     box-sizing: border-box;
     position: relative;
+    border: 0;
     body {
         height: 100%;
         width: 100%;
@@ -15,6 +16,7 @@
         overflow: hidden;
         box-sizing: border-box;
         position: relative;
+        border: 0;
     }
 }
 

customize.dist/src/less2/include/creation.less

@@ -48,7 +48,6 @@
         background: @colortheme_creation-modal-bg;
         color: @colortheme_creation-modal;
         font: @colortheme_app-font;
-        width: 100%;
         outline: none;
         width: 700px;
         max-width: 90vw;

customize.dist/src/less2/include/framework.less

@@ -3,6 +3,7 @@
 @import (once) './alertify.less';
 @import (once) './tokenfield.less';
 @import (once) './creation.less';
+@import (once) './tippy.less';
 
 .framework_main(@bg-color, @warn-color, @color) {
     .toolbar_main(
@@ -13,6 +14,7 @@
     .fileupload_main();
     .alertify_main();
     .tokenfield_main();
+    .tippy_main();
     .creation_main(
         @bg-color: @bg-color,
         @warn-color: @warn-color,

customize.dist/src/less2/include/tippy.less

@@ -0,0 +1,57 @@
+@import (once) './creation.less';
+
+.tippy_main() {
+    .tippy-tooltip.cryptpad-theme {
+        /* Your styling here. Example: */
+        background-color: white;
+        box-shadow: 2px 2px 10px #000;
+        //border: 1px solid #BBB;
+        //border-radius: 0;
+        //border: 2px solid orange;
+        font-weight: bold;
+        color: #333;
+        [x-circle] {
+            background-color: unset;
+        }
+    }
+    /*
+    .tippy-popper[x-placement=top] {
+        .tippy-tooltip.cryptpad-theme  {
+            margin-bottom: 12px;
+            [x-arrow] {
+                bottom: -12px;
+                transform: scale(2);
+            }
+        }
+    }
+    .tippy-popper[x-placement=bottom] {
+        .tippy-tooltip.cryptpad-theme  {
+            margin-top: 12px;
+            [x-arrow] {
+                top: -12px;
+                transform: scale(2);
+            }
+        }
+    }
+    */
+    .tippy-popper[x-placement=right] {
+        max-width: 200px;
+/*        .tippy-tooltip.cryptpad-theme  {
+            margin-left: 12px;
+            [x-arrow] {
+                left: -12px;
+                transform: scale(2);
+            }
+        }*/
+    }
+    .tippy-popper[x-placement=left] {
+        max-width: 200px;
+/*        .tippy-tooltip.cryptpad-theme  {
+            margin-right: 12px;
+            [x-arrow] {
+                right: -12px;
+                transform: scale(2);
+            }
+        }*/
+    }
+}

www/common/common-interface.js

@@ -6,13 +6,13 @@ define([
     '/common/common-notifier.js',
     '/customize/application_config.js',
     '/bower_components/alertifyjs/dist/js/alertify.js',
-    '/common/tippy.min.js',
+    '/common/tippy/tippy.min.js',
     '/customize/pages.js',
     '/common/hyperscript.js',
     '/common/test.js',
 
     '/bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js',
-    'css!/common/tippy.css',
+    'css!/common/tippy/tippy.css',
 ], function ($, Messages, Util, Hash, Notifier, AppConfig,
             Alertify, Tippy, Pages, h, Test) {
     var UI = {};
@@ -660,18 +660,37 @@ define([
         });
     };
 
+    var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500;
+    $.extend(true, Tippy.defaults, {
+        placement: 'bottom',
+        performance: true,
+        delay: [delay, 0],
+        //sticky: true,
+        theme: 'cryptpad',
+        arrow: true,
+        maxWidth: '200px',
+        flip: false,
+        popperOptions: {
+            modifiers: {
+                preventOverflow: { boundariesElement: 'window' }
+            }
+        },
+        //arrowType: 'round',
+        arrowTransform: 'scale(2)',
+    });
     UI.addTooltips = function () {
         var MutationObserver = window.MutationObserver;
-        var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500;
         var addTippy = function (i, el) {
             if (el.nodeName === 'IFRAME') { return; }
-            Tippy(el, {
+            var opts = {
-                position: 'bottom',
+                distance: 15
-                distance: 0,
+            };
-                performance: true,
+            Array.prototype.slice.apply(el.attributes).filter(function (obj) {
-                delay: [delay, 0],
+                return /^data-tippy-/.test(obj.name);
-                sticky: true
+            }).forEach(function (obj) {
+                opts[obj.name.slice(11)] = obj.value;
             });
+            Tippy(el, opts);
         };
         // This is the robust solution to remove dangling tooltips
         // The mutation observer does not always find removed nodes.

www/common/common-ui-elements.js

@@ -13,8 +13,6 @@ define([
     '/customize/messages.js',
     '/customize/application_config.js',
     '/bower_components/nthen/index.js',
-
-    'css!/common/tippy.css',
 ], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Clipboard,
              Messages, AppConfig, NThen) {
     var UIElements = {};
@@ -1881,7 +1879,8 @@ define([
             var q = h('a.cp-creation-help.fa.fa-question-circle', {
                 title: text,
                 href: origin + href,
-                target: "_blank"
+                target: "_blank",
+                'data-tippy-placement': "right"
             });
             return q;
         };

www/common/loading.js

@@ -13,18 +13,50 @@ define([], function () {
   right: 0px;
   background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%);
   color: #fafafa;
-  text-align: center;
   font-size: 1.5em;
   opacity: 1;
   display: flex;
+  flex-flow: column;
   justify-content: center;
+  align-items: center;
 }
 #cp-loading.cp-loading-hidden {
   opacity: 0;
   visibility: hidden;
 }
+#cp-loading .cp-loading-logo {
+    height: 300px;
+    width: 300px;
+    margin-top: 50px;
+    flex: 0 1 auto;
+    min-height: 0;
+    text-align: center;
+}
+#cp-loading .cp-loading-logo img {
+    max-width: 100%;
+    max-height: 100%;
+}
 #cp-loading .cp-loading-container {
-  align-self: center;
+    width: 700px;
+    max-width: 90vw;
+    height: 500px;
+    max-height: calc(100vh - 20px);
+    margin: 50px;
+    flex-shrink: 0;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+}
+@media screen and (max-height: 800px) {
+    #cp-loading .cp-loading-container {
+        height: auto;
+    }
+}
+@media screen and (max-width: 600px) {
+    #cp-loading .cp-loading-container {
+        height: auto;
+    }
 }
 #cp-loading .cp-loading-cryptofist {
   margin-left: auto;
@@ -38,7 +70,6 @@ define([], function () {
 }
 @media screen and (max-height: 450px) {
   #cp-loading .cp-loading-cryptofist {
-    display: none;
   }
 }
 #cp-loading .cp-loading-spinner-container {
@@ -82,8 +113,10 @@ define([], function () {
         '<style>',
         loadingStyle,
         '</style>',
-        '<div class="cp-loading-container">',
+        '<div class="cp-loading-logo">',
             '<img class="cp-loading-cryptofist" src="/customize/alt-favicon.png?' + urlArgs + '">',
+        '</div>',
+        '<div class="cp-loading-container">',
             '<div class="cp-loading-spinner-container">',
                 '<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>',
             '</div>',

www/common/sframe-app-framework.js

@@ -308,7 +308,7 @@ define([
             if (!readOnly) { onLocal(); }
             evOnReady.fire(newPad);
 
-            //UI.removeLoadingScreen(emitResize);
+            UI.removeLoadingScreen(emitResize);
 
             var privateDat = cpNfInner.metadataMgr.getPrivateData();
             var hash = privateDat.availableHashes.editHash ||