[Interest] [Qt Labs Controls 5.6] Customization recommendations

[Ronan Jouchet]

Hi.

I'm porting a QML 5.5 tablet+desktop app to the new Qt 5.6 Labs
Controls. I have some feedback and a few questions.

1. Great job on the simple "2 axis" (theme, accent) customization for
the Material/Universal styles, it provides a nice starting point :)
And great job on sprucing up Material with helpful animations.

2. The [DOC] states that "all visual implementations sit in the imports
folder, so that users who want to create their own complete style can
copy the folder and start tweaking". And as further exemplified by
Gabriel's QtWS15's [TALK], tweaking e.g. `Button` means providing
your own `label` & `background` items.

-> That sounds nice for users wanting total control over the complete
style. But suppose instead I'm mostly happy with Material and
only want to *override some attributes*, much like I would do
with CSS in a webapp, and as opposed to wholly defining control
sub-items {label, background, ...}.

Is there a way to do that? Following the documentation sentence
quoted above, I'd just copy the whole `material` folder and start
tweaking, but then I'd have to merge my tweaks with upstream
changes brought by each Qt release.
Correct? Is this the workflow you have in mind?

3. With upcoming desktop support in mind, would it be interesting to
add a third customization axis (alongside theme & accent) called
"density" that would adjust paddings like the [GMAIL] feature does?

For tablet+desktop apps where exact platform style conformance is not
a goal and thus where a common UX / controls set is acceptable, it
could provide widget size "responsiveness" to fit the platform
expected input precision. That's what I was thinking to implement
when I stumbled upon my question 2.

Does it make sense / has such a feature already been discussed?

Thanks :)

[DOC]
https://doc-snapshots.qt.io/qt5-5.6/qtlabscontrols-differences.html#styles
[TALK] https://www.youtube.com/watch?v=FqjabvHSiZk
[GMAIL]
https://gist.githubusercontent.com/ronjouch/b9dbb87a577ed16a44e0/raw/d10b4ab6c378fb4e432235ff2fd430b5b3789206/gmail-display-density.png

--
Ronan

[Nikita Krupenko]

2016-03-10 17:19 GMT+02:00 Ronan Jouchet <***@cadensimaging.com>:
> -> That sounds nice for users wanting total control over the complete
> style. But suppose instead I'm mostly happy with Material and
> only want to *override some attributes*, much like I would do
> with CSS in a webapp, and as opposed to wholly defining control
> sub-items {label, background, ...}.
>
> Is there a way to do that? Following the documentation sentence
> quoted above, I'd just copy the whole `material` folder and start
> tweaking, but then I'd have to merge my tweaks with upstream
> changes brought by each Qt release.
> Correct? Is this the workflow you have in mind?

You don't need to copy anything, you can just use button with Material
theme and override it's background or label. You can also tweak some
properties, like font or padding, that is used for creating and
positioning default background and label.

Also, note, that Qt Labs Controls is a TP in 5.6. The label already
became contentItem in 5.7.

> 3. With upcoming desktop support in mind, would it be interesting to
> add a third customization axis (alongside theme & accent) called
> "density" that would adjust paddings like the [GMAIL] feature does?
>
> For tablet+desktop apps where exact platform style conformance is not
> a goal and thus where a common UX / controls set is acceptable, it
> could provide widget size "responsiveness" to fit the platform
> expected input precision. That's what I was thinking to implement
> when I stumbled upon my question 2.
>
> Does it make sense / has such a feature already been discussed?

There is opened BR: https://bugreports.qt.io/browse/QTBUG-51109

[Ronan Jouchet]

On 2016-03-10 19:09, Nikita Krupenko wrote:
> 2016-03-10 17:19 GMT+02:00 Ronan Jouchet <***@cadensimaging.com>:
>> -> That sounds nice for users wanting total control over the complete
>> style. But suppose instead I'm mostly happy with Material and
>> only want to *override some attributes*, much like I would do
>> with CSS in a webapp, and as opposed to wholly defining control
>> sub-items {label, background, ...}.
>>
>> Is there a way to do that? Following the documentation sentence
>> quoted above, I'd just copy the whole `material` folder and start
>> tweaking, but then I'd have to merge my tweaks with upstream
>> changes brought by each Qt release.
>> Correct? Is this the workflow you have in mind?
>
> You don't need to copy anything, you can just use button with Material
> theme and override it's background or label. You can also tweak some
> properties, like font or padding, that is used for creating and
> positioning default background and label.

Hi. Two things:

1. Sure, that works for a one-time, isolated tweak. But I'm talking
about tweaking *all* instances of a control. Thus the need to
"overlay" or fork my own variant of Material.

2. Even in the case of a one-time change, remains the question of the
granularity of tweaks. Suppose I have a checkbox for which I want a
green-colored label. Is there a way to only override the color
property like I could with CSS?

I am totally able to wholly re-define the `label` property:
label: Text {
// dozens of attributes I don't want to touch but have to
// copy-paste from the reference Material implementation
color: "green"
}

Whereas I would like to simply
// fails and logs `Cannot assign to non-existent property "color"`
label.color: "green"

So in this case I could `property alias labelColor: label.color`
and later on set `labelColor: "green"`
... but the alias would have to be in the source CheckBox
implementation, and I'm back at modifying Material, which was what
I wanted to avoid initially.

Am I missing something? More generally I created
https://bugreports.qt.io/browse/QTBUG-51785

> Also, note, that Qt Labs Controls is a TP in 5.6. The label already
> became contentItem in 5.7.

Yup, no problem with that, the documentation and "labs" namespace are
pretty clear that the API isn't stable.

>> 3. With upcoming desktop support in mind, would it be interesting to
>> add a third customization axis (alongside theme & accent) called
>> "density" that would adjust paddings like the [GMAIL] feature does?
>
> There is opened BR: https://bugreports.qt.io/browse/QTBUG-51109

Thanks! Keeping an eye on this one.

[Jérôme Godbout]

Sorry don't want to hijack the thread, but I just watched the video, that's
a great news that Qt is heading that way, we have many styles created and
it's painful to maintain and size them properly in every case. I'm super
happy about that feature coming. Is this will replace the full Controls
module or will it be into it's own module? Are you aiming to Qt 5.7 for
stable release?

Thanks, sorry again to jumping into that thread.

On Fri, Mar 11, 2016 at 10:42 AM, Ronan Jouchet <
***@cadensimaging.com> wrote:

> On 2016-03-10 19:09, Nikita Krupenko wrote:
>
>> 2016-03-10 17:19 GMT+02:00 Ronan Jouchet <***@cadensimaging.com
>> >:
>>
>>> -> That sounds nice for users wanting total control over the complete
>>> style. But suppose instead I'm mostly happy with Material and
>>> only want to *override some attributes*, much like I would do
>>> with CSS in a webapp, and as opposed to wholly defining control
>>> sub-items {label, background, ...}.
>>>
>>> Is there a way to do that? Following the documentation sentence
>>> quoted above, I'd just copy the whole `material` folder and start
>>> tweaking, but then I'd have to merge my tweaks with upstream
>>> changes brought by each Qt release.
>>> Correct? Is this the workflow you have in mind?
>>>
>>
>> You don't need to copy anything, you can just use button with Material
>> theme and override it's background or label. You can also tweak some
>> properties, like font or padding, that is used for creating and
>> positioning default background and label.
>>
>
> Hi. Two things:
>
> 1. Sure, that works for a one-time, isolated tweak. But I'm talking
> about tweaking *all* instances of a control. Thus the need to
> "overlay" or fork my own variant of Material.
>
> 2. Even in the case of a one-time change, remains the question of the
> granularity of tweaks. Suppose I have a checkbox for which I want a
> green-colored label. Is there a way to only override the color
> property like I could with CSS?
>
> I am totally able to wholly re-define the `label` property:
> label: Text {
> // dozens of attributes I don't want to touch but have to
> // copy-paste from the reference Material implementation
> color: "green"
> }
>
> Whereas I would like to simply
> // fails and logs `Cannot assign to non-existent property "color"`
> label.color: "green"
>
> So in this case I could `property alias labelColor: label.color`
> and later on set `labelColor: "green"`
> ... but the alias would have to be in the source CheckBox
> implementation, and I'm back at modifying Material, which was what
> I wanted to avoid initially.
>
> Am I missing something? More generally I created
> https://bugreports.qt.io/browse/QTBUG-51785
>
> Also, note, that Qt Labs Controls is a TP in 5.6. The label already
>> became contentItem in 5.7.
>>
>
> Yup, no problem with that, the documentation and "labs" namespace are
> pretty clear that the API isn't stable.
>
> 3. With upcoming desktop support in mind, would it be interesting to
>>> add a third customization axis (alongside theme & accent) called
>>> "density" that would adjust paddings like the [GMAIL] feature does?
>>>
>>
>> There is opened BR: https://bugreports.qt.io/browse/QTBUG-51109
>>
>
> Thanks! Keeping an eye on this one.
>
> _______________________________________________
> Interest mailing list
> ***@qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>

[Nurmi J-P]

Hi,

We're applying some bug fixes to Qt Quick Controls 1.x, but the development focus has been on the new controls for a good while. The goal is to have the first stable release in Qt 5.7. We still have some important features (such as text selection handles) missing, but it's looking pretty promising overall.

--
J-P Nurmi

On 11 Mar 2016, at 17:20, Jérôme Godbout <***@bodycad.com<mailto:***@bodycad.com>> wrote:

Sorry don't want to hijack the thread, but I just watched the video, that's a great news that Qt is heading that way, we have many styles created and it's painful to maintain and size them properly in every case. I'm super happy about that feature coming. Is this will replace the full Controls module or will it be into it's own module? Are you aiming to Qt 5.7 for stable release?

Thanks, sorry again to jumping into that thread.

On Fri, Mar 11, 2016 at 10:42 AM, Ronan Jouchet <***@cadensimaging.com<mailto:***@cadensimaging.com>> wrote:
On 2016-03-10 19:09, Nikita Krupenko wrote:
2016-03-10 17:19 GMT+02:00 Ronan Jouchet <***@cadensimaging.com<mailto:***@cadensimaging.com>>:
-> That sounds nice for users wanting total control over the complete
style. But suppose instead I'm mostly happy with Material and
only want to *override some attributes*, much like I would do
with CSS in a webapp, and as opposed to wholly defining control
sub-items {label, background, ...}.

Is there a way to do that? Following the documentation sentence
quoted above, I'd just copy the whole `material` folder and start
tweaking, but then I'd have to merge my tweaks with upstream
changes brought by each Qt release.
Correct? Is this the workflow you have in mind?

You don't need to copy anything, you can just use button with Material
theme and override it's background or label. You can also tweak some
properties, like font or padding, that is used for creating and
positioning default background and label.

Hi. Two things:

1. Sure, that works for a one-time, isolated tweak. But I'm talking
about tweaking *all* instances of a control. Thus the need to
"overlay" or fork my own variant of Material.

2. Even in the case of a one-time change, remains the question of the
granularity of tweaks. Suppose I have a checkbox for which I want a
green-colored label. Is there a way to only override the color
property like I could with CSS?

I am totally able to wholly re-define the `label` property:
label: Text {
// dozens of attributes I don't want to touch but have to
// copy-paste from the reference Material implementation
color: "green"
}

Whereas I would like to simply
// fails and logs `Cannot assign to non-existent property "color"`
label.color: "green"

So in this case I could `property alias labelColor: label.color`
and later on set `labelColor: "green"`
... but the alias would have to be in the source CheckBox
implementation, and I'm back at modifying Material, which was what
I wanted to avoid initially.

Am I missing something? More generally I created
https://bugreports.qt.io/browse/QTBUG-51785

Also, note, that Qt Labs Controls is a TP in 5.6. The label already
became contentItem in 5.7.

Yup, no problem with that, the documentation and "labs" namespace are pretty clear that the API isn't stable.

3. With upcoming desktop support in mind, would it be interesting to
add a third customization axis (alongside theme & accent) called
"density" that would adjust paddings like the [GMAIL] feature does?

There is opened BR: https://bugreports.qt.io/browse/QTBUG-51109

Thanks! Keeping an eye on this one.

[Nurmi J-P]

Hi,

> On 11 Mar 2016, at 16:42, Ronan Jouchet <***@cadensimaging.com> wrote:
>
>> On 2016-03-10 19:09, Nikita Krupenko wrote:
>> 2016-03-10 17:19 GMT+02:00 Ronan Jouchet <***@cadensimaging.com>:
>>> -> That sounds nice for users wanting total control over the complete
>>> style. But suppose instead I'm mostly happy with Material and
>>> only want to *override some attributes*, much like I would do
>>> with CSS in a webapp, and as opposed to wholly defining control
>>> sub-items {label, background, ...}.
>>>
>>> Is there a way to do that? Following the documentation sentence
>>> quoted above, I'd just copy the whole `material` folder and start
>>> tweaking, but then I'd have to merge my tweaks with upstream
>>> changes brought by each Qt release.
>>> Correct? Is this the workflow you have in mind?
>>
>> You don't need to copy anything, you can just use button with Material
>> theme and override it's background or label. You can also tweak some
>> properties, like font or padding, that is used for creating and
>> positioning default background and label.
>
> Hi. Two things:
>
> 1. Sure, that works for a one-time, isolated tweak. But I'm talking
> about tweaking *all* instances of a control. Thus the need to
> "overlay" or fork my own variant of Material.
>
> 2. Even in the case of a one-time change, remains the question of the
> granularity of tweaks. Suppose I have a checkbox for which I want a
> green-colored label. Is there a way to only override the color
> property like I could with CSS?
>
> I am totally able to wholly re-define the `label` property:
> label: Text {
> // dozens of attributes I don't want to touch but have to
> // copy-paste from the reference Material implementation
> color: "green"
> }
>
> Whereas I would like to simply
> // fails and logs `Cannot assign to non-existent property "color"`
> label.color: "green"
>
> So in this case I could `property alias labelColor: label.color`
> and later on set `labelColor: "green"`
> ... but the alias would have to be in the source CheckBox
> implementation, and I'm back at modifying Material, which was what
> I wanted to avoid initially.
>
> Am I missing something? More generally I created
> https://bugreports.qt.io/browse/QTBUG-51785
>
>> Also, note, that Qt Labs Controls is a TP in 5.6. The label already
>> became contentItem in 5.7.
>
> Yup, no problem with that, the documentation and "labs" namespace are pretty clear that the API isn't stable.
>
>>> 3. With upcoming desktop support in mind, would it be interesting to
>>> add a third customization axis (alongside theme & accent) called
>>> "density" that would adjust paddings like the [GMAIL] feature does?
>>
>> There is opened BR: https://bugreports.qt.io/browse/QTBUG-51109
>
> Thanks! Keeping an eye on this one.
> _______________________________________________
> Interest mailing list
> ***@qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest


Sorry for a late and short reply. Busy times... :) This forum thread describes the main reason why things are the way they are: http://forum.qt.io/topic/64198/qt-labs-controls-cusomization/4

--
J-P Nurmi

[Ronan Jouchet]

On 2016-03-11 11:30, Nurmi J-P wrote:
> Sorry for a late and short reply. Busy times... :) This forum thread
> describes the main reason why things are the way they are:
> http://forum.qt.io/topic/64198/qt-labs-controls-cusomization/4

Thanks for bringing some context. Makes sense.

That confirms we'll all soon be diving into forking/customizing Material
/ Universal, which puts weight on doing it in a sane way.
Great to see you recognize this and prioritized
https://bugreports.qt.io/browse/QTBUG-51785 as important.

[Nurmi J-P]

On 2016-03-11 16:42, Ronan Jouchet wrote:
>> You don't need to copy anything, you can just use button with Material
>> theme and override it's background or label. You can also tweak some
>> properties, like font or padding, that is used for creating and
>> positioning default background and label.
>
> Hi. Two things:
>
> 1. Sure, that works for a one-time, isolated tweak. But I'm talking
> about tweaking *all* instances of a control. Thus the need to
> "overlay" or fork my own variant of Material.

For the time being, you would either have to
- create extended types and use a local import folder (myapp/mycontrols/Button.qml => import "mycontrols" as My => My.Button { } => creates an instance of myapp/mycontrols/Button.qml), or
- create your own QTDIR/qml/Qt/labs/controls/<style> folder where you can place Button.qml. With this approach any missing QML file will currently fallback to the Default style instead of the Material style, though.

Currently there is no way to configure the system to load styles from anywhere else than QTDIR/qml/Qt/labs/controls/<style>. In addition to the current options (command line arg, environment variable, configuration file), we have plans to introduce C++ API for specifying the style name. I have added a note to https://bugreports.qt.io/browse/QTBUG-50787 that we might want to make the style path (and possibly the fallback style) also configurable.

> 2. Even in the case of a one-time change, remains the question of the
> granularity of tweaks. Suppose I have a checkbox for which I want a
> green-colored label. Is there a way to only override the color
> property like I could with CSS?
>
> I am totally able to wholly re-define the `label` property:
> label: Text {
> // dozens of attributes I don't want to touch but have to
> // copy-paste from the reference Material implementation
> color: "green"
> }
>
> Whereas I would like to simply
> // fails and logs `Cannot assign to non-existent property "color"`
> label.color: "green"
>
> So in this case I could `property alias labelColor: label.color`
> and later on set `labelColor: "green"`
> ... but the alias would have to be in the source CheckBox
> implementation, and I'm back at modifying Material, which was what
> I wanted to avoid initially.
>
> Am I missing something? More generally I created
> https://bugreports.qt.io/browse/QTBUG-51785

The project is under heavy development and we're constantly looking for ways to improve use cases that are important to our users. We wanted to release the unfinished project as a technology preview to get some early feedback to better understand your needs. Don't hesitate the file in any suggestions you might have, we're eager to hear all kinds of ideas. :)

Currently the only configurable style-specific attributes are theme and accent (Material & Univeral), and primary color (Material only). A foreground/text color sounds like a good candidate to be exposed as a writable style-attribute.

--
J-P Nurmi