toggle color picker, swatches, done button, etc

3 files changed, 40 insertions, 7 deletions

diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index c5902b2..5013408 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -13,8 +13,10 @@ var TextEditor = FormView.extend({
 		"change [name=text-align]": 'changeTextAlign',
 		"click .swatch": 'showColorPicker',
 		"click [data-role=hide-color-picker]": 'hideColorPicker',
+		"click [data-role=hide-text-editor]": 'hide',
 		"input [name=text-body]": 'changeText',
 		"click [data-role=destroy-text]": "destroy",
+    "click .colors span": "setHue",
 	},
 	
 	initialize: function(opt){
@@ -34,13 +36,22 @@ var TextEditor = FormView.extend({
     this.$(".color-picker").append( this.colorPicker.canvas )
     this.$(".color-picker").append( this.colorPicker.cursor )
     this.$(".slider").append( this.colorPicker.brightness )
-    
+
+    this.$colors = this.$(".colors")
+    this.parent.colorControl.colors.forEach(function(color){
+    	var $swatch = $("<span>")
+    	$swatch.css("background-color","rgb(" + color + ")")
+    	$swatch.data('color', color)
+    	this.$colors.append($swatch)
+    }.bind(this))
+
     this.$(".setting").hide()
 
     app.on("cancel-scenery", function(){
       this.createMode(true)
       $("body").toggleClass("addText", false)
     }.bind(this))
+
 	},
 
   toggle: function(state){
@@ -100,7 +111,7 @@ var TextEditor = FormView.extend({
 	},
   
   createMode: function(state){
-    this.$colorSettings.hide()
+    this.hideColorPicker()
     this.$textSettings.toggle(! state)
     this.$noTextMessage.toggle(!! state)
     $("body").toggleClass("addText", !! state)
@@ -169,24 +180,36 @@ var TextEditor = FormView.extend({
     this.$textSettings.hide()
     this.$colorSettings.show()
     
-    this.labColor = this.colorPicker.load(this.scenery.media.font.color)
+	  var color = this.scenery.media.font.color
+    this.labColor = this.colorPicker.load(color)
     this.pickColor(color, this.labColor)
+    
+    this.$el.addClass("color-mode")
   },
+  
 	hideColorPicker: function(e){
 	  e && e.preventDefault()
     this.$textSettings.show()
     this.$colorSettings.hide()
+    this.$el.removeClass("color-mode")
 	},
 
   pickColor: function(rgb, Lab){
     this.labColor = Lab
     this.setSwatchColor(rgb)
     this.scenery.setFont({ color: rgb })
+		this.tainted = true
+  },
+
+  setHue: function(e){
+  	var color = $(e.currentTarget).data('color')
+    this.labColor = this.colorPicker.load(color)
+    this.pickColor(color, this.labColor)
   },
   
   initialState: null,
   
-  begin: function(){  
+  begin: function(){
     // this.initialState = this.serialize()
   },
   
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index b8ede80..814df90 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1992,6 +1992,12 @@ input[type="range"]::-webkit-slider-thumb {
   cursor: pointer;
   float: none;
 }
+#textEditor.color-mode {
+  width: 180px;
+}
+#textEditor.color-mode h4:after {
+  content: ' Colors';
+}
 
 .settings.active {
   -webkit-transform: translateY(0px);
diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs
index 2423e9f..baf9239 100644
--- a/views/controls/editor/text-editor.ejs
+++ b/views/controls/editor/text-editor.ejs
@@ -54,15 +54,19 @@
   </div>
   
 	<div class="setting text-setting">
-		<a href="#" class="warn btn" data-role="destroy-text">remove from wall</a>
+    <a href="#" class="btn left" data-role="hide-text-editor">done</a>
+		<a href="#" class="warn btn right" data-role="destroy-text">remove from wall</a>
 	</div>
 	
 	<div class="setting color-setting">
-    <a href="#" class="btn" data-role="hide-color-picker">done</a>
+    <a href="#" class="btn" data-role="hide-color-picker">done</a><br><br>
+
+    <div class="colors">
+    </div>
 
     <div class="color-picker">
     </div>
-  
+
     <div class="slider">
     </div>
 	</div>