Reduce HTML with improved fontastic

This commit is contained in:
the-djmaze 2022-01-28 10:19:21 +01:00
parent c09c71df75
commit 997f0da59f
16 changed files with 39 additions and 105 deletions

View file

@ -66,10 +66,6 @@
margin-left: 8px;
}
.button-close, .button-skip {
margin-left: 8px;
}
.disabled.button-delete {
margin-left: 0;
}

View file

@ -2,6 +2,10 @@
@folderItemPadding: 7px;
@subPadding: 15px;
.sortFolder [data-icon]::before {
width: 2.5em;
}
.b-folders {
> * {

View file

@ -47,13 +47,6 @@
margin-bottom: 0;
}
.button-delete {
margin-right: 15px;
margin-top: 5px;
visibility: hidden;
opacity: 0;
}
.unsubscribed-folder, .unchecked-folder {
opacity: 0.4;
}

View file

@ -17,9 +17,9 @@
</td>
<td data-bind="text: version"></td>
<td>
<a class="icon-download button-download" data-bind="visible: !loading() && canBeUpdated, click: function () { $root.installPackage($data); }"></a>
<a class="fontastic" data-bind="visible: !loading() && canBeUpdated, click: function () { $root.installPackage($data); }">📥</a>
&nbsp;
<a class="fontastic button-delete" data-bind="visible: !loading() && canBeDeleted, click: function () { $root.deletePackage($data); }">🗑</a>
<a class="fontastic" data-bind="visible: !loading() && canBeDeleted, click: function () { $root.deletePackage($data); }">🗑</a>
<i class="icon-spinner" data-bind="visible: loading"></i>
</td>
</tr>

View file

@ -186,7 +186,7 @@
</form>
</div>
<footer>
<a class="btn button-test-connection" data-bind="command: testConnectionCommand, css: {
<a class="btn" data-bind="command: testConnectionCommand, css: {
'btn-success': testingDone() && !testingImapError() && !testingSmtpError(),
'btn-danger': testingDone() && (testingImapError() || testingSmtpError()) }">
<i class="fontastic" data-bind="css: {'icon-spinner': testing()}"></i>

View file

@ -31,17 +31,12 @@
</div>
<!-- /ko -->
<div class="btn-group" data-bind="visible: mobileCheckedStateShow()">
<a class="btn button-archive"
data-bind="visible: isArchiveVisible, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">
<i class="icon-archive"></i>
</a>
<a class="btn button-spam fontastic" data-bind="visible: isSpamVisible, command: spamCommand" data-i18n="[title]GLOBAL/SPAM"></a>
<a class="btn button-not-spam"
data-bind="visible: isUnSpamVisible, command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
<a class="btn fontastic" data-bind="visible: isArchiveVisible, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">🗄</a>
<a class="btn fontastic" data-bind="visible: isSpamVisible, command: spamCommand" data-i18n="[title]GLOBAL/SPAM"></a>
<a class="btn" data-bind="visible: isUnSpamVisible, command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
<i class="icon-check-mark-circle-two"></i>
</a>
<a class="btn button-delete fontastic"
data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
<a class="btn fontastic" data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
</div>
<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
<a id="more-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]GLOBAL/MORE"></a>
@ -76,52 +71,28 @@
<a id="sort-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]MESSAGE_LIST/SORT" data-bind="text: sortText"></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="sort-list-dropdown-id">
<li role="presentation" data-sort="" data-bind="click: changeSort">
<a href="#" tabindex="-1">
<i class="fontastic">📅⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_DATE_DESC"></span>
</a>
<a href="#" tabindex="-1" data-icon="📅⬇" data-i18n="MESSAGE_LIST/SORT_DATE_DESC"></a>
</li>
<li role="presentation" data-sort="DATE" data-bind="click: changeSort">
<a href="#" tabindex="-1">
<i class="fontastic">📅⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_DATE_ASC"></span>
</a>
<a href="#" tabindex="-1" data-icon="📅⬆" data-i18n="MESSAGE_LIST/SORT_DATE_ASC"></a>
</li>
<li class="dividerbar" role="presentation" data-sort="REVERSE SIZE" data-bind="click: changeSort">
<a href="#" tabindex="-1">
<i class="fontastic">✉⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_SIZE_DESC"></span>
</a>
<a href="#" tabindex="-1" data-icon="✉⬇" data-i18n="MESSAGE_LIST/SORT_SIZE_DESC"></a>
</li>
<li role="presentation" data-sort="SIZE" data-bind="click: changeSort">
<a href="#" tabindex="-1">
<i class="fontastic">✉⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_SIZE_ASC"></span>
</a>
<a href="#" tabindex="-1" data-icon="✉⬆" data-i18n="MESSAGE_LIST/SORT_SIZE_ASC"></a>
</li>
<li class="dividerbar" role="presentation" data-sort="SUBJECT" data-bind="click: changeSort">
<a href="#" tabindex="-1">
<i class="fontastic">𝐒⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_ASC"></span>
</a>
<a href="#" tabindex="-1" data-icon="𝐒⬇" data-i18n="MESSAGE_LIST/SORT_SUBJECT_ASC"></a>
</li>
<li role="presentation" data-sort="REVERSE SUBJECT" data-bind="click: changeSort">
<a href="#" tabindex="-1">
<i class="fontastic">𝐒⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_DESC"></span>
</a>
<a href="#" tabindex="-1" data-icon="𝐒⬆" data-i18n="MESSAGE_LIST/SORT_SUBJECT_DESC"></a>
</li>
<li class="dividerbar" role="presentation" data-sort="FROM" data-bind="click: changeSort">
<a href="#" tabindex="-1">
<i class="fontastic">@⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_FROM_ASC"></span>
</a>
<a href="#" tabindex="-1" data-icon="@⬇" data-i18n="MESSAGE_LIST/SORT_FROM_ASC"></a>
</li>
<li role="presentation" data-sort="REVERSE FROM" data-bind="click: changeSort">
<a href="#" tabindex="-1">
<i class="fontastic">@⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_FROM_DESC"></span>
</a>
<a href="#" tabindex="-1" data-icon="@⬆" data-i18n="MESSAGE_LIST/SORT_FROM_DESC"></a>
</li>
</ul>
</div>

View file

@ -8,14 +8,12 @@
<a class="btn btn-success buttonEdit fontastic" data-bind="command: messageEditCommand">🖉</a>
</div>
<div class="btn-group">
<a class="btn button-archive" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">
<i class="icon-archive"></i>
</a>
<a class="btn button-spam fontastic" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand" data-i18n="[title]GLOBAL/SPAM"></a>
<a class="btn button-not-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
<a class="btn fontastic" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">🗄</a>
<a class="btn fontastic" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand" data-i18n="[title]GLOBAL/SPAM"></a>
<a class="btn" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
<i class="icon-check-mark-circle-two"></i>
</a>
<a class="btn button-delete fontastic" data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
<a class="btn fontastic" data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
</div>
<div class="btn-group">
<a class="btn btn-thin buttonUp fontastic" data-bind="command: goUpCommand"></a>
@ -72,10 +70,7 @@
</div>
<div class="dividerbar">
<li role="presentation" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
<a href="#" tabindex="-1" data-bind="command: archiveCommand">
<i class="icon-archive"></i>
<span data-i18n="GLOBAL/TO_ARCHIVE"></span>
</a>
<a href="#" tabindex="-1" data-bind="command: archiveCommand" data-icon="🗄" data-i18n="GLOBAL/TO_ARCHIVE"></a>
</li>
<li role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
<a href="#" tabindex="-1" data-bind="command: spamCommand" data-icon="⚠" data-i18n="GLOBAL/SPAM"></a>
@ -119,10 +114,7 @@
</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>
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: viewDownloadLink }" data-icon="📥" data-i18n="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></a>
</li>
</div>
</ul>

View file

@ -1,5 +1,5 @@
<header class="g-ui-user-select-none" data-bind="css: {'loading': saving() || sending()}">
<a class="btn button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
<a class="btn" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
<i data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner': sending()}"></i>
<span class="hide-mobile" data-i18n="COMPOSE/BUTTON_SEND"></span>
</a>

View file

@ -4,14 +4,14 @@
<div class="btn-toolbar">
<a class="btn button-create-contact" data-bind="command: newCommand">
<a class="btn" data-bind="command: newCommand">
<i class="fontastic"></i>
<span data-i18n="CONTACTS/BUTTON_ADD_CONTACT"></span>
</a>
<a class="btn btn-success button-new-message fontastic" data-bind="command: newMessageCommand"></a>
<a class="btn btn-success fontastic" data-bind="command: newMessageCommand"></a>
<a class="btn button-delete fontastic" data-bind="command: deleteCommand">🗑</a>
<a class="btn fontastic" data-bind="command: deleteCommand">🗑</a>
<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, visible: !contacts.importing() && !contacts.syncing()">
<a id="contacts-more-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1"></a>
@ -83,7 +83,7 @@
<span data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: '' !== viewID()"></span>
</button>
</div>
<div class="btn-group dropdown button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
<div class="btn-group dropdown" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
<a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle">
<span data-i18n="CONTACTS/ADD_MENU_LABEL"></span>
<span class="caret"></span>

View file

@ -37,7 +37,7 @@
<table class="table table-striped table-bordered">
<tbody>
<tr><td class="fontastic"></td><td data-i18n="SHORTCUTS_HELP/LABEL_CHECK_ALL"></td><td><!-- ko text: metaKey --><!-- /ko --> + A</td></tr>
<tr><td class="icon-archive"></td><td data-i18n="GLOBAL/TO_ARCHIVE"></td><td>Z</td></tr>
<tr><td class="fontastic">🗄</td><td data-i18n="GLOBAL/TO_ARCHIVE"></td><td>Z</td></tr>
<tr><td class="fontastic">🗑</td><td data-i18n="SHORTCUTS_HELP/LABEL_DELETE"></td><td>Delete, Shift + Delete</td></tr>
<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_THREAD"></td><td>T</td></tr>
<tr><td class="fontastic">📁</td><td data-i18n="SHORTCUTS_HELP/LABEL_MOVE"></td><td>Insert</td></tr>

View file

@ -12,7 +12,7 @@
<td data-i18n="[title]SETTINGS_FOLDERS/HELP_DELETE_FOLDER">
<a class="btn btn-small btn-small-small btn-danger button-confirm-delete" data-bind="css: {'delete-access': askDelete()}, click: $root.deleteFolder"
data-i18n="GLOBAL/ARE_YOU_SURE"></a>
<span class="delete-folder e-action fontastic" data-bind="visible: canBeDeleted() && !askDelete(), click: $root.folderForDeletion">🗑</span>
<span class="e-action fontastic" data-bind="visible: canBeDeleted() && !askDelete(), click: $root.folderForDeletion">🗑</span>
</td>
<td data-i18n="[title]SETTINGS_FOLDERS/HELP_SHOW_HIDE_FOLDER">
<span class="e-action fontastic" data-bind="css: {'unsubscribed-folder':!subscribed()}, visible: canBeSubscribed(), click: $root.toggleFolderSubscription">👁</span>

View file

@ -4,7 +4,7 @@
<a class="btn btn-thin fontastic toggleLeft" data-bind="click: leftPanelDisabled.toggle, text: leftPanelDisabled() ? '' : ''"></a>
</div>
<!-- /ko -->
<a class="btn button-back" data-bind="click: backToMailBoxClick">
<a class="btn" data-bind="click: backToMailBoxClick">
<i class="fontastic"></i>
<span data-i18n="GLOBAL/BACK"></span>
</a>

View file

@ -31,22 +31,13 @@
<!-- /ko -->
<li class="dividerbar" role="presentation" data-bind="visible: allowAccounts">
<a href="#" tabindex="-1" data-bind="click: addAccountClick">
<i class="fontastic"></i>
<span data-i18n="TOP_TOOLBAR/BUTTON_ADD_ACCOUNT"></span>
</a>
<a href="#" tabindex="-1" data-bind="click: addAccountClick" data-icon="✚" data-i18n="TOP_TOOLBAR/BUTTON_ADD_ACCOUNT"></a>
</li>
<li role="presentation" data-bind="visible: allowContacts">
<a href="#" tabindex="-1" data-bind="click: contactsClick">
<i class="fontastic">📇</i>
<span data-i18n="GLOBAL/CONTACTS"></span>
</a>
<a href="#" tabindex="-1" data-bind="click: contactsClick" data-icon="📇" data-i18n="GLOBAL/CONTACTS"></a>
</li>
<li role="presentation">
<a href="#" tabindex="-1" data-bind="click: settingsClick">
<i class="fontastic"></i>
<span data-i18n="TOP_TOOLBAR/BUTTON_SETTINGS"></span>
</a>
<a href="#" tabindex="-1" data-bind="click: settingsClick" data-icon="⚙" data-i18n="TOP_TOOLBAR/BUTTON_SETTINGS"></a>
</li>
<li role="presentation">
<a href="#" tabindex="-1" data-bind="click: settingsHelp">
@ -55,18 +46,11 @@
</a>
</li>
<li class="dividerbar" role="presentation">
<a href="#" tabindex="-1" data-bind="click: toggleLayout">
<i class="fontastic show-mobile">💻</i>
<span class="show-mobile" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></span>
<i class="fontastic hide-mobile">📱</i>
<span class="hide-mobile" data-i18n="MOBILE/BUTTON_MOBILE_VERSION"></span>
</a>
<a href="#" tabindex="-1" data-bind="click: toggleLayout" data-icon="💻" class="show-mobile" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></a>
<a href="#" tabindex="-1" data-bind="click: toggleLayout" data-icon="📱" class="hide-mobile" data-i18n="MOBILE/BUTTON_MOBILE_VERSION"></a>
</li>
<li role="presentation">
<a href="#" tabindex="-1" data-bind="click: logoutClick">
<i class="fontastic"></i>
<span data-i18n="GLOBAL/LOGOUT"></span>
</a>
<a href="#" tabindex="-1" data-bind="click: logoutClick" data-icon="⏻" data-i18n="GLOBAL/LOGOUT"></a>
</li>
</ul>
</div>

Binary file not shown.

Binary file not shown.

View file

@ -93,18 +93,12 @@
.icon-folder-add::before {
content: "\e03c";
}
.icon-download::before {
content: "\e043";
}
.icon-popup::before {
content: "\e045";
}
.icon-mail::before {
content: "✉";
}
.icon-archive::before {
content: "\e05f"; /* 🗃 🗄️ */
}
.icon-filter::before {
content: "\e061"; /* ⊆ */
}