Add keyboard shortcuts for the Ctrl+E or Cmd+E modal
This commit is contained in:
yflory
parent
dbe8ab014d
commit
a4a6385e86
@ -25,6 +25,10 @@
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
&.cp-icons-element-selected {
|
||||
background-color: white;
|
||||
color: #666;
|
||||
}
|
||||
.fa {
|
||||
display: block;
|
||||
font-size: 64px;
|
||||
|
||||
@ -208,6 +208,7 @@
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
label[for="cp-app-toolbar-creation-advanced"] {
|
||||
margin: 0;
|
||||
|
||||
@ -864,7 +864,8 @@ define(function () {
|
||||
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_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";
|
||||
|
||||
// New share modal
|
||||
|
||||
@ -902,7 +902,8 @@ define(function () {
|
||||
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 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";
|
||||
|
||||
// New share modal
|
||||
|
||||
@ -1528,6 +1528,7 @@ define([
|
||||
if (!$blockContainer.length) {
|
||||
$blockContainer = $('<div>', {
|
||||
'class': 'cp-modal-container',
|
||||
tabindex: 1,
|
||||
'id': cfg.id
|
||||
});
|
||||
}
|
||||
@ -1559,14 +1560,16 @@ define([
|
||||
$body: $('body')
|
||||
});
|
||||
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($description);
|
||||
|
||||
var $advanced;
|
||||
|
||||
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>', {
|
||||
type: 'checkbox',
|
||||
checked: 'checked',
|
||||
@ -1575,9 +1578,12 @@ define([
|
||||
$('<label>', {
|
||||
for: 'cp-app-toolbar-creation-advanced'
|
||||
}).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer);
|
||||
$description.append('<br>');
|
||||
$description.append(Messages.creation_newPadModalDescriptionAdvanced);
|
||||
}
|
||||
|
||||
var $container = $('<div>');
|
||||
var i = 0;
|
||||
AppConfig.availablePadTypes.forEach(function (p) {
|
||||
if (p === 'drive') { return; }
|
||||
if (p === 'contacts') { return; }
|
||||
@ -1586,7 +1592,8 @@ define([
|
||||
if (!common.isLoggedIn() && AppConfig.registeredOnlyTypes &&
|
||||
AppConfig.registeredOnlyTypes.indexOf(p) !== -1) { return; }
|
||||
var $element = $('<li>', {
|
||||
'class': 'cp-icons-element'
|
||||
'class': 'cp-icons-element',
|
||||
'id': 'cp-newpad-icons-'+ (i++)
|
||||
}).prepend(UI.getIcon(p)).appendTo($container);
|
||||
$element.append($('<span>', {'class': 'cp-icons-name'})
|
||||
.text(Messages.type[p]));
|
||||
@ -1594,7 +1601,7 @@ define([
|
||||
$element.click(function () {
|
||||
$modal.hide();
|
||||
if ($advanced && $advanced.is(':checked')) {
|
||||
common.sessionStorage.put(Constants.displayPadCreationScreen, true, function () {
|
||||
common.sessionStorage.put(Constants.displayPadCreationScreen, true, function (){
|
||||
common.openURL('/' + p + '/');
|
||||
});
|
||||
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);
|
||||
window.setTimeout(function () { $modal.show(); });
|
||||
//addNewPadHandlers($modal, isInRoot);
|
||||
window.setTimeout(function () {
|
||||
$modal.show();
|
||||
$modal.focus();
|
||||
});
|
||||
};
|
||||
|
||||
UIElements.initFilePicker = function (common, cfg) {
|
||||
|
||||
@ -768,21 +768,19 @@ define([
|
||||
content: $('<div>').append(UI.getIcon(p)).html() + Messages.type[p]
|
||||
});
|
||||
});
|
||||
if (Config.displayCreationScreen) {
|
||||
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
|
||||
});
|
||||
$(window).keydown(function (e) {
|
||||
if (e.which === 69 && e.ctrlKey) {
|
||||
Common.createNewPadModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
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
|
||||
});
|
||||
$(window).keydown(function (e) {
|
||||
if (e.which === 69 && (e.ctrlKey || e.metaKey)) {
|
||||
Common.createNewPadModal();
|
||||
}
|
||||
});
|
||||
var dropdownConfig = {
|
||||
text: '', // Button initial text
|
||||
options: pads_options, // Entries displayed in the menu
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user