Move the FileItem’s new ErrorButton

it was overlapping the edit button
This commit is contained in:
Artur Paikin 2020-05-27 09:40:57 +02:00
parent 175945c731
commit 0e78e32e4c
3 changed files with 29 additions and 29 deletions

View file

@ -67,24 +67,6 @@ function CopyLinkButton (props) {
)
}
function ErrorButton ({ file, onClick }) {
if (file.error) {
return (
<span
class="uppy-DashboardItem-errorDetails"
aria-label={file.error}
data-microtip-position="bottom-left"
data-microtip-size="medium"
role="tooltip"
onclick={onClick}
>
?
</span>
)
}
return null
}
module.exports = function Buttons (props) {
const {
file,
@ -101,12 +83,6 @@ module.exports = function Buttons (props) {
return (
<div className="uppy-DashboardItem-actionWrapper">
<ErrorButton
file={file}
onClick={() => {
alert(file.error)
}}
/>
<EditButton
i18n={i18n}
file={file}

View file

@ -47,6 +47,24 @@ const renderFileSize = (props) => (
</div>
)
const ErrorButton = ({ file, onClick }) => {
if (file.error) {
return (
<span
class="uppy-DashboardItem-errorDetails"
aria-label={file.error}
data-microtip-position="bottom"
data-microtip-size="medium"
role="tooltip"
onclick={onClick}
>
?
</span>
)
}
return null
}
module.exports = function FileInfo (props) {
return (
<div class="uppy-DashboardItem-fileInfo" data-uppy-file-source={props.file.source}>
@ -54,6 +72,12 @@ module.exports = function FileInfo (props) {
<div class="uppy-DashboardItem-status">
{renderFileSize(props)}
{renderFileSource(props)}
<ErrorButton
file={props.file}
onClick={() => {
alert(props.file.error)
}}
/>
</div>
</div>
)

View file

@ -117,17 +117,17 @@
.uppy-DashboardItem-errorDetails {
line-height: 12px;
width: 13px;
height: 13px;
width: 12px;
height: 12px;
display: inline-block;
vertical-align: middle;
color: $white;
background-color: $gray-500;
border-radius: 50%;
position: relative;
top: 0;
left: 2px;
font-size: 10px;
top: -1px;
left: 6px;
font-size: 8px;
font-weight: 600;
text-align: center;
cursor: help;