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

Add an advanced new pad modal

pull/1/head
yflory 2018-01-12 09:48:40 +01:00
parent e377d606be
commit daef08a9b3
11 changed files with 195 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
customize.dist/src/less2/include/icons.less Normal file
View File

@ -0,0 +1,40 @@
.icons_main() {
li {
display: inline-block;
margin: 10px 10px;
width: 140px;
height: 140px;
text-align: center;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid white;
.cp-icons-name {
width: 100%;
height: 24px;
margin: 0;
display: inline-block;
font-size: 14px;
//align-items: center;
//justify-content: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: break-word;
}
.fa {
display: block;
margin: auto;
font-size: 64px;
margin: 18px 0;
text-align: center;
&.listonly {
display: none;
}
}
}
}

64
customize.dist/src/less2/include/toolbar.less
View File

@ -6,6 +6,8 @@
@import (once) "./toolbar-history.less";
@import (once) "./icon-colors.less";
@import (once) "./tools.less";
@import (once) "./icons.less";
@import (once) "./modal.less";
.toolbar_main (
@color: @colortheme_default-color, // Color of the text for the toolbar
@ -173,6 +175,68 @@
}
}
#cp-app-toolbar-creation-dialog.cp-modal-container {
.icons_main();
li:hover {
border: 1px solid white;
}
.cp-modal {
display: flex;
flex-flow: column;
li, li .fa {
cursor: pointer;
}
&> p {
margin: 50px;
}
&> div {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
overflow-y: auto;
}
}
.cp-creation-icons-name {
white-space: nowrap;
}
#cp-app-toolbar-creation-advanced {
width: auto;
margin: 0;
padding: 0;
}
label[for="cp-app-toolbar-creation-advanced"] {
margin: 0;
margin-left: 5px;
}
@media screen and (max-height: @browser_media-not-big) {
.cp-modal {
& > p {
display: none;
}
& > div {
align-content: unset;
li {
height: 40px;
width: 200px;
display: flex;
align-items: center;
.fa {
font-size: 32px;
}
.cp-icons-name {
height: auto;
}
}
}
}
}
}
// TODO(cjd) This ought to be in a less file for markdown-based editors
.cp-markdown-toolbar {
height: @toolbar_line-height;

3
customize.dist/translations/messages.fr.js
View File

@ -806,6 +806,9 @@ define(function () {
out.creation_noOwner = "Pad de propriétaire";
out.creation_expiration = "Date d'expiration";
out.creation_propertiesTitle = "Disponibilité";
out.creation_appMenuName = "Mode avancé (Ctrl + E)";
out.creation_newPadModalDescription = "Cliquez sur un type de pad pour le créer. Vous pouvez cocher la case pour afficher l'écran de création de pads";
out.creation_newPadModalAdvanced = "Afficher l'écran de création de pads";
return out;
});

3
customize.dist/translations/messages.js
View File

@ -839,6 +839,9 @@ define(function () {
out.creation_noOwner = "No owner";
out.creation_expiration = "Expiration time";
out.creation_propertiesTitle = "Availability";
out.creation_appMenuName = "Advanced mode (Ctrl + E)";
out.creation_newPadModalDescription = "Click on a pad type to create it. You can check the box if you want to display the pad creation screen (for owned pad, expiration pad, etc.).";
out.creation_newPadModalAdvanced = "Display the pad creation screen";
return out;
});

1
www/common/common-constants.js
View File

@ -11,5 +11,6 @@ define(function () {
oldStorageKey: 'CryptPad_RECENTPADS',
storageKey: 'filesData',
tokenKey: 'loginToken',
displayPadCreationScreen: 'displayPadCreationScreen'
};
});

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

@ -5,6 +5,7 @@ define([
'/common/common-hash.js',
'/common/common-language.js',
'/common/common-interface.js',
'/common/common-constants.js',
'/common/common-feedback.js',
'/common/hyperscript.js',
'/common/media-tag.js',
@ -13,8 +14,8 @@ define([
'/bower_components/nthen/index.js',
'css!/common/tippy.css',
], function ($, Config, Util, Hash, Language, UI, Feedback, h, MediaTag, Messages, AppConfig,
NThen) {
], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Messages,
AppConfig, NThen) {
var UIElements = {};
// Configure MediaTags to use our local viewer
@ -1262,6 +1263,64 @@ define([
return $blockContainer;
};
UIElements.createNewPadModal = function (common) {
var $modal = UIElements.createModal({
id: 'cp-app-toolbar-creation-dialog',
$body: $('body')
});
var $title = $('<h3>').text(Messages.fm_newFile);
var $description = $('<p>').text(Messages.creation_newPadModalDescription);
$modal.find('.cp-modal').append($title);
$modal.find('.cp-modal').append($description);
var $advanced;
var $advancedContainer = $('<div>');
if (common.isLoggedIn()) {
$advanced = $('<input>', {
type: 'checkbox',
checked: 'checked',
id: 'cp-app-toolbar-creation-advanced'
}).appendTo($advancedContainer);
$('<label>', {
for: 'cp-app-toolbar-creation-advanced'
}).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer);
}
var $container = $('<div>');
AppConfig.availablePadTypes.forEach(function (p) {
if (p === 'drive') { return; }
if (p === 'contacts') { return; }
if (p === 'todo') { return; }
if (p === 'file') { return; }
if (!common.isLoggedIn() && AppConfig.registeredOnlyTypes &&
AppConfig.registeredOnlyTypes.indexOf(p) !== -1) { return; }
var $element = $('<li>', {
'class': 'cp-icons-element'
}).prepend(UI.getIcon(p)).appendTo($container);
$element.append($('<span>', {'class': 'cp-icons-name'})
.text(Messages.type[p]));
$element.attr('data-type', p);
$element.click(function () {
$modal.hide();
if ($advanced && $advanced.is(':checked')) {
common.sessionStorage.put(Constants.displayPadCreationScreen, true, function () {
common.openURL('/' + p + '/');
});
return;
}
common.sessionStorage.put(Constants.displayPadCreationScreen, "", function () {
common.openURL('/' + p + '/');
});
});
});
/*var $content = createNewPadIcons($modal, isInRoot);*/
$modal.find('.cp-modal').append($container).append($advancedContainer);
window.setTimeout(function () { $modal.show(); });
//addNewPadHandlers($modal, isInRoot);
};
UIElements.initFilePicker = function (common, cfg) {
var onSelect = cfg.onSelect || $.noop;

2
www/common/sframe-app-framework.js
View File

@ -407,7 +407,7 @@ define([
var priv = common.getMetadataMgr().getPrivateData();
if (priv.isNewFile) {
var c = (priv.settings.general && priv.settings.general.creation) || {};
if (c.skip) { return void common.createPad(c, waitFor()); }
if (c.skip && !priv.forceCreationScreen) { return void common.createPad(c, waitFor()); }
common.getPadCreationScreen(c, waitFor());
}
}).nThen(function (waitFor) {

6
www/common/sframe-common-outer.js
View File

@ -148,6 +148,9 @@ define([
if (!parsed.type) { throw new Error(); }
var defaultTitle = Utils.Hash.getDefaultName(parsed);
var edPublic;
var forceCreationScreen = cfg.useCreationScreen &&
sessionStorage[Utils.Constants.displayPadCreationScreen];
delete sessionStorage[Utils.Constants.displayPadCreationScreen];
var updateMeta = function () {
//console.log('EV_METADATA_UPDATE');
var metaObj, isTemplate;
@ -182,7 +185,8 @@ define([
upgradeURL: Cryptpad.upgradeURL
},
isNewFile: isNewFile,
isDeleted: window.location.hash.length > 0
isDeleted: window.location.hash.length > 0,
forceCreationScreen: forceCreationScreen
};
for (var k in additionalPriv) { metaObj.priv[k] = additionalPriv[k]; }

1
www/common/sframe-common.js
View File

@ -91,6 +91,7 @@ define([
funcs.createLanguageSelector = callWithCommon(UIElements.createLanguageSelector);
funcs.createMarkdownToolbar = callWithCommon(UIElements.createMarkdownToolbar);
funcs.getPadCreationScreen = callWithCommon(UIElements.getPadCreationScreen);
funcs.createNewPadModal = callWithCommon(UIElements.createNewPadModal);
// Thumb
funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail);

12
www/common/toolbar3.js
View File

@ -933,6 +933,14 @@ define([
content: $('<div>').append(UI.getIcon(p)).html() + Messages.type[p]
});
});
pads_options.push({
tag: 'a',
attributes: {
id: 'cp-app-toolbar-creation-advanced',
href: origin
},
content: '<span class="fa fa-plus-circle"></span> ' + Messages.creation_appMenuName
});
var dropdownConfig = {
text: '', // Button initial text
options: pads_options, // Entries displayed in the menu
@ -945,6 +953,10 @@ define([
var $newPadBlock = UIElements.createDropdown(dropdownConfig);
$newPadBlock.find('button').attr('title', Messages.newButtonTitle);
$newPadBlock.find('button').addClass('fa fa-th');
$newPadBlock.find('#cp-app-toolbar-creation-advanced').click(function (e) {
e.preventDefault();
Common.createNewPadModal();
});
return $newPadBlock;
};

4
www/drive/app-drive.less
View File

@ -664,6 +664,10 @@ span {
}
}
.cp-app-drive-new-name {
white-space: nowrap;
}
@media screen and (max-height: @browser_media-not-big) {
.cp-modal {
& > p {