Reduce excessive DOM a bit

This commit is contained in:
djmaze 2021-07-30 14:40:32 +02:00
parent 0659b126e7
commit 00bc92f4c7
2 changed files with 17 additions and 38 deletions

View file

@ -275,10 +275,6 @@ html.rl-no-preview-pane {
font-size: 16px; font-size: 16px;
} }
.flagParent {
padding: 0 10px 0 5px;
}
time, .sizeParent { time, .sizeParent {
margin: 0 5px; margin: 0 5px;
opacity: 0.6; opacity: 0.6;
@ -286,10 +282,6 @@ html.rl-no-preview-pane {
white-space: nowrap; white-space: nowrap;
} }
.threadsParent {
position: relative;
}
.attachmentParent { .attachmentParent {
position: relative; position: relative;
margin: 2px 10px 0 5px; margin: 2px 10px 0 5px;
@ -345,11 +337,9 @@ html.rl-no-preview-pane {
.threads-len { .threads-len {
.threads-len-data { .threads-len-data {
border-radius: 6px; border-radius: 6px;
padding: 2px 0 1px 4px; padding: 2px 0 1px 4px;
border: 1px solid #ccc; border: 1px solid #ccc;
&:hover { &:hover {
background-color: rgba(127,127,127,0.3); background-color: rgba(127,127,127,0.3);
border-color: #666; border-color: #666;
@ -357,17 +347,6 @@ html.rl-no-preview-pane {
} }
} }
.flagOff {
opacity: 0.5;
&:hover {
opacity: 1;
}
}
.flagOn, .flagOnHalf {
color: orange;
}
.replyFlag, .forwardFlag { .replyFlag, .forwardFlag {
display: none; display: none;
margin-right: 0.25em; margin-right: 0.25em;
@ -424,10 +403,19 @@ html.rl-no-preview-pane {
} }
} }
&:not(.flagged) .flagOn, .flagParent {
&:not(.hasFlaggedSubMessage) .flagOnHalf, padding: 0 10px 0 5px;
&.flagged .flagOff, &.hasFlaggedSubMessage .flagOff { }
display: none; &.flagged .flagParent::after,
&.hasFlaggedSubMessage .flagParent::after {
color: orange;
content: '★'; /*⚑*/
}
&:not(.flagged):not(.hasFlaggedSubMessage) .flagParent::after {
content: '☆'; /*⚐*/
}
&:not(.flagged):not(.hasFlaggedSubMessage) .flagParent:not(:hover) {
opacity: 0.5;
} }
} }

View file

@ -203,12 +203,7 @@
<div class="messageListItem" data-bind="css: lineAsCss()"> <div class="messageListItem" data-bind="css: lineAsCss()">
<div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div> <div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
<div class="flagParent"> <div class="flagParent fontastic"><!-- ☆★⚐⚑ --></div>
<i class="flagOn fontastic"></i>
<i class="flagOnHalf fontastic"></i>
<i class="flagOff fontastic"></i>
<!-- ⚐⚑ -->
</div>
<div class="senderParent actionHandle"> <div class="senderParent actionHandle">
<i class="replyFlag fontastic"></i> <i class="replyFlag fontastic"></i>
@ -228,13 +223,9 @@
<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div> <div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
<div class="threadsParent" data-bind="visible: 1 < threadsLen()"> <div class="threads-len" data-bind="visible: 1 < threadsLen()">
<span class="threads-len"> <span data-bind="text: threadsLen"></span>
<span class="threads-len-data">
<span data-bind="text: threadsLen"></span>
<i class="icon-right-mini"></i>
</span>
</span>
</div> </div>
<time class="actionHandle" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time> <time class="actionHandle" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>