Improved folder/mailbox name editing

This commit is contained in:
the-djmaze 2022-09-26 13:54:28 +02:00
parent d1d820da73
commit 0864d306d6
5 changed files with 24 additions and 15 deletions

13
dev/External/ko.js vendored
View file

@ -68,6 +68,19 @@ Object.assign(ko.bindingHandlers, {
}
},
onEsc: {
init: (element, fValueAccessor, fAllBindings, viewModel) => {
let fn = event => {
if ('Escape' == event.key) {
element.dispatchEvent(new Event('change'));
fValueAccessor().call(viewModel);
}
};
element.addEventListener('keyup', fn);
ko.utils.domNodeDisposal.addDisposeCallback(element, () => element.removeEventListener('keyup', fn));
}
},
onSpace: {
init: (element, fValueAccessor, fAllBindings, viewModel) => {
let fn = event => {

View file

@ -250,7 +250,7 @@ export class FolderModel extends AbstractModel {
focused: false,
selected: false,
edited: false,
editing: false,
isSubscribed: true,
checkable: false, // Check for new messages
askDelete: false,
@ -443,9 +443,7 @@ export class FolderModel extends AbstractModel {
});
folder.addSubscribables({
name: value => folder.nameForEdit(value),
edited: value => value && folder.nameForEdit(folder.name()),
editing: value => value && folder.nameForEdit(folder.name()),
unreadEmails: unread => {
if (FolderType.Inbox === folder.type()) {

View file

@ -51,14 +51,13 @@ export class UserSettingsFolders /*extends AbstractViewSettings*/ {
this.folderForDeletion = folderForDeletion;
this.folderForEdit = ko.observable(null).extend({ toggleSubscribeProperty: [this, 'edited'] });
this.folderForEdit = ko.observable(null).extend({ toggleSubscribeProperty: [this, 'editing'] });
SettingsUserStore.hideUnsubscribed.subscribe(value => Remote.saveSetting('HideUnsubscribed', value));
}
folderEditOnEnter(folder) {
const nameToEdit = folder ? folder.nameForEdit().trim() : '';
const nameToEdit = folder?.nameForEdit().trim();
if (nameToEdit && folder.name() !== nameToEdit) {
Remote.abort('Folders').post('FolderRename', FolderUserStore.foldersRenaming, {
Folder: folder.fullName,
@ -88,13 +87,13 @@ export class UserSettingsFolders /*extends AbstractViewSettings*/ {
});
}
folder.edited(false);
// this.folderForEdit(null);
folder.editing(false);
}
folderEditOnEsc(folder) {
if (folder) {
folder.edited(false);
}
// this.folderForEdit(null);
folder?.editing(false);
}
onShow() {

View file

@ -23,8 +23,7 @@
opacity: 0.6;
}
.folder-name.can-be-edited:hover {
text-decoration-style: dashed;
.folder-name.can-be-edited {
cursor: pointer;
}

View file

@ -1,11 +1,11 @@
<tr data-bind="css: { 'selectable': selectable, 'system': isSystemFolder }">
<td data-bind="css: 'deep-' + deep">
<span class="folder-name" data-bind="text: name, visible: !edited(), css: { 'can-be-edited': canBeEdited },
<span class="folder-name" data-bind="text: name, visible: !editing(), css: { 'can-be-edited': canBeEdited },
click: function (oFolder) { oFolder.canBeEdited() && $root.folderForEdit(oFolder); },
tooltipErrorTip: errorMsg"></span>
<input type="text"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: nameForEdit, visible: edited, hasfocus: edited, onEnter: function () { $root.folderEditOnEnter($data); }">
data-bind="value: nameForEdit, visible: editing, hasfocus: editing, onEnter: function () { $root.folderEditOnEnter($data); }, onEsc: function () { $root.folderEditOnEsc($data); }">
&nbsp;
<span class="folder-system-name" data-bind="text: manageFolderSystemName, visible: isSystemFolder"></span>
</td>