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

[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<mailto: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

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