Skip to content

GUI Design

Jump to bottom
Cassidy James Blaede edited this page Mar 22, 2018 · 16 revisions

The GUI should achieve the following linear tasks:

  • Choose an image to flash
  • Confirm a hash
  • Choose one or more drives to flash on
  • Show progress
  • Confirm success

While:

  • Being native GTK3
  • Feeling at-home in GNOME and Pop!_OS
  • Using standard widgets and patterns

Spec

The GUI should be styled like a Gtk Action Dialog.

Titles should have a .h2 GTK Style Class, with an accompanying DIALOG size icon and helper text if appropriate. See an example of this pattern, including proper margins and alignments, in the elementary Installer.

The suggested forward action at the end of the headerbar should include a .suggested class, and only be sensitive when it can be used.

The window contents should be in a GTK Stack with a transition type of SLIDE_LEFT_RIGHT.

Choose an Image

______________________________________________________________
|                                                            |
|  [ Cancel ]               Popsicle               [ Next ]  |
|____________________________________________________________|
|                                                            |
|  ICON  Choose an image                                     |
|  ICON                                                      |
|        Select the .iso or .img you want to flash. You can  |
|        also plug your USB drives in now.                   |
|                                                            |
|                      [ Choose Image ]                      |
|                                                            |
|        Hash: [ SHA256 v | abcdef1234567899abcdef        ]  |
|____________________________________________________________|
  • Icon: application-x-cd-image
  • Primary label: Choose an image
  • Secondary label: Select the .iso or .img you want to flash. You can also plug your USB drives in now.

Then a centered button with a label: Choose Image

img_20180306_150848

Beneath, a grid with a right-aligned Hash: label, then a dropdown button linked to an entry.

The dropdown label would be Type by default, and the menu would have SHA256, SHA1, MD5, and any other appropriate hash types in it. Selecting a type should change the dropdown label to match the type and begin calculating a hash (to avoid the performance hit of calculating unless the user explicitly wants to, we don't calculate unless the user chooses a type).

While calculating, we should pack a spinner in the entry's primary icon location. The entry should be non-editable, monospace, and have a width request of the maximum length a hash would be (that way it's predictable and shouldn't resize the window when the has loads.

Select Drives

______________________________________________________________
|                                                            |
|  [ ← Back ]               Popsicle              [ Flash ]  |
|____________________________________________________________|
|                                                            |
|  ICON  Select drives                                       |
|  ICON                                                      |
|        Flashing will erase all data on the selected        |
|        drives.                                             |
|        __________________________________________________  |
|        | [ ] Select all                                 |  |
|        |------------------------------------------------|  |
|        | [ ] Drive 1                                    |  |
|        | [ ] Drive 2                                    |  |
|        | [ ] Drive 3                                    |  |
|        |------------------------------------------------|  |
|____________________________________________________________|
  • Icon: drive-removable-media-usb
  • Primary label: Select drives
  • Secondary label: Flashing will erase all data on the selected drives.

Then a scrollable list with all detected removable drives, each with their own checkbox. The list should live-update based on plugging and unplugging drives. At the top of the list, a "Select All" checkbox with a separator in between it and the other options.

The Flash action should be styled as .destructive, and only be sensitive when one or more drives is selected.

The Back action should be styled with .back-button.

Progress

______________________________________________________________
|                                                            |
|                          Popsicle                          |
|____________________________________________________________|
|                                                            |
|  ICON  Flashing…                                           |
|  ICON                                                      |
|        Device 01 [=======================----------------] |
|        Device 02 [=====================------------------] |
|        Device 03 [===------------------------------------] |
|                                                            |
|____________________________________________________________|
  • Icon: process-working-symbolic (you may need to add a .spin class to this)
  • Primary label: Flashing… (note the unicode ellipsis)
  • Secondary label: None, unless we get an accurate-enough time remaining, in which case we could do About 3 mins remaining or whatever.

Success

______________________________________________________________
|                                                            |
|                          Popsicle               [ Close ]  |
|____________________________________________________________|
|                                                            |
|  ICON  Flash complete!                                     |
|  ICON                                                      |
|        3 drives successfully flashed and ejected. You can  |
|        unplug and use them now.                            |
|                                                            |
|                                                            |
|____________________________________________________________|
  • Icon: process-completed
  • Primary label: Flash complete!
  • Secondary label: X drives successfully flashed and ejected. You can unplug and use them now. If there are errors, we should probably specify that here as well.

Sketches

Here are some rough initial sketches of the flow.

sketches

Clone this wiki locally