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

Fix some MailMessageView styling

Browse source
This commit is contained in:
the-djmaze 2023-02-06 09:49:49 +01:00
parent 70e32e0905
commit f01c6bce4b
5 changed files with 301 additions and 338 deletions
Download patch file Download diff file Expand all files Collapse all files

1
dev/Styles/@Main.less
View file

@ -78,7 +78,6 @@
position: initial; position: initial;
} }
.messageView, .messageView,
.messageView .b-content,
.messageView .b-message, .messageView .b-message,
#messageItem, #messageItem,
#messageItem .b-text-part { #messageItem .b-text-part {

2
dev/Styles/User/Layout.less
View file

@ -97,7 +97,7 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer,
#V-MailMessageView { #V-MailMessageView {
position: absolute; position: absolute;
top: 50px; top: 0;
bottom: 13px; bottom: 13px;
right: 0; right: 0;
left: 0; left: 0;

72
dev/Styles/User/MessageView.less
View file

@ -5,25 +5,26 @@ html.rl-no-preview-pane {
} }
} }
#V-MailMessageView.focused .messageView { #V-MailMessageView .top-toolbar {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); color: #fff;
padding: 10px 0;
}
html.rl-no-preview-pane #V-MailMessageView .top-toolbar {
padding-left: 1px;
}
html:not(.rl-mobile):not(.rl-no-preview-pane) #V-MailMessageView .top-toolbar {
visibility: hidden;
}
html.rl-bottom-preview-pane #V-MailMessageView .top-toolbar {
display: none;
} }
.messageView { .messageView {
background-color: #fff; background-color: #fff;
border: 1px solid var(--border-color, #aaa); border: 1px solid var(--border-color, #aaa);
border-radius: var(--border-radius, 5px); border-radius: var(--border-radius, 5px);
height: 100%; height: calc(100% - 50px);
position: relative;
.toolbar {
position: absolute;
top: -50px;
right: 0;
left: 0;
height: 30px;
padding: 10px 0;
color: #fff;
}
.priorityHigh .subject::before { .priorityHigh .subject::before {
content: '! '; /*❗*/ content: '! '; /*❗*/
@ -31,10 +32,6 @@ html.rl-no-preview-pane {
font-weight: bolder; font-weight: bolder;
} }
.b-content {
height: 100%;
}
.b-message { .b-message {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -141,10 +138,6 @@ html.rl-no-preview-pane {
opacity: 0.5; opacity: 0.5;
} }
.messageButtons {
margin-top: 5px;
}
.informationShort { .informationShort {
margin: 0 56px 0 0; margin: 0 56px 0 0;
overflow: hidden; overflow: hidden;
@ -240,6 +233,11 @@ html.rl-no-preview-pane {
} }
} }
#V-MailMessageView.focused .messageView {
border-color: #9d9d9d;
box-shadow: var(--smMainShadow);
}
#messageItem { #messageItem {
color: #000; color: #000;
@ -443,31 +441,12 @@ html.rl-no-preview-pane {
} }
html.rl-no-preview-pane .messageView { html.rl-no-preview-pane .messageView {
.toolbar {
padding-left: 1px;
}
.b-content {
top: 50px;
left: 0;
bottom: @rlBottomMargin;
right: @rlBottomMargin;
border: 1px solid var(--border-color, #aaa); border: 1px solid var(--border-color, #aaa);
box-shadow: var(--smMainShadow); box-shadow: var(--smMainShadow);
}
}
html:not(.rl-mobile):not(.rl-no-preview-pane) .messageView {
.top-toolbar {
display: none;
}
} }
html.rl-bottom-preview-pane .messageView { html.rl-bottom-preview-pane .messageView {
.b-content { height: 100%;
bottom: @rlBottomMargin;
}
} }
html.rl-fullscreen { html.rl-fullscreen {
@ -476,20 +455,11 @@ html.rl-fullscreen {
#V-MailMessageList, #V-MailMessageList,
#V-SettingsPane, #V-SettingsPane,
#V-SystemDropDown, #V-SystemDropDown,
#V-MailMessageView .messageView .toolbar { #V-MailMessageView .top-toolbar {
display: none !important; display: none !important;
} }
.messageView { .messageView {
border: 0; border: 0;
} }
.messageView .b-content {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 0;
}
} }

4
dev/Styles/_Values.less
View file

@ -1,14 +1,12 @@
@rlLeftWidth: 200px; @rlLeftWidth: 200px;
@rlLowMargin: 8px; @rlLowMargin: 8px;
@rlBottomMargin: 5px;
:root { :root {
--rlLeftWidth: 200px;
--smDialogShrink: 20px; --smDialogShrink: 20px;
--smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2); --smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
} }
.rl-mobile { .rl-mobile {
/* For Firefox */ /* For Firefox */
--smDialogShrink: 50px; --smDialogShrink: 25px;
} }

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

@ -1,6 +1,4 @@
<div class="messageView"> <div class="top-toolbar g-ui-user-select-none btn-toolbar">
<div class="toolbar top-toolbar g-ui-user-select-none">
<div class="messageButtons btn-toolbar">
<div class="btn-group" data-i18n="[title]GLOBAL/CLOSE"> <div class="btn-group" data-i18n="[title]GLOBAL/CLOSE">
<a class="btn buttonClose fontastic" data-bind="click: closeMessage">✖</a> <a class="btn buttonClose fontastic" data-bind="click: closeMessage">✖</a>
</div> </div>
@ -19,9 +17,8 @@
<a class="btn btn-thin buttonUp fontastic" data-bind="command: goUpCommand">❮</a> <a class="btn btn-thin buttonUp fontastic" data-bind="command: goUpCommand">❮</a>
<a class="btn btn-thin buttonDown fontastic" data-bind="command: goDownCommand">❯</a> <a class="btn btn-thin buttonDown fontastic" data-bind="command: goDownCommand">❯</a>
</div> </div>
</div> </div>
</div> <div class="b-content messageView">
<div class="b-content">
<div class="b-message-view-backdrop" data-bind="visible: moveAction"> <div class="b-message-view-backdrop" data-bind="visible: moveAction">
<div class="backdrop-message" data-icon="📁" data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></div> <div class="backdrop-message" data-icon="📁" data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></div>
</div> </div>
@ -301,5 +298,4 @@
</div> </div>
</div> </div>
<!-- /ko --> <!-- /ko -->
</div>
</div> </div>