mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-07-11 08:24:50 +03:00
Improved folder/mailbox name editing
This commit is contained in:
parent
d1d820da73
commit
0864d306d6
5 changed files with 24 additions and 15 deletions
13
dev/External/ko.js
vendored
13
dev/External/ko.js
vendored
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -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()) {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -23,8 +23,7 @@
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.folder-name.can-be-edited:hover {
|
||||
text-decoration-style: dashed;
|
||||
.folder-name.can-be-edited {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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); }">
|
||||
|
||||
<span class="folder-system-name" data-bind="text: manageFolderSystemName, visible: isSystemFolder"></span>
|
||||
</td>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue