mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-09-06 16:07:03 +03:00
Cleanup attachments design
This commit is contained in:
parent
3ef494c971
commit
9ec84baa32
3 changed files with 12 additions and 23 deletions
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue