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

[Shantanu Tushar]

It helps ThemeContext.qml to determine if there is already a "theme"
defined in the context and if that is using the dialog colors.

QVariant SoStronk::contextPropertyForQmlObject(QObject *o, QString name)
{
    auto context = QQmlEngine::contextForObject(o);

    if (!context) {
        qWarning() <<
                   "Context is null, maybe attempt to call
contextPropertyForQmlObject for non-QML object";
        return "";
    }

    return context->contextProperty(name.toUtf8().data());
}

On 11 April 2018 at 20:32, Jérôme Godbout <godboutj at amotus.ca> wrote:
> 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



-- 
Shantanu Tushar    (UTC +0530)
shantanu.io