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'
+    '/common/visible.js',
-], function ($, Messages, Util, AppConfig, Alertify, Notify, Visible) {
+    '/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/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 $adate = $('<span>', {'class': 'atime listElement'}).text(getDate(data.atime));
-            var $cdate = $('<span>', {'class': 'ctime listElement', title: getDate(data.ctime)}).text(getDate(data.ctime));
+            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 $name = $('<span>', {'class': 'name'}).text(key);
-            var $subfolders = $('<span>', {'class': 'folders listElement', title: sf}).text(sf);
+            var $subfolders = $('<span>', {'class': 'folders listElement'}).text(sf);
-            var $files = $('<span>', {'class': 'files listElement', title: files}).text(files);
+            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);