Add owners tab

pull/1/head
yflory 5 years ago
parent 4ec6d8072c
commit 81a0bbb0ef

@ -182,6 +182,7 @@
margin-bottom: 10px; margin-bottom: 10px;
box-sizing: content-box; box-sizing: content-box;
span { span {
.tools_unselectable();
font-size: 20px; font-size: 20px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
@ -190,12 +191,16 @@
border-left: 1px solid lighten(@alertify-base, 10%); border-left: 1px solid lighten(@alertify-base, 10%);
border-right: 1px solid lighten(@alertify-base, 10%); border-right: 1px solid lighten(@alertify-base, 10%);
cursor: pointer; cursor: pointer;
&:hover { &:not(.disabled):hover {
background-color: @alertify-light-bg; background-color: @alertify-light-bg;
} }
&.disabled {
color: #949494;
cursor: not-allowed;
}
} }
span.alertify-tabs-active { span.alertify-tabs-active {
background-color: @alertify-fore; background-color: @alertify-fore !important;
border-left: 1px solid @alertify-fore; border-left: 1px solid @alertify-fore;
border-right: 1px solid @alertify-fore; border-right: 1px solid @alertify-fore;
color: @alertify-base; color: @alertify-base;
@ -386,18 +391,13 @@
} }
} }
div.wide { div.wide {
div.alertify-tabs {
p.msg:not(:last-child) {
border-bottom: 1px solid @alertify-fore;
}
}
.cp-share-columns { .cp-share-columns {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
& > .cp-share-column { & > .cp-share-column {
width: 50%; width: 50%;
padding: 0 10px; //padding: 0 10px;
position: relative; position: relative;
&.contains-nav { &.contains-nav {
nav { nav {
@ -414,7 +414,20 @@
} }
} }
&:first-child { &:first-child {
border-right: 1px solid @alertify-fore; margin-right: @alertify_padding-base;
}
&:last-child {
margin-left: @alertify_padding-base;
}
}
& > .cp-share-column-mid {
display: flex;
align-items: center;
button {
width: 50px;
margin: 0;
min-width: 0;
font-size: 18px;
} }
} }
} }

@ -218,14 +218,15 @@ define([
var titles = []; var titles = [];
var active = 0; var active = 0;
tabs.forEach(function (tab, i) { tabs.forEach(function (tab, i) {
if (!tab.content || !tab.title) { return; } if (!(tab.content || tab.disabled) || !tab.title) { return; }
var content = h('div.alertify-tabs-content', tab.content); var content = h('div.alertify-tabs-content', tab.content);
var title = h('span.alertify-tabs-title', tab.title); var title = h('span.alertify-tabs-title'+ (tab.disabled ? '.disabled' : ''), tab.title);
if (tab.icon) { if (tab.icon) {
var icon = h('i', {class: tab.icon}); var icon = h('i', {class: tab.icon});
$(title).prepend(' ').prepend(icon); $(title).prepend(' ').prepend(icon);
} }
$(title).click(function () { $(title).click(function () {
if (tab.disabled) { return; }
var old = tabs[active]; var old = tabs[active];
if (old.onHide) { old.onHide(); } if (old.onHide) { old.onHide(); }
titles.forEach(function (t) { $(t).removeClass('alertify-tabs-active'); }); titles.forEach(function (t) { $(t).removeClass('alertify-tabs-active'); });
@ -239,7 +240,7 @@ define([
}); });
titles.push(title); titles.push(title);
contents.push(content); contents.push(content);
if (tab.active) { active = i; } if (tab.active && !tab.disabled) { active = i; }
}); });
if (contents.length) { if (contents.length) {
$(contents[active]).addClass('alertify-tabs-content-active'); $(contents[active]).addClass('alertify-tabs-content-active');

@ -284,6 +284,12 @@ define([
UIElements.getProperties = function (common, opts, cb) { UIElements.getProperties = function (common, opts, cb) {
var data; var data;
var content; var content;
var button = [{
className: 'cancel',
name: Messages.filePicker_close,
onClick: function () {},
keys: [13,27]
}];
NThen(function (waitFor) { NThen(function (waitFor) {
getPropertiesData(common, opts, waitFor(function (e, _data) { getPropertiesData(common, opts, waitFor(function (e, _data) {
if (e) { if (e) {
@ -298,10 +304,17 @@ define([
waitFor.abort(); waitFor.abort();
return void cb(e); return void cb(e);
} }
content = c[0]; content = UI.dialog.customModal(c[0], {
buttons: button
});
})); }));
}).nThen(function () { }).nThen(function () {
var modal = UI.alert(content); var tabs = UI.dialog.tabs([{
title: Messages.fc_prop,
icon: "fa fa-info-circle",
content: content
}]);
var modal = UI.openCustomModal(tabs);
cb (void 0, modal); cb (void 0, modal);
}); });
}; };

@ -9,11 +9,11 @@ define([
'/bower_components/nthen/index.js', '/bower_components/nthen/index.js',
], function ($, Util, Hash, UI, UIElements, h, ], function ($, Util, Hash, UI, UIElements, h,
Messages, nThen) { Messages, nThen) {
console.log(UI, UIElements, h);
var Access = {}; var Access = {};
var createOwnerModal = function (common, data) { var getOwnersTab = function (common, data, opts, _cb) {
var cb = Util.once(Util.mkAsync(_cb));
var friends = common.getFriends(true); var friends = common.getFriends(true);
var sframeChan = common.getSframeChannel(); var sframeChan = common.getSframeChannel();
var priv = common.getMetadataMgr().getPrivateData(); var priv = common.getMetadataMgr().getPrivateData();
@ -23,13 +23,19 @@ console.log(UI, UIElements, h);
var owners = data.owners || []; var owners = data.owners || [];
var pending_owners = data.pending_owners || []; var pending_owners = data.pending_owners || [];
var teams = priv.teams; var teams = priv.teams;
var teamsData = Util.tryParse(JSON.stringify(priv.teams)) || {};
var teamOwner = data.teamId; var teamOwner = data.teamId;
opts = opts || {};
var redrawAll = function () {}; var redrawAll = function () {};
var div1 = h('div.cp-usergrid-user.cp-share-column.cp-ownership'); var addBtn = h('button.btn.btn-primary.fa.fa-arrow-left');
var div2 = h('div.cp-usergrid-user.cp-share-column.cp-ownership');
var div1 = h('div.cp-share-column.cp-ownership');
var divMid = h('div.cp-share-column-mid', addBtn);
var div2 = h('div.cp-share-column.cp-ownership');
var $div1 = $(div1); var $div1 = $(div1);
$divMid = $(divMid);
var $div2 = $(div2); var $div2 = $(div2);
// Remove owner column // Remove owner column
@ -105,7 +111,7 @@ console.log(UI, UIElements, h);
err = err || (res && res.error); err = err || (res && res.error);
if (err) { if (err) {
waitFor.abort(); waitFor.abort();
redrawAll(); redrawAll(true);
var text = err === "INSUFFICIENT_PERMISSIONS" ? Messages.fm_forbidden var text = err === "INSUFFICIENT_PERMISSIONS" ? Messages.fm_forbidden
: Messages.error; : Messages.error;
return void UI.warn(text); return void UI.warn(text);
@ -127,7 +133,7 @@ console.log(UI, UIElements, h);
}, waitFor()); }, waitFor());
}); });
}).nThen(function () { }).nThen(function () {
redrawAll(); redrawAll(true);
}); });
}); });
$div.append(h('p', removeButton)); $div.append(h('p', removeButton));
@ -154,7 +160,6 @@ console.log(UI, UIElements, h);
}); });
$div.append(addCol.div); $div.append(addCol.div);
var teamsData = Util.tryParse(JSON.stringify(priv.teams)) || {};
Object.keys(teamsData).forEach(function (id) { Object.keys(teamsData).forEach(function (id) {
var t = teamsData[id]; var t = teamsData[id];
t.teamId = id; t.teamId = id;
@ -171,8 +176,13 @@ console.log(UI, UIElements, h);
$div.append(teamsList.div); $div.append(teamsList.div);
// When clicking on the add button, we get the selected users. // When clicking on the add button, we get the selected users.
var addButton = h('button.no-margin', Messages.owner_addButton); //var addButton = h('button.no-margin', Messages.owner_addButton); // XXX
$(addButton).click(function () { //$div.append(h('p', addButton));
return $div;
};
$(addBtn).click(function () {
var $div = $div2.find('.cp-share-column');
// Check selection // Check selection
var $sel = $div.find('.cp-usergrid-user.cp-selected'); var $sel = $div.find('.cp-usergrid-user.cp-selected');
var sel = $sel.toArray(); var sel = $sel.toArray();
@ -215,12 +225,12 @@ console.log(UI, UIElements, h);
err = err || (res && res.error); err = err || (res && res.error);
if (err) { if (err) {
waitFor.abort(); waitFor.abort();
redrawAll(); redrawAll(true);
var text = err === "INSUFFICIENT_PERMISSIONS" ? var text = err === "INSUFFICIENT_PERMISSIONS" ?
Messages.fm_forbidden : Messages.error; Messages.fm_forbidden : Messages.error;
return void UI.warn(text); return void UI.warn(text);
} }
var isTemplate = priv.isTemplate || data.isTemplate; var isTemplate = priv.isTemplate || opts.isTemplate;
toAddTeams.forEach(function (obj) { toAddTeams.forEach(function (obj) {
sframeChan.query('Q_STORE_IN_TEAM', { sframeChan.query('Q_STORE_IN_TEAM', {
href: data.href || data.rohref, href: data.href || data.rohref,
@ -247,7 +257,7 @@ console.log(UI, UIElements, h);
err = err || (res && res.error); err = err || (res && res.error);
if (err) { if (err) {
waitFor.abort(); waitFor.abort();
redrawAll(); redrawAll(true);
var text = err === "INSUFFICIENT_PERMISSIONS" ? Messages.fm_forbidden var text = err === "INSUFFICIENT_PERMISSIONS" ? Messages.fm_forbidden
: Messages.error; : Messages.error;
return void UI.warn(text); return void UI.warn(text);
@ -270,70 +280,54 @@ console.log(UI, UIElements, h);
}, waitFor()); }, waitFor());
}); });
}).nThen(function () { }).nThen(function () {
redrawAll(); redrawAll(true);
UI.log(Messages.saved); UI.log(Messages.saved);
}); });
}); });
$div.append(h('p', addButton));
return $div;
};
redrawAll = function (md) { redrawAll = function (reload) {
var todo = function (obj) { nThen(function (waitFor) {
if (obj && obj.error) { return; } if (!reload) { return; }
owners = obj.owners || []; common.getPadMetadata({
pending_owners = obj.pending_owners || []; channel: data.channel
}, waitFor(function (md) {
data.owners = md.owners || [];
data.pending_owners = md.pending_owners || [];
}));
}).nThen(function () {
owners = data.owners || [];
pending_owners = data.pending_owners || [];
$div1.empty(); $div1.empty();
$div2.empty(); $div2.empty();
$div1.append(drawRemove(false)).append(drawRemove(true)); $div1.append(drawRemove(false)).append(drawRemove(true));
$div2.append(drawAdd()); $div2.append(drawAdd());
});
}; };
redrawAll();
if (md) { return void todo(md); }
common.getPadMetadata({
channel: data.channel
}, todo);
};
$div1.append(drawRemove(false)).append(drawRemove(true));
$div2.append(drawAdd());
var handler = sframeChan.on('EV_RT_METADATA', function (md) { var handler = sframeChan.on('EV_RT_METADATA', function (md) {
if (!$div1.length) { if (!$div1.length) {
return void handler.stop(); return void handler.stop();
} }
owners = md.owners || []; data.owners = md.owners || [];
pending_owners = md.pending_owners || []; data.pending_owners = md.pending_owners || [];
redrawAll(md); redrawAll();
}); });
// Create modal // Create modal
var link = h('div.cp-share-columns', [ var link = h('div.cp-share-columns', [
div1, div1,
divMid,
div2 div2
/*drawRemove()[0],
drawAdd()[0]*/
]); ]);
var linkButtons = [{ cb(void 0, link);
className: 'cancel',
name: Messages.filePicker_close,
onClick: function () {},
keys: [27]
}];
return UI.dialog.customModal(link, {buttons: linkButtons});
}; };
var getRightsProperties = function (common, data, cb) { var isOwned = function (common, data) {
var $div = $('<div>'); data = data || {};
if (!data) { return void cb(void 0, $div); }
var draw = function () {
var $d = $('<div>');
var priv = common.getMetadataMgr().getPrivateData(); var priv = common.getMetadataMgr().getPrivateData();
var user = common.getMetadataMgr().getUserData();
var edPublic = priv.edPublic; var edPublic = priv.edPublic;
var owned = false; var owned = false;
var _owners = {};
if (data.owners && data.owners.length) { if (data.owners && data.owners.length) {
if (data.owners.indexOf(edPublic) !== -1) { if (data.owners.indexOf(edPublic) !== -1) {
owned = true; owned = true;
@ -346,15 +340,25 @@ console.log(UI, UIElements, h);
return true; return true;
}); });
} }
}
return owned;
};
var getUserList = function (common, list) {
if (!Array.isArray(list)) { return; }
var priv = common.getMetadataMgr().getPrivateData();
var user = common.getMetadataMgr().getUserData();
var edPublic = priv.edPublic;
var strangers = 0; var strangers = 0;
data.owners.forEach(function (ed) { var _owners = {};
list.forEach(function (ed) {
// If a friend is an owner, add their name to the list // If a friend is an owner, add their name to the list
// otherwise, increment the list of strangers // otherwise, increment the list of strangers
// Our edPublic? print "Yourself" // Our edPublic? print "Yourself"
if (ed === edPublic) { if (ed === edPublic) {
_owners[ed] = { _owners[ed] = {
selected: true, //selected: true,
name: user.name, name: user.name,
avatar: user.avatar avatar: user.avatar
}; };
@ -385,79 +389,76 @@ console.log(UI, UIElements, h);
return; return;
} }
// Otherwise it's a stranger // Otherwise it's a stranger
_owners[ed] = {
name: '???', // XXX unkwown?
};
strangers++; strangers++;
}); });
if (!Object.keys(_owners).length) { return; }
/*
if (strangers) { if (strangers) {
_owners['stangers'] = { _owners['stangers'] = {
name: Messages._getKey('properties_unknownUser', [strangers]), name: Messages._getKey('properties_unknownUser', [strangers]),
}; };
} }
} */
var _ownersGrid = UIElements.getUserGrid(Messages.creation_owners, { return UIElements.getUserGrid(null, {
common: common, common: common,
noSelect: true, noSelect: true,
data: _owners, data: _owners,
large: true large: true
}, function () {}); }, function () {});
if (_ownersGrid && Object.keys(_owners).length) { };
$d.append(_ownersGrid.div);
} else {
$d.append([
h('label', Messages.creation_owners),
]);
$d.append(UI.dialog.selectable(Messages.creation_noOwner, {
id: 'cp-app-prop-owners',
}));
} var getAccessTab = function (common, data, opts, _cb) {
var cb = Util.once(Util.mkAsync(_cb));
opts = opts || {};
var parsed; var priv = common.getMetadataMgr().getPrivateData();
if (data.href || data.roHref) { var edPublic = priv.edPublic;
parsed = Hash.parsePadUrl(data.href || data.roHref);
} var $div = $(h('div.cp-share-columns'));
if (owned && parsed.hashData.type === 'pad') { if (!data) { return void cb(void 0, $div); }
var manageOwners = h('button.no-margin', Messages.owner_openModalButton);
$(manageOwners).click(function () { var div1 = h('div.cp-usergrid-user.cp-share-column.cp-access');
data.teamId = typeof(owned) !== "boolean" ? owned : undefined; var div2 = h('div.cp-usergrid-user.cp-share-column.cp-access');
var modal = createOwnerModal(common, data); var $div1 = $(div1).appendTo($div);
UI.openCustomModal(modal, { var $div2 = $(div2).appendTo($div);
wide: true,
}); var parsed = Hash.parsePadUrl(data.href || data.roHref);
}); if (!parsed || !parsed.hashData) { return void console.error("Invalid href"); }
$d.append(h('p', manageOwners));
} var drawLeft = function () {
var $d = $('<div>');
var owned = isOwned(common, data);
if (!data.noExpiration) { if (!opts.noExpiration) {
var expire = Messages.creation_expireFalse; var expire = Messages.creation_expireFalse;
if (data.expire && typeof (data.expire) === "number") { if (data.expire && typeof (data.expire) === "number") {
expire = new Date(data.expire).toLocaleString(); expire = new Date(data.expire).toLocaleString();
} }
$('<label>', {'for': 'cp-app-prop-expire'}).text(Messages.creation_expiration) $d.append(h('div.cp-app-prop', [
.appendTo($d); Messages.creation_expiration,
$d.append(UI.dialog.selectable(expire, { h('br'),
id: 'cp-app-prop-expire', h('span.cp-app-prop-content', expire)
})); ]));
} }
if (!data.noPassword) { var $pwLabel = $('<label>', {'for': 'cp-app-prop-password'})
var hasPassword = data.password; .text(Messages.creation_passwordValue).appendTo($d);
var $pwLabel = $('<label>', {'for': 'cp-app-prop-password'}).text(Messages.creation_passwordValue)
.hide().appendTo($d);
var password = UI.passwordInput({ var password = UI.passwordInput({
id: 'cp-app-prop-password', id: 'cp-app-prop-password',
readonly: 'readonly' readonly: 'readonly'
}); });
var $password = $(password).hide(); $d.append(password);
if (!data.noPassword) {
var hasPassword = data.password;
var $password = $(password);
var $pwInput = $password.find('.cp-password-input'); var $pwInput = $password.find('.cp-password-input');
$pwInput.val(data.password).click(function () { $pwInput.val(data.password || '').click(function () {
$pwInput[0].select(); $pwInput[0].select();
}); });
$d.append(password);
if (hasPassword) {
$pwLabel.show();
$password.css('display', 'flex');
}
// In the properties, we should have the edit href if we know it. // In the properties, we should have the edit href if we know it.
// We should know it because the pad is stored, but it's better to check... // We should know it because the pad is stored, but it's better to check...
@ -532,8 +533,6 @@ console.log(UI, UIElements, h);
} }
UI.findOKButton().click(); UI.findOKButton().click();
$pwLabel.show();
$password.css('display', 'flex');
$pwInput.val(newPass); $pwInput.val(newPass);
// If the current document is a file or if we're changing the password from a drive, // If the current document is a file or if we're changing the password from a drive,
@ -576,8 +575,45 @@ console.log(UI, UIElements, h);
} }
return $d; return $d;
}; };
var drawRight = function () {
var content = [
h('label', Messages.creation_owners),
];
var _ownersGrid = getUserList(common, data.owners);
if (_ownersGrid && _ownersGrid.div) {
content.push(_ownersGrid.div);
} else {
content.push(UI.dialog.selectable(Messages.creation_noOwner, {
id: 'cp-app-prop-owners',
}));
}
/*
var owned = isOwned(common, data);
var parsed = Hash.parsePadUrl(data.href || data.roHref);
if (!parsed || !parsed.hashData) { return; }
if (owned && parsed.hashData.type === 'pad') {
var manageOwners = h('button.no-margin', Messages.owner_openModalButton);
$(manageOwners).click(function () {
data.teamId = typeof(owned) !== "boolean" ? owned : undefined;
var modal = createOwnerModal(common, data);
UI.openCustomModal(modal, {
wide: true,
});
});
$d.append(h('p', manageOwners));
}
*/
return h('div', content);
};
var sframeChan = common.getSframeChannel(); var sframeChan = common.getSframeChannel();
var redraw = function () {
$div1.empty();
$div1.append(drawLeft());
$div2.empty();
$div2.append(drawRight());
};
var handler = sframeChan.on('EV_RT_METADATA', function (md) { var handler = sframeChan.on('EV_RT_METADATA', function (md) {
if (!$div.length) { if (!$div.length) {
handler.stop(); handler.stop();
@ -587,10 +623,9 @@ console.log(UI, UIElements, h);
data.owners = md.owners; data.owners = md.owners;
data.expire = md.expire; data.expire = md.expire;
data.pending_owners = md.pending_owners; data.pending_owners = md.pending_owners;
$div.empty(); redraw();
$div.append(draw());
}); });
$div.append(draw()); redraw();
cb(void 0, $div); cb(void 0, $div);
}; };
@ -631,7 +666,14 @@ console.log(UI, UIElements, h);
}; };
Access.getAccessModal = function (common, opts, cb) { Access.getAccessModal = function (common, opts, cb) {
var data; var data;
var content; var tab1, tab2, tab3;
var owned = false;
var button = [{
className: 'cancel',
name: Messages.filePicker_close,
onClick: function () {},
keys: [13,27]
}];
nThen(function (waitFor) { nThen(function (waitFor) {
getAccessData(common, opts, waitFor(function (e, _data) { getAccessData(common, opts, waitFor(function (e, _data) {
if (e) { if (e) {
@ -641,15 +683,48 @@ console.log(UI, UIElements, h);
data = _data; data = _data;
})); }));
}).nThen(function (waitFor) { }).nThen(function (waitFor) {
getRightsProperties(common, data, waitFor(function (e, c) { owned = isOwned(common, data);
getAccessTab(common, data, opts, waitFor(function (e, c) {
if (e) {
waitFor.abort();
return void cb(e);
}
tab1 = UI.dialog.customModal(c[0], {
buttons: button
});
}));
if (!owned) { return; }
getOwnersTab(common, data, opts, waitFor(function (e, c) {
if (e) { if (e) {
waitFor.abort(); waitFor.abort();
return void cb(e); return void cb(e);
} }
content = c[0]; tab3 = UI.dialog.customModal(c, {
buttons: button
});
})); }));
}).nThen(function () { }).nThen(function () {
var modal = UI.alert(content); var tabs = UI.dialog.tabs([{
title: "ACCESS", // XXX
icon: "fa fa-unlock-alt",
content: tab1
}, {
title: "ALLOW LIST", // XXX
disabled: !owned,
icon: "fa fa-list",
content: h('div')
}, {
title: Messages.creation_owners,
disabled: !owned,
icon: "fa fa-id-badge",
content: tab3
}]);
var modal = UI.openCustomModal(tabs, {
wide: true
});
cb (void 0, modal); cb (void 0, modal);
}); });
}; };

Loading…
Cancel
Save