Permalink
Browse files

Add basic editor theme support

This commit need some cleanup and a proper alternate
theme, preference storage and javascript cleanup is needed too.
  • Loading branch information...
1 parent 87d23d3 commit 55631e85124f075d3227434157d2d4ed47534f15 @aegypius aegypius committed Feb 24, 2012
@@ -0,0 +1,82 @@
+// 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;
+
+ .CodeMirror-gutter {
+ background-color: @rebase02;
+ border-right: 3px solid @rebase02;
+ }
+
+ span {
+ .cm-keyword { color: @rebase1; }
+ .cm-atom { .cm-keyword; }
+ .cm-number { .cm-keyword; }
+ .cm-def { .cm-keyword; }
+ .cm-variable{ .cm-keyword; }
+ .cm-variable-2{ .cm-keyword; }
+ .cm-variable-3{ .cm-keyword; }
+ .cm-property { .cm-keyword; }
+ .cm-operator { .cm-keyword; }
+ .cm-comment { .cm-keyword; }
+ .cm-string { .cm-keyword; }
+ .cm-meta { .cm-keyword; }
+ .cm-error{ .cm-keyword; }
+ .cm-qualifier{ .cm-keyword; }
+ .cm-builtin { .cm-keyword; }
+ .cm-bracket { .cm-keyword; }
+ .cm-tag { .cm-keyword; }
+ .cm-attribute { .cm-keyword; }
+ }
+}
+
+.accentize(@accent) {
+ color: @accent;
+}
+
+.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
@@ -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,7 @@
<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>
<!-- CodeMirror syntax highlighting modes -->
<script src="js/external/mode/javascript/javascript.js"></script>
@@ -68,8 +70,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="project-settings">Project Settings</span>
</ul>
<div id="lightbox">
<div class="setup">
@@ -176,6 +176,83 @@ var UserInterfaceController = function() {
connection.list()
})
+ $('#project-settings').click(function(e) {
+ e.preventDefault();
+ // 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 = 'cm-s-' + theme.name.toLowerCase().replace(/[^a-z0-9]/g, '-')
+ themes.push(theme);
+ });
+ });
+
+ // Create Overlay
+ var overlay = $('<div></div>')
+ .css({
+ 'position': 'absolute', 'background-color': '#000', 'z-index': 900, 'top' : 0, 'left' : 0,
+ 'right' : 0, 'bottom' : 0, 'opacity' : .3
+ })
+ .appendTo('body');
+
+ var dialog = $('<div class="dialog">'
+ +'<h1>Project Settings</h1><a href="#" class="close">&times;</a>'
+ +'<div class="content"></div></div>'
+ ).appendTo('body');
+
+ $(dialog).css({
+ 'position': 'fixed',
+ 'left': '50%',
+ 'top': 150,
+ 'max-width': 600,
+ 'min-width': 250,
+ 'padding': 15,
+ 'border': '1px solid #eee',
+ 'background': 'white',
+ 'z-index': 1000,
+ 'box-shadow': '0 1px 8px 0 black'
+ });
+
+ $('h1', dialog).css({
+ 'margin': '0 0 5px 0',
+ 'font-size': '16px',
+ 'font-weight': 'normal'
+ });
+
+ $('.close', dialog).css({
+ 'position': 'absolute',
+ 'top': 3,
+ 'right': 10,
+ 'text-decoration': 'none',
+ 'color': '#888',
+ 'font-size': 16,
+ 'font-weight': 'bold'
+ }).click(function() {
+ dialog.remove();
+ overlay.remove();
+ });
+
+ var content = $('.content', dialog).css({
+ 'padding' : '40px 20px'
+ });
+
+ // Theme Selection
+ var select = $('<label for="theme-selection">Theme : </label><select id="theme-selection"></select>').appendTo(content);
+ $.each(themes, function() {
+ $('<option value=' + this.value + '>' + this.name + '</option>').appendTo(select);
+ });
+
+ select.change(function() {
+ $('.CodeMirror-scroll')
+ .removeClass(themes.map(function(it) {return it.value;}).join(' '))
+ .addClass($(this).val());
+ });
+
+ });
+
var shouldDismissGearMenuOnMouseUp = false;
var hasJustDisplayedGearMenu = false;
$('#gear-menu').mousedown(function(e){
@@ -293,4 +370,4 @@ var UserInterfaceController = function() {
setCurrentEditor(editor)
}
-}
+}
Oops, something went wrong.

0 comments on commit 55631e8

Please sign in to comment.