Merge pull request #1048 from yann300/webViewDesign

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,34 +159,74 @@ Item {
 
 	ColumnLayout {
 		anchors.fill: parent
+		spacing: 0
+		Rectangle
+		{
+			SourceSansProLight
+			{
+				id: regularFont
+			}
 
-		RowLayout {
+			anchors.leftMargin: 4
+			color: WebPreviewStyle.general.headerBackgroundColor
+			Layout.preferredWidth: parent.width
+			Layout.preferredHeight: 32
+			Row {
 				anchors.top: parent.top
-			Layout.fillWidth: true;
+				anchors.fill: parent
-			Text {
+				anchors.leftMargin: 3
-				text: qsTr("Page")
+				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 {
-				text: qsTr("Reload")
+					iconSource: "qrc:/qml/img/available_updates.png"
-				onClicked: reload()
+					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 {
+		Rectangle
-			Layout.fillWidth: true
+		{
+			Layout.preferredWidth: parent.width
 			Layout.fillHeight: true
+			WebEngineView {
+				anchors.fill: parent
 				id: webView
 				experimental.settings.localContentCanAccessRemoteUrls: true
 				onJavaScriptConsoleMessage: {
@@ -190,3 +243,4 @@ Item {
 			}
 		}
 	}
+}

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>