Merge pull request #1687 from arkpar/mix_ux

Mix: new editor scheme, adjustable font size

mix/qml/CodeEditorView.qml

@@ -3,6 +3,7 @@ import QtQuick.Window 2.0
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 1.0
 import QtQuick.Dialogs 1.1
+import Qt.labs.settings 1.0
 
 Item {
 	id: codeEditorView
@@ -74,6 +75,7 @@ Item {
 		}
 		editor.document = document;
 		editor.sourceName = document.documentId;
+		editor.setFontSize(editorSettings.fontSize);
 		editor.setText(data, document.syntaxMode);
 		editor.changeGeneration();
 	}
@@ -158,6 +160,14 @@ Item {
 		}
 	}
 
+	function setFontSize(size) {
+		if (size <= 10 || size >= 48)
+			return;
+		editorSettings.fontSize = size;
+		for (var i = 0; i < editors.count; i++)
+			editors.itemAt(i).item.setFontSize(size);
+	}
+
 	Component.onCompleted: projectModel.codeEditor = codeEditorView;
 
 	Connections {
@@ -317,4 +327,23 @@ Item {
 	ListModel {
 		id: editorListModel
 	}
+
+	Action {
+		id: increaseFontSize
+		text: qsTr("Increase Font Size")
+		shortcut: "Ctrl+="
+		onTriggered: setFontSize(editorSettings.fontSize + 1)
+	}
+
+	Action {
+		id: decreaseFontSize
+		text: qsTr("Decrease Font Size")
+		shortcut: "Ctrl+-"
+		onTriggered: setFontSize(editorSettings.fontSize - 1)
+	}
+
+	Settings {
+		id: editorSettings
+		property int fontSize: 12;
+	}
 }

mix/qml/WebCodeEditor.qml

@@ -19,6 +19,7 @@ Item {
 	property var currentBreakpoints: []
 	property string sourceName
 	property var document
+	property int fontSize: 0
 
 	function setText(text, mode) {
 		currentText = text;
@@ -76,6 +77,12 @@ Item {
 			editorBrowser.runJavaScript("goToCompilationError()", function(result) {});
 	}
 
+	function setFontSize(size) {
+		fontSize = size;
+		if (initialized && editorBrowser)
+			editorBrowser.runJavaScript("setFontSize(" + size + ")", function(result) {});
+	}
+
 	Clipboard
 	{
 		id: clipboard
@@ -108,6 +115,7 @@ Item {
 		{
 			if (!loading && editorBrowser) {
 				initialized = true;
+				setFontSize(fontSize);
 				setText(currentText, currentMode);
 				runJavaScript("getTextChanged()", function(result) { });
 				pollTimer.running = true;

mix/qml/html/cm/inkpot.css

@@ -0,0 +1,65 @@
+/*
+Inkpot theme for code-mirror
+https://github.com/ciaranm/inkpot
+*/
+
+/* Color scheme for code-mirror */
+
+.cm-s-inkpot.CodeMirror {
+  color: #cfbfad;
+  text-shadow: #1e1e27 0 1px;
+  background-color: #1e1e27;
+  line-height: 1.45em;
+  color-profile: sRGB;
+  rendering-intent: auto;
+}
+
+.cm-s-inkpot .CodeMirror-gutters { background: #2e2e2e; border-right: 0px solid #aaa; }
+.cm-s-inkpot .CodeMirror-linenumber { color: #8b8bcd; }
+.cm-s-inkpot .CodeMirror-cursor { border-left: 1px solid white !important; }
+
+.cm-s-inkpot span.cm-comment     { color: #cd8b00; }
+.cm-s-inkpot span.cm-def         { color: #cfbfad; font-weight:bold; }
+.cm-s-inkpot span.cm-keyword     { color: #808bed; }
+.cm-s-inkpot span.cm-builtin     { color: #cfbfad; }
+.cm-s-inkpot span.cm-variable    { color: #cfbfad; }
+.cm-s-inkpot span.cm-string      { color: #ffcd8b; }
+.cm-s-inkpot span.cm-number      { color: #f0ad6d; }
+.cm-s-inkpot span.cm-atom        { color: #cb6ecb; }
+.cm-s-inkpot span.cm-variable-2  { color: #ffb8ff; }
+
+.cm-s-inkpot span.cm-meta        { color: #409090; }
+.cm-s-inkpot span.cm-qualifier   { color: #808bed; }
+.cm-s-inkpot span.cm-tag         { color: #808bed; }
+.cm-s-inkpot span.cm-attribute   { color: #FF5555; }
+.cm-s-inkpot span.cm-error       { color: #f00; }
+
+.cm-s-inkpot .cm-bracket { color: #cb4b16; }
+.cm-s-inkpot .CodeMirror-matchingbracket { color: #859900; }
+.cm-s-inkpot .CodeMirror-nonmatchingbracket { color: #dc322f; }
+
+.cm-s-inkpot .CodeMirror-selected { background: #4e4e8f !important; }
+span.CodeMirror-selectedtext { color: #ffffff !important; }
+
+
+/* Code execution */
+.CodeMirror-exechighlight {
+	border-bottom: double 1px #94A2A2;
+}
+
+
+/* Error annotation */
+.CodeMirror-errorannotation {
+	border-bottom: 1px solid #DD3330;
+	margin-bottom: 4px;
+}
+
+.CodeMirror-errorannotation-context {
+	font-family: monospace;
+	color: #EEE9D5;
+	background: #b58900;
+	padding: 2px;
+	text-shadow: none !important;
+	border-top: solid 2px #063742;
+}
+

mix/qml/html/codeeditor.html

@@ -1,7 +1,8 @@
 <!doctype html>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="cm/codemirror.css">
-<link rel="stylesheet" href="cm/solarized.css">
+<!--link rel="stylesheet" href="cm/solarized.css"-->
+<link rel="stylesheet" href="cm/inkpot.css">
 <link rel="stylesheet" href="cm/fullscreen.css">
 <link rel="stylesheet" href="cm/dialog.css">
 <link rel="stylesheet" href="cm/show-hint.css">

mix/qml/html/codeeditor.js

@@ -9,7 +9,7 @@ var editor = CodeMirror(document.body, {
 						});
 var ternServer;
 
-editor.setOption("theme", "solarized dark");
+editor.setOption("theme", "inkpot");
 editor.setOption("indentUnit", 4);
 editor.setOption("indentWithTabs", true);
 editor.setOption("fullScreen", true);
@@ -194,4 +194,11 @@ goToCompilationError = function()
 	editor.setCursor(annotation.line, annotation.column)
 }
 
+setFontSize = function(size)
+{
+	editor.getWrapperElement().style["font-size"] = size + "px";
+	editor.refresh();
+}
+
 editor.setOption("extraKeys", extraKeys);
+

mix/web.qrc

@@ -32,6 +32,7 @@
 		<file>qml/html/cm/show-hint.js</file>
 		<file>qml/html/cm/signal.js</file>
 		<file>qml/html/cm/solarized.css</file>
+		<file>qml/html/cm/inkpot.css</file>
 		<file>qml/html/cm/solidity.js</file>
 		<file>qml/html/cm/solidityToken.js</file>
 		<file>qml/html/cm/tern.js</file>