Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace bootstrap .divider with cleaner .dividerbar which also reduces knockout calls

Browse source
This commit is contained in:
djmaze 2020-10-12 15:03:45 +02:00
parent c2a5d0fda5
commit 527694f361
10 changed files with 30 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

30
dev/Common/Utils.js
View file

@ -369,7 +369,7 @@ export function folderListOptionsBuilder(
id: line[0], id: line[0],
name: line[1], name: line[1],
system: false, system: false,
seporator: false, dividerbar: false,
disabled: false disabled: false
}); });
}); });
@ -377,27 +377,17 @@ export function folderListOptionsBuilder(
bSep = true; bSep = true;
aSystem.forEach(oItem => { aSystem.forEach(oItem => {
if (fVisibleCallback ? fVisibleCallback(oItem) : true) { if (fVisibleCallback ? fVisibleCallback(oItem) : true) {
if (bSep && aResult.length) {
aResult.push({
id: '---',
name: '---',
system: false,
seporator: true,
disabled: true
});
}
bSep = false;
aResult.push({ aResult.push({
id: oItem.fullNameRaw, id: oItem.fullNameRaw,
name: fRenameCallback ? fRenameCallback(oItem) : oItem.name(), name: fRenameCallback ? fRenameCallback(oItem) : oItem.name(),
system: true, system: true,
seporator: false, dividerbar: bSep,
disabled: disabled:
!oItem.selectable || !oItem.selectable ||
aDisabled.includes(oItem.fullNameRaw) || aDisabled.includes(oItem.fullNameRaw) ||
(fDisableCallback ? fDisableCallback(oItem) : false) (fDisableCallback ? fDisableCallback(oItem) : false)
}); });
bSep = false;
} }
}); });
@ -410,29 +400,19 @@ export function folderListOptionsBuilder(
) { ) {
if (fVisibleCallback ? fVisibleCallback(oItem) : true) { if (fVisibleCallback ? fVisibleCallback(oItem) : true) {
if (FolderType.User === oItem.type() || !bSystem || oItem.hasSubScribedSubfolders()) { if (FolderType.User === oItem.type() || !bSystem || oItem.hasSubScribedSubfolders()) {
if (bSep && aResult.length) {
aResult.push({
id: '---',
name: '---',
system: false,
seporator: true,
disabled: true
});
}
bSep = false;
aResult.push({ aResult.push({
id: oItem.fullNameRaw, id: oItem.fullNameRaw,
name: name:
new Array(oItem.deep + 1 - iUnDeep).join(sDeepPrefix) + new Array(oItem.deep + 1 - iUnDeep).join(sDeepPrefix) +
(fRenameCallback ? fRenameCallback(oItem) : oItem.name()), (fRenameCallback ? fRenameCallback(oItem) : oItem.name()),
system: false, system: false,
seporator: false, dividerbar: bSep,
disabled: disabled:
!oItem.selectable || !oItem.selectable ||
aDisabled.includes(oItem.fullNameRaw) || aDisabled.includes(oItem.fullNameRaw) ||
(fDisableCallback ? fDisableCallback(oItem) : false) (fDisableCallback ? fDisableCallback(oItem) : false)
}); });
bSep = false;
} }
} }
} }

12
dev/Styles/_BootstrapFix.less
View file

@ -133,10 +133,6 @@ select {
font-size: 17px; font-size: 17px;
} }
.dropdown-menu {
border-radius: @btnBorderRadius;
}
.btn-group + .btn-group { .btn-group + .btn-group {
margin-left: 3px; margin-left: 3px;
} }
@ -193,6 +189,14 @@ select {
border-radius: 0; border-radius: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.2);
} }
.dropdown-menu * + .dividerbar {
margin-top: 9px;
padding-top: 9px;
border-top: 1px solid #e5e5e5;
/*
border-image: linear-gradient(to right, #00F 10%, #FFF 10%, #FFF 19%, #F00 19%, #F00 28%, #FFF 28%, #FFF 37%, #00F 37%, #00F 46%, #FFF 46%, #FFF 55%, #F00 55%, #F00 64%, #FFF 64%, #FFF 73%, #00F 73%, #00F 82%, #FFF 82%, #FFF 91%, #F00 91%) 1;
*/
}
.btn-group > .btn { .btn-group > .btn {
border-radius: 0 !important; border-radius: 0 !important;

13
rainloop/v/0.0.0/app/templates/Views/User/MailMessageList.html
View file

@ -36,14 +36,9 @@
<span class="caret"></span> <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="move-dropdown-id" role="menu" data-bind="foreach: folderMenuForMove"> <ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="move-dropdown-id" role="menu" data-bind="foreach: folderMenuForMove">
<!-- ko if: seporator --> <li class="e-item" role="presentation" data-bind="css: { 'disabled': disabled, 'dividerbar': dividerbar }, click: function (mdata, oEvent) { if (!disabled) $root.moveSelectedMessagesToFolder(id, oEvent && !!oEvent.ctrlKey); }">
<li class="divider" role="presentation" data-bind="visible: seporator"></li>
<!-- /ko -->
<!-- ko if: !seporator -->
<li class="e-item" role="presentation" data-bind="css: { 'disabled': disabled }, click: function (mdata, oEvent) { if (!disabled) $root.moveSelectedMessagesToFolder(id, oEvent && !!oEvent.ctrlKey); }">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="text: name"></a> <a class="e-link menuitem" href="#" tabindex="-1" data-bind="text: name"></a>
</li> </li>
<!-- /ko -->
</ul> </ul>
</div> </div>
<!-- /ko --> <!-- /ko -->
@ -120,16 +115,14 @@
</a> </a>
</li> </li>
</div> </div>
<li class="divider" role="presentation" data-bind="visible: allowComposer && allowMessageListActions"></li> <li class="e-item dividerbar" role="presentation" data-bind="visible: allowComposer, command: multyForwardCommand">
<li class="e-item" role="presentation" data-bind="visible: allowComposer, command: multyForwardCommand">
<a class="e-link menuitem" href="#" tabindex="-1"> <a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-reply-all"></i> <i class="icon-reply-all"></i>
&nbsp;&nbsp; &nbsp;&nbsp;
<span class="i18n" data-i18n="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></span> <span class="i18n" data-i18n="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></span>
</a> </a>
</li> </li>
<li class="divider" role="presentation" data-bind="visible: allowDangerousActions"></li> <li class="e-item dividerbar" role="presentation" data-bind="visible: allowDangerousActions, command: deleteWithoutMoveCommand">
<li class="e-item" role="presentation" data-bind="visible: allowDangerousActions, command: deleteWithoutMoveCommand">
<a class="e-link menuitem" href="#" tabindex="-1"> <a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-trash"></i> <i class="icon-trash"></i>
&nbsp;&nbsp; &nbsp;&nbsp;

10
rainloop/v/0.0.0/app/templates/Views/User/MailMessageView.html
View file

@ -121,8 +121,7 @@
</a> </a>
</li> </li>
</div> </div>
<div data-bind="visible: allowMessageListActions && usePreviewPane()"> <div data-bind="visible: allowMessageListActions && usePreviewPane()" class="dividerbar">
<li class="divider" role="presentation" data-bind="visible: allowComposer && !isDraftFolder()"></li>
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()"> <li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: archiveCommand"> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: archiveCommand">
<i class="icon-archive"></i> <i class="icon-archive"></i>
@ -159,9 +158,7 @@
</a> </a>
</li> </li>
</div> </div>
<div data-bind="visible: allowMessageActions"> <div data-bind="visible: allowMessageActions" class="dividerbar">
<li class="divider" role="presentation"
data-bind="visible: (allowComposer && !isDraftFolder()) || (allowMessageListActions && usePreviewPane())"></li>
<li class="e-item" role="presentation"> <li class="e-item" role="presentation">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().printMessage(); }} "> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().printMessage(); }} ">
<i class="icon-print"></i> <i class="icon-print"></i>
@ -176,8 +173,7 @@
<span class="i18n" data-i18n="MESSAGE/BUTTON_IN_NEW_WINDOW"></span> <span class="i18n" data-i18n="MESSAGE/BUTTON_IN_NEW_WINDOW"></span>
</a> </a>
</li> </li>
<li class="divider" role="presentation"></li> <li class="e-item dividerbar" role="presentation">
<li class="e-item" role="presentation">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="link: viewViewLink()"> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="link: viewViewLink()">
<i class="icon-file-code"></i> <i class="icon-file-code"></i>
&nbsp;&nbsp; &nbsp;&nbsp;

3
rainloop/v/0.0.0/app/templates/Views/User/PopupsCompose.html
View file

@ -71,8 +71,7 @@
<span class="i18n" data-i18n="COMPOSE/BUTTON_MARK_AS_IMPORTANT"></span> <span class="i18n" data-i18n="COMPOSE/BUTTON_MARK_AS_IMPORTANT"></span>
</a> </a>
</li> </li>
<li class="divider" data-bind="visible: capaOpenPGP"></li> <li class="e-item dividerbar" data-bind="visible: capaOpenPGP, click: openOpenPgpPopup, css: {'disabled': isHtml()}">
<li class="e-item" data-bind="visible: capaOpenPGP, click: openOpenPgpPopup, css: {'disabled': isHtml()}">
<a class="e-link"> <a class="e-link">
<i class="icon-key"></i> <i class="icon-key"></i>
&nbsp;&nbsp; &nbsp;&nbsp;

9
rainloop/v/0.0.0/app/templates/Views/User/PopupsContacts.html
View file

@ -38,8 +38,7 @@
<span class="i18n" data-i18n="CONTACTS/BUTTON_IMPORT"></span> <span class="i18n" data-i18n="CONTACTS/BUTTON_IMPORT"></span>
</a> </a>
</li> </li>
<li class="divider hide-mobile" role="presentation"></li> <li class="e-item dividerbar hide-mobile" role="presentation">
<li class="e-item hide-mobile" role="presentation">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: exportCsv"> <a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: exportCsv">
<i data-bind="css: {'icon-export': !contacts.exportingCsv(), 'icon-spinner animated': contacts.exportingCsv}"></i> <i data-bind="css: {'icon-export': !contacts.exportingCsv(), 'icon-spinner animated': contacts.exportingCsv}"></i>
&nbsp;&nbsp; &nbsp;&nbsp;
@ -53,8 +52,7 @@
<span class="i18n" data-i18n="CONTACTS/BUTTON_EXPORT_VCARD"></span> <span class="i18n" data-i18n="CONTACTS/BUTTON_EXPORT_VCARD"></span>
</a> </a>
</li> </li>
<li class="divider" role="presentation" data-bind="visible: enableContactsSync() && allowContactsSync()"></li> <li class="e-item dividerbar" role="presentation" data-bind="visible: enableContactsSync() && allowContactsSync()">
<li class="e-item" role="presentation" data-bind="visible: enableContactsSync() && allowContactsSync()">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: syncCommand"> <a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: syncCommand">
<i data-bind="css: {'icon-sync': !contacts.syncing(), 'icon-spinner animated': contacts.syncing}"></i> <i data-bind="css: {'icon-sync': !contacts.syncing(), 'icon-spinner animated': contacts.syncing}"></i>
&nbsp;&nbsp; &nbsp;&nbsp;
@ -138,8 +136,7 @@
<span class="i18n" data-i18n="CONTACTS/ADD_MENU_URL"></span> <span class="i18n" data-i18n="CONTACTS/ADD_MENU_URL"></span>
</a> </a>
</li> </li>
<li class="divider" role="presentation"></li> <li class="e-item dividerbar" role="presentation">
<li class="e-item" role="presentation">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewNickname"> <a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewNickname">
<i class="icon-none"></i> <i class="icon-none"></i>
&nbsp;&nbsp; &nbsp;&nbsp;

8
rainloop/v/0.0.0/app/templates/Views/User/SystemDropDown.html
View file

@ -32,8 +32,7 @@
<!-- /ko --> <!-- /ko -->
<!-- ko if: capaAdditionalAccounts --> <!-- ko if: capaAdditionalAccounts -->
<li class="divider" role="presentation"></li> <li class="e-item dividerbar" role="presentation">
<li class="e-item" role="presentation">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addAccountClick"> <a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addAccountClick">
<i class="icon-plus"></i> <i class="icon-plus"></i>
&nbsp;&nbsp; &nbsp;&nbsp;
@ -55,15 +54,14 @@
<span class="i18n" data-i18n="TOP_TOOLBAR/BUTTON_HELP"></span> <span class="i18n" data-i18n="TOP_TOOLBAR/BUTTON_HELP"></span>
</a> </a>
</li> </li>
<li class="divider" role="presentation" data-bind="visible: allowSettings || allowHelp"></li> <li class="e-item dividerbar" role="presentation" data-bind="visible: mobile">
<li class="e-item" role="presentation" data-bind="visible: mobile">
<a class="e-link menuitem" href="./?/DesktopVersion/" tabindex="-1"> <a class="e-link menuitem" href="./?/DesktopVersion/" tabindex="-1">
<i class="icon-laptop"></i> <i class="icon-laptop"></i>
&nbsp;&nbsp; &nbsp;&nbsp;
<span class="i18n" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></span> <span class="i18n" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></span>
</a> </a>
</li> </li>
<li class="e-item" role="presentation" data-bind="visible: !mobile"> <li class="e-item dividerbar" role="presentation" data-bind="visible: !mobile">
<a class="e-link menuitem" href="./?/MobileVersion/" tabindex="-1"> <a class="e-link menuitem" href="./?/MobileVersion/" tabindex="-1">
<i class="icon-mobile"></i> <i class="icon-mobile"></i>
&nbsp;&nbsp; &nbsp;&nbsp;

5
vendors/bootstrap/less/dropdowns.less vendored
View file

@ -56,11 +56,6 @@
left: auto; left: auto;
} }
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
}
// Links within the dropdown menu // Links within the dropdown menu
a { a {
display: block; display: block;

11
vendors/bootstrap/less/mixins.less vendored
View file

@ -106,17 +106,6 @@
// COMPONENT MIXINS // COMPONENT MIXINS
// -------------------------------------------------- // --------------------------------------------------
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: @white) {
height: 1px;
margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
overflow: hidden;
background-color: @top;
border-bottom: 1px solid @bottom;
}
// Button backgrounds // Button backgrounds
// ------------------ // ------------------
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {

4
vendors/bootstrap/less/navs.less vendored
View file

@ -70,10 +70,6 @@
.nav-list [class^="icon-"] { .nav-list [class^="icon-"] {
margin-right: 2px; margin-right: 2px;
} }
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
.nav-divider();
}