Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-09-09 01:17:04 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cleanup HTML and CSS

Browse source
This commit is contained in:
djmaze 2021-04-30 16:39:27 +02:00
parent d38a1acc24
commit 109c6b6ab5
28 changed files with 420 additions and 581 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dev/Knoin/AbstractViews.js
View file

@ -92,7 +92,7 @@ export class AbstractViewCenter extends AbstractView
{
constructor(name, templateID)
{
super(name, templateID, ViewType.Center);
super(name, templateID, ViewType.Content);
}
}

4
dev/Knoin/Knoin.js
View file

@ -18,7 +18,7 @@ export const ViewType = {
Popup: 'Popups',
Left: 'Left',
Right: 'Right',
Center: 'Center'
Content: 'Content'
};
/**
@ -76,7 +76,7 @@ function buildViewModel(ViewModelClass, vmScreen) {
let vmDom = null;
const vm = new ViewModelClass(vmScreen),
position = vm.viewModelPosition || '',
vmPlace = position ? doc.querySelector('#rl-content #rl-' + position.toLowerCase()) : null;
vmPlace = position ? doc.getElementById('rl-' + position.toLowerCase()) : null;
ViewModelClass.__builded = true;
ViewModelClass.__vm = vm;

39
dev/Styles/Admin.less
View file

@ -1,39 +1,15 @@
.b-admin-left {
.b-toolbar {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 34px;
padding: 8px 0 0 @rlLowMargin;
}
.b-content {
position: absolute;
top: 50px + @rlLowMargin + 10px;
bottom: @rlLowMargin;
left: 0;
right: 0;
overflow: hidden;
.content {
-webkit-overflow-scrolling: touch;
}
}
}
.b-admin-menu {
#rl-left {
overflow: auto;
padding-top: 50px + @rlLowMargin + 10px;
nav {
a {
color: var(--settings-menu-color, #333);
cursor: pointer;
display: block;
font-size: 18px;
height: 30px;
line-height: 29px;
overflow: hidden;
line-height: 30px;
padding: 4px 10px;
text-decoration: none;
}
@ -47,6 +23,7 @@
background-color: var(--settings-menu-selected-bg-color, #333);
color: var(--settings-menu-selected-color, #eee);
}
}
}
.b-admin-right {
@ -82,10 +59,6 @@
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;
.content {
-webkit-overflow-scrolling: touch;
}
}
}

8
dev/Styles/Animations.less
View file

@ -25,7 +25,7 @@ html.rl-started-delay {
@media screen and (min-width: 1000px) {
html.rl-started-trigger .b-login-content .loginFormWrapper {
html.rl-started-trigger .b-login-content {
/*transform: scale(1.1);*/
transform: translateY(-20px);
opacity: 0.5;
@ -40,11 +40,7 @@ html.rl-started-delay {
font-weight: bold;
}
.b-login-content .afterLoginHide {
opacity: 0;
}
.b-login-content .loginFormWrapper {
.b-login-content {
transition: all 0.3s ease-out;
}

2
dev/Styles/AnimationsUser.less
View file

@ -39,7 +39,7 @@
transition: margin 0.3s linear;
}
.b-folders .b-content.opacity-on-panel-disabled {
#rl-left .b-content {
transition: opacity 0.3s linear;
}

8
dev/Styles/Contacts.less
View file

@ -66,10 +66,6 @@
overflow-y: auto;
scroll-behavior: smooth;
.content {
-webkit-overflow-scrolling: touch;
}
.listClear {
text-align: center;
padding: 10px;
@ -179,10 +175,6 @@
overflow: auto;
border-left: 1px solid rgba(128,128,128,0.25);
.content {
-webkit-overflow-scrolling: touch;
}
span {
height: 20px;
line-height: 20px;

4
dev/Styles/FolderList.less
View file

@ -58,10 +58,6 @@
overflow: hidden;
overflow-y: auto;
min-width: 100px;
.content {
-webkit-overflow-scrolling: touch;
}
}
hr {

28
dev/Styles/Layout.less
View file

@ -5,7 +5,7 @@
background-position: center;
}
#rl-center, #rl-left, #rl-right {
#rl-left, #rl-right {
position: absolute;
top: 0;
right: 0;
@ -17,23 +17,8 @@
z-index: 0;
}
#rl-content {
height: 100%;
width: 100%;
}
#rl-center {
min-width: 600px;
min-height: 400px;
}
html.rl-mobile {
#rl-center {
min-width: 250px;
min-height: 250px;
}
&:not(.rl-left-panel-disabled) #rl-right {
right: -150px;
}
@ -218,11 +203,10 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
z-index: 1100;
overflow: auto;
background-color: rgba(0,0,0,0.3);
// -webkit-overflow-scrolling: touch;
}
.b-settings-content {
padding:20px 20px 20px 30px;
#rl-settings-subscreen {
padding:20px;
}
.dropdown-menu * + .dividerbar {
@ -295,8 +279,8 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
left: 155px;
}
.b-settings-content {
padding: 10px 10px 10px 20px;
#rl-settings-subscreen {
padding: 10px;
}
.dropdown-menu a {
@ -319,7 +303,7 @@ html.rl-left-panel-disabled {
display: block;
}
.opacity-on-panel-disabled {
.b-content {
opacity: 0.3;
}

32
dev/Styles/LayoutAdmin.less
View file

@ -5,7 +5,7 @@
background-position: center;
}
#rl-center, #rl-left, #rl-right {
#rl-left, #rl-right {
position: absolute;
top: 0;
right: 0;
@ -17,16 +17,6 @@
z-index: 0;
}
#rl-content {
height: 100%;
width: 100%;
}
#rl-center {
min-width: 600px;
min-height: 400px;
}
#rl-left {
width: @rlLeftWidth;
}
@ -45,11 +35,10 @@
z-index: 1100;
overflow: auto;
background-color: rgba(0,0,0,0.3);
// -webkit-overflow-scrolling: touch;
}
.b-settings-content {
padding:20px 20px 20px 30px;
#rl-settings-subscreen {
padding: 20px;
}
/* desktop */
@ -72,13 +61,8 @@
/* mobile and tablet */
@media screen and (max-width: 999px) {
.b-settings-content {
padding: 10px 10px 10px 20px;
}
#rl-center {
min-width: 250px;
min-height: 250px;
#rl-settings-subscreen {
padding: 10px;
}
html:not(.rl-left-panel-disabled) #rl-right {
@ -87,11 +71,7 @@
html.rl-left-panel-disabled {
#rl-left {
width: 0px !important;
.opacity-on-panel-disabled {
opacity: 0.3;
}
width: 0 !important;
}
#rl-right {
left: 5px !important;

70
dev/Styles/Login.less
View file

@ -1,14 +1,12 @@
.rl-view-model {
&.RL-Login, &.RL-AdminLogin {
.RL-Login, .RL-AdminLogin {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 450px;
min-width: 250px;
max-width: 600px;
z-index: 5;
}
}
@glass-color: #fff;
@ -17,9 +15,7 @@
.b-login-content {
.loginFormWrapper {
position: relative;
}
.descWrapper {
color: var(--loading-color, #000);
@ -29,13 +25,19 @@
text-shadow: var(--loading-text-shadow);
}
.loginForm {
.controls, .control-group {
margin-bottom: 25px;
}
form {
background-color: var(--login-bg-color, rgba(0, 0, 0, .5));
border: var(--login-border, 1px solid rgba(255, 255, 255, .2));
border-radius: var(--login-border-radius, 7px);
box-shadow: var(--login-box-shadow);
color: var(--login-color, @glass-m-color);
margin: 0;
padding: 40px 40px 20px 40px;
position: relative;
* {
color: var(--login-color, @glass-m-color);
@ -52,14 +54,28 @@
border-color: @glass-error-color;
}
}
&.submitting > * {
opacity: 0.3;
}
.controls, .control-group {
margin-bottom: 25px;
}
&.submitting::after{
content: '';
position: absolute;
width: 60px;
height: 60px;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
.wrapper {
padding: 40px 40px 20px 40px;
border: 8px solid transparent;
border-top-color: var(--spinner-color, #fff);
animation: loginRotation 1s infinite ease-in-out;
border-radius: 50%;
z-index: 1052;
}
}
.controls {
@ -158,8 +174,8 @@
}
@media screen and (max-width: 480px) {
.b-login-content .loginFormWrapper {
.wrapper {
.b-login-content {
form {
padding: 30px 4vw 10px;
}
}
@ -169,30 +185,6 @@
to {transform: rotate(1turn);}
}
.submitting-pane {
position: relative;
&.submitting > * {
opacity: 0.3;
}
html &.submitting::after{
content: '';
position: absolute;
width: 60px;
height: 60px;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
border: 8px solid transparent;
border-top-color: var(--spinner-color, #fff);
animation: loginRotation 1s infinite ease-in-out;
border-radius: 50%;
z-index: 1052;
}
}
.btn-submit-icon-wrp {
border: none;
background: none;

4
dev/Styles/MessageList.less
View file

@ -134,10 +134,6 @@ html.rl-no-preview-pane {
background-color: #fff;
.content {
-webkit-overflow-scrolling: touch;
}
.listClear {
text-align: center;
padding: 10px;

5
dev/Styles/MessageView.less
View file

@ -57,10 +57,6 @@
color: #DA4F49;
}
.content {
-webkit-overflow-scrolling: touch;
}
.message-fixed-button-toolbar {
z-index: 100;
position: absolute;
@ -190,7 +186,6 @@
left: 0;
right: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
border-radius: @rlLowBorderRadius;
scroll-behavior: smooth;

20
dev/Styles/Settings.less
View file

@ -1,21 +1,11 @@
.b-settins-left {
.b-toolbar {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 34px;
padding: 8px 0 0 @rlLowMargin;
}
.b-footer {
position: absolute;
bottom: 20px;
bottom: 10px;
right: 0;
left: 0;
height: 20px;
padding: 0 10px 0 5px;
z-index: 101;
}
@ -27,10 +17,6 @@
left: 0;
right: 0;
overflow: hidden;
.content {
-webkit-overflow-scrolling: touch;
}
}
}
@ -86,10 +72,6 @@
border: @rlMainBorderSize solid @rlMainDarkColor;
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;
.content {
-webkit-overflow-scrolling: touch;
}
}
td {

2
dev/View/Admin/Login.js
View file

@ -21,8 +21,6 @@ class LoginAdminView extends AbstractViewCenter {
loginError: false,
passwordError: false,
formHidden: false,
submitRequest: false,
submitError: ''
});

2
dev/View/User/Login.js
View file

@ -46,8 +46,6 @@ class LoginUserView extends AbstractViewCenter {
emailError: false,
passwordError: false,
formHidden: false,
submitRequest: false,
submitError: '',
submitErrorAddidional: '',

2
snappymail/v/0.0.0/app/templates/Index.html
View file

@ -33,12 +33,10 @@
<div id="rl-loading-error" hidden="">An error occurred.<br>Please refresh the page and try again.</div>
<div id="rl-content" hidden="">
<div id="rl-popups"></div>
<div id="rl-center">
<div id="rl-left"></div>
<div id="rl-right"></div>
</div>
</div>
</div>
{{BaseTemplates}}
<script type="text/javascript">{{BaseAppBootScript}}{{BaseLanguage}}</script>
</body>

4
snappymail/v/0.0.0/app/templates/Views/Admin/AdminLogin.html
View file

@ -1,10 +1,9 @@
<div class="b-login-content">
<div class="loginFormWrapper" data-bind="css: {'afterLoginHide': formHidden}">
<div class="alert" data-bind="hidden: !submitError()">
<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
<span data-bind="text: submitError"></span>
</div>
<form class="wrapper submitting-pane loginForm" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
<form action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
<div class="controls" data-bind="css: {'error': loginError}">
<div class="input-append">
<input required="" type="text" class="input-block-level inputLogin"
@ -34,5 +33,4 @@
data-i18n="LOGIN/BUTTON_LOGIN"></button>
</div>
</form>
</div>
<div>

8
snappymail/v/0.0.0/app/templates/Views/Admin/AdminMenu.html
View file

@ -1,7 +1,3 @@
<div class="b-admin-left">
<div class="b-content opacity-on-panel-disabled">
<nav class="b-admin-menu" data-bind="foreach: menu">
<nav data-bind="foreach: menu">
<a data-bind="css: {'selected': selected }, attr: { 'href': $root.link(route), 'data-i18n': label }"></a>
</nav>
</div>
</div>
</nav>

6
snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html
View file

@ -6,10 +6,6 @@
<a class="btn btn-logout fontastic" data-bind="click: logoutClick">⏻</a>
</div>
<div class="b-content">
<div class="content">
<div class="content-wrapper">
<div id="rl-settings-subscreen" class="b-settings-content"></div>
</div>
</div>
<div id="rl-settings-subscreen"></div>
</div>
</div>

2
snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsSecurity.html
View file

@ -1,4 +1,4 @@
<div class="adminSecurity g-ui-user-select-none">
<div class="g-ui-user-select-none">
<div class="legend" data-i18n="TAB_SECURITY/LEGEND_SECURITY"></div>
<div class="form-horizontal">
<div class="control-group">

4
snappymail/v/0.0.0/app/templates/Views/User/Login.html
View file

@ -1,12 +1,11 @@
<div class="b-login-content">
<div class="loginFormWrapper" data-bind="css: {'afterLoginHide': formHidden}">
<div class="descWrapper" data-bind="visible: '' !== loadingDesc, text: loadingDesc"></div>
<div class="alert" data-bind="hidden: !submitError()" hidden="">
<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
<span data-bind="text: submitError"></span>
<p data-bind="visible: '' !== submitErrorAddidional(), text: submitErrorAddidional"></p>
</div>
<form class="wrapper submitting-pane loginForm" action="#/"
<form action="#/"
data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
<div class="controls" data-bind="css: {'error': emailError}">
<div class="input-append">
@ -55,5 +54,4 @@
</div>
</form>
</div>
</div>

6
snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
View file

@ -6,16 +6,12 @@
</a>
<a class="btn buttonContacts fontastic" data-bind="visible: allowContacts, click: contactsClick" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
</div>
<div class="b-content opacity-on-panel-disabled" data-bind="css: {'inbox-is-starred': isInboxStarred}">
<div class="content">
<div class="content-wrapper">
<div class="b-content" data-bind="css: {'inbox-is-starred': isInboxStarred}">
<div class="b-folders-system" data-bind="template: { name: 'MailFolderListSystemItem', foreach: folderListSystem }"></div>
<hr/>
<div class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderList }"></div>
<div class="move-action-content-wrapper" data-bind="visible: moveAction"></div>
</div>
</div>
</div>
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
<div class="b-footer btn-toolbar hide-mobile">
<div class="btn-group">

6
snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
View file

@ -163,7 +163,7 @@
<div class="input-append" data-bind="visible: allowSearch">
<div class="close-input-wrp">
<a class="close" data-bind="click: cancelSearch, visible: '' !== messageListSearchDesc()">×</a>
<input type="text" class="span4 inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: inputProxyMessageListSearch, onEnter: searchEnterAction, hasfocus: inputMessageListSearchFocus" />
<input type="search" class="span4 inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: inputProxyMessageListSearch, onEnter: searchEnterAction, hasfocus: inputMessageListSearchFocus" />
</div>
<a class="btn buttonMoreSearch" data-bind="visible: allowSearchAdv, click: advancedSearchClick">
<span class="caret"></span>
@ -172,8 +172,6 @@
</div>
</div>
<div class="b-content" data-bind="initDom: dragOverBodyArea">
<div class="content">
<div class="content-wrapper">
<div class="listThreadUidDesc" data-bind="visible: '' !== messageListEndThreadUid(), click: cancelThreadUid">
<i class="fontastic" data-bind="click: cancelThreadUid">⬅</i>
<span data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></span>
@ -247,8 +245,6 @@
</div>
<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail"></i></div>
</div>
</div>
</div>
<div class="b-footer thm-message-list-bottom-toolbar">
<span data-bind="visible: 0 < userUsageProc(), attr: { title: quotaTooltip() }" class="e-quota">
<span data-bind="text: userUsageProc"></span>%

7
snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
View file

@ -244,9 +244,7 @@
</div>
</div>
<div class="messageItem fixIndex" data-bind="css: viewLineAsCss(), attr: {'style': 'top:' + viewBodyTopValue() + 'px' }">
<div class="content" tabindex="0" data-bind="hasfocus: messageDomFocused, css: { 'focused': messageDomFocused }">
<div class="content-wrapper">
<div tabindex="0" data-bind="hasfocus: messageDomFocused, css: { 'focused': messageDomFocused }">
<div>
<span class="buttonFull" data-bind="click: toggleFullScreen">
@ -260,7 +258,7 @@
</div>
</div>
<div class="g-ui-min-height-300 content-content" data-bind="visible: !messageLoadingThrottle()">
<div class="g-ui-min-height-300" data-bind="visible: !messageLoadingThrottle()">
<div class="bodySubHeader">
<div class="showImages" data-bind="visible: message() && message().hasImages(), click: function() { showImages(message()); }">
<i class="fontastic">🖼</i>
@ -326,5 +324,4 @@
</div>
</div>
</div>
</div>
</div>

4
snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
View file

@ -161,8 +161,6 @@
</div>
<div class="attachmentAreaParent b-content" data-bind="visible: attachmentsPlace">
<div class="content">
<div class="content-wrapper">
<div class="b-attachment-place" data-bind="visible: addAttachmentEnabled() && dragAndDropEnabled() && dragAndDropVisible(), initDom: composeUploaderDropPlace, css: {'dragAndDropOver': dragAndDropOver}"
data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>
<ul class="attachmentList" data-bind="foreach: attachments">
@ -186,8 +184,6 @@
<div class="no-attachments-desc" data-bind="visible: 0 === attachments().length"
data-i18n="COMPOSE/NO_ATTACHMENTS_HERE_DESC"></div>
</div>
</div>
</div>
<div class="textAreaParent" data-bind="visible: !attachmentsPlace(), initDom: composeEditorArea"></div>
</div>

6
snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
View file

@ -52,7 +52,6 @@
</div>
<div class="b-list-content g-ui-user-select-none" data-bind="css: {'hideContactListCheckbox': !useCheckboxesInList()}">
<div class="content">
<div class="content-wrapper">
<div class="listClear" data-bind="visible: viewClearSearch() && '' !== search()">
<span class="g-ui-link" data-i18n="CONTACTS/CLEAR_SEARCH" data-bind="command: clearCommand"></span>
</div>
@ -74,7 +73,6 @@
</div>
</div>
</div>
</div>
<div class="b-list-footer-toolbar thm-message-list-bottom-toolbar">
<div class="footer-pager">
<!-- ko template: { name: 'Paginator', data: contactsPaginator } --><!-- /ko -->
@ -127,8 +125,6 @@
</div>
</div>
<div class="b-view-content" data-bind="css: {'read-only': viewReadOnly}">
<div class="content">
<div class="content-wrapper">
<div class="b-contact-view-desc" data-bind="visible: emptySelection"
data-i18n="CONTACTS/CONTACT_VIEW_DESC"></div>
<div data-bind="visible: !emptySelection()">
@ -209,6 +205,4 @@
</div>
</div>
</div>
</div>
</div>
</div>

6
snappymail/v/0.0.0/app/templates/Views/User/SettingsMenu.html
View file

@ -1,17 +1,13 @@
<div class="b-settins-left">
<div class="b-content opacity-on-panel-disabled">
<div class="b-content">
<nav class="b-settings-menu" data-bind="foreach: menu">
<a data-bind="css: {'selected': selected }, attr: { 'href': $root.link(route), 'data-i18n': label }"></a>
</nav>
</div>
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
<div class="b-footer">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
</a>
</div>
</div>
</div>
</div>

6
snappymail/v/0.0.0/app/templates/Views/User/SettingsPane.html
View file

@ -14,10 +14,6 @@
</div>
</div>
<div class="b-content">
<div class="content">
<div class="content-wrapper">
<div id="rl-settings-subscreen" class="b-settings-content"></div>
</div>
</div>
<div id="rl-settings-subscreen"></div>
</div>
</div>