Page MenuHomePhabricator

Upload Wizard: Adopt Codex sizes and spacing for a calmer and more consistent upload step
Open, Needs TriagePublic

Assigned To
Authored By
simon04
Sat, Oct 3, 9:45 AM
Referenced Files
F106069589: image.png
Sat, Oct 3, 9:35 PM
F106067254: progressbar-forced-visible.png
Sat, Oct 3, 9:22 PM
F106067250: after-patches_flickr-button-wraps.png
Sat, Oct 3, 9:22 PM
F106067244: before-master_flickr-button-inline.png
Sat, Oct 3, 9:22 PM
F106005070: image.png
Sat, Oct 3, 9:45 AM
F106005055: image.png
Sat, Oct 3, 9:45 AM

Description

Summary

The "Upload" step of Upload Wizard has grown its layout over many years: a centered column next to full-width elements, gaps that can look accidental, and a mix of hard-coded em and px values. Aligning the step with the Codex design tokens for sizes and spacing could make it feel more consistent with the rest of MediaWiki, and make the styles easier to maintain.

Current situation

image.png (2,746×1,890 px, 552 KB)

  • The file list, the "Add more files" box and the EXIF notice sit in a centered 650px column, while the steps indicator and the buttons span the full width. This leaves a large empty area on the left and makes the left edges ragged.
  • The file rows have no visible boundary, so the status icon floats far to the right, somewhat detached from its row.
  • Spacing mixes 3em, 2em, 1.5em, 40px, … and some margins stack up (e.g. an empty, padded error-summary container adds blank space above the buttons on every step).
  • "1 of 1 file uploaded" ends up alone on the far right, below the buttons, repeating the "All uploads were successful!" message.
  • The "Add more files" box, the file list and the notice all have different widths.
  • The overall width is max-width: 900px; /* wild guess */.

Proposal

image.png (2,440×1,566 px, 488 KB)

I'd suggest using Codex tokens and patterns where they fit naturally:

  • Width: @size-5600 could replace the "wild guess" 900px, with the file list, the "Add more files" box, the notice and the buttons all using that full width, aligned with the steps indicator.
  • Alignment: Left-aligning the content instead of centering the column would give everything one shared left edge.
  • Spacing: @spacing-* tokens (@spacing-50 … @spacing-250) could replace the ad-hoc em/px values, and stacked spacing could be removed (e.g. by hiding the error-summary container while it's empty).
  • File list: A subtle, Card-like border (@border-color-subtle, @border-radius-base) might help each row, including its status icon, read as one unit.
  • Buttons: The result message and "Continue" could be right-aligned like on the other steps (OOUI's HorizontalLayout uses flexbox and currently ignores text-align).
  • Progress: While uploading, the progress bar could share a line with the Back button, followed by "1 of 3 files uploaded · a few seconds". Once uploads are done, the count might fade out together with the bar, since the result message already says the same. The fade could use a CSS transition with Codex transition tokens instead of jQuery's fadeIn/fadeOut, which would also resolve two old FIXMEs.
  • Alignment detail: The "Remove"/"Retry" icons could line up with the text above by relying on OOUI's own first-child rule instead of a magic number.

Possible benefits

  • A calmer, more balanced Upload step that might feel more at home next to other Codex-based interfaces.
  • Sizes that follow the reader's font-size setting (@size-5600 compiles to 56em), rather than a fixed pixel width.
  • Fewer magic numbers, which could make future changes (dark mode, skin changes) easier.
  • Several small irritations addressed at once, without changing any behavior.

Notes

  • Codex doesn't seem to offer a stepper/wizard component (yet), so the arrow-shaped steps indicator (jquery.arrowSteps) would stay. It already uses Codex color tokens.
  • Since @size-5600 is 56em, the content would get a bit narrower than today at the default font size (~784px at 14px). If that feels too narrow, a different token might fit better.

Event Timeline

Change #1349844 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/UploadWizard@master] Adopt Codex sizes and spacing for the Upload step

https://gerrit.wikimedia.org/r/1349844

Change #1349873 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/UploadWizard@master] Use Codex spacing tokens throughout the styles

https://gerrit.wikimedia.org/r/1349873

Change #1349891 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/UploadWizard@master] Use Codex typography tokens throughout the styles

https://gerrit.wikimedia.org/r/1349891

With flickr button enabled

before-master_flickr-button-inline.png (1,296×936 px, 74 KB)

after-patches_flickr-button-wraps.png (1,296×912 px, 72 KB)

How about we lift that progress section (bar + count) to above the buttons? Makes more logical sense to me. Maybe hide it using visibility, so that we don't have a layout jump ?

progressbar-forced-visible.png (1,296×912 px, 75 KB)

I forgot about the flickr button, thanks for noticing.

I didn't like it being on a separate line because of the white space to the left and right of the button. Putting it inside the gray box looked best in my eyes...

How about we lift that progress section (bar + count) to above the buttons? Makes more logical sense to me. Maybe hide it using visibility, so that we don't have a layout jump ?

I like that a lot!

Here is a screenshot for patchset 4 https://gerrit.wikimedia.org/r/c/mediawiki/extensions/UploadWizard/+/1349844/4:

image.png (1,330×794 px, 164 KB)

Change #1349844 merged by jenkins-bot:

[mediawiki/extensions/UploadWizard@master] Adopt Codex sizes and spacing for the Upload step

https://gerrit.wikimedia.org/r/1349844

Change #1349873 merged by jenkins-bot:

[mediawiki/extensions/UploadWizard@master] Use Codex spacing tokens throughout the styles

https://gerrit.wikimedia.org/r/1349873

Change #1349891 merged by jenkins-bot:

[mediawiki/extensions/UploadWizard@master] Use Codex typography tokens throughout the styles

https://gerrit.wikimedia.org/r/1349891

Change #1351764 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/UploadWizard@master] Flickr: Show the URL input and the button on one row

https://gerrit.wikimedia.org/r/1351764