New tooltips

customize.dist/src/less/cryptpad.less

@@ -23,6 +23,11 @@ html.cp, .cp body {
 
 .cp {
 
+// add font for tooltips
+.tippy-popper {
+    font: normal normal normal 16px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
+}
+
 // override bootstrap colors
 .btn-primary {
     background-color: @cp-blue;

www/code/inner.js

@@ -7,6 +7,7 @@ define([
     'less!/code/code.less',
     'less!/customize/src/less/toolbar.less',
     'less!/customize/src/less/cryptpad.less',
+
     'css!cm/lib/codemirror.css',
     'css!cm/addon/dialog/dialog.css',
     'css!cm/addon/fold/foldgutter.css',

www/common/common-interface.js

@@ -5,8 +5,10 @@ define([
     '/customize/application_config.js',
     '/bower_components/alertifyjs/dist/js/alertify.js',
     '/common/notify.js',
-    '/common/visible.js'
-], function ($, Messages, Util, AppConfig, Alertify, Notify, Visible) {
+    '/common/visible.js',
+    '/common/tippy.min.js',
+    'css!/common/tippy.css',
+], function ($, Messages, Util, AppConfig, Alertify, Notify, Visible, Tippy) {
 
     var UI = {};
 
@@ -251,9 +253,13 @@ define([
         });
     }
 
-    UI.importContent = function (type, f) {
+    UI.importContent = function (type, f, cfg) {
         return function () {
-            var $files = $('<input type="file">').click();
+            var $files = $('<input>', {type:"file"});
+            if (cfg && cfg.accept) {
+                $files.attr('accept', cfg.accept);
+            }
+            $files.click();
             $files.on('change', function (e) {
                 var file = e.target.files[0];
                 var reader = new FileReader();
@@ -288,5 +294,55 @@ define([
         return $icon;
     };
 
+    // Tooltips
+    UI.addTooltips = function () {
+        var MutationObserver = window.MutationObserver;
+        var addTippy = function (el) {
+            if (el.nodeName === 'IFRAME') { return; }
+            console.log(el);
+            Tippy(el, {
+                position: 'bottom',
+                distance: 0,
+                performance: true,
+                delay: [500, 0]
+            });
+        };
+        var $body = $('body');
+        var $padIframe = $('#pad-iframe').contents().find('body');
+        $('[title]').each(function (i, el) {
+            addTippy(el);
+        });
+        $('#pad-iframe').contents().find('[title]').each(function (i, el) {
+            addTippy(el);
+        });
+        var observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                    $body.find('[title]').each(function (i, el) {
+                        addTippy(el);
+                    });
+                    if (!$padIframe.length) { return; }
+                    $padIframe.find('[title]').each(function (i, el) {
+                        addTippy(el);
+                    });
+                }
+            });
+        });
+        observer.observe($('body')[0], {
+            attributes: false,
+            childList: true,
+            characterData: false,
+            subtree: true
+        });
+        if ($('#pad-iframe').length) {
+            observer.observe($('#pad-iframe').contents().find('body')[0], {
+                attributes: false,
+                childList: true,
+                characterData: false,
+                subtree: true
+            });
+        }
+    };
+
     return UI;
 });

www/common/cryptpad-common.js

@@ -76,6 +76,7 @@ define([
     common.notify = UI.notify;
     common.unnotify = UI.unnotify;
     common.getIcon = UI.getIcon;
+    common.addTooltips = UI.addTooltips;
 
     // import common utilities for export
     common.find = Util.find;
@@ -1093,7 +1094,7 @@ define([
                     .click(prepareFeedback(type))
                     .click(UI.importContent('text/plain', function (content, file) {
                         callback(content, file);
-                    }));
+                    }, {accept: data ? data.accept : undefined}));
                 }
                 break;
             case 'upload':
@@ -1796,6 +1797,7 @@ define([
             store = common.store = env.store = storeObj;
 
             common.addDirectMessageHandler(common);
+            common.addTooltips();
 
             var proxy = getProxy();
             var network = getNetwork();

www/common/tippy.css

@@ -0,0 +1 @@
+.tippy-touch{cursor:pointer!important}.tippy-notransition{-webkit-transition:none!important;transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:9999;outline:0;-webkit-transition-timing-function:cubic-bezier(.165,.84,.44,1);transition-timing-function:cubic-bezier(.165,.84,.44,1)}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparLine truncated

www/common/tippy.min.js

@@ -0,0 +1 @@
+(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.tippy=t()})(this,function(){'use strict';function e(e){Pe.forEach(function(t){var o=t.popper,i=t.tippyInstance,n=t.settings,r=n.appendTo,s=n.hideOnClick,a=n.trigger;if(r.contains(o)){var p=!0===s||-1!==a.indexOf('focus'),l=!e||o!==e.popper;p&&l&&i.hide(o)}})}function t(e,t){var o=Element.prototype.closest||function(e){for(var t=this;t;){if(Ie.call(t,e))return t;t=t.parentElement}};return o.call(e,t)}function o(e,t){return Array.prototype.find?e.find(t):e.filter(t)[0]}function n(){var i=function(){xe.touch=!0,xe.iOS()&&document.body.classList.add('tippy-touch'),xe.dynamicInputDetection&&document.addEventListener('mousemove',n)},n=function(){var e;return function(){var t=performance&&performance.now();t&&10>t-e&&(xe.touch=!1,document.removeEventListener('mousemove',n),!xe.iOS()&&document.body.classList.contains('tippy-touch')&&document.body.classList.remove('tippy-touch')),e=t}}();document.addEventListener('click',function(i){if(!(i.target instanceof Element))return e();var n=t(i.target,Ce.TOOLTIPPED_EL),r=t(i.target,Ce.POPPER);if(r){var s=o(Pe,function(e){return e.popper===r}),a=s.settings.interactive;if(a)return}if(n){var p=o(Pe,function(e){return e.el===n}),l=p.settings,d=l.hideOnClick,c=l.multiple,f=l.trigger;if(!c&&xe.touch||!c&&-1!==f.indexOf('click'))return e(p);if(!0!==d||-1!==f.indexOf('click'))return}t(i.target,Ce.CONTROLLER)||!document.querySelector(Ce.POPPER)||e()}),document.addEventListener('touchstart',i),window.addEventListener('blur',function(){var e=document,t=e.activeElement;t&&t.blur&&Ie.call(t,Ce.TOOLTIPPED_EL)&&t.blur()}),!xe.SUPPORTS_TOUCH&&(0<navigator.maxTouchPoints||0<navigator.msMaxTouchPoints)&&document.addEventListener('pointerdown',i)}function r(){return!r.done&&(r.done=!0,Ae.appendTo=document.body,n(),!0)}function s(e){window.requestAnimationFrame(function(){setTimeout(e,0)})}function a(e){for(var t=[!1,'webkit'],o=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<t.length;n++){var i=t[n],r=i?''+i+o:e;if('undefined'!=typeof window.document.body.style[r])return r}return null}function p(e,t){return Array.prototype.findIndex?e.findIndex(t):e.indexOf(o(e,t))}function l(e){var t=e.getAttribute('title');e.setAttribute('data-original-title',t||'html'),e.removeAttribute('title')}function d(e){var t=e.getBoundingClientRect();return 0<=t.top&&0<=t.left&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}function c(e,t){t?window.getComputedStyle(t)[a('transform')]:window.getComputedStyle(e).opacity}function f(e,t){e.forEach(function(e){e&&t(e.classList)})}function m(e,t){e.forEach(function(e){if(e){var o=Ie.call(e,Ce.CONTENT),i=o?Se(t/1.3):t;e.style[a('transitionDuration')]=i+'ms'}})}function h(e){return'visible'===e.style.visibility}function u(){}function g(e){return e.replace(/-.+/,'')}function b(t){var e,i,n=this,r=o(Pe,function(e){return e.el===n}),s=r.popper,p=r.settings.offset,l=g(s.getAttribute('x-placement')),d=Se(s.offsetWidth/2),c=Se(s.offsetHeight/2),f=5,m=document.documentElement.offsetWidth||document.body.offsetWidth,h=t.pageX,u=t.pageY;'top'===l?(e=h-d+p,i=u-2.25*c):'left'===l?(e=h-2*d-10,i=u-c+p):'right'===l?(e=h+c,i=u-c+p):'bottom'===l?(e=h-d+p,i=u+c/1.5):void 0;('top'===l||'bottom'===l)&&(h+f+d+p>m&&(e=m-f-2*d),0>h-f-d+p&&(e=f)),s.style[a('transform')]='translate3d('+e+'px, '+i+'px, 0)'}function y(e){return e instanceof Element?[e]:[].slice.call(document.querySelectorAll(e))}function v(e,t,o){if(!t)return o();var i=e.popper.querySelector(Ce.TOOLTIP),n=!1,r=function t(r){r.target!==i||(n=!0,i.removeEventListener('webkitTransitionEnd',t),i.removeEventListener('transitionend',t),o())};i.addEventListener('webkitTransitionEnd',r),i.addEventListener('transitionend',r),clearTimeout(e._transitionendTimeout),e._transitionendTimeout=setTimeout(function(){n||o()},t)}function E(e){return e&&'[object Function]'==={}.toString.call(e)}function O(e,t){if(1!==e.nodeType)return[];var o=window.getComputedStyle(e,null);return t?o[t]:o}function w(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function L(e){if(!e||-1!==['HTML','BODY','#document'].indexOf(e.nodeName))return window.document.body;var t=O(e),o=t.overflow,i=t.overflowX,n=t.overflowY;return /(auto|scroll)/.test(o+n+i)?e:L(w(e))}function T(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||e.firstElementChild.offsetParent===e)}function S(e){return null===e.parentNode?e:S(e.parentNode)}function P(e){var t=e&&e.offsetParent,o=t&&t.nodeName;return o&&'BODY'!==o&&'HTML'!==o?t:window.document.documentElement}function x(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return window.document.documentElement;var o=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,i=o?e:t,n=o?t:e,r=document.createRange();r.setStart(i,0),r.setEnd(n,0);var s=r.commonAncestorContainer;if(e!==s&&t!==s||i.contains(n))return T(s)?s:P(s);var a=SLine truncated

www/common/toolbar2.js

@@ -1,7 +1,7 @@
 define([
     'jquery',
     '/customize/application_config.js',
-    '/api/config'
+    '/api/config',
 ], function ($, Config, ApiConfig) {
     var Messages = {};
     var Cryptpad;
@@ -206,7 +206,7 @@ define([
         var pendingFriends = Cryptpad.getPendingInvites();
         editUsersNames.forEach(function (data) {
             var name = data.name || Messages.anonymous;
-            var $span = $('<span>', {'title': name, 'class': 'avatar'});
+            var $span = $('<span>', {'class': 'avatar'});
             var $rightCol = $('<span>', {'class': 'right-col'});
             var $nameSpan = $('<span>', {'class': 'name'}).text(name).appendTo($rightCol);
             var proxy = Cryptpad.getProxy();
@@ -214,9 +214,10 @@ define([
 
             if (Cryptpad.isLoggedIn() && data.curvePublic) {
                 if (isMe) {
-                    $nameSpan.attr('title', Messages._getKey('userlist_thisIsYou', [
+                    $span.attr('title', Messages._getKey('userlist_thisIsYou', [
                         name
-                    ])).text(name);
+                    ]));
+                    $nameSpan.text(name);
                 } else if (!proxy.friends || !proxy.friends[data.curvePublic]) {
                     if (pendingFriends.indexOf(data.netfluxId) !== -1) {
                         $('<span>', {'class': 'friend'}).text(Messages.userlist_pending)

www/drive/main.js

@@ -1116,18 +1116,18 @@ define([
             var name = filesOp.getTitle(element);
 
             // The element with the class '.name' is underlined when the 'li' is hovered
-            var $name = $('<span>', {'class': 'name', title: name}).text(name);
+            var $name = $('<span>', {'class': 'name'}).text(name);
             $span.html('');
             $span.append($name);
 
             var hrefData = Cryptpad.parsePadUrl(data.href);
             var type = Messages.type[hrefData.type] || hrefData.type;
-            var $type = $('<span>', {'class': 'type listElement', title: type}).text(type);
+            var $type = $('<span>', {'class': 'type listElement'}).text(type);
             if (hrefData.hashData && hrefData.hashData.mode === 'view') {
                 $type.append(' (' + Messages.readonly+ ')');
             }
-            var $adate = $('<span>', {'class': 'atime listElement', title: getDate(data.atime)}).text(getDate(data.atime));
-            var $cdate = $('<span>', {'class': 'ctime listElement', title: getDate(data.ctime)}).text(getDate(data.ctime));
+            var $adate = $('<span>', {'class': 'atime listElement'}).text(getDate(data.atime));
+            var $cdate = $('<span>', {'class': 'ctime listElement'}).text(getDate(data.ctime));
             $span.append($type);
             if (!isWorkgroup()) {
                 $span.append($adate).append($cdate);
@@ -1140,9 +1140,9 @@ define([
             // The element with the class '.name' is underlined when the 'li' is hovered
             var sf = filesOp.hasSubfolder(element);
             var files = filesOp.hasFile(element);
-            var $name = $('<span>', {'class': 'name', title: key}).text(key);
-            var $subfolders = $('<span>', {'class': 'folders listElement', title: sf}).text(sf);
-            var $files = $('<span>', {'class': 'files listElement', title: files}).text(files);
+            var $name = $('<span>', {'class': 'name'}).text(key);
+            var $subfolders = $('<span>', {'class': 'folders listElement'}).text(sf);
+            var $files = $('<span>', {'class': 'files listElement'}).text(files);
             $span.append($name).append($subfolders).append($files);
         };
 

www/pad/main.js

@@ -549,7 +549,7 @@ define([
                     var $templateButton = Cryptpad.createButton('template', true, templateObj);
                     $rightside.append($templateButton);
                 }
-
+console.log('init');
                 /* add an export button */
                 var $export = Cryptpad.createButton('export', true, {}, exportFile);
                 $drawer.append($export);