Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-28 03:29:20 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dropdown menu keyboard navigation

Browse source 
Keyboard shortcuts help popup (Shift + / )
This commit is contained in:
RainLoop Team 2014-04-12 05:05:57 +04:00
parent f52be6fb66
commit d961fa480a
47 changed files with 5598 additions and 583 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dev/Admin/Contacts.js
View file

@ -54,7 +54,7 @@ function AdminContacts()
return {
'id': sValue,
'name': getTypeName(sValue) + (bDisabled ? ' (not supported)' : ''),
'disable': bDisabled
'disabled': bDisabled
};
});

2
dev/Admin/Plugins.js
View file

@ -47,7 +47,7 @@ AdminPlugins.prototype.onBuild = function (oDom)
self.configurePlugin(oPlugin);
}
})
.on('click', '.e-item .disable-plugin', function () {
.on('click', '.e-item .disabled-plugin', function () {
var oPlugin = ko.dataFor(this);
if (oPlugin)
{

6
dev/Boots/RainLoopApp.js
View file

@ -820,7 +820,7 @@ RainLoopApp.prototype.folderListOptionsBuilder = function (aSystem, aList, aDisa
aResult.push({
'id': aHeaderLines[iIndex][0],
'name': aHeaderLines[iIndex][1],
'disable': false
'disabled': false
});
}
@ -833,7 +833,7 @@ RainLoopApp.prototype.folderListOptionsBuilder = function (aSystem, aList, aDisa
'id': oItem.fullNameRaw,
'system': true,
'name': fRenameCallback ? fRenameCallback.call(null, oItem) : oItem.name(),
'disable': !oItem.selectable || -1 < Utils.inArray(oItem.fullNameRaw, aDisabled) ||
'disabled': !oItem.selectable || -1 < Utils.inArray(oItem.fullNameRaw, aDisabled) ||
(fDisableCallback ? fDisableCallback.call(null, oItem) : false)
});
}
@ -853,7 +853,7 @@ RainLoopApp.prototype.folderListOptionsBuilder = function (aSystem, aList, aDisa
'system': false,
'name': (new window.Array(oItem.deep + 1 - iUnDeep)).join(sDeepPrefix) +
(fRenameCallback ? fRenameCallback.call(null, oItem) : oItem.name()),
'disable': !oItem.selectable || -1 < Utils.inArray(oItem.fullNameRaw, aDisabled) ||
'disabled': !oItem.selectable || -1 < Utils.inArray(oItem.fullNameRaw, aDisabled) ||
(Enums.FolderType.User !== oItem.type()) ||
(fDisableCallback ? fDisableCallback.call(null, oItem) : false)
});

1
dev/Common/Enums.js
View file

@ -37,6 +37,7 @@ Enums.KeyState = {
'MessageList': 'message-list',
'MessageView': 'message-view',
'Compose': 'compose',
'Settings': 'settings',
'Menu': 'menu',
'PopupComposeOpenPGP': 'compose-open-pgp',
'PopupAsk': 'popup-ask'

5
dev/Common/Globals.js
View file

@ -10,6 +10,11 @@ Globals.now = (new Date()).getTime();
*/
Globals.momentTrigger = ko.observable(true);
/**
* @type {?}
*/
Globals.dropdownVisibility = ko.observable(false);
/**
* @type {?}
*/

51
dev/Common/Knockout.js
View file

@ -8,7 +8,7 @@ ko.bindingHandlers.tooltip = {
sClass = $(oElement).data('tooltip-class') || '',
sPlacement = $(oElement).data('tooltip-placement') || 'top'
;
$(oElement).tooltip({
'delay': {
'show': 500,
@ -46,7 +46,54 @@ ko.bindingHandlers.tooltip2 = {
}
};
ko.bindingHandlers.dropdown = {
ko.__detectDropdownVisibility = _.debounce(function ($el) {
Globals.dropdownVisibility(!!$el.hasClass('open'));
}, 50);
ko.bindingHandlers.dropdownOpenStatus = {
'init': function (oElement) {
var $el = $(oElement);
$el.find('.dropdown-toggle').click(function () {
ko.__detectDropdownVisibility($el);
});
// $el.on('.dropdown-menu .menuitem', 'click', function () {
// $el.removeClass('open');
// ko.__detectDropdownVisibility($el);
// });
// $el.on('.dropdown-menu .menuitem', 'keydown', function (oEvent) {
// if (oEvent && Enums.EventKeyCode.Esc === oEvent.keyCode)
// {
// $el.removeClass('open');
// ko.__detectDropdownVisibility($el);
// }
// });
$html.on('click.dropdown.data-api', function () {
ko.__detectDropdownVisibility($el);
});
}
};
ko.bindingHandlers.openDropdownTrigger = {
'update': function (oElement, fValueAccessor) {
if (ko.utils.unwrapObservable(fValueAccessor()))
{
var $el = $(oElement);
if (!$el.hasClass('open'))
{
$el.find('.dropdown-toggle').dropdown('toggle');
ko.__detectDropdownVisibility($el);
}
fValueAccessor()(false);
}
}
};
ko.bindingHandlers.dropdownCloser = {
'init': function (oElement) {
$(oElement).closest('.dropdown').on('click', '.e-item', function () {
$(oElement).dropdown('toggle');

4
dev/Common/Utils.js
View file

@ -1370,10 +1370,10 @@ Utils.draggeblePlace = function ()
Utils.defautOptionsAfterRender = function (oOption, oItem)
{
if (oItem && !Utils.isUnd(oItem.disable))
if (oItem && !Utils.isUnd(oItem.disabled))
{
ko.applyBindingsToNode(oOption, {
'disable': oItem.disable
'disabled': oItem.disabled
}, oItem);
}
};

16
dev/Screens/MailBox.js
View file

@ -40,11 +40,6 @@ MailBoxScreen.prototype.onShow = function ()
RL.data().keyScope(Enums.KeyState.MessageList);
};
MailBoxScreen.prototype.onHide = function ()
{
RL.data().keyScope(Enums.KeyState.All);
};
/**
* @param {string} sFolderHash
* @param {number} iPage
@ -131,17 +126,6 @@ MailBoxScreen.prototype.onStart = function ()
}, this);
};
//MailBoxScreen.prototype.onBuild = function ()
//{
// if (!Globals.bMobileDevice)
// {
// _.defer(function () {
// Utils.initLayoutResizer('#rl-resizer-left', '#rl-resizer-right', '#rl-right',
// 350, 800, 350, 350, Enums.ClientSideKeyName.MailBoxListSize);
// });
// }
//};
/**
* @return {Array}
*/

3
dev/Screens/Settings.js
View file

@ -24,6 +24,7 @@ _.extend(SettingsScreen.prototype, AbstractSettings.prototype);
SettingsScreen.prototype.onShow = function ()
{
// AbstractSettings.prototype.onShow.call(this);
RL.setTitle(this.sSettingsTitle);
RL.data().keyScope(Enums.KeyState.Settings);
};

55
dev/Storages/AbstractData.js
View file

@ -5,22 +5,55 @@
*/
function AbstractData()
{
this.keyScope = ko.observable(Enums.KeyState.All);
this.keyScope.subscribe(function (sValue) {
this.keyScopeReal = ko.observable(Enums.KeyState.All);
this.keyScopeFake = ko.observable(Enums.KeyState.All);
this.keyScope = ko.computed({
'owner': this,
'read': function () {
return this.keyScopeFake();
},
'write': function (sValue) {
if (Enums.KeyState.Compose === sValue)
{
Utils.disableKeyFilter();
}
else
{
Utils.restoreKeyFilter();
}
if (Enums.KeyState.Menu !== sValue)
{
if (Enums.KeyState.Compose === sValue)
{
Utils.disableKeyFilter();
}
else
{
Utils.restoreKeyFilter();
}
// window.console.log(sValue);
this.keyScopeFake(sValue);
if (Globals.dropdownVisibility())
{
sValue = Enums.KeyState.Menu;
}
}
// window.console.log(sValue + '/' + this.keyScopeFake());
this.keyScopeReal(sValue);
}
});
this.keyScopeReal.subscribe(function (sValue) {
window.console.log(sValue);
key.setScope(sValue);
});
Globals.dropdownVisibility.subscribe(function (bValue) {
if (bValue)
{
this.keyScope(Enums.KeyState.Menu);
}
else if (Enums.KeyState.Menu === key.getScope())
{
this.keyScope(this.keyScopeFake());
}
}, this);
Utils.initDataConstructorBySettings(this);
}

20
dev/Storages/WebMailData.js
View file

@ -39,17 +39,6 @@ function WebMailDataStorage()
this.projectHash = ko.observable('');
this.threading = ko.observable(false);
this.accountMenuFocus = ko.observable(false);
this.accountMenuFocus.sKeyState = Enums.KeyState.All;
this.accountMenuFocus.subscribe(function (bValue) {
if (bValue)
{
this.accountMenuFocus.sKeyState = RL.data().keyScope();
}
RL.data().keyScope(bValue ? Enums.KeyState.Menu : this.accountMenuFocus.sKeyState);
}, this);
this.lastFoldersHash = '';
this.remoteSuggestions = false;
@ -288,7 +277,14 @@ function WebMailDataStorage()
}, this);
this.message.focused.subscribe(function (bValue) {
RL.data().keyScope(bValue ? Enums.KeyState.MessageView : Enums.KeyState.MessageList);
if (bValue)
{
RL.data().keyScope(Enums.KeyState.MessageView);
}
else if (Enums.KeyState.MessageView === RL.data().keyScope())
{
RL.data().keyScope(Enums.KeyState.MessageList);
}
});
this.messageLoading.subscribe(function (bValue) {

120
dev/Styles/AdminDomains.less
View file

@ -1,60 +1,60 @@
.b-admin-domains {
.process-place {
width: 600px;
padding: 14px 0;
text-align: center;
visibility: hidden;
}
}
.b-admin-domains-list-table {
width: 600px;
.e-item {
.e-action {
cursor: pointer;
}
.domain-name {
display: inline-block;
word-break: break-all;
.box-sizing(border-box);
}
&.disabled .domain-name {
color: #bbb;
}
.button-delete {
margin-right: 15px;
visibility: hidden;
.opacity(0);
}
.delete-access {
&.button-delete {
visibility: visible;
margin-right: 0;
.opacity(100);
}
}
.delete-domain, .disable-domain {
cursor: pointer;
.opacity(50);
}
&.disabled .disable-domain {
.opacity(50);
}
.delete-domain, .disable-domain {
&:hover {
.opacity(100);
}
}
}
}
.b-admin-domains {
.process-place {
width: 600px;
padding: 14px 0;
text-align: center;
visibility: hidden;
}
}
.b-admin-domains-list-table {
width: 600px;
.e-item {
.e-action {
cursor: pointer;
}
.domain-name {
display: inline-block;
word-break: break-all;
.box-sizing(border-box);
}
&.disabled .domain-name {
color: #bbb;
}
.button-delete {
margin-right: 15px;
visibility: hidden;
.opacity(0);
}
.delete-access {
&.button-delete {
visibility: visible;
margin-right: 0;
.opacity(100);
}
}
.delete-domain, .disabled-domain {
cursor: pointer;
.opacity(50);
}
&.disabled .disabled-domain {
.opacity(50);
}
.delete-domain, .disabled-domain {
&:hover {
.opacity(100);
}
}
}
}

2
dev/Styles/AdminPlugins.less
View file

@ -26,7 +26,7 @@
.plugin-img, .plugin-name {
color: #bbb;
}
.disable-plugin {
.disabled-plugin {
.opacity(50);
}
}

4
dev/Styles/Compose.less
View file

@ -31,7 +31,7 @@
.opacity(100);
}
.btn.disable {
.btn.disabled {
&.button-delete {
visibility: hidden;
}
@ -41,7 +41,7 @@
margin-left: 8px;
}
.disable.button-delete {
.disabled.button-delete {
margin-left: 0px;
}
}

5
dev/Styles/Shortcuts.less
View file

@ -1,5 +1,10 @@
.popups {
.b-shortcuts-content {
&.modal {
width: 1025px;
}
.modal-header {
background-color: #fff;
}

4
dev/Styles/Ui.less
View file

@ -69,14 +69,14 @@
color: #fff;
}
.e-item.disable > .e-link {
.e-item.disabled > .e-link {
cursor: not-allowed;
background-color: #fff;
background-image: none;
color: grey;
}
.e-item.disable [class^="icon-"] {
.e-item.disabled [class^="icon-"] {
color: grey;
}
}

26
dev/ViewModels/AbstractSystemDropDownViewModel.js
View file

@ -13,8 +13,9 @@ function AbstractSystemDropDownViewModel()
this.accounts = oData.accounts;
this.accountEmail = oData.accountEmail;
this.accountsLoading = oData.accountsLoading;
this.accountMenuFocus = oData.accountMenuFocus;
this.accountMenuDropdownTrigger = ko.observable(false);
this.allowAddAccount = RL.settingsGet('AllowAdditionalAccounts');
this.loading = ko.computed(function () {
@ -22,14 +23,6 @@ function AbstractSystemDropDownViewModel()
}, this);
this.accountClick = _.bind(this.accountClick, this);
key('`', function () {
if (oData.useKeyboardShortcuts() && !RL.popupVisibility() &&
!oData.accountMenuFocus())
{
oData.accountMenuFocus(true);
}
});
}
_.extend(AbstractSystemDropDownViewModel.prototype, KnoinAbstractViewModel.prototype);
@ -76,4 +69,15 @@ AbstractSystemDropDownViewModel.prototype.logoutClick = function ()
RL.loginAndLogoutReload(true, RL.settingsGet('ParentEmail') && 0 < RL.settingsGet('ParentEmail').length);
});
};
};
AbstractSystemDropDownViewModel.prototype.onBuild = function ()
{
var self = this;
key('`', [Enums.KeyState.MessageList, Enums.KeyState.MessageView, Enums.KeyState.Settings], function () {
if (RL.data().useKeyboardShortcuts() && !RL.popupVisibility() && !Globals.dropdownVisibility() && self.viewModelVisibility())
{
self.accountMenuDropdownTrigger(true);
}
});
};

80
dev/ViewModels/MailBoxMessageListViewModel.js
View file

@ -42,6 +42,9 @@ function MailBoxMessageListViewModel()
this.userUsageSize = oData.userUsageSize;
this.userUsageProc = oData.userUsageProc;
this.moveDropdownTrigger = ko.observable(false);
this.moreDropdownTrigger = ko.observable(false);
// append drag and drop
this.dragOver = ko.observable(false).extend({'throttle': 1});
this.dragOverEnter = ko.observable(false).extend({'throttle': 1});
@ -518,7 +521,7 @@ MailBoxMessageListViewModel.prototype.flagMessages = function (oCurrentMessage)
}
};
MailBoxMessageListViewModel.prototype.flagMessagesFast = function ()
MailBoxMessageListViewModel.prototype.flagMessagesFast = function (bFlag)
{
var
aChecked = this.messageListCheckedOrSelected(),
@ -531,24 +534,43 @@ MailBoxMessageListViewModel.prototype.flagMessagesFast = function ()
return oMessage.flagged();
});
this.setAction(aChecked[0].folderFullNameRaw,
aChecked.length === aFlagged.length ? Enums.MessageSetAction.UnsetFlag : Enums.MessageSetAction.SetFlag, aChecked);
if (Utils.isUnd(bFlag))
{
this.setAction(aChecked[0].folderFullNameRaw,
aChecked.length === aFlagged.length ? Enums.MessageSetAction.UnsetFlag : Enums.MessageSetAction.SetFlag, aChecked);
}
else
{
this.setAction(aChecked[0].folderFullNameRaw,
!bFlag ? Enums.MessageSetAction.UnsetFlag : Enums.MessageSetAction.SetFlag, aChecked);
}
}
};
MailBoxMessageListViewModel.prototype.seenMessagesFast = function ()
MailBoxMessageListViewModel.prototype.seenMessagesFast = function (bSeen)
{
var
aChecked = this.messageListCheckedOrSelected(),
aUnseen = []
;
aUnseen = _.filter(aChecked, function (oMessage) {
return oMessage.unseen();
});
if (0 < aChecked.length)
{
aUnseen = _.filter(aChecked, function (oMessage) {
return oMessage.unseen();
});
this.setAction(aChecked[0].folderFullNameRaw,
0 < aUnseen.length ? Enums.MessageSetAction.SetSeen : Enums.MessageSetAction.UnsetSeen, aChecked);
if (Utils.isUnd(bSeen))
{
this.setAction(aChecked[0].folderFullNameRaw,
0 < aUnseen.length ? Enums.MessageSetAction.SetSeen : Enums.MessageSetAction.UnsetSeen, aChecked);
}
else
{
this.setAction(aChecked[0].folderFullNameRaw,
bSeen ? Enums.MessageSetAction.SetSeen : Enums.MessageSetAction.UnsetSeen, aChecked);
}
}
};
MailBoxMessageListViewModel.prototype.onBuild = function (oDom)
@ -648,6 +670,14 @@ MailBoxMessageListViewModel.prototype.initShortcuts = function ()
}
});
key('z', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
if (oData.useKeyboardShortcuts())
{
self.moreDropdownTrigger(true);
return false;
}
});
// delete
key('delete, shift+delete', Enums.KeyState.MessageList, function (event, handler) {
if (oData.useKeyboardShortcuts() && event)
@ -677,8 +707,8 @@ MailBoxMessageListViewModel.prototype.initShortcuts = function ()
}
});
// new message (open compose popup)
key('c,n', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
// write/compose (open compose popup)
key('w,c', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
if (oData.useKeyboardShortcuts())
{
kn.showScreenPopup(PopupsComposeViewModel);
@ -686,8 +716,8 @@ MailBoxMessageListViewModel.prototype.initShortcuts = function ()
}
});
// star/flag messages
key('s', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
// important - star/flag messages
key('i', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
if (oData.useKeyboardShortcuts())
{
self.flagMessagesFast();
@ -695,11 +725,29 @@ MailBoxMessageListViewModel.prototype.initShortcuts = function ()
}
});
// mark as read/unread
key('m', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
// move
key('m', Enums.KeyState.MessageList, function () {
if (oData.useKeyboardShortcuts())
{
self.seenMessagesFast();
self.moveDropdownTrigger(true);
return false;
}
});
// read
key('q', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
if (oData.useKeyboardShortcuts())
{
self.seenMessagesFast(true);
return false;
}
});
// unread
key('u', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
if (oData.useKeyboardShortcuts())
{
self.seenMessagesFast(false);
return false;
}
});

36
dev/ViewModels/MailBoxMessageViewViewModel.js
View file

@ -40,6 +40,7 @@ function MailBoxMessageViewViewModel()
this.fullScreenMode = oData.messageFullScreenMode;
this.showFullInfo = ko.observable(false);
this.moreDropdownTrigger = ko.observable(false);
this.messageDomFocused = ko.observable(false).extend({'rateLimit': 0});
this.messageVisibility = ko.computed(function () {
@ -360,6 +361,13 @@ MailBoxMessageViewViewModel.prototype.onBuild = function (oDom)
this.messageDomFocused(!!bValue);
}, this);
this.messageDomFocused.subscribe(function (bValue) {
if (!bValue && Enums.KeyState.MessageView === this.keyScope())
{
this.message.focused(false);
}
}, this);
this.keyScope.subscribe(function (sValue) {
if (Enums.KeyState.MessageView === sValue && this.message.focused())
{
@ -384,10 +392,14 @@ MailBoxMessageViewViewModel.prototype.escShortcuts = function ()
{
this.fullScreenMode(false);
}
else
else if (Enums.Layout.NoPreview === RL.data().layout())
{
this.message(null);
}
else
{
this.message.focused(false);
}
return false;
}
@ -412,6 +424,14 @@ MailBoxMessageViewViewModel.prototype.initShortcuts = function ()
}
});
key('x', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
if (oData.useKeyboardShortcuts())
{
self.moreDropdownTrigger(true);
return false;
}
});
// reply
key('r', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
if (oData.useKeyboardShortcuts() && oData.message())
@ -440,13 +460,13 @@ MailBoxMessageViewViewModel.prototype.initShortcuts = function ()
});
// message information
key('i', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
if (oData.useKeyboardShortcuts())
{
self.showFullInfo(!self.showFullInfo());
return false;
}
});
// key('i', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
// if (oData.useKeyboardShortcuts())
// {
// self.showFullInfo(!self.showFullInfo());
// return false;
// }
// });
// toggle message blockquotes
key('b', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {

11
dev/ViewModels/SettingsPaneViewModel.js
View file

@ -13,6 +13,17 @@ function SettingsPaneViewModel()
Utils.extendAsViewModel('SettingsPaneViewModel', SettingsPaneViewModel);
SettingsPaneViewModel.prototype.onBuild = function ()
{
var self = this;
key('esc', Enums.KeyState.Settings, function () {
if (RL.data().useKeyboardShortcuts())
{
self.backToMailBoxClick();
}
});
};
SettingsPaneViewModel.prototype.onShow = function ()
{
RL.data().message(null);