diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 3f36efd5e..eb071d70b 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/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 { diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index cfa971c48..24959179c 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/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; diff --git a/www/common/common-interface.js b/www/common/common-interface.js index cb5f9903a..a2694c156 100644 --- a/www/common/common-interface.js +++ b/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'); } diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 0e5fd4a46..fff1bb3d8 100644 --- a/www/common/common-ui-elements.js +++ b/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,67 +746,67 @@ 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', { - 'data-keys': '[13]' - }, Messages.share_withFriends); - $(button).click(function () { - var href = Hash.getRelativeHref($('#cp-share-link-preview').val()); - var $friends = $div.find('.cp-share-friend.cp-selected'); - $friends.each(function (i, el) { - var curve = $(el).attr('data-curve'); - if (!curve || !friends[curve]) { return; } - var friend = friends[curve]; - if (!friend.notifications || !friend.curvePublic) { return; } - common.mailbox.sendTo("SHARE_PAD", { - href: href, - password: config.password, - isTemplate: config.isTemplate, - name: myName, - title: title - }, { - channel: friend.notifications, - curvePublic: friend.curvePublic - }); - }); - - UI.findCancelButton().click(); - - // Update the "recently shared with" array: - // Get the selected curves - var curves = $friends.toArray().map(function (el) { - return ($(el).attr('data-curve') || '').slice(0,8); - }).filter(function (x) { return x; }); - // Prepend them to the "order" array - Array.prototype.unshift.apply(order, curves); - order = Util.deduplicateString(order); - // Make sure we don't have "old" friends and save - order = order.filter(function (curve) { - return smallCurves.indexOf(curve) !== -1; - }); - common.setAttribute(['general', 'share-friends'], order); - if (onShare) { - onShare.fire(); - } - }); - $nav.append(button); - } var friendMode = $div.find('.cp-share-friend.cp-selected').length; + console.log(friendMode, Boolean(friendMode)); if (friendMode) { - $nav.find('button.primary[data-keys]').hide(); - $nav.find('button.cp-share-with-friends').show(); + $nav.find('button.cp-share-with-friends').prop('disabled', ''); } else { - $nav.find('button.primary[data-keys]').show(); - $nav.find('button.cp-share-with-friends').hide(); + $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) { + var curve = $(el).attr('data-curve'); + if (!curve || !friends[curve]) { return; } + var friend = friends[curve]; + if (!friend.notifications || !friend.curvePublic) { return; } + common.mailbox.sendTo("SHARE_PAD", { + href: href, + password: config.password, + isTemplate: config.isTemplate, + name: myName, + title: title + }, { + channel: friend.notifications, + curvePublic: friend.curvePublic + }); + }); + + UI.findCancelButton().click(); + + // Update the "recently shared with" array: + // Get the selected curves + var curves = $friends.toArray().map(function (el) { + return ($(el).attr('data-curve') || '').slice(0,8); + }).filter(function (x) { return x; }); + // Prepend them to the "order" array + Array.prototype.unshift.apply(order, curves); + order = Util.deduplicateString(order); + // Make sure we don't have "old" friends and save + order = order.filter(function (curve) { + return smallCurves.indexOf(curve) !== -1; + }); + common.setAttribute(['general', 'share-friends'], order); + if (onShare) { + onShare.fire(); + } + }, + keys: [13] + }]; + common.getAttribute(['general', 'share-friends'], function (err, val) { order = val || []; // Sort friends by "recently shared with" @@ -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,25 +861,23 @@ define([ var friendsList = hasFriends ? createShareWithFriends(config, onFriendShare) : undefined; var friendsUIClass = hasFriends ? '.cp-share-columns' : ''; - var link = h('div.cp-share-modal' + friendsUIClass, [ - h('div.cp-share-column', [ - hasFriends ? h('p', Messages.share_description) : undefined, - h('label', Messages.share_linkAccess), - h('br'), - UI.createRadio('cp-share-editable', 'cp-share-editable-true', - Messages.share_linkEdit, true, { mark: {tabindex:1} }), - UI.createRadio('cp-share-editable', 'cp-share-editable-false', - Messages.share_linkView, false, { mark: {tabindex:1} }), - h('br'), - h('label', Messages.share_linkOptions), - h('br'), - UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }), - 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 mainShareColumn = h('div.cp-share-column.contains-nav', [ + hasFriends ? h('p', Messages.share_description) : undefined, + h('label', Messages.share_linkAccess), + h('br'), + UI.createRadio('cp-share-editable', 'cp-share-editable-true', + Messages.share_linkEdit, true, { mark: {tabindex:1} }), + UI.createRadio('cp-share-editable', 'cp-share-editable-false', + Messages.share_linkView, false, { mark: {tabindex:1} }), + h('br'), + h('label', Messages.share_linkOptions), + h('br'), + UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }), + UI.createCheckbox('cp-share-present', Messages.share_linkPresent, false, { mark: {tabindex:1} }), + h('br'), + UI.dialog.selectable('', { id: 'cp-share-link-preview', tabindex: 1 }), ]); + 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, diff --git a/www/common/translations/messages.fr.json b/www/common/translations/messages.fr.json index 9ae1e0a2a..297cdcc8e 100644 --- a/www/common/translations/messages.fr.json +++ b/www/common/translations/messages.fr.json @@ -1068,7 +1068,7 @@ "notification_padShared": "{0} a partagé un pad avec vous : {1}", "notification_fileShared": "{0} a partagé un fichier avec vous : {1}", "notification_folderShared": "{0} a partagé un dossier avec vous : {1}", - "share_selectAll": "Tout sélectionner", + "share_selectAll": "Tout", "share_deselectAll": "Aucun", "share_filterFriend": "Rechercher par nom", "share_linkFriends": "Partager avec des amis",