[Interest] qt.labs.controls / QtQuickControls2: ToolBar, Label / Image Colors, tinting...

[ekke]

Thanks, J-P,

I'll try it out

ekke

Am 06.05.16 um 21:19 schrieb J-P Nurmi:
> Hi ekke,
>
> One possibility for tinting images could be to use ColorOverlay from
> QtGraphicalEffects: http://doc.qt.io/qt-5/qml-qtgraphicaleffects-coloroverlay.html
>
> --
> J-P Nurmi
>
>
>
>> On 06 May 2016, at 19:49, ekke <ekke at ekkes-corner.org
>> <mailto:ekke at ekkes-corner.org>> wrote:
>>
>> just noticed that in Qt 5.7 there's a new property Material.foreground:
>> http://doc-snapshots.qt.io/qt5-5.7/qtquickcontrols2-material.html#foreground-attached-prop
>>
>> seems this didn't make it into the 5.7 Beta
>> from docs:
>> The default value is theme-specific (light or dark).
>> So there's no dependency between primary and foreground and I have to
>> calculate it by myself for text inside ToolBar
>>
>> still my question about tinting images for Material
>>
>> Am 06.05.16 um 17:59 schrieb ekke:
>>>
>>> it's really easy to create a Toolbar with Title and Menu using
>>> qt.labs.controls and Material style:
>>>
>>> import QtQuick 2.6
>>> import QtQuick.Layouts 1.3
>>> import Qt.labs.controls 1.0
>>> import Qt.labs.controls.material 1.0
>>>
>>> ToolBar {
>>>     id: titleToolBar
>>>     property alias text: titleLabel.text
>>>     RowLayout {
>>>         focus: false
>>>         spacing: 20
>>>         anchors.fill: parent
>>>         Label {
>>>             id: titleLabel
>>>             text: "ekke"
>>>             font.pixelSize: 20
>>>             elide: Label.ElideRight
>>>             horizontalAlignment: Qt.AlignHCenter
>>>             verticalAlignment: Qt.AlignVCenter
>>>             Layout.fillWidth: true
>>>         }
>>>         ToolButton {
>>>             Image {
>>>                 anchors.centerIn: parent
>>>                 source: "qrc:/images/menu.png"
>>>             }
>>>             // onClicked: doSomething()
>>>         }
>>>     }
>>> }
>>>
>>> I'm getting the primaryColor as background of ToolBar as expected.
>>>
>>> Problem is when primaryColor is a dark color and needs white as text
>>> color.
>>>
>>> Here's the overview of Material Color Palette where you can see when
>>> text should be black or white:
>>>
>>> http://www.google.com/design/spec/style/color.html#color-color-palette 
>>>
>>> I'm always getting black as color - is there something like *color:
>>> Material.textOnPrimary* ?
>>>
>>> Or do I have to handle this by my own logic or mappings ?
>>>
>>> Using a dark primary color not only needs white text color, but also
>>> white Images as used in ToolButton -> Image above.
>>>
>>> Do I need two different image sets for black or white ?
>>>
>>> Or is there something like 'tinting' an Image as for other OS ?
>>>
>>> (BlackBerry Cascades: setFilterColor(), Android: setColorFilter,
>>> iOS: tintColor = UIColor.redColor())
>>>
>>> Inside the Toolbar depending from Material primary color, I need
>>> black or white, also for BottomNavigation (Android)
>>>
>>> There are other situations where I have to 'tint' Images with the
>>> primary color as for selected buttons in iOS bottom navigation bar
>>>
>>> Would be great to get some hints or if there's something inside
>>> qt.labs.controls / QtQuickControls2 I could use - even with the risk
>>> of API changes in future.
>>>
>>> THANKS
>>> -- 
>>>
>>> ekke (ekkehard gentz)
>>>
>>> independent software architect
>>> international development native mobile business apps
>>> BlackBerry 10 | Qt Mobile (Android, iOS)
>>>
>>>
>>>
>>> _______________________________________________
>>> Interest mailing list
>>> Interest at qt-project.org
>>> http://lists.qt-project.org/mailman/listinfo/interest
>>
>> _______________________________________________
>> Interest mailing list
>> Interest at qt-project.org <mailto:Interest at qt-project.org>
>> http://lists.qt-project.org/mailman/listinfo/interest
>
>
>
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160506/863ec1ea/attachment.html>