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 <dan@mindstab.net>
This commit is contained in:
parent
33753ae521
commit
8543ec2d86
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
3
Icon.qml
3
Icon.qml
|
@ -22,6 +22,8 @@ Rectangle {
|
||||||
|
|
||||||
property alias source: srcImg.source
|
property alias source: srcImg.source
|
||||||
|
|
||||||
|
property real rotationAngle: 0.0
|
||||||
|
|
||||||
signal clicked()
|
signal clicked()
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
|
@ -42,6 +44,7 @@ Rectangle {
|
||||||
|
|
||||||
antialiasing: true
|
antialiasing: true
|
||||||
smooth: true
|
smooth: true
|
||||||
|
transform: Rotation { origin.x: width/2; origin.y: height / 2; angle: rotationAngle}
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea { // Full row mouse area triggering onClick
|
MouseArea { // Full row mouse area triggering onClick
|
||||||
|
|
|
@ -48,7 +48,7 @@ Item { // LOTS OF NESTING TO DEAL WITH QT WEIRDNESS, SORRY
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
height: crItem.height
|
height: crItem.height
|
||||||
width: parent.width
|
width: parent.width
|
||||||
color: isHover ? Theme.backgroundPaneColor : (isActive ? Theme.backgroundPaneColor : Theme.backgroundMainColor)
|
color: isHover ? Theme.backgroundHilightElementColor : (isActive ? Theme.backgroundHilightElementColor : Theme.backgroundMainColor)
|
||||||
|
|
||||||
Portrait {
|
Portrait {
|
||||||
id: portrait
|
id: portrait
|
||||||
|
|
|
@ -3,7 +3,7 @@ import QtQuick.Controls 2.13
|
||||||
import "theme"
|
import "theme"
|
||||||
|
|
||||||
TextField {
|
TextField {
|
||||||
color: "black"
|
color: Theme.mainTextColor
|
||||||
font.pointSize: 10 * gcd.themeScale
|
font.pointSize: 10 * gcd.themeScale
|
||||||
width: 100
|
width: 100
|
||||||
|
|
||||||
|
|
|
@ -11,9 +11,11 @@ ThemeType {
|
||||||
|
|
||||||
backgroundMainColor: darkGrayPurple
|
backgroundMainColor: darkGrayPurple
|
||||||
backgroundPaneColor: deepPurple
|
backgroundPaneColor: deepPurple
|
||||||
|
backgroundHilightElementColor: deepPurple
|
||||||
|
|
||||||
mainTextColor: purple
|
mainTextColor: purple
|
||||||
altTextColor: mauvePurple
|
altTextColor: mauvePurple
|
||||||
|
hilightElementTextColor: purple
|
||||||
defaultButtonColor: mauvePurple
|
defaultButtonColor: mauvePurple
|
||||||
defaultButtonActiveColor: pink
|
defaultButtonActiveColor: pink
|
||||||
defaultButtonTextColor: whitePurple
|
defaultButtonTextColor: whitePurple
|
||||||
|
|
|
@ -11,9 +11,12 @@ ThemeType {
|
||||||
|
|
||||||
backgroundMainColor: whitePurple
|
backgroundMainColor: whitePurple
|
||||||
backgroundPaneColor: softPurple
|
backgroundPaneColor: softPurple
|
||||||
|
backgroundHilightElementColor: softPurple
|
||||||
|
|
||||||
|
|
||||||
mainTextColor: darkPurple
|
mainTextColor: darkPurple
|
||||||
altTextColor: purple
|
altTextColor: purple
|
||||||
|
hilightElementTextColor: darkPurple
|
||||||
defaultButtonColor: hotPink
|
defaultButtonColor: hotPink
|
||||||
defaultButtonActiveColor: pink
|
defaultButtonActiveColor: pink
|
||||||
defaultButtonTextColor: whitePurple
|
defaultButtonTextColor: whitePurple
|
||||||
|
|
|
@ -5,9 +5,11 @@ import QtQuick 2.0
|
||||||
Item {
|
Item {
|
||||||
readonly property color backgroundMainColor: theme.backgroundMainColor
|
readonly property color backgroundMainColor: theme.backgroundMainColor
|
||||||
readonly property color backgroundPaneColor: theme.backgroundPaneColor
|
readonly property color backgroundPaneColor: theme.backgroundPaneColor
|
||||||
|
readonly property color backgroundHilightElementColor: theme.backgroundHilightElementColor
|
||||||
|
|
||||||
readonly property color mainTextColor: theme.mainTextColor
|
readonly property color mainTextColor: theme.mainTextColor
|
||||||
readonly property color altTextColor: theme.altTextColor
|
readonly property color altTextColor: theme.altTextColor
|
||||||
|
readonly property color hilightElementTextColor: theme.hilightElementTextColor
|
||||||
readonly property color defaultButtonColor: theme.defaultButtonColor
|
readonly property color defaultButtonColor: theme.defaultButtonColor
|
||||||
readonly property color defaultButtonActiveColor: theme.defaultButtonActiveColor
|
readonly property color defaultButtonActiveColor: theme.defaultButtonActiveColor
|
||||||
readonly property color defaultButtonTextColor: theme.defaultButtonTextColor
|
readonly property color defaultButtonTextColor: theme.defaultButtonTextColor
|
||||||
|
|
|
@ -3,9 +3,11 @@ import QtQuick 2.0
|
||||||
QtObject {
|
QtObject {
|
||||||
property color backgroundMainColor: "red"
|
property color backgroundMainColor: "red"
|
||||||
property color backgroundPaneColor: "red"
|
property color backgroundPaneColor: "red"
|
||||||
|
property color backgroundHilightElementColor: "red"
|
||||||
|
|
||||||
property color mainTextColor: "red"
|
property color mainTextColor: "red"
|
||||||
property color altTextColor: "red"
|
property color altTextColor: "red"
|
||||||
|
property color hilightElementTextColor: "red"
|
||||||
property color defaultButtonColor: "red"
|
property color defaultButtonColor: "red"
|
||||||
property color defaultButtonActiveColor: "red"
|
property color defaultButtonActiveColor: "red"
|
||||||
property color defaultButtonTextColor: "red"
|
property color defaultButtonTextColor: "red"
|
||||||
|
|
Loading…
Reference in New Issue