[Interest] QtQuick Controls 2 and Designer: Should I use Styles or Customize?

[Jérôme Godbout]

Look nice, but what exactly does the function SoStronk.contextPropertyForQmlObject(obj, string) does ?


________________________________
From: Shantanu Tushar <shaan7in at gmail.com>
Sent: April 11, 2018 9:29 AM
To: Jérôme Godbout
Cc: Thomas Hartmann; interest at qt-project.org
Subject: Re: [Interest] QtQuick Controls 2 and Designer: Should I use Styles or Customize?

Hi,

Thanks for the suggestion. I ended up implementing it like this-

$ cat theme/v2/Theme.qml
pragma Singleton

import QtQuick 2.10
import QtQuick.Window 2.3

Item {
    visible: false

    GlassColors {
        id: glassColors
    }

    PlatinumColors {
        id: platinumColors
    }

    readonly property var colors: glassColors
    readonly property var dialogColors: platinumColors
...
...
}

$ cat theme/v2/ThemeContext.qml
import QtQuick 2.10

Item {
    id: root
    visible: false

    readonly property var _inheritedTheme:
SoStronk.contextPropertyForQmlObject(root.parent, "theme")
    readonly property bool _inheritedDialogColors: _inheritedTheme &&
_inheritedTheme.dialogColors ? true : false

    property bool dialogColors: false
    readonly property var colors: dialogColors ||
_inheritedDialogColors ? Theme.dialogColors : Theme.colors
}

where contextPropertyForQmlObject is a C++ function which returns the
value of a property under the context of the specified object.
Its used like this-

$ cat SoStronkStyle/Button.qml
import QtQuick 2.10
import QtQuick.Templates 2.3 as T

import SoStronk.theme 0.2

T.Button {
    id: control

    ThemeContext {
        id: theme
    }
...
// access theme.colors.foregroundColor

And whenever I create a dialog-

ThemeContext {
    id: theme
    dialogColors: true
}

So then any Button accessing theme.colors will end up referring to
dialogColors :)


On 9 April 2018 at 21:35, Jérôme Godbout <godboutj at amotus.ca> wrote:
> You could have a property inside the controler to select the proper theme
> value with a fallback, your theme singleton would then need to have
> different set of color.
>
>
> Theme
>
> {
>
>    id: component
>
>    property var defaultTheme: panelTheme
>
>    property var mainTheme: ...
>
>    property var panelTheme: ...
>
>
>   function getTheme(prop)
>
>   {
>
>      if(prop && component.hasOwnProperty(prop))
>
>         return component[prop];
>
>      return component.defaultTheme;
>
>   }
>
> }
>
>
> T.Button
>
> {
>
>    id: component
>
>     color: Theme.getTheme(component.customTheme).backgroundColor
>
> }
>
>
> // use style with default theme
> Button
> {
> }
>
> // Button with theme color
> Button
> {
> property string customTheme: 'mainTheme'
> }
>
> As for loading a multiple different template I think it would be impossible.
>
> ________________________________
> From: Interest <interest-bounces+godboutj=amotus.ca at qt-project.org> on
> behalf of Shantanu Tushar <shaan7in at gmail.com>
> Sent: April 9, 2018 11:30 AM
> To: Thomas Hartmann
> Cc: interest at qt-project.org
> Subject: Re: [Interest] QtQuick Controls 2 and Designer: Should I use Styles
> or Customize?
>
> Hi,
>
> I've been slowly implementing these suggestions and so far the results
> have been great. My button style looks like this-
>
> import QtQuick 2.9
> import QtQuick.Templates 2.1 as T
>
> import My.theme 0.2
>
> T.Button {
>     // Here i use properties like Theme.backgroundColor, Theme.textColor etc
> }
>
> However, I just hit a roadblock which deals with multiple styles in
> the same application. Our designer has created two sets of theme
> colors - Glass and Dark, Glass it to be used on the "Main window" of
> our application and Dark is used on rest of the dialogs. See
> https://www.sostronk.com/assets/tilt-a780c798bf78e6c5.png
>
> Now, because Theme is a singleton, there is no way for me to define a
> different set of colors for a Dialog. Any suggestions on how to
> achieve this?
>
> Thanks,
>
> On 26 March 2018 at 19:37, Shantanu Tushar <shaan7in at gmail.com> wrote:
>> Hi Thomas,
>>
>> I've tried both your suggestions in a PoC project and it works! My
>> actual app will need some refactoring to get the ball rolling but I
>> think this will work fine.
>>
>> Thanks a lot,
>>
>>
>> On 16 March 2018 at 19:32, Thomas Hartmann <Thomas.Hartmann at qt.io> wrote:
>>> Hi,
>>>
>>>
>>> I would suggest solution number 1 (Creating a Custom Style).
>>>
>>>
>>> To get the designer to show your custom style you have to configure it in
>>> qtquickcontrols2.conf.
>>>
>>> You can do this in the editable combo box in the form editor if
>>> qtquickcontrols2.conf does exist.
>>>
>>> You can refer to the Qt  Quick Controls 2 Flat Style example
>>> (https://doc.qt.io/qt-5.10/qtquickcontrols2-flatstyle-example.html).
>>>
>>> You can use QT_QUICK_CONTROLS_STYLE_PATH to specify additional paths that
>>> are used to lookup Qt Quick Controls 2 styles.
>>>
>>> You can also write your own QML plugin (2. Customizing a Control), but
>>> you
>>> have to create a QML file for every control
>>>
>>> and you have to implement a full plugin/import. For these customized
>>> controls to show up in the item library you have to provide a .metainfo
>>> file. You can look at the origin Qt Quick Controls 2 implementation for
>>> reference.
>>>
>>>
>>> I hope this solves your issue.
>>>
>>>
>>> Kind Regards,
>>>
>>> Thomas Hartmann
>>>
>>>
>>>
>>> _______________________________________________
>>> Interest mailing list
>>> Interest at qt-project.org
>>> http://lists.qt-project.org/mailman/listinfo/interest
>>>
>>
>>
>>
>> --
>> Shantanu Tushar    (UTC +0530)
>> shantanu.io
>
>
>
> --
> Shantanu Tushar    (UTC +0530)
> shantanu.io
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest



--
Shantanu Tushar    (UTC +0530)
shantanu.io
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20180411/54afca5d/attachment.html>