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;
}
.flagParent {
padding: 0 10px 0 5px;
}
time, .sizeParent {
margin: 0 5px;
opacity: 0.6;
@ -286,10 +282,6 @@ html.rl-no-preview-pane {
white-space: nowrap;
}
.threadsParent {
position: relative;
}
.attachmentParent {
position: relative;
margin: 2px 10px 0 5px;
@ -345,11 +337,9 @@ html.rl-no-preview-pane {
.threads-len {
.threads-len-data {
border-radius: 6px;
padding: 2px 0 1px 4px;
border: 1px solid #ccc;
&:hover {
background-color: rgba(127,127,127,0.3);
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 {
display: none;
margin-right: 0.25em;
@ -424,10 +403,19 @@ html.rl-no-preview-pane {
}
}
&:not(.flagged) .flagOn,
&:not(.hasFlaggedSubMessage) .flagOnHalf,
&.flagged .flagOff, &.hasFlaggedSubMessage .flagOff {
display: none;
.flagParent {
padding: 0 10px 0 5px;
}
&.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="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
<div class="flagParent">
<i class="flagOn fontastic"></i>
<i class="flagOnHalf fontastic"></i>
<i class="flagOff fontastic"></i>
<!-- ⚐⚑ -->
</div>
<div class="flagParent fontastic"><!-- ☆★⚐⚑ --></div>
<div class="senderParent actionHandle">
<i class="replyFlag fontastic"></i>
@ -228,13 +223,9 @@
<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
<div class="threadsParent" data-bind="visible: 1 < threadsLen()">
<span class="threads-len">
<span class="threads-len-data">
<span data-bind="text: threadsLen"></span>
<i class="icon-right-mini"></i>
</span>
</span>
<div class="threads-len" data-bind="visible: 1 < threadsLen()">
<span data-bind="text: threadsLen"></span>
</div>
<time class="actionHandle" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>