|
@ -28,22 +28,20 @@ import QtGraphicalEffects 1.0 |
|
|
Rectangle { |
|
|
Rectangle { |
|
|
id: statesComboBox |
|
|
id: statesComboBox |
|
|
|
|
|
|
|
|
width: 200; |
|
|
width: 200 |
|
|
height: 20; |
|
|
height: 20 |
|
|
|
|
|
|
|
|
Component.onCompleted: |
|
|
Component.onCompleted: { |
|
|
{ |
|
|
var top = dropDownList |
|
|
var top = dropDownList; |
|
|
while (top.parent) { |
|
|
while (top.parent) |
|
|
|
|
|
{ |
|
|
|
|
|
top = top.parent |
|
|
top = top.parent |
|
|
if (top.objectName == "debugPanel") |
|
|
if (top.objectName == "debugPanel") |
|
|
break; |
|
|
break |
|
|
} |
|
|
} |
|
|
var coordinates = dropDownList.mapToItem(top, 0, 0) |
|
|
var coordinates = dropDownList.mapToItem(top, 0, 0) |
|
|
//the order is important |
|
|
//the order is important |
|
|
dropDownShowdowList.parent = top; |
|
|
dropDownShowdowList.parent = top |
|
|
dropDownList.parent = top; |
|
|
dropDownList.parent = top |
|
|
|
|
|
|
|
|
dropDownShowdowList.x = coordinates.x |
|
|
dropDownShowdowList.x = coordinates.x |
|
|
dropDownShowdowList.y = coordinates.y |
|
|
dropDownShowdowList.y = coordinates.y |
|
@ -52,187 +50,196 @@ Rectangle { |
|
|
dropDownList.y = coordinates.y |
|
|
dropDownList.y = coordinates.y |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
signal selectItem(real item); |
|
|
signal selectItem(real item) |
|
|
signal editItem(real item); |
|
|
signal editItem(real item) |
|
|
signal selectCreate(); |
|
|
signal selectCreate |
|
|
property variant rowHeight:25; |
|
|
property variant rowHeight: 25 |
|
|
property variant items; |
|
|
property variant items |
|
|
readonly property alias selectedItem: chosenItemText.text; |
|
|
property alias selectedItem: chosenItemText.text |
|
|
readonly property alias selectedIndex: listView.currentRow; |
|
|
property alias selectedIndex: listView.currentRow |
|
|
function setSelectedIndex(index) |
|
|
function setSelectedIndex(index) { |
|
|
{ |
|
|
listView.currentRow = index |
|
|
listView.currentRow = index; |
|
|
chosenItemText.text = statesComboBox.items.get(index).title |
|
|
chosenItemText.text = statesComboBox.items.get(0).title; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
signal comboClicked; |
|
|
signal comboClicked |
|
|
|
|
|
|
|
|
property variant colorItem; |
|
|
property variant colorItem |
|
|
property variant colorSelect; |
|
|
property variant colorSelect |
|
|
|
|
|
|
|
|
smooth:true; |
|
|
smooth: true |
|
|
Rectangle { |
|
|
Rectangle { |
|
|
id: chosenItem |
|
|
id: chosenItem |
|
|
width: parent.width; |
|
|
width: parent.width |
|
|
height: statesComboBox.height; |
|
|
height: statesComboBox.height |
|
|
color: statesComboBox.color; |
|
|
color: statesComboBox.color |
|
|
smooth: true; |
|
|
smooth: true |
|
|
Text { |
|
|
Text { |
|
|
id: chosenItemText |
|
|
id: chosenItemText |
|
|
anchors.top: parent.top; |
|
|
anchors.top: parent.top |
|
|
anchors.left: parent.left; |
|
|
anchors.left: parent.left |
|
|
anchors.margins: 2; |
|
|
anchors.margins: 2 |
|
|
color: statesComboBox.colorItem; |
|
|
color: statesComboBox.colorItem |
|
|
text: "" |
|
|
text: "" |
|
|
smooth: true |
|
|
smooth: true |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
MouseArea { |
|
|
MouseArea { |
|
|
anchors.fill: parent; |
|
|
anchors.fill: parent |
|
|
onClicked: { |
|
|
onClicked: { |
|
|
statesComboBox.state = statesComboBox.state==="dropDown"?"":"dropDown" |
|
|
statesComboBox.state = statesComboBox.state === "dropDown" ? "" : "dropDown" |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
Rectangle { |
|
|
Rectangle { |
|
|
id: dropDownShowdowList |
|
|
id: dropDownShowdowList |
|
|
width: statesComboBox.width; |
|
|
width: statesComboBox.width |
|
|
opacity: 0.3 |
|
|
opacity: 0.3 |
|
|
height: 0; |
|
|
height: 0 |
|
|
clip: true; |
|
|
clip: true |
|
|
radius: 4; |
|
|
radius: 4 |
|
|
anchors.top: chosenItem.top; |
|
|
anchors.top: chosenItem.top |
|
|
anchors.margins: 2; |
|
|
anchors.margins: 2 |
|
|
color: "gray" |
|
|
color: "gray" |
|
|
} |
|
|
} |
|
|
//ToDo: We need scrollbar for items |
|
|
//ToDo: We need scrollbar for items |
|
|
Rectangle { |
|
|
Rectangle { |
|
|
id: dropDownList |
|
|
id: dropDownList |
|
|
width: statesComboBox.width; |
|
|
width: statesComboBox.width |
|
|
height: 0; |
|
|
height: 0 |
|
|
clip: true; |
|
|
clip: true |
|
|
radius: 4; |
|
|
radius: 4 |
|
|
anchors.top: chosenItem.top; |
|
|
anchors.top: chosenItem.top |
|
|
anchors.margins: 2; |
|
|
anchors.margins: 2 |
|
|
color: statesComboBox.color |
|
|
color: statesComboBox.color |
|
|
|
|
|
|
|
|
ColumnLayout { |
|
|
ColumnLayout { |
|
|
spacing: 2 |
|
|
spacing: 2 |
|
|
TableView { |
|
|
TableView { |
|
|
id: listView |
|
|
id: listView |
|
|
height: 20; |
|
|
height: 20 |
|
|
implicitHeight: 0 |
|
|
implicitHeight: 0 |
|
|
width: statesComboBox.width; |
|
|
width: statesComboBox.width |
|
|
model: statesComboBox.items |
|
|
model: statesComboBox.items |
|
|
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff; |
|
|
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff |
|
|
currentRow: -1 |
|
|
currentRow: -1 |
|
|
headerVisible: false; |
|
|
headerVisible: false |
|
|
backgroundVisible: false |
|
|
backgroundVisible: false |
|
|
alternatingRowColors : false; |
|
|
alternatingRowColors: false |
|
|
frameVisible: false |
|
|
frameVisible: false |
|
|
|
|
|
|
|
|
TableViewColumn { |
|
|
TableViewColumn { |
|
|
role: "title" |
|
|
role: "title" |
|
|
title: "" |
|
|
title: "" |
|
|
width: statesComboBox.width; |
|
|
width: statesComboBox.width |
|
|
delegate: mainItemDelegate |
|
|
delegate: mainItemDelegate |
|
|
} |
|
|
} |
|
|
rowDelegate: Rectangle { |
|
|
rowDelegate: Rectangle { |
|
|
width: statesComboBox.width; |
|
|
width: statesComboBox.width |
|
|
height: statesComboBox.rowHeight; |
|
|
height: statesComboBox.rowHeight |
|
|
} |
|
|
} |
|
|
Component { |
|
|
Component { |
|
|
id: mainItemDelegate |
|
|
id: mainItemDelegate |
|
|
Rectangle { |
|
|
Rectangle { |
|
|
id: itemDelegate |
|
|
id: itemDelegate |
|
|
width: statesComboBox.width; |
|
|
width: statesComboBox.width |
|
|
height: statesComboBox.height; |
|
|
height: statesComboBox.height |
|
|
Text { |
|
|
Text { |
|
|
id: textItemid |
|
|
id: textItemid |
|
|
text: styleData.value |
|
|
text: styleData.value |
|
|
color: statesComboBox.colorItem; |
|
|
color: statesComboBox.colorItem |
|
|
anchors.top: parent.top; |
|
|
anchors.top: parent.top |
|
|
anchors.left: parent.left; |
|
|
anchors.left: parent.left |
|
|
anchors.margins: 5; |
|
|
anchors.margins: 5 |
|
|
} |
|
|
} |
|
|
Image { |
|
|
Image { |
|
|
id: imageItemid |
|
|
id: imageItemid |
|
|
height: 20 |
|
|
height: 20 |
|
|
width: 20; |
|
|
width: 20 |
|
|
anchors.right: parent.right |
|
|
anchors.right: parent.right |
|
|
anchors.top: parent.top; |
|
|
anchors.top: parent.top |
|
|
anchors.margins: 5; |
|
|
anchors.margins: 5 |
|
|
visible: false; |
|
|
visible: false |
|
|
fillMode: Image.PreserveAspectFit |
|
|
fillMode: Image.PreserveAspectFit |
|
|
source: "img/edit_combox.png" |
|
|
source: "img/edit_combox.png" |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
MouseArea { |
|
|
MouseArea { |
|
|
anchors.fill: parent; |
|
|
anchors.fill: parent |
|
|
hoverEnabled : true |
|
|
hoverEnabled: true |
|
|
|
|
|
|
|
|
onEntered: { |
|
|
onEntered: { |
|
|
imageItemid.visible = true; |
|
|
imageItemid.visible = true |
|
|
textItemid.color = statesComboBox.colorSelect; |
|
|
textItemid.color = statesComboBox.colorSelect |
|
|
} |
|
|
} |
|
|
onExited: { |
|
|
onExited: { |
|
|
imageItemid.visible = false; |
|
|
imageItemid.visible = false |
|
|
textItemid.color = statesComboBox.colorItem; |
|
|
textItemid.color = statesComboBox.colorItem |
|
|
} |
|
|
} |
|
|
onClicked: { |
|
|
onClicked: { |
|
|
if (mouseX > imageItemid.x && mouseX < imageItemid.x+ imageItemid.width |
|
|
if (mouseX > imageItemid.x |
|
|
&& mouseY > imageItemid.y && mouseY < imageItemid.y+ imageItemid.height) |
|
|
&& mouseX < imageItemid.x + imageItemid.width |
|
|
statesComboBox.editItem(styleData.row); |
|
|
&& mouseY > imageItemid.y |
|
|
|
|
|
&& mouseY < imageItemid.y + imageItemid.height) |
|
|
|
|
|
statesComboBox.editItem(styleData.row) |
|
|
else { |
|
|
else { |
|
|
statesComboBox.state = "" |
|
|
statesComboBox.state = "" |
|
|
var prevSelection = chosenItemText.text |
|
|
var prevSelection = chosenItemText.text |
|
|
chosenItemText.text = styleData.value |
|
|
chosenItemText.text = styleData.value |
|
|
listView.currentRow = styleData.row; |
|
|
listView.currentRow = styleData.row |
|
|
statesComboBox.selectItem(styleData.row); |
|
|
statesComboBox.selectItem(styleData.row) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}//Item |
|
|
} //Item |
|
|
}//Component |
|
|
} //Component |
|
|
}//Table View |
|
|
} //Table View |
|
|
|
|
|
|
|
|
RowLayout { |
|
|
RowLayout { |
|
|
Rectangle { |
|
|
Rectangle { |
|
|
width: 1 |
|
|
width: 1 |
|
|
} |
|
|
} |
|
|
Text{ |
|
|
Text { |
|
|
id: createStateText |
|
|
id: createStateText |
|
|
width: statesComboBox.width; |
|
|
width: statesComboBox.width |
|
|
height: statesComboBox.height; |
|
|
height: statesComboBox.height |
|
|
font.bold: true |
|
|
font.bold: true |
|
|
text: "Create State ..." |
|
|
text: qsTr("Create State ...") |
|
|
MouseArea |
|
|
MouseArea { |
|
|
{ |
|
|
anchors.fill: parent |
|
|
anchors.fill: parent; |
|
|
|
|
|
hoverEnabled: true |
|
|
hoverEnabled: true |
|
|
|
|
|
|
|
|
onEntered: { |
|
|
onEntered: { |
|
|
createStateText.color = statesComboBox.colorSelect; |
|
|
createStateText.color = statesComboBox.colorSelect |
|
|
} |
|
|
} |
|
|
onExited: { |
|
|
onExited: { |
|
|
createStateText.color = statesComboBox.colorItem; |
|
|
createStateText.color = statesComboBox.colorItem |
|
|
} |
|
|
} |
|
|
onClicked: { |
|
|
onClicked: { |
|
|
statesComboBox.state = "" |
|
|
statesComboBox.state = "" |
|
|
statesComboBox.selectCreate(); |
|
|
statesComboBox.selectCreate() |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
states: State { |
|
|
states: State { |
|
|
name: "dropDown"; |
|
|
name: "dropDown" |
|
|
PropertyChanges { target: dropDownList; height: (statesComboBox.rowHeight*(statesComboBox.items.count+1)) } |
|
|
PropertyChanges { |
|
|
PropertyChanges { target: dropDownShowdowList; width: statesComboBox.width+3; height: (statesComboBox.rowHeight*(statesComboBox.items.count+1))+3 } |
|
|
target: dropDownList |
|
|
PropertyChanges { target: listView; height: 20; implicitHeight: (statesComboBox.rowHeight*(statesComboBox.items.count)) } |
|
|
height: (statesComboBox.rowHeight * (statesComboBox.items.count + 1)) |
|
|
|
|
|
} |
|
|
|
|
|
PropertyChanges { |
|
|
|
|
|
target: dropDownShowdowList |
|
|
|
|
|
width: statesComboBox.width + 3 |
|
|
|
|
|
height: (statesComboBox.rowHeight * (statesComboBox.items.count + 1)) + 3 |
|
|
|
|
|
} |
|
|
|
|
|
PropertyChanges { |
|
|
|
|
|
target: listView |
|
|
|
|
|
height: 20 |
|
|
|
|
|
implicitHeight: (statesComboBox.rowHeight * (statesComboBox.items.count)) |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|