Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-07-26 03:35:19 +00:00
Code Issues Projects Releases Wiki Activity

Modal refactoring and style improvements

Browse source
This commit is contained in:
Artur Paikin 2016-07-11 23:53:03 -04:00
parent 0a33f8efd3
commit c84f4c652b
5 changed files with 31 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/plugins/modal/FileItem.js
View file

@ -3,6 +3,7 @@ import { fileIcon, checkIcon, removeIcon } from './icons'
export default function fileItem (bus, file) {
const isUploaded = file.progress === 100
const uploadInProgress = file.progress > 0 && file.progress
const remove = (ev) => {
bus.emit('file-remove', file.id)
@ -23,8 +24,8 @@ export default function fileItem (bus, file) {
</h4>
<h5 class="UppyDashboardItem-status">
${file.totalSize}<br>
${file.progress > 0 && file.progress < 100 ? 'Uploading… ' + file.progress + '%' : ''}
${file.progress === 100 ? 'Completed' : ''}
${uploadInProgress ? 'Uploading… ' + file.progress + '%' : ''}
${isUploaded ? 'Completed' : ''}
</h5>
<div class="UppyDashboardItem-action">
${isUploaded
@ -36,7 +37,7 @@ export default function fileItem (bus, file) {
</button>`
}
</div>
<div class="UppyDashboardItem-progress">
<div class="UppyDashboardItem-progress ${uploadInProgress ? 'is-active' : ''}">
<div class="UppyDashboardItem-progressInner" style="width: ${file.progress}%"></div>
</div>
</li>`

10
src/plugins/modal/icons.js
View file

@ -3,9 +3,6 @@ import html from 'yo-yo'
// https://css-tricks.com/creating-svg-icon-system-react/
export function defaultTabIcon () {
// return html`<svg class="UppyIcon UppyModalTab-icon" width="28" height="28" viewBox="0 0 101 58">
// <path d="M17.582.3L.915 41.713l32.94 13.295L17.582.3zm83.333 41.414L67.975 55.01 84.25.3l16.665 41.414zm-48.998 5.403L63.443 35.59H38.386l11.527 11.526v5.905l-3.063 3.32 1.474 1.36 2.59-2.806 2.59 2.807 1.475-1.357-3.064-3.32v-5.906zm16.06-26.702c-3.973 0-7.194-3.22-7.194-7.193 0-3.973 3.222-7.193 7.193-7.193 3.974 0 7.193 3.22 7.193 7.19 0 3.974-3.22 7.194-7.195 7.194zM70.48 8.682c-.737 0-1.336.6-1.336 1.337 0 .736.6 1.335 1.337 1.335.738 0 1.338-.598 1.338-1.336 0-.74-.6-1.338-1.338-1.338zM33.855 20.415c-3.973 0-7.193-3.22-7.193-7.193 0-3.973 3.22-7.193 7.195-7.193 3.973 0 7.192 3.22 7.192 7.19 0 3.974-3.22 7.194-7.192 7.194zM36.36 8.682c-.737 0-1.336.6-1.336 1.337 0 .736.6 1.335 1.337 1.335.738 0 1.338-.598 1.338-1.336 0-.74-.598-1.338-1.337-1.338z"/>
// </svg>`
return html`<svg class="UppyIcon UppyModalTab-icon" width="224" height="224" viewBox="0 0 224 224">
<path d="M112 224c61.856 0 112-50.144 112-112S173.856 0 112 0 0 50.144 0 112s50.144 112 112 112zm0-12c55.228 0 100-44.772 100-100S167.228 12 112 12 12 56.772 12 112s44.772 100 100 100z"/>
<path d="M147.67 132.24v57.43H77v-57.43H29.79l82.38-103.71 82.37 103.71h-46.87z" fill="#FFF"/>
@ -54,14 +51,11 @@ export function uploadIcon () {
}
export function fileIcon (fileType) {
return html`<svg class="UppyIcon" width="100" height="100" viewBox="0 0 21 29">
<path d="M2.473.31C1.44.31.59 1.21.59 2.307V26.31c0 1.097.85 2 1.883 2H18.71c1.03 0 1.88-.903 1.88-2V7.746a.525.525 0 0 0-.014-.108v-.015a.51.51 0 0 0-.014-.03v-.017a.51.51 0 0 0-.015-.03.482.482 0 0 0-.014-.016v-.015a.482.482 0 0 0-.015-.015.51.51 0 0 0-.014-.03.482.482 0 0 0-.014-.017.51.51 0 0 0-.015-.03.483.483 0 0 0-.03-.03L13.636.45a.47.47 0 0 0-.118-.093.448.448 0 0 0-.044-.015.448.448 0 0 0-.044-.016.448.448 0 0 0-.045-.015.44.44 0 0 0-.073 0H2.474zm0 .99h10.372v4.943c0 1.097.85 2 1.88 2h4.932V26.31c0 .56-.42 1.007-.948 1.007H2.472c-.527 0-.95-.446-.95-1.007V2.308c0-.56.423-1.008.95-1.008zm11.305.667l4.843 4.927.352.357h-4.246c-.527 0-.948-.446-.948-1.007V1.967z"
fill="#F6A623"
fill-rule="evenodd" />
return html`<svg class="UppyIcon" width="90" height="90" viewBox="0 0 21 29">
<path d="M2.473.31C1.44.31.59 1.21.59 2.307V26.31c0 1.097.85 2 1.883 2H18.71c1.03 0 1.88-.903 1.88-2V7.746a.525.525 0 0 0-.014-.108v-.015a.51.51 0 0 0-.014-.03v-.017a.51.51 0 0 0-.015-.03.482.482 0 0 0-.014-.016v-.015a.482.482 0 0 0-.015-.015.51.51 0 0 0-.014-.03.482.482 0 0 0-.014-.017.51.51 0 0 0-.015-.03.483.483 0 0 0-.03-.03L13.636.45a.47.47 0 0 0-.118-.093.448.448 0 0 0-.044-.015.448.448 0 0 0-.044-.016.448.448 0 0 0-.045-.015.44.44 0 0 0-.073 0H2.474zm0 .99h10.372v4.943c0 1.097.85 2 1.88 2h4.932V26.31c0 .56-.42 1.007-.948 1.007H2.472c-.527 0-.95-.446-.95-1.007V2.308c0-.56.423-1.008.95-1.008zm11.305.667l4.843 4.927.352.357h-4.246c-.527 0-.948-.446-.948-1.007V1.967z">
<text font-family="ArialMT, Arial"
font-size="5"
font-weight="bold"
fill="#F6A623"
text-anchor="middle"
x="11"
y="22">

33
src/scss/_dashboard.scss
View file

@ -6,7 +6,7 @@
height: 100%;
position: relative;
padding: 0 20px;
padding-top: 40px;
padding-top: 50px;
}
.UppyDashboard-title {
@ -18,7 +18,7 @@
margin: 0;
padding: 0;
position: absolute;
top: 15px;
top: 18px;
left: 0;
width: 100%;
text-align: center;
@ -33,18 +33,14 @@
padding: 0;
overflow: scroll;
height: 100%;
// position: absolute;
// top: 50px;
// bottom: 15px;
// right: 15px;
// left: 0;
// padding: 15px;
}
.UppyDashboardItem {
list-style: none;
margin: 0;
width: 140px;
height: 200px;
overflow: hidden;
float: left;
padding-top: 20px;
margin: 0 15px;
@ -53,13 +49,14 @@
}
.UppyDashboardItem-icon {
width: 100px;
height: 100px;
width: 90px;
height: 90px;
margin: auto;
border-radius: 8px;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba($color-black, 0.1);
// box-shadow: inset 0 0 0 1px rgba($color-black, 0.1);
margin-bottom: 10px;
color: $color-orange;
}
.UppyDashboardItem-icon img {
@ -69,8 +66,8 @@
}
.UppyDashboardItem-name {
font-size: 13px;
line-height: 1.4;
font-size: 12px;
line-height: 1.35;
font-weight: bold;
margin: 0;
padding: 0;
@ -89,12 +86,13 @@
line-height: 1.45;
font-weight: normal;
color: $color-gray;
text-transform: uppercase;
}
.UppyDashboardItem-action {
position: absolute;
top: 10px;
right: -6px;
right: 0;
}
.UppyDashboardItem-remove {
@ -106,15 +104,18 @@
width: 85px;
height: 4px;
margin: auto;
background-color: lighten($color-cornflower-blue, 50%);
position: absolute;
top: 100px;
top: 90px;
left: 0;
right: 0;
border-radius: 8px;
overflow: hidden;
}
.UppyDashboardItem-progress.is-active {
background-color: lighten($color-cornflower-blue, 50%);
}
.UppyDashboardItem-progressInner {
height: 4px;
background-color: $color-cornflower-blue;

14
src/scss/_modal.scss
View file

@ -39,7 +39,7 @@
.UppyModal-close {
position: absolute;
top: 10px;
top: 15px;
right: 15px;
padding: 0;
border: 0;
@ -136,14 +136,14 @@
position: absolute;
top: 0;
left: 0;
height: 40px;
height: 50px;
width: 100%;
border-bottom: 1px solid rgba($color-gray, 0.3);
}
.UppyModalContent-title {
position: absolute;
top: 10px;
top: 15px;
left: 0;
right: 0;
text-align: center;
@ -155,7 +155,7 @@
.UppyModalContent-back {
@include reset-button;
position: absolute;
top: 12px;
top: 17px;
left: 15px;
font-size: 14px;
cursor: pointer;
@ -172,8 +172,8 @@
bottom: 0;
left: 0;
right: 0;
transform: translate3d(0, -105%, 0);
transition: all 0.5s;
transform: translateY(-105%);
transition: all 0.5s ease-in-out;
background-color: darken($color-white, 4%);
box-shadow: 0 0 10px 5px rgba($color-black, 0.15);
padding: 15px;
@ -182,7 +182,7 @@
}
.UppyModalContent-panel[aria-hidden=false] {
transform: translate3d(0, 0, 0);
transform: translateY(0);
}
// Progress bar placeholder

1
src/scss/_variables.scss
View file

@ -5,6 +5,7 @@ $color-black: #000;
$color-gray: #939393;
$color-pink: #e02177;
$color-green: #7AC824;
$color-orange: #F6A623;
$color-white: #fff;
$color-cornflower-blue: #4A90E2;
$color-asphalt-gray: #525252;