mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 15:56:10 +08:00
fix(styles): Fix styles for attachment and upload items
This commit is contained in:
parent
f059e65acc
commit
9413459311
|
@ -15,17 +15,62 @@
|
|||
border-radius: 2px;
|
||||
color: @text-color;
|
||||
background: @background-off-primary;
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
.inner {
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
|
||||
.file-info-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: @spacing-half + 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid 1px rgba(0, 0, 0, 0.09);
|
||||
border-right: none;
|
||||
|
||||
.file-icon {
|
||||
margin-right: 10px;
|
||||
flex-shrink:0;
|
||||
}
|
||||
.file-action-icon {
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.18);
|
||||
.file-name {
|
||||
font-weight: @font-weight-medium;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 235px;
|
||||
}
|
||||
.file-size {
|
||||
@file-size-color: #b8b8b8;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: @spacing-three-quarters;
|
||||
color: @file-size-color;
|
||||
}
|
||||
}
|
||||
|
||||
.file-action-icon {
|
||||
@file-icon-color: #c7c7c7;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
padding-top: 1px;
|
||||
height: 100%;
|
||||
width: 37px;
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
|
||||
|
||||
img {
|
||||
background-color: @file-icon-color;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
background-color: darken(@file-icon-color, 20%);
|
||||
}
|
||||
&:active {
|
||||
// box-shadow: inset 0 0 0 1px #27496d, inset 0 5px 30px #193047;
|
||||
background-color: darken(@btn-default-bg-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -82,47 +127,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.file-info-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: @spacing-half + 1;
|
||||
width: 100%;
|
||||
|
||||
.file-icon {
|
||||
margin-right: 10px;
|
||||
flex-shrink:0;
|
||||
}
|
||||
.file-name {
|
||||
font-weight: @font-weight-medium;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-size {
|
||||
@file-size-color: #b8b8b8;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: @spacing-three-quarters;
|
||||
color: @file-size-color;
|
||||
}
|
||||
}
|
||||
|
||||
.file-action-icon {
|
||||
@file-icon-color: #c7c7c7;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
padding-top: 1px;
|
||||
height: 100%;
|
||||
width: 37px;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.09);
|
||||
img {
|
||||
background-color: @file-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-wrap.file-image-wrap {
|
||||
|
@ -151,9 +155,6 @@
|
|||
.file-action-icon, .file-name-container, .file-name {
|
||||
display: block;
|
||||
}
|
||||
.file-action-icon {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.file-action-icon {
|
||||
|
@ -163,7 +164,7 @@
|
|||
top: -8px;
|
||||
width: 26px;
|
||||
border-radius: 0 0 0 3px;
|
||||
border-left: none;
|
||||
box-shadow: none;
|
||||
img {
|
||||
background: none;
|
||||
}
|
||||
|
|
|
@ -9,18 +9,23 @@ class FileUpload extends React.Component
|
|||
@displayName: 'FileUpload'
|
||||
|
||||
render: =>
|
||||
<div className={"file-wrap file-upload"}>
|
||||
<div className="file-wrap file-upload">
|
||||
<div className="inner">
|
||||
<Flexbox direction="row" style={alignItems: 'center'}>
|
||||
<RetinaImg className="file-icon"
|
||||
fallback="file-fallback.png"
|
||||
mode={RetinaImg.Mode.ContentPreserve}
|
||||
name="file-#{@_extension()}.png"/>
|
||||
<span className="file-name">
|
||||
<span className="uploading">{@props.upload.filename}</span>
|
||||
</span>
|
||||
<div className="file-info-wrap">
|
||||
<RetinaImg className="file-icon"
|
||||
fallback="file-fallback.png"
|
||||
mode={RetinaImg.Mode.ContentPreserve}
|
||||
name="file-#{@_extension()}.png"/>
|
||||
<span className="file-name">
|
||||
<span className="uploading">{@props.upload.filename}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="file-action-icon" onClick={@_onClickRemove}>
|
||||
<RetinaImg name="remove-attachment.png" mode={RetinaImg.Mode.ContentDark} />
|
||||
<RetinaImg
|
||||
name="remove-attachment.png"
|
||||
mode={RetinaImg.Mode.ContentIsMask}
|
||||
/>
|
||||
</div>
|
||||
</Flexbox>
|
||||
</div>
|
||||
|
|
|
@ -161,7 +161,7 @@ class MessageItem extends React.Component
|
|||
Actions.fetchAndSaveAllFiles(@props.message.files)
|
||||
|
||||
_renderDownloadAllButton: =>
|
||||
<div className="download-all" onClick={@_onDownloadAll}>
|
||||
<div className="download-all">
|
||||
<div className="attachment-number">
|
||||
<RetinaImg
|
||||
name="ic-attachments-all-clippy.png"
|
||||
|
@ -170,7 +170,7 @@ class MessageItem extends React.Component
|
|||
<span>{@props.message.files.length} attachments</span>
|
||||
</div>
|
||||
<div className="separator">-</div>
|
||||
<div className="download-all-action">
|
||||
<div className="download-all-action" onClick={@_onDownloadAll}>
|
||||
<RetinaImg
|
||||
name="ic-attachments-download-all.png"
|
||||
mode={RetinaImg.Mode.ContentIsMask}
|
||||
|
|
Loading…
Reference in a new issue