Merge branch 'design_dialogs' into staging

pull/1/head
yflory 5 years ago
commit 7e45f597c9

@ -17,6 +17,7 @@
@alertify-btn-fg: @alertify-fore; @alertify-btn-fg: @alertify-fore;
@alertify-light-bg: fade(@alertify-fore, 25%);
@alertify-bg: @colortheme_modal-dim; @alertify-bg: @colortheme_modal-dim;
@alertify-fg: @alertify-fore; @alertify-fg: @alertify-fore;
@ -164,27 +165,29 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
.alertify-tabs-titles { .alertify-tabs-titles {
height: 30px; height: 40px;
display: flex; display: flex;
border-bottom: 1px solid @alertify-fore; border-bottom: 1px solid @alertify-fore;
margin-bottom: 20px; margin-bottom: 10px;
box-sizing: content-box; box-sizing: content-box;
span { span {
font-size: 20px; font-size: 20px;
height: 30px; height: 40px;
line-height: 30px; line-height: 40px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 15px; padding: 0 15px;
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 {
background-color: @alertify-light-bg;
}
} }
span.alertify-tabs-active { span.alertify-tabs-active {
background-color: @alertify-fore; background-color: @alertify-fore;
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;
font-weight: bold;
cursor: default; cursor: default;
} }
} }
@ -206,24 +209,28 @@
} }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: darken(@alertify-input-fg, 15%); color: @cryptpad_color_grey;
opacity: 1; /* Firefox */ opacity: 1; /* Firefox */
} }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: darken(@alertify-input-fg, 15%); color: @cryptpad_color_grey;
} }
::-ms-input-placeholder { /* Microsoft Edge */ ::-ms-input-placeholder { /* Microsoft Edge */
color: darken(@alertify-input-fg, 15%); color: @cryptpad_color_grey;
} }
input:not(.form-control), textarea { input:not(.form-control), textarea {
background-color: @alertify-input-bg; background-color: @alertify-input-fg;
color: @alertify-input-fg; color: @cryptpad_text_col;
border: 0px; border: 1px solid @alertify-input-bg;
margin-bottom: 15px; margin-bottom: 15px;
width: 100%; width: 100%;
font-size: 100%; font-size: 100%;
padding: @alertify_padding-base; padding: @alertify_padding-base;
&[readonly] {
background-color: @alertify-light-bg;
color: @cryptpad_text_col;
border-color: @alertify-input-fg;
}
} }
span.cp-password-container { span.cp-password-container {
@ -239,6 +246,7 @@
} }
} }
input[type="checkbox"], input[type="radio"] { input[type="checkbox"], input[type="radio"] {
width: auto; width: auto;
padding: 0; padding: 0;
@ -337,12 +345,15 @@
} }
} }
button.btn {
margin: 6px 4px;
}
nav { nav {
padding: @alertify_padding-base;
text-align: right; text-align: right;
button {
margin: 0px !important;
&:not(:last-child) {
margin-right: @alertify_padding-base !important;
}
}
} }
} }
} }

@ -23,7 +23,7 @@
@colortheme_form-bg: @colortheme_logo-2; @colortheme_form-bg: @colortheme_logo-2;
@colortheme_form-color: #ffffff; @colortheme_form-color: #ffffff;
@colortheme_form-bg-alt: #ffffff; @colortheme_form-bg-alt: #ffffff;
@colortheme_form-color-alt: @colortheme_logo-1; @colortheme_form-color-alt: @colortheme_logo-2;
@colortheme_form-warning: #f49842; @colortheme_form-warning: #f49842;
@colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%); @colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%);

@ -15,6 +15,7 @@
@import (reference) "./messenger.less"; @import (reference) "./messenger.less";
@import (reference) "./cursor.less"; @import (reference) "./cursor.less";
@import (reference) "./usergrid.less"; @import (reference) "./usergrid.less";
@import (reference) "./modals-ui-elements.less";
.framework_main(@bg-color, @warn-color, @color) { .framework_main(@bg-color, @warn-color, @color) {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -32,6 +33,7 @@
@color: @color @color: @color
); );
.alertify_main(); .alertify_main();
.modals-ui-elements_main();
.corner_main(); .corner_main();
.contextmenu_main(); .contextmenu_main();
.fileupload_main(); .fileupload_main();
@ -70,6 +72,7 @@
); );
.fileupload_main(); .fileupload_main();
.alertify_main(); .alertify_main();
.modals-ui-elements_main();
.corner_main(); .corner_main();
.contextmenu_main(); .contextmenu_main();
.tippy_main(); .tippy_main();

@ -66,6 +66,11 @@
padding: 8px 12px; padding: 8px 12px;
margin: 1em; margin: 1em;
width: 300px; width: 300px;
&[type="text"] {
background-color: @colortheme_modal-input-fg;
color: @cryptpad_text_col;
border: 1px solid @colortheme_modal-input;
}
} }
.cp-modal-close { .cp-modal-close {

@ -0,0 +1,18 @@
@import (reference) "./colortheme-all.less";
.modals-ui-elements_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
// Share modal
.msg.cp-inline-radio-group {
.radio-group {
display: flex;
flex-direction: row;
.cp-radio {
margin-right: 30px;
}
}
}
}

@ -24,7 +24,7 @@
min-width: 0; min-width: 0;
margin-bottom: 0 !important; margin-bottom: 0 !important;
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: @colortheme_alertify-primary-text; color: @cryptpad_color_grey;
opacity: 1; /* Firefox */ opacity: 1; /* Firefox */
} }
} }

@ -146,7 +146,7 @@ define([
type: 'text', type: 'text',
'class': 'cp-text-input', 'class': 'cp-text-input',
}, opt); }, opt);
return h('input', attrs); return h('p.msg', h('input', attrs));
}; };
dialog.nav = function (content) { dialog.nav = function (content) {
@ -191,6 +191,10 @@ define([
if (!tab.content || !tab.title) { return; } if (!tab.content || !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.title);
if (tab.icon) {
var icon = h('i', {class: tab.icon});
$(title).prepend(' ').prepend(icon);
}
$(title).click(function () { $(title).click(function () {
titles.forEach(function (t) { $(t).removeClass('alertify-tabs-active'); }); titles.forEach(function (t) { $(t).removeClass('alertify-tabs-active'); });
contents.forEach(function (c) { $(c).removeClass('alertify-tabs-content-active'); }); contents.forEach(function (c) { $(c).removeClass('alertify-tabs-content-active'); });
@ -344,7 +348,8 @@ define([
if (!b.name || !b.onClick) { return; } if (!b.name || !b.onClick) { return; }
var button = h('button', { tabindex: '1', 'class': b.className || '' }, b.name); var button = h('button', { tabindex: '1', 'class': b.className || '' }, b.name);
$(button).click(function () { $(button).click(function () {
b.onClick(); var noClose = b.onClick();
if (noClose) { return; }
var $modal = $(button).parents('.alertify').first(); var $modal = $(button).parents('.alertify').first();
if ($modal.length && $modal[0].closeModal) { if ($modal.length && $modal[0].closeModal) {
$modal[0].closeModal(function () { $modal[0].closeModal(function () {

@ -864,7 +864,7 @@ define([
}; };
var createShareWithFriends = function (config, onShare) { var createShareWithFriends = function (config, onShare, linkGetter) {
var common = config.common; var common = config.common;
var sframeChan = common.getSframeChannel(); var sframeChan = common.getSframeChannel();
var title = config.title; var title = config.title;
@ -877,7 +877,7 @@ define([
return friends[c].curvePublic.slice(0,8); return friends[c].curvePublic.slice(0,8);
}); });
var div = h('div.cp-share-column.contains-nav'); var div = h('div.contains-nav');
var $div = $(div); var $div = $(div);
// Replace "copy link" by "share with friends" if at least one friend is selected // Replace "copy link" by "share with friends" if at least one friend is selected
// Also create the "share with friends" button if it doesn't exist // Also create the "share with friends" button if it doesn't exist
@ -899,7 +899,7 @@ define([
delete friends[curve]; delete friends[curve];
}); });
var friendsList = UIElements.getUserGrid(Messages.share_linkFriends, { var friendsList = UIElements.getUserGrid(null, {
common: common, common: common,
data: friends, data: friends,
noFilter: false noFilter: false
@ -932,11 +932,11 @@ define([
}, refreshButtons); }, refreshButtons);
$div.append(teamsList.div); $div.append(teamsList.div);
var shareButtons = [{ var shareButton = {
className: 'primary cp-share-with-friends', className: 'primary cp-share-with-friends',
name: Messages.share_withFriends, name: Messages.share_withFriends,
onClick: function () { onClick: function () {
var href = Hash.getRelativeHref($('#cp-share-link-preview').val()); var href = Hash.getRelativeHref(linkGetter());
var $friends = $div.find('.cp-usergrid-user.cp-selected'); var $friends = $div.find('.cp-usergrid-user.cp-selected');
$friends.each(function (i, el) { $friends.each(function (i, el) {
var curve = $(el).attr('data-curve'); var curve = $(el).attr('data-curve');
@ -992,7 +992,7 @@ define([
} }
}, },
keys: [13] keys: [13]
}]; };
common.getAttribute(['general', 'share-friends'], function (err, val) { common.getAttribute(['general', 'share-friends'], function (err, val) {
order = val || []; order = val || [];
@ -1017,10 +1017,12 @@ define([
// Display them // Display them
$(friendDiv).find('.cp-usergrid-grid').detach(); $(friendDiv).find('.cp-usergrid-grid').detach();
$(friendDiv).append(h('div.cp-usergrid-grid', others)); $(friendDiv).append(h('div.cp-usergrid-grid', others));
$div.append(UI.dialog.getButtons(shareButtons, config.onClose));
refreshButtons(); refreshButtons();
}); });
return div; return {
content: div,
button: shareButton
};
}; };
UIElements.createShareModal = function (config) { UIElements.createShareModal = function (config) {
@ -1031,107 +1033,106 @@ define([
if (!hashes || (!hashes.editHash && !hashes.viewHash)) { return; } if (!hashes || (!hashes.editHash && !hashes.viewHash)) { return; }
// Share link tab var parsed = Hash.parsePadUrl(pathname);
var hasFriends = Object.keys(config.friends || {}).length !== 0; var canPresent = ['code', 'slide'].indexOf(parsed.type) !== -1;
var onFriendShare = Util.mkEvent();
var friendsList = hasFriends ? createShareWithFriends(config, onFriendShare) : undefined;
var friendsUIClass = hasFriends ? '.cp-share-columns' : '';
var content = []; var rights = h('div.msg.cp-inline-radio-group', [
var sfContent = [
h('label', Messages.sharedFolders_share),
h('br'),
];
var shareContent = [
h('label', Messages.share_linkAccess), h('label', Messages.share_linkAccess),
h('br'), h('br'),
UI.createRadio('cp-share-editable', 'cp-share-editable-true', h('div.radio-group',[
Messages.share_linkEdit, true, { mark: {tabindex:1} }), UI.createRadio('accessRights', 'cp-share-editable-false',
UI.createRadio('cp-share-editable', 'cp-share-editable-false', Messages.share_linkView, true, { mark: {tabindex:1} }),
Messages.share_linkView, false, { mark: {tabindex:1} }), canPresent ? UI.createRadio('accessRights', 'cp-share-present',
h('br'), Messages.share_linkPresent, false, { mark: {tabindex:1} }) : undefined,
]; UI.createRadio('accessRights', 'cp-share-editable-true',
var padContent = [ Messages.share_linkEdit, false, { mark: {tabindex:1} })])
h('label', Messages.share_linkOptions), ]);
h('br'),
UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }), var $rights = $(rights);
UI.createCheckbox('cp-share-present', Messages.share_linkPresent, false, { mark: {tabindex:1} }),
h('br'),
];
if (config.sharedFolder) { Array.prototype.push.apply(content, sfContent); }
Array.prototype.push.apply(content, shareContent);
if (!config.sharedFolder) { Array.prototype.push.apply(content, padContent); }
content.push(UI.dialog.selectable('', { id: 'cp-share-link-preview', tabindex: 1 }));
var mainShareColumn = h('div.cp-share-column.contains-nav', content);
var link = h('div.cp-share-modal' + friendsUIClass);
var saveValue = function () { var saveValue = function () {
var edit = Util.isChecked($(link).find('#cp-share-editable-true')); var edit = Util.isChecked($rights.find('#cp-share-editable-true'));
var embed = Util.isChecked($(link).find('#cp-share-embed')); var present = Util.isChecked($rights.find('#cp-share-present'));
var present = Util.isChecked($(link).find('#cp-share-present'));
common.setAttribute(['general', 'share'], { common.setAttribute(['general', 'share'], {
edit: edit, edit: edit,
embed: embed,
present: present present: present
}); });
}; };
onFriendShare.reg(saveValue);
var getLinkValue = function (initValue) { var getLinkValue = function (initValue) {
var val = initValue || {}; var val = initValue || {};
var edit = val.edit !== undefined ? val.edit : Util.isChecked($(link).find('#cp-share-editable-true')); var edit = val.edit !== undefined ? val.edit : Util.isChecked($rights.find('#cp-share-editable-true'));
var embed = val.embed !== undefined ? val.embed : Util.isChecked($(link).find('#cp-share-embed')); var embed = val.embed;
var present = val.present !== undefined ? val.present : Util.isChecked($(link).find('#cp-share-present')); var present = val.present !== undefined ? val.present : Util.isChecked($rights.find('#cp-share-present'));
var hash = (!hashes.viewHash || (edit && hashes.editHash)) ? hashes.editHash : hashes.viewHash; var hash = (!hashes.viewHash || (edit && hashes.editHash)) ? hashes.editHash : hashes.viewHash;
var href = origin + pathname + '#' + hash; var href = origin + pathname + '#' + hash;
var parsed = Hash.parsePadUrl(href); var parsed = Hash.parsePadUrl(href);
return origin + parsed.getUrl({embed: embed, present: present}); return origin + parsed.getUrl({embed: embed, present: present});
}; };
var linkButtons = [{
var makeCancelButton = function() {
return {
className: 'cancel', className: 'cancel',
name: Messages.cancel, name: Messages.cancel,
onClick: function () {}, onClick: function () {},
keys: [27] keys: [27]
}]; };
var shareButtons = [{ };
// Share link tab
var linkContent = config.sharedFolder ? [
h('label', Messages.sharedFolders_share),
h('br'),
] : [
UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }),
h('br'),
];
linkContent.push(UI.dialog.selectable('', { id: 'cp-share-link-preview', tabindex: 1 }));
var link = h('div.cp-share-modal', linkContent);
var $link = $(link);
var linkButtons = [
makeCancelButton(),
!config.sharedFolder && {
className: 'secondary', // XXX style this diferently than cancel
name: Messages.share_linkOpen,
onClick: function () {
saveValue();
var v = getLinkValue({
embed: Util.isChecked($link.find('#cp-share-embed'))
});
window.open(v);
return true;
},
keys: [[13, 'ctrl']]
},
{
className: 'primary', className: 'primary',
name: Messages.share_linkCopy, name: Messages.share_linkCopy,
onClick: function () { onClick: function () {
saveValue(); saveValue();
var v = getLinkValue(); var v = getLinkValue({
embed: Util.isChecked($link.find('#cp-share-embed'))
});
var success = Clipboard.copy(v); var success = Clipboard.copy(v);
if (success) { UI.log(Messages.shareSuccess); } if (success) { UI.log(Messages.shareSuccess); }
}, },
keys: [13] keys: [13]
}];
if (!config.sharedFolder) {
shareButtons.push({
className: 'primary',
name: Messages.share_linkOpen,
onClick: function () {
saveValue();
var v = getLinkValue();
window.open(v);
},
keys: [[13, 'ctrl']]
});
}
var $link = $(link);
$(mainShareColumn).append(UI.dialog.getButtons(shareButtons, config.onClose)).appendTo($link);
$(friendsList).appendTo($link);
if (!hashes.editHash) {
$(link).find('#cp-share-editable-false').attr('checked', true);
$(link).find('#cp-share-editable-true').removeAttr('checked').attr('disabled', true);
} else if (!hashes.viewHash) {
$(link).find('#cp-share-editable-false').removeAttr('checked').attr('disabled', true);
$(link).find('#cp-share-editable-true').attr('checked', true);
} }
];
$(link).find('#cp-share-link-preview').val(getLinkValue()); // update values for link preview when radio btns change
$(link).find('input[type="radio"], input[type="checkbox"]').on('change', function () { $link.find('#cp-share-link-preview').val(getLinkValue());
$(link).find('#cp-share-link-preview').val(getLinkValue()); $rights.find('input[type="radio"]').on('change', function () {
$link.find('#cp-share-link-preview').val(getLinkValue({
embed: Util.isChecked($link.find('#cp-share-embed'))
}));
});
$link.find('input[type="checkbox"]').on('change', function () {
$link.find('#cp-share-link-preview').val(getLinkValue({
embed: Util.isChecked($link.find('#cp-share-embed'))
}));
}); });
var frameLink = UI.dialog.customModal(link, { var frameLink = UI.dialog.customModal(link, {
@ -1139,26 +1140,44 @@ define([
onClose: config.onClose, onClose: config.onClose,
}); });
// Share with contacts tab
var hasFriends = Object.keys(config.friends || {}).length !== 0;
var onFriendShare = Util.mkEvent();
var friendsObject = hasFriends ? createShareWithFriends(config, onFriendShare, getLinkValue) : {
content: h('p', Messages.team_noFriend),
button: {}
};
var friendsList = friendsObject.content;
onFriendShare.reg(saveValue);
// XXX Don't display access rights if no contacts
var contactsContent = h('div.cp-share-modal');
$(contactsContent).append(friendsList);
var contactButtons = [makeCancelButton(),
friendsObject.button];
var frameContacts = UI.dialog.customModal(contactsContent, {
buttons: contactButtons,
onClose: config.onClose,
});
// Embed tab // Embed tab
var getEmbedValue = function () { var getEmbedValue = function () {
var hash = hashes.viewHash || hashes.editHash; var url = getLinkValue({
var href = origin + pathname + '#' + hash; embed: true
var parsed = Hash.parsePadUrl(href); });
var url = origin + parsed.getUrl({embed: true, present: true});
return '<iframe src="' + url + '"></iframe>'; return '<iframe src="' + url + '"></iframe>';
}; };
var embed = h('div.cp-share-modal', [ var embedContent = [
h('h3', Messages.viewEmbedTitle),
h('p', Messages.viewEmbedTag), h('p', Messages.viewEmbedTag),
h('br'), h('br'),
UI.dialog.selectable(getEmbedValue()) UI.dialog.selectable(getEmbedValue(), { id: 'cp-embed-link-preview', tabindex: 1 })
]); ];
var embedButtons = [{ var embedButtons = [
className: 'cancel', makeCancelButton(), {
name: Messages.cancel,
onClick: function () {},
keys: [27]
}, {
className: 'primary', className: 'primary',
name: Messages.share_linkCopy, name: Messages.share_linkCopy,
onClick: function () { onClick: function () {
@ -1168,6 +1187,15 @@ define([
}, },
keys: [13] keys: [13]
}]; }];
var embed = h('div.cp-share-modal', embedContent);
// update values for link preview when radio btns change
$(embed).find('#cp-embed-link-preview').val(getEmbedValue());
$rights.find('input[type="radio"]').on('change', function () {
$(embed).find('#cp-embed-link-preview').val(getEmbedValue());
});
var frameEmbed = UI.dialog.customModal(embed, { var frameEmbed = UI.dialog.customModal(embed, {
buttons: embedButtons, buttons: embedButtons,
onClose: config.onClose, onClose: config.onClose,
@ -1176,9 +1204,15 @@ define([
// Create modal // Create modal
var tabs = [{ var tabs = [{
title: Messages.share_linkCategory, title: Messages.share_linkCategory,
icon: "fa fa-link",
content: frameLink content: frameLink
}, {
title: Messages.share_contactCategory,
icon: "fa fa-address-book",
content: frameContacts
}, { }, {
title: Messages.share_embedCategory, title: Messages.share_embedCategory,
icon: "fa fa-code",
content: frameEmbed content: frameEmbed
}]; }];
if (typeof(AppConfig.customizeShareOptions) === 'function') { if (typeof(AppConfig.customizeShareOptions) === 'function') {
@ -1188,32 +1222,52 @@ define([
pathname: pathname pathname: pathname
}); });
} }
var modal = UI.dialog.tabs(tabs);
$(modal).find('.alertify-tabs-titles').after(rights);
// XXX
// disable edit share options if you don't have edit rights
if (!hashes.editHash) {
$rights.find('#cp-share-editable-false').attr('checked', true);
$rights.find('#cp-share-editable-true').removeAttr('checked').attr('disabled', true);
} else if (!hashes.viewHash) {
$rights.find('#cp-share-editable-false').removeAttr('checked').attr('disabled', true);
$rights.find('#cp-share-present').removeAttr('checked').attr('disabled', true);
$rights.find('#cp-share-editable-true').attr('checked', true);
}
common.getAttribute(['general', 'share'], function (err, val) { common.getAttribute(['general', 'share'], function (err, val) {
val = val || {}; val = val || {};
if ((val.edit === false && hashes.viewHash) || !hashes.editHash) { if (val.present && canPresent) {
$(link).find('#cp-share-editable-false').prop('checked', true); $rights.find('#cp-share-editable-false').prop('checked', false);
$(link).find('#cp-share-editable-true').prop('checked', false); $rights.find('#cp-share-editable-true').prop('checked', false);
$rights.find('#cp-share-present').prop('checked', true);
} else if ((val.edit === false && hashes.viewHash) || !hashes.editHash) {
$rights.find('#cp-share-editable-false').prop('checked', true);
$rights.find('#cp-share-editable-true').prop('checked', false);
$rights.find('#cp-share-present').prop('checked', false);
} else { } else {
$(link).find('#cp-share-editable-true').prop('checked', true); $rights.find('#cp-share-editable-true').prop('checked', true);
$(link).find('#cp-share-editable-false').prop('checked', false); $rights.find('#cp-share-editable-false').prop('checked', false);
$rights.find('#cp-share-present').prop('checked', false);
} }
if (val.embed) { $(link).find('#cp-share-embed').prop('checked', true); }
if (val.present) { $(link).find('#cp-share-present').prop('checked', true); }
if (config.sharedFolder) {
delete val.embed; delete val.embed;
if (!canPresent) {
delete val.present; delete val.present;
} }
$(link).find('#cp-share-link-preview').val(getLinkValue(val)); $link.find('#cp-share-link-preview').val(getLinkValue(val));
}); });
common.getMetadataMgr().onChange(function () { common.getMetadataMgr().onChange(function () {
// "hashes" is only available is the secure "share" app // "hashes" is only available is the secure "share" app
var _hashes = common.getMetadataMgr().getPrivateData().hashes; var _hashes = common.getMetadataMgr().getPrivateData().hashes;
if (!_hashes) { return; } if (!_hashes) { return; }
hashes = _hashes; hashes = _hashes;
$(link).find('#cp-share-link-preview').val(getLinkValue()); $link.find('#cp-share-link-preview').val(getLinkValue());
}); });
return tabs; return modal;
}; };
UIElements.createFileShareModal = function (config) { UIElements.createFileShareModal = function (config) {
var origin = config.origin; var origin = config.origin;
var pathname = config.pathname; var pathname = config.pathname;
@ -1224,49 +1278,65 @@ define([
if (!hashes.fileHash) { throw new Error("You must provide a file hash"); } if (!hashes.fileHash) { throw new Error("You must provide a file hash"); }
var url = origin + pathname + '#' + hashes.fileHash; var url = origin + pathname + '#' + hashes.fileHash;
// Share link tab
var hasFriends = Object.keys(config.friends || {}).length !== 0;
var friendsList = hasFriends ? createShareWithFriends(config) : undefined;
var friendsUIClass = hasFriends ? '.cp-share-columns' : '';
var mainShareColumn = h('div.cp-share-column.contains-nav', [
h('div.cp-share-column', [
hasFriends ? h('p', Messages.share_description) : undefined,
UI.dialog.selectable('', { id: 'cp-share-link-preview' }),
]),
]);
var link = h('div.cp-share-modal' + friendsUIClass);
var getLinkValue = function () { return url; }; var getLinkValue = function () { return url; };
$(mainShareColumn).find('#cp-share-link-preview').val(getLinkValue());
var linkButtons = [{ var makeCancelButton = function() {
className: 'cancel', return {className: 'cancel',
name: Messages.cancel, name: Messages.cancel,
onClick: function () {}, onClick: function () {},
keys: [27] keys: [27]};
}]; };
var shareButtons = [{
// Share link tab
var linkContent = [
UI.dialog.selectable(getLinkValue(), { id: 'cp-share-link-preview', tabindex: 1 })
];
var link = h('div.cp-share-modal', linkContent);
var linkButtons = [
makeCancelButton(),
{
className: 'primary', className: 'primary',
name: Messages.share_linkCopy, name: Messages.share_linkCopy,
onClick: function () { onClick: function () {
var v = getLinkValue(); var v = getLinkValue();
var success = Clipboard.copy(v); var success = Clipboard.copy(v);
if (success) { UI.log(Messages.shareSuccess); } if (success) { UI.log(Messages.shareSuccess);
}
}, },
keys: [13] keys: [13]
}]; }
];
var $link = $(link);
$(mainShareColumn).append(UI.dialog.getButtons(shareButtons, config.onClose)).appendTo($link);
$(friendsList).appendTo($link);
var frameLink = UI.dialog.customModal(link, { var frameLink = UI.dialog.customModal(link, {
buttons: linkButtons, buttons: linkButtons,
onClose: config.onClose, onClose: config.onClose,
}); });
// share with contacts tab
var hasFriends = Object.keys(config.friends || {}).length !== 0;
var friendsObject = hasFriends ? createShareWithFriends(config, null, getLinkValue) : {
content: h('p', Messages.share_noContacts),
button: {}
};
var friendsList = friendsObject.content;
var contactsContent = h('div.cp-share-modal');
$(contactsContent).append(friendsList);
var contactButtons = [makeCancelButton(),
friendsObject.button];
var frameContacts = UI.dialog.customModal(contactsContent, {
buttons: contactButtons,
onClose: config.onClose,
});
// Embed tab // Embed tab
var embed = h('div.cp-share-modal', [ var embed = h('div.cp-share-modal', [
h('h3', Messages.fileEmbedTitle),
h('p', Messages.fileEmbedScript), h('p', Messages.fileEmbedScript),
h('br'), h('br'),
UI.dialog.selectable(common.getMediatagScript()), UI.dialog.selectable(common.getMediatagScript()),
@ -1297,9 +1367,15 @@ define([
// Create modal // Create modal
var tabs = [{ var tabs = [{
title: Messages.share_linkCategory, title: Messages.share_linkCategory,
icon: "fa fa-link",
content: frameLink content: frameLink
}, {
title: Messages.share_contactCategory,
icon: "fa fa-address-book",
content: frameContacts
}, { }, {
title: Messages.share_embedCategory, title: Messages.share_embedCategory,
icon: "fa fa-code",
content: frameEmbed content: frameEmbed
}]; }];
if (typeof(AppConfig.customizeShareOptions) === 'function') { if (typeof(AppConfig.customizeShareOptions) === 'function') {
@ -1309,9 +1385,11 @@ define([
pathname: pathname pathname: pathname
}); });
} }
return tabs; var modal = UI.dialog.tabs(tabs);
return modal;
}; };
UIElements.createInviteTeamModal = function (config) { UIElements.createInviteTeamModal = function (config) {
var common = config.common; var common = config.common;
var hasFriends = Object.keys(config.friends || {}).length !== 0; var hasFriends = Object.keys(config.friends || {}).length !== 0;

@ -2559,8 +2559,6 @@ define([
var roParsed = Hash.parsePadUrl(data.roHref) || {}; var roParsed = Hash.parsePadUrl(data.roHref) || {};
if (!parsed.hash && !roParsed.hash) { return void console.error("Invalid href: "+(data.href || data.roHref)); } if (!parsed.hash && !roParsed.hash) { return void console.error("Invalid href: "+(data.href || data.roHref)); }
var friends = common.getFriends(); var friends = common.getFriends();
var teams = common.getMetadataMgr().getPrivateData().teams;
var _wide = Object.keys(friends).length || Object.keys(teams).length;
var ro = folders[id] && folders[id].version >= 2; var ro = folders[id] && folders[id].version >= 2;
var modal = UIElements.createShareModal({ var modal = UIElements.createShareModal({
teamId: APP.team, teamId: APP.team,
@ -2580,11 +2578,8 @@ define([
// can't share the read-only URL and we don't have access to the edit one. // can't share the read-only URL and we don't have access to the edit one.
// We should hide the share button. // We should hide the share button.
if (!modal) { return; } if (!modal) { return; }
modal = UI.dialog.tabs(modal);
$shareBlock.click(function () { $shareBlock.click(function () {
UI.openCustomModal(modal, { UI.openCustomModal(modal);
wide: _wide
});
}); });
$container.append($shareBlock); $container.append($shareBlock);
}; };
@ -4053,8 +4048,6 @@ define([
el = manager.find(paths[0].path); el = manager.find(paths[0].path);
var parsed, modal; var parsed, modal;
var friends = common.getFriends(); var friends = common.getFriends();
var teams = common.getMetadataMgr().getPrivateData().teams;
var _wide = Object.keys(friends).length || Object.keys(teams).length;
if (manager.isFolder(el) && !manager.isSharedFolder(el)) { // Folder if (manager.isFolder(el) && !manager.isSharedFolder(el)) { // Folder
// if folder is inside SF // if folder is inside SF
@ -4119,10 +4112,7 @@ define([
}; };
modal = padType === 'file' ? UIElements.createFileShareModal(padData) modal = padType === 'file' ? UIElements.createFileShareModal(padData)
: UIElements.createShareModal(padData); : UIElements.createShareModal(padData);
modal = UI.dialog.tabs(modal); UI.openCustomModal(modal);
UI.openCustomModal(modal, {
wide: _wide
});
} }
} }
else if ($this.hasClass('cp-app-drive-context-savelocal')) { else if ($this.hasClass('cp-app-drive-context-savelocal')) {

@ -173,7 +173,6 @@
"viewOpenTitle": "Open this pad in read-only mode in a new tab", "viewOpenTitle": "Open this pad in read-only mode in a new tab",
"fileShare": "Copy link", "fileShare": "Copy link",
"getEmbedCode": "Get embed code", "getEmbedCode": "Get embed code",
"viewEmbedTitle": "Embed the pad in an external page",
"viewEmbedTag": "To embed this pad, include this iframe in your page wherever you want. You can style it using CSS or HTML attributes.", "viewEmbedTag": "To embed this pad, include this iframe in your page wherever you want. You can style it using CSS or HTML attributes.",
"fileEmbedTitle": "Embed the file in an external page", "fileEmbedTitle": "Embed the file in an external page",
"fileEmbedScript": "To embed this file, include this script once in your page to load the Media Tag:", "fileEmbedScript": "To embed this file, include this script once in your page to load the Media Tag:",
@ -980,15 +979,15 @@
"properties_passwordWarning": "The password was successfully changed but we were unable to update your CryptDrive with the new data. You may have to remove the old version of the pad manually.<br>Press OK to reload and update your access rights.", "properties_passwordWarning": "The password was successfully changed but we were unable to update your CryptDrive with the new data. You may have to remove the old version of the pad manually.<br>Press OK to reload and update your access rights.",
"properties_passwordSuccess": "The password was successfully changed.<br>Press OK to reload and update your access rights.", "properties_passwordSuccess": "The password was successfully changed.<br>Press OK to reload and update your access rights.",
"properties_changePasswordButton": "Submit", "properties_changePasswordButton": "Submit",
"share_linkCategory": "Share link", "share_linkCategory": "Link",
"share_linkAccess": "Access rights", "share_linkAccess": "Access rights",
"share_linkEdit": "Edit", "share_linkEdit": "Edit",
"share_linkView": "View", "share_linkView": "View",
"share_linkOptions": "Link options", "share_linkEmbed": "Embed mode (hide toolbar and user list)",
"share_linkEmbed": "Embed mode (toolbar and userlist hidden)", "share_linkPresent": "Present",
"share_linkPresent": "Present mode (editable sections hidden)", "share_linkOpen": "Preview",
"share_linkOpen": "Open in new tab", "share_linkCopy": "Copy",
"share_linkCopy": "Copy to clipboard", "share_contactCategory": "Contacts",
"share_embedCategory": "Embed", "share_embedCategory": "Embed",
"share_mediatagCopy": "Copy mediatag to clipboard", "share_mediatagCopy": "Copy mediatag to clipboard",
"loading_pad_1": "Initializing pad", "loading_pad_1": "Initializing pad",
@ -1002,7 +1001,7 @@
"sharedFolders_create_name": "Folder name", "sharedFolders_create_name": "Folder name",
"sharedFolders_create_owned": "Owned folder", "sharedFolders_create_owned": "Owned folder",
"sharedFolders_create_password": "Folder password", "sharedFolders_create_password": "Folder password",
"sharedFolders_share": "Share this URL with other registered users to give them access to the shared folder. Once they open this URL, the shared folder will be added to the root directory of their CryptDrive.", "sharedFolders_share": "Share this link with other registered users to give them access to the shared folder. Once they open this link, the shared folder will be added to their CryptDrive.",
"convertFolderToSF_SFParent": "This folder cannot be converted to a shared folder in its current location. Move it outside of the containing shared folder to continue.", "convertFolderToSF_SFParent": "This folder cannot be converted to a shared folder in its current location. Move it outside of the containing shared folder to continue.",
"convertFolderToSF_SFChildren": "This folder cannot be converted to a shared folder because it already contains shared folders. Move those Shared folders elsewhere to continue.", "convertFolderToSF_SFChildren": "This folder cannot be converted to a shared folder because it already contains shared folders. Move those Shared folders elsewhere to continue.",
"convertFolderToSF_confirm": "This folder must be converted to a Shared folder for others to view it. Continue?", "convertFolderToSF_confirm": "This folder must be converted to a Shared folder for others to view it. Continue?",

@ -4,10 +4,12 @@
@import (reference) '../../customize/src/less2/include/checkmark.less'; @import (reference) '../../customize/src/less2/include/checkmark.less';
@import (reference) '../../customize/src/less2/include/password-input.less'; @import (reference) '../../customize/src/less2/include/password-input.less';
@import (reference) '../../customize/src/less2/include/usergrid.less'; @import (reference) '../../customize/src/less2/include/usergrid.less';
@import (reference) '../../customize/src/less2/include/modals-ui-elements.less';
&.cp-app-share { &.cp-app-share {
.tippy_main(); .tippy_main();
.alertify_main(); .alertify_main();
.modals-ui-elements_main();
.checkmark_main(20px); .checkmark_main(20px);
.password_main(); .password_main();
.modal_main(); .modal_main();

@ -38,8 +38,6 @@ define([
: UIElements.createShareModal; : UIElements.createShareModal;
var friends = common.getFriends(); var friends = common.getFriends();
var teams = priv.teams;
var _wide = Object.keys(friends).length || Object.keys(teams).length;
var modal = f({ var modal = f({
origin: origin, origin: origin,
@ -59,9 +57,7 @@ define([
} }
}); });
$('button.cancel').click(); // Close any existing alertify $('button.cancel').click(); // Close any existing alertify
UI.openCustomModal(UI.dialog.tabs(modal), { UI.openCustomModal(modal);
wide: _wide
});
}; };
sframeChan.on('EV_SHARE_REFRESH', function (data) { sframeChan.on('EV_SHARE_REFRESH', function (data) {
createShareDialog(data); createShareDialog(data);

Loading…
Cancel
Save