Adding scrollbar to objects list

This commit is contained in:
Adsooi 2022-02-01 17:33:36 +01:00
parent 3f107f1ba4
commit 1b5d0725c8
Signed by: Ad5001
GPG key ID: EF45F9C6AFE20160
3 changed files with 201 additions and 186 deletions

View file

@ -52,7 +52,7 @@ Column {
id: createBtn id: createBtn
width: parent.width/3 width: parent.width/3
visible: Objects.types[modelData].createable() 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. // The KDE SDK is kinda buggy, so it respects neither specified color nor display propreties.
//display: AbstractButton.TextUnderIcon //display: AbstractButton.TextUnderIcon
@ -63,7 +63,7 @@ Column {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: (parent.width-width)/2 anchors.leftMargin: (parent.width-width)/2
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 8 anchors.topMargin: (label.y-height)/2
color: sysPalette.windowText color: sysPalette.windowText
source: '../icons/objects/'+modelData+'.svg' source: '../icons/objects/'+modelData+'.svg'
@ -80,6 +80,7 @@ Column {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
font.pixelSize: 14 font.pixelSize: 14
text: Objects.types[modelData].displayType() text: Objects.types[modelData].displayType()
wrapMode: Text.WordWrap
clip: true clip: true
} }

View file

@ -34,195 +34,211 @@ import "../js/historylib.js" as HistoryLib
\sa LogarithmPlotter, ObjectCreationGrid, ObjectLists \sa LogarithmPlotter, ObjectCreationGrid, ObjectLists
*/ */
ListView { ScrollView {
id: objectListList id: objectListList
signal changed() signal changed()
property var listViews: {'':''} // Needs to be initialized or will be undefined -_- 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 { ScrollBar.horizontal.visible: false
id: objTypeList ScrollBar.vertical.visible: true
property string objType: objectListList.model[index]
property var editingRows: [] ListView {
model: Objects.currentObjects[objType] id: objectsListView
width: objectListList.width model: Object.keys(Objects.types)
implicitHeight: contentItem.childrenRect.height width: implicitWidth //objectListList.width - (implicitHeight > objectListList.parent.height ? 20 : 0)
visible: model != undefined && model.length > 0 implicitHeight: contentItem.childrenRect.height + footer.height + 10
interactive: false
Component.onCompleted: objectListList.listViews[objType] = objTypeList // Listing in order to be refreshed delegate: ListView {
id: objTypeList
header: Row { property string objType: objectsListView.model[index]
width: typeHeaderText.width + typeVisibilityCheckBox.visible property var editingRows: []
height: visible ? 20 : 0 model: Objects.currentObjects[objType]
visible: objTypeList.visible width: objectsListView.width
implicitHeight: contentItem.childrenRect.height
visible: model != undefined && model.length > 0
interactive: false
CheckBox { Component.onCompleted: objectListList.listViews[objType] = objTypeList // Listing in order to be refreshed
id: typeVisibilityCheckBox
checked: Objects.currentObjects[objType] != undefined ? Objects.currentObjects[objType].every(obj => obj.visible) : true header: Row {
onClicked: { width: typeHeaderText.width + typeVisibilityCheckBox.visible
for(var obj of Objects.currentObjects[objType]) obj.visible = this.checked height: visible ? 20 : 0
for(var obj of objTypeList.editingRows) obj.objVisible = this.checked visible: objTypeList.visible
objectListList.changed()
}
ToolTip.visible: hovered CheckBox {
ToolTip.text: checked ? qsTr("Hide all %1").arg(Objects.types[objType].displayTypeMultiple()) : qsTr("Show all %1").arg(Objects.types[objType].displayTypeMultiple()) id: typeVisibilityCheckBox
} checked: Objects.currentObjects[objType] != undefined ? Objects.currentObjects[objType].every(obj => obj.visible) : true
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: { onClicked: {
objEditor.obj = Objects.currentObjects[objType][index] for(var obj of Objects.currentObjects[objType]) obj.visible = this.checked
objEditor.objType = objType for(var obj of objTypeList.editingRows) obj.objVisible = this.checked
objEditor.objIndex = index objectListList.changed()
//objEditor.editingRow = controlRow }
objEditor.show()
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 // Create items
width: parent.height - 10 footer: ObjectCreationGrid {
height: width id: createRow
anchors.right: deleteButton.left width: objectsListView.width
anchors.rightMargin: 5 objectEditor: objEditor
anchors.topMargin: 5 objectLists: objectListList
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()
}
}
} }
} }
@ -231,14 +247,6 @@ ListView {
id: objEditor id: objEditor
} }
// Create items
footer: ObjectCreationGrid {
id: createRow
width: parent.width
objectEditor: objEditor
objectLists: objectListList
}
/*! /*!
\qmlmethod void ObjectLists::update() \qmlmethod void ObjectLists::update()
Updates the view of the ObjectLists. Updates the view of the ObjectLists.

View file

@ -36,13 +36,19 @@ Item {
Path of the icon image source. Path of the icon image source.
*/ */
property alias source: img.source property alias source: img.source
/*!
\qmlproperty string Icon::source
Path of the icon image source.
*/
property alias sourceSize: img.sourceSize.width
Image { Image {
id: img id: img
height: parent.height height: parent.height
width: parent.width width: parent.width
smooth: true //smooth: true
visible: false visible: false
sourceSize.height: sourceSize.width
} }
ColorOverlay { ColorOverlay {
anchors.fill: img anchors.fill: img