primitive color picker, asset form

This commit is contained in:
Blue 2024-04-05 13:17:24 -03:00
parent 9a5a0b27a2
commit 374551d2bb
Signed by: blue
GPG key ID: 9B203B252A63EE38
12 changed files with 207 additions and 57 deletions

View file

@ -31,7 +31,7 @@ Item {
model: Magpie.assets
spacing: 5
delegate: Components.AssetLine {
height: 20
height: 30
width: listView.width
}
}

View file

@ -24,9 +24,32 @@ Item {
Component {
id: addAssetForm
Forms.AddAsset {
Forms.Asset {
onCancel: stack.pop()
onSuccess: stack.pop()
onConfirm: function (title, icon, color, currency) {
if (modal.inProgress)
return;
modal.inProgress = true;
modal.status = qsTr("Creating new asset ") + " " + title + "...";
modal.open();
API.addAsset(title, icon, color, currency, function (err, result) {
if (!modal.inProgress)
return;
modal.inProgress = false;
if (err)
modal.status = err;
else
modal.status = qsTr("Success");
if (!!result) {
modal.close();
stack.pop()
}
});
}
}
}

View file

@ -31,6 +31,7 @@ Item {
Icon {
anchors.fill: parent
anchors.margins: 2
iconName: line.icon
color: pickColor(line.color)
}

View file

@ -13,6 +13,7 @@ qt_add_qml_module(magpieComponents
AssetLine.qml
IconPicker.qml
Icon.qml
ColorPicker.qml
)
target_link_libraries(magpie PRIVATE magpieComponents)

View file

@ -0,0 +1,102 @@
// SPDX-FileCopyrightText: 2023 Yury Gubich <blue@macaw.me>
// SPDX-License-Identifier: GPL-3.0-or-later
import QtQuick
import QtQuick.Controls
ComboBox {
property color color: "green"
id: box
model: [
"darkgreen", "green",
"limegreen", "lawngreen",
"darkturquoise", "lightseagreen",
"cyan", "deepskyblue",
"dodgerblue", "royalblue",
"navy","midnightblue",
"indigo", "purple",
"darkviolet", "darkorchid",
"magenta", "violet",
"crimson", "red",
"firebrick", "darkred",
"orangered", "orange",
"goldenrod", "gold",
"yellow", "lightyellow",
"ivory", "white",
"lightgrey", "grey",
"slategrey", "darkgrey",
"dimgrey", "black"
]
contentItem: Rectangle {
color: box.color
}
onActivated: index => box.color = model[index]
Component.onCompleted: {
popup.background.color = box.background.color
popup.background.border.color = box.background.border.color
popup.background.border.width = box.background.border.width
}
popup: Popup {
id: popup
y: box.height + 1
width: box.width
implicitHeight: contentItem.implicitHeight + padding * 2
padding: 1
contentItem: GridView {
id: view
property int cellSize: (popup.width) / 8
cellWidth: cellSize - 0.5;
cellHeight: cellSize;
clip: true
implicitHeight: contentHeight
model: box.popup.visible ? box.model : null
currentIndex: box.highlightedIndex
delegate: MenuItem {
required property color modelData
required property int index
width: view.cellSize
height: view.cellSize
padding: 2
highlighted: view.currentIndex === index
contentItem: Rectangle {
color: modelData
radius: box.background.radius
}
MouseArea {
anchors.fill: parent
onClicked: {
box.currentIndex = index;
box.activated(index)
popup.close();
}
}
HoverHandler {
id: hover
cursorShape: Qt.PointingHandCursor
onHoveredChanged: {
if (hovered)
view.currentIndex = index;
}
}
}
ScrollIndicator.vertical: ScrollIndicator {}
}
background: Rectangle {
radius: box.background.radius
}
}
}

View file

@ -20,10 +20,12 @@ ComboBox {
}
}
contentItem: View {
icon: currentText
icon: box.icon
padding: 5
}
onActivated: index => box.icon = model[index]
component View: Row {
required property string icon

View file

@ -8,9 +8,18 @@ import magpie
import magpie.Components as Components
Item {
signal success
property string name: qsTr("New asset")
property string icon: "wallet"
property color color: "green"
property int currency: 1
property string title: qsTr("New asset")
signal confirm (name: string, icon: string, color: color, currency: int)
signal cancel
id: form
Column {
id: inner
spacing: 5
@ -18,7 +27,7 @@ Item {
Label {
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("New asset")
text: title
font.pixelSize: 14
}
@ -36,7 +45,9 @@ Item {
TextField {
id: titleField
text: "New Asset"
text: name
onTextChanged: name = text
}
Label {
@ -45,15 +56,36 @@ Item {
Components.IconPicker {
id: iconField
icon: "list-add"
icon: form.icon
onIconChanged: form.icon = icon
}
Label {
text: qsTr("Color") + ":";
}
TextField {
Components.ColorPicker {
id: colorField
color: form.color
onColorChanged: form.color = colorField.color
}
Label {
text: qsTr("Currency") + ":";
}
ComboBox {
id: currencyField
textRole: "title" //"code"
valueRole: "id"
model: Magpie.currencies
Component.onCompleted: currentIndex = indexOfValue(currency)
onActivated: index => currency = currentValue
}
}
@ -66,47 +98,14 @@ Item {
}
Button {
text: qsTr("Create")
onClicked: inner.confirm()
text: qsTr("Confirm")
onClicked: inner.onConfirmClick()
}
}
Components.Modal {
id: modal
}
function confirm () {
function onConfirmClick () {
//TODO validation
send(titleField.text, iconField.icon, colorField.text);
}
function send (title, icon, color) {
if (modal.inProgress)
return;
titleField.text = title;
iconField.icon = icon;
colorField.text = color;
modal.inProgress = true;
modal.status = qsTr("Creating new asset ") + " " + title + "...";
modal.open();
API.addAsset(title, icon, "blue", function (err, result) {
if (!modal.inProgress)
return;
modal.inProgress = false;
if (err)
modal.status = err;
else
modal.status = qsTr("Success");
if (!!result) {
modal.close();
success();
}
});
confirm(name, icon, form.color, currency);
}
}
}

View file

@ -11,7 +11,7 @@ qt_add_qml_module(magpieForms
QML_FILES
Login.qml
Register.qml
AddAsset.qml
Asset.qml
)
target_link_libraries(magpie PRIVATE magpieForms)