mirror of
https://github.com/chinchang/web-maker.git
synced 2025-04-22 11:44:28 +02:00
theme options for editor! fixes #84
This commit is contained in:
Kushagra Gour
parent
76abde22e4
commit
5f113410b5
@ -3,7 +3,55 @@
|
||||
<meta charset="utf-8">
|
||||
<title>Web Maker</title>
|
||||
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">
|
||||
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/3024-day.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/3024-night.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/abcdef.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/ambiance.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/base16-dark.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/base16-light.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/bespin.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/blackboard.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/cobalt.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/colorforth.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/dracula.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/duotone-dark.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/duotone-light.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/eclipse.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/elegant.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/erlang-dark.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/hopscotch.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/icecoder.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/isotope.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/lesser-dark.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/liquibyte.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/material.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/mbo.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/mdn-like.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/midnight.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/monokai.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/neat.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/neo.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/night.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/panda-syntax.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/paraiso-dark.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/paraiso-light.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/pastel-on-dark.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/railscasts.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/rubyblue.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/seti.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/solarized.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/the-matrix.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/tomorrow-night-bright.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/tomorrow-night-eighties.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/ttcn.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/twilight.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/vibrant-ink.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/xq-dark.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/xq-light.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/yeti.css"></link>
|
||||
<link rel="stylesheet" href="/lib/codemirror/theme/zenburn.css"></link>
|
||||
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
|
||||
<link rel="stylesheet" href="lib/hint.min.css">
|
||||
@ -315,7 +363,7 @@
|
||||
</p>
|
||||
<hr>
|
||||
|
||||
<h3>Editing</h3>
|
||||
<h3>Editor</h3>
|
||||
<p>
|
||||
<label class="line">
|
||||
Default Preprocessors
|
||||
@ -340,6 +388,10 @@
|
||||
<option value="typescript">TypeScript</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="line">
|
||||
Theme
|
||||
<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
|
||||
</label>
|
||||
<label class="line">
|
||||
<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
|
||||
</label>
|
||||
|
||||
7
src/lib/codemirror/theme/dracula.css
vendored
7
src/lib/codemirror/theme/dracula.css
vendored
@ -16,7 +16,7 @@
|
||||
.cm-s-dracula .CodeMirror-gutters { color: #282a36; }
|
||||
.cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; }
|
||||
.cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; }
|
||||
.cm-s-dracula.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
|
||||
.cm-s-dracula .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
|
||||
.cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
|
||||
.cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
|
||||
.cm-s-dracula span.cm-comment { color: #6272a4; }
|
||||
@ -24,8 +24,7 @@
|
||||
.cm-s-dracula span.cm-number { color: #bd93f9; }
|
||||
.cm-s-dracula span.cm-variable { color: #50fa7b; }
|
||||
.cm-s-dracula span.cm-variable-2 { color: white; }
|
||||
.cm-s-dracula span.cm-def { color: #ffb86c; }
|
||||
.cm-s-dracula span.cm-keyword { color: #ff79c6; }
|
||||
.cm-s-dracula span.cm-def { color: #50fa7b; }
|
||||
.cm-s-dracula span.cm-operator { color: #ff79c6; }
|
||||
.cm-s-dracula span.cm-keyword { color: #ff79c6; }
|
||||
.cm-s-dracula span.cm-atom { color: #bd93f9; }
|
||||
@ -35,7 +34,7 @@
|
||||
.cm-s-dracula span.cm-qualifier { color: #50fa7b; }
|
||||
.cm-s-dracula span.cm-property { color: #66d9ef; }
|
||||
.cm-s-dracula span.cm-builtin { color: #50fa7b; }
|
||||
.cm-s-dracula span.cm-variable-3 { color: #50fa7b; }
|
||||
.cm-s-dracula span.cm-variable-3 { color: #ffb86c; }
|
||||
|
||||
.cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }
|
||||
.cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
|
||||
|
||||
2
src/lib/codemirror/theme/material.css
vendored
2
src/lib/codemirror/theme/material.css
vendored
@ -7,7 +7,7 @@
|
||||
|
||||
*/
|
||||
|
||||
.cm-s-material {
|
||||
.cm-s-material.CodeMirror {
|
||||
background-color: #263238;
|
||||
color: rgba(233, 237, 237, 1);
|
||||
}
|
||||
|
||||
1
src/lib/codemirror/theme/pastel-on-dark.css
vendored
1
src/lib/codemirror/theme/pastel-on-dark.css
vendored
@ -11,7 +11,6 @@
|
||||
background: #2c2827;
|
||||
color: #8F938F;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cm-s-pastel-on-dark div.CodeMirror-selected { background: rgba(221,240,255,0.2); }
|
||||
.cm-s-pastel-on-dark .CodeMirror-line::selection, .cm-s-pastel-on-dark .CodeMirror-line > span::selection, .cm-s-pastel-on-dark .CodeMirror-line > span > span::selection { background: rgba(221,240,255,0.2); }
|
||||
|
||||
36
src/lib/codemirror/theme/solarized.css
vendored
36
src/lib/codemirror/theme/solarized.css
vendored
@ -4,7 +4,7 @@ http://ethanschoonover.com/solarized
|
||||
*/
|
||||
|
||||
/*
|
||||
Solarized color pallet
|
||||
Solarized color palette
|
||||
http://ethanschoonover.com/solarized/img/solarized-palette.png
|
||||
*/
|
||||
|
||||
@ -34,7 +34,7 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
|
||||
}
|
||||
.cm-s-solarized.cm-s-dark {
|
||||
color: #839496;
|
||||
background-color: #002b36;
|
||||
background-color: #002b36;
|
||||
text-shadow: #002b36 0 1px;
|
||||
}
|
||||
.cm-s-solarized.cm-s-light {
|
||||
@ -113,32 +113,34 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
|
||||
box-shadow: inset 7px 0 12px -6px #000;
|
||||
}
|
||||
|
||||
/* Gutter border and some shadow from it */
|
||||
/* Remove gutter border */
|
||||
.cm-s-solarized .CodeMirror-gutters {
|
||||
border-right: 1px solid;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
/* Gutter colors and line number styling based of color scheme (dark / light) */
|
||||
|
||||
/* Dark */
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
|
||||
background-color: #002b36;
|
||||
border-color: #00232c;
|
||||
background-color: #073642;
|
||||
}
|
||||
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
|
||||
color: #586e75;
|
||||
text-shadow: #021014 0 -1px;
|
||||
}
|
||||
|
||||
/* Light */
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-gutters {
|
||||
background-color: #fdf6e3;
|
||||
border-color: #eee8d5;
|
||||
background-color: #eee8d5;
|
||||
}
|
||||
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-linenumber {
|
||||
color: #839496;
|
||||
}
|
||||
|
||||
/* Common */
|
||||
.cm-s-solarized .CodeMirror-linenumber {
|
||||
color: #586e75;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }
|
||||
@ -149,15 +151,19 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
|
||||
color: #586e75;
|
||||
}
|
||||
|
||||
/* Cursor */
|
||||
.cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; }
|
||||
|
||||
/*
|
||||
Active line. Negative margin compensates left padding of the text in the
|
||||
view-port
|
||||
*/
|
||||
/* Fat cursor */
|
||||
.cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; }
|
||||
.cm-s-solarized.cm-s-light .cm-animate-fat-cursor { background-color: #77ee77; }
|
||||
.cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: #586e75; }
|
||||
.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: #586e75; }
|
||||
|
||||
/* Active line */
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-activeline-background {
|
||||
background: rgba(0, 0, 0, 0.10);
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
@ -1142,6 +1142,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
|
||||
$('[data-setting=indentSize]').value = prefs.indentSize;
|
||||
$('[data-setting=indentWith][value=' + (prefs.indentWith || 'spaces') + ']').checked = true;
|
||||
$('[data-setting=isCodeBlastOn]').checked = prefs.isCodeBlastOn;
|
||||
$('[data-setting=editorTheme]').value = prefs.editorTheme;
|
||||
}
|
||||
|
||||
scope.updateSetting = function updateSetting(e) {
|
||||
@ -1157,14 +1158,17 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
|
||||
});
|
||||
}
|
||||
|
||||
scope.cm.js.setOption(
|
||||
'indentWithTabs',
|
||||
$('[data-setting=indentWith]:checked').value !== 'spaces'
|
||||
);
|
||||
['html', 'js', 'css'].forEach((type) => {
|
||||
scope.cm[type].setOption(
|
||||
'indentWithTabs',
|
||||
$('[data-setting=indentWith]:checked').value !== 'spaces'
|
||||
);
|
||||
|
||||
scope.cm.js.setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2 } : false);
|
||||
scope.cm.js.setOption('indentUnit', $('[data-setting=indentSize]').value);
|
||||
scope.cm.js.setOption('tabSize', $('[data-setting=indentSize]').value);
|
||||
scope.cm[type].setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2 } : false);
|
||||
scope.cm[type].setOption('indentUnit', $('[data-setting=indentSize]').value);
|
||||
scope.cm[type].setOption('tabSize', $('[data-setting=indentSize]').value);
|
||||
scope.cm[type].setOption('theme', $('[data-setting=editorTheme]').value);
|
||||
});
|
||||
};
|
||||
|
||||
function compileNodes() {
|
||||
@ -1430,7 +1434,8 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
|
||||
cssMode: 'css',
|
||||
isCodeBlastOn: false,
|
||||
indentWith: 'spaces',
|
||||
indentSize: 2
|
||||
indentSize: 2,
|
||||
editorTheme: 'monokai'
|
||||
}, function syncGetCallback(result) {
|
||||
if (result.preserveLastCode && lastCode) {
|
||||
unsavedEditCount = 0;
|
||||
@ -1456,6 +1461,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
|
||||
prefs.isCodeBlastOn = result.isCodeBlastOn;
|
||||
prefs.indentSize = result.indentSize;
|
||||
prefs.indentWith = result.indentWith;
|
||||
prefs.editorTheme = result.editorTheme;
|
||||
|
||||
updateSettingsInUi();
|
||||
scope.updateSetting();
|
||||
@ -1488,6 +1494,59 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
|
||||
}
|
||||
});
|
||||
|
||||
var options = '';
|
||||
[
|
||||
'selected>default',
|
||||
'3024-day',
|
||||
'3024-night',
|
||||
'abcdef',
|
||||
'ambiance',
|
||||
'base16-dark',
|
||||
'base16-light',
|
||||
'bespin',
|
||||
'blackboard',
|
||||
'cobalt',
|
||||
'colorforth',
|
||||
'dracula',
|
||||
'duotone-dark',
|
||||
'duotone-light',
|
||||
'eclipse',
|
||||
'elegant',
|
||||
'erlang-dark',
|
||||
'hopscotch',
|
||||
'icecoder',
|
||||
'isotope',
|
||||
'lesser-dark',
|
||||
'liquibyte',
|
||||
'material',
|
||||
'mbo',
|
||||
'mdn-like',
|
||||
'midnight',
|
||||
'monokai',
|
||||
'neat',
|
||||
'neo',
|
||||
'night',
|
||||
'panda-syntax',
|
||||
'paraiso-dark',
|
||||
'paraiso-light',
|
||||
'pastel-on-dark',
|
||||
'railscasts',
|
||||
'rubyblue',
|
||||
'seti',
|
||||
'solarized dark',
|
||||
'solarized light',
|
||||
'the-matrix',
|
||||
'tomorrow-night-bright',
|
||||
'tomorrow-night-eighties',
|
||||
'ttcn',
|
||||
'twilight',
|
||||
'vibrant-ink',
|
||||
'xq-dark',
|
||||
'xq-light',
|
||||
'yeti',
|
||||
'zenburn'
|
||||
].forEach((theme) => { options += '<option value="' + theme + '">' + theme + '</option>'; });
|
||||
document.querySelector('[data-setting="editorTheme"]').innerHTML = options;
|
||||
|
||||
requestAnimationFrame(compileNodes);
|
||||
}
|
||||
|
||||
@ -229,7 +229,7 @@ select, input[type="text"], textarea {
|
||||
.cm-s-monokai .CodeMirror-guttermarker-subtle {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.CodeMirror-activeline-background, .CodeMirror-activeline-gutter {
|
||||
.cm-s-monokai .CodeMirror-activeline-background, .cm-s-monokai .CodeMirror-activeline-gutter {
|
||||
background: rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
.CodeMirror-guttermarker-subtle {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user