Merge pull request #991 from yann300/ui_improvement

Integration with system default font size.

mix/AppContext.cpp

@@ -81,6 +81,8 @@ void AppContext::load()
 		BOOST_THROW_EXCEPTION(exception);
 	}
 	m_applicationEngine->rootContext()->setContextProperty("projectModel", projectModel);
+	QFont f;
+	m_applicationEngine->rootContext()->setContextProperty("systemPointSize", f.pointSize());
 	qmlRegisterType<CodeEditorExtensionManager>("CodeEditorExtensionManager", 1, 0, "CodeEditorExtensionManager");
 	qmlRegisterType<HttpServer>("HttpServer", 1, 0, "HttpServer");
 	m_applicationEngine->load(QUrl("qrc:/qml/main.qml"));

mix/ClientModel.cpp

@@ -89,7 +89,6 @@ ClientModel::ClientModel(AppContext* _context):
 
 	m_web3Server.reset(new Web3Server(*m_rpcConnector.get(), std::vector<dev::KeyPair> { m_client->userAccount() }, m_client.get()));
 	connect(m_web3Server.get(), &Web3Server::newTransaction, this, &ClientModel::onNewTransaction, Qt::DirectConnection);
-
 	_context->appEngine()->rootContext()->setContextProperty("clientModel", this);
 }
 

mix/qml/BasicContent.qml

@@ -1,35 +0,0 @@
-import QtQuick 2.2
-import QtQuick.Controls 1.1
-
-Rectangle {
-	anchors.fill: parent
-	width: parent.width
-	height: parent.height
-	color: "lightgray"
-	Text {
-		font.pointSize: 9
-		anchors.left: parent.left
-		anchors.top: parent.top
-		anchors.topMargin: 3
-		anchors.leftMargin: 3
-		height: 9
-		font.family: "Monospace"
-		objectName: "status"
-		id: status
-	}
-	TextArea {
-		readOnly: true
-		anchors.left: parent.left
-		anchors.leftMargin: 10
-		anchors.top: status.bottom
-		anchors.topMargin: 3
-		font.pointSize: 9
-		font.family: "Monospace"
-		height: parent.height * 0.8
-		width:  parent.width - 20
-		wrapMode: Text.Wrap
-		backgroundVisible: false
-		objectName: "content"
-		id: content
-	}
-}

mix/qml/CodeEditor.qml

@@ -3,6 +3,7 @@ import QtQuick.Window 2.0
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 1.0
 import QtQuick.Controls.Styles 1.1
+import "."
 
 Item {
 	signal editorTextChanged
@@ -65,7 +66,7 @@ Item {
 
 		height: parent.height
 		font.family: "Monospace"
-		font.pointSize: 12
+		font.pointSize: CodeEditorStyle.general.basicFontSize
 		width: parent.width
 
 		tabChangesFocus: false

mix/qml/CodeEditorStyle.qml

@@ -0,0 +1,14 @@
+pragma Singleton
+import QtQuick 2.0
+
+QtObject {
+
+	function absoluteSize(rel)
+	{
+		return systemPointSize + rel;
+	}
+
+	property QtObject general: QtObject {
+		property int basicFontSize: absoluteSize(1)
+	}
+}

mix/qml/Debugger.qml

@@ -6,6 +6,7 @@ import QtQuick.Layouts 1.1
 import Qt.labs.settings 1.0
 import "js/Debugger.js" as Debugger
 import "js/ErrorLocationFormater.js" as ErrorLocationFormater
+import "."
 
 Rectangle {
 	id: debugPanel
@@ -346,7 +347,7 @@ Rectangle {
 										color: "#b2b3ae"
 										text: styleData.value.split(' ')[0]
 										font.family: "monospace"
-										font.pointSize: 9
+										font.pointSize: DebuggerPaneStyle.general.basicFontSize
 										wrapMode: Text.NoWrap
 										id: id
 									}
@@ -356,7 +357,7 @@ Rectangle {
 										color: styleData.selected ? "white" : "black"
 										font.family: "monospace"
 										text: styleData.value.replace(styleData.value.split(' ')[0], '')
-										font.pointSize: 9
+										font.pointSize: DebuggerPaneStyle.general.basicFontSize
 									}
 								}
 							}
@@ -425,11 +426,11 @@ Rectangle {
 											Layout.minimumHeight: parent.height
 											Text {
 												anchors.centerIn: parent
-												anchors.leftMargin: 5
+												anchors.leftMargin: 5()
 												font.family: "monospace"
 												color: "#4a4a4a"
 												text: styleData.row;
-												font.pointSize: 9
+												font.pointSize: DebuggerPaneStyle.general.basicFontSize
 											}
 										}
 
@@ -447,7 +448,7 @@ Rectangle {
 												anchors.verticalCenter: parent.verticalCenter
 												color: "#4a4a4a"
 												text: styleData.value
-												font.pointSize: 9
+												font.pointSize: DebuggerPaneStyle.general.basicFontSize
 											}
 										}
 									}
@@ -514,7 +515,7 @@ Rectangle {
 											anchors.leftMargin: 5
 											color: "#4a4a4a"
 											text: styleData.row;
-											font.pointSize: 9
+											font.pointSize: DebuggerPaneStyle.general.basicFontSize
 											width: parent.width - 5
 											elide: Text.ElideRight
 										}
@@ -535,7 +536,7 @@ Rectangle {
 											color: "#4a4a4a"
 											text: styleData.value;
 											elide: Text.ElideRight
-											font.pointSize: 9
+											font.pointSize: DebuggerPaneStyle.general.basicFontSize
 										}
 									}
 								}
@@ -585,7 +586,7 @@ Rectangle {
 											anchors.leftMargin: 5
 											color: "#4a4a4a"
 											text: styleData.value.split('\t')[0];
-											font.pointSize: 9
+											font.pointSize: DebuggerPaneStyle.general.basicFontSize
 											width: parent.width - 5
 											elide: Text.ElideRight
 										}
@@ -606,7 +607,7 @@ Rectangle {
 											color: "#4a4a4a"
 											text: styleData.value.split('\t')[1];
 											elide: Text.ElideRight
-											font.pointSize: 9
+											font.pointSize: DebuggerPaneStyle.general.basicFontSize
 										}
 									}
 								}

mix/qml/DebuggerPaneStyle.qml

@@ -0,0 +1,15 @@
+pragma Singleton
+import QtQuick 2.0
+
+QtObject {
+
+	function absoluteSize(rel)
+	{
+		return systemPointSize + rel;
+	}
+
+	property QtObject general: QtObject {
+		property int basicFontSize: absoluteSize(-2)
+		property int dataDumpFontSize: absoluteSize(-3)
+	}
+}

mix/qml/FilesSection.qml

@@ -20,17 +20,17 @@ ColumnLayout {
 
 	function hiddenHeightTopLevel()
 	{
-		return section.state === "hidden" ? Style.documentsList.height : Style.documentsList.fileNameHeight * model.count + Style.documentsList.height;
+		return section.state === "hidden" ? ProjectFilesStyle.documentsList.height : ProjectFilesStyle.documentsList.fileNameHeight * model.count + ProjectFilesStyle.documentsList.height;
 	}
 
 	function hiddenHeightRepeater()
 	{
-		return section.state === "hidden" ? 0 : Style.documentsList.fileNameHeight * wrapperItem.model.count;
+		return section.state === "hidden" ? 0 : ProjectFilesStyle.documentsList.fileNameHeight * wrapperItem.model.count;
 	}
 
 	function hiddenHeightElement()
 	{
-		return section.state === "hidden" ? 0 : Style.documentsList.fileNameHeight;
+		return section.state === "hidden" ? 0 : ProjectFilesStyle.documentsList.fileNameHeight;
 	}
 
 	function getDocumentIndex(documentId)
@@ -65,7 +65,7 @@ ColumnLayout {
 		anchors.top: parent.top
 		id: rowCol
 		width: parent.width
-		height: Style.documentsList.height
+		height: ProjectFilesStyle.documentsList.height
 
 		Image {
 			source: "qrc:/qml/img/opentriangleindicator_filesproject.png"
@@ -83,15 +83,15 @@ ColumnLayout {
 			id: section
 			text: sectionName
 			anchors.left: parent.left
-			anchors.leftMargin: Style.general.leftMargin
+			anchors.leftMargin: ProjectFilesStyle.general.leftMargin
-			color: Style.documentsList.sectionColor
+			color: ProjectFilesStyle.documentsList.sectionColor
 			font.family: boldFont.name
-			font.pointSize: Style.documentsList.sectionFontSize
+			font.pointSize: ProjectFilesStyle.documentsList.sectionFontSize
 			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: rowCol; Layout.minimumHeight: ProjectFilesStyle.documentsList.height; Layout.maximumHeight: ProjectFilesStyle.documentsList.height; height: ProjectFilesStyle.documentsList.height; }
 					PropertyChanges { target: imgArrow; source: "qrc:/qml/img/closedtriangleindicator_filesproject.png" }
 				}
 			]
@@ -132,21 +132,21 @@ ColumnLayout {
 				Layout.preferredHeight: wrapperItem.hiddenHeightElement()
 				Layout.maximumHeight: wrapperItem.hiddenHeightElement()
 				height: wrapperItem.hiddenHeightElement()
-				color: isSelected ? Style.documentsList.highlightColor : Style.documentsList.background
+				color: isSelected ? ProjectFilesStyle.documentsList.highlightColor : ProjectFilesStyle.documentsList.background
 				property bool isSelected
 				property bool renameMode
 				Text {
 					id: nameText
 					height: parent.height
 					visible: !renameMode
-					color: rootItem.isSelected ? Style.documentsList.selectedColor : Style.documentsList.color
+					color: rootItem.isSelected ? ProjectFilesStyle.documentsList.selectedColor : ProjectFilesStyle.documentsList.color
 					text: name;
 					font.family: fileNameFont.name
-					font.pointSize: Style.documentsList.fontSize
+					font.pointSize: ProjectFilesStyle.documentsList.fontSize
 					anchors.verticalCenter: parent.verticalCenter
 					verticalAlignment:  Text.AlignVCenter
 					anchors.left: parent.left
-					anchors.leftMargin: Style.general.leftMargin + 2
+					anchors.leftMargin: ProjectFilesStyle.general.leftMargin + 2
 					width: parent.width
 					Connections
 					{
@@ -171,7 +171,7 @@ ColumnLayout {
 					visible: renameMode
 					anchors.verticalCenter: parent.verticalCenter
 					anchors.left: parent.left
-					anchors.leftMargin: Style.general.leftMargin
+					anchors.leftMargin: ProjectFilesStyle.general.leftMargin
 					MouseArea {
 						id: textMouseArea
 						anchors.fill: parent

mix/qml/ItemDelegateDataDump.qml

@@ -2,6 +2,7 @@ import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.0
 import QtQuick.Controls.Styles 1.1
+import "."
 
 Rectangle {
 	anchors.fill: parent
@@ -27,7 +28,7 @@ Rectangle {
 				font.bold: true
 				color: "#4a4a4a"
 				text: modelData[0]
-				font.pointSize: 8;
+				font.pointSize: DebuggerPaneStyle.general.dataDumpFontSize;
 			}
 		}
 
@@ -46,7 +47,7 @@ Rectangle {
 				anchors.leftMargin: 4
 				color: "#4a4a4a"
 				text: modelData[1]
-				font.pointSize: 8
+				font.pointSize: DebuggerPaneStyle.general.dataDumpFontSize
 			}
 		}
 	}

mix/qml/Style.qml → mix/qml/ProjectFilesStyle.qml

@@ -1,10 +1,13 @@
 pragma Singleton
 import QtQuick 2.0
 
-/*
- * Project Files
- */
 QtObject {
+
+	function absoluteSize(rel)
+	{
+		return systemPointSize + rel;
+	}
+
 	property QtObject general: QtObject {
 		property int leftMargin: 45
 	}
@@ -13,7 +16,7 @@ QtObject {
 		property string color: "#808080"
 		property string background: "#f0f0f0"
 		property int height: 55
-		property int pointSize: 18
+		property int fontSize: absoluteSize(7);// 18
 	}
 
 	property QtObject documentsList: QtObject {
@@ -24,7 +27,7 @@ QtObject {
 		property string highlightColor: "#4a90e2"
 		property int height: 25
 		property int fileNameHeight: 30
-		property int fontSize: 13
+		property int fontSize: absoluteSize(2)// 13
-		property int sectionFontSize: 13
+		property int sectionFontSize: absoluteSize(2)// 13
 	}
 }

mix/qml/ProjectList.qml

@@ -20,8 +20,8 @@ Item {
 
 		Rectangle
 		{
-			color: Style.title.background
+			color: ProjectFilesStyle.title.background
-			height: Style.title.height
+			height: ProjectFilesStyle.title.height
 			Layout.fillWidth: true
 			Image {
 				id: projectIcon
@@ -35,14 +35,14 @@ Item {
 			Text
 			{
 				id: projectTitle
-				color: Style.title.color
+				color: ProjectFilesStyle.title.color
 				text: projectModel.projectTitle
 				anchors.verticalCenter: parent.verticalCenter
 				visible: !projectModel.isEmpty;
 				anchors.left: parent.left
-				anchors.leftMargin: Style.general.leftMargin
+				anchors.leftMargin: ProjectFilesStyle.general.leftMargin
 				font.family: srcSansProLight.name
-				font.pointSize: Style.title.pointSize
+				font.pointSize: ProjectFilesStyle.title.fontSize
 				font.weight: Font.Light
 			}
 
@@ -52,7 +52,7 @@ Item {
 				anchors.right: parent.right
 				anchors.rightMargin: 15
 				font.family: srcSansProLight.name
-				font.pointSize: Style.title.pointSize
+				font.pointSize: ProjectFilesStyle.title.fontSize
 				anchors.verticalCenter: parent.verticalCenter
 				font.weight: Font.Light
 			}
@@ -62,7 +62,7 @@ Item {
 		{
 			Layout.fillWidth: true
 			height: 10
-			color: Style.documentsList.background
+			color: ProjectFilesStyle.documentsList.background
 		}
 
 
@@ -71,7 +71,7 @@ Item {
 		{
 			Layout.fillWidth: true
 			Layout.fillHeight: true
-			color: Style.documentsList.background
+			color: ProjectFilesStyle.documentsList.background
 
 			ColumnLayout
 			{

mix/qml/StateDialog.qml

@@ -5,6 +5,7 @@ import QtQuick.Window 2.0
 import org.ethereum.qml.QEther 1.0
 import "js/QEtherHelper.js" as QEtherHelper
 import "js/TransactionHelper.js" as TransactionHelper
+import "."
 
 Window {
 	id: modalStateDialog
@@ -158,7 +159,7 @@ Window {
 					Layout.fillWidth: true
 					Layout.fillHeight: true
 					text: functionId
-					font.pointSize: 12
+					font.pointSize: StateStyle.general.basicFontSize //12
 					verticalAlignment: Text.AlignBottom
 				}
 				ToolButton {

mix/qml/StateList.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 1.1
 import QtQuick.Dialogs 1.1
 import QtQuick.Layouts 1.1
 import QtQuick.Window 2.0
+import "."
 
 Window {
 	id: stateListContainer
@@ -45,7 +46,7 @@ Window {
 					Layout.fillWidth: true
 					Layout.fillHeight: true
 					text: styleData.value
-					font.pointSize: 12
+					font.pointSize: StateStyle.general.basicFontSize
 					verticalAlignment: Text.AlignBottom
 				}
 				ToolButton {

mix/qml/StateStyle.qml

@@ -0,0 +1,14 @@
+pragma Singleton
+import QtQuick 2.0
+
+QtObject {
+
+	function absoluteSize(rel)
+	{
+		return systemPointSize + rel;
+	}
+
+	property QtObject general: QtObject {
+		property int basicFontSize: absoluteSize(1)
+	}
+}

mix/qml/StatusPane.qml

@@ -2,6 +2,7 @@ import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
 import "js/ErrorLocationFormater.js" as ErrorLocationFormater
+import "."
 
 Rectangle {
 	id: statusHeader
@@ -59,7 +60,7 @@ Rectangle {
 			spacing: 5
 
 			Text {
-				font.pointSize: 10
+				font.pointSize: StatusPaneStyle.general.statusFontSize
 				height: 9
 				font.family: "sans serif"
 				objectName: "status"
@@ -81,7 +82,7 @@ Rectangle {
 
 			Text {
 				visible: false
-				font.pointSize: 9
+				font.pointSize: StatusPaneStyle.general.logLinkFontSize
 				height: 9
 				text: qsTr("See Log.")
 				font.family: "Monospace"

mix/qml/StatusPaneStyle.qml

@@ -0,0 +1,15 @@
+pragma Singleton
+import QtQuick 2.0
+
+QtObject {
+
+	function absoluteSize(rel)
+	{
+		return systemPointSize + rel;
+	}
+
+	property QtObject general: QtObject {
+		property int statusFontSize: absoluteSize(-1)
+		property int logLinkFontSize: absoluteSize(-2)
+	}
+}

mix/qml/qmldir

@@ -1 +1,4 @@
-singleton Style 1.0 Style.qml
+singleton ProjectFilesStyle 1.0 ProjectFilesStyle.qml
+singleton DebuggerPaneStyle 1.0 DebuggerPaneStyle.qml
+singleton StateStyle 1.0 StateStyle.qml
+singleton StatusPaneStyle 1.0 StatusPaneStyle.qml

mix/res.qrc

@@ -2,7 +2,6 @@
     <qresource prefix="/">
         <file>qml/main.qml</file>
         <file>qml/AlertMessageDialog.qml</file>
-        <file>qml/BasicContent.qml</file>
         <file>qml/BasicMessage.qml</file>
         <file>qml/Debugger.qml</file>
         <file>qml/MainContent.qml</file>
@@ -62,7 +61,6 @@
         <file>qml/TransactionLog.qml</file>
         <file>res/mix_256x256x32.png</file>
         <file>qml/QVariableDeclaration.qml</file>
-        <file>qml/Style.qml</file>
         <file>qml/qmldir</file>
         <file>qml/FilesSection.qml</file>
         <file>qml/fonts/SourceSansPro-Black.ttf</file>
@@ -83,5 +81,10 @@
         <file>qml/img/closedtriangleindicator_filesproject.png</file>
         <file>qml/img/opentriangleindicator_filesproject.png</file>
         <file>qml/img/projecticon.png</file>
+        <file>qml/ProjectFilesStyle.qml</file>
+        <file>qml/DebuggerPaneStyle.qml</file>
+        <file>qml/CodeEditorStyle.qml</file>
+        <file>qml/StatusPaneStyle.qml</file>
+        <file>qml/StateStyle.qml</file>
     </qresource>
 </RCC>