infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Improve share modal UI

pull/1/head
yflory 2019-09-12 18:51:03 +02:00
parent 306fc6cdb9
commit 353da76808
5 changed files with 132 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
customize.dist/src/less2/include/alertify.less
View File

@ -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 {

3
customize.dist/src/less2/include/colortheme.less
View File

@ -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;

56
www/common/common-interface.js
View File

@ -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'); }

146
www/common/common-ui-elements.js
View File

@ -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,

2
www/common/translations/messages.fr.json
View File

@ -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",