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

Added: resize messages list vertical

Browse source
This commit is contained in:
djmaze 2021-11-05 10:20:06 +01:00
parent 5188a88e95
commit 263e595ba2
10 changed files with 450 additions and 465 deletions
Download patch file Download diff file Expand all files Collapse all files

17
dev/Styles/Animations.less
View file

@ -8,19 +8,12 @@
100% {transform: translateX(0)}
}
html.rl-started-delay {
#rl-left {
transition: width 0.3s ease-out;
}
#rl-left {
transition: width 0.3s ease-out;
}
#rl-right {
transition: left 0.3s ease-out, right 0.3s ease-out;
}
#rl-sub-right {
transition: left 0.3s ease-out;
}
#rl-right {
transition: left 0.3s ease-out, right 0.3s ease-out;
}
@media screen and (min-width: 1000px) {

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

@ -68,7 +68,9 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
min-width: 155px;
max-width: 350px;
}
#rl-left > .resizer {
#rl-left > .resizer,
.rl-side-preview-pane .RL-MailMessageList > .resizer {
cursor: ew-resize;
height: 100%;
right: 0;
@ -105,13 +107,17 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
}
}
.b-message-list-wrapper.resizable {
resize: vertical;
overflow: hidden;
min-height: 200px;
max-height: 500px;
.rl-side-preview-pane .RL-MailMessageList.resizable {
resize: horizontal;
min-width: 320px;
max-width: 60%;
}
.b-message-list-wrapper > .resizer {
.rl-bottom-preview-pane .RL-MailMessageList.resizable {
resize: vertical;
min-height: 200px;
max-height: 60%;
}
.rl-bottom-preview-pane .RL-MailMessageList > .resizer {
cursor: ns-resize;
height: 5px;
left: 0;
@ -120,7 +126,7 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
}
html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
.b-message-list-wrapper > .resizer {
.RL-MailMessageList > .resizer {
display: block;
}
@ -129,18 +135,18 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
left: @rlLeftWidth;
}
#rl-sub-left {
.RL-MailMessageList {
position: absolute;
top: 0;
bottom: 0;
top: 50px;
bottom: @rlBottomMargin;
left: 0;
width: 50%;
}
#rl-sub-right {
.RL-MailMessageView {
position: absolute;
top: 0;
bottom: 0;
top: 50px + @rlLowMargin;
bottom: 13px;
right: 0;
left: 50%;
@ -244,11 +250,11 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
left: @rlLeftWidth + 20;
}
#rl-sub-left {
.RL-MailMessageList {
width: 40%;
}
#rl-sub-right {
.RL-MailMessageView {
left: 40%;
}
}
@ -304,45 +310,34 @@ html.rl-left-panel-disabled {
html.rl-mobile,
html.rl-no-preview-pane {
#rl-sub-left {
.RL-MailMessageList {
right: @rlBottomMargin !important;
width: inherit;
}
#rl-sub-right {
.RL-MailMessageView {
left: 0 !important;
}
}
html.rl-mobile #rl-left > .resizer,
html.rl-side-preview-pane:not(.rl-mobile) #rl-right .resizer {
html.rl-no-preview-pane #rl-right .resizer,
html.rl-mobile #rl-right .resizer {
display: none !important;
}
html.rl-bottom-preview-pane:not(.rl-mobile) {
#rl-sub-left {
.RL-MailMessageList {
right: @rlBottomMargin !important;
bottom: inherit;
width: inherit;
.b-message-list-wrapper {
bottom: inherit;
height: 300px;
box-shadow: none;
}
height: 300px;
}
#rl-sub-right {
.RL-MailMessageView {
left: 0 !important;
.b-message-view-wrapper {
top: 356px;
left: 0;
right: 5px;
box-shadow: none;
}
top: 356px;
}
}

10
dev/Styles/User/MessageList.less
View file

@ -12,10 +12,11 @@ html.rl-no-preview-pane {
}
.messageList {
height: 100%;
.toolbar {
position: absolute;
top: 0;
top: -50px;
right: 0;
left: 0;
height: 30px;
@ -59,13 +60,8 @@ html.rl-no-preview-pane {
}
.b-message-list-wrapper {
position: absolute;
top: 50px;
right: 0;
left: 0;
bottom: @rlBottomMargin;
border: 1px solid @rlMainDarkColor;
height: 100%;
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;

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

@ -3,10 +3,11 @@
}
.messageView {
height: 100%;
.toolbar {
position: absolute;
top: 0;
top: -50px - @rlLowMargin;
right: 0;
left: 0;
height: 30px;
@ -15,19 +16,10 @@
}
.b-content {
position: absolute;
margin: 0;
top: 50px + @rlLowMargin;
bottom: @rlLowMargin + @rlBottomMargin;
right: @rlLowMargin;
left: -2px;
/*overflow: hidden;*/
border: 1px solid @rlMainDarkColor;
border-radius: @rlMainBorderRadius;
background-color: #fff;
border: 1px solid @rlMainDarkColor;
border-radius: @rlMainBorderRadius;
height: 100%;
.b-message-view-checked-helper {
text-align: center;