Reduce more HTML elements thanks to data-icon="" attribute

This commit is contained in:
the-djmaze 2022-01-28 12:23:05 +01:00
parent 997f0da59f
commit bf19f72a6b
25 changed files with 42 additions and 149 deletions

View file

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

View file

@ -10,7 +10,6 @@
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
vertical-align: text-top;
.disabled &,

View file

@ -2,15 +2,9 @@
<span data-i18n="TAB_DOMAINS/LEGEND_DOMAINS"></span>
<i class="icon-spinner" style="margin: 5px" data-bind="visible: domains.loading"></i>
</div>
<a class="btn" data-bind="click: createDomain">
<i class="fontastic"></i>
<span data-i18n="TAB_DOMAINS/BUTTON_ADD_DOMAIN"></span>
</a>
<a class="btn" data-bind="click: createDomain" data-icon="✚" data-i18n="TAB_DOMAINS/BUTTON_ADD_DOMAIN"></a>
&nbsp;&nbsp;
<a class="btn" data-bind="click: createDomainAlias">
<i class="fontastic"></i>
<span data-i18n="TAB_DOMAINS/BUTTON_ADD_ALIAS"></span>
</a>
<a class="btn" data-bind="click: createDomainAlias" data-icon="✚" data-i18n="TAB_DOMAINS/BUTTON_ADD_ALIAS"></a>
<br />
<br />
<blockquote>

View file

@ -49,10 +49,8 @@
data-bind="textInput: adminTOTP" />
</div>
<div class="control-group">
<a class="btn" data-bind="command: saveNewAdminPasswordCommand, css: { 'btn-success': adminPasswordUpdateSuccess, 'btn-danger': adminPasswordUpdateError }">
<i class="fontastic">🔑</i>
<span data-i18n="TAB_SECURITY/BUTTON_UPDATE_PASSWORD"></span>
</a>
<a class="btn" data-bind="command: saveNewAdminPasswordCommand, css: { 'btn-success': adminPasswordUpdateSuccess, 'btn-danger': adminPasswordUpdateError }"
data-icon="🔑" data-i18n="TAB_SECURITY/BUTTON_UPDATE_PASSWORD"></a>
</div>
</div>
<div class="form-horizontal">

View file

@ -174,10 +174,7 @@
</div>
<input type="radio" name="helptabs" id="tab-help4" />
<label for="tab-help4" role="tab" tabindex="0">
<i class="fontastic">👥</i>
<span data-i18n="POPUPS_DOMAIN/BUTTON_WHITE_LIST"></span>
</label>
<label for="tab-help4" role="tab" tabindex="0" data-icon="👥" data-i18n="POPUPS_DOMAIN/BUTTON_WHITE_LIST"></label>
<div class="tab-content" role="tabpanel" aria-hidden="true">
<div class="alert" data-i18n="POPUPS_DOMAIN/WHITE_LIST_ALERT"></div>
<textarea class="input-xxlarge" style="width: 100%" rows="8" data-bind="value: whiteList" tabindex="-1"></textarea>
@ -192,10 +189,7 @@
<i class="fontastic" data-bind="css: {'icon-spinner': testing()}"></i>
<span data-i18n="POPUPS_DOMAIN/BUTTON_TEST"></span>
</a>
<a class="btn buttonClose" data-bind="command: cancelCommand">
<i class="fontastic"></i>
<span data-i18n="POPUPS_DOMAIN/BUTTON_CLOSE"></span>
</a>
<a class="btn buttonClose" data-bind="command: cancelCommand" data-icon="✖" data-i18n="POPUPS_DOMAIN/BUTTON_CLOSE"></a>
<a class="btn" data-bind="command: createOrAddCommand, visible: edit()">
<i class="fontastic" data-bind="css: {'icon-spinner': saving()}"></i>
<span data-i18n="POPUPS_DOMAIN/BUTTON_UPDATE"></span>

View file

@ -31,10 +31,7 @@
</div>
</div>
<footer>
<a class="btn buttonClose" data-bind="command: cancelCommand">
<i class="fontastic"></i>
<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_CLOSE"></span>
</a>
<a class="btn buttonClose" data-bind="command: cancelCommand" data-icon="✖" data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_CLOSE"></a>
<a class="btn" data-bind="command: createCommand">
<i class="fontastic" data-bind="visible: !saving()"></i>
<i class="icon-spinner" data-bind="visible: saving"></i>

View file

@ -20,12 +20,6 @@
</form>
</div>
<footer>
<a class="btn buttonClose" data-bind="command: cancelCommand">
<i class="fontastic"></i>
<span data-i18n="POPUPS_PLUGIN/BUTTON_CLOSE"></span>
</a>
<a class="btn" data-bind="command: saveCommand, visible: hasConfiguration">
<i class="fontastic"></i>
<span data-i18n="GLOBAL/SAVE"></span>
</a>
<a class="btn buttonClose" data-bind="command: cancelCommand" data-icon="✖" data-i18n="POPUPS_PLUGIN/BUTTON_CLOSE"></a>
<a class="btn" data-bind="command: saveCommand, visible: hasConfiguration" data-icon="✔" data-i18n="GLOBAL/SAVE"></a>
</footer>

View file

@ -1,11 +1,5 @@
<div class="modal-body" data-bind="html: askDesc"></div>
<footer>
<button class="btn buttonYes" data-bind="click: yesClick">
<i class="fontastic"></i>
<span data-bind="text: yesButton"></span>
</button>
<button class="btn buttonNo" data-bind="click: noClick">
<i class="fontastic"></i>
<span data-bind="text: noButton"></span>
</button>
<button class="btn buttonYes" data-bind="click: yesClick, text: yesButton" data-icon="✔"></button>
<button class="btn buttonNo" data-bind="click: noClick, text: noButton" data-icon="✖"></button>
</footer>

View file

@ -110,15 +110,11 @@
<!-- /ko -->
</div>
<div class="b-content" data-bind="initDom: dragOverBodyArea">
<div class="listThreadUidDesc" data-bind="visible: messageListThreadUid(), click: cancelThreadUid">
<i class="fontastic"></i>
<span data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></span>
</div>
<div class="listThreadUidDesc" data-bind="visible: messageListThreadUid(), click: cancelThreadUid"
data-icon="⬅" data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></div>
<div class="listSearchDesc" data-bind="visible: messageListSearchDesc(), text: messageListSearchDesc"></div>
<div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && !messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea">
<i class="fontastic"></i>
<span data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></span>
</div>
<div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && !messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea"
data-icon="⬇" data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></div>
<div class="listClear" data-bind="visible: clearListIsVisible()">
<a href="#" class="g-ui-link" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER" data-bind="command: clearCommand"></a>
</div>

View file

@ -23,10 +23,7 @@
</div>
<div class="b-content">
<div class="b-message-view-backdrop" data-bind="visible: moveAction">
<div class="backdrop-message">
<i class="fontastic">📁</i>
<span data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></span>
</div>
<div class="backdrop-message" data-icon="📁" data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></div>
</div>
<div class="b-message-view-checked-helper" data-bind="visible: !message() && '' === messageError() && hasCheckedMessages()">
<span data-bind="text: printableCheckedMessageCount()"></span>
@ -221,14 +218,10 @@
<div data-bind="visible: !messageLoadingThrottle()">
<div class="bodySubHeader">
<div class="showImages" data-bind="visible: message() && message().hasImages(), click: showImages">
<i class="fontastic">🖼</i>
<span class="text" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></span>
</div>
<div class="readReceipt" data-bind="visible: message() && !isDraftOrSentFolder() && '' !== message().readReceipt() && !message().isReadReceipt(), click: readReceipt">
<i class="fontastic"></i>
<span class="text" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></span>
</div>
<div class="showImages" data-bind="visible: message() && message().hasImages(), click: showImages"
data-icon="🖼" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></div>
<div class="readReceipt" data-bind="visible: message() && !isDraftOrSentFolder() && '' !== message().readReceipt() && !message().isReadReceipt(), click: readReceipt"
data-icon="✉" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></div>
<div class="attachmentsPlace" data-bind="visible: message() && message().attachments().hasVisible(),
css: {'selection-mode' : showAttachmentControls, 'unselectedAttachmentsError': highlightUnselectedAttachments}">
<ul class="attachmentList" data-bind="foreach: message() ? message().attachments() : []">
@ -277,18 +270,15 @@
</div>
<div class="openpgp-control encrypted" data-bind="visible: pgpEncrypted">
<i class="fontastic">🔒</i>
<span data-i18n="MESSAGE/PGP_ENCRYPTED_MESSAGE_DESC"></span>
<span data-icon="🔒" data-i18n="MESSAGE/PGP_ENCRYPTED_MESSAGE_DESC"></span>
<button class="btn" data-bind="visible: pgpSupported, click: pgpDecrypt" data-i18n="OPENPGP/BUTTON_DECRYPT"></button>
</div>
<div class="openpgp-control signed" data-bind="visible: pgpSigned">
<i class="fontastic">✍️</i>
<span data-i18n="MESSAGE/PGP_SIGNED_MESSAGE_DESC"></span>
<span data-icon="✍" data-i18n="MESSAGE/PGP_SIGNED_MESSAGE_DESC"></span>
<button class="btn" data-bind="visible: pgpSupported, click: pgpVerify" data-i18n="MESSAGE/BUTTON_PGP_VERIFY"></button>
</div>
<div class="bodyText"
data-bind="initDom: messagesBodiesDom"></div>
<div class="bodyText" data-bind="initDom: messagesBodiesDom"></div>
</div>
</div>
</div>

View file

@ -85,8 +85,5 @@
</form>
</div>
<footer>
<button type="submit" class="btn buttonAdvSearch" data-bind="command: searchCommand">
<i class="fontastic">🔎</i>
<span data-i18n="GLOBAL/SEARCH"></span>
</a>
<button type="submit" class="btn buttonAdvSearch" data-bind="command: searchCommand" data-icon="🔎" data-i18n="GLOBAL/SEARCH"></button>
</footer>

View file

@ -4,10 +4,7 @@
<div class="btn-toolbar">
<a class="btn" data-bind="command: newCommand">
<i class="fontastic"></i>
<span data-i18n="CONTACTS/BUTTON_ADD_CONTACT"></span>
</a>
<a class="btn" data-bind="command: newCommand" data-icon="✚" data-i18n="CONTACTS/BUTTON_ADD_CONTACT"></a>
<a class="btn btn-success fontastic" data-bind="command: newMessageCommand"></a>

View file

@ -36,10 +36,7 @@
<div class="control-group" data-bind="visible: 0 === conditions().length"
data-i18n="POPUPS_FILTER/ALL_INCOMING_MESSAGES_DESC"></div>
<div class="control-group">
<a class="btn" data-bind="click: addCondition, i18nInit: true">
<i class="fontastic"></i>
<span data-i18n="POPUPS_FILTER/BUTTON_ADD_CONDITION"></span>
</a>
<a class="btn" data-bind="click: addCondition, i18nInit: true" data-icon="✚" data-i18n="POPUPS_FILTER/BUTTON_ADD_CONDITION"></a>
</div>
<div class="legend" data-i18n="POPUPS_FILTER/LEGEND_ACTIONS"></div>
@ -49,8 +46,5 @@
</div>
</div>
<footer>
<a class="btn buttonSave" data-bind="command: saveFilterCommand">
<i class="fontastic"></i>
<span data-i18n="GLOBAL/DONE"></span>
</a>
<a class="btn buttonSave" data-bind="command: saveFilterCommand" data-icon="✔" data-i18n="GLOBAL/DONE"></a>
</footer>

View file

@ -27,9 +27,5 @@
</div>
</div>
<footer>
<a class="btn" data-bind="command: addOpenPgpKeyCommand">
<i class="icon-list-add"></i>
&nbsp;&nbsp;
<span data-i18n="OPENPGP/POPUP_IMPORT_BUTTON"></span>
</a>
<a class="btn" data-bind="command: addOpenPgpKeyCommand" data-icon="✚" data-i18n="OPENPGP/POPUP_IMPORT_BUTTON"></a>
</footer>

View file

@ -17,14 +17,8 @@
/>
</div>
<div class="alert g-ui-user-select-none" data-bind="visible: hasChanges">
<i class="fontastic"></i>
<span data-i18n="POPUPS_SIEVE_SCRIPT/CHANGES_NEED_TO_BE_SAVED_DESC"></span>
</div>
<div class="alert alert-error g-ui-user-select-none" data-bind="visible: $root.saveError">
<i class="fontastic"></i>
<span data-bind="text: $root.saveErrorText"></span>
</div>
<div class="alert g-ui-user-select-none" data-bind="visible: hasChanges" data-icon="⚠" data-i18n="POPUPS_SIEVE_SCRIPT/CHANGES_NEED_TO_BE_SAVED_DESC"></div>
<div class="alert alert-error g-ui-user-select-none" data-bind="visible: $root.saveError" data-icon="⚠" data-bind="text: $root.saveErrorText"></div>
<div class="control-group" data-bind="visible: $root.rawActive">
<div>
@ -64,10 +58,7 @@
</tr>
</tbody>
</table>
<a class="btn" data-bind="click: $root.addFilter">
<i class="fontastic"></i>
<span data-i18n="POPUPS_SIEVE_SCRIPT/BUTTON_ADD_FILTER"></span>
</a>
<a class="btn" data-bind="click: $root.addFilter" data-icon="✚" data-i18n="POPUPS_SIEVE_SCRIPT/BUTTON_ADD_FILTER"></a>
</div>
</div>
<footer>

View file

@ -10,12 +10,6 @@
</div>
</div>
<footer>
<a class="btn buttonClose" data-bind="command: cancelCommand">
<i class="fontastic"></i>
<span data-i18n="GLOBAL/CLOSE"></span>
</a>
<a class="btn buttonClose" data-bind="click: selectKey">
<i class="fontastic">🔑</i>
<span data-i18n="OPENPGP/POPUP_VIEW_BUTTON"></span>
</a>
<a class="btn buttonClose" data-bind="command: cancelCommand" data-icon="✖" data-i18n="GLOBAL/CLOSE"></a>
<a class="btn buttonClose" data-bind="click: selectKey" data-icon="🔑" data-i18n="OPENPGP/POPUP_VIEW_BUTTON"></a>
</footer>

View file

@ -5,10 +5,7 @@
<i class="icon-spinner" style="margin-top: 5px" data-bind="visible: loading"></i>
</div>
</div>
<div class="alert alert-error g-ui-user-select-none" data-bind="visible: serverError">
<i class="fontastic"></i>
<span data-bind="text: serverErrorDesc"></span>
</div>
<div class="alert alert-error g-ui-user-select-none" data-bind="visible: serverError" data-icon="⚠" data-bind="text: serverErrorDesc"></div>
<table class="table table-hover list-table g-ui-user-select-none"
data-bind="i18nUpdate: scripts">
<colgroup>
@ -33,7 +30,4 @@
</tr>
</tbody>
</table>
<a class="btn" data-bind="click: $root.addScript">
<i class="fontastic"></i>
<span data-i18n="SETTINGS_FILTERS/BUTTON_ADD_SCRIPT"></span>
</a>
<a class="btn" data-bind="click: $root.addScript" data-icon="✚" data-i18n="SETTINGS_FILTERS/BUTTON_ADD_SCRIPT"></a>

View file

@ -15,10 +15,7 @@
<span data-i18n="SETTINGS_FOLDERS/BUTTON_CREATE"></span>
</a>
&nbsp;&nbsp;
<a class="btn" data-bind="click: systemFolder">
<i class="fontastic">🔧</i>
<span data-i18n="SETTINGS_FOLDERS/BUTTON_SYSTEM"></span>
</a>
<a class="btn" data-bind="click: systemFolder" data-icon="🔧" data-i18n="SETTINGS_FOLDERS/BUTTON_SYSTEM"></a>
<div class="alert folders-list-error" data-bind="visible: folderListOptimized">
<b data-i18n="SETTINGS_FOLDERS/TO_MANY_FOLDERS_DESC_1"></b>
<br />

View file

@ -1,16 +1,8 @@
<div class="legend">OpenPGP</div>
<button class="btn" data-bind="click: addOpenPgpKey">
<i class="icon-list-add"></i>
<span data-i18n="SETTINGS_OPEN_PGP/BUTTON_ADD_OPEN_PGP_KEY"></span>
</button>
<button class="btn" data-bind="click: addOpenPgpKey" data-icon="✚" data-i18n="SETTINGS_OPEN_PGP/BUTTON_ADD_OPEN_PGP_KEY"></button>
<!-- ko if: canOpenPGP || canGnuPG -->
&nbsp;&nbsp;
<div style="display: inline-block">
<button class="btn" data-bind="click: generateOpenPgpKey">
<i class="fontastic">🔑</i>
<span data-i18n="SETTINGS_OPEN_PGP/BUTTON_GENERATE_OPEN_PGP_KEYS"></span>
</button>
</div>
<button class="btn" data-bind="click: generateOpenPgpKey" data-icon="🔑" data-i18n="SETTINGS_OPEN_PGP/BUTTON_GENERATE_OPEN_PGP_KEYS"></button>
<!-- /ko -->
<br />

View file

@ -4,9 +4,6 @@
<a class="btn btn-thin fontastic toggleLeft" data-bind="click: leftPanelDisabled.toggle, text: leftPanelDisabled() ? '' : ''"></a>
</div>
<!-- /ko -->
<a class="btn" data-bind="click: backToMailBoxClick">
<i class="fontastic"></i>
<span data-i18n="GLOBAL/BACK"></span>
</a>
<a class="btn" data-bind="click: backToMailBoxClick" data-icon="⬅" data-i18n="GLOBAL/BACK"></a>
</div>
<div id="rl-settings-subscreen"></div>

View file

@ -17,9 +17,7 @@
<div class="alert alert-error span6" data-bind="text: background.error" style="margin-left: 0"></div>
</div>
<div class="row" data-bind="visible: '' !== background.name()" style="margin-left: 0">
<a class="btn" data-bind="visible: '' !== background.name(), click: clearBackground">
<i class="fontastic"></i>
</a>
<a class="btn" data-bind="visible: '' !== background.name(), click: clearBackground" data-icon="✖"></a>
&nbsp;&nbsp;&nbsp;
<b data-bind="text: background.name"></b>
</div>

Binary file not shown.

Binary file not shown.

View file

@ -172,10 +172,6 @@
<div class="icon icon-at"></div>
<input type="text" readonly="readonly" value="at">
</li>
<li>
<div class="icon icon-list-add"></div>
<input type="text" readonly="readonly" value="list-add">
</li>
<li>
<div class="icon icon-google"></div>
<input type="text" readonly="readonly" value="google">

View file

@ -26,8 +26,9 @@
[data-icon]::before {
content: attr(data-icon);
display: inline-block;
width: 1.5em;
height: 1em;
margin-right: 0.5em;
min-width: 1em;
}
.icon-arrows-in::before {
@ -48,9 +49,6 @@
.icon-down-mini::before {
content: "\e01f"; /* rotate 90 */
}
.icon-list-add::before {
content: "\e024";
}
.icon-warning-alt::before {
content: "\e02a";
}