Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-10 15:08:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed message header

Browse source
This commit is contained in:
RainLoop Team 2015-01-18 19:26:00 +04:00
parent ef3042aff7
commit db942d4970
4 changed files with 164 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

8
dev/Styles/Attachmnets.less
View file

@ -19,6 +19,11 @@
opacity: 0.6;
}
.attachmentSize {
font-size: 12px;
color: #999;
}
&.error {
.attachmentIcon, .attachmentSize, .attachmentName {
color: red;
@ -79,8 +84,7 @@
position: relative;
margin-left: 60px;
padding: 4px;
padding-left: 6px;
padding: 4px 4px 3px 6px;
min-width: 90px;
cursor: pointer;

117
dev/Styles/MessageView.less
View file

@ -76,6 +76,66 @@ html.rl-no-preview-pane {
right: 20px;
}
.messageItemHeader {
position: absolute;
padding: 10px;
background-color: #f8f8f8;
border-top: 0px;
border-bottom: 1px solid #ddd;
z-index: 1;
top: 0;
left: 0;
right: 0;
.date {
}
.fromPic {
display: inline-block;
width: 50px;
height: 50px;
float: left;
padding: 2px;
margin: 0 5px 0 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}
.subjectParent {
font-size: 16px;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-left: 3px;
}
.senderParent {
margin-top: 10px;
}
.messageButtons {
margin-top: 5px;
}
.informationShort {
margin-left: 15px;
a {
.g-ui-link;
}
}
.informationFull {
margin-top: 10px;
border: 1px solid #ddd;
background-color: #fff;
border-radius: 5px;
padding: 10px 15px;
}
}
.messageItem {
position: absolute;
@ -133,63 +193,6 @@ html.rl-no-preview-pane {
display: none;
}
.messageItemHeader {
position: relative;
padding: 10px;
background-color: #f8f8f8;
border-top: 0px;
border-bottom: 1px solid #ddd;
z-index: 1;
.date {
}
.fromPic {
display: inline-block;
width: 50px;
height: 50px;
float: left;
padding: 2px;
margin: 0 5px 0 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}
.subjectParent {
font-size: 16px;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-left: 3px;
}
.senderParent {
margin-top: 10px;
}
.messageButtons {
margin-top: 5px;
}
.informationShort {
margin-left: 15px;
a {
.g-ui-link;
}
}
.informationFull {
margin-top: 10px;
border: 1px solid #ddd;
background-color: #fff;
border-radius: 5px;
padding: 10px 15px;
}
}
.loading {
text-align: center;
font-size: 24px;

31
dev/View/User/MailBox/MessageView.js
View file

@ -44,6 +44,7 @@
}
;
this.oHeaderDom = null;
this.oMessageScrollerDom = null;
this.pswp = null;
@ -149,6 +150,9 @@
}, this.messageVisibility);
// viewer
this.viewBodyTopValue = ko.observable(0);
this.viewHash = '';
this.viewSubject = ko.observable('');
this.viewFromShort = ko.observable('');
@ -364,7 +368,14 @@
{
var
self = this,
sErrorMessage = Utils.i18n('PREVIEW_POPUP/IMAGE_ERROR')
sErrorMessage = Utils.i18n('PREVIEW_POPUP/IMAGE_ERROR'),
fCheckHeaderHeight = function () {
if (self.oHeaderDom)
{
self.viewBodyTopValue(self.message() ? self.oHeaderDom.height() +
20 /* padding-(top/bottom): 20px */ + 1 /* borded-bottom: 1px */ : 0);
}
}
;
this.fullScreenMode.subscribe(function (bValue) {
@ -374,6 +385,24 @@
}
}, this);
this.fullScreenMode.subscribe(fCheckHeaderHeight);
this.showFullInfo.subscribe(fCheckHeaderHeight);
this.message.subscribe(fCheckHeaderHeight);
Globals.$win.on('resize', function () {
_.delay(fCheckHeaderHeight, 1);
_.delay(fCheckHeaderHeight, 200);
_.delay(fCheckHeaderHeight, 500);
});
this.showFullInfo.subscribe(function () {
Utils.windowResize();
Utils.windowResize(250);
});
this.oHeaderDom = $('.messageItemHeader', oDom);
this.oHeaderDom = this.oHeaderDom[0] ? this.oHeaderDom : null;
this.pswpDom = $('.pswp', oDom)[0];
if (this.pswpDom)

136
rainloop/v/0.0.0/app/templates/Views/User/MailMessageView.html
View file

@ -188,7 +188,74 @@
</div>
<div data-bind="visible: message">
<div class="messageItem fixIndex" data-bind="css: viewLineAsCcc(), nano: true">
<div class="messageItemHeader">
<div>
<img class="fromPic" data-bind="visible: viewUserPicVisible, attr: {'src': viewUserPic() }">
<div style="overflow: hidden;">
<div class="subjectParent" data-bind="event: { 'dblclick': toggleFullScreen }">
<b style="color:red;margin-right:5px" data-bind="visible: viewIsImportant">!</b>
<span class="subject" data-bind="text: viewSubject, title: viewSubject"></span>
<span class="i18n emptySubjectText" data-i18n-text="MESSAGE/EMPTY_SUBJECT_TEXT"></span>
</div>
<div class="senderParent">
<div class="g-ui-user-select-none" style="float: left; cursor: pointer;" data-bind="click: function() { showFullInfo(!showFullInfo()); }">
<i class="icon-right-dir" data-bind="css: showFullInfo() ? 'icon-down-dir' : 'icon-right-dir'"></i>
</div>
<div class="informationShort" data-bind="event: { 'dblclick': toggleFullScreen }">
<span data-bind="visible: !isDraftOrSentFolder()">
<span class="from" data-bind="html: viewFromShort, title: viewFrom"></span>
&nbsp;
<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle" />
</span>
<span data-bind="visible: isDraftOrSentFolder()">
<span class="i18n uiLabel labelTo" data-i18n-text="MESSAGE/LABEL_TO"></span>:
<span class="to" data-bind="html: viewToShort, title: viewTo"></span>
</span>
<span data-bind="visible: '' !== viewDate()">
(<span class="date" data-bind="text: viewDate"></span>)
</span>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="informationFull" data-bind="visible: showFullInfo()">
<div>
<div class="pull-left" data-bind="visible: '' !== viewFrom()">
<span class="i18n uiLabel labelFrom" data-i18n-text="MESSAGE/LABEL_FROM"></span>:
&nbsp;
<span class="from" data-bind="text: viewFrom, title: viewFrom"></span>
</div>
<div class="pull-right" data-bind="visible: '' !== viewSize()">
<span class="size" data-bind="text: viewSize"></span>
</div>
<div class="clearfix"></div>
</div>
<div data-bind="visible: '' !== viewTo()">
<span class="i18n uiLabel labelTo" data-i18n-text="MESSAGE/LABEL_TO"></span>:
&nbsp;
<span class="to" data-bind="text: viewTo, title: viewTo"></span>
</div>
<div data-bind="visible: '' !== viewCc()">
<span class="i18n uiLabel labelCc" data-i18n-text="MESSAGE/LABEL_CC"></span>:
&nbsp;
<span class="cc" data-bind="text: viewCc, title: viewCc"></span>
</div>
<div data-bind="visible: '' !== viewBcc()">
<span class="i18n uiLabel labelBcc" data-i18n-text="MESSAGE/LABEL_BCC"></span>:
&nbsp;
<span class="bcc" data-bind="text: viewBcc, title: viewBcc"></span>
</div>
<div data-bind="visible: '' !== viewDate()">
<span class="i18n uiLabel labelBcc" data-i18n-text="MESSAGE/LABEL_DATE"></span>:
&nbsp;
<span class="date" data-bind="text: viewDate"></span>
&nbsp;
(<span class="date" data-bind="text: viewMoment"></span>)
</div>
</div>
</div>
</div>
<div class="messageItem fixIndex" data-bind="css: viewLineAsCcc(), nano: true, attr: {'style': 'top:' + viewBodyTopValue() + 'px' }">
<div class="content g-scrollbox" tabindex="0" data-bind="hasfocus: messageDomFocused">
<div class="content-wrapper">
<div>
@ -201,73 +268,6 @@
<span class="buttonUnFull" data-bind="click: unFullScreen">
<i class="icon-arrows-in"></i>
</span>
<div class="messageItemHeader">
<div>
<img class="fromPic" data-bind="visible: viewUserPicVisible, attr: {'src': viewUserPic() }">
<div style="overflow: hidden;">
<div class="subjectParent" data-bind="event: { 'dblclick': toggleFullScreen }">
<b style="color:red;margin-right:5px" data-bind="visible: viewIsImportant">!</b>
<span class="subject" data-bind="text: viewSubject, title: viewSubject"></span>
<span class="i18n emptySubjectText" data-i18n-text="MESSAGE/EMPTY_SUBJECT_TEXT"></span>
</div>
<div class="senderParent">
<div class="g-ui-user-select-none" style="float: left; cursor: pointer;" data-bind="click: function() { showFullInfo(!showFullInfo()); }">
<i class="icon-right-dir" data-bind="css: showFullInfo() ? 'icon-down-dir' : 'icon-right-dir'"></i>
</div>
<div class="informationShort" data-bind="event: { 'dblclick': toggleFullScreen }">
<span data-bind="visible: !isDraftOrSentFolder()">
<span class="from" data-bind="html: viewFromShort, title: viewFrom"></span>
&nbsp;
<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle" />
</span>
<span data-bind="visible: isDraftOrSentFolder()">
<span class="i18n uiLabel labelTo" data-i18n-text="MESSAGE/LABEL_TO"></span>:
<span class="to" data-bind="html: viewToShort, title: viewTo"></span>
</span>
<span data-bind="visible: '' !== viewDate()">
(<span class="date" data-bind="text: viewDate"></span>)
</span>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="informationFull" data-bind="visible: showFullInfo()">
<div>
<div class="pull-left" data-bind="visible: '' !== viewFrom()">
<span class="i18n uiLabel labelFrom" data-i18n-text="MESSAGE/LABEL_FROM"></span>:
&nbsp;
<span class="from" data-bind="text: viewFrom, title: viewFrom"></span>
</div>
<div class="pull-right" data-bind="visible: '' !== viewSize()">
<span class="size" data-bind="text: viewSize"></span>
</div>
<div class="clearfix"></div>
</div>
<div data-bind="visible: '' !== viewTo()">
<span class="i18n uiLabel labelTo" data-i18n-text="MESSAGE/LABEL_TO"></span>:
&nbsp;
<span class="to" data-bind="text: viewTo, title: viewTo"></span>
</div>
<div data-bind="visible: '' !== viewCc()">
<span class="i18n uiLabel labelCc" data-i18n-text="MESSAGE/LABEL_CC"></span>:
&nbsp;
<span class="cc" data-bind="text: viewCc, title: viewCc"></span>
</div>
<div data-bind="visible: '' !== viewBcc()">
<span class="i18n uiLabel labelBcc" data-i18n-text="MESSAGE/LABEL_BCC"></span>:
&nbsp;
<span class="bcc" data-bind="text: viewBcc, title: viewBcc"></span>
</div>
<div data-bind="visible: '' !== viewDate()">
<span class="i18n uiLabel labelBcc" data-i18n-text="MESSAGE/LABEL_DATE"></span>:
&nbsp;
<span class="date" data-bind="text: viewDate"></span>
&nbsp;
(<span class="date" data-bind="text: viewMoment"></span>)
</div>
</div>
</div>
</div>
<div class="line-loading e-strip-animation" data-bind="visible: messageLoadingThrottle()"></div>