Use of reapeater for Section as well.

mix/qml/FilesSection.qml

@@ -12,7 +12,6 @@ ColumnLayout {
 	property alias model: filesList.model
 	property string sectionName;
 	property variant selManager;
-	property variant projectModel;
 	Layout.fillWidth: true
 	Layout.minimumHeight: hiddenHeightTopLevel()
 	height: hiddenHeightTopLevel()
@@ -34,23 +33,51 @@ ColumnLayout {
 		return section.state === "hidden" ? 0 : Style.documentsList.height;
 	}
 
+	function getDocumentIndex(documentId)
+	{
+		for (var i = 0; i < model.count; i++)
+			if (model.get(i).documentId === documentId)
+				return i;
+		return -1;
+	}
+
+	function removeDocument(documentId)
+	{
+		var i = getDocumentIndex(documentId);
+		if (i !== -1)
+			model.remove(i);
+	}
+
 	RowLayout
 	{
 		anchors.top: parent.top
 		id: rowCol
 		width: parent.width
 		height: Style.documentsList.height
+
+		Image {
+			source: "qrc:/qml/img/opentriangleindicator.png"
+			width: 15
+			sourceSize.width: 15
+			id: imgArrow
+			anchors.right: section.left
+			anchors.rightMargin: 5
+		}
+
 		Text
 		{
 			id: section
 			text: sectionName
 			anchors.left: parent.left
 			anchors.leftMargin: Style.general.leftMargin
+			color: Style.documentsList.sectionColor
+			font.bold: true
 			states: [
 				State {
 					name: "hidden"
 					PropertyChanges { target: filesList; visible: false; }
 					PropertyChanges { target: rowCol; Layout.minimumHeight: Style.documentsList.height; Layout.maximumHeight: Style.documentsList.height; height: Style.documentsList.height; }
+					PropertyChanges { target: imgArrow; source: "qrc:/qml/img/closedtriangleindicator.png" }
 				}
 			]
 		}
@@ -76,6 +103,7 @@ ColumnLayout {
 		Layout.maximumHeight: wrapperItem.hiddenHeightRepeater()
 		width: parent.width
 		visible: section.state !== "hidden"
+		spacing: 0
 		Repeater
 		{
 			id: filesList
@@ -100,8 +128,9 @@ ColumnLayout {
 					text: name;
 					font.pointSize: Style.documentsList.fontSize
 					anchors.verticalCenter: parent.verticalCenter
+					verticalAlignment:  Text.AlignVCenter
 					anchors.left: parent.left
-					anchors.leftMargin: Style.general.leftMargin
+					anchors.leftMargin: Style.general.leftMargin + 2
 					width: parent.width
 					Connections
 					{
@@ -154,8 +183,9 @@ ColumnLayout {
 						rootItem.renameMode = false;
 						if (accept)
 						{
+							var i = getDocumentIndex(documentId);
 							projectModel.renameDocument(documentId, textInput.text);
-							nameText.text = textInput.text;
+							wrapperItem.model.set(i, projectModel.getDocument(documentId));
 						}
 					}
 				}
@@ -190,6 +220,7 @@ ColumnLayout {
 						text: qsTr("Delete")
 						onTriggered: {
 							projectModel.removeDocument(documentId);
+							wrapperItem.removeDocument(documentId);
 						}
 					}
 				}

mix/qml/ProjectList.qml

@@ -35,10 +35,7 @@ Item {
 			color: Style.documentsList.background
 		}
 
-		Item {
-			id: selManager
-			signal selected(string doc, string groupName)
-		}
+
 
 		Rectangle
 		{
@@ -50,127 +47,62 @@ Item {
 			{
 				anchors.top: parent.top
 				width: parent.width
-				FilesSection
-				{
-					sectionName: "Contracts"
-					projectModel: projectModelConnection
-					model: ctrModel
-					selManager: selManager
-					onDocumentSelected: {
-						selManager.selected(doc, groupName);
-					}
-				}
-
-				ListModel
-				{
-					id: ctrModel
-				}
-
-				FilesSection
-				{
-					id: javascriptSection
-					sectionName: "Javascript"
-					projectModel: projectModelConnection
-					model: javascriptModel
-					selManager: selManager
-					onDocumentSelected: {
-						selManager.selected(doc, groupName);
-					}
-				}
-
-				ListModel
-				{
-					id: javascriptModel
-				}
-
-				FilesSection
-				{
-					id: htmlSection
-					sectionName: "HTML"
-					projectModel: projectModelConnection
-					model: htmlModel
-					selManager: selManager
-					onDocumentSelected: {
-						selManager.selected(doc, groupName);
-					}
-				}
-
-				ListModel
-				{
-					id: htmlModel
-				}
-
-				FilesSection
-				{
-					id: stylesSection
-					sectionName: "Styles"
-					model: styleModel
-					projectModel: projectModelConnection
-					selManager: selManager
-					onDocumentSelected: {
-						selManager.selected(doc, groupName);
-					}
-				}
-
-				ListModel
-				{
-					id: styleModel
-				}
-
-				FilesSection
-				{
-					id: imgSection
-					projectModel: projectModelConnection
-					sectionName: "Images"
-					model: imgModel
-					selManager: selManager
-					onDocumentSelected: {
-						selManager.selected(doc, groupName);
+				spacing: 0
+
+				Repeater {
+					model: ["Contracts", "Javascript", "HTML", "Styles", "Images"]
+					signal selected(string doc, string groupName)
+					id: sectionRepeater
+					FilesSection
+					{
+						sectionName: modelData
+						model: sectionModel
+						selManager: sectionRepeater
+
+						onDocumentSelected: {
+							selManager.selected(doc, groupName);
+						}
+
+						ListModel
+						{
+							id: sectionModel
+						}
+
+						Connections {
+							id: projectModelConnection
+							target: projectModel
+
+							function addDocToSubModel()
+							{
+								for (var k = 0; k < projectModel.listModel.count; k++)
+								{
+									var item = projectModel.listModel.get(k);
+									if (item.groupName === modelData)
+										sectionModel.append(item);
+								}
+							}
+
+							onProjectLoaded: {
+								addDocToSubModel();
+								if (modelData === "Contracts")
+								{
+									var selItem = projectModel.listModel.get(0);
+									projectModel.openDocument(selItem.documentId);
+									sectionRepeater.selected(selItem.documentId, modelData);
+								}
+							}
+
+							onDocumentAdded:
+							{
+								var newDoc = projectModel.getDocumentIndex(documentId);
+								if (newDoc.groupName === modelData)
+									ctrModel.append(newDoc);
+							}
+						}
 					}
 				}
-
-				ListModel
-				{
-					id: imgModel
-				}
 			}
 		}
 	}
-
-	Connections {
-		id: projectModelConnection
-		signal projectFilesLoaded;
-		target: projectModel
-		function addDocToSubModel(index)
-		{
-			var item = projectModel.listModel.get(index);
-			if (item.groupName === "Contracts")
-				ctrModel.append(item);
-			else if (item.groupName === "HTML")
-				htmlModel.append(item)
-			else if (item.groupName === "Javascript")
-				javascriptModel.append(item)
-			else if (item.groupName === "Images")
-				imagesModel.append(item)
-			else if (item.groupName === "Styles")
-				stylesModel.append(item)
-		}
-
-		onProjectLoaded: {
-			projectModel.openDocument(projectModel.listModel.get(0).documentId);
-			ctrModel.clear();
-			htmlModel.clear();
-			javascriptModel.clear();
-			imgModel.clear();
-			styleModel.clear();
-			for (var k = 0; k < projectModel.listModel.count; k++)
-				addDocToSubModel(k);
-			projectFilesLoaded();
-		}
-		onDocumentAdded:
-		{
-			addDocToSubModel(projectModel.getDocumentIndex(documentId));
-		}
-	}
 }
 

mix/qml/Style.qml

@@ -10,7 +10,7 @@ QtObject {
 	}
 
 	property QtObject title: QtObject {
-		property string color: "#878787"
+		property string color: "#808080"
 		property string background: "#f0f0f0"
 		property int height: 40
 	}
@@ -18,6 +18,7 @@ QtObject {
 	property QtObject documentsList: QtObject {
 		property string background: "#f7f7f7"
 		property string color: "#4d4d4d"
+		property string sectionColor: "#808080"
 		property string selectedColor: "white"
 		property string highlightColor: "#4a90e2"
 		property int height: 30