WebPreview ui redesign

mix/qml/CodeEditorView.qml

@@ -19,7 +19,8 @@ Item {
 
 	function isDocumentOpen(documentId) {
 		for (var i = 0; i < editorListModel.count; i++)
-			if (editorListModel.get(i).documentId === documentId)
+			if (editorListModel.get(i).documentId === documentId &&
+					editors.itemAt(i).item)
 				return true;
 		return false;
 	}

mix/qml/WebPreview.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls.Styles 1.1
 import QtWebEngine 1.0
 import QtWebEngine.experimental 1.0
 import HttpServer 1.0
+import "."
 
 Item {
 	id: webPreview
@@ -38,7 +39,7 @@ Item {
 
 	function updateDocument(documentId, action) {
 		for (var i = 0; i < pageListModel.count; i++)
-			if (pageListModel.get(i).documentId === i)
+			if (pageListModel.get(i).documentId === documentId)
 				action(i);
 	}
 
@@ -82,10 +83,22 @@ Item {
 		onDocumentRemoved: {
 			updateDocument(documentId, function(i) { pageListModel.remove(i) } )
 		}
+
 		onDocumentUpdated: {
 			updateDocument(documentId, function(i) { pageListModel.set(i, projectModel.getDocument(documentId)) } )
 		}
 
+		onDocumentOpened: {
+			if (!document.isHtml)
+				return;
+			for (var i = 0; i < pageListModel.count; i++) {
+				var doc = pageListModel.get(i);
+				if (doc.documentId === document.documentId) {
+					pageCombo.currentIndex = i;
+				}
+			}
+		}
+
 		onProjectLoading: {
 			for (var i = 0; i < target.listModel.count; i++) {
 				var document = target.listModel.get(i);
@@ -146,45 +159,86 @@ Item {
 
 	ColumnLayout {
 		anchors.fill: parent
-
-		RowLayout {
-			anchors.top: parent.top
-			Layout.fillWidth: true;
-			Text {
-				text: qsTr("Page")
-			}
-			ComboBox {
-				id: pageCombo
-				model: pageListModel
-				textRole: "name"
-				currentIndex: -1
-				onCurrentIndexChanged: changePage()
-			}
-			Button {
-				text: qsTr("Reload")
-				onClicked: reload()
+		spacing: 0
+		Rectangle
+		{
+			SourceSansProLight
+			{
+				id: regularFont
 			}
-			CheckBox {
-				id: autoReloadOnSave
-				checked: true
-				text: qsTr("Auto reload on save")
+
+			anchors.leftMargin: 4
+			color: WebPreviewStyle.general.headerBackgroundColor
+			Layout.preferredWidth: parent.width
+			Layout.preferredHeight: 32
+			Row {
+				anchors.top: parent.top
+				anchors.fill: parent
+				anchors.leftMargin: 3
+				spacing: 3
+				DefaultLabel {
+					text: qsTr("Preview of")
+					anchors.verticalCenter: parent.verticalCenter
+				}
+
+				ComboBox {
+					id: pageCombo
+					model: pageListModel
+					textRole: "name"
+					currentIndex: -1
+					onCurrentIndexChanged: changePage()
+					anchors.verticalCenter: parent.verticalCenter
+					style: ComboBoxStyle {
+						font: regularFont.name
+					}
+				}
+
+				Action {
+					tooltip: qsTr("Reload")
+					id: buttonReloadAction
+					onTriggered: {
+						reload();
+					}
+				}
+
+				Button {
+					iconSource: "qrc:/qml/img/available_updates.png"
+					action: buttonReloadAction
+					anchors.verticalCenter: parent.verticalCenter
+					width: 26
+					height: 26
+				}
+				CheckBox {
+					id: autoReloadOnSave
+					checked: true
+					anchors.verticalCenter: parent.verticalCenter
+					style: CheckBoxStyle {
+						label: DefaultLabel {
+							text: qsTr("Auto reload on save")
+						}
+					}
+				}
 			}
 		}
 
-		WebEngineView {
-			Layout.fillWidth: true
+		Rectangle
+		{
+			Layout.preferredWidth: parent.width
 			Layout.fillHeight: true
-			id: webView
-			experimental.settings.localContentCanAccessRemoteUrls: true
-			onJavaScriptConsoleMessage: {
-				console.log(sourceID + ":" + lineNumber + ":" + message);
-			}
-			onLoadingChanged: {
-				if (!loading) {
-					initialized = true;
-					webView.runJavaScript("init(\"" + httpServer.url + "/rpc/\")");
-					if (pendingPageUrl)
-						setPreviewUrl(pendingPageUrl);
+			WebEngineView {
+				anchors.fill: parent
+				id: webView
+				experimental.settings.localContentCanAccessRemoteUrls: true
+				onJavaScriptConsoleMessage: {
+					console.log(sourceID + ":" + lineNumber + ":" + message);
+				}
+				onLoadingChanged: {
+					if (!loading) {
+						initialized = true;
+						webView.runJavaScript("init(\"" + httpServer.url + "/rpc/\")");
+						if (pendingPageUrl)
+							setPreviewUrl(pendingPageUrl);
+					}
 				}
 			}
 		}

mix/qml/WebPreviewStyle.qml

@@ -0,0 +1,14 @@
+pragma Singleton
+import QtQuick 2.0
+
+QtObject {
+
+	function absoluteSize(rel)
+	{
+		return systemPointSize + rel;
+	}
+
+	property QtObject general: QtObject {
+		property string headerBackgroundColor: "#f0f0f0"
+	}
+}

mix/qml/qmldir

@@ -4,3 +4,4 @@ singleton ProjectFilesStyle 1.0 ProjectFilesStyle.qml
 singleton DebuggerPaneStyle 1.0 DebuggerPaneStyle.qml
 singleton StateStyle 1.0 StateStyle.qml
 singleton StatusPaneStyle 1.0 StatusPaneStyle.qml
+singleton WebPreviewStyle 1.0 WebPreviewStyle.qml

mix/res.qrc

@@ -97,5 +97,7 @@
         <file>qml/DefaultTextField.qml</file>
         <file>qml/CommonSeparator.qml</file>
         <file>qml/Style.qml</file>
+        <file>qml/WebPreviewStyle.qml</file>
+        <file>qml/img/available_updates.png</file>
     </qresource>
 </RCC>