#31 : Alternate editor color schemes #42

Merged
merged 2 commits into from Apr 17, 2012
Jump to file or symbol
Failed to load files and symbols.
+275 −4
Split
@@ -0,0 +1,107 @@
+// SOLARIZED HEX 16/8 TERMCOL XTERM/HEX L*A*B RGB HSB
+// --------- ------- ---- ------- ----------- ---------- ----------- -----------
+// base03 #002b36 8/4 brblack 234 #1c1c1c 15 -12 -12 0 43 54 193 100 21
+// base02 #073642 0/4 black 235 #262626 20 -12 -12 7 54 66 192 90 26
+// base01 #586e75 10/7 brgreen 240 #585858 45 -07 -07 88 110 117 194 25 46
+// base00 #657b83 11/7 bryellow 241 #626262 50 -07 -07 101 123 131 195 23 51
+// base0 #839496 12/6 brblue 244 #808080 60 -06 -03 131 148 150 186 13 59
+// base1 #93a1a1 14/4 brcyan 245 #8a8a8a 65 -05 -02 147 161 161 180 9 63
+// base2 #eee8d5 7/7 white 254 #e4e4e4 92 -00 10 238 232 213 44 11 93
+// base3 #fdf6e3 15/7 brwhite 230 #ffffd7 97 00 10 253 246 227 44 10 99
+// yellow #b58900 3/3 yellow 136 #af8700 60 10 65 181 137 0 45 100 71
+// orange #cb4b16 9/3 brred 166 #d75f00 50 50 55 203 75 22 18 89 80
+// red #dc322f 1/1 red 160 #d70000 50 65 45 220 50 47 1 79 86
+// magenta #d33682 5/5 magenta 125 #af005f 50 65 -05 211 54 130 331 74 83
+// violet #6c71c4 13/5 brmagenta 61 #5f5faf 50 15 -45 108 113 196 237 45 77
+// blue #268bd2 4/4 blue 33 #0087ff 55 -10 -45 38 139 210 205 82 82
+// cyan #2aa198 6/6 cyan 37 #00afaf 60 -35 -05 42 161 152 175 74 63
+// green #859900 2/2 green 64 #5f8700 60 -20 65 133 153 0 68 100 60
+
+@base03: #002b36;
+@base02: #073642;
+@base01: #586e75;
+@base00: #657b83;
+@base0: #839496;
+@base1: #93a1a1;
+@base2: #eee8d5;
+@base3: #fdf6e3;
+@yellow: #b58900;
+@orange: #cb4b16;
+@red: #dc322f;
+@magenta: #d33682;
+@violet: #6c71c4;
+@blue: #268bd2;
+@cyan: #2aa198;
+@green: #859900;
+
+html * {
+ color-profile: sRGB;
+ rendering-intent: auto;
+}
+
+.rebase(@rebase03,@rebase02,@rebase01,@rebase00,@rebase0,@rebase1,@rebase2,@rebase3) {
+ background-color: @rebase03;
+ color: @rebase0;
+
+ .emphasis { font-weight:bold;}
+ .dotted { border-bottom: 1px dotted @orange; }
+
+ .CodeMirror-gutter {
+ background-color: @rebase02;
+ border-right: 3px solid @rebase02;
+ .CodeMirror-gutter-text {
+ color: @rebase01;
+ }
+ }
+ .CodeMirror-cursor {
+ border-left-color: @rebase3 !important;
+ }
+
+ .CodeMirror-matchingbracket {
+ color: @rebase3;
+ background-color: @rebase02;
+ box-shadow: 0 0 10px @rebase02;
+ .emphasis;
+ }
+ .CodeMirror-nonmatchingbracket {
+ .CodeMirror-matchingbracket;
+ color: @red;
+ .dotted;
+ }
+
+ span {
+ &.cm-keyword { color: @rebase0; .emphasis; }
+ &.cm-atom { color: @cyan; }
+ &.cm-number { color: @rebase1; }
+ &.cm-def { color: @blue; }
+
+ &.cm-variable{ color: @orange; }
+ &.cm-variable-2{ .cm-variable; }
+ &.cm-variable-3{ .cm-variable; }
+
+ &.cm-comment { color: @rebase01; }
+
+ &.cm-property { color: @yellow; }
+ &.cm-operator { color: @rebase0; }
+ &.cm-string { color: @violet; }
+ &.cm-error{ .emphasis; .dotted; }
+ &.cm-bracket { color: @orange; }
+
+ &.cm-tag { color: @rebase0; }
+ &.cm-attribute { color: @rebase1; .emphasis; }
+ &.cm-meta { color: @blue; }
+
+ // Unstyled
+ &.cm-qualifier{ }
+ &.cm-builtin { }
+ &.cm-null {}
+ &.cm-undefined {}
+ }
+}
+
+.cm-s-solarized-light {
+ .rebase(@base3, @base2, @base1, @base0, @base00, @base01, @base02, @base03);
+}
+.cm-s-solarized-dark {
+ .rebase(@base03, @base02, @base01, @base00, @base0, @base1, @base2, @base3);
+}
View
@@ -498,4 +498,44 @@ body {
float: right;
position: relative;
left: 1px;
+}
+
+#dialog-overlay {
+ position: absolute;
+ overflow: hidden;
+ left: 0; top: 0; right: 0; bottom: 0;
+ background: #000;
+ opacity: .3;
+ z-index: 900
+}
+
+.dialog {
+ position: fixed;
+ max-width: 600px;
+ min-width: 250px;
+ padding: 15px;
+ border: 1px solid #eee;
+ background: white;
+ z-index: 1000;
+ box-shadow: 0 1px 8px 0 black
+}
+
+.dialog h1 {
+ margin: 0 0 5px 0;
+ font-size: 16px;
+ font-weight: normal
+}
+
+.dialog .dialog-close {
+ position: absolute;
+ top: 3px;
+ right: 10px;
+ text-decoration: none;
+ color: #888;
+ font-size: 16px;
+ font-weight: bold
+}
+
+.dialog .dialog-content {
+ padding : 40px 20px
}
View
@@ -0,0 +1,7 @@
+<div id="dialog-overlay"></div>
+<div class="dialog">
+ <h1 class="dialog-title"></h1>
+ <a class="dialog-close" href="#close">&times;</a>
+ <div class="dialog-content">
+ </div>
+</div>
View
@@ -6,7 +6,8 @@
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/codemirror.css">
- <link rel="stylesheet" href="css/codemirror-default.css">
+ <link rel="stylesheet" href="css/codemirror-default.css" name="Default">
+ <link rel="stylesheet/less" href="css/codemirror-solarized.less" name="Solarized Light, Solarized Dark">
<!-- External Dependencies -->
<script src="socket.io/socket.io.js"></script>
@@ -15,6 +16,8 @@
<script src="js/external/transformjs.1.0.beta.2.js"></script>
<script src="js/external/codemirror.js"></script>
<script src="js/external/jquery.easydate-0.2.4.js"></script>
+ <script src="js/external/less-1.2.1.min.js"></script>
+ <script src="js/external/jquery.cookie.js"></script>
<!-- CodeMirror syntax highlighting modes -->
<script src="js/external/mode/javascript/javascript.js"></script>
@@ -68,8 +71,10 @@
</div>
<div id="content"></div>
<ul id="gear-menu-popup" class="popup-menu">
- <li><span id="project-refresh"><img src="img/refresh.png"> Refresh</span>
- <li class="checkbox"><input type="checkbox" id="show-hidden"><label for="show-hidden">Show Hidden Files</label>
+ <li><span id="project-refresh"><img src="img/refresh.png"> Refresh</span>
+ <li class="checkbox"><input type="checkbox" id="show-hidden"><label for="show-hidden">Show Hidden Files</label>
+ <li class="separator"><hr>
+ <li><span id="preference-settings">Preferences</span>
</ul>
<div id="lightbox">
<div class="setup">
View
@@ -29,6 +29,7 @@
var createCodeMirror = function(parentNode, contents, path, options) {
var mode = inferCodeMirrorModeFromPath(path);
var options = {
+ theme: $.cookie('editor-theme') || 'default',
value: contents,
mode: mode,
lineNumbers: true,
@@ -6,6 +6,20 @@ var UserInterfaceController = function() {
var fileHtmlElementByPath
var stateByPath = {}
var fileEntries = []
+ var editorThemes = (function() {
+ // Getting available themes
+ var themes = [];
+ $('link[rel^="stylesheet"][name]').each(function() {
+ var $link = $(this);
+ $.each($link.attr('name').split(','), function(id, item) {
+ var theme = {};
+ theme.name = item.replace(/(^\s*|\s*$)/, '');
+ theme.value = theme.name.toLowerCase().replace(/[^a-z0-9]/g, '-');
+ themes.push(theme);
+ });
+ });
+ return themes;
+ })();
var ignore = ['.git', '.nide', '.DS_Store']
var limitRecursion = ['node_modules']
@@ -176,6 +190,47 @@ var UserInterfaceController = function() {
connection.list()
})
+ $('#preference-settings').click(function(e) {
+ e.preventDefault();
+ // Create Overlay
+ $.get('dialog.html', function(response) {
+ $('body').append(response);
+ $('.dialog-title').html('Preferences');
+ $('.dialog-content').html(
+ '<label for="theme-selection">Editor Theme : <select id="theme-selection"></select></label>'
+ );
+
+ // Center Dialog
+ $(window).resize(function() {
+ $('.dialog').css({
+ 'top' : ($(window).height() - $('.dialog').outerHeight()) / 2,
+ 'left' : ($(window).width() - $('.dialog').outerWidth()) / 2
+ });
+ }).resize();
+
+ var $theme_selection = $('#theme-selection');
+ $.each(editorThemes || [], function() {
+ $('<option value=' + this.value + '>' + this.name + '</option>')
+ .attr('selected', ($.cookie('editor-theme') == this.value))
+ .appendTo($theme_selection);
+ });
+ $theme_selection.change(function() {
+ $('.CodeMirror-scroll')
+ .removeClass(editorThemes.map(function(it) {return 'cm-s-' + it.value;}).join(' '))
+ .addClass('cm-s-' + $(this).val());
+ // Store current value to a cookie
+ $.cookie('editor-theme', $(this).val(), {expires: 30});
+ });
+
+ $('.dialog-close').click(function(e) {
+ e.preventDefault();
+ $('#dialog-overlay, .dialog').fadeOut(200, function() {
+ $(this).remove();
+ });
+ });
+ });
+ });
+
var shouldDismissGearMenuOnMouseUp = false;
var hasJustDisplayedGearMenu = false;
$('#gear-menu').mousedown(function(e){
@@ -293,4 +348,4 @@ var UserInterfaceController = function() {
setCurrentEditor(editor)
}
-}
+}
@@ -0,0 +1,47 @@
+/*!
+ * jQuery Cookie Plugin
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2011, Klaus Hartl
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.opensource.org/licenses/GPL-2.0
+ */
+(function($) {
+ $.cookie = function(key, value, options) {
+
+ // key and at least value given, set cookie...
+ if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
+ options = $.extend({}, options);
+
+ if (value === null || value === undefined) {
+ options.expires = -1;
+ }
+
+ if (typeof options.expires === 'number') {
+ var days = options.expires, t = options.expires = new Date();
+ t.setDate(t.getDate() + days);
+ }
+
+ value = String(value);
+
+ return (document.cookie = [
+ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
+ options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+ options.path ? '; path=' + options.path : '',
+ options.domain ? '; domain=' + options.domain : '',
+ options.secure ? '; secure' : ''
+ ].join(''));
+ }
+
+ // key and possibly options given, get cookie...
+ options = value || {};
+ var decode = options.raw ? function(s) { return s; } : decodeURIComponent;
+
+ var pairs = document.cookie.split('; ');
+ for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) {
+ if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined
+ }
+ return null;
+ };
+})(jQuery);

Large diffs are not rendered by default.

Oops, something went wrong.