From ed5b2a5da6da5175ff68292ad31a514675947f0c Mon Sep 17 00:00:00 2001 From: arkpar Date: Mon, 20 Apr 2015 14:54:55 +0200 Subject: [PATCH 1/2] Made font size adjustable Switched to inkpot colour scheme --- mix/qml/CodeEditorView.qml | 31 +++++++++++++++++ mix/qml/WebCodeEditor.qml | 9 +++++ mix/qml/html/cm/inkpot.css | 65 ++++++++++++++++++++++++++++++++++++ mix/qml/html/codeeditor.html | 3 +- mix/qml/html/codeeditor.js | 9 ++++- mix/web.qrc | 1 + 6 files changed, 116 insertions(+), 2 deletions(-) create mode 100644 mix/qml/html/cm/inkpot.css diff --git a/mix/qml/CodeEditorView.qml b/mix/qml/CodeEditorView.qml index 7c4ef066f..956b71915 100644 --- a/mix/qml/CodeEditorView.qml +++ b/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,15 @@ 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 +328,24 @@ 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; + } } diff --git a/mix/qml/WebCodeEditor.qml b/mix/qml/WebCodeEditor.qml index 7c4a18492..9a9a3bea7 100644 --- a/mix/qml/WebCodeEditor.qml +++ b/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,13 @@ 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 +116,7 @@ Item { { if (!loading && editorBrowser) { initialized = true; + setFontSize(fontSize); setText(currentText, currentMode); runJavaScript("getTextChanged()", function(result) { }); pollTimer.running = true; diff --git a/mix/qml/html/cm/inkpot.css b/mix/qml/html/cm/inkpot.css new file mode 100644 index 000000000..c6863e624 --- /dev/null +++ b/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; +} + diff --git a/mix/qml/html/codeeditor.html b/mix/qml/html/codeeditor.html index c9d4ff96a..f368404fe 100644 --- a/mix/qml/html/codeeditor.html +++ b/mix/qml/html/codeeditor.html @@ -1,7 +1,8 @@ - + + diff --git a/mix/qml/html/codeeditor.js b/mix/qml/html/codeeditor.js index 501e0bd57..e8504fee0 100644 --- a/mix/qml/html/codeeditor.js +++ b/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); + diff --git a/mix/web.qrc b/mix/web.qrc index 6870411c5..a34fd0b67 100644 --- a/mix/web.qrc +++ b/mix/web.qrc @@ -32,6 +32,7 @@ qml/html/cm/show-hint.js qml/html/cm/signal.js qml/html/cm/solarized.css + qml/html/cm/inkpot.css qml/html/cm/solidity.js qml/html/cm/solidityToken.js qml/html/cm/tern.js From e4ee14bfad1a54da854ecc0f533ba66dce408de2 Mon Sep 17 00:00:00 2001 From: arkpar Date: Mon, 20 Apr 2015 14:57:49 +0200 Subject: [PATCH 2/2] style --- mix/qml/CodeEditorView.qml | 4 +--- mix/qml/WebCodeEditor.qml | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/mix/qml/CodeEditorView.qml b/mix/qml/CodeEditorView.qml index 956b71915..e4d62ed81 100644 --- a/mix/qml/CodeEditorView.qml +++ b/mix/qml/CodeEditorView.qml @@ -160,8 +160,7 @@ Item { } } - function setFontSize(size) - { + function setFontSize(size) { if (size <= 10 || size >= 48) return; editorSettings.fontSize = size; @@ -329,7 +328,6 @@ Item { id: editorListModel } - Action { id: increaseFontSize text: qsTr("Increase Font Size") diff --git a/mix/qml/WebCodeEditor.qml b/mix/qml/WebCodeEditor.qml index 9a9a3bea7..38f2327b1 100644 --- a/mix/qml/WebCodeEditor.qml +++ b/mix/qml/WebCodeEditor.qml @@ -83,7 +83,6 @@ Item { editorBrowser.runJavaScript("setFontSize(" + size + ")", function(result) {}); } - Clipboard { id: clipboard