diff options
| -rw-r--r-- | public/assets/javascripts/ui/editor/TextEditor.js | 31 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 6 | ||||
| -rw-r--r-- | views/controls/editor/text-editor.ejs | 10 |
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> |