Dropdown menu keyboard navigation

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

View file

@ -21,7 +21,7 @@
@dropdown-menu-background-color: #fff;
@dropdown-menu-hover-background-color: #48525C;
@dropdown-menu-hover-color: #eee;
@dropdown-menu-disable-color: #999;
@dropdown-menu-disabled-color: #999;
// FOLDERS
@folders-color: #fff;

View file

@ -20,7 +20,7 @@
@dropdown-menu-background-color: #fff;
@dropdown-menu-hover-background-color: #757575;
@dropdown-menu-hover-color: #eee;
@dropdown-menu-disable-color: #999;
@dropdown-menu-disabled-color: #999;
// FOLDERS
@folders-color: #000;

View file

@ -98,12 +98,12 @@
}
}
.g-ui-menu .e-item.disable > .e-link, .g-ui-menu .e-item.disable > .e-link:hover {
color: @dropdown-menu-disable-color !important;
.g-ui-menu .e-item.disabled > .e-link, .g-ui-menu .e-item.disabled > .e-link:hover {
color: @dropdown-menu-disabled-color !important;
background-color: @dropdown-menu-background-color !important;
> i {
color: @dropdown-menu-disable-color !important;
color: @dropdown-menu-disabled-color !important;
}
}

View file

@ -24,7 +24,7 @@
@dropdown-menu-background-color: #fff;
@dropdown-menu-hover-background-color: #444;
@dropdown-menu-hover-color: #eee;
@dropdown-menu-disable-color: #999;
@dropdown-menu-disabled-color: #999;
@dropdown-menu-selected-background-color: #eee;
// FOLDERS

View file

@ -1,20 +1,20 @@
<tr class="e-item" data-bind="css: {'disabled': disabled }">
<td class="e-action">
<span class="domain-name" data-bind="text: name"></span>
</td>
<td>
<a class="btn btn-small btn-small-small btn-danger pull-right button-delete" data-bind="css: {'delete-access': deleteAccess()}, click: function(oDomain) { $root.deleteDomain(oDomain); }">
<span>Are you sure?</span>
</a>
</td>
<td>
<span class="delete-domain" data-bind="visible: !deleteAccess(), click: function (oDomain) { $root.domainForDeletion(oDomain); }">
<i class="icon-trash"></i>
</span>
</td>
<td>
<span class="disable-domain" data-bind="click: function (oDomain) { $root.disableDomain(oDomain); }">
<i data-bind="css: {'icon-checkbox-checked': !disabled(), 'icon-checkbox-unchecked': disabled}"></i>
</span>
</td>
<tr class="e-item" data-bind="css: {'disabled': disabled }">
<td class="e-action">
<span class="domain-name" data-bind="text: name"></span>
</td>
<td>
<a class="btn btn-small btn-small-small btn-danger pull-right button-delete" data-bind="css: {'delete-access': deleteAccess()}, click: function(oDomain) { $root.deleteDomain(oDomain); }">
<span>Are you sure?</span>
</a>
</td>
<td>
<span class="delete-domain" data-bind="visible: !deleteAccess(), click: function (oDomain) { $root.domainForDeletion(oDomain); }">
<i class="icon-trash"></i>
</span>
</td>
<td>
<span class="disabled-domain" data-bind="click: function (oDomain) { $root.disableDomain(oDomain); }">
<i data-bind="css: {'icon-checkbox-checked': !disabled(), 'icon-checkbox-unchecked': disabled}"></i>
</span>
</td>
</tr>

View file

@ -4,7 +4,7 @@
<span class="plugin-name" data-bind="text: name"></span>
</td>
<td>
<span class="disable-plugin">
<span class="disabled-plugin">
<i data-bind="css: {'e-action icon-checkbox-checked': !disabled(), 'e-action icon-checkbox-unchecked': disabled}"></i>
</span>
</td>

View file

@ -1,9 +1,9 @@
<div class="b-folders g-ui-user-select-none thm-folders">
<div class="b-toolbar btn-toolbar">
<a class="btn buttonCompose" data-placement="bottom" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_COMPOSE'">
<a class="btn buttonCompose" data-tooltip-placement="bottom" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_COMPOSE'">
<i class="icon-paper-plane"></i>
</a>
<a class="btn buttonContacts" data-placement="bottom" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
<a class="btn buttonContacts" data-tooltip-placement="bottom" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
<i class="icon-address-book"></i>
</a>
</div>

View file

@ -4,95 +4,95 @@
<div class="toolbar">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn buttonReload" data-placement="bottom" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
<a class="btn buttonReload" data-tooltip-placement="bottom" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
<i class="icon-spinner" data-bind="css: {'animated': messageListCompleteLoadingThrottle}"></i>
</a>
</div>
<div class="btn-group">&nbsp;</div>
<div class="btn-group">
<a class="btn dropdown-toggle buttonMove" data-toggle="dropdown" data-placement="bottom" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
<div class="btn-group dropdown" data-bind="dropdownOpenStatus: true, openDropdownTrigger: moveDropdownTrigger">
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle buttonMove" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
<i class="icon-folder"></i>
&nbsp;&nbsp;
<span class="caret"></span>
</a>
<ul class="dropdown-menu g-ui-menu" role="menu" data-bind="foreach: folderMenuForMove">
<li class="e-item" data-bind="css: { 'disable': disable }, click: function () { if (!disable) $root.moveSelectedMessagesToFolder(id); }">
<a class="e-link" data-bind="text: name"></a>
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="move-dropdown-id" role="menu" data-bind="foreach: folderMenuForMove">
<li class="e-item" role="presentation" data-bind="css: { 'disabled': disabled }, click: function () { if (!disabled) $root.moveSelectedMessagesToFolder(id); }">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="text: name"></a>
</li>
</ul>
</div>
<div class="btn-group">&nbsp;</div>
<div class="btn-group">
<a class="btn btn-dark-disabled-border button-archive" data-placement="bottom" data-bind="visible: !isArchiveFolder() && !isArchiveDisabled() && !isDraftFolder(), command: archiveCommand, tooltip: 'MESSAGE_LIST/BUTTON_ARCHIVE'">
<a class="btn btn-dark-disabled-border button-archive" data-tooltip-placement="bottom" data-bind="visible: !isArchiveFolder() && !isArchiveDisabled() && !isDraftFolder(), command: archiveCommand, tooltip: 'MESSAGE_LIST/BUTTON_ARCHIVE'">
<i class="icon-archive"></i>
</a>
<a class="btn btn-dark-disabled-border button-spam" data-placement="bottom" data-bind="visible: !isSpamFolder() && !isSpamDisabled() && !isDraftFolder() && !isSentFolder(), command: spamCommand, tooltip: 'MESSAGE_LIST/BUTTON_SPAM'">
<a class="btn btn-dark-disabled-border button-spam" data-tooltip-placement="bottom" data-bind="visible: !isSpamFolder() && !isSpamDisabled() && !isDraftFolder() && !isSentFolder(), command: spamCommand, tooltip: 'MESSAGE_LIST/BUTTON_SPAM'">
<i class="icon-bug"></i>
</a>
<a class="btn btn-dark-disabled-border button-delete" data-placement="bottom" data-bind="command: deleteCommand, tooltip: 'MESSAGE_LIST/BUTTON_DELETE'">
<a class="btn btn-dark-disabled-border button-delete" data-tooltip-placement="bottom" data-bind="command: deleteCommand, tooltip: 'MESSAGE_LIST/BUTTON_DELETE'">
<i class="icon-trash"></i>
<span data-bind="text: printableMessageCountForDeletion()"></span>
</a>
</div>
<div class="btn-group">&nbsp;</div>
<div class="btn-group">
<a class="btn dropdown-toggle buttonMore" data-toggle="dropdown" data-placement="bottom" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
<div class="btn-group dropdown" data-bind="dropdownOpenStatus: true, openDropdownTrigger: moreDropdownTrigger">
<a class="btn dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
<i class="icon-list"></i>
</a>
<ul class="dropdown-menu g-ui-menu" role="menu">
<li class="e-item" data-bind="click: listUnsetSeen, css: {'disable': !hasCheckedOrSelectedLines()}">
<a class="e-link">
<li class="e-item" role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-none"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE_LIST/MENU_UNSET_SEEN"></span>
</a>
</li>
<li class="e-item" data-bind="click: listSetSeen, css: {'disable': !hasCheckedOrSelectedLines()}">
<a class="e-link">
<li class="e-item" role="presentation" data-bind="click: listSetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-none"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE_LIST/MENU_SET_SEEN"></span>
</a>
</li>
<li class="e-item" data-bind="click: listSetFlags, css: {'disable': !hasCheckedOrSelectedLines()}">
<a class="e-link">
<li class="e-item" role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-none"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE_LIST/MENU_SET_FLAG"></span>
</a>
</li>
<li class="e-item" data-bind="click: listUnsetFlags, css: {'disable': !hasCheckedOrSelectedLines()}">
<a class="e-link">
<li class="e-item" role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-none"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE_LIST/MENU_UNSET_FLAG"></span>
</a>
</li>
<li class="e-item" data-bind="click: listSetAllSeen, css: {'disable': !hasMessages()}">
<a class="e-link">
<li class="e-item" role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !hasMessages()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-none"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE_LIST/MENU_SET_ALL_SEEN"></span>
</a>
</li>
<li class="divider"></li>
<li class="e-item" data-bind="command: multyForwardCommand">
<a class="e-link">
<li class="divider" role="presentation"></li>
<li class="e-item" role="presentation" data-bind="command: multyForwardCommand">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-reply-all"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></span>
</a>
</li>
<li class="divider"></li>
<li class="e-item" data-bind="command: deleteWithoutMoveCommand">
<a class="e-link">
<li class="divider" role="presentation"></li>
<li class="e-item" role="presentation" data-bind="command: deleteWithoutMoveCommand">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-trash"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
</a>
</li>
<li class="e-item" data-bind="command: clearCommand">
<a class="e-link">
<li class="e-item" role="presentation" data-bind="command: clearCommand">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-fire"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE_LIST/BUTTON_EMPTY_FOLDER"></span>
@ -153,11 +153,6 @@
</div>
<div class="mainDelimiter footerDelimiter"></div>
<div class="b-footer thm-message-list-bottom-toolbar">
<!--
<a class="btn buttonReload" data-placement="right" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
<i class="icon-spinner" data-bind="css: {'animated': messageListCompleteLoadingThrottle}"></i>
</a>
-->
<span data-bind="visible: 0 < userUsageProc(), tooltip2: quotaTooltip" class="e-quota">
<span data-bind="text: userUsageProc"></span>%
</span>

View file

@ -2,107 +2,107 @@
<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'message-focused': message.focused}">
<div class="toolbar g-ui-user-select-none">
<div class="messageButtons btn-toolbar">
<div class="btn-group" data-placement="bottom" data-bind="visible: !usePreviewPane(), tooltip: 'MESSAGE/BUTTON_CLOSE'">
<div class="btn-group" data-tooltip-placement="bottom" data-bind="visible: !usePreviewPane(), tooltip: 'MESSAGE/BUTTON_CLOSE'">
<a class="btn buttonClose" data-bind="command: closeMessage">
<i class="icon-remove"></i>
</a>
</div>
<div class="btn-group">&nbsp;</div>
<div class="btn-group" data-placement="bottom" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
<div class="btn-group" data-tooltip-placement="bottom" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
<a class="btn btn-success buttonEdit" data-bind="command: messageEditCommand">
<i class="icon-pencil icon-white"></i>
</a>
</div>
<div class="btn-group" data-bind="visible: !isDraftFolder()">
<a class="btn btn-dark-disabled-border buttonReply" data-placement="bottom" data-bind="command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
<a class="btn btn-dark-disabled-border buttonReply" data-tooltip-placement="bottom" data-bind="command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
<i class="icon-reply"></i>
</a>
<a class="btn btn-dark-disabled-border buttonReplyAll" data-placement="bottom" data-bind="command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
<a class="btn btn-dark-disabled-border buttonReplyAll" data-tooltip-placement="bottom" data-bind="command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
<i class="icon-reply-all"></i>
</a>
<a class="btn btn-dark-disabled-border buttonForward" data-placement="bottom" data-bind=" command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
<a class="btn btn-dark-disabled-border buttonForward" data-tooltip-placement="bottom" data-bind=" command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
<i class="icon-forward"></i>
</a>
</div>
<div class="btn-group" data-bind="visible: !usePreviewPane()">&nbsp;</div>
<div class="btn-group" data-bind="visible: !usePreviewPane()">
<a class="btn btn-dark-disabled-border button-archive" data-placement="bottom" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'MESSAGE/BUTTON_ARCHIVE'">
<a class="btn btn-dark-disabled-border button-archive" data-tooltip-placement="bottom" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'MESSAGE/BUTTON_ARCHIVE'">
<i class="icon-archive"></i>
</a>
<a class="btn btn-dark-disabled-border button-spam" data-placement="bottom" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'MESSAGE/BUTTON_SPAM'">
<a class="btn btn-dark-disabled-border button-spam" data-tooltip-placement="bottom" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'MESSAGE/BUTTON_SPAM'">
<i class="icon-bug"></i>
</a>
<a class="btn btn-dark-disabled-border button-delete" data-placement="bottom" data-bind="command: deleteCommand, tooltip: 'MESSAGE/BUTTON_DELETE'">
<a class="btn btn-dark-disabled-border button-delete" data-tooltip-placement="bottom" data-bind="command: deleteCommand, tooltip: 'MESSAGE/BUTTON_DELETE'">
<i class="icon-trash"></i>
</a>
</div>
<div class="btn-group">&nbsp;</div>
<div class="btn-group">
<a class="btn dropdown-toggle buttonMore" data-placement="bottom" data-toggle="dropdown" data-bind="command: messageVisibilityCommand, tooltip: 'MESSAGE/BUTTON_MORE'">
<div class="btn-group dropdown" data-bind="dropdownOpenStatus: true, openDropdownTrigger: moreDropdownTrigger"">
<a class="btn dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="command: messageVisibilityCommand, tooltip: 'MESSAGE/BUTTON_MORE'">
<i class="icon-list"></i>
</a>
<ul class="dropdown-menu g-ui-menu" role="menu">
<li class="e-item" data-bind="visible: !isDraftFolder()">
<a class="e-link" data-bind="command: forwardAsAttachmentCommand">
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand">
<i class="icon-reply"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></span>
</a>
</li>
<li class="e-item" data-bind="visible: !isDraftFolder()">
<a class="e-link" data-bind="command: editAsNewCommand">
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: editAsNewCommand">
<i class="icon-pencil"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_EDIT_AS_NEW"></span>
</a>
</li>
<li class="divider" data-bind="visible: !isDraftFolder()"></li>
<li class="e-item" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
<a target="_blank" class="e-link" data-bind="command: archiveCommand">
<li class="divider" role="presentation" data-bind="visible: !isDraftFolder()"></li>
<li class="e-item" role="presentation" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: archiveCommand">
<i class="icon-archive"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_ARCHIVE"></span>
</a>
</li>
<li class="e-item" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
<a target="_blank" class="e-link" data-bind="command: spamCommand">
<li class="e-item" role="presentation" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: spamCommand">
<i class="icon-bug"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_SPAM"></span>
</a>
</li>
<li class="e-item" data-bind="visible: usePreviewPane()">
<a target="_blank" class="e-link" data-bind="command: deleteCommand">
<li class="e-item" role="presentation" data-bind="visible: usePreviewPane()">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: deleteCommand">
<i class="icon-trash"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_DELETE"></span>
</a>
</li>
<li class="divider" data-bind="visible: usePreviewPane()"></li>
<li class="e-item">
<a target="_blank" class="e-link" data-bind="click: function () { if (message()) { message().printMessage(); }} ">
<li class="divider" role="presentation" data-bind="visible: usePreviewPane()"></li>
<li class="e-item" role="presentation">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().printMessage(); }} ">
<i class="icon-print"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE/MENU_PRINT"></span>
</a>
</li>
<li class="e-item">
<a target="_blank" class="e-link" data-bind="click: function () { if (message()) { message().viewPopupMessage(); }}">
<li class="e-item" role="presentation">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().viewPopupMessage(); }}">
<i class="icon-popup"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_IN_NEW_WINDOW"></span>
</a>
</li>
<li class="divider"></li>
<li class="e-item">
<a target="_blank" class="e-link" data-bind="link: viewViewLink()">
<li class="divider" role="presentation"></li>
<li class="e-item" role="presentation">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="link: viewViewLink()">
<i class="icon-file-code"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE/MENU_VIEW_ORIGINAL"></span>
</a>
</li>
<li class="e-item">
<a target="_blank" class="e-link" data-bind="link: viewDownloadLink()">
<li class="e-item" role="presentation">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="link: viewDownloadLink()">
<i class="icon-download"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></span>

View file

@ -31,13 +31,13 @@
<div class="dropdown pull-left">
<span class="dropdown-toggle g-ui-dropdown e-identity"
id="IdentityLabel" role="button" data-toggle="dropdown"
data-bind="text: currentIdentityString, dropdown: true, css: {'multiply': 1 < identitiesOptions().length }">
data-bind="text: currentIdentityString, dropdownCloser: true, css: {'multiply': 1 < identitiesOptions().length }">
</span>
<!-- ko if: 1 < identitiesOptions().length -->
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="IdentityLabel">
<!-- ko foreach: identitiesOptions -->
<li class="e-item">
<a class="e-link" data-bind="click: function (oIdentity) { $root.selectIdentity(oIdentity); return true; }">
<a class="e-link" tabindex="-1" href="#" data-bind="click: function (oIdentity) { $root.selectIdentity(oIdentity); return true; }">
<span data-bind="text: optText"></span>
</a>
</li>
@ -108,7 +108,7 @@
</div>
<div class="pull-right">
<div class="btn-group pull-right">
<a class="btn dropdown-toggle buttonMore" data-placement="bottom" data-toggle="dropdown">
<a class="btn dropdown-toggle buttonMore" data-toggle="dropdown">
<i class="icon-list"></i>
</a>
<ul class="dropdown-menu g-ui-menu" role="menu">
@ -120,7 +120,7 @@
</a>
</li>
<li class="divider"></li>
<li class="e-item" data-bind="visible: allowOpenPGP, click: openOpenPgpPopup, css: {'disable': isHtml()}">
<li class="e-item" data-bind="visible: allowOpenPGP, click: openOpenPgpPopup, css: {'disabled': isHtml()}">
<a class="e-link">
<i class="icon-key"></i>
&nbsp;&nbsp;
@ -131,13 +131,13 @@
</div>
<div class="btn-group pull-right">&nbsp;</div>
<div class="btn-group pull-right">
<a class="btn" data-placement="top" data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton, tooltip: 'COMPOSE/ATTACH_FILES'">
<a class="btn" data-tooltip-placement="top" data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton, tooltip: 'COMPOSE/ATTACH_FILES'">
<i class="icon-attachment"></i>
</a>
<a class="btn" data-placement="top" data-bind="visible: dropboxEnabled, command: dropboxCommand, tooltip: 'COMPOSE/DROPBOX'">
<a class="btn" data-tooltip-placement="top" data-bind="visible: dropboxEnabled, command: dropboxCommand, tooltip: 'COMPOSE/DROPBOX'">
<i class="icon-dropbox"></i>
</a>
<a class="btn" data-placement="top" data-bind="visible: driveEnabled, command: driveCommand, tooltip: 'COMPOSE/GOOGLE_DRIVE'">
<a class="btn" data-tooltip-placement="top" data-bind="visible: driveEnabled, command: driveCommand, tooltip: 'COMPOSE/GOOGLE_DRIVE'">
<i class="icon-google-drive"></i>
</a>
</div>

View file

@ -109,7 +109,7 @@
</div>
<div class="control-group" data-bind="visible: !viewReadOnly() || 0 < viewPropertiesEmails().length">
<label class="control-label remove-padding-top fix-width">
<i class="icon-at iconsize24" data-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_EMAIL'"></i>
<i class="icon-at iconsize24" data-tooltip-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_EMAIL'"></i>
</label>
<div class="controls fix-width">
<div data-bind="foreach: viewPropertiesEmails">
@ -123,7 +123,7 @@
</div>
<div class="control-group" data-bind="visible: !viewReadOnly() || 0 < viewPropertiesPhones().length">
<label class="control-label remove-padding-top fix-width">
<i class="icon-telephone iconsize24" data-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_PHONE'"></i>
<i class="icon-telephone iconsize24" data-tooltip-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_PHONE'"></i>
</label>
<div class="controls fix-width">
<div data-bind="foreach: viewPropertiesPhones">
@ -144,12 +144,12 @@
</div>
<div class="e-read-only-sign">
<i class="icon-lock iconsize24" data-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'"></i>
<i class="icon-lock iconsize24" data-tooltip-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'"></i>
</div>
<div class="e-share-sign" data-bind="visible: contactsSharingIsAllowed">
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-placement="left" data-toggle="dropdown" data-bind="tooltip: 'CONTACTS/LABEL_SHARE'">
<a class="btn dropdown-toggle" data-tooltip-placement="left" data-toggle="dropdown" data-bind="tooltip: 'CONTACTS/LABEL_SHARE'">
<i data-bind="css: shareIcon"></i>
&nbsp;&nbsp;
<span class="caret"></span>

View file

@ -7,11 +7,58 @@
</h3>
</div>
<div class="modal-body">
<br />
Coming soon!
<br />
<br />
<br />
<div class="row" style="margin-left: 0">
<div class="span6">
<table class="table table-condensed table-striped">
<thead><tr><th>Mailbox</th></tr></thead>
<tbody>
<tr><td>Open user dropdown</td><td>`</td></tr>
<tr><td>Compose popup</td><td>W, C</td></tr>
<tr><td>Open message list more dropdown</td><td>Z</td></tr>
<tr><td>Open message view more dropdown</td><td>X</td></tr>
<tr><td>Help</td><td>?, Shift + /</td></tr>
</tbody>
</table>
<table class="table table-condensed table-striped">
<thead><tr><th>Message view (focused)</th></tr></thead>
<tbody>
<tr><td>Toggle fullscreen mode</td><td>Enter</td></tr>
<tr><td>Toggle message blockquotes</td><td>B</td></tr>
<tr><td>Print</td><td>Ctrl + P, Command + P</td></tr>
<tr><td>Exit fullscreen mode</td><td>Esc</td></tr>
<tr><td>Close message (No preview pane layout)</td><td>Esc</td></tr>
<tr><td>Switch focus back to message list</td><td>Tab, Shift + Tab</td></tr>
</tbody>
</table>
</div>
<div class="span6">
<table class="table table-condensed table-striped">
<thead><tr><th>Message list</th></tr></thead>
<tbody>
<tr><td>Check All</td><td>Ctrl + A, Command + A</td></tr>
<tr><td>Delete selected messages</td><td>Delete, Shift + delete</td></tr>
<tr><td>Reply selected message</td><td>R</td></tr>
<tr><td>Reply All selected message</td><td>A</td></tr>
<tr><td>Froward selected message</td><td>F</td></tr>
<tr><td>Froward (multiply) selected messages</td><td>Shift + F</td></tr>
<tr><td>Move selected messages</td><td>M</td></tr>
<tr><td>Read selected messages</td><td>R</td></tr>
<tr><td>UnRead selected messages</td><td>U</td></tr>
<tr><td>Important, star/flag selected messages</td><td>I</td></tr>
<tr><td>Search</td><td>/</td></tr>
<tr><td>Cancel search</td><td>Esc</td></tr>
<tr><td>View message (No preview pane layout)</td><td>Enter</td></tr>
<tr><td>Switch focus to selected message</td><td>Tab, Shift + Tab</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

View file

@ -9,10 +9,10 @@
<div class="btn-group pull-right">
&nbsp;&nbsp;&nbsp;
</div>-->
<div class="btn-group pull-right">
<div class="btn-group pull-right dropdown" data-bind="dropdownOpenStatus: true, openDropdownTrigger: accountMenuDropdownTrigger">
<a id="top-system-dropdown-id" href="#" tabindex="-1" class="btn btn-ellipsis btn-block dropdown-toggle system-dropdown"
data-placement="left" data-toggle="dropdown"
data-tooltip-class="tooltip-big" data-bind="tooltip2: emailTitle, hasfocus: accountMenuFocus">
data-toggle="dropdown" data-tooltip-placement="left"
data-tooltip-class="tooltip-big" data-bind="tooltip2: emailTitle">
<i data-bind="css: {'icon-user': !loading(), 'icon-spinner animated': loading()}"></i>
&nbsp;&nbsp;