Skip to content

Commit

Permalink
Merge pull request #42 from aegypius/feature/31-alternate-editor-colo…
Browse files Browse the repository at this point in the history
…r-schemes

#31 : Alternate editor color schemes
  • Loading branch information
coreh committed Apr 17, 2012
2 parents 87d23d3 + 2114483 commit 993520e
Show file tree
Hide file tree
Showing 8 changed files with 275 additions and 4 deletions.
107 changes: 107 additions & 0 deletions client/css/codemirror-solarized.less
Original file line number Diff line number Diff line change
@@ -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);
}
40 changes: 40 additions & 0 deletions client/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
7 changes: 7 additions & 0 deletions client/dialog.html
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 8 additions & 3 deletions client/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
1 change: 1 addition & 0 deletions client/js/CodeEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
57 changes: 56 additions & 1 deletion client/js/UserInterfaceController.js
Original file line number Diff line number Diff line change
Expand Up @@ -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']
Expand Down Expand Up @@ -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){
Expand Down Expand Up @@ -293,4 +348,4 @@ var UserInterfaceController = function() {

setCurrentEditor(editor)
}
}
}
47 changes: 47 additions & 0 deletions client/js/external/jquery.cookie.js
Original file line number Diff line number Diff line change
@@ -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);
9 changes: 9 additions & 0 deletions client/js/external/less-1.2.1.min.js

Large diffs are not rendered by default.

0 comments on commit 993520e

Please sign in to comment.