Project Files - ux improvement.

mix/qml/FilesSection.qml

@@ -54,6 +54,12 @@ ColumnLayout {
 		source: "qrc:/qml/fonts/SourceSansPro-Regular.ttf"
 	}
 
+	FontLoader
+	{
+		id: semiBoldFont
+		source: "qrc:/qml/fonts/SourceSansPro-Bold.ttf"
+	}
+
 	RowLayout
 	{
 		anchors.top: parent.top
@@ -64,12 +70,12 @@ ColumnLayout {
 		Image {
 			source: "qrc:/qml/img/opentriangleindicator_filesproject.png"
 			width: 15
-			sourceSize.width: 15
+			sourceSize.width: 12
 			id: imgArrow
 			anchors.right: section.left
-			anchors.rightMargin: 5
+			anchors.rightMargin: 8
 			anchors.top: parent.top
-			anchors.topMargin: 8
+			anchors.topMargin: 6
 		}
 
 		Text
@@ -79,10 +85,8 @@ ColumnLayout {
 			anchors.left: parent.left
 			anchors.leftMargin: Style.general.leftMargin
 			color: Style.documentsList.sectionColor
-			font.family: fileNameFont.name
+			font.family: semiBoldFont.name
-			font.pointSize: Style.documentsList.fontSize
+			font.pointSize: Style.documentsList.sectionFontSize
-			font.weight: Font.Bold
-			font.letterSpacing: 1
 			states: [
 				State {
 					name: "hidden"
@@ -154,6 +158,9 @@ ColumnLayout {
 								rootItem.isSelected = true;
 							else
 								rootItem.isSelected = false;
+
+							if (rootItem.isSelected && section.state === "hidden")
+								section.state = "";
 						}
 					}
 				}

mix/qml/ProjectList.qml

@@ -15,7 +15,7 @@ Item {
 		FontLoader
 		{
 			id: srcSansProLight
-			source: "qrc:/qml/fonts/SourceSansPro-Regular.ttf"
+			source: "qrc:/qml/fonts/SourceSansPro-Light.ttf"
 		}
 
 		Rectangle
@@ -54,6 +54,7 @@ Item {
 				font.family: srcSansProLight.name
 				font.pointSize: Style.title.pointSize
 				anchors.verticalCenter: parent.verticalCenter
+				font.weight: Font.Light
 			}
 		}
 
@@ -79,7 +80,7 @@ Item {
 				spacing: 0
 
 				Repeater {
-					model: ["Contracts", "Javascript", "HTML", "Styles", "Images", "Misc"]
+					model: [qsTr("Contracts"), qsTr("Javascript"), qsTr("Web Pages"), qsTr("Styles"), qsTr("Images"), qsTr("Misc")];
 					signal selected(string doc, string groupName)
 					id: sectionRepeater
 					FilesSection
@@ -127,6 +128,11 @@ Item {
 								}
 							}
 
+							onDocumentOpened: {
+								if (document.groupName === modelData)
+									sectionRepeater.selected(document.documentId, modelData);
+							}
+
 							onNewProject: {
 								sectionModel.clear();
 							}
@@ -145,7 +151,12 @@ Item {
 							{
 								var newDoc = projectModel.getDocument(documentId);
 								if (newDoc.groupName === modelData)
+								{
 									sectionModel.append(newDoc);
+									projectModel.openDocument(newDoc.documentId);
+									sectionRepeater.selected(newDoc.documentId, modelData);
+								}
+
 							}
 						}
 					}

mix/qml/Style.qml

@@ -12,7 +12,7 @@ QtObject {
 	property QtObject title: QtObject {
 		property string color: "#808080"
 		property string background: "#f0f0f0"
-		property int height: 70
+		property int height: 55
 		property int pointSize: 18
 	}
 
@@ -22,8 +22,9 @@ QtObject {
 		property string sectionColor: "#808080"
 		property string selectedColor: "white"
 		property string highlightColor: "#4a90e2"
-		property int height: 32
+		property int height: 25
-		property int fileNameHeight: 45
+		property int fileNameHeight: 30
-		property int fontSize: 15
+		property int fontSize: 13
+		property int sectionFontSize: 13
 	}
 }

mix/qml/js/ProjectModel.js

@@ -90,7 +90,7 @@ function addFile(fileName) {
 	var isJs = extension === ".js";
 	var isImg = extension === ".png"  || extension === ".gif" || extension === ".jpg" || extension === ".svg";
 	var syntaxMode = isContract ? "solidity" : isJs ? "javascript" : isHtml ? "htmlmixed" : isCss ? "css" : "";
-	var groupName = isContract ? "Contracts" : isJs ? "Javascript" : isHtml ? "HTML" : isCss ? "Styles" : isImg ? "Images" : "Misc";
+	var groupName = isContract ? qsTr("Contracts") : isJs ? qsTr("Javascript") : isHtml ? qsTr("Web Pages") : isCss ? qsTr("Styles") : isImg ? qsTr("Images") : qsTr("Misc");
 	var docData = {
 		contract: false,
 		path: p,