3 files changed, 50 insertions, 0 deletions
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 3eb2861..166fc50 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -64,6 +64,7 @@ var LightControl = View.extend({
   pick: function(rgb, Lab){
     this.labColor = Lab
     this.setSwatchColor(this.mode, rgb)
+    console.log(rgb)
     Walls.setColor[ this.mode ](rgb)
   },
   
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index a7e92b6..1e70aa2 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -2,8 +2,26 @@ var Presets = View.extend({
 	el: "#presets",
 	
 	events: {
+		"mousedown": "stopPropagation",
     "click .presets span": "selectPreset",
+    "click .swatches span": "selectColor",
 	},
+	
+	colors: [
+		[255,94,58],
+		[255,149,0],
+		[255,219,76],
+		[76,217,100],
+		[52,170,220],
+		[29,98,240],
+		[198,68,252],
+		[0,0,0],
+		[74,74,74],
+		[125,126,127],
+		[209,211,212],
+		[235,235,235],
+		[255,255,255],
+	],
 
   presets: {
     wireframe: {
@@ -34,6 +52,13 @@ var Presets = View.extend({
   
   initialize: function(opt){
     this.parent = opt.parent
+    this.$colors = this.$(".colors")
+    this.colors.forEach(function(color){
+    	var $swatch = $("<span>")
+    	$swatch.css("background-color","rgb(" + color + ")")
+    	$swatch.data('color', color)
+    	this.$colors.append($swatch)
+    }.bind(this))
   },
 
   toggle: function(state){
@@ -56,4 +81,9 @@ var Presets = View.extend({
     $(e.currentTarget).addClass('active')
   },
   
+  selectColor: function(e){
+    var preset = $(e.currentTarget).data('color')
+    console.log(preset)
+  },
+  
 })
 \ No newline at end of file
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 038b0c4..731a92b 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -138,10 +138,12 @@ a{
 	display: none;
 	z-index: 10;
 	pointer-events: none;
+	background-size: cover;
 }
 .floatingSwatch.scissors {
   background-image: url(/assets/img/scissors.png) !important;
   background-repeat: no-repeat;
+  background-size: auto;
   border: 0;
   box-shadow: 0 0 transparent;
 }
@@ -1484,6 +1486,23 @@ border-left: 1px solid black;
 	padding-bottom: 6px;
 }
 
+#presets .colors {
+	margin-bottom: 5px;
+}
+#presets .colors span {
+	display: inline-block;
+	font-size: 0;
+	width: 20px;
+	height: 20px;
+	border: 1px solid #ddd;
+	margin: 0px 2px 0 0;
+	cursor: pointer;
+	transition: transform 0.2s;
+}
+#presets .colors span:hover {
+	transform: translateX(3px) translateY(-3px);
+}
+
 .toolButton {
 	border: 1px solid;
 	display: inline-block;