From c19fbc87676404636a2f5df304ddd7875fc98e66 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 16:01:13 -0400 Subject: new scenery type: text --- public/assets/javascripts/mx/primitives/mx.text.js | 67 +++++++++++++--------- 1 file changed, 41 insertions(+), 26 deletions(-) (limited to 'public/assets/javascripts/mx/primitives/mx.text.js') diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 9c7af5c..7b8e595 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -3,34 +3,49 @@ MX.Text = MX.Object3D.extend({ init: function (ops) { this.type = "Text" - - var layer = new MX.Object3D('text') - layer.width = ops.width || 100 - layer.height = ops.height || 50 - layer.x = ops.x || 0 - layer.y = ops.y || 0 - layer.z = ops.z || 0 - layer.scale = ops.scale || 1 - layer.el.innerHTML = ops.value || "" - if (ops.id) layer.el.id = ops.id; - if (ops.background) layer.el.style.background = ops.background; - if (ops.color) layer.el.style.color = ops.color; - if (ops.fontSize) layer.el.style.fontSize = ops.fontSize + "px"; - this.add(layer) + this.type = "Image" + this.media = ops.media + this.width = 0 + this.height = 0 + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.scale = ops.scale || 1 + this.backface = ops.backface || false - this.children.forEach(function (c, i) { - if (ops.classname) { - c.el.classList.add(ops.classname) - } - else { - } - c.el.style.backgroundRepeat = 'no-repeat' - }) + this.scale = ops.scale || 1 + this.width = ops.media.width + this.height = ops.media.height + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.rotationX = ops.rotationX || 0 + this.rotationY = ops.rotationY || 0 + this.rotationZ = ops.rotationZ || 0 + + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("text") + this.el.classList.add("mx-scenery") + + this.inner = document.createElement("div") + this.inner.style.width = "100%" + this.el.appendChild(this.inner) + + this.load(ops) + }, + + load: function(ops){ + if (ops.color) this.el.style.color = ops.color; + if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif"; + if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px"; - this.dirty = true - this.updateChildren = true - this.update() - } + this.inner.innerHTML = ops.media.description || "" + }, + + setText: function(text){ + this.inner.innerHTML = text + }, }) -- cgit v1.2.3-70-g09d2 From 1dae6e5dfce901cdadeebd2e191927dbc5a326f6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 16:07:21 -0400 Subject: bower: adding marked --- bower.json | 3 ++- public/assets/javascripts/defaults.js | 7 +++++++ public/assets/javascripts/mx/primitives/mx.text.js | 8 ++++---- .../javascripts/rectangles/engine/scenery/types/text.js | 2 +- public/assets/javascripts/ui/editor/MediaEditor.js | 10 ++++++---- public/assets/javascripts/ui/editor/TextEditor.js | 6 ++++-- public/assets/stylesheets/app.css | 12 +++++++++++- views/partials/scripts.ejs | 1 + 8 files changed, 36 insertions(+), 13 deletions(-) (limited to 'public/assets/javascripts/mx/primitives/mx.text.js') diff --git a/bower.json b/bower.json index faffbfb..5f35d6c 100644 --- a/bower.json +++ b/bower.json @@ -8,6 +8,7 @@ "lodash": "", "fiber": "", "jquery-jsonview": "1.2.0", - "prefixfree": "" + "prefixfree": "", + "marked": "0.3.2" } } diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 038a882..c779233 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -12,3 +12,10 @@ app.defaults = { ceiling: [255,255,255], }, } + +marked.setOptions({ + gfm: true, + breaks: true, + sanitize: true, + smartypants: true, +}) diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 7b8e595..b4089f3 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -26,11 +26,11 @@ MX.Text = MX.Object3D.extend({ ops.className && this.el.classList.add(ops.className) this.backface && this.el.classList.add("backface-visible") - this.el.classList.add("text") + this.el.classList.add("mx-text") this.el.classList.add("mx-scenery") this.inner = document.createElement("div") - this.inner.style.width = "100%" + this.inner.classList.add("inner") this.el.appendChild(this.inner) this.load(ops) @@ -41,11 +41,11 @@ MX.Text = MX.Object3D.extend({ if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif"; if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px"; - this.inner.innerHTML = ops.media.description || "" + this.inner.innerHTML = marked( ops.media.description || "" ) }, setText: function(text){ - this.inner.innerHTML = text + this.inner.innerHTML = marked( text || "" ) }, }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js index 16c7a5c..20e9883 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/text.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js @@ -47,7 +47,7 @@ Scenery.types.text = Scenery.types.base.extend(function(base){ setText: function(text){ this.media.description = text - this.mx.setText(text) + this.mx.setText( text ) }, serialize: function(){ diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 0a4d894..9b81db1 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -160,10 +160,12 @@ var MediaEditor = FormView.extend({ }, unbind: function(){ - if (this.scenery && this.tainted) { - this.scenery.media.title = this.$name.val() - this.scenery.media.description = this.$description.val() - Minotaur.watch( app.router.editorView.settings ) + if (this.scenery) { + if (this.tainted) { + this.scenery.media.title = this.$name.val() + this.scenery.media.description = this.$description.val() + Minotaur.watch( app.router.editorView.settings ) + } if (this.scenery.mx) { this.scenery.mx.bound = false this.scenery.mx.el.classList.remove("picked") diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 0d082ca..3d3124b 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -55,8 +55,10 @@ var TextEditor = FormView.extend({ }, unbind: function(){ - if (this.scenery && this.tainted) { - Minotaur.watch( app.router.editorView.settings ) + if (this.scenery) { + if (this.tainted) { + Minotaur.watch( app.router.editorView.settings ) + } if (this.scenery.mx) { this.scenery.mx.bound = false diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e746cad..02bbe6a 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -698,6 +698,16 @@ iframe.embed { .mx-object3d video { pointer-events: none; } +.mx-text { + overflow: hidden; +} +.mx-text .inner { + width: 100%; + pointer-events: none; +} +.mx-text p { + margin-bottom: 1em; +} #keyhint { position: fixed; bottom:0; @@ -2117,7 +2127,7 @@ a[data-role="forgot-password"] { background: white; padding: 10px; margin: 20px auto; -position: relative; + position: relative; } .collaborators button { diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 35dd782..f768160 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -3,6 +3,7 @@ + -- cgit v1.2.3-70-g09d2 From 4d78b32ce840bb804221f0208ee7cb0c8ffa8e02 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 18:13:58 -0400 Subject: setting font family & size --- public/assets/javascripts/defaults.js | 2 -- public/assets/javascripts/mx/primitives/mx.text.js | 19 +++++++++++++++---- .../rectangles/engine/scenery/types/text.js | 11 ++++++++++- public/assets/javascripts/ui/editor/TextEditor.js | 13 ++++++++++++- public/assets/stylesheets/app.css | 9 +++++++-- 5 files changed, 44 insertions(+), 10 deletions(-) (limited to 'public/assets/javascripts/mx/primitives/mx.text.js') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index c779233..9ba0b4d 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -14,8 +14,6 @@ app.defaults = { } marked.setOptions({ - gfm: true, - breaks: true, sanitize: true, smartypants: true, }) diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index b4089f3..8db28d0 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -37,11 +37,22 @@ MX.Text = MX.Object3D.extend({ }, load: function(ops){ - if (ops.color) this.el.style.color = ops.color; - if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif"; - if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px"; + var media = ops.media + if (media.color) this.el.style.color = media.color; + if (media.font) this.setFont(media.font) + if (media.align) this.setAlign(media.align) - this.inner.innerHTML = marked( ops.media.description || "" ) + this.setText( media.description ) + }, + + setAlign: function(align) { + this.el.style.textAlign = "align" + }, + + setFont: function(font){ + console.log(font) + this.inner.style.fontFamily = "'" + font.family + "',sans-serif" + this.el.style.fontSize = (2 * font.size) + "pt" }, setText: function(text){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js index 20e9883..a10a332 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/text.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js @@ -7,7 +7,7 @@ Scenery.types.text = Scenery.types.base.extend(function(base){ init: function(opt){ - opt.scale = 1 + opt.scale = 0.5 base.init.call(this, opt) @@ -49,6 +49,15 @@ Scenery.types.text = Scenery.types.base.extend(function(base){ this.media.description = text this.mx.setText( text ) }, + + setFont: function(style){ + for (var i in style) { + if (style.hasOwnProperty(i)) { + this.media.font[i] = style[i] + } + } + this.mx.setFont(this.media.font) + }, serialize: function(){ var data = base.serialize.call(this) diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 3d3124b..c867d94 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -30,7 +30,15 @@ var TextEditor = FormView.extend({ this.$el.toggleClass("active", state) if (state) { - Scenery.nextMedia = { type: 'text', width: 300, height: 150 } + Scenery.nextMedia = { + type: 'text', + width: 600, + height: 450, + scale: 0.5, + font: { family: 'Lato', size: 12 }, + align: 'left', + } + this.createMode(true) } }, @@ -101,9 +109,12 @@ var TextEditor = FormView.extend({ }, changeFontFamily: function(){ + this.scenery.setFont({ family: this.$fontFamily.val() }) }, changeFontSize: function(){ + var size = parseInt( this.$fontSize.val() ) + size && this.scenery.setFont({ size: size }) }, changeText: function(e){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 02bbe6a..1c20493 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -4,9 +4,11 @@ margin:0; padding:0; outline:0; - font-family: 'Lato', sans-serif; -webkit-font-smoothing: subpixel-antialiased; } +body,textarea,input { + font-family: 'Lato', sans-serif; +} *, *:before, *:after { moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -1597,7 +1599,10 @@ input[type="range"]::-webkit-slider-thumb { font-size: 12px; width: 100%; max-height: 200px; - max-width: 180px; +} +#textEditor.settings textarea { + max-height: none; + height: 290px; } .settings input[type="text"]:focus{ -- cgit v1.2.3-70-g09d2 From 20b1d2787e71cb28c55187d42805407fef63d0e4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 18:38:26 -0400 Subject: text align --- public/assets/javascripts/mx/primitives/mx.text.js | 7 +------ public/assets/javascripts/ui/editor/TextEditor.js | 13 +++++++++++-- views/controls/editor/text-editor.ejs | 6 ++++++ 3 files changed, 18 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/mx/primitives/mx.text.js') diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 8db28d0..1d975ec 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -40,19 +40,14 @@ MX.Text = MX.Object3D.extend({ var media = ops.media if (media.color) this.el.style.color = media.color; if (media.font) this.setFont(media.font) - if (media.align) this.setAlign(media.align) this.setText( media.description ) }, - setAlign: function(align) { - this.el.style.textAlign = "align" - }, - setFont: function(font){ - console.log(font) this.inner.style.fontFamily = "'" + font.family + "',sans-serif" this.el.style.fontSize = (2 * font.size) + "pt" + this.el.style.textAlign = font.align }, setText: function(text){ diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index c867d94..1e35c12 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -10,6 +10,7 @@ var TextEditor = FormView.extend({ "mousedown": "stopPropagation", "change [name=font-family]": 'changeFontFamily', "change [name=font-size]": 'changeFontSize', + "change [name=text-align]": 'changeTextAlign', "input [name=text-body]": 'changeText', "click [data-role=destroy-text]": "destroy", }, @@ -23,6 +24,7 @@ var TextEditor = FormView.extend({ this.$fontFamily = this.$("[name=font-family]") this.$fontSize = this.$("[name=font-size]") this.$textBody = this.$("[name=text-body]") + this.$textAlign = this.$("[name=text-align]") }, toggle: function(state){ @@ -35,8 +37,7 @@ var TextEditor = FormView.extend({ width: 600, height: 450, scale: 0.5, - font: { family: 'Lato', size: 12 }, - align: 'left', + font: { family: 'Lato', size: 12, align: 'left' }, } this.createMode(true) @@ -94,6 +95,10 @@ var TextEditor = FormView.extend({ this.bind(scenery) this.$el.toggleClass("active", true) this.$textBody.val( this.scenery.media.description ) + + this.$fontFamily.val( this.scenery.media.font.family ) + this.$fontSize.val( this.scenery.media.font.size ) + this.$textAlign.val( this.scenery.media.font.align ) this.createMode(false) @@ -111,6 +116,10 @@ var TextEditor = FormView.extend({ changeFontFamily: function(){ this.scenery.setFont({ family: this.$fontFamily.val() }) }, + + changeTextAlign: function(){ + this.scenery.setFont({ align: this.$textAlign.val() }) + }, changeFontSize: function(){ var size = parseInt( this.$fontSize.val() ) diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs index a14c469..3a367d5 100644 --- a/views/controls/editor/text-editor.ejs +++ b/views/controls/editor/text-editor.ejs @@ -21,6 +21,12 @@ +
-- cgit v1.2.3-70-g09d2 From 0f8be5bc39ca5049d3f29fe74eb423da4dcb055a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 13 Nov 2014 13:03:20 -0500 Subject: text color picker --- public/assets/javascripts/mx/primitives/mx.text.js | 4 +- .../assets/javascripts/ui/editor/ColorControl.js | 8 +-- public/assets/javascripts/ui/editor/TextEditor.js | 68 +++++++++++++++++++++- public/assets/javascripts/ui/lib/LabColorPicker.js | 4 +- public/assets/stylesheets/app.css | 11 +++- views/controls/editor/color-control.ejs | 2 +- views/controls/editor/text-editor.ejs | 17 +++++- views/controls/editor/toolbar.ejs | 2 - 8 files changed, 98 insertions(+), 18 deletions(-) (limited to 'public/assets/javascripts/mx/primitives/mx.text.js') diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 1d975ec..a0f9283 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -38,16 +38,18 @@ MX.Text = MX.Object3D.extend({ load: function(ops){ var media = ops.media - if (media.color) this.el.style.color = media.color; if (media.font) this.setFont(media.font) this.setText( media.description ) }, setFont: function(font){ + if (! font.color || font.color[0] == "#") { font.color = [0,0,0] } + this.inner.style.fontFamily = "'" + font.family + "',sans-serif" this.el.style.fontSize = (2 * font.size) + "pt" this.el.style.textAlign = font.align + this.el.style.color = rgb_string(font.color) }, setText: function(text){ diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 0c5463e..9ab2623 100644 --- a/public/assets/javascripts/ui/editor/ColorControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -28,8 +28,8 @@ var ColorControl = View.extend({ this.parent = opt.parent this.colorPicker = new LabColorPicker(this, 155, 155) - this.$("#color-picker").append( this.colorPicker.canvas ) - this.$("#color-picker").append( this.colorPicker.cursor ) + this.$(".color-picker").append( this.colorPicker.canvas ) + this.$(".color-picker").append( this.colorPicker.cursor ) this.$(".slider").append( this.colorPicker.brightness ) this.$swatches = this.$(".swatch") @@ -85,7 +85,7 @@ var ColorControl = View.extend({ this.toggle(false) }, - pick: function(rgb, Lab){ + pickColor: function(rgb, Lab){ this.labColor = Lab this.setSwatchColor(this.mode, rgb) // console.log(rgb) @@ -142,7 +142,7 @@ var ColorControl = View.extend({ setHue: function(e){ var color = $(e.currentTarget).data('color') this.labColor = this.colorPicker.load(color) - this.pick(color, this.labColor) + this.pickColor(color, this.labColor) } }) diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 2949943..c5902b2 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -11,6 +11,8 @@ var TextEditor = FormView.extend({ "change [name=font-family]": 'changeFontFamily', "change [name=font-size]": 'changeFontSize', "change [name=text-align]": 'changeTextAlign', + "click .swatch": 'showColorPicker', + "click [data-role=hide-color-picker]": 'hideColorPicker', "input [name=text-body]": 'changeText', "click [data-role=destroy-text]": "destroy", }, @@ -19,13 +21,22 @@ var TextEditor = FormView.extend({ this.parent = opt.parent this.__super__.initialize.call(this) - this.$settings = this.$(".setting") + this.$textSettings = this.$(".text-setting") + this.$colorSettings = this.$(".color-setting") this.$noTextMessage = this.$(".no-text") this.$fontFamily = this.$("[name=font-family]") this.$fontSize = this.$("[name=font-size]") this.$textBody = this.$("[name=text-body]") this.$textAlign = this.$("[name=text-align]") + this.$swatch = this.$(".swatch") + + this.colorPicker = new LabColorPicker(this, 155, 155) + this.$(".color-picker").append( this.colorPicker.canvas ) + this.$(".color-picker").append( this.colorPicker.cursor ) + this.$(".slider").append( this.colorPicker.brightness ) + this.$(".setting").hide() + app.on("cancel-scenery", function(){ this.createMode(true) $("body").toggleClass("addText", false) @@ -68,7 +79,8 @@ var TextEditor = FormView.extend({ this.scenery = scenery this.scenery.mx.bound = true this.scenery.mx.el.classList.add("picked") - }, + this.scenery.media.font.color = this.scenery.media.font.color || [0,0,0] + }, unbind: function(){ if (this.scenery) { @@ -88,7 +100,8 @@ var TextEditor = FormView.extend({ }, createMode: function(state){ - this.$settings.toggle(! state) + this.$colorSettings.hide() + this.$textSettings.toggle(! state) this.$noTextMessage.toggle(!! state) $("body").toggleClass("addText", !! state) }, @@ -109,6 +122,7 @@ var TextEditor = FormView.extend({ this.$fontFamily.val( this.scenery.media.font.family ) this.$fontSize.val( this.scenery.media.font.size ) this.$textAlign.val( this.scenery.media.font.align ) + this.setSwatchColor( this.scenery.media.font.color ) this.createMode(false) @@ -147,5 +161,53 @@ var TextEditor = FormView.extend({ this.scenery.remove() this.hide() }, + + setSwatchColor: function(rgb){ + this.$swatch.css("background-color", rgb_string(rgb)) + }, + showColorPicker: function(){ + this.$textSettings.hide() + this.$colorSettings.show() + + this.labColor = this.colorPicker.load(this.scenery.media.font.color) + this.pickColor(color, this.labColor) + }, + hideColorPicker: function(e){ + e && e.preventDefault() + this.$textSettings.show() + this.$colorSettings.hide() + }, + + pickColor: function(rgb, Lab){ + this.labColor = Lab + this.setSwatchColor(rgb) + this.scenery.setFont({ color: rgb }) + }, + + initialState: null, + + begin: function(){ + // this.initialState = this.serialize() + }, + + serialize: function(){ + return { + rgb: Walls.colors[ this.mode ] + } + }, + + finalize: function(){ + if (! this.initialState) { return } + UndoStack.push({ + type: 'update-colors', + undo: this.initialState, + redo: this.serialize(), + }) + + this.initialState = null + + // TODO: watch individual wall object here + Minotaur.watch( app.router.editorView.settings ) + }, }) diff --git a/public/assets/javascripts/ui/lib/LabColorPicker.js b/public/assets/javascripts/ui/lib/LabColorPicker.js index 0e1563a..7ddcdd5 100644 --- a/public/assets/javascripts/ui/lib/LabColorPicker.js +++ b/public/assets/javascripts/ui/lib/LabColorPicker.js @@ -64,7 +64,7 @@ var LabColorPicker = function (parent, w, h) { var y = mix( j/hh, b_range[0], b_range[1] ) var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) this.moveCursor(i, j) - parent.pick( rgb, [val,x,y] ) + parent.pickColor( rgb, [val,x,y] ) } this.load = function(rgba){ var Lab = xyz2hunterlab(rgb2xyz(rgba)) @@ -107,7 +107,7 @@ var LabColorPicker = function (parent, w, h) { this.updateBrightness = function(){ parent.labColor[0] = parseFloat( $brightnessControl.val() ) var rgb = base.setLab( parent.labColor ) - parent.pick(rgb, parent.labColor) + parent.pickColor(rgb, parent.labColor) } this.setBrightness = function(Lab){ $brightnessControl.val(Lab[0]) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index a3274a1..b8ede80 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1844,7 +1844,7 @@ input[type="range"]::-webkit-slider-thumb { 50% { opacity:0.7; } } -#color-picker { +.color-picker { position: relative; } .colorPicker { @@ -1983,7 +1983,14 @@ input[type="range"]::-webkit-slider-thumb { width: 210px; } #textEditor.settings { - width: 300px; + width: 320px; +} +#textEditor .swatch { + position: relative; + top: 6px; + margin-left: 6px; + cursor: pointer; + float: none; } .settings.active { diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs index 1fa1688..c035e24 100644 --- a/views/controls/editor/color-control.ejs +++ b/views/controls/editor/color-control.ejs @@ -4,7 +4,7 @@
-
+
diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs index c30cb67..2423e9f 100644 --- a/views/controls/editor/text-editor.ejs +++ b/views/controls/editor/text-editor.ejs @@ -5,7 +5,7 @@ Click a wall to add text.
-
+
+
-
+
-
+
remove from wall
+ +
+ done + +
+
+ +
+
+