Improved icon font view

This commit is contained in:
djmaze 2021-02-11 17:46:29 +01:00
parent 93738eac22
commit 4a8c9f8e18
31 changed files with 115 additions and 196 deletions

View file

@ -1,7 +1,8 @@
import { doc, createElement } from 'Common/Globals'; import { doc, createElement } from 'Common/Globals';
import { EmailModel } from 'Model/Email'; import { EmailModel } from 'Model/Email';
const contentType = 'snappymail/emailaddress'; const contentType = 'snappymail/emailaddress',
getAddressKey = li => li && li.emailaddress && li.emailaddress.key;
let dragAddress, datalist; let dragAddress, datalist;
@ -165,7 +166,7 @@ export class EmailAddressesComponent {
_editTag(ev) { _editTag(ev) {
var li = ev.target.closest('li'), var li = ev.target.closest('li'),
tagKey = li && li.emailaddress.key; tagKey = getAddressKey(li);
if (!tagKey) { if (!tagKey) {
return true; return true;
@ -344,7 +345,7 @@ export class EmailAddressesComponent {
_removeTag(ev, li) { _removeTag(ev, li) {
ev.preventDefault(); ev.preventDefault();
var key = li.emailaddress.key, var key = getAddressKey(li),
self = this, self = this,
indexFound = self._chosenValues.findIndex(v => key === v.key); indexFound = self._chosenValues.findIndex(v => key === v.key);
@ -358,7 +359,7 @@ export class EmailAddressesComponent {
_removeDraggedTag(li) { _removeDraggedTag(li) {
var var
key = li.emailaddress.key, key = getAddressKey(li),
self = this, self = this,
indexFound = self._chosenValues.findIndex(v => key === v.key) indexFound = self._chosenValues.findIndex(v => key === v.key)
; ;
@ -380,7 +381,7 @@ export class EmailAddressesComponent {
_focus(ev) { _focus(ev) {
var li = ev.target.closest('li'); var li = ev.target.closest('li');
if (li && li.emailaddress.key) { if (getAddressKey(li)) {
li.querySelector('a').focus(); li.querySelector('a').focus();
} else { } else {
this.focus(); this.focus();

View file

@ -28,13 +28,14 @@
box-shadow: 0 0 0 1px rgba(0, 0, 255, 0.1), 0 1px 5px rgba(0, 0, 255, 0.2); box-shadow: 0 0 0 1px rgba(0, 0, 255, 0.1), 0 1px 5px rgba(0, 0, 255, 0.2);
} }
.checkedParent { .checkboxAttachment {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
padding: 1px 4px 0 5px; padding: 1px 4px 0 5px;
background: #FAFAFA; background: #FAFAFA;
border: 0 solid #CCC; border: 0 solid #CCC;
cursor: pointer;
} }
.attachmentSize { .attachmentSize {

View file

@ -111,7 +111,7 @@
} }
&.hideContactListCheckbox { &.hideContactListCheckbox {
.checkedParent, .checkboxCkeckAll { .checkboxItem {
display: none !important; display: none !important;
} }
.sidebarParent { .sidebarParent {
@ -165,10 +165,11 @@
border-color: transparent !important; border-color: transparent !important;
} }
.checkedParent { .checkboxItem {
display: inline-block; display: inline-block;
float: left; float: left;
padding: 0 8px 0 6px; padding: 0 8px 0 6px;
line-height: 45px;
} }
.nameParent { .nameParent {

View file

@ -65,12 +65,13 @@
padding: 0; padding: 0;
} }
.emailaddresses input[type="text"], #rl-app .emailaddresses input[type="text"],
.emailaddresses input[type="text"]:focus, #rl-app .emailaddresses input[type="text"]:focus,
.emailaddresses input[type="text"]:hover { #rl-app .emailaddresses input[type="text"]:hover {
border: 0; border: 0;
box-shadow: none; box-shadow: none;
height: 24px; height: auto;
line-height: inherit;
margin: 0; margin: 0;
outline: 0; outline: 0;
padding: 0; padding: 0;

View file

@ -86,7 +86,7 @@ html.rl-no-preview-pane {
border-top-left-radius: @rlMainBorderRadius; border-top-left-radius: @rlMainBorderRadius;
border-bottom: 1px solid #bbb; border-bottom: 1px solid #bbb;
.checkboxCkeckAll { .checkboxCheckAll {
margin: 5px 0; margin: 5px 0;
} }
} }
@ -558,7 +558,7 @@ html.rl-no-preview-pane {
} }
&.hideMessageListCheckbox { &.hideMessageListCheckbox {
.checkboxMessage, .checkboxCkeckAll { .checkboxMessage, .checkboxCheckAll {
display: none !important; display: none !important;
} }
.sidebarParent { .sidebarParent {

View file

@ -247,7 +247,7 @@ html.rl-no-preview-pane {
border-radius: @rlLowBorderRadius; border-radius: @rlLowBorderRadius;
scroll-behavior: smooth; scroll-behavior: smooth;
.buttonUp, .buttonUnFull, .buttonFull { .buttonUnFull, .buttonFull {
display: inline-block; display: inline-block;
position: fixed; position: fixed;
right: 25px; right: 25px;
@ -274,12 +274,7 @@ html.rl-no-preview-pane {
} }
} }
.buttonUp { .buttonUnFull {
right: 65px;
z-index: 0;
}
.buttonUp, .buttonUnFull {
display: none; display: none;
} }
@ -326,12 +321,12 @@ html.rl-no-preview-pane {
margin: 0; margin: 0;
} }
.checkedParent { .checkboxAttachment {
display: none; display: none;
} }
&.selection-mode { &.selection-mode {
.checkedParent { .checkboxAttachment {
display: inline-block; display: inline-block;
} }
} }
@ -656,14 +651,8 @@ html.rl-message-fullscreen {
} }
} }
html .messageItem {
.buttonUp, .buttonUp {
display: none !important;
}
}
html:not(.rl-mobile) .messageItem { html:not(.rl-mobile) .messageItem {
.buttonUp, .buttonFull { .buttonFull {
display: none !important; display: none !important;
} }
} }
@ -675,7 +664,4 @@ html.rl-message-fullscreen .messageItem {
.buttonFull { .buttonFull {
display: none !important; display: none !important;
} }
.buttonUp {
display: none !important;
}
} }

View file

@ -34,7 +34,6 @@ label.inline, span.inline {
} }
.btn-small.btn-small-small { .btn-small.btn-small-small {
padding: 3px 9px;
font-size: 11px; font-size: 11px;
line-height: 11px; line-height: 11px;
} }

View file

@ -1,5 +1,4 @@
.fontastic,
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
display: inline-block; display: inline-block;
@ -25,7 +24,7 @@
} }
} }
.icon-folder, .icon-folder-add, .icon-list { .icon-folder, .icon-folder-add {
font-size: 18px; font-size: 18px;
margin-top: -1px; margin-top: -1px;
margin-left: -1px; margin-left: -1px;
@ -55,22 +54,6 @@
background-image: none !important; background-image: none !important;
} }
.icon-checkbox-checked, .icon-checkbox-unchecked, .icon-checkbox-partial, .icon-radio-checked, .icon-radio-unchecked {
cursor: pointer;
&:hover, &:active {
filter: brightness(0.5);
}
}
.icon-white {
&.icon-checkbox-checked, &.icon-checkbox-unchecked, &.icon-checkbox-partial, &.icon-radio-checked, &.icon-radio-unchecked {
color: #eee;
&:hover, &:active {
color: #fff;
}
}
}
.iconcolor-display-none { .iconcolor-display-none {
display: none; display: none;
} }

View file

@ -89,10 +89,9 @@ class MessageOpenPgpPopupView extends AbstractViewPopup {
oDom.addEventListener('click', event => { oDom.addEventListener('click', event => {
const el = event.target.closestWithin('.key-list__item', oDom); const el = event.target.closestWithin('.key-list__item', oDom);
if (el) { if (el) {
oDom.querySelectorAll('.key-list__item .key-list__item__radio').forEach(node => { oDom.querySelectorAll('.key-list__item .key-list__item__radio').forEach(node =>
node.classList.toggle('icon-radio-unchecked', el !== node); node.textContent = el === node ? '⦿' : '○'
node.classList.toggle('icon-radio-checked', el === node); );
});
self.selectedKey(ko.dataFor(el)); // eslint-disable-line no-invalid-this self.selectedKey(ko.dataFor(el)); // eslint-disable-line no-invalid-this

View file

@ -16,7 +16,7 @@ class NewOpenPgpKeyPopupView extends AbstractViewPopup {
name: '', name: '',
password: '', password: '',
keyBitLength: 2048, keyBitLength: 4096,
submitRequest: false, submitRequest: false,
submitError: '' submitError: ''
@ -90,7 +90,7 @@ class NewOpenPgpKeyPopupView extends AbstractViewPopup {
this.email(''); this.email('');
this.emailError(false); this.emailError(false);
this.keyBitLength(2048); this.keyBitLength(4096);
this.submitError(''); this.submitError('');
} }

View file

@ -411,14 +411,6 @@ class MessageListMailBoxUserView extends AbstractViewRight {
this.inputMessageListSearchFocus(false); this.inputMessageListSearchFocus(false);
} }
/**
* @returns {string}
*/
printableMessageCountForDeletion() {
const cnt = this.messageListCheckedOrSelectedUidsWithSubMails().length;
return 1 < cnt ? ' (' + (100 > cnt ? cnt : '99+') + ')' : ''; // eslint-disable-line no-magic-numbers
}
cancelSearch() { cancelSearch() {
this.mainMessageListSearch(''); this.mainMessageListSearch('');
this.inputMessageListSearchFocus(false); this.inputMessageListSearchFocus(false);
@ -694,7 +686,7 @@ class MessageListMailBoxUserView extends AbstractViewRight {
let el = eqs(event, '.e-paginator .e-page'); let el = eqs(event, '.e-paginator .e-page');
el && this.gotoPage(ko.dataFor(el)); el && this.gotoPage(ko.dataFor(el));
eqs(event, '.messageList .checkboxCkeckAll') && this.checkAll(!this.checkAll()); eqs(event, '.messageList .checkboxCheckAll') && this.checkAll(!this.checkAll());
el = eqs(event, '.messageList .messageListItem .flagParent'); el = eqs(event, '.messageList .messageListItem .flagParent');
el && this.flagMessages(ko.dataFor(el)); el && this.flagMessages(ko.dataFor(el));

View file

@ -14,8 +14,6 @@
</span> </span>
</td> </td>
<td> <td>
<span class="disabled-domain" data-bind="click: function (oDomain) { $root.disableDomain(oDomain); }"> <span class="disabled-domain fontastic" data-bind="click: function (oDomain) { $root.disableDomain(oDomain); }, text: disabled() ? '☐' : '☑'"></span>
<i data-bind="css: {'icon-checkbox-checked': !disabled(), 'icon-checkbox-unchecked': disabled}"></i>
</span>
</td> </td>
</tr> </tr>

View file

@ -4,8 +4,6 @@
<span class="plugin-name" data-bind="text: name"></span> <span class="plugin-name" data-bind="text: name"></span>
</td> </td>
<td> <td>
<span class="disabled-plugin"> <span class="disabled-plugin e-action fontastic" data-bind="text: disabled() ? '☐' : '☑'"></span>
<i data-bind="css: {'e-action icon-checkbox-checked': !disabled(), 'e-action icon-checkbox-unchecked': disabled}"></i>
</span>
</td> </td>
</tr> </tr>

View file

@ -132,7 +132,7 @@
<div class="row"> <div class="row">
<div class="span5"> <div class="span5">
<span data-bind="command: sieveCommand"> <span data-bind="command: sieveCommand">
<i class="icon-left"></i> <i class="fontastic"></i>
&nbsp; &nbsp;
<a href="#" class="g-ui-link" data-i18n="POPUPS_DOMAIN/BUTTON_BACK_TO_IMAP"></a> <a href="#" class="g-ui-link" data-i18n="POPUPS_DOMAIN/BUTTON_BACK_TO_IMAP"></a>
</span> </span>
@ -233,7 +233,7 @@
<span data-i18n="POPUPS_DOMAIN/BUTTON_WHITE_LIST"></span> <span data-i18n="POPUPS_DOMAIN/BUTTON_WHITE_LIST"></span>
</a> </a>
<a class="btn button-white-list pull-left" data-bind="command: backCommand, visible: 'main' !== page()"> <a class="btn button-white-list pull-left" data-bind="command: backCommand, visible: 'main' !== page()">
<i class="icon-left"></i> <i class="fontastic"></i>
<span data-i18n="POPUPS_DOMAIN/BUTTON_BACK"></span> <span data-i18n="POPUPS_DOMAIN/BUTTON_BACK"></span>
</a> </a>
<a class="btn buttonClose" data-bind="command: cancelCommand"> <a class="btn buttonClose" data-bind="command: cancelCommand">

View file

@ -1,8 +1,5 @@
<span class="e-component e-checkbox inline" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': disable() || !enable() }"> <span class="e-component e-checkbox inline" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': disable() || !enable() }">
<i role="checkbox" class="e-checkbox-icon" data-bind="css: { <i role="checkbox" class="e-checkbox-icon fontastic" data-bind="text: value() ? '☑' : '☐'"></i>
'icon-checkbox-checked': value(),
'icon-checkbox-unchecked': !value()
}"></i>
<!-- ko if: labeled --> <!-- ko if: labeled -->
<span class="sub-label" data-bind="attr: {'data-i18n': label}, css: {'i18n-animation': labelAnimated}"></span> <span class="sub-label" data-bind="attr: {'data-i18n': label}, css: {'i18n-animation': labelAnimated}"></span>
<!-- /ko --> <!-- /ko -->

View file

@ -4,9 +4,7 @@
<i class="icon-paper-plane"></i> <i class="icon-paper-plane"></i>
<span class="buttonComposeText" data-i18n="FOLDER_LIST/BUTTON_NEW_MESSAGE"></span> <span class="buttonComposeText" data-i18n="FOLDER_LIST/BUTTON_NEW_MESSAGE"></span>
</a> </a>
<a class="btn buttonContacts" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'GLOBAL/CONTACTS'"> <a class="btn buttonContacts fontastic" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'GLOBAL/CONTACTS'">📇</a>
<i class="icon-address-book"></i>
</a>
</div> </div>
<div class="b-content opacity-on-panel-disabled" data-bind="visible: allowFolders, css: {'inbox-is-starred': isInboxStarred}"> <div class="b-content opacity-on-panel-disabled" data-bind="visible: allowFolders, css: {'inbox-is-starred': isInboxStarred}">
<div class="content"> <div class="content">

View file

@ -46,24 +46,16 @@
data-bind="visible: isArchiveVisible, command: archiveCommand, tooltip: 'GLOBAL/TO_ARCHIVE'"> data-bind="visible: isArchiveVisible, command: archiveCommand, tooltip: 'GLOBAL/TO_ARCHIVE'">
<i class="icon-archive"></i> <i class="icon-archive"></i>
</a> </a>
<a class="btn button-spam" <a class="btn button-spam fontastic" data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'GLOBAL/SPAM'"></a>
data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'GLOBAL/SPAM'">
<i class="fontastic"></i>
</a>
<a class="btn button-not-spam" <a class="btn button-not-spam"
data-bind="visible: isUnSpamVisible, command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM'"> data-bind="visible: isUnSpamVisible, command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM'">
<i class="icon-check-mark-circle-two"></i> <i class="icon-check-mark-circle-two"></i>
</a> </a>
<a class="btn button-delete" <a class="btn button-delete fontastic"
data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE'"> data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE'">🗑</a>
<i class="fontastic">🗑</i>
<!--<span data-bind="text: printableMessageCountForDeletion()"></span>-->
</a>
</div> </div>
<div class="btn-group dropdown colored-toggle" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger"> <div class="btn-group dropdown colored-toggle" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
<a id="more-list-dropdown-id" class="btn dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-bind="tooltip: 'GLOBAL/MORE'"> <a id="more-list-dropdown-id" class="btn dropdown-toggle buttonMore fontastic" href="#" tabindex="-1" data-toggle="dropdown" data-bind="tooltip: 'GLOBAL/MORE'"></a>
<i class="icon-list"></i>
</a>
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id"> <ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">
<div data-bind="visible: allowMessageListActions"> <div data-bind="visible: allowMessageListActions">
<li class="e-item" role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}"> <li class="e-item" role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
@ -131,21 +123,21 @@
<span class="caret"></span> <span class="caret"></span>
</a> </a>
</div> </div>
<i class="checkboxCkeckAll fontastic" data-bind="text: checkAll() ? (isIncompleteChecked() ? '▣' : '☑') : '☐'"></i> <i class="checkboxCheckAll fontastic" data-bind="text: checkAll() ? (isIncompleteChecked() ? '▣' : '☑') : '☐'"></i>
</div> </div>
</div> </div>
<div class="b-content" data-bind="initDom: dragOverBodyArea"> <div class="b-content" data-bind="initDom: dragOverBodyArea">
<div class="content"> <div class="content">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="listThreadUidDesc" data-bind="visible: '' !== messageListEndThreadUid(), click: cancelThreadUid"> <div class="listThreadUidDesc" data-bind="visible: '' !== messageListEndThreadUid(), click: cancelThreadUid">
<i class="icon-left" data-bind="click: cancelThreadUid"></i> <i class="fontastic" data-bind="click: cancelThreadUid"></i>
<span data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></span> <span data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></span>
</div> </div>
<div class="listSearchDesc" data-bind="visible: '' !== messageListSearchDesc()"> <div class="listSearchDesc" data-bind="visible: '' !== messageListSearchDesc()">
<span data-bind="text: messageListSearchDesc"></span> <span data-bind="text: messageListSearchDesc"></span>
</div> </div>
<div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && '' === messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea"> <div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && '' === messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea">
<i class="icon-down e-icon"></i> <i class="fontastic e-icon"></i>
<span data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></span> <span data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></span>
</div> </div>
<div class="listClear" data-bind="visible: clearListIsVisible()"> <div class="listClear" data-bind="visible: clearListIsVisible()">

View file

@ -16,15 +16,11 @@
<a class="btn button-archive" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'GLOBAL/TO_ARCHIVE'"> <a class="btn button-archive" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'GLOBAL/TO_ARCHIVE'">
<i class="icon-archive"></i> <i class="icon-archive"></i>
</a> </a>
<a class="btn button-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'GLOBAL/SPAM'"> <a class="btn button-spam fontastic" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'GLOBAL/SPAM'"></a>
<i class="fontastic"></i>
</a>
<a class="btn button-not-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM'"> <a class="btn button-not-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM'">
<i class="icon-check-mark-circle-two"></i> <i class="icon-check-mark-circle-two"></i>
</a> </a>
<a class="btn button-delete" data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE'"> <a class="btn button-delete fontastic" data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE'">🗑</a>
<i class="fontastic">🗑</i>
</a>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-thin buttonUp" data-bind="command: goUpCommand"> <a class="btn btn-thin buttonUp" data-bind="command: goUpCommand">
@ -265,9 +261,6 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div> <div>
<span class="buttonUp" data-bind="click: scrollMessageToTop">
<i class="icon-up"></i>
</span>
<span class="buttonFull" data-bind="click: fullScreen"> <span class="buttonFull" data-bind="click: fullScreen">
<i class="icon-arrows-out"></i> <i class="icon-arrows-out"></i>
</span> </span>
@ -333,11 +326,9 @@
<span class="attachmentSize" data-bind="text: friendlySize"></span>&nbsp; <span class="attachmentSize" data-bind="text: friendlySize"></span>&nbsp;
</div> </div>
</div> </div>
<div class="checkedParent"> <div class="checkboxAttachment fontastic"
<i class="checkboxAttachment icon-checkbox-unchecked" data-bind="text: checked() ? '☑' : '☐',
data-bind="css: checked() ? 'checkboxMessage icon-checkbox-checked' : 'checkboxMessage icon-checkbox-unchecked', click: function () { checked(!checked()); return false }"></div>
click: function () { checked(!checked()); return false }"></i>
</div>
</li> </li>
</ul> </ul>
<i class="fontastic controls-handle" data-bind="visible: allowAttachmnetControls() && !showAttachmnetControls(), click: function () { showAttachmnetControls(true); showAttachmnetControlsState(true); }"></i> <i class="fontastic controls-handle" data-bind="visible: allowAttachmnetControls() && !showAttachmnetControls(), click: function () { showAttachmnetControls(true); showAttachmnetControlsState(true); }"></i>

View file

@ -46,25 +46,23 @@
</div> </div>
<div class="pull-right"> <div class="pull-right">
<div class="btn-group dropdown colored-toggle pull-right" style="margin-right: 4px;" data-bind="registerBootstrapDropdown: true"> <div class="btn-group dropdown colored-toggle pull-right" style="margin-right: 4px;" data-bind="registerBootstrapDropdown: true">
<a class="btn dropdown-toggle buttonMore" data-toggle="dropdown"> <a class="btn dropdown-toggle buttonMore fontastic" data-toggle="dropdown"></a>
<i class="icon-list"></i>
</a>
<ul class="dropdown-menu g-ui-menu" role="menu"> <ul class="dropdown-menu g-ui-menu" role="menu">
<li class="e-item" data-bind="click: function () { requestReadReceipt(!requestReadReceipt()); }"> <li class="e-item" data-bind="click: function () { requestReadReceipt(!requestReadReceipt()); }">
<a class="e-link"> <a class="e-link">
<i class="icon-checkbox-unchecked" data-bind="css: {'icon-checkbox-checked': requestReadReceipt(), 'icon-checkbox-unchecked': !requestReadReceipt() }"></i> <i class="fontastic" data-bind="text: requestReadReceipt() ? '☑' : '☐'"></i>
<span data-i18n="COMPOSE/BUTTON_REQUEST_READ_RECEIPT"></span> <span data-i18n="COMPOSE/BUTTON_REQUEST_READ_RECEIPT"></span>
</a> </a>
</li> </li>
<li class="e-item" data-bind="click: function () { requestDsn(!requestDsn()); }"> <li class="e-item" data-bind="click: function () { requestDsn(!requestDsn()); }">
<a class="e-link"> <a class="e-link">
<i class="icon-checkbox-unchecked" data-bind="css: {'icon-checkbox-checked': requestDsn(), 'icon-checkbox-unchecked': !requestDsn() }"></i> <i class="fontastic" data-bind="text: requestDsn() ? '☑' : '☐'"></i>
<span data-i18n="COMPOSE/BUTTON_REQUEST_DSN"></span> <span data-i18n="COMPOSE/BUTTON_REQUEST_DSN"></span>
</a> </a>
</li> </li>
<li class="e-item" data-bind="click: function () { markAsImportant(!markAsImportant()); }"> <li class="e-item" data-bind="click: function () { markAsImportant(!markAsImportant()); }">
<a class="e-link"> <a class="e-link">
<i class="icon-checkbox-unchecked" data-bind="css: {'icon-checkbox-checked': markAsImportant(), 'icon-checkbox-unchecked': !markAsImportant() }"></i> <i class="fontastic" data-bind="text: markAsImportant() ? '☑' : '☐'"></i>
<span data-i18n="COMPOSE/BUTTON_MARK_AS_IMPORTANT"></span> <span data-i18n="COMPOSE/BUTTON_MARK_AS_IMPORTANT"></span>
</a> </a>
</li> </li>
@ -78,9 +76,7 @@
</div> </div>
<div class="btn-group pull-right">&nbsp;</div> <div class="btn-group pull-right">&nbsp;</div>
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<a class="btn" data-bind="visible: allowContacts, command: contactsCommand, tooltip: 'GLOBAL/CONTACTS'"> <a class="btn fontastic" data-bind="visible: allowContacts, command: contactsCommand, tooltip: 'GLOBAL/CONTACTS'">📇</a>
<i class="icon-address-book"></i>
</a>
</div> </div>
<div class="btn-group pull-right">&nbsp;</div> <div class="btn-group pull-right">&nbsp;</div>
</div> </div>

View file

@ -26,8 +26,7 @@
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true"> <div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true">
<a id="contacts-more-dropdown-id" class="btn dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown"> <a id="contacts-more-dropdown-id" class="btn dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown">
<i data-bind="css: {'icon-list': !contacts.importing() && !contacts.syncing(), <i class="fontastic" data-bind="css: {'icon-spinner': contacts.importing() || contacts.syncing()}"></i>
'icon-spinner': contacts.importing() || contacts.syncing()}"></i>
</a> </a>
<ul class="dropdown-menu g-ui-menu right-edge" role="menu" aria-labelledby="contacts-more-dropdown-id"> <ul class="dropdown-menu g-ui-menu right-edge" role="menu" aria-labelledby="contacts-more-dropdown-id">
<li class="e-item" role="presentation"> <li class="e-item" role="presentation">
@ -84,9 +83,7 @@
&nbsp; &nbsp;
</div> </div>
<div class="wrapper"> <div class="wrapper">
<div class="checkedParent"> <div class="checkboxItem fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
<i class="checkboxItem" data-bind="css: checked() ? 'checkboxMessage icon-checkbox-checked' : 'checkboxMessage icon-checkbox-unchecked'"></i>
</div>
<div class="nameParent actionHandle"> <div class="nameParent actionHandle">
<span class="listName" data-bind="text: display"></span> <span class="listName" data-bind="text: display"></span>
&nbsp; &nbsp;
@ -158,9 +155,7 @@
<div data-bind="visible: !emptySelection()"> <div data-bind="visible: !emptySelection()">
<div class="form-horizontal top-part"> <div class="form-horizontal top-part">
<div class="control-group" data-bind="visible: !viewReadOnly() || contactHasValidName()"> <div class="control-group" data-bind="visible: !viewReadOnly() || contactHasValidName()">
<label class="control-label remove-padding-top fix-width"> <label class="control-label remove-padding-top fix-width fontastic iconsize24">👤</label>
<i class="fontastic iconsize24">👤</i>
</label>
<div class="controls fix-width"> <div class="controls fix-width">
<div data-bind="foreach: viewPropertiesNames"> <div data-bind="foreach: viewPropertiesNames">
<div class="property-line"> <div class="property-line">
@ -189,9 +184,7 @@
</div> </div>
</div> </div>
<div class="control-group" data-bind="visible: !viewReadOnly() || 0 < viewPropertiesEmails().length"> <div class="control-group" data-bind="visible: !viewReadOnly() || 0 < viewPropertiesEmails().length">
<label class="control-label remove-padding-top fix-width"> <label class="control-label remove-padding-top fix-width fontastic iconsize24" data-bind="tooltip: 'GLOBAL/EMAIL'">@</label>
<i class="fontastic iconsize24" data-bind="tooltip: 'GLOBAL/EMAIL'">@</i>
</label>
<div class="controls fix-width"> <div class="controls fix-width">
<div data-bind="foreach: viewPropertiesEmails"> <div data-bind="foreach: viewPropertiesEmails">
<div class="property-line"> <div class="property-line">
@ -205,9 +198,7 @@
</div> </div>
</div> </div>
<div class="control-group" data-bind="visible: 0 < viewPropertiesPhones().length"> <div class="control-group" data-bind="visible: 0 < viewPropertiesPhones().length">
<label class="control-label remove-padding-top fix-width"> <label class="control-label remove-padding-top fix-width fontastic iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_PHONE'">📞</label>
<i class="icon-telephone iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_PHONE'"></i>
</label>
<div class="controls fix-width"> <div class="controls fix-width">
<div data-bind="foreach: viewPropertiesPhones"> <div data-bind="foreach: viewPropertiesPhones">
<div class="property-line"> <div class="property-line">
@ -220,9 +211,7 @@
</div> </div>
</div> </div>
<div class="control-group" data-bind="visible: 0 < viewPropertiesWeb().length"> <div class="control-group" data-bind="visible: 0 < viewPropertiesWeb().length">
<label class="control-label remove-padding-top fix-width"> <label class="control-label remove-padding-top fix-width fontastic iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_WEB'">🌍</label>
<i class="fontastic iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_WEB'">🌍</i>
</label>
<div class="controls fix-width"> <div class="controls fix-width">
<div data-bind="foreach: viewPropertiesWeb"> <div data-bind="foreach: viewPropertiesWeb">
<div class="property-line"> <div class="property-line">
@ -241,12 +230,9 @@
</div> </div>
</div> </div>
</div> </div>
<!--
<!-- <div class="e-read-only-sign"> <div class="e-read-only-sign fontastic iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'">🔒</div>
<i class="fontastic iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'">🔒</i> -->
</div>-->
</div> </div>
</div> </div>
</div> </div>

View file

@ -16,7 +16,7 @@
<label class="i18n control-label" data-i18n="POPUPS_MESSAGE_OPEN_PGP/LABEL_KEY"></label> <label class="i18n control-label" data-i18n="POPUPS_MESSAGE_OPEN_PGP/LABEL_KEY"></label>
<div class="controls key-list" data-bind="foreach: privateKeys" style="margin-top: 5px"> <div class="controls key-list" data-bind="foreach: privateKeys" style="margin-top: 5px">
<div class="key-list__item"> <div class="key-list__item">
<i class="key-list__item__radio icon-radio-unchecked"></i> <i class="key-list__item__radio fontastic"></i>
<div class="key-list__item__names"> <div class="key-list__item__names">
<span data-bind="foreach: users"> <span data-bind="foreach: users">
<div> <div>

View file

@ -57,14 +57,12 @@
<col style="width: 1%" /> <col style="width: 1%" />
</colgroup> </colgroup>
<tbody data-bind="foreach: filters"> <tbody data-bind="foreach: filters">
<tr class="filter-item" draggable="true" data-bind="sortableItem: { list: $root.filters }"> <tr class="filter-item" draggable="true" data-bind="sortableItem: { list: $parent.filters }">
<td> <td>
<span class="disabled-filter" data-bind="click: function () { $parent.hasChanges(true); enabled(!enabled()); }"> <span class="disabled-filter fontastic" data-bind="click: function () { $parent.hasChanges(true); enabled(!enabled()); }, text: enabled() ? '☑' : '☐'"></span>
<i data-bind="css: {'icon-checkbox-checked': enabled, 'icon-checkbox-unchecked': !enabled()}"></i>
</span>
</td> </td>
<td class="drag-wrapper"> <td class="drag-wrapper">
<i class="icon-braille drag-handle"></i> <span class="fontastic drag-handle"></span>
</td> </td>
<td class="e-action"> <td class="e-action">
<span class="filter-name" data-bind="text: name()"></span> <span class="filter-name" data-bind="text: name()"></span>

View file

@ -26,7 +26,7 @@
<tr class="account-item" draggable="true" data-bind="sortableItem: { list: $root.accounts, afterMove: $root.accountsAndIdentitiesAfterMove }"> <tr class="account-item" draggable="true" data-bind="sortableItem: { list: $root.accounts, afterMove: $root.accountsAndIdentitiesAfterMove }">
<td class="e-action" data-bind="css: {'e-action': canBeEdit}"> <td class="e-action" data-bind="css: {'e-action': canBeEdit}">
<span class="account-img fontastic">👤</span> <span class="account-img fontastic">👤</span>
<i class="icon-braille drag-handle"></i> <i class="fontastic drag-handle"></i>
<span class="account-name" data-bind="text: email"></span> <span class="account-name" data-bind="text: email"></span>
</td> </td>
<td> <td>
@ -70,7 +70,7 @@
<tr class="identity-item" draggable="true" data-bind="sortableItem: { list: $root.identities, afterMove: $root.accountsAndIdentitiesAfterMove }"> <tr class="identity-item" draggable="true" data-bind="sortableItem: { list: $root.identities, afterMove: $root.accountsAndIdentitiesAfterMove }">
<td class="e-action"> <td class="e-action">
<span class="identity-img fontastic">👤</span> <span class="identity-img fontastic">👤</span>
<i class="icon-braille drag-handle"></i> <i class="fontastic drag-handle"></i>
<span class="identity-name" data-bind="text: formattedName()"></span> <span class="identity-name" data-bind="text: formattedName()"></span>
&nbsp;&nbsp; &nbsp;&nbsp;
<span class="identity-default" data-bind="visible: 0 === $index()"> <span class="identity-default" data-bind="visible: 0 === $index()">

View file

@ -27,9 +27,7 @@
<tbody data-bind="foreach: scripts"> <tbody data-bind="foreach: scripts">
<tr class="script-item"> <tr class="script-item">
<td> <td>
<span class="disabled-script" data-bind="click: function (oScript) { $root.toggleScript(oScript); }"> <span class="disabled-script fontastic" data-bind="click: function (oScript) { $root.toggleScript(oScript); }, text: active() ? '☑' : '☐'"></span>
<i data-bind="css: {'icon-checkbox-checked': active, 'icon-checkbox-unchecked': !active()}"></i>
</span>
</td> </td>
<td class="e-action" class="script-name" data-bind="text: name()"></td> <td class="e-action" class="script-name" data-bind="text: name()"></td>
<td> <td>

View file

@ -12,7 +12,7 @@
</a> </a>
</div> </div>
<a class="btn button-back" data-bind="click: backToMailBoxClick"> <a class="btn button-back" data-bind="click: backToMailBoxClick">
<i class="icon-left"></i> <i class="fontastic"></i>
<span class="i18n i18n-animation" data-i18n="GLOBAL/BACK"></span> <span class="i18n i18n-animation" data-i18n="GLOBAL/BACK"></span>
</a> </a>
</div> </div>

View file

@ -25,7 +25,7 @@
<tr class="template-item" draggable="true" data-bind="sortableItem: { list: $root.templates }"> <tr class="template-item" draggable="true" data-bind="sortableItem: { list: $root.templates }">
<td class="e-action"> <td class="e-action">
<span class="template-img fontastic">👤</span> <span class="template-img fontastic">👤</span>
<i class="icon-braille drag-handle"></i> <i class="fontastic drag-handle"></i>
<span class="template-name" data-bind="text: name"></span> <span class="template-name" data-bind="text: name"></span>
</td> </td>
<td> <td>

View file

@ -48,7 +48,7 @@
</li> </li>
<li class="e-item" role="presentation" data-bind="visible: allowSettings"> <li class="e-item" role="presentation" data-bind="visible: allowSettings">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="visible: allowContacts, click: contactsClick"> <a class="e-link menuitem" href="#" tabindex="-1" data-bind="visible: allowContacts, click: contactsClick">
<i class="icon-address-book"></i> <i class="fontastic">📇</i>
<span data-i18n="GLOBAL/CONTACTS"></span> <span data-i18n="GLOBAL/CONTACTS"></span>
</a> </a>
</li> </li>

View file

@ -26,7 +26,7 @@
padding: 8px; padding: 8px;
line-height: @baseLineHeight; line-height: @baseLineHeight;
text-align: left; text-align: left;
vertical-align: top; vertical-align: text-top;
border-top: 1px solid @tableBorder; border-top: 1px solid @tableBorder;
} }
th { th {

Binary file not shown.

Binary file not shown.

View file

@ -17,20 +17,21 @@
font-variant: normal !important; font-variant: normal !important;
text-transform: none !important; text-transform: none !important;
speak: never; speak: never;
line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
[class^="icon-"]::before,
[class*=" icon-"]::before {
line-height: 1;
}
.icon-arrows-in::before { .icon-arrows-in::before {
content: "\e000"; content: "\e000";
} }
.icon-arrows-out::before { .icon-arrows-out::before {
content: "\e001"; content: "\e001";
} }
.icon-list::before {
content: "☰";
}
.icon-user-add::before { .icon-user-add::before {
content: "\e005"; content: "\e005";
} }
@ -43,21 +44,12 @@
.icon-right-dir::before { .icon-right-dir::before {
content: "\e00c"; /* ▶ */ content: "\e00c"; /* ▶ */
} }
.icon-left::before {
content: "⬅";
}
.icon-down::before {
content: "⬇";
}
.icon-right-mini::before { .icon-right-mini::before {
content: "\e01e"; /* */ content: "\e01e"; /* */
} }
.icon-down-mini::before { .icon-down-mini::before {
content: "\e01f"; /* rotate 90 */ content: "\e01f"; /* rotate 90 */
} }
.icon-up::before {
content: "⬆";
}
.icon-star-empty::before { .icon-star-empty::before {
content: "☆"; content: "☆";
} }
@ -129,36 +121,15 @@
.icon-popup::before { .icon-popup::before {
content: "\e045"; content: "\e045";
} }
.icon-telephone::before {
content: "📞"; /* ℡ ✆ ☎ ☏ */
}
.icon-left-middle::before { .icon-left-middle::before {
content: "\e04b"; /* */ content: "\e04b"; /* */
} }
.icon-right-middle::before { .icon-right-middle::before {
content: "\e04c"; /* */ content: "\e04c"; /* */
} }
.icon-address-book::before {
content: "\e051";
}
.icon-mail::before { .icon-mail::before {
content: "✉"; content: "✉";
} }
.icon-checkbox-checked::before {
content: "☑";
}
.icon-checkbox-unchecked::before {
content: "☐";
}
.icon-checkbox-partial::before {
content: "▣";
}
.icon-radio-checked::before {
content: "\e05b";
}
.icon-radio-unchecked::before {
content: "\e05c";
}
.icon-archive::before { .icon-archive::before {
content: "\e05f"; content: "\e05f";
} }
@ -186,13 +157,46 @@
.icon-resize-out::before { .icon-resize-out::before {
content: "⤢"; content: "⤢";
} }
.icon-braille::before {
content: "\e06e"; /* ⸭ ⠿ ⁞⁞ */
}
.icon-check-mark-circle-two::before { .icon-check-mark-circle-two::before {
content: "\e073"; content: "\e073";
} }
/* /*
.icon-radio-checked::before {
content: "⦿";
}
.icon-radio-unchecked::before {
content: "○";
}
.icon-address-book::before {
content: "📇";
}
.icon-list::before {
content: "☰";
}
.icon-telephone::before {
content: "📞";
}
.icon-braille::before {
content: "⬍";
}
.icon-checkbox-checked::before {
content: "☑";
}
.icon-checkbox-unchecked::before {
content: "☐";
}
.icon-checkbox-partial::before {
content: "▣";
}
.icon-left::before {
content: "⬅";
}
.icon-up::before {
content: "⬆";
}
.icon-down::before {
content: "⬇";
}
.icon-image::before { .icon-image::before {
content: "🖼"; content: "🖼";
} }