> Generally, for me there should be more examples on active covers
Hi Harald,
You're right, cover layouts is an area where Silica components need to improve.
We provide common UI components for easily building Sailfish-style application
pages, but so far when it comes to covers developers have unfortunately mostly
been required to create their own custom cover layouts. This is because most
application cover layouts have so far been so different from each other that
not too many clear UI patterns have emerged that would nicely turn into a
reusable common component.
Luckily similar UI development principles often apply for cover pages as for
the normal application pages like 1.) use Theme.paddingLarge margin around the
page edges and 2.) keep most text of size Theme.fontSizeMedium. Also since the
space on the covers is very limited remember to use truncationMode:
TruncationMode.Fade for non-wrapped one-line labels.
Quickly thinking we currently have seven types of cover pages in use:
1. Empty state cover. App icon + descriptive label (most platform apps when
there is no content)
- example: CoverPlaceholder { visible: model.count === 0; text: "Sign in
to..."; icon.source: appIcon }
2. Thumbnail cover. Scaled down, cropped view of the app contents (Maps,
current tab in Browser, open PDF document in Documents, open photo in Gallery)
- example: Image { anchors.fill: parent; fillMode: Image.PreserveAspectCrop;
source: currentItem.source }
3. Grid cover. 2 column x 3 row grid of items, e.g. photos or icons (Gallery,
Settings, Camera)
- example: Grid { Repeater { model: photos; Image {} }}
4. List cover of one-line items. Vertical list of 5-7 items with an icon and a
label (Phone, Documents)
- example: ListView { model: callLog: delegate: ListItem { Row { Image {}
Label {} } } }
5. List cover of two-line items. Vertical list of 3 two-line items (Messages,
Notes)
- example: ListView { model: conversations: delegate: Column { Label {} Label
{} } }
6. Header and two items cover (Calendar, Clock)
- example: Column { HeaderItem {} ListView {} }
7. Static cover. Big billboard graphic and status text (Store, Tutorial)
- example: Column { Image {} Label {} }
I'll add an item to our backlog about writing instructions on how to build
active covers. Also in the future we should provide some common cover layout
components.
Cheers,
Joona
________________________________________
From: devel-boun...@lists.sailfishos.org [devel-boun...@lists.sailfishos.org]
on behalf of Harald Schmitt [li...@hschmitt.de]
Sent: 07 February 2014 15:07
To: devel@lists.sailfishos.org
Subject: Re: [SailfishDevel] Silica API documentation on sailfishos.org website
updated
Am 07.02.2014 13:36, schrieb Joona Petrell:
> Hi,
>
> As requested on Together Jolla website we have just updated the outdated
> Silica documentation on our developer website to match the latest SDK.
>
> See https://sailfishos.org/sailfish-silica/index.html
>
> We have also included a new UI development guide called Common Pitfalls
> in Sailfish Application Development in the documentation. I encourage
> everybody interested in building Sailfish applications to read it. :)
>
> https://sailfishos.org/sailfish-silica/sailfish-application-pitfalls.html
I did a quick read and the pitfalls section is very helpful.
Generally, for me there should be more examples on active covers since
you say: "... this concept is at the core of the multitasking
capabilities of Sailfish."
Best regards,
Harald
_______________________________________________
SailfishOS.org Devel mailing list
_______________________________________________
SailfishOS.org Devel mailing list
