Re: [Interest] QtQuick Controls 2 and Designer: Should I use Styles or Customize?
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 wrote:
> Look nice, but what exactly does the function
> SoStronk.contextPropertyForQmlObject(obj, string) does ?
>
>
>
>
> From: Shantanu Tushar
> Sent: April 11, 2018 9:29 AM
> To: Jérôme Godbout
> Cc: Thomas Hartmann; interest@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 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 on
>> behalf of Shantanu Tushar
>> Sent: April 9, 2018 11:30 AM
>> To: Thomas Hartmann
>> Cc: interest@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. Ou
Re: [Interest] QtQuick Controls 2 and Designer: Should I use Styles or Customize?
Look nice, but what exactly does the function
SoStronk.contextPropertyForQmlObject(obj, string) does ?
From: Shantanu Tushar
Sent: April 11, 2018 9:29 AM
To: Jérôme Godbout
Cc: Thomas Hartmann; interest@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 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 on
> behalf of Shantanu Tushar
> Sent: April 9, 2018 11:30 AM
> To: Thomas Hartmann
> Cc: interest@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 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 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.1
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 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 on
> behalf of Shantanu Tushar
> Sent: April 9, 2018 11:30 AM
> To: Thomas Hartmann
> Cc: interest@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 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 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 Q
Re: [Interest] QtQuick Controls 2 and Designer: Should I use Styles or Customize?
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 on behalf
of Shantanu Tushar
Sent: April 9, 2018 11:30 AM
To: Thomas Hartmann
Cc: interest@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 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 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@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@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest
___
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest
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 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 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@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@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] QtQuick Controls 2 and Designer: Should I use Styles or Customize?
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 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@qt-project.org > http://lists.qt-project.org/mailman/listinfo/interest > -- Shantanu Tushar(UTC +0530) shantanu.io ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
