New tooltips

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, {
-                position: 'bottom',
-                distance: 0,
-                performance: true,
-                delay: [delay, 0],
-                sticky: true
+            var opts = {
+                distance: 15
+            };
+            Array.prototype.slice.apply(el.attributes).filter(function (obj) {
+                return /^data-tippy-/.test(obj.name);
+            }).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 ||