diff --git a/CMakeLists.txt b/CMakeLists.txt index b055edc..d713665 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -20,10 +20,14 @@ qt_add_qml_module(${TARGET_APP} ListPage.qml ListItemDelegate.qml ExpandableItemDelegate.qml + EditableItemDelegate.qml + controls/PressAndHoldButton.qml RESOURCES - "icons/software-application.png" - "icons/moreUp.png" - "icons/moreDown.png" + icons/software-application.png + icons/moreUp.png icons/moreDown.png + icons/arrow-down.png icons/arrow-up.png + icons/list-delete.png + icons/minus-sign.png icons/plus-sign.png ) # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1. diff --git a/EditableItemDelegate.qml b/EditableItemDelegate.qml new file mode 100644 index 0000000..7885f49 --- /dev/null +++ b/EditableItemDelegate.qml @@ -0,0 +1,163 @@ +import QtQuick + +import "controls" + +Item { + //! [0] + id: delegateItem + width: listView.width + height: 80 + clip: true + + required property int index + + // required property string edit + // required property QtObject model + required property string name + required property string description + required property string info + required property int amount + required property real factor + + Rectangle { + id: background + x: 2 + y: 2 + width: parent.width - x * 2 + height: parent.height - y * 2 + color: wccDarkLight + border.color: index === listView.currentIndex ? "blue" : wccDarkDefault + border.width: 3 + radius: 5 + } + + Column { + id: arrows + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + } + Image { + source: "icons/arrow-up.png" + MouseArea { + anchors.fill: parent + // onClicked: fruitModel.move(delegateItem.index, + // delegateItem.index - 1, 1) + } + } + Image { + source: "icons/arrow-down.png" + MouseArea { + anchors.fill: parent + // onClicked: fruitModel.move(delegateItem.index, + // delegateItem.index + 1, 1) + } + } + } + + Column { + anchors { + left: arrows.right + horizontalCenter: parent.horizontalCenter + bottom: parent.verticalCenter + } + + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: delegateItem.name + font.pixelSize: 15 + color: "white" + } + Text { + text: delegateItem.description + color: "White" + } + } + + Item { + anchors { + left: arrows.right + horizontalCenter: parent.horizontalCenter + top: parent.verticalCenter + bottom: parent.bottom + } + + Row { + anchors.centerIn: parent + spacing: 10 + + PressAndHoldButton { + anchors.verticalCenter: parent.verticalCenter + source: "icons/plus-sign.png" + onClicked: delegateItem.factor = delegateItem.factor + 0.25 + } + + Text { + id: factorText + anchors.verticalCenter: parent.verticalCenter + text: 'Factor: ' + Number(delegateItem.factor).toFixed(2) + font.pixelSize: 15 + color: "white" + font.bold: true + } + + PressAndHoldButton { + anchors.verticalCenter: parent.verticalCenter + source: "icons/minus-sign.png" + onClicked: delegateItem.factor = Math.max( + 0, delegateItem.factor - 0.25) + } + + Image { + source: "icons/list-delete.png" + MouseArea { + anchors.fill: parent + onClicked: fruitModel.remove(delegateItem.index) + } + } + } + } + + // Animate adding and removing of items: + //! [1] + SequentialAnimation { + id: addAnimation + PropertyAction { + target: delegateItem + property: "height" + value: 0 + } + NumberAnimation { + target: delegateItem + property: "height" + to: 80 + duration: 250 + easing.type: Easing.InOutQuad + } + } + ListView.onAdd: addAnimation.start() + + SequentialAnimation { + id: removeAnimation + PropertyAction { + target: delegateItem + property: "ListView.delayRemove" + value: true + } + NumberAnimation { + target: delegateItem + property: "height" + to: 0 + duration: 250 + easing.type: Easing.InOutQuad + } + + // Make sure delayRemove is set back to false so that the item can be destroyed + PropertyAction { + target: delegateItem + property: "ListView.delayRemove" + value: false + } + } + ListView.onRemove: removeAnimation.start() +} diff --git a/ExpandableItemDelegate.qml b/ExpandableItemDelegate.qml index aa2e210..a321fe2 100644 --- a/ExpandableItemDelegate.qml +++ b/ExpandableItemDelegate.qml @@ -1,8 +1,7 @@ import QtQuick -import QtQuick.Controls.Material +import QtQuick.Controls import QtQuick.Layouts -//! [0] Item { id: item @@ -95,7 +94,6 @@ Item { bottomMargin: 10 } opacity: item.detailsOpacity - //! [2] Text { id: moreInfoTitle anchors.top: parent.top @@ -213,4 +211,4 @@ Item { } } } -} //! [3] +} diff --git a/ListPage.qml b/ListPage.qml index 6c728ac..81b4f35 100644 --- a/ListPage.qml +++ b/ListPage.qml @@ -12,9 +12,11 @@ Page { clip: true model: mainModel + delegateModelAccess: DelegateModel.ReadWrite // delegate: ListItemDelegate {} - delegate: ExpandableItemDelegate {} + // delegate: ExpandableItemDelegate {} + delegate: EditableItemDelegate {} header: bannercomponent footer: Rectangle { diff --git a/controls/PressAndHoldButton.qml b/controls/PressAndHoldButton.qml new file mode 100644 index 0000000..51ab943 --- /dev/null +++ b/controls/PressAndHoldButton.qml @@ -0,0 +1,45 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +Image { + id: container + + property int repeatDelay: 300 + property int repeatDuration: 75 + property bool pressed + + signal clicked + + scale: pressed ? 0.9 : 1 + + function release() { + autoRepeatClicks.stop() + container.pressed = false + } + + SequentialAnimation on pressed { + id: autoRepeatClicks + running: false + + PropertyAction { target: container; property: "pressed"; value: true } + ScriptAction { script: container.clicked() } + PauseAnimation { duration: container.repeatDelay } + + SequentialAnimation { + loops: Animation.Infinite + ScriptAction { script: container.clicked() } + PauseAnimation { duration: container.repeatDuration } + } + } + + MouseArea { + anchors.fill: parent + + onPressed: autoRepeatClicks.start() + onReleased: container.release() + onCanceled: container.release() + } +} + diff --git a/icons/arrow-down.png b/icons/arrow-down.png new file mode 100644 index 0000000..29d1d44 Binary files /dev/null and b/icons/arrow-down.png differ diff --git a/icons/arrow-up.png b/icons/arrow-up.png new file mode 100644 index 0000000..e437312 Binary files /dev/null and b/icons/arrow-up.png differ diff --git a/icons/list-delete.png b/icons/list-delete.png new file mode 100644 index 0000000..df2a147 Binary files /dev/null and b/icons/list-delete.png differ diff --git a/icons/minus-sign.png b/icons/minus-sign.png new file mode 100644 index 0000000..d6f233d Binary files /dev/null and b/icons/minus-sign.png differ diff --git a/icons/plus-sign.png b/icons/plus-sign.png new file mode 100644 index 0000000..40df113 Binary files /dev/null and b/icons/plus-sign.png differ