Appearance

Differences between revisions 35 and 38 (spanning 3 versions)
Revision 35 as of 2016-02-04 16:21:32
Size: 9476
Editor: faun
Comment:
Revision 38 as of 2016-09-16 12:12:47
Size: 9950
Editor: mpt
Comment: + “Structure”
Deletions are marked like this. Additions are marked like this.
Line 5: Line 5:
“Background” refers to the area behind all open windows in windowed mode, and to the welcome (lock) screen in staged mode.

=== Access ===
Line 7: Line 11:
On the System Settings main screen, the “Background” icon should include a thumbnail of the currently selected background. On the System Settings main screen, the “Background” '''icon should include a thumbnail''' of the currently selected background. Therefore, all the backgrounds in the icon should reflect the aspect ratio of the current display.
Line 9: Line 13:
=== MVP convergence implementation === === Structure ===
Line 11: Line 15:
This section details the minimum functionality that needs to be build in order for wallpapers to work in a convergent environment. With this functionality the user only needs to set a single tablet for both windowed and staged mode on portrait and landscape displays When choosing a background, by far '''the best representation of your choice is seeing the full-size background on the screen itself'''. This avoids frustration from choosing an image that has too low resolution, or from cropping an image poorly, and not being able to see the problem until you have exited.
Line 13: Line 17:
{{attachment:Convergent_wallpaper.jpg}} Achieving this representation requires bespoke behavior in two ways.

First, '''each display should have its own Background UI'''. (This is unlike [[BrightnessAndDisplays|Display settings]], where all displays must be configurable on the primary display because a misconfigured display might not be working at all.)

Second, each display should be adjusted to let you see the background on that display:

||'''Staged mode'''||'''Windowed mode'''||
||<^>{{attachment:background.tablet.mini.png}}||<^>{{attachment:background.pc.mini.png}}||

 * In staged mode, System Settings should be '''full-screen whenever you are on the “Background” panel''', and the header should be semi-transparent, so that you can see the background behind it.

 * In windowed mode, '''all non-System-Settings windows should be transparent whenever you are in the “Background” panel''', so that you can see the background around the System Settings window, with only outlines remaining to reassure you that they are still open. As soon as you switch to another panel, or close, minimize, or unfocus System Settings, all other windows should resume visibility.

=== Primary display ===
Line 17: Line 34:
To minimize interaction needed, the “Background” screen should act as its own preview. Therefore:
 * Its header background should have custom 50% opacity, so that you can see the current background cropped as it would be on the welcome screen.
 * “New”, “Recent”, “Pinch to crop”, and “Drag to move” should all be white text with a centered shadow, so that you can read them against any background.
{{attachment:background.tablet.png}}
Line 21: Line 36:
Tapping the “New” button should open [[https://docs.google.com/document/d/1trse15NokU8IJ5lm3BnUi7oMNTCkUnYNHeAHZdtzFoQ/edit#heading=h.woe7j0vyqk0u| the content hub for selecting a new image]]. The default wallpapers should be pre-populated under 'Recent' and also pre-loaded into the Camera app photo roll (so that a user can access them again if they get displaced out of the recent list on this screen). “New”, “Recent”, “Pinch to crop”, and “Drag to move” should all be white text with a centered shadow, so that you can read them against any background.

Tapping “New” should open a popover with items “Picture…”, “Color…”, and “Gradient…”.

Choosing “Image…” should open [[https://docs.google.com/document/d/1trse15NokU8IJ5lm3BnUi7oMNTCkUnYNHeAHZdtzFoQ/edit#heading=h.woe7j0vyqk0u|a picker for selecting a new image]], including an “Ubuntu Backgrounds” collection (bug Bug:1288364) that does not appear when the picker is called from other apps. (Alternatively, this collection should be placed by default in the Gallery app.)
Line 27: Line 46:
When you select a new image for your background, and it is not the size of the screen, by default it should be cropped to fill the display.  See default cropping rules above When you select a new image in staged mode, and it is not the size of the screen, by default it should be cropped to fill the display.
Line 37: Line 56:

Note: pinch to crop functionality is optional for the first iteration.

----

=== Ideas for subsequent design after MVP implementation is complete ===

Note all ideas below are subject to change, please check with design before working on anything in the section below.
Line 62: Line 72:
=== With external display ===
Line 63: Line 74:
==== Minimal implementation ====
Line 64: Line 76:
There should be no extra UI for setting the external display background. Instead, the image chosen for the device display should be reused on the external display:
Line 65: Line 78:
==== Top-level screen ==== {{attachment:Convergent_wallpaper.jpg}}
Line 67: Line 80:
||<tablestyle="float:right;margin:0 0 1em 1em" style="border:none">{{attachment:background-dual.preliminary.phone.png}}|| ==== Eventual implementation ====
Line 69: Line 82:
For speed of implementation, whenever an external display is connected, the top-level “Background” screen should consist solely of two list items: one the name of the device model, the other “External Display”.

||<tablestyle="clear:both" style="border:none">||
==== Top-level screen: Eventual implementation ====

||<tablestyle="float:right;margin:0 0 1em 1em" style="border:none">{{attachment:background.pocket.png}}||
{{attachment:background.pocket.png}} {{attachment:background-phone.pocket.jpg}} {{attachment:background-external.pocket.jpg}}
Line 77: Line 85:

||<tablestyle="clear:both" style="border:none">||
==== Secondary screens ====

||<tablestyle="float:right;margin:0 1em 1em 0" style="border:none">{{attachment:background-phone.pocket.jpg}} {{attachment:background-external.pocket.jpg}}||
Line 94: Line 97:
For a minimal implementation, background settings for the internal and external displays should be completely independent.
<<Anchor(launcher)>>

Background settings

“Background” refers to the area behind all open windows in windowed mode, and to the welcome (lock) screen in staged mode.

Access

background-access.png

On the System Settings main screen, the “Background” icon should include a thumbnail of the currently selected background. Therefore, all the backgrounds in the icon should reflect the aspect ratio of the current display.

Structure

When choosing a background, by far the best representation of your choice is seeing the full-size background on the screen itself. This avoids frustration from choosing an image that has too low resolution, or from cropping an image poorly, and not being able to see the problem until you have exited.

Achieving this representation requires bespoke behavior in two ways.

First, each display should have its own Background UI. (This is unlike Display settings, where all displays must be configurable on the primary display because a misconfigured display might not be working at all.)

Second, each display should be adjusted to let you see the background on that display:

Staged mode

Windowed mode

background.pc.mini.png

  • In staged mode, System Settings should be full-screen whenever you are on the “Background” panel, and the header should be semi-transparent, so that you can see the background behind it.

  • In windowed mode, all non-System-Settings windows should be transparent whenever you are in the “Background” panel, so that you can see the background around the System Settings window, with only outlines remaining to reassure you that they are still open. As soon as you switch to another panel, or close, minimize, or unfocus System Settings, all other windows should resume visibility.

Primary display

background.phone.jpgbackground-pinch.phone.jpgbackground-drag.phone.jpg

background.tablet.png

“New”, “Recent”, “Pinch to crop”, and “Drag to move” should all be white text with a centered shadow, so that you can read them against any background.

Tapping “New” should open a popover with items “Picture…”, “Color…”, and “Gradient…”.

Choosing “Image…” should open a picker for selecting a new image, including an “Ubuntu Backgrounds” collection (bug 1288364) that does not appear when the picker is called from other apps. (Alternatively, this collection should be placed by default in the Gallery app.)

The “Recent” list should consist of the ten most recently chosen distinct background settings, that is, image plus crop. This means there may be multiple recent background settings that use the same picture but with different crops. A crop should be saved whenever you leave the “Background” screen. After a fresh install, the this list should be pre-populated with the default wallpaper images (ubuntu wallpaper + images from the wallpaper competition)

If you choose a new image, that image should zoom up from the “New” button to be shown as the current background. And if if you tap any of the “Recent” items, that image should similarly zoom up to become the current background. At the same time, any “Recent” items to its left should slide along one spot, making way for the previous selection to zoom down to become the most “Recent” item. If you chose a new image, the least recent setting should disappear from the list.

When you select a new image in staged mode, and it is not the size of the screen, by default it should be cropped to fill the display.

Long-pressing a “Recent” item should reveal a context menu with a single item, “Delete”. (Deleting recent background settings will be a rarely-needed function, usually wanted only after relationship breakups.)

In the usual case where there is not enough room to show the “New” button plus all the “Recent” items in a single row:

  • The entire row should be scrollable horizontally.
  • To indicate that there is more off-screen, the spacing between the “Recent” items should be expanded if necessary depending on the screen size, just enough that one of them is between 1/3 and 2/3 half off-screen.
  • The scroll position should reset whenever you return to the screen (so that you don’t lose sight of the “New” button) or choose a different background (so that you can see the previous selection become the new most recent, and undo it if necessary).

The standard gestures should zoom and pan the picture to choose the area (bug 1368286). In case you do not realize this, if you have been on the “Background” screen for five seconds after making a selection, without doing anything else, the “Pinch to crop” hint should fade in and out over two seconds, followed by the “Drag to move” hint. The hints should not appear if the current image is exactly the size of the phone screen (suggesting that it was supplied specifically to be used, uncropped, on that handset).

With external display

Minimal implementation

There should be no extra UI for setting the external display background. Instead, the image chosen for the device display should be reused on the external display:

Convergent_wallpaper.jpg

Eventual implementation

background.pocket.png background-phone.pocket.jpg background-external.pocket.jpg

When an external display is connected, the top-level “Background” screen should instead show two previews: one labelled with the name of the device model, the other “External Display”.

Choosing either display should navigate down the page stack to a “{model name}” or “External Display” screen. Both screens should have the same layout and behavior as the “Background” screen for a standalone phone, except that the “External Display” screen should:

  • show its preview in a frame that matches the external display’s aspect ratio and orientation;
  • contain a radio menu with “Stretch to fill”, “Crop to fill”, and “Tile” options;
  • show the “New” and “Recent” text in the normal UI color without a shadow (since here they aren’t over a background image); and
  • have “New” and “Recent” buttons that also match the external display’s aspect ratio and orientation.

When you select an image for an external display background, the default fill option should be:

  • “Tile” if the selected image is less than 2/3 the width and/or less than 2/3 the height of the display; or else
  • “Stretch to fill” if the image is within 20% of the aspect ratio of the display; or else
  • “Crop to fill”.

Launcher & Menus

launcher-and-menus.png launcher.phone.png

The “Launcher & Menus” panel should be present only when any of the settings apply. If you change the environment such that they no longer apply (for example, disconnect an external display and remove any mouse), System Settings should automatically navigate back to the main screen.

Appearance (last edited 2020-01-14 12:20:47 by mpt)