diff --git a/dev/Styles/Attachmnets.less b/dev/Styles/Attachmnets.less index 63c146d05..941464487 100644 --- a/dev/Styles/Attachmnets.less +++ b/dev/Styles/Attachmnets.less @@ -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; diff --git a/dev/Styles/MessageView.less b/dev/Styles/MessageView.less index d2272624f..01dcd75c3 100644 --- a/dev/Styles/MessageView.less +++ b/dev/Styles/MessageView.less @@ -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; diff --git a/dev/View/User/MailBox/MessageView.js b/dev/View/User/MailBox/MessageView.js index 6402ca868..89c829aa6 100644 --- a/dev/View/User/MailBox/MessageView.js +++ b/dev/View/User/MailBox/MessageView.js @@ -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) diff --git a/rainloop/v/0.0.0/app/templates/Views/User/MailMessageView.html b/rainloop/v/0.0.0/app/templates/Views/User/MailMessageView.html index 75d5f95b3..6cdbaa6e5 100644 --- a/rainloop/v/0.0.0/app/templates/Views/User/MailMessageView.html +++ b/rainloop/v/0.0.0/app/templates/Views/User/MailMessageView.html @@ -188,7 +188,74 @@
-
+
+
+ +
+
+ ! + + +
+
+
+ +
+
+ + +   + + + + : + + + + () + +
+
+
+
+
+
+
+ : +   + +
+
+ +
+
+
+
+ : +   + +
+
+ : +   + +
+
+ : +   + +
+
+ : +   + +   + () +
+
+
+
+
@@ -201,73 +268,6 @@ -
-
- -
-
- ! - - -
-
-
- -
-
- - -   - - - - : - - - - () - -
-
-
-
-
-
-
- : -   - -
-
- -
-
-
-
- : -   - -
-
- : -   - -
-
- : -   - -
-
- : -   - -   - () -
-
-
-