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

Improved messageview design

Browse source
This commit is contained in:
djmaze 2021-09-01 11:01:56 +02:00
parent 47bbd3d410
commit aa16ef3dd0
2 changed files with 71 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -108,7 +108,7 @@
} }
.informationShort { .informationShort {
margin: 4px 50px 0 5px; margin: 4px 40px 0 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -120,8 +120,6 @@
.informationShortWrp { .informationShortWrp {
max-height: 100px; max-height: 100px;
overflow-y: auto; overflow-y: auto;
min-height: 30px;
margin-top: 4px;
} }
.informationFull { .informationFull {
@ -129,11 +127,8 @@
table { table {
width: 100%;
}
table, tr, td {
border-spacing: 0; border-spacing: 0;
width: 100%;
} }
td { td {
@ -149,10 +144,6 @@
width: 1%; width: 1%;
} }
.labelTo {
white-space: nowrap;
}
td + td { td + td {
word-break: break-all; word-break: break-all;
} }

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

@ -172,75 +172,78 @@
<span class="subject" data-bind="text: viewSubject, title: viewSubject, event: { 'dblclick': toggleFullScreen }"></span> <span class="subject" data-bind="text: viewSubject, title: viewSubject, event: { 'dblclick': toggleFullScreen }"></span>
<span class="emptySubjectText" data-i18n="MESSAGE/EMPTY_SUBJECT_TEXT" data-bind="event: { 'dblclick': toggleFullScreen }"></span> <span class="emptySubjectText" data-i18n="MESSAGE/EMPTY_SUBJECT_TEXT" data-bind="event: { 'dblclick': toggleFullScreen }"></span>
</div> </div>
<div> <div data-bind="hidden: showFullInfo(), event: { 'dblclick': toggleFullScreen }">
<div style="overflow: hidden;" data-bind="hidden: showFullInfo()"> <div class="informationShort">
<div class="informationShort" data-bind="event: { 'dblclick': toggleFullScreen }"> <span class="from" data-bind="html: viewFromShort, title: viewFrom"></span>
<span class="from" data-bind="html: viewFromShort, title: viewFrom"></span> <span data-bind="visible: viewFromDkimVisibility">
<span data-bind="visible: viewFromDkimVisibility"> &nbsp;
&nbsp; <i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i> </span>
</span> <div data-bind="visible: 0 < viewTimeStamp()">
<br/> (<time class="date" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>)
<span data-bind="visible: 0 < viewTimeStamp()">
(<time class="date" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>)
</span>
</div>
<div class="informationShortWrp">
<div class="informationShort" data-bind="visible: viewTo, event: { 'dblclick': toggleFullScreen }">
<span class="labelTo" data-i18n="GLOBAL/TO"></span>:&nbsp;
<span class="to" data-bind="text: viewTo"></span>
</div>
<div class="informationShort" data-bind="visible: viewCc, event: { 'dblclick': toggleFullScreen }">
<span class="labelTo" data-i18n="GLOBAL/CC"></span>:&nbsp;
<span class="to" data-bind="text: viewCc"></span>
</div>
</div> </div>
</div> </div>
<div class="informationFull" data-bind="visible: showFullInfo()"> <div class="informationShortWrp">
<table> <div class="informationShort" data-bind="visible: viewTo">
<tr data-bind="visible: '' !== viewFrom()"> <span data-i18n="GLOBAL/TO"></span>:&nbsp;
<td data-i18n="GLOBAL/FROM"></td> <span data-bind="text: viewTo"></span>
<td><span data-bind="text: viewFrom, title: viewFrom"></span> </div>
<span data-bind="visible: viewFromDkimVisibility"> <div class="informationShort" data-bind="visible: viewCc">
&nbsp; <span data-i18n="GLOBAL/CC"></span>:&nbsp;
<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i> <span data-bind="text: viewCc"></span>
</span> </div>
</td> </div>
</tr> <!--
<tr data-bind="visible: '' !== viewTo()"> <div class="informationShort">
<td data-i18n="GLOBAL/TO"></td> <span data-i18n="MESSAGE/SPAM_SCORE"></span>:&nbsp;
<td data-bind="text: viewTo, title: viewTo"></td> <meter min="0" max="100" optimum="0" low="33" high="66" data-bind="value: viewSpamScore, title: viewSpamStatus"></meter>
</tr> </div>
<tr data-bind="visible: '' !== viewCc()"> -->
<td data-i18n="GLOBAL/CC"></td> </div>
<td data-bind="text: viewCc, title: viewCc"></td> <div class="informationFull" data-bind="visible: showFullInfo()">
</tr> <table>
<tr data-bind="visible: '' !== viewBcc()"> <tr data-bind="visible: '' !== viewFrom()">
<td data-i18n="GLOBAL/BCC"></td> <td data-i18n="GLOBAL/FROM"></td>
<td data-bind="text: viewBcc, title: viewBcc"></td> <td><span data-bind="text: viewFrom, title: viewFrom"></span>
</tr> <span data-bind="visible: viewFromDkimVisibility">
<tr data-bind="visible: '' !== viewReplyTo()">
<td data-i18n="GLOBAL/REPLY_TO"></td>
<td data-bind="text: viewReplyTo, title: viewReplyTo"></td>
</tr>
<tr data-bind="visible: 0 < viewTimeStamp()">
<td data-i18n="MESSAGE/LABEL_DATE"></td>
<td>
<time data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>
&nbsp; &nbsp;
(<time data-moment-format="FROMNOW" data-bind="moment: viewTimeStamp"></time>) <i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
</td> </span>
</tr> </td>
<tr data-bind="visible: 0 < viewSpamScore()"> </tr>
<td data-i18n="MESSAGE/SPAM_SCORE"></td> <tr data-bind="visible: '' !== viewTo()">
<td><span data-bind="text: viewSpamScore, title: viewSpamStatus"></span>%</td> <td data-i18n="GLOBAL/TO"></td>
</tr> <td data-bind="text: viewTo, title: viewTo"></td>
<tr data-bind="visible: '' !== viewFrom()"> </tr>
<td data-i18n="POPUPS_FILTER/SELECT_FIELD_SIZE"></td> <tr data-bind="visible: '' !== viewCc()">
<td class="size" data-bind="text: viewSize"></td> <td data-i18n="GLOBAL/CC"></td>
</tr> <td data-bind="text: viewCc, title: viewCc"></td>
</table> </tr>
</div> <tr data-bind="visible: '' !== viewBcc()">
<td data-i18n="GLOBAL/BCC"></td>
<td data-bind="text: viewBcc, title: viewBcc"></td>
</tr>
<tr data-bind="visible: '' !== viewReplyTo()">
<td data-i18n="GLOBAL/REPLY_TO"></td>
<td data-bind="text: viewReplyTo, title: viewReplyTo"></td>
</tr>
<tr data-bind="visible: 0 < viewTimeStamp()">
<td data-i18n="MESSAGE/LABEL_DATE"></td>
<td>
<time data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>
&nbsp;
(<time data-moment-format="FROMNOW" data-bind="moment: viewTimeStamp"></time>)
</td>
</tr>
<tr data-bind="visible: 0 < viewSpamScore()">
<td data-i18n="MESSAGE/SPAM_SCORE"></td>
<td><span data-bind="text: viewSpamScore, title: viewSpamStatus"></span>%</td>
</tr>
<tr data-bind="visible: '' !== viewFrom()">
<td data-i18n="POPUPS_FILTER/SELECT_FIELD_SIZE"></td>
<td class="size" data-bind="text: viewSize"></td>
</tr>
</table>
</div> </div>
</div> </div>
<div class="messageItem fixIndex" data-bind="css: viewLineAsCss(), attr: {'style': 'top:' + viewBodyTopValue() + 'px' }"> <div class="messageItem fixIndex" data-bind="css: viewLineAsCss(), attr: {'style': 'top:' + viewBodyTopValue() + 'px' }">