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

Improved responsive view

Browse source 
Removed unused CSS
This commit is contained in:
djmaze 2021-03-05 16:46:40 +01:00
parent d351ee6367
commit 1ac96c93d6
17 changed files with 136 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

6
dev/App/Abstract.js
View file

@ -3,7 +3,6 @@ import ko from 'ko';
import {
doc,
elementById,
leftPanelDisabled,
Settings
} from 'Common/Globals';
@ -97,11 +96,6 @@ export class AbstractApp {
initOnStartOrLangChange();
leftPanelDisabled(ThemeStore.isMobile());
addEventListener('resize', () => leftPanelDisabled(ThemeStore.isMobile() || 767 >= innerWidth));
leftPanelDisabled.valueHasMutated();
LanguageStore.populate();
ThemeStore.populate();
}

2
dev/App/User.js
View file

@ -898,6 +898,8 @@ class AppUser extends AbstractApp {
bootstart() {
super.bootstart();
addEventListener('resize', () => leftPanelDisabled(ThemeStore.isMobile() || 1000 > innerWidth));
AppStore.populate();
SettingsStore.populate();
NotificationStore.populate();

4
dev/Stores/Theme.js
View file

@ -1,5 +1,5 @@
import ko from 'ko';
import { $htmlCL } from 'Common/Globals';
import { $htmlCL, leftPanelDisabled } from 'Common/Globals';
export const ThemeStore = {
themes: ko.observableArray(),
@ -17,6 +17,8 @@ export const ThemeStore = {
this.userBackgroundName(Settings.get('UserBackgroundName'));
this.userBackgroundHash(Settings.get('UserBackgroundHash'));
}
leftPanelDisabled(this.isMobile());
}
};

2
dev/Styles/@Admin.less
View file

@ -23,7 +23,7 @@
@import "Ui.less";
@import "Main.less";
@import "Layout.less";
@import "LayoutAdmin.less";
@import "Components.less";
@import "Login.less";
@import "Ask.less";

4
dev/Styles/Admin.less
View file

@ -107,10 +107,6 @@
}
}
.b-settings-content {
padding: 20px;
padding-left: 30px;
}
}
.btn.btn-logout {

59
dev/Styles/Layout.less
View file

@ -5,7 +5,7 @@
background-position: center;
}
#rl-center, #rl-top, #rl-bottom, #rl-left, #rl-right {
#rl-center, #rl-top, #rl-left, #rl-right {
position: absolute;
top: 0;
right: 0;
@ -48,14 +48,8 @@ html.rl-mobile {
z-index: 2;
}
#rl-bottom {
top: auto;
z-index: 1;
}
#rl-left {
width: @rlLeftWidth;
min-width: 60px;
}
/*
@ -131,7 +125,7 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
top: 0;
bottom: 0;
left: 0;
width: 500px;
width: 50%;
}
#rl-sub-right {
@ -139,7 +133,7 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
top: 0;
bottom: 0;
right: 0;
left: 500px;
left: 50%;
.b-message-view-backdrop {
position: absolute;
@ -187,6 +181,14 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
// -webkit-overflow-scrolling: touch;
}
.b-settings-content {
padding:20px 20px 20px 30px;
}
/* desktop */
@media screen and (min-width: 1000px) {
}
/* desktop-large */
@media screen and (min-width: 1401px) {
#rl-left {
@ -198,30 +200,11 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
}
#rl-sub-left {
width: 500px;
width: 40%;
}
#rl-sub-right {
left: 500px;
}
}
/* desktop */
@media screen and (min-width: 1000px) and (max-width: 1400px) {
#rl-left {
width: @rlLeftWidth;
}
#rl-right {
left: @rlLeftWidth;
}
#rl-sub-left {
width: 400px;
}
#rl-sub-right {
left: 400px;
left: 40%;
}
}
@ -235,17 +218,9 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
left: 155px;
}
#rl-sub-left {
width: 310px;
.b-settings-content {
padding: 10px 10px 10px 20px;
}
#rl-sub-right {
left: 310px;
}
}
/* tablet */
@media screen and (min-width: 768px) and (max-width: 999px) {
}
.hidden-on-ctrl-btn,
@ -272,10 +247,6 @@ html.rl-left-panel-disabled {
opacity: 0.3;
}
.visibility-hidden-on-panel-disabled {
visibility: hidden;
}
.hide-on-panel-disabled {
display: none;
}

105
dev/Styles/LayoutAdmin.less Normal file
View file

@ -0,0 +1,105 @@
.UserBackground body {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#rl-center, #rl-top, #rl-left, #rl-right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
border: 0;
z-index: 0;
}
#rl-content {
height: 100%;
width: 100%;
}
#rl-center {
min-width: 600px;
min-height: 400px;
}
#rl-top {
bottom: auto;
z-index: 2;
}
#rl-left {
width: @rlLeftWidth;
}
#rl-right {
z-index: 1;
left: @rlLeftWidth;
}
#rl-popups > .rl-view-model {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
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;
}
/* desktop */
@media screen and (min-width: 1000px) {
.toggleLeft {
display: none;
}
}
/* desktop-large */
@media screen and (min-width: 1401px) {
#rl-left {
width: @rlLeftWidth + 20;
}
#rl-right {
left: @rlLeftWidth + 20;
}
}
/* 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;
}
html:not(.rl-left-panel-disabled) #rl-right {
right: 5-@rlLeftWidth;
}
html.rl-left-panel-disabled {
#rl-left {
width: 0px !important;
.opacity-on-panel-disabled {
opacity: 0.3;
}
}
#rl-right {
left: 5px !important;
}
}
}

2
dev/Styles/MessageView.less
View file

@ -591,7 +591,7 @@ html .messageItem .line-loading {
html.rl-message-fullscreen {
#rl-left, #rl-bottom {
#rl-left {
display: none !important;
}

5
dev/Styles/Settings.less
View file

@ -109,11 +109,6 @@
}
}
.b-settings-content {
padding: 20px;
padding-left: 30px;
}
td {
padding: 4px 8px;
line-height: 30px;

5
dev/Styles/_BootstrapFix.less
View file

@ -101,11 +101,6 @@ label.inline, span.inline {
width: calc(~'100% - 20px') !important;
}
.b-settings-content {
padding: 10px;
padding-left: 20px;
}
.form-horizontal {
.control-group {
.control-label {

3
dev/View/Admin/Settings/Menu.js
View file

@ -1,4 +1,3 @@
import { leftPanelDisabled } from 'Common/Globals';
import { KeyState } from 'Common/Enums';
import { settingsMenuKeysHandler } from 'Knoin/Knoin';
@ -11,8 +10,6 @@ class MenuSettingsAdminView extends AbstractViewLeft {
constructor(screen) {
super('Admin/Settings/Menu', 'AdminMenu');
this.leftPanelDisabled = leftPanelDisabled;
this.menu = screen.menu;
}

10
dev/View/Admin/Settings/Pane.js
View file

@ -25,16 +25,10 @@ class PaneSettingsAdminView extends AbstractViewRight {
.extend({ rateLimit: 300 });
}
hideLeft(item, event) {
toggleLeft(item, event) {
event.preventDefault();
event.stopPropagation();
leftPanelDisabled(true);
}
showLeft(item, event) {
event.preventDefault();
event.stopPropagation();
leftPanelDisabled(false);
leftPanelDisabled(!leftPanelDisabled());
}
logoutClick() {

5
snappymail/v/0.0.0/app/libraries/RainLoop/Actions/Admin.php
View file

@ -67,11 +67,10 @@ trait Admin
{
$this->oLogger->Write('Cannot store an admin token',
\MailSo\Log\Enumerations\Type::WARNING);
$sRand = '';
return '';
}
return '' === $sRand ? '' : Utils::EncodeKeyValuesQ(array('token', \md5(APP_SALT), $sRand));
return Utils::EncodeKeyValuesQ(array('token', \md5(APP_SALT), $sRand));
}
private function setCapaFromParams(\RainLoop\Config\Application $oConfig, string $sParamName, string $sCapa) : void

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

@ -1,11 +1,5 @@
<div class="b-admin-left g-ui-user-select-none">
<div class="b-toolbar">
<div class="btn-group show-on-panel-disabled">
<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 class="b-toolbar"></div>
<div class="b-content opacity-on-panel-disabled">
<div class="b-admin-menu" data-bind="foreach: menu">
<!-- ko if: disabled -->
@ -20,5 +14,4 @@
<!-- /ko -->
</div>
</div>
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
</div>

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

@ -1,7 +1,6 @@
<div class="b-settings b-admin-right">
<div class="b-toolbar g-ui-user-select-none">
<a class="btn btn-thin-2 show-mobile fontastic" data-bind="click: hideLeft, visible: !leftPanelDisabled()">❮</a>
<a class="btn btn-thin-2 show-mobile fontastic" data-bind="click: showLeft, visible: leftPanelDisabled()">❯</a>
<a class="btn btn-thin-2 fontastic toggleLeft" data-bind="click: toggleLeft, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
<i class="icon-spinner" style="margin: 10px" data-bind="style: {'visibility': adminManLoadingVisibility }"></i>
<h4>SnappyMail - <span data-i18n="TOP_PANEL/LABEL_ADMIN_PANEL"></span></h4>
<a class="btn btn-logout fontastic" data-bind="click: logoutClick">⏻</a>
@ -9,7 +8,7 @@
<div class="b-content">
<div class="content">
<div class="content-wrapper">
<div id="rl-settings-subscreen" class="b-settings-content" style="position: relative; z-index: 2"></div>
<div id="rl-settings-subscreen" class="b-settings-content"></div>
</div>
</div>
</div>

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

@ -16,7 +16,7 @@
<div class="b-content">
<div class="content">
<div class="content-wrapper">
<div id="rl-settings-subscreen" class="b-settings-content" style="position: relative; z-index: 2"></div>
<div id="rl-settings-subscreen" class="b-settings-content"></div>
</div>
</div>
</div>

1
vendors/bootstrap/less/wells.less vendored
View file

@ -12,6 +12,7 @@
border: 1px solid darken(@wellBackground, 7%);
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
display: inline-block;
}
// Sizes