mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-28 12:37:00 +00:00
FileItemProgress — magic progress circle with play/pause buttons that turns into a checkmark
This commit is contained in:
Artur Paikin
parent
df3abb9a59
commit
5a4dfcfa0b
5 changed files with 173 additions and 104 deletions
2
src/core/html.js
Normal file
2
src/core/html.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import yo from 'yo-yo'
|
||||
export default yo
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import html from 'yo-yo'
|
||||
import Utils from '../../core/Utils'
|
||||
import { checkIcon, removeIcon, iconText, iconFile, iconAudio, iconEdit } from './icons'
|
||||
import FileItemProgress from './FileItemProgress'
|
||||
import { removeIcon, iconText, iconFile, iconAudio, iconEdit } from './icons'
|
||||
|
||||
function getIconByMime (fileTypeGeneral) {
|
||||
switch (fileTypeGeneral) {
|
||||
|
|
@ -16,40 +17,47 @@ function getIconByMime (fileTypeGeneral) {
|
|||
export default function fileItem (file, bus) {
|
||||
const isUploaded = file.progress === 100
|
||||
const uploadInProgressOrComplete = file.progress > 0
|
||||
const uploadInProgress = file.progress > 0 && file.progress < 100
|
||||
const isPaused = file.isPaused || false
|
||||
|
||||
const fileName = Utils.getFileNameAndExtension(file.meta.name)[0]
|
||||
const truncatedFileName = Utils.truncateString(fileName, 30)
|
||||
const truncatedFileName = Utils.truncateString(fileName, 20)
|
||||
|
||||
function remove (ev) {
|
||||
const el = document.querySelector(`#uppy_${file.id}`)
|
||||
el.classList.add('UppyAnimation-zoomOutLeft')
|
||||
// const el = document.querySelector(`#uppy_${file.id}`)
|
||||
// el.classList.add('UppyAnimation-zoomOutLeft')
|
||||
|
||||
// this seems to be working in latest Chrome, Firefox and Safari,
|
||||
// but might not be 100% cross-browser, needs testing
|
||||
// https://davidwalsh.name/css-animation-callback
|
||||
el.addEventListener('animationend', () => {
|
||||
bus.emit('file-remove', file.id)
|
||||
})
|
||||
// bus.emit('file-remove', file.id)
|
||||
}
|
||||
|
||||
function openFileCard (fileId) {
|
||||
bus.emit('file-card-open', fileId)
|
||||
// el.addEventListener('animationend', () => {
|
||||
// bus.emit('file-remove', file.id)
|
||||
// })
|
||||
bus.emit('file-remove', file.id)
|
||||
}
|
||||
|
||||
// <h5 class="UppyDashboardItem-previewType">${file.extension ? '.' + file.extension : '?'}</h5>
|
||||
// <div class="UppyDashboardItem-progressNum">${file.progress}%</div>
|
||||
// <div class="UppyDashboardItem-progressInner" style="width: ${file.progress}%"></div>
|
||||
|
||||
return html`<li class="UppyDashboardItem"
|
||||
return html`<li class="UppyDashboardItem ${uploadInProgress ? 'is-inprogress' : ''} ${isUploaded ? 'is-complete' : ''} ${isPaused ? 'is-paused' : ''}"
|
||||
id="uppy_${file.id}"
|
||||
title="${file.meta.name}">
|
||||
<div class="UppyDashboardItem-preview">
|
||||
${file.previewEl
|
||||
? file.previewEl
|
||||
: html`<div class="UppyDashboardItem-previewIcon">${getIconByMime(file.type.general)}</div>`
|
||||
${file.preview
|
||||
? html`<img alt="${file.name}" src="${file.preview}">`
|
||||
: getIconByMime(file.type.general)
|
||||
}
|
||||
<div class="UppyDashboardItem-progress ${uploadInProgressOrComplete ? 'is-active' : ''}">
|
||||
<div class="UppyDashboardItem-progressNum">${file.progress}%</div>
|
||||
<div class="UppyDashboardItem-progressInner" style="width: ${file.progress}%"></div>
|
||||
<div class="UppyDashboardItem-progress">
|
||||
<button class="UppyDashboardItem-progressBtn" onclick=${(e) => {
|
||||
if (file.progress === 100) return
|
||||
bus.emit('core:upload-pause', file.id)
|
||||
}}>
|
||||
${FileItemProgress({
|
||||
progress: file.progress,
|
||||
fileID: file.id
|
||||
}, bus)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="UppyDashboardItem-info">
|
||||
|
|
@ -64,18 +72,18 @@ export default function fileItem (file, bus) {
|
|||
</div>
|
||||
${!uploadInProgressOrComplete
|
||||
? html`<button class="UppyDashboardItem-edit"
|
||||
onclick=${openFileCard.bind(this, file.id)}>${iconEdit()}</button>`
|
||||
onclick=${(e) => bus.emit('file-card-open', file.id)}>${iconEdit()}</button>`
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
<div class="UppyDashboardItem-action">
|
||||
${isUploaded
|
||||
? checkIcon()
|
||||
: html`<button class="UppyDashboardItem-remove"
|
||||
${!isUploaded
|
||||
? html`<button class="UppyDashboardItem-remove"
|
||||
aria-label="Remove this file"
|
||||
onclick=${remove}>
|
||||
${removeIcon()}
|
||||
</button>`
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
</li>`
|
||||
|
|
|
|||
22
src/plugins/Modal/FileItemProgress.js
Normal file
22
src/plugins/Modal/FileItemProgress.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import html from '../../core/html'
|
||||
|
||||
// http://codepen.io/Harkko/pen/rVxvNM
|
||||
// https://gist.github.com/eswak/ad4ea57bcd5ff7aa5d42
|
||||
|
||||
export default function (props, bus) {
|
||||
const progress = props.progress
|
||||
|
||||
return html`
|
||||
<svg class="UppyIcon UppyIcon-progressCircle" width="25" height="25" viewBox="0 0 44 44">
|
||||
<g class="progress-group">
|
||||
<circle class="bg" r="15" cx="22" cy="22" stroke-width="4" fill="none" />
|
||||
<circle class="progress" r="15" cx="22" cy="22" transform="rotate(-90, 22, 22)" stroke-width="4" fill="none" stroke-dasharray="100" stroke-dashoffset="${100 - progress}" />
|
||||
</g>
|
||||
<polygon class="play" transform="translate(6, 5.5)" points="13 21.6666667 13 11 21 16.3333333" />
|
||||
<g transform="translate(18, 17)" class="pause">
|
||||
<rect x="0" y="0" width="2" height="10" rx="0" />
|
||||
<rect x="6" y="0" width="2" height="10" rx="0" />
|
||||
</g>
|
||||
<polygon class="check" transform="translate(6, 7)" points="14 22.5 7 15.2457065 8.99985857 13.1732815 14 18.3547104 22.9729883 9 25 11.1005634" />
|
||||
</svg>`
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
.UppyDashboard-inner {
|
||||
background-color: darken($color-white, 5%);
|
||||
padding: 20px;
|
||||
padding: 15px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 750px;
|
||||
|
|
@ -291,7 +291,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.UppyModal.drag .UppyDashboard-fileContainer {
|
||||
.UppyDashboard.drag .UppyDashboard-files {
|
||||
border-color: lighten($color-gray, 5%);
|
||||
background-color: darken($color-white, 5%)
|
||||
}
|
||||
|
|
@ -317,7 +317,7 @@
|
|||
width: 250px;
|
||||
}
|
||||
|
||||
.UppyModal.drag .UppyDashboard-bgIcon {
|
||||
.UppyDashboard.drag .UppyDashboard-bgIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -330,14 +330,14 @@
|
|||
position: relative;
|
||||
border-radius: 6px;
|
||||
background-color: $color-white;
|
||||
// border: 1px solid rgba($color-gray, 0.3);
|
||||
border: 1px solid rgba($color-gray, 0.2);
|
||||
}
|
||||
|
||||
.UppyDashboardItem-preview {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid rgba($color-gray, 0.3);
|
||||
border-bottom: 1px solid rgba($color-gray, 0.2);
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -346,6 +346,21 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.UppyDashboardItem-preview:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba($color-black, 0.2);
|
||||
display: none;
|
||||
}
|
||||
|
||||
// .UppyDashboardItem-preview .UppyIcon {
|
||||
// height: 50px;
|
||||
// }
|
||||
|
||||
.UppyDashboardItem-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -353,32 +368,12 @@
|
|||
}
|
||||
|
||||
.UppyDashboardItem-previewIcon {
|
||||
height: 75px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// height: 75px;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
}
|
||||
|
||||
.UppyDashboardItem-previewIcon .UppyIcon {
|
||||
width: 35px;
|
||||
max-height: 80%;
|
||||
}
|
||||
|
||||
// .UppyDashboardItem-previewType {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// width: 100%;
|
||||
// text-align: center;
|
||||
// font-size: 11px;
|
||||
// background-color: $color-pink;
|
||||
// height: 25px;
|
||||
// line-height: 25px;
|
||||
// padding: 0 15px;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// color: $color-white;
|
||||
// }
|
||||
|
||||
.UppyDashboardItem-info {
|
||||
padding: 8px 32px 8px 10px;
|
||||
height: 60px;
|
||||
|
|
@ -388,13 +383,13 @@
|
|||
.UppyDashboardItem-name {
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
// font-weight: bold;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 28px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 5px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.UppyDashboardItem-name a {
|
||||
|
|
@ -441,6 +436,7 @@
|
|||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
transition: all 0.2s;
|
||||
transform: translateZ(0);
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
|
|
@ -449,25 +445,95 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.UppyDashboardItem-progress {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 15px;
|
||||
color: $color-white;
|
||||
margin: auto;
|
||||
.UppyDashboardItem-progress {}
|
||||
|
||||
.UppyDashboardItem-progressBtn {
|
||||
@include reset-button;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
opacity: 0.8;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -30px;
|
||||
margin-top: -30px;
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
z-index: $zIndex-2;
|
||||
}
|
||||
|
||||
.UppyDashboardItem-progress.is-active {
|
||||
display: block;
|
||||
background-color: lighten($color-cornflower-blue, 15%);
|
||||
.UppyIcon-progressCircle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.UppyIcon-progressCircle .bg {
|
||||
stroke: $color-asphalt-gray;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.UppyIcon-progressCircle .progress {
|
||||
stroke: $color-white;
|
||||
transition: stroke-dashoffset .5s ease-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.UppyIcon-progressCircle .play {
|
||||
stroke: $color-white;
|
||||
fill: $color-white;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.UppyIcon-progressCircle .pause {
|
||||
stroke: $color-white;
|
||||
fill: $color-white;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.UppyIcon-progressCircle .check {
|
||||
opacity: 0;
|
||||
fill: $color-white;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.UppyDashboardItem.is-inprogress {
|
||||
.bg, .progress, .pause {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.UppyDashboardItem-preview:after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.UppyDashboardItem.is-paused {
|
||||
.pause {
|
||||
opacity: 0;
|
||||
}
|
||||
.play {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.UppyDashboardItem.is-complete {
|
||||
.UppyDashboardItem-progressBtn {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.UppyDashboardItem-preview:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress {
|
||||
stroke: $color-green;
|
||||
fill: $color-green;
|
||||
opacity: 1;
|
||||
}
|
||||
.check {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.UppyDashboardItem-progressNum {
|
||||
|
|
@ -545,22 +611,8 @@
|
|||
transform: translateY(-105%);
|
||||
}
|
||||
|
||||
.UppyDashboardFileCard {
|
||||
// width: 500px;
|
||||
// height: 400px;
|
||||
// max-width: 100%;
|
||||
// max-height: 100%;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// z-index: $zIndex-4;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// transform: translateY(-105%);
|
||||
// transition: all 0.5s ease-in-out;
|
||||
.UppyDashboardFileCard-inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.UppyDashboardFileCard-preview {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue