From 3987aa97f4c9b60ae9c76354af09cb16245d01d9 Mon Sep 17 00:00:00 2001
From: Chongyuan <xiangcy@mit.edu>
Date: Wed, 11 Dec 2013 20:38:59 -0500
Subject: [PATCH 1/2] backbone for color scheme

---
 src/js/templates.js                     |  7 +++++++
 src/js/views/color-scheme.js            | 12 ++++++++++++
 src/js/views/options.js                 |  3 ++-
 src/templates/options/color-scheme.html |  4 ++++
 4 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/js/views/color-scheme.js
 create mode 100644 src/templates/options/color-scheme.html

diff --git a/src/js/templates.js b/src/js/templates.js
index 98b8c58..e270596 100644
--- a/src/js/templates.js
+++ b/src/js/templates.js
@@ -137,6 +137,13 @@ __p+='<textarea class="searchbar" placeholder="Search">'+
 }
 return __p;
 };
+ListIt.templates['options/color-scheme'] = function(obj){
+var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'')};
+with(obj||{}){
+__p+='<h3>Change Your Color Scheme</h3>\n<p>\nhello world!\n</p>';
+}
+return __p;
+};
 ListIt.templates['options/importexport'] = function(obj){
 var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'')};
 with(obj||{}){
diff --git a/src/js/views/color-scheme.js b/src/js/views/color-scheme.js
new file mode 100644
index 0000000..a455213
--- /dev/null
+++ b/src/js/views/color-scheme.js
@@ -0,0 +1,12 @@
+(function(L) {
+  'use strict';
+
+  L.views.ColorSchemeView = Backbone.View.extend({
+    id: 'options-color-scheme',
+    className: 'options-item', 
+    render: function() {
+      this.$el.html(L.templates["options/color-scheme"]());
+      return this;
+    }
+  });
+})(ListIt);
\ No newline at end of file
diff --git a/src/js/views/options.js b/src/js/views/options.js
index adef333..9c0b86f 100644
--- a/src/js/views/options.js
+++ b/src/js/views/options.js
@@ -17,7 +17,8 @@
           new L.views.ServerView({model: L.server}),
           new L.views.InfoView(),
           new L.views.PreferencesView({model: L.preferences}),
-          new L.views.ImportExportView()
+          new L.views.ImportExportView(),
+          new L.views.ColorSchemeView()
         ];
       }
     },
diff --git a/src/templates/options/color-scheme.html b/src/templates/options/color-scheme.html
new file mode 100644
index 0000000..7fcaeab
--- /dev/null
+++ b/src/templates/options/color-scheme.html
@@ -0,0 +1,4 @@
+<h3>Change Your Color Scheme</h3>
+<p>
+hello world!
+</p>
\ No newline at end of file

From 6dc70cb2da3a4c44e3cd9c3ba1ae93be5a09a7b3 Mon Sep 17 00:00:00 2001
From: Chongyuan <xiangcy@mit.edu>
Date: Wed, 11 Dec 2013 22:21:27 -0500
Subject: [PATCH 2/2] Beta version

---
 src/css/main.css                        | 13 +++++++++++++
 src/css/page-help.css                   |  1 -
 src/css/page-main.css                   |  1 -
 src/css/page-options.css                | 22 +++++++++++++++++++++-
 src/js/templates.js                     |  2 +-
 src/js/views/color-scheme.js            | 25 +++++++++++++++++++++++++
 src/js/views/help.js                    |  4 ++++
 src/js/views/main.js                    |  4 ++++
 src/js/views/options.js                 |  4 ++++
 src/templates/options/color-scheme.html |  8 +++++---
 10 files changed, 77 insertions(+), 7 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index 1656574..6e8976d 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -22,6 +22,19 @@ html, body {
   bottom: 0;
   top: 0;
   position: absolute;
+  background-color: rgb(255, 250, 233);
+}
+
+.scheme-red {
+  background-color: #ff7373;
+}
+
+.scheme-green {
+  background-color: #65E17B;
+}
+
+.scheme-blue {
+  background-color: #6899d3;
 }
 
 .jiggly {
diff --git a/src/css/page-help.css b/src/css/page-help.css
index e1fe48e..50607fb 100644
--- a/src/css/page-help.css
+++ b/src/css/page-help.css
@@ -12,7 +12,6 @@
   overflow-y: auto;
   overflow-x: none;
   font-family: Trebuchet MS, Helvetica, sans-serif;
-  background-color: rgb(255, 250, 233);
 }
 
 #help-header {
diff --git a/src/css/page-main.css b/src/css/page-main.css
index 8679d71..1daf149 100644
--- a/src/css/page-main.css
+++ b/src/css/page-main.css
@@ -23,7 +23,6 @@
 }
 
 #page-main {
-  background-color: rgb(255, 250, 233); /*(240, 100%, 99%);*/
   overflow: auto;
   top: 0;
   bottom: 0;
diff --git a/src/css/page-options.css b/src/css/page-options.css
index fc0f88c..dcfc34a 100644
--- a/src/css/page-options.css
+++ b/src/css/page-options.css
@@ -16,7 +16,6 @@ a, .tabbar a {
   overflow-y: auto;
   overflow-x: none;
   font-family: Trebuchet MS, Helvetica, sans-serif;
-  background-color: rgb(255, 250, 233);
 }
 
 #options-header {
@@ -157,3 +156,24 @@ a, .tabbar a {
     width: auto;
     height: 30px;
 }
+
+.color-item {
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+}
+
+.color-scheme #color-scheme-red {
+  background-color: #ff7373;
+  border: 1px solid #ff4040;
+}
+
+.color-scheme #color-scheme-green {
+  background-color: #65E17B;
+  border: 1px solid #38E156;
+}
+
+.color-scheme #color-scheme-blue {
+  background-color: #6899d3;
+  border: 1px solid #4284d3;
+}
diff --git a/src/js/templates.js b/src/js/templates.js
index e270596..be7302f 100644
--- a/src/js/templates.js
+++ b/src/js/templates.js
@@ -140,7 +140,7 @@ return __p;
 ListIt.templates['options/color-scheme'] = function(obj){
 var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'')};
 with(obj||{}){
-__p+='<h3>Change Your Color Scheme</h3>\n<p>\nhello world!\n</p>';
+__p+='<h3>Change Your Color Scheme</h3>\n<ul class="color-scheme hlist">\n  <li class="color-item" id="color-scheme-red"></li>\n  <li class="color-item" id="color-scheme-green"></li>\n  <li class="color-item" id="color-scheme-blue"></li>\n</ul>';
 }
 return __p;
 };
diff --git a/src/js/views/color-scheme.js b/src/js/views/color-scheme.js
index a455213..4b7c45a 100644
--- a/src/js/views/color-scheme.js
+++ b/src/js/views/color-scheme.js
@@ -7,6 +7,31 @@
     render: function() {
       this.$el.html(L.templates["options/color-scheme"]());
       return this;
+    },
+
+    events: {
+      'click #color-scheme-red': 'red',
+      'click #color-scheme-blue': 'blue',
+      'click #color-scheme-green': 'green'
+    },
+
+    red: function(event){
+      L.pages['options'].change_color("scheme-red");
+      // L.pages['help'].change_color("scheme-red");
+      // L.pages['main'].change_color("scheme-red");
+    },
+
+    blue: function(event){
+      L.pages['options'].change_color("scheme-blue");
+      // L.pages['help'].change_color("scheme-blue");
+      // L.pages['main'].change_color("scheme-blue");
+    },
+
+    green: function(event){
+      L.pages['options'].change_color("scheme-green");
+      // L.pages['help'].change_color("scheme-green");
+      // L.pages['main'].change_color("scheme-green");
     }
+
   });
 })(ListIt);
\ No newline at end of file
diff --git a/src/js/views/help.js b/src/js/views/help.js
index c3d65ab..161e7ed 100644
--- a/src/js/views/help.js
+++ b/src/js/views/help.js
@@ -19,6 +19,10 @@
       }
 
       return this;
+    },
+    change_color: function(new_scheme){
+      this.$el.attr("class", "page");
+      this.$el.addClass(new_scheme);
     }
   });
 })(ListIt);
diff --git a/src/js/views/main.js b/src/js/views/main.js
index c4b16d0..ae27b9f 100644
--- a/src/js/views/main.js
+++ b/src/js/views/main.js
@@ -34,6 +34,10 @@
         view.render();
       });
       return this;
+    },
+    change_color: function(new_scheme){
+      this.$el.attr("class", "page");
+      this.$el.addClass(new_scheme);
     }
   });
 })(ListIt);
diff --git a/src/js/views/options.js b/src/js/views/options.js
index 9c0b86f..63fc0a1 100644
--- a/src/js/views/options.js
+++ b/src/js/views/options.js
@@ -30,6 +30,10 @@
         body.append(panel.render().el);
       });
       return this;
+    },
+    change_color: function(new_scheme){
+      this.$el.attr("class", "page");
+      this.$el.addClass(new_scheme);
     }
   });
 
diff --git a/src/templates/options/color-scheme.html b/src/templates/options/color-scheme.html
index 7fcaeab..a59927b 100644
--- a/src/templates/options/color-scheme.html
+++ b/src/templates/options/color-scheme.html
@@ -1,4 +1,6 @@
 <h3>Change Your Color Scheme</h3>
-<p>
-hello world!
-</p>
\ No newline at end of file
+<ul class="color-scheme hlist">
+  <li class="color-item" id="color-scheme-red"></li>
+  <li class="color-item" id="color-scheme-green"></li>
+  <li class="color-item" id="color-scheme-blue"></li>
+</ul>
\ No newline at end of file