Cleanup attachments design

This commit is contained in:
djmaze 2021-04-23 10:12:06 +02:00
parent 3ef494c971
commit 9ec84baa32
3 changed files with 12 additions and 23 deletions

View file

@ -41,7 +41,7 @@
} }
&.error { &.error {
.attachmentIcon, .attachmentSize, .attachmentName { .iconMain, .iconPreview, .attachmentSize, .attachmentName {
color: red; color: red;
} }
} }
@ -91,11 +91,10 @@
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
} }
.attachmentIcon { .iconMain, .iconPreview {
margin: 6px 0 0; box-sizing: border-box;
padding: 6px 0 0;
font-size: 36px; font-size: 36px;
width: 36px;
height: 36px;
color: #aaa; color: #aaa;
&.icon-none { &.icon-none {
@ -125,7 +124,7 @@
} }
.attachmentIconParent.hasPreview .showPreview, .attachmentIconParent.hasPreview .showPreview,
.attachmentIconParent.hasPreplay .showPreview { .attachmentIconParent.hasPreplay .showPreplay {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
} }

View file

@ -276,25 +276,17 @@
<li class="attachmentItem" draggable="true" <li class="attachmentItem" draggable="true"
data-bind="visible: !isLinked, event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}"> data-bind="visible: !isLinked, event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}">
<div class="attachmentIconParent" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }"> <div class="attachmentIconParent" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }">
<div class="hidePreview"> <i class="hidePreview iconMain" data-bind="css: iconClass()"></i>
<div class="iconMain">
<i class="attachmentIcon" data-bind="css: iconClass()"></i>
</div>
</div>
<div class="showPreview"> <div class="showPreview">
<a data-bind="click: $root.attachmentPreview, css: {'attachmentImagePreview': isImage(), 'visible': !isLinked}, attr: { 'title': fileName, 'href': linkPreviewMain() }" target="_blank"> <a data-bind="css: {'attachmentImagePreview': isImage()}, attr: { 'title': fileName, 'href': linkPreviewMain() }" target="_blank">
<div class="iconMain"> <i class="iconMain" data-bind="css: iconClass()"></i>
<i class="attachmentIcon" data-bind="css: iconClass()"></i>
</div>
<div class="iconBG" data-bind="attr: { 'style': linkThumbnailPreviewStyle() }"></div> <div class="iconBG" data-bind="attr: { 'style': linkThumbnailPreviewStyle() }"></div>
<div class="iconPreview attachmentIcon fontastic show-hover">👁</div> <div class="iconPreview fontastic">👁</div>
</a> </a>
</div> </div>
<div class="showPreplay"> <div class="showPreplay">
<div class="iconMain"> <i class="iconMain" data-bind="css: iconClass()"></i>
<i class="attachmentIcon" data-bind="css: iconClass()"></i> <div class="iconPreview fontastic"></div>
</div>
<div class="iconPreview attachmentIcon fontastic show-hover"></div>
</div> </div>
</div> </div>
<div class="attachmentNameParent"> <div class="attachmentNameParent">

View file

@ -168,9 +168,7 @@
<ul class="attachmentList" data-bind="foreach: attachments"> <ul class="attachmentList" data-bind="foreach: attachments">
<li class="attachmentItem" data-bind="attr: { 'title': title }, css: { 'waiting': waiting, 'error': '' !== error() }"> <li class="attachmentItem" data-bind="attr: { 'title': title }, css: { 'waiting': waiting, 'error': '' !== error() }">
<div class="attachmentIconParent"> <div class="attachmentIconParent">
<div class="iconMain"> <i class="iconMain" data-bind="css: iconClass(), visible: !uploading() || 0 === progress()"></i>
<i class="attachmentIcon" data-bind="css: iconClass(), visible: !uploading() || 0 === progress()"></i>
</div>
<div class="iconProgress" data-bind="attr: { 'style': progressStyle }, visible: uploading"></div> <div class="iconProgress" data-bind="attr: { 'style': progressStyle }, visible: uploading"></div>
<div class="iconBG" data-bind="text: progressText, visible: uploading"></div> <div class="iconBG" data-bind="text: progressText, visible: uploading"></div>
</div> </div>