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

View file

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

View file

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