Improve share modal UI

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

@@ -314,6 +314,16 @@
                 &::-moz-focus-inner {
                     border: 0;
                 }
+
+                &:disabled {
+                    cursor: not-allowed !important;
+                    background-color: @colortheme_alertify-disabled;
+                    color: @colortheme_alertify-disabled-text;
+                    border-color: @colortheme_alertify-disabled-border;
+                    &:hover, &:active {
+                        background-color: @colortheme_alertify-disabled;
+                    }
+                }
             }
 
             button.btn {
@@ -430,6 +440,15 @@
             & > .cp-share-column {
                 width: 50%;
                 padding: 0 10px;
+                position: relative;
+                &.contains-nav {
+                    padding-bottom: 50px;
+                }
+                nav {
+                    position: absolute;
+                    bottom: 0;
+                    right: 0;
+                }
             }
         }
         .cp-share-grid, .cp-share-list {

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

@@ -51,6 +51,9 @@
 @colortheme_alertify-primary: @colortheme_form-bg;
 @colortheme_alertify-primary-text: @colortheme_form-color;
 @colortheme_alertify-primary-border: transparent;
+@colortheme_alertify-disabled: #6c757d;
+@colortheme_alertify-disabled-text: #ffffff;
+@colortheme_alertify-disabled-border: #6c757d;
 @colortheme_alertify-cancel: @colortheme_modal-bg;
 @colortheme_alertify-cancel-border: #ccc;
 

www/common/common-interface.js

@@ -159,13 +159,21 @@ define([
     dialog.frame = function (content, opt) {
         opt = opt || {};
         var cls = opt.wide ? '.wide' : '';
-        return $(h('div.alertify', {
+        var frame = h('div.alertify', {
             tabindex: 1,
         }, [
             h('div.dialog', [
                 h('div'+cls, content),
             ])
-        ])).click(function (e) {
+        ]);
+        var $frame = $(frame);
+        frame.closeModal = function (cb) {
+            $frame.fadeOut(150, function () {
+                $frame.detach();
+                cb();
+            });
+        };
+        return $frame.click(function (e) {
             e.stopPropagation();
         })[0];
     };
@@ -329,6 +337,28 @@ define([
         return tagger;
     };
 
+    dialog.getButtons = function (buttons, onClose) {
+        if (!Array.isArray(buttons)) { return void console.error('Not an array'); }
+        var navs = [];
+        buttons.forEach(function (b) {
+            if (!b.name || !b.onClick) { return; }
+            var button = h('button', { tabindex: '1', 'class': b.className || '' }, b.name);
+            $(button).click(function () {
+                b.onClick();
+                var $modal = $(button).parents('.alertify').first();
+                if ($modal.length && $modal[0].closeModal) {
+                    $modal[0].closeModal(function () {
+                        if (onClose) {
+                            onClose();
+                        }
+                    });
+                }
+            });
+            if (b.keys && b.keys.length) { $(button).attr('data-keys', JSON.stringify(b.keys)); }
+            navs.push(button);
+        });
+        return dialog.nav(navs);
+    };
     dialog.customModal = function (msg, opt) {
         var force = false;
         if (typeof(opt) === 'object') {
@@ -350,29 +380,9 @@ define([
             message = dialog.message(msg);
         }
 
-        var close = function (el) {
-            var $el = $(el).fadeOut(150, function () {
-                $el.detach();
-                if (opt.onClose) {
-                    opt.onClose();
-                }
-            });
-        };
-
-        var navs = [];
-        opt.buttons.forEach(function (b) {
-            if (!b.name || !b.onClick) { return; }
-            var button = h('button', { tabindex: '1', 'class': b.className || '' }, b.name);
-            $(button).click(function () {
-                b.onClick();
-                close($(button).parents('.alertify').first());
-            });
-            if (b.keys && b.keys.length) { $(button).attr('data-keys', JSON.stringify(b.keys)); }
-            navs.push(button);
-        });
         var frame = h('div', [
             message,
-            dialog.nav(navs),
+            dialog.getButtons(opt.buttons, opt.onClose)
         ]);
 
         if (opt.forefront) { $(frame).addClass('forefront'); }

www/common/common-ui-elements.js

@@ -646,7 +646,7 @@ define([
             return h('div.cp-share-friend', {
                 'data-ed': data.edPublic,
                 'data-curve': data.curvePublic,
-                'data-name': name,
+                'data-name': name.toLowerCase(),
                 'data-order': i,
                 title: name,
                 style: 'order:'+i+';'
@@ -691,7 +691,7 @@ define([
 
         // Hide friends when they are filtered using the text input
         var redraw = function () {
-            var name = $(inputFilter).val().trim().replace(/"/g, '');
+            var name = $(inputFilter).val().trim().replace(/"/g, '').toLowerCase();
             $div.find('.cp-share-friend').show();
             if (name) {
                 $div.find('.cp-share-friend:not(.cp-selected):not([data-name*="'+name+'"])').hide();
@@ -746,11 +746,26 @@ define([
         // Also create the "share with friends" button if it doesn't exist
         var refreshButtons = function () {
             var $nav = $div.parents('.alertify').find('nav');
-            if (!$nav.find('.cp-share-with-friends').length) {
+
-                var button = h('button.primary.cp-share-with-friends', {
+            var friendMode = $div.find('.cp-share-friend.cp-selected').length;
-                    'data-keys': '[13]'
+            console.log(friendMode, Boolean(friendMode));
-                }, Messages.share_withFriends);
+            if (friendMode) {
-                $(button).click(function () {
+                $nav.find('button.cp-share-with-friends').prop('disabled', '');
+            } else {
+                $nav.find('button.cp-share-with-friends').prop('disabled', 'disabled');
+            }
+        };
+
+        var friendsList = UIElements.getFriendsList(Messages.share_linkFriends, config, refreshButtons);
+        var div = friendsList.div;
+        $div = $(div);
+        $div.addClass('contains-nav');
+        var others = friendsList.others;
+
+        var shareButtons = [{
+            className: 'primary cp-share-with-friends',
+            name: Messages.share_withFriends,
+            onClick: function () {
                 var href = Hash.getRelativeHref($('#cp-share-link-preview').val());
                 var $friends = $div.find('.cp-share-friend.cp-selected');
                 $friends.each(function (i, el) {
@@ -788,24 +803,9 @@ define([
                 if (onShare) {
                     onShare.fire();
                 }
-                });
+            },
-                $nav.append(button);
+            keys: [13]
-            }
+        }];
-
-            var friendMode = $div.find('.cp-share-friend.cp-selected').length;
-            if (friendMode) {
-                $nav.find('button.primary[data-keys]').hide();
-                $nav.find('button.cp-share-with-friends').show();
-            } else {
-                $nav.find('button.primary[data-keys]').show();
-                $nav.find('button.cp-share-with-friends').hide();
-            }
-        };
-
-        var friendsList = UIElements.getFriendsList(Messages.share_linkFriends, config, refreshButtons);
-        var div = friendsList.div;
-        $div = $(div);
-        var others = friendsList.others;
 
         common.getAttribute(['general', 'share-friends'], function (err, val) {
             order = val || [];
@@ -830,6 +830,7 @@ define([
             });
             // Display them
             $div.append(h('div.cp-share-grid', others));
+            $div.append(UI.dialog.getButtons(shareButtons, config.onClose));
             $div.find('.cp-share-friend').click(function () {
                 var sel = $(this).hasClass('cp-selected');
                 if (!sel) {
@@ -841,6 +842,7 @@ define([
                 }
                 refreshButtons();
             });
+            refreshButtons();
         });
         return div;
     };
@@ -859,8 +861,7 @@ define([
         var friendsList = hasFriends ? createShareWithFriends(config, onFriendShare) : undefined;
         var friendsUIClass = hasFriends ? '.cp-share-columns' : '';
 
-        var link = h('div.cp-share-modal' + friendsUIClass, [
+        var mainShareColumn = h('div.cp-share-column.contains-nav', [
-            h('div.cp-share-column', [
             hasFriends ? h('p', Messages.share_description) : undefined,
             h('label', Messages.share_linkAccess),
             h('br'),
@@ -875,9 +876,8 @@ define([
             UI.createCheckbox('cp-share-present', Messages.share_linkPresent, false, { mark: {tabindex:1} }),
             h('br'),
             UI.dialog.selectable('', { id: 'cp-share-link-preview', tabindex: 1 }),
-            ]),
-            friendsList
         ]);
+        var link = h('div.cp-share-modal' + friendsUIClass);
         if (!hashes.editHash) {
             $(link).find('#cp-share-editable-false').attr('checked', true);
             $(link).find('#cp-share-editable-true').removeAttr('checked').attr('disabled', true);
@@ -913,7 +913,8 @@ define([
             name: Messages.cancel,
             onClick: function () {},
             keys: [27]
-        }, {
+        }];
+        var shareButtons = [{
             className: 'primary',
             name: Messages.share_linkCopy,
             onClick: function () {
@@ -933,6 +934,11 @@ define([
             },
             keys: [[13, 'ctrl']]
         }];
+
+        var $link = $(link);
+        $(mainShareColumn).append(UI.dialog.getButtons(shareButtons, config.onClose)).appendTo($link);
+        $(friendsList).appendTo($link);
+
         var frameLink = UI.dialog.customModal(link, {
             buttons: linkButtons,
             onClose: config.onClose,

www/common/translations/messages.fr.json

@@ -1068,7 +1068,7 @@
     "notification_padShared": "{0} a partagé un pad avec vous : <b>{1}</b>",
     "notification_fileShared": "{0} a partagé un fichier avec vous : <b>{1}</b>",
     "notification_folderShared": "{0} a partagé un dossier avec vous : <b>{1}</b>",
-    "share_selectAll": "Tout sélectionner",
+    "share_selectAll": "Tout",
     "share_deselectAll": "Aucun",
     "share_filterFriend": "Rechercher par nom",
     "share_linkFriends": "Partager avec des amis",