Improved messageview design

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

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;
} }

View file

@ -172,29 +172,33 @@
<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>
<br/> <div data-bind="visible: 0 < viewTimeStamp()">
<span data-bind="visible: 0 < viewTimeStamp()">
(<time class="date" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>) (<time class="date" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>)
</span> </div>
</div> </div>
<div class="informationShortWrp"> <div class="informationShortWrp">
<div class="informationShort" data-bind="visible: viewTo, event: { 'dblclick': toggleFullScreen }"> <div class="informationShort" data-bind="visible: viewTo">
<span class="labelTo" data-i18n="GLOBAL/TO"></span>:&nbsp; <span data-i18n="GLOBAL/TO"></span>:&nbsp;
<span class="to" data-bind="text: viewTo"></span> <span data-bind="text: viewTo"></span>
</div> </div>
<div class="informationShort" data-bind="visible: viewCc, event: { 'dblclick': toggleFullScreen }"> <div class="informationShort" data-bind="visible: viewCc">
<span class="labelTo" data-i18n="GLOBAL/CC"></span>:&nbsp; <span data-i18n="GLOBAL/CC"></span>:&nbsp;
<span class="to" data-bind="text: viewCc"></span> <span data-bind="text: viewCc"></span>
</div> </div>
</div> </div>
<!--
<div class="informationShort">
<span data-i18n="MESSAGE/SPAM_SCORE"></span>:&nbsp;
<meter min="0" max="100" optimum="0" low="33" high="66" data-bind="value: viewSpamScore, title: viewSpamStatus"></meter>
</div>
-->
</div> </div>
<div class="informationFull" data-bind="visible: showFullInfo()"> <div class="informationFull" data-bind="visible: showFullInfo()">
<table> <table>
@ -242,7 +246,6 @@
</table> </table>
</div> </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' }">
<div tabindex="0" data-bind="hasfocus: messageDomFocused"> <div tabindex="0" data-bind="hasfocus: messageDomFocused">