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

New Message View (with attachments thumbnails)

Browse source
This commit is contained in:
RainLoop Team 2014-12-24 21:55:18 +04:00
parent 1c7f1928c7
commit 06e6f1a2da
22 changed files with 3046 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

16
dev/Styles/MessageList.less
View file

@ -52,7 +52,7 @@ html.rl-no-preview-pane {
padding-left: 8px;
padding-right: 8px;
}
.b-message-list-wrapper {
position: absolute;
top: 50px;
@ -275,7 +275,7 @@ html.rl-no-preview-pane {
.flagParent {
display: inline-block;
float: right;
padding: 0 8px 0 5px;
padding: 0 10px 0 5px;
}
&.e-single-line .flagParent {
@ -299,7 +299,7 @@ html.rl-no-preview-pane {
display: inline-block;
float: right;
position: relative;
margin: 2px 8px 0 5px;
margin: 2px 10px 0 5px;
}
&.e-single-line .attachmentParent {
@ -374,7 +374,7 @@ html.rl-no-preview-pane {
overflow: hidden;
text-overflow: ellipsis;
}
.subject-prefix {
color: #888;
/*font-style: italic;*/
@ -449,11 +449,11 @@ html.rl-no-preview-pane {
.sidebarParent {
background-color: #bdc3c7;
}
&.focused .sidebarParent {
background-color: darken(#bdc3c7, 10%) !important;
}
&.unseen {
background-color: darken(#ecf0f1, 5%);
@ -489,13 +489,13 @@ html.rl-no-preview-pane {
background-color: #398CF2;
.opacity(20);
}
+ .messageListItem .delimiter {
background-color: #398CF2;
opacity: 0.3;
}
}
&.hasFlaggedSubMessage {
.flagOff, .flagOn {
display: none;

118
dev/Styles/MessageView.less
View file

@ -70,6 +70,13 @@ html.rl-no-preview-pane {
-webkit-overflow-scrolling: touch;
}
.messageItemDropdown {
z-index: 100;
position: fixed;
top: 70px;
right: 25px;
}
.messageItem {
position: absolute;
@ -94,8 +101,8 @@ html.rl-no-preview-pane {
.buttonUp, .buttonUnFull, .buttonFull {
display: inline-block;
position: fixed;
right: 30px;
top: 90px;
right: 25px;
bottom: 25px;
height: 30px;
width: 30px;
text-align: center;
@ -119,11 +126,11 @@ html.rl-no-preview-pane {
}
.buttonUp {
right: 70px;
right: 65px;
z-index: 0;
}
.buttonUnFull {
.buttonUp, .buttonUnFull {
display: none;
}
@ -230,8 +237,7 @@ html.rl-no-preview-pane {
display: inline-block;
margin: 5px;
padding: 5px;
max-width: 170px;
max-width: 200px;
min-width: 60px;
overflow: hidden;
cursor: pointer;
@ -246,19 +252,83 @@ html.rl-no-preview-pane {
border-radius: 2px;
.attachmentIcon {
font-size: 23px;
width: 23px;
height: 23px;
color: #666;
.attachmentIconParent {
height: 56px;
width: 60px;
background: none;
}
.attachmentPreview {
color: #999;
margin: 0px 5px;
}
.attachmentPreview:hover {
.attachmentNameParent {
margin-left: 60px;
padding: 4px;
padding-left: 6px;
min-width: 90px;
color: #fff;
background: #eee;
color: #333;
background: #fafafa;
border-left: 1px solid #ddd;
}
&.hasThumbnail .attachmentNameParent {
background: rgba(0, 0, 0, .6);
color: #fff;
text-shadow: 0 1px 0 #000;
border-left: 0px;
}
.attachmentIcon {
margin: 6px 0 0 13px;
font-size: 36px;
width: 36px;
height: 36px;
color: #aaa;
}
.attachmentIconParent.hasPreview {
.attachmentNonePreview {
display: none;
}
}
a.attachmentPreview {
display: inline-block;
height: 100%;
width: 100%;
}
.attachmentIconParent.hasPreview:hover {
background: #555 !important;
background-image: none !important;
background: rgba(0, 0, 0, .8) !important;
color: #fff;
.attachmentIcon {
color: #fff;
text-shadow: 0 1px 0 #000;
}
}
.attachmentIconParent.hasPreview .show-hover {
display: none;
}
.attachmentIconParent.hasPreview:hover .show-hover {
display: inline-block;
}
.attachmentIconParent.hasPreview:hover .hide-hover {
display: none;
}
&.hasThumbnail .attachmentMainIcon {
display: none;
}
}
}
@ -382,6 +452,7 @@ html.rl-no-preview-pane .messageView {
.toolbar {
padding-left: @rlMainBorderSize;
}
.b-content {
top: 50px;
bottom: @rlBottomMargin;
@ -389,10 +460,6 @@ html.rl-no-preview-pane .messageView {
border: @rlMainBorderSize solid @rlMainDarkColor;
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;
.buttonUp, .buttonUnFull, .buttonFull {
top: 70px;
}
}
}
@ -423,9 +490,12 @@ html.rl-message-fullscreen {
border: @rlLowBorderSize solid @rlMainDarkColor;
border-radius: @rlLowBorderRadius;
.buttonUp, .buttonUnFull {
.messageItemDropdown {
top: 20px;
}
.buttonUnFull {
display: inline-block;
top: 36px;
}
.buttonFull {
@ -433,3 +503,7 @@ html.rl-message-fullscreen {
}
}
}
.nano-scrolllimit-top .buttonUp {
display: inline-block !important;
}