processing / processing/p5.js-web-editor
File upload UI: Status messages
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.7k
- Forks
- 1.7k
- Avg merge
- 3d 4h
- Merged PRs (30d)
- 8
Description
Code
- While file is uploading, show blue border and 'Uploading...' rectangle
- When uploading is done, hide blue border and show 'File saved as...' rectangle
Design
The styling below is approximate and uses general variable names, units, font weights, and measurements, but the ultimate goal is to replicate the above design. Final styling should be in em units instead of px, color variables and font weights should use the existing SCSS names, etc.
Window styling
Same as #375
{
box-shadow: inset -4px -4px 4px 0 rgba(0, 0, 0, 0.5);
border: solid 4px var(--bluish);
}
Rectangle
{
width: 496px;
height: 60px;
background-color: #4a4a4a;
box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.1);
}
Clock icon
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the file-upload UI and its existing SCSS styling, then compare the window treatment with issue #375. Implement the uploading and saved-file status states to match the supplied screenshots, using existing SCSS variables and em units; done means the blue border and status rectangles change correctly during and after upload.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, scss
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100