Develop 1.5 final release (SEAD-699)
[SEAD-621] UI Changes to the Data Upload Page in ACR/Project Spaces Created:
11/Sep/14 Updated: 22/Apr/15 Resolved: 22/Apr/15
Status:
Project:
Component/s:
Affects
Version/s:
Fix Version/s:
Resolved
SEAD
None
None
Type:
Reporter:
Resolution:
Labels:
Remaining
Estimate:
Time Spent:
Original
Estimate:
Sub-task
Dharma Akmon
Fixed
None
Not Specified
Attachments:
bookmark.png
capture-data-from-web.png
project-space.png
upload-file-selected.jpg
local.png
upload-no-file-selected.jpg
SEAD 1.5
Sprint:
None
Priority:
Assignee:
Votes:
Normal
Xuan Zhu
0
Not Specified
Not Specified
import-from-anotherupload-from-
Description
As part of the comprehensive redesign, attached are mockups of the suggested UI changes to
the Upload page in Project Spaces. These changes are primarily layout, labels, etc (rather than
functionality). The biggest change was making the data upload activity show "above the fold"
of the page. There are design elements here that depart from the current one and are in line with
current main SEAD site (e.g. color, font, etc.).
Design and typesetting changes:
Design Changes
1. Unify font type, font-size and color
Header2( “upload from local file”, ”import data from another project space”, “capture data from
the web”)
○ Typeface: Google Font Lato
○ Font Size: 20pt
○ Style: Regular
○ Color:#444444
○ Leading:24px
Body text
○ Typeface: Google Font Lato
○ Font Size: 14pt
○ Style: Regular
○ Color:#666666
○ Leading:18px
“SEAD DEMO Data Import Bookmark”
○ Typeface: Google Font Lato
○ Font Size: 18pt
○ Style: Regular
○ Color: #095ca3
2. Add icons for “upload from local file”, ”import data from other project space”, “capture data
from the web” and also “SEAD Demo Import Bookmark”
Icons can be found in the attachment.(Icon size: 30px X 30px)
3. Change button style to SEAD button style
“Select from Local Files” & “Copy Dataset”
“Actions”
○ triangle added to the button after the word “action” to indicate there are multiple actions
SEAD button style
○ Typeface: Google Font Raleway
○ Font Size: 14pt
○ Style: Regular
○ Color: white #ffffff
○ Background color:#f3822a
○ Leading:22px
“Actions” button
○ Typeface: Google Font Raleway
○ Font Size: 14pt
○ Style: Regular
○ Color: white #ffffff
○ Background color:#095ca3
○ Leading:22px
4. Change link to SEAD link style
SEAD link style
○ Typeface: Google Font Lato
○ Font Size: 14pt
○ Style: Regular
○ Color: #095ca3
○ Text-decoration:underline
Typesetting Changes
1. Align the three upload features to the top and make them of the same width
2. Add “Data Preview” as a title for all the uploaded data preview section
3. Move the progress bar under “Data upload preview”
● The progress bar will show upload progress when data is uploading
● The progress bar will not show up when there are no files uploaded
4. View uploaded data by grid
5. Add “Delete” for data uploaded as a quick link to delete data that is uploaded by mistake
6. “Tags” is separated as an individual line while “view”, “Hide” and “Delete” are aligned in
the same line
Comments
Comment by Jim Myers [ 19/Feb/15 ]
Made changes to the gui and the underlying upload mechanisms. Reassigning to Annie to look
at the css related issues of spacing, fonts, etc.
Comment by Jim Myers [ 19/Feb/15 ]
Also - FYI - the icons shown above are in the images subdir in the app/war file - if you want to
add them in via css, they're there.
Comment by Jim Myers [ 22/Apr/15 ]
All changes planned for 1.5 are implemented and checked in.
Generated at Sun Mar 06 00:22:49 CST 2016 using JIRA 7.0.10#70120sha1:37e3d7a6fc4d580639533e7f7c232c925e554a6a.