Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-07-20 16:53:33 +00:00
Code Issues Projects Releases Wiki Activity

Dashboard: Add image and archive icons (#2027)

Browse source 
* Add image and archive icons

* Refactor archiveTypes
This commit is contained in:
Artur Paikin 2020-01-17 17:14:20 +03:00 • committed by GitHub
parent aefa2986d7
commit 41af1995c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

22
packages/@uppy/dashboard/src/components/icons.js
View file

@ -66,6 +66,18 @@ function checkIcon () {
)
}
function iconImage () {
return (
<svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<g fill="#686DE0" fill-rule="evenodd">
<path d="M5 7v10h15V7H5zm0-1h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z" fill-rule="nonzero" />
<path d="M6.35 17.172l4.994-5.026a.5.5 0 0 1 .707 0l2.16 2.16 3.505-3.505a.5.5 0 0 1 .707 0l2.336 2.31-.707.72-1.983-1.97-3.505 3.505a.5.5 0 0 1-.707 0l-2.16-2.159-3.938 3.939-1.409.026z" fill-rule="nonzero" />
<circle cx="7.5" cy="9.5" r="1.5" />
</g>
</svg>
)
}
function iconAudio () {
return (
<svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
@ -90,6 +102,14 @@ function iconPDF () {
)
}
function iconArchive () {
return (
<svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<path d="M10.45 2.05h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V2.55a.5.5 0 0 1 .5-.5zm2.05 1.024h1.05a.5.5 0 0 1 .5.5V3.6a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5v-.001zM10.45 0h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 3.074h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 1.024h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm-2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-1.656 3.074l-.82 5.946c.52.302 1.174.458 1.976.458.803 0 1.455-.156 1.975-.458l-.82-5.946h-2.311zm0-1.025h2.312c.512 0 .946.378 1.015.885l.82 5.946c.056.412-.142.817-.501 1.026-.686.398-1.515.597-2.49.597-.974 0-1.804-.199-2.49-.597a1.025 1.025 0 0 1-.5-1.026l.819-5.946c.07-.507.503-.885 1.015-.885zm.545 6.6a.5.5 0 0 1-.397-.561l.143-.999a.5.5 0 0 1 .495-.429h.74a.5.5 0 0 1 .495.43l.143.998a.5.5 0 0 1-.397.561c-.404.08-.819.08-1.222 0z" fill="#00C469" fill-rule="nonzero" />
</svg>
)
}
function iconFile () {
return (
<svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
@ -150,9 +170,11 @@ module.exports = {
iconRetry,
localIcon,
checkIcon,
iconImage,
iconAudio,
iconVideo,
iconPDF,
iconArchive,
iconFile,
iconText,
iconCopyLink,

22
packages/@uppy/dashboard/src/utils/getFileTypeIcon.js
View file

@ -1,4 +1,4 @@
const { iconFile, iconText, iconAudio, iconVideo, iconPDF } = require('../components/icons')
const { iconFile, iconText, iconImage, iconAudio, iconVideo, iconPDF, iconArchive } = require('../components/icons')
module.exports = function getIconByMime (fileType) {
const defaultChoice = {
@ -11,6 +11,7 @@ module.exports = function getIconByMime (fileType) {
const fileTypeGeneral = fileType.split('/')[0]
const fileTypeSpecific = fileType.split('/')[1]
// Text
if (fileTypeGeneral === 'text') {
return {
color: '#5a5e69',
@ -18,6 +19,15 @@ module.exports = function getIconByMime (fileType) {
}
}
// Image
if (fileTypeGeneral === 'image') {
return {
color: '#686de0',
icon: iconImage()
}
}
// Audio
if (fileTypeGeneral === 'audio') {
return {
color: '#068dbb',
@ -25,6 +35,7 @@ module.exports = function getIconByMime (fileType) {
}
}
// Video
if (fileTypeGeneral === 'video') {
return {
color: '#19af67',
@ -32,6 +43,7 @@ module.exports = function getIconByMime (fileType) {
}
}
// PDF
if (fileTypeGeneral === 'application' && fileTypeSpecific === 'pdf') {
return {
color: '#e25149',
@ -39,10 +51,12 @@ module.exports = function getIconByMime (fileType) {
}
}
if (fileTypeGeneral === 'image') {
// Archive
const archiveTypes = ['zip', 'x-7z-compressed', 'x-rar-compressed', 'x-gtar', 'x-apple-diskimage', 'x-diskcopy']
if (fileTypeGeneral === 'application' && archiveTypes.indexOf(fileTypeSpecific) !== -1) {
return {
color: '#f2f2f2',
icon: ''
color: '#00C469',
icon: iconArchive()
}
}