2022-04-23 14:32:36 +02:00
|
|
|
import QtQuick
|
|
|
|
import QtQuick.Controls
|
|
|
|
import Qt5Compat.GraphicalEffects
|
|
|
|
import QtQuick.Controls.Material
|
2022-05-05 13:02:54 +02:00
|
|
|
import ScreenPlayApp
|
|
|
|
import ScreenPlay
|
2022-04-23 14:32:36 +02:00
|
|
|
|
|
|
|
Item {
|
|
|
|
id: root
|
|
|
|
|
|
|
|
function getTags() {
|
2023-02-02 15:25:26 +01:00
|
|
|
var array = [];
|
2022-04-23 14:32:36 +02:00
|
|
|
for (var i = 0; i < listModel.count; i++) {
|
2023-02-02 15:25:26 +01:00
|
|
|
array.push(listModel.get(i)._name);
|
2022-04-23 14:32:36 +02:00
|
|
|
}
|
2023-02-02 15:25:26 +01:00
|
|
|
return array;
|
2022-04-23 14:32:36 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
height: 70
|
|
|
|
implicitWidth: 200
|
|
|
|
onStateChanged: {
|
|
|
|
if (root.state === "add") {
|
2023-02-02 15:25:26 +01:00
|
|
|
btnAdd.text = qsTr("Save");
|
|
|
|
textField.focus = true;
|
2022-04-23 14:32:36 +02:00
|
|
|
} else {
|
2023-02-02 15:25:26 +01:00
|
|
|
btnAdd.text = qsTr("Add tag");
|
2022-04-23 14:32:36 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Rectangle {
|
|
|
|
id: rectangle
|
|
|
|
|
2023-02-02 15:25:26 +01:00
|
|
|
color: Material.theme === Material.Light ? Material.background : Qt.darker(Material.background)
|
2022-04-23 14:32:36 +02:00
|
|
|
radius: 3
|
|
|
|
clip: true
|
|
|
|
|
|
|
|
anchors {
|
|
|
|
fill: parent
|
|
|
|
margins: 3
|
|
|
|
}
|
|
|
|
|
|
|
|
ListView {
|
|
|
|
orientation: ListView.Horizontal
|
|
|
|
model: listModel
|
|
|
|
spacing: 10
|
|
|
|
|
|
|
|
anchors {
|
|
|
|
top: parent.top
|
|
|
|
right: btnAdd.left
|
|
|
|
bottom: parent.bottom
|
|
|
|
left: parent.left
|
|
|
|
margins: 10
|
|
|
|
}
|
|
|
|
|
|
|
|
delegate: Tag {
|
|
|
|
id: delegate
|
|
|
|
|
|
|
|
text: _name
|
|
|
|
itemIndex: index
|
|
|
|
|
|
|
|
Connections {
|
|
|
|
function onRemoveThis() {
|
2023-02-02 15:25:26 +01:00
|
|
|
listModel.remove(itemIndex);
|
2022-04-23 14:32:36 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
target: delegate
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ListModel {
|
|
|
|
id: listModel
|
|
|
|
|
|
|
|
onCountChanged: getTags()
|
|
|
|
}
|
|
|
|
|
|
|
|
Rectangle {
|
|
|
|
id: textFieldWrapper
|
|
|
|
|
|
|
|
opacity: 0
|
|
|
|
enabled: false
|
|
|
|
radius: 3
|
|
|
|
height: parent.height - 20
|
|
|
|
width: 200
|
2023-02-02 15:25:26 +01:00
|
|
|
color: Material.theme === Material.Light ? Qt.lighter(Material.background) : Material.background
|
2022-04-23 14:32:36 +02:00
|
|
|
|
|
|
|
anchors {
|
|
|
|
top: parent.top
|
|
|
|
topMargin: -80
|
|
|
|
right: btnCancel.left
|
|
|
|
margins: 10
|
|
|
|
}
|
|
|
|
|
|
|
|
Gradient {
|
|
|
|
GradientStop {
|
|
|
|
position: 0
|
|
|
|
color: "#00000000"
|
|
|
|
}
|
|
|
|
|
|
|
|
GradientStop {
|
|
|
|
position: 1
|
|
|
|
color: "#FF000000"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
TextField {
|
|
|
|
id: textField
|
|
|
|
|
2022-04-30 12:07:54 +02:00
|
|
|
font.family: App.settings.font
|
2022-04-23 14:32:36 +02:00
|
|
|
color: Material.primaryTextColor
|
|
|
|
onTextChanged: {
|
|
|
|
if (textField.length >= 10)
|
2023-02-02 15:25:26 +01:00
|
|
|
textField.text = textField.text;
|
2022-04-23 14:32:36 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
anchors {
|
|
|
|
fill: parent
|
|
|
|
rightMargin: 15
|
|
|
|
leftMargin: 15
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Button {
|
|
|
|
id: btnCancel
|
|
|
|
|
|
|
|
text: qsTr("Cancel")
|
|
|
|
opacity: 0
|
|
|
|
height: parent.height - 20
|
|
|
|
enabled: false
|
|
|
|
Material.accent: Material.color(Material.Red)
|
|
|
|
highlighted: true
|
2022-04-30 12:07:54 +02:00
|
|
|
font.family: App.settings.font
|
2022-04-23 14:32:36 +02:00
|
|
|
onClicked: {
|
2023-02-02 15:25:26 +01:00
|
|
|
root.state = "";
|
|
|
|
textField.clear();
|
2022-04-23 14:32:36 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
anchors {
|
|
|
|
right: btnAdd.left
|
|
|
|
rightMargin: 10
|
|
|
|
verticalCenter: parent.verticalCenter
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Button {
|
|
|
|
id: btnAdd
|
|
|
|
|
|
|
|
text: qsTr("Add Tag")
|
|
|
|
height: parent.height - 20
|
|
|
|
Material.accent: Material.color(Material.LightGreen)
|
|
|
|
highlighted: true
|
2022-04-30 12:07:54 +02:00
|
|
|
font.family: App.settings.font
|
2022-04-23 14:32:36 +02:00
|
|
|
onClicked: {
|
|
|
|
if (root.state === "add") {
|
|
|
|
listModel.append({
|
2023-02-02 15:25:26 +01:00
|
|
|
"_name": textField.text
|
|
|
|
});
|
|
|
|
textField.clear();
|
|
|
|
root.state = "";
|
2022-04-23 14:32:36 +02:00
|
|
|
} else {
|
2023-02-02 15:25:26 +01:00
|
|
|
root.state = "add";
|
2022-04-23 14:32:36 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
anchors {
|
|
|
|
right: parent.right
|
|
|
|
rightMargin: 10
|
|
|
|
verticalCenter: parent.verticalCenter
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
states: [
|
|
|
|
State {
|
|
|
|
name: "add"
|
|
|
|
|
|
|
|
PropertyChanges {
|
|
|
|
target: textFieldWrapper
|
|
|
|
anchors.topMargin: 10
|
|
|
|
opacity: 1
|
|
|
|
enabled: true
|
|
|
|
}
|
|
|
|
|
|
|
|
PropertyChanges {
|
|
|
|
target: btnCancel
|
|
|
|
opacity: 1
|
|
|
|
enabled: true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
transitions: [
|
|
|
|
Transition {
|
|
|
|
from: ""
|
|
|
|
to: "add"
|
|
|
|
reversible: true
|
|
|
|
|
|
|
|
NumberAnimation {
|
|
|
|
properties: "anchors.topMargin, opacity"
|
|
|
|
duration: 200
|
|
|
|
easing.type: Easing.OutQuart
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|