web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add keyboard shortcuts for the Ctrl+E or Cmd+E modal

Browse Source
This commit is contained in:
yflory
2018-02-28 16:38:28 +01:00
parent dbe8ab014d
commit a4a6385e86
6 changed files with 66 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
customize.dist/src/less2/include/icons.less
View File

@@ -25,6 +25,10 @@
text-overflow: ellipsis; text-overflow: ellipsis;
word-wrap: break-word; word-wrap: break-word;
} }
&.cp-icons-element-selected {
background-color: white;
color: #666;
}
.fa { .fa {
display: block; display: block;
font-size: 64px; font-size: 64px;

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

@@ -208,6 +208,7 @@
width: auto; width: auto;
margin: 0; margin: 0;
padding: 0; padding: 0;
outline: none;
} }
label[for="cp-app-toolbar-creation-advanced"] { label[for="cp-app-toolbar-creation-advanced"] {
margin: 0; margin: 0;

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

@@ -864,7 +864,8 @@ define(function () {
out.creation_expiration = "Date d'expiration"; out.creation_expiration = "Date d'expiration";
out.creation_propertiesTitle = "Disponibilité"; out.creation_propertiesTitle = "Disponibilité";
out.creation_appMenuName = "Mode avancé (Ctrl + E)"; 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_newPadModalDescription = "Cliquez sur un type de pad pour le créer. Vous pouvez aussi appuyer sur <b>Tab</b> pour sélectionner un type et appuyer sur <b>Entrée</b> pour valider.";
out.creation_newPadModalDescriptionAdvanced = "Cochez la case si vous souhaitez voir l'écran de création de pads (pour les pads possédés ou à date d'expiration). Vous pouvez appuyer sur <b>Espace</b> pour changer sa valeur.";
out.creation_newPadModalAdvanced = "Afficher l'écran de création de pads"; out.creation_newPadModalAdvanced = "Afficher l'écran de création de pads";
// New share modal // New share modal

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

@@ -902,7 +902,8 @@ define(function () {
out.creation_expiration = "Expiration time"; out.creation_expiration = "Expiration time";
out.creation_propertiesTitle = "Availability"; out.creation_propertiesTitle = "Availability";
out.creation_appMenuName = "Advanced mode (Ctrl + E)"; 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 pads, expiring pads, etc.)."; out.creation_newPadModalDescription = "Click on a pad type to create it. You can also press <b>Tab</b> to select the type and press <b>Enter</b> to confirm.";
out.creation_newPadModalDescriptionAdvanced = "You can check the box (or press <b>Space</b> to change its value) if you want to display the pad creation screen (for owned pads, expiring pads, etc.).";
out.creation_newPadModalAdvanced = "Display the pad creation screen"; out.creation_newPadModalAdvanced = "Display the pad creation screen";
// New share modal // New share modal

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

@@ -1528,6 +1528,7 @@ define([
if (!$blockContainer.length) { if (!$blockContainer.length) {
$blockContainer = $('<div>', { $blockContainer = $('<div>', {
'class': 'cp-modal-container', 'class': 'cp-modal-container',
tabindex: 1,
'id': cfg.id 'id': cfg.id
}); });
} }
@@ -1559,14 +1560,16 @@ define([
$body: $('body') $body: $('body')
}); });
var $title = $('<h3>').text(Messages.fm_newFile); var $title = $('<h3>').text(Messages.fm_newFile);
var $description = $('<p>').text(Messages.creation_newPadModalDescription); var $description = $('<p>').html(Messages.creation_newPadModalDescription);
$modal.find('.cp-modal').append($title); $modal.find('.cp-modal').append($title);
$modal.find('.cp-modal').append($description); $modal.find('.cp-modal').append($description);
var $advanced; var $advanced;
var $advancedContainer = $('<div>'); var $advancedContainer = $('<div>');
if (common.isLoggedIn()) { var priv = common.getMetadataMgr().getPrivateData();
var c = (priv.settings.general && priv.settings.general.creation) || {};
if (AppConfig.displayCreationScreen && common.isLoggedIn() && c.skip) {
$advanced = $('<input>', { $advanced = $('<input>', {
type: 'checkbox', type: 'checkbox',
checked: 'checked', checked: 'checked',
@@ -1575,9 +1578,12 @@ define([
$('<label>', { $('<label>', {
for: 'cp-app-toolbar-creation-advanced' for: 'cp-app-toolbar-creation-advanced'
}).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer); }).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer);
$description.append('<br>');
$description.append(Messages.creation_newPadModalDescriptionAdvanced);
} }
var $container = $('<div>'); var $container = $('<div>');
var i = 0;
AppConfig.availablePadTypes.forEach(function (p) { AppConfig.availablePadTypes.forEach(function (p) {
if (p === 'drive') { return; } if (p === 'drive') { return; }
if (p === 'contacts') { return; } if (p === 'contacts') { return; }
@@ -1586,7 +1592,8 @@ define([
if (!common.isLoggedIn() && AppConfig.registeredOnlyTypes && if (!common.isLoggedIn() && AppConfig.registeredOnlyTypes &&
AppConfig.registeredOnlyTypes.indexOf(p) !== -1) { return; } AppConfig.registeredOnlyTypes.indexOf(p) !== -1) { return; }
var $element = $('<li>', { var $element = $('<li>', {
'class': 'cp-icons-element' 'class': 'cp-icons-element',
'id': 'cp-newpad-icons-'+ (i++)
}).prepend(UI.getIcon(p)).appendTo($container); }).prepend(UI.getIcon(p)).appendTo($container);
$element.append($('<span>', {'class': 'cp-icons-name'}) $element.append($('<span>', {'class': 'cp-icons-name'})
.text(Messages.type[p])); .text(Messages.type[p]));
@@ -1594,7 +1601,7 @@ define([
$element.click(function () { $element.click(function () {
$modal.hide(); $modal.hide();
if ($advanced && $advanced.is(':checked')) { if ($advanced && $advanced.is(':checked')) {
common.sessionStorage.put(Constants.displayPadCreationScreen, true, function () { common.sessionStorage.put(Constants.displayPadCreationScreen, true, function (){
common.openURL('/' + p + '/'); common.openURL('/' + p + '/');
}); });
return; return;
@@ -1605,11 +1612,41 @@ define([
}); });
}); });
var selected = -1;
var next = function () {
selected = ++selected % 5;
$container.find('.cp-icons-element-selected').removeClass('cp-icons-element-selected');
$container.find('#cp-newpad-icons-'+selected).addClass('cp-icons-element-selected');
};
$modal.off('keydown');
$modal.keydown(function (e) {
if (e.which === 9) {
e.preventDefault();
e.stopPropagation();
next();
return;
}
if (e.which === 13) {
if ($container.find('.cp-icons-element-selected').length === 1) {
$container.find('.cp-icons-element-selected').click();
}
return;
}
if (e.which === 32 && $advanced) {
$advanced.prop('checked', !$advanced.prop('checked'));
$modal.focus();
e.stopPropagation();
e.preventDefault();
}
});
/*var $content = createNewPadIcons($modal, isInRoot);*/
$modal.find('.cp-modal').append($container).append($advancedContainer); $modal.find('.cp-modal').append($container).append($advancedContainer);
window.setTimeout(function () { $modal.show(); }); window.setTimeout(function () {
//addNewPadHandlers($modal, isInRoot); $modal.show();
$modal.focus();
});
}; };
UIElements.initFilePicker = function (common, cfg) { UIElements.initFilePicker = function (common, cfg) {

28
www/common/toolbar3.js
View File

@@ -768,21 +768,19 @@ define([
content: $('<div>').append(UI.getIcon(p)).html() + Messages.type[p] content: $('<div>').append(UI.getIcon(p)).html() + Messages.type[p]
}); });
}); });
if (Config.displayCreationScreen) { pads_options.push({
pads_options.push({ tag: 'a',
tag: 'a', attributes: {
attributes: { id: 'cp-app-toolbar-creation-advanced',
id: 'cp-app-toolbar-creation-advanced', href: origin
href: origin },
}, content: '<span class="fa fa-plus-circle"></span> ' + Messages.creation_appMenuName
content: '<span class="fa fa-plus-circle"></span> ' + Messages.creation_appMenuName });
}); $(window).keydown(function (e) {
$(window).keydown(function (e) { if (e.which === 69 && (e.ctrlKey || e.metaKey)) {
if (e.which === 69 && e.ctrlKey) { Common.createNewPadModal();
Common.createNewPadModal(); }
} });
});
}
var dropdownConfig = { var dropdownConfig = {
text: '', // Button initial text text: '', // Button initial text
options: pads_options, // Entries displayed in the menu options: pads_options, // Entries displayed in the menu