Adding scrollbar to objects list
This commit is contained in:
parent
3f107f1ba4
commit
1b5d0725c8
GPG key ID:
EF45F9C6AFE20160
3 changed files with 201 additions and 186 deletions
|
|
@ -52,7 +52,7 @@ Column {
|
|||
id: createBtn
|
||||
width: parent.width/3
|
||||
visible: Objects.types[modelData].createable()
|
||||
height: visible ? width*0.6 : 0
|
||||
height: visible ? width*0.8 : 0
|
||||
// The KDE SDK is kinda buggy, so it respects neither specified color nor display propreties.
|
||||
//display: AbstractButton.TextUnderIcon
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ Column {
|
|||
anchors.left: parent.left
|
||||
anchors.leftMargin: (parent.width-width)/2
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 8
|
||||
anchors.topMargin: (label.y-height)/2
|
||||
|
||||
color: sysPalette.windowText
|
||||
source: '../icons/objects/'+modelData+'.svg'
|
||||
|
|
@ -80,6 +80,7 @@ Column {
|
|||
horizontalAlignment: Text.AlignHCenter
|
||||
font.pixelSize: 14
|
||||
text: Objects.types[modelData].displayType()
|
||||
wrapMode: Text.WordWrap
|
||||
clip: true
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,195 +34,211 @@ import "../js/historylib.js" as HistoryLib
|
|||
|
||||
\sa LogarithmPlotter, ObjectCreationGrid, ObjectLists
|
||||
*/
|
||||
ListView {
|
||||
ScrollView {
|
||||
id: objectListList
|
||||
|
||||
signal changed()
|
||||
|
||||
property var listViews: {'':''} // Needs to be initialized or will be undefined -_-
|
||||
|
||||
model: Object.keys(Objects.types)
|
||||
implicitHeight: contentItem.childrenRect.height + footer.height + 10
|
||||
|
||||
delegate: ListView {
|
||||
id: objTypeList
|
||||
property string objType: objectListList.model[index]
|
||||
property var editingRows: []
|
||||
model: Objects.currentObjects[objType]
|
||||
width: objectListList.width
|
||||
implicitHeight: contentItem.childrenRect.height
|
||||
visible: model != undefined && model.length > 0
|
||||
interactive: false
|
||||
ScrollBar.horizontal.visible: false
|
||||
ScrollBar.vertical.visible: true
|
||||
|
||||
Component.onCompleted: objectListList.listViews[objType] = objTypeList // Listing in order to be refreshed
|
||||
ListView {
|
||||
id: objectsListView
|
||||
model: Object.keys(Objects.types)
|
||||
width: implicitWidth //objectListList.width - (implicitHeight > objectListList.parent.height ? 20 : 0)
|
||||
implicitHeight: contentItem.childrenRect.height + footer.height + 10
|
||||
|
||||
header: Row {
|
||||
width: typeHeaderText.width + typeVisibilityCheckBox.visible
|
||||
height: visible ? 20 : 0
|
||||
visible: objTypeList.visible
|
||||
delegate: ListView {
|
||||
id: objTypeList
|
||||
property string objType: objectsListView.model[index]
|
||||
property var editingRows: []
|
||||
model: Objects.currentObjects[objType]
|
||||
width: objectsListView.width
|
||||
implicitHeight: contentItem.childrenRect.height
|
||||
visible: model != undefined && model.length > 0
|
||||
interactive: false
|
||||
|
||||
CheckBox {
|
||||
id: typeVisibilityCheckBox
|
||||
checked: Objects.currentObjects[objType] != undefined ? Objects.currentObjects[objType].every(obj => obj.visible) : true
|
||||
onClicked: {
|
||||
for(var obj of Objects.currentObjects[objType]) obj.visible = this.checked
|
||||
for(var obj of objTypeList.editingRows) obj.objVisible = this.checked
|
||||
objectListList.changed()
|
||||
}
|
||||
Component.onCompleted: objectListList.listViews[objType] = objTypeList // Listing in order to be refreshed
|
||||
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: checked ? qsTr("Hide all %1").arg(Objects.types[objType].displayTypeMultiple()) : qsTr("Show all %1").arg(Objects.types[objType].displayTypeMultiple())
|
||||
}
|
||||
header: Row {
|
||||
width: typeHeaderText.width + typeVisibilityCheckBox.visible
|
||||
height: visible ? 20 : 0
|
||||
visible: objTypeList.visible
|
||||
|
||||
Label {
|
||||
id: typeHeaderText
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
text: qsTranslate("control", "%1: ").arg(Objects.types[objType].displayTypeMultiple())
|
||||
font.pixelSize: 20
|
||||
}
|
||||
}
|
||||
|
||||
delegate: Item {
|
||||
id: controlRow
|
||||
property var obj: Objects.currentObjects[objType][index]
|
||||
property alias objVisible: objVisibilityCheckBox.checked
|
||||
height: 40
|
||||
width: objTypeList.width
|
||||
|
||||
Component.onCompleted: objTypeList.editingRows.push(controlRow)
|
||||
|
||||
CheckBox {
|
||||
id: objVisibilityCheckBox
|
||||
checked: Objects.currentObjects[objType][index].visible
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 5
|
||||
onClicked: {
|
||||
history.addToHistory(new HistoryLib.EditedVisibility(
|
||||
Objects.currentObjects[objType][index].name, objType, this.checked
|
||||
))
|
||||
Objects.currentObjects[objType][index].visible = this.checked
|
||||
objectListList.changed()
|
||||
controlRow.obj = Objects.currentObjects[objType][index]
|
||||
}
|
||||
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: checked ?
|
||||
qsTr("Hide %1 %2").arg(Objects.types[objType].displayType()).arg(obj.name) :
|
||||
qsTr("Show %1 %2").arg(Objects.types[objType].displayType()).arg(obj.name)
|
||||
}
|
||||
|
||||
Label {
|
||||
id: objDescription
|
||||
anchors.left: objVisibilityCheckBox.right
|
||||
anchors.right: deleteButton.left
|
||||
height: parent.height
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
text: obj.getReadableString()
|
||||
font.pixelSize: 14
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
CheckBox {
|
||||
id: typeVisibilityCheckBox
|
||||
checked: Objects.currentObjects[objType] != undefined ? Objects.currentObjects[objType].every(obj => obj.visible) : true
|
||||
onClicked: {
|
||||
objEditor.obj = Objects.currentObjects[objType][index]
|
||||
objEditor.objType = objType
|
||||
objEditor.objIndex = index
|
||||
//objEditor.editingRow = controlRow
|
||||
objEditor.show()
|
||||
for(var obj of Objects.currentObjects[objType]) obj.visible = this.checked
|
||||
for(var obj of objTypeList.editingRows) obj.objVisible = this.checked
|
||||
objectListList.changed()
|
||||
}
|
||||
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: checked ? qsTr("Hide all %1").arg(Objects.types[objType].displayTypeMultiple()) : qsTr("Show all %1").arg(Objects.types[objType].displayTypeMultiple())
|
||||
}
|
||||
|
||||
Label {
|
||||
id: typeHeaderText
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
text: qsTranslate("control", "%1: ").arg(Objects.types[objType].displayTypeMultiple())
|
||||
font.pixelSize: 20
|
||||
}
|
||||
}
|
||||
|
||||
delegate: Item {
|
||||
id: controlRow
|
||||
property var obj: Objects.currentObjects[objType][index]
|
||||
property alias objVisible: objVisibilityCheckBox.checked
|
||||
height: 40
|
||||
width: objTypeList.width
|
||||
|
||||
Component.onCompleted: objTypeList.editingRows.push(controlRow)
|
||||
|
||||
CheckBox {
|
||||
id: objVisibilityCheckBox
|
||||
checked: Objects.currentObjects[objType][index].visible
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 5
|
||||
onClicked: {
|
||||
history.addToHistory(new HistoryLib.EditedVisibility(
|
||||
Objects.currentObjects[objType][index].name, objType, this.checked
|
||||
))
|
||||
Objects.currentObjects[objType][index].visible = this.checked
|
||||
objectListList.changed()
|
||||
controlRow.obj = Objects.currentObjects[objType][index]
|
||||
}
|
||||
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: checked ?
|
||||
qsTr("Hide %1 %2").arg(Objects.types[objType].displayType()).arg(obj.name) :
|
||||
qsTr("Show %1 %2").arg(Objects.types[objType].displayType()).arg(obj.name)
|
||||
}
|
||||
|
||||
Label {
|
||||
id: objDescription
|
||||
anchors.left: objVisibilityCheckBox.right
|
||||
anchors.right: deleteButton.left
|
||||
height: parent.height
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
text: obj.getReadableString()
|
||||
font.pixelSize: 14
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
objEditor.obj = Objects.currentObjects[objType][index]
|
||||
objEditor.objType = objType
|
||||
objEditor.objIndex = index
|
||||
//objEditor.editingRow = controlRow
|
||||
objEditor.show()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
id: pointerButton
|
||||
width: parent.height - 10
|
||||
height: width
|
||||
anchors.right: deleteButton.left
|
||||
anchors.rightMargin: 5
|
||||
anchors.topMargin: 5
|
||||
|
||||
Setting.Icon {
|
||||
id: icon
|
||||
width: 18
|
||||
height: 18
|
||||
anchors.centerIn: parent
|
||||
|
||||
color: sysPalette.windowText
|
||||
source: '../icons/common/position.svg'
|
||||
}
|
||||
|
||||
property bool hasXProp: Objects.types[objType].properties().hasOwnProperty('x')
|
||||
property bool hasYProp: Objects.types[objType].properties().hasOwnProperty('y')
|
||||
visible: hasXProp || hasYProp
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: qsTr("Set %1 %2 position").arg(Objects.types[objType].displayType()).arg(obj.name)
|
||||
|
||||
onClicked: {
|
||||
positionPicker.objType = objType
|
||||
positionPicker.objName = obj.name
|
||||
positionPicker.pickX = hasXProp
|
||||
positionPicker.pickY = hasYProp
|
||||
positionPicker.propertyX = 'x'
|
||||
positionPicker.propertyY = 'y'
|
||||
positionPicker.visible = true
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
id: deleteButton
|
||||
width: parent.height - 10
|
||||
height: width
|
||||
anchors.right: colorPickRect.left
|
||||
anchors.rightMargin: 5
|
||||
anchors.topMargin: 5
|
||||
icon.name: 'delete'
|
||||
icon.source: '../icons/common/delete.svg'
|
||||
icon.color: sysPalette.buttonText
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: qsTr("Delete %1 %2").arg(Objects.types[objType].displayType()).arg(obj.name)
|
||||
|
||||
onClicked: {
|
||||
history.addToHistory(new HistoryLib.DeleteObject(
|
||||
obj.name, objType, obj.export()
|
||||
))
|
||||
Objects.currentObjects[objType][index].delete()
|
||||
Objects.currentObjects[objType].splice(index, 1)
|
||||
objectListList.update()
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: colorPickRect
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 5
|
||||
anchors.topMargin: 5
|
||||
color: obj.color
|
||||
width: parent.height - 10
|
||||
height: width
|
||||
radius: Math.min(width, height)
|
||||
border.width: 2
|
||||
border.color: sysPalette.windowText
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: pickColor.open()
|
||||
}
|
||||
}
|
||||
|
||||
D.ColorDialog {
|
||||
id: pickColor
|
||||
color: obj.color
|
||||
title: qsTr("Pick new color for %1 %2").arg(Objects.types[objType].displayType()).arg(obj.name)
|
||||
onAccepted: {
|
||||
history.addToHistory(new HistoryLib.ColorChanged(
|
||||
obj.name, objType, obj.color, color.toString()
|
||||
))
|
||||
obj.color = color.toString()
|
||||
controlRow.obj = Objects.currentObjects[objType][index]
|
||||
objectListList.update()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
id: pointerButton
|
||||
width: parent.height - 10
|
||||
height: width
|
||||
anchors.right: deleteButton.left
|
||||
anchors.rightMargin: 5
|
||||
anchors.topMargin: 5
|
||||
|
||||
Setting.Icon {
|
||||
id: icon
|
||||
width: 18
|
||||
height: 18
|
||||
anchors.centerIn: parent
|
||||
|
||||
color: sysPalette.windowText
|
||||
source: '../icons/common/position.svg'
|
||||
}
|
||||
|
||||
property bool hasXProp: Objects.types[objType].properties().hasOwnProperty('x')
|
||||
property bool hasYProp: Objects.types[objType].properties().hasOwnProperty('y')
|
||||
visible: hasXProp || hasYProp
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: qsTr("Set %1 %2 position").arg(Objects.types[objType].displayType()).arg(obj.name)
|
||||
|
||||
onClicked: {
|
||||
positionPicker.objType = objType
|
||||
positionPicker.objName = obj.name
|
||||
positionPicker.pickX = hasXProp
|
||||
positionPicker.pickY = hasYProp
|
||||
positionPicker.propertyX = 'x'
|
||||
positionPicker.propertyY = 'y'
|
||||
positionPicker.visible = true
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
id: deleteButton
|
||||
width: parent.height - 10
|
||||
height: width
|
||||
anchors.right: colorPickRect.left
|
||||
anchors.rightMargin: 5
|
||||
anchors.topMargin: 5
|
||||
icon.name: 'delete'
|
||||
icon.source: '../icons/common/delete.svg'
|
||||
icon.color: sysPalette.buttonText
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: qsTr("Delete %1 %2").arg(Objects.types[objType].displayType()).arg(obj.name)
|
||||
|
||||
onClicked: {
|
||||
history.addToHistory(new HistoryLib.DeleteObject(
|
||||
obj.name, objType, obj.export()
|
||||
))
|
||||
Objects.currentObjects[objType][index].delete()
|
||||
Objects.currentObjects[objType].splice(index, 1)
|
||||
objectListList.update()
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: colorPickRect
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 5
|
||||
anchors.topMargin: 5
|
||||
color: obj.color
|
||||
width: parent.height - 10
|
||||
height: width
|
||||
radius: Math.min(width, height)
|
||||
border.width: 2
|
||||
border.color: sysPalette.windowText
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: pickColor.open()
|
||||
}
|
||||
}
|
||||
|
||||
D.ColorDialog {
|
||||
id: pickColor
|
||||
color: obj.color
|
||||
title: qsTr("Pick new color for %1 %2").arg(Objects.types[objType].displayType()).arg(obj.name)
|
||||
onAccepted: {
|
||||
history.addToHistory(new HistoryLib.ColorChanged(
|
||||
obj.name, objType, obj.color, color.toString()
|
||||
))
|
||||
obj.color = color.toString()
|
||||
controlRow.obj = Objects.currentObjects[objType][index]
|
||||
objectListList.update()
|
||||
}
|
||||
}
|
||||
// Create items
|
||||
footer: ObjectCreationGrid {
|
||||
id: createRow
|
||||
width: objectsListView.width
|
||||
objectEditor: objEditor
|
||||
objectLists: objectListList
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -231,14 +247,6 @@ ListView {
|
|||
id: objEditor
|
||||
}
|
||||
|
||||
// Create items
|
||||
footer: ObjectCreationGrid {
|
||||
id: createRow
|
||||
width: parent.width
|
||||
objectEditor: objEditor
|
||||
objectLists: objectListList
|
||||
}
|
||||
|
||||
/*!
|
||||
\qmlmethod void ObjectLists::update()
|
||||
Updates the view of the ObjectLists.
|
||||
|
|
|
|||
|
|
@ -36,13 +36,19 @@ Item {
|
|||
Path of the icon image source.
|
||||
*/
|
||||
property alias source: img.source
|
||||
/*!
|
||||
\qmlproperty string Icon::source
|
||||
Path of the icon image source.
|
||||
*/
|
||||
property alias sourceSize: img.sourceSize.width
|
||||
|
||||
Image {
|
||||
id: img
|
||||
height: parent.height
|
||||
width: parent.width
|
||||
smooth: true
|
||||
//smooth: true
|
||||
visible: false
|
||||
sourceSize.height: sourceSize.width
|
||||
}
|
||||
ColorOverlay {
|
||||
anchors.fill: img
|
||||
|
|
|
|||
Loading…
Reference in a new issue