colorselector.qml Example File
threejs/cellphone/qml/cellphone/colorselector.qml
import QtQuick 2.6
Item {
id: colorSelector
property color selectedColor
height: ((width - 4) * colorSelectorModel.count) + 4
Rectangle {
anchors.fill: parent
color: "black"
radius: width / 10
opacity: 0.3
}
ListModel {
id: colorSelectorModel
ListElement { caseColor: "#eeeeee" }
ListElement { caseColor: "#111111" }
ListElement { caseColor: "#ffe400" }
ListElement { caseColor: "#469835" }
ListElement { caseColor: "#fa0000" }
}
GridView {
id: colorSelectorGrid
anchors.fill: colorSelector
anchors.margins: 4
model: colorSelectorModel
interactive: false
cellWidth: width
cellHeight: cellWidth + 4
delegate: Component {
Rectangle {
id: colorDelegate
width: colorSelectorGrid.cellWidth
height: colorSelectorGrid.cellWidth
color: caseColor
border.color: "lightgray"
border.width: 2
radius: width / 10
MouseArea {
anchors.fill: parent
onClicked: {
selectedColor = parent.color
colorDelegateAnimation.start()
}
}
NumberAnimation {
id: colorDelegateAnimation
running: false
loops: 1
target: colorDelegate
property: "opacity"
from: 0.1
to: 1.0
duration: 500
}
}
}
}
}