mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-07-13 03:27:39 +03:00
reduce html elements in menus
This commit is contained in:
the-djmaze
parent
61ec49fd22
commit
c09c71df75
3 changed files with 106 additions and 158 deletions
|
|
@ -47,52 +47,28 @@
|
||||||
<a id="more-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]GLOBAL/MORE">☰</a>
|
<a id="more-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]GLOBAL/MORE">☰</a>
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="more-list-dropdown-id">
|
<ul class="dropdown-menu" role="menu" aria-labelledby="more-list-dropdown-id">
|
||||||
<li role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
<li role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||||
<a href="#" tabindex="-1">
|
<a href="#" tabindex="-1" data-icon="" data-i18n="MESSAGE_LIST/MENU_UNSET_SEEN"></a>
|
||||||
<i class="icon-none"></i>
|
|
||||||
<span data-i18n="MESSAGE_LIST/MENU_UNSET_SEEN"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
<li role="presentation" data-bind="click: listSetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
<li role="presentation" data-bind="click: listSetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||||
<a href="#" tabindex="-1">
|
<a href="#" tabindex="-1" data-icon="" data-i18n="MESSAGE_LIST/MENU_SET_SEEN"></a>
|
||||||
<i class="icon-none"></i>
|
|
||||||
<span data-i18n="MESSAGE_LIST/MENU_SET_SEEN"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
<li role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
<li role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||||
<a href="#" tabindex="-1">
|
<a href="#" tabindex="-1" data-icon="★" data-i18n="MESSAGE_LIST/MENU_SET_FLAG"></a>
|
||||||
<i class="fontastic flagged">★</i>
|
|
||||||
<span data-i18n="MESSAGE_LIST/MENU_SET_FLAG"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
<li role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
<li role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||||
<a href="#" tabindex="-1">
|
<a href="#" tabindex="-1" data-icon="☆" data-i18n="MESSAGE_LIST/MENU_UNSET_FLAG"></a>
|
||||||
<i class="fontastic unflagged">☆</i>
|
|
||||||
<span data-i18n="MESSAGE_LIST/MENU_UNSET_FLAG"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
<li role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !hasMessages()}">
|
<li role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !hasMessages()}">
|
||||||
<a href="#" tabindex="-1">
|
<a href="#" tabindex="-1" data-icon="" data-i18n="MESSAGE_LIST/MENU_SET_ALL_SEEN"></a>
|
||||||
<i class="icon-none"></i>
|
|
||||||
<span data-i18n="MESSAGE_LIST/MENU_SET_ALL_SEEN"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="dividerbar" role="presentation" data-bind="command: multyForwardCommand">
|
<li class="dividerbar" role="presentation" data-bind="command: multyForwardCommand">
|
||||||
<a href="#" tabindex="-1">
|
<a href="#" tabindex="-1" data-icon="↞" data-i18n="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></a>
|
||||||
<i class="fontastic">↞</i>
|
|
||||||
<span data-i18n="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="dividerbar" role="presentation" data-bind="visible: allowDangerousActions, command: deleteWithoutMoveCommand">
|
<li class="dividerbar" role="presentation" data-bind="visible: allowDangerousActions, command: deleteWithoutMoveCommand">
|
||||||
<a href="#" tabindex="-1">
|
<a href="#" tabindex="-1" data-icon="🗑" data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></a>
|
||||||
<i class="fontastic">🗑</i>
|
|
||||||
<span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
<li role="presentation" data-bind="visible: allowDangerousActions, command: clearCommand">
|
<li role="presentation" data-bind="visible: allowDangerousActions, command: clearCommand">
|
||||||
<a href="#" tabindex="-1">
|
<a href="#" tabindex="-1" data-icon="🔥" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER"></a>
|
||||||
<i class="fontastic">🔥</i>
|
|
||||||
<span data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -41,135 +41,99 @@
|
||||||
<div class="b-message-view-desc" data-i18n="MESSAGE/MESSAGE_VIEW_DESC" data-bind="visible: !message() && '' === messageError() && !hasCheckedMessages()">
|
<div class="b-message-view-desc" data-i18n="MESSAGE/MESSAGE_VIEW_DESC" data-bind="visible: !message() && '' === messageError() && !hasCheckedMessages()">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="message-fixed-button-toolbar" data-bind="visible: message">
|
<div class="b-message" data-bind="visible: message">
|
||||||
<div class="btn-group" style="margin-right: -11px;">
|
<div class="message-fixed-button-toolbar">
|
||||||
<a class="btn btn-thin btn-transparent buttonReply fontastic"
|
<div class="btn-group" style="margin-right: -8px">
|
||||||
data-bind="visible: 'reply' === lastReplyAction(), command: replyCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY">←</a>
|
<a class="btn btn-thin btn-transparent buttonReply fontastic"
|
||||||
<a class="btn btn-thin btn-transparent buttonReplyAll fontastic"
|
data-bind="visible: 'reply' === lastReplyAction(), command: replyCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY">←</a>
|
||||||
data-bind="visible: 'replyall' === lastReplyAction(), command: replyAllCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY_ALL">↞</a>
|
<a class="btn btn-thin btn-transparent buttonReplyAll fontastic"
|
||||||
<a class="btn btn-thin btn-transparent buttonForward fontastic"
|
data-bind="visible: 'replyall' === lastReplyAction(), command: replyAllCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY_ALL">↞</a>
|
||||||
data-bind="visible: 'forward' === lastReplyAction(), command: forwardCommand" data-i18n="[title]MESSAGE/BUTTON_FORWARD">→</a>
|
<a class="btn btn-thin btn-transparent buttonForward fontastic"
|
||||||
<div class="btn-group" data-bind="registerBootstrapDropdown: true" style="display: inline-block">
|
data-bind="visible: 'forward' === lastReplyAction(), command: forwardCommand" data-i18n="[title]MESSAGE/BUTTON_FORWARD">→</a>
|
||||||
<a class="btn btn-thin btn-transparent dropdown-toggle fontastic" id="more-view-dropdown-id" href="#" tabindex="-1">☰</a>
|
<div class="btn-group" data-bind="registerBootstrapDropdown: true" style="display: inline-block">
|
||||||
<ul class="dropdown-menu right-edge" role="menu" aria-labelledby="more-view-dropdown-id">
|
<a class="btn btn-thin btn-transparent dropdown-toggle fontastic" id="more-view-dropdown-id" href="#" tabindex="-1">☰</a>
|
||||||
<div data-bind="visible: !isDraftFolder()">
|
<ul class="dropdown-menu right-edge" role="menu" aria-labelledby="more-view-dropdown-id">
|
||||||
<li role="presentation">
|
<div data-bind="visible: !isDraftFolder()">
|
||||||
<a href="#" tabindex="-1" data-bind="command: replyCommand">
|
<li role="presentation">
|
||||||
<i class="fontastic">←</i>
|
<a href="#" tabindex="-1" data-bind="command: replyCommand" data-icon="←" data-i18n="MESSAGE/BUTTON_REPLY"></a>
|
||||||
<span data-i18n="MESSAGE/BUTTON_REPLY"></span>
|
</li>
|
||||||
</a>
|
<li role="presentation">
|
||||||
</li>
|
<a href="#" tabindex="-1" data-bind="command: replyAllCommand" data-icon="↞" data-i18n="MESSAGE/BUTTON_REPLY_ALL"></a>
|
||||||
<li role="presentation">
|
</li>
|
||||||
<a href="#" tabindex="-1" data-bind="command: replyAllCommand">
|
<li role="presentation">
|
||||||
<i class="fontastic">↞</i>
|
<a href="#" tabindex="-1" data-bind="command: forwardCommand" data-icon="→" data-i18n="MESSAGE/BUTTON_FORWARD"></a>
|
||||||
<span data-i18n="MESSAGE/BUTTON_REPLY_ALL"></span>
|
</li>
|
||||||
</a>
|
<li role="presentation">
|
||||||
</li>
|
<a href="#" tabindex="-1" data-bind="command: editAsNewCommand" data-icon="🖉" data-i18n="MESSAGE/BUTTON_EDIT_AS_NEW"></a>
|
||||||
<li role="presentation">
|
</li>
|
||||||
<a href="#" tabindex="-1" data-bind="command: forwardCommand">
|
<li role="presentation">
|
||||||
<i class="fontastic">→</i>
|
<a href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand" data-icon="→" data-i18n="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></a>
|
||||||
<span data-i18n="MESSAGE/BUTTON_FORWARD"></span>
|
</li>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
<div class="dividerbar">
|
||||||
<li role="presentation">
|
<li role="presentation" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
|
||||||
<a href="#" tabindex="-1" data-bind="command: editAsNewCommand">
|
<a href="#" tabindex="-1" data-bind="command: archiveCommand">
|
||||||
<i class="fontastic">🖉</i>
|
<i class="icon-archive"></i>
|
||||||
<span data-i18n="MESSAGE/BUTTON_EDIT_AS_NEW"></span>
|
<span data-i18n="GLOBAL/TO_ARCHIVE"></span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li role="presentation">
|
<li role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
|
||||||
<a href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand">
|
<a href="#" tabindex="-1" data-bind="command: spamCommand" data-icon="⚠" data-i18n="GLOBAL/SPAM"></a>
|
||||||
<i class="fontastic">→</i>
|
</li>
|
||||||
<span data-i18n="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></span>
|
<li role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled()">
|
||||||
</a>
|
<a href="#" tabindex="-1" data-bind="command: notSpamCommand">
|
||||||
</li>
|
<i class="icon-check-mark-circle-two"></i>
|
||||||
</div>
|
<span data-i18n="GLOBAL/NOT_SPAM"></span>
|
||||||
<div class="dividerbar">
|
</a>
|
||||||
<li role="presentation" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
|
</li>
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="command: archiveCommand">
|
<li role="presentation">
|
||||||
<i class="icon-archive"></i>
|
<a href="#" tabindex="-1" data-bind="command: deleteCommand" data-icon="🗑" data-i18n="GLOBAL/DELETE"></a>
|
||||||
<span data-i18n="GLOBAL/TO_ARCHIVE"></span>
|
</li>
|
||||||
</a>
|
<li role="presentation">
|
||||||
</li>
|
<a href="#" tabindex="-1" data-bind="command: deleteWithoutMoveCommand" data-icon="🗑" data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></a>
|
||||||
<li role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
|
</li>
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="command: spamCommand">
|
<li class="dividerbar" role="presentation" data-bind="visible: message() && message().hasUnsubsribeLinks()">
|
||||||
<i class="fontastic">⚠</i>
|
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: viewUnsubscribeLink }" data-icon="✖" data-i18n="MESSAGE/BUTTON_UNSUBSCRIBE"></a>
|
||||||
<span data-i18n="GLOBAL/SPAM"></span>
|
</li>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
<div data-bind="visible: allowMessageActions" class="dividerbar">
|
||||||
<li role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled()">
|
<li role="presentation">
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="command: notSpamCommand">
|
<a href="#" tabindex="-1" data-bind="click: function () { message() && message().printMessage(); } " data-icon="🖨" data-i18n="MESSAGE/MENU_PRINT"></a>
|
||||||
<i class="icon-check-mark-circle-two"></i>
|
</li>
|
||||||
<span data-i18n="GLOBAL/NOT_SPAM"></span>
|
<li role="presentation">
|
||||||
</a>
|
<a href="#" tabindex="-1" data-bind="click: function () { message() && message().viewPopupMessage(); }">
|
||||||
</li>
|
<i class="icon-popup"></i>
|
||||||
<li role="presentation">
|
<span data-i18n="MESSAGE/BUTTON_IN_NEW_WINDOW"></span>
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="command: deleteCommand">
|
</a>
|
||||||
<i class="fontastic">🗑</i>
|
</li>
|
||||||
<span data-i18n="GLOBAL/DELETE"></span>
|
<li role="presentation" data-bind="visible: message() && message().html() && !message().isHtml()">
|
||||||
</a>
|
<a href="#" tabindex="-1" data-bind="click: function () { message().viewHtml(); }" data-icon="👁" data-i18n="MESSAGE/HTML_VIEW"></a>
|
||||||
</li>
|
</li>
|
||||||
<li role="presentation" data-bind="command: deleteWithoutMoveCommand">
|
<li role="presentation" data-bind="visible: message() && message().plain() && message().isHtml()">
|
||||||
<a href="#" tabindex="-1">
|
<a href="#" tabindex="-1" data-bind="click: function () { message().viewPlain(); }" data-icon="👁" data-i18n="MESSAGE/PLAIN_VIEW"></a>
|
||||||
<i class="fontastic">🗑</i>
|
</li>
|
||||||
<span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
|
<li class="dividerbar" role="presentation">
|
||||||
</a>
|
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: viewViewLink }">
|
||||||
</li>
|
<i class="icon-file-code"></i>
|
||||||
<li class="dividerbar" role="presentation" data-bind="visible: message() && message().hasUnsubsribeLinks()">
|
<span data-i18n="MESSAGE/MENU_VIEW_ORIGINAL"></span>
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: viewUnsubscribeLink }">
|
</a>
|
||||||
<i class="fontastic">✖</i>
|
</li>
|
||||||
<span data-i18n="MESSAGE/BUTTON_UNSUBSCRIBE"></span>
|
<li role="presentation">
|
||||||
</a>
|
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: viewDownloadLink }">
|
||||||
</li>
|
<i class="icon-download"></i>
|
||||||
</div>
|
<span data-i18n="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></span>
|
||||||
<div data-bind="visible: allowMessageActions" class="dividerbar">
|
</a>
|
||||||
<li role="presentation">
|
</li>
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="click: function () { message() && message().printMessage(); } ">
|
</div>
|
||||||
<i class="fontastic">🖨</i>
|
</ul>
|
||||||
<span data-i18n="MESSAGE/MENU_PRINT"></span>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
<div class="btn-group hide-mobile" data-bind="visible: isDraftFolder()" data-i18n="[title]MESSAGE/BUTTON_EDIT" style="margin-right: 5px">
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="click: function () { message() && message().viewPopupMessage(); }">
|
<a class="btn btn-success buttonEdit fontastic" data-bind="command: messageEditCommand">🖉</a>
|
||||||
<i class="icon-popup"></i>
|
|
||||||
<span data-i18n="MESSAGE/BUTTON_IN_NEW_WINDOW"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation" data-bind="visible: message() && message().html() && !message().isHtml()">
|
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="click: function () { message().viewHtml(); }">
|
|
||||||
<i class="fontastic">👁</i>
|
|
||||||
<span data-i18n="MESSAGE/HTML_VIEW"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation" data-bind="visible: message() && message().plain() && message().isHtml()">
|
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="click: function () { message().viewPlain(); }">
|
|
||||||
<i class="fontastic">👁</i>
|
|
||||||
<span data-i18n="MESSAGE/PLAIN_VIEW"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="dividerbar" role="presentation">
|
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: viewViewLink }">
|
|
||||||
<i class="icon-file-code"></i>
|
|
||||||
<span data-i18n="MESSAGE/MENU_VIEW_ORIGINAL"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: viewDownloadLink }">
|
|
||||||
<i class="icon-download"></i>
|
|
||||||
<span data-i18n="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="btn-group hide-mobile" data-bind="visible: isDraftFolder()" data-i18n="[title]MESSAGE/BUTTON_EDIT" style="margin-right: 5px">
|
|
||||||
<a class="btn btn-success buttonEdit fontastic" data-bind="command: messageEditCommand">🖉</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="b-message" data-bind="visible: message">
|
|
||||||
<div class="messageItemHeader" data-bind="css: {'emptySubject': '' === viewSubject()}">
|
<div class="messageItemHeader" data-bind="css: {'emptySubject': '' === viewSubject()}">
|
||||||
<div class="subjectParent">
|
<div class="subjectParent">
|
||||||
<span class="infoParent g-ui-user-select-none fontastic" data-bind="click: function() { showFullInfo(!showFullInfo()); }">ℹ</span>
|
<span class="infoParent g-ui-user-select-none fontastic" data-bind="click: function() { showFullInfo(!showFullInfo()); }">ℹ</span>
|
||||||
|
|
|
||||||
8
vendors/fontastic/styles.css
vendored
8
vendors/fontastic/styles.css
vendored
|
|
@ -9,6 +9,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.fontastic,
|
.fontastic,
|
||||||
|
[data-icon]::before,
|
||||||
[class^="icon-"]::before,
|
[class^="icon-"]::before,
|
||||||
[class*=" icon-"]::before {
|
[class*=" icon-"]::before {
|
||||||
font-family: "snappymail" !important;
|
font-family: "snappymail" !important;
|
||||||
|
|
@ -22,6 +23,13 @@
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-icon]::before {
|
||||||
|
content: attr(data-icon);
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
.icon-arrows-in::before {
|
.icon-arrows-in::before {
|
||||||
content: "\e000";
|
content: "\e000";
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue