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 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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import QtQuick.Controls 2.13
|
|||
import "theme"
|
||||
|
||||
TextField {
|
||||
color: "black"
|
||||
color: Theme.mainTextColor
|
||||
font.pointSize: 10 * gcd.themeScale
|
||||
width: 100
|
||||
|
||||
|
|
|
|||
|
|
@ -11,9 +11,11 @@ ThemeType {
|
|||
|
||||
backgroundMainColor: darkGrayPurple
|
||||
backgroundPaneColor: deepPurple
|
||||
backgroundHilightElementColor: deepPurple
|
||||
|
||||
mainTextColor: purple
|
||||
altTextColor: mauvePurple
|
||||
hilightElementTextColor: purple
|
||||
defaultButtonColor: mauvePurple
|
||||
defaultButtonActiveColor: pink
|
||||
defaultButtonTextColor: whitePurple
|
||||
|
|
|
|||
|
|
@ -11,9 +11,12 @@ ThemeType {
|
|||
|
||||
backgroundMainColor: whitePurple
|
||||
backgroundPaneColor: softPurple
|
||||
backgroundHilightElementColor: softPurple
|
||||
|
||||
|
||||
mainTextColor: darkPurple
|
||||
altTextColor: purple
|
||||
hilightElementTextColor: darkPurple
|
||||
defaultButtonColor: hotPink
|
||||
defaultButtonActiveColor: pink
|
||||
defaultButtonTextColor: whitePurple
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue