From 8543ec2d86e99f052007c25e1a025dce58f66d35 Mon Sep 17 00:00:00 2001 From: Dan Ballard Date: Wed, 17 Jun 2020 16:02:28 -0700 Subject: [PATCH] add combobox widget; tweak theme hilightcoloring fields; add rotation to icon (#4) icon rotation angle int to real add combobox widget; tweak theme hilightcoloring fields; add rotation to icon Co-authored-by: Dan Ballard --- ComboBox.qml | 133 +++++++++++++++++++++++++++++++++++++++++++ Icon.qml | 3 + PortraitRow.qml | 2 +- TextField.qml | 2 +- theme/CwtchDark.qml | 2 + theme/CwtchLight.qml | 3 + theme/Theme.qml | 2 + theme/ThemeType.qml | 2 + 8 files changed, 147 insertions(+), 2 deletions(-) create mode 100644 ComboBox.qml diff --git a/ComboBox.qml b/ComboBox.qml new file mode 100644 index 0000000..1c80ab8 --- /dev/null +++ b/ComboBox.qml @@ -0,0 +1,133 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Controls.impl 2.12 +import QtGraphicalEffects 1.12 +import "theme" + + + +// Assumes data comes in a model like +// model: ListModel { +// ListElement { text: qsTr("locale-en"); value: "en" } } +ComboBox { + id: control + height: 30 * gcd.themeScale + + // visible item + contentItem: ScalingLabel { + id: displayItem + leftPadding: 10 * gcd.themeScale + + text: control.model.get(control.currentIndex)["text"] + font: control.font + color: Theme.mainTextColor + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + radius: control.height / 4 + color: Theme.backgroundMainColor + border.color: Theme.backgroundMainColor + + layer.enabled: true + layer.effect: DropShadow { + transparentBorder: true + horizontalOffset: 0 + verticalOffset: 0 + samples: 10 + radius: 8 + color: Theme.dropShadowColor + } + } + + // activate arrow button + indicator: Rectangle { + height: control.height + width: control.height + anchors.right: control.right + radius: control.height / 4 + color: Theme.backgroundPaneColor + border.color: Theme.backgroundPaneColor + + layer.enabled: true + layer.effect: DropShadow { + transparentBorder: true + horizontalOffset: 0 + verticalOffset: 0 + samples: 10 + radius: 8 + color: Theme.dropShadowColor + } + + Icon { + iconColor: Theme.toolbarIconColor + source: gcd.assetPath + "core/chevron_left-24px.svg" + + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + width: parent.height * 0.75 + height: parent.height * 0.75 + rotationAngle: 270 + + onClicked: { popup.visible = true } + } + } + + // items in the popup + delegate: ItemDelegate { + width: control.width + highlighted: control.highlightedIndex === index + height: ciText.height + (4 * gcd.themeScale) + + contentItem: + Rectangle { + anchors.fill: parent + color: control.highlightedIndex === index ? Theme.backgroundHilightElementColor : Theme.backgroundMainColor + ScalingLabel { + id: ciText + anchors.verticalCenter: parent.verticalCenter + anchors.left:parent.left + anchors.leftMargin: 10 * gcd.themeScale + + text: model["text"] //control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData + color: Theme.mainTextColor + font: control.font + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + } + + } + + popup: Popup { + y: control.height - 1 + width: control.width + implicitHeight: contentItem.implicitHeight + 2 + padding: 1 + + contentItem: ListView { + clip: true + implicitHeight: contentHeight + model: control.popup.visible ? control.delegateModel : null + currentIndex: control.highlightedIndex + + ScrollIndicator.vertical: ScrollIndicator { } + } + + background: Rectangle { + radius: 2 + border.color: Theme.backgroundMainColor + + layer.enabled: true + layer.effect: DropShadow { + transparentBorder: true + horizontalOffset: 0 + verticalOffset: 0 + samples: 10 + radius: 8 + color: Theme.dropShadowColor + } + } + } +} diff --git a/Icon.qml b/Icon.qml index c8938d4..697a5a9 100644 --- a/Icon.qml +++ b/Icon.qml @@ -22,6 +22,8 @@ Rectangle { property alias source: srcImg.source + property real rotationAngle: 0.0 + signal clicked() Image { @@ -42,6 +44,7 @@ Rectangle { antialiasing: true smooth: true + transform: Rotation { origin.x: width/2; origin.y: height / 2; angle: rotationAngle} } MouseArea { // Full row mouse area triggering onClick diff --git a/PortraitRow.qml b/PortraitRow.qml index 092d045..7bc900c 100644 --- a/PortraitRow.qml +++ b/PortraitRow.qml @@ -48,7 +48,7 @@ Item { // LOTS OF NESTING TO DEAL WITH QT WEIRDNESS, SORRY anchors.right: parent.right height: crItem.height width: parent.width - color: isHover ? Theme.backgroundPaneColor : (isActive ? Theme.backgroundPaneColor : Theme.backgroundMainColor) + color: isHover ? Theme.backgroundHilightElementColor : (isActive ? Theme.backgroundHilightElementColor : Theme.backgroundMainColor) Portrait { id: portrait diff --git a/TextField.qml b/TextField.qml index faaf939..14ea21a 100644 --- a/TextField.qml +++ b/TextField.qml @@ -3,7 +3,7 @@ import QtQuick.Controls 2.13 import "theme" TextField { - color: "black" + color: Theme.mainTextColor font.pointSize: 10 * gcd.themeScale width: 100 diff --git a/theme/CwtchDark.qml b/theme/CwtchDark.qml index 35f0442..ab7cf51 100644 --- a/theme/CwtchDark.qml +++ b/theme/CwtchDark.qml @@ -11,9 +11,11 @@ ThemeType { backgroundMainColor: darkGrayPurple backgroundPaneColor: deepPurple + backgroundHilightElementColor: deepPurple mainTextColor: purple altTextColor: mauvePurple + hilightElementTextColor: purple defaultButtonColor: mauvePurple defaultButtonActiveColor: pink defaultButtonTextColor: whitePurple diff --git a/theme/CwtchLight.qml b/theme/CwtchLight.qml index aac033e..26ba011 100644 --- a/theme/CwtchLight.qml +++ b/theme/CwtchLight.qml @@ -11,9 +11,12 @@ ThemeType { backgroundMainColor: whitePurple backgroundPaneColor: softPurple + backgroundHilightElementColor: softPurple + mainTextColor: darkPurple altTextColor: purple + hilightElementTextColor: darkPurple defaultButtonColor: hotPink defaultButtonActiveColor: pink defaultButtonTextColor: whitePurple diff --git a/theme/Theme.qml b/theme/Theme.qml index e122e9e..1e4d372 100644 --- a/theme/Theme.qml +++ b/theme/Theme.qml @@ -5,9 +5,11 @@ import QtQuick 2.0 Item { readonly property color backgroundMainColor: theme.backgroundMainColor readonly property color backgroundPaneColor: theme.backgroundPaneColor + readonly property color backgroundHilightElementColor: theme.backgroundHilightElementColor readonly property color mainTextColor: theme.mainTextColor readonly property color altTextColor: theme.altTextColor + readonly property color hilightElementTextColor: theme.hilightElementTextColor readonly property color defaultButtonColor: theme.defaultButtonColor readonly property color defaultButtonActiveColor: theme.defaultButtonActiveColor readonly property color defaultButtonTextColor: theme.defaultButtonTextColor diff --git a/theme/ThemeType.qml b/theme/ThemeType.qml index 55dc9c2..6ec5059 100644 --- a/theme/ThemeType.qml +++ b/theme/ThemeType.qml @@ -3,9 +3,11 @@ import QtQuick 2.0 QtObject { property color backgroundMainColor: "red" property color backgroundPaneColor: "red" + property color backgroundHilightElementColor: "red" property color mainTextColor: "red" property color altTextColor: "red" + property color hilightElementTextColor: "red" property color defaultButtonColor: "red" property color defaultButtonActiveColor: "red" property color defaultButtonTextColor: "red"