Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

add button/text inputs and fix a few bugs

  • Loading branch information...
commit 10c17dbe36b0559b2cf609d4e1d5fc6af2d9e988 1 parent 337aa46
@maccman authored
View
4 README.md
@@ -60,7 +60,9 @@ Nice to have:
* Triangle
* ✓ Rectangle
* ✓ Ellipsis
-* Form elements
+* Checkbox input
+* ✓ Button input
+* ✓ Text Input
* ✓ Text
* ✓ Image
* Line
View
3  assets/javascripts/app/controllers/element.module.coffee
@@ -10,11 +10,8 @@ class Element extends Spine.Controller
defaults: ->
result =
- position: 'absolute'
width: 100
height: 100
- left: 0
- top: 0
backgroundColor: new Color.Black(0.2)
elementEvents:
View
24 assets/javascripts/app/controllers/elements/button.module.coffee
@@ -0,0 +1,24 @@
+Element = require('../element')
+Color = require('app/models/properties/color')
+Background = require('app/models/properties/background')
+
+class Button extends Element
+ # Stub out unused methods
+ defaults: ->
+ result =
+ width: 100
+ height: 40
+ borderRadius: 5
+ borderWidth: 1
+ borderStyle: 'solid'
+ borderColor: new Color(166, 166, 166)
+ backgroundImage: [new Background.LinearGradient(
+ new Background.Position(270),
+ [
+ new Background.ColorStop(new Color.White, 0),
+ new Background.ColorStop(new Color.White, 30),
+ new Background.ColorStop(new Color(242,242,242), 100)
+ ]
+ )]
+
+module.exports = Button
View
6 assets/javascripts/app/controllers/elements/input.module.coffee
@@ -3,6 +3,12 @@ Element = require('../element')
class Input extends Element
tag: 'input'
+ # Stub out unused methods
+ defaults: -> {}
+ text: ->
+ startEditing: ->
+ stopEditing: ->
+
class Text extends Input
attrs:
type: 'text'
View
10 assets/javascripts/app/controllers/header.module.coffee
@@ -1,6 +1,8 @@
Rectangle = require('./elements/rectangle')
Ellipsis = require('./elements/ellipsis')
Text = require('./elements/text')
+Input = require('./elements/input')
+Button = require('./elements/button')
class Header extends Spine.Controller
tag: 'header'
@@ -10,6 +12,8 @@ class Header extends Spine.Controller
'click .rectangle': 'addRectangle'
'click .ellipsis': 'addEllipsis'
'click .text': 'addText'
+ 'click .textInput': 'addTextInput'
+ 'click .button': 'addButton'
render: ->
@html JST['app/views/header'](this)
@@ -25,6 +29,12 @@ class Header extends Spine.Controller
@addElement(element = new Text)
element.startEditing()
+ addTextInput: ->
+ @addElement(new Input.Text)
+
+ addButton: ->
+ @addElement(new Button)
+
addElement: (element) ->
@stage.history.record()
View
2  assets/javascripts/app/controllers/stage/context_menu.module.coffee
@@ -62,6 +62,8 @@ class ContextMenu extends Spine.Controller
$('body').bind('mousedown', @hide)
show: (e) ->
+ return if e.metaKey
+
e.preventDefault()
@hide()
View
2  assets/javascripts/app/views/header.jst.eco
@@ -2,4 +2,6 @@
<div class="rectangle" title="Rectangle"><span></span></div>
<div class="ellipsis" title="Ellipsis"><span></span></div>
<div class="text" title="Text"><span>A</span></div>
+ <div class="textInput" title="Text Input"><span>abc</span></div>
+ <div class="button" title="Button"><span></span></div>
</nav>
View
17 assets/stylesheets/app/header.css.styl
@@ -55,6 +55,8 @@
text-transform: uppercase
font-size: 20px
text-align: center
+
+ border-box()
}
.ellipsis span {
@@ -65,5 +67,20 @@
background: none
box-shadow: none
}
+
+ .textInput span {
+ background: #FFF
+ text-shadow: none
+ font-size: 8px
+ text-transform: none
+ padding-left: 1px
+ }
+
+ .button span {
+ border-radius: 5px
+ border: 1px solid #A6A6A6;
+ box-shadow: none
+ background: -webkit-linear-gradient(270deg, #FFF, #FFF 30%, #F2F2F2 100%)
+ }
}
}
View
3  assets/stylesheets/app/stage.css.styl
@@ -16,6 +16,9 @@
border-box()
color: #000
outline: none
+ position: absolute
+ left: 0
+ top: 0
}
.element.editing {
View
3  public/assets/app/controllers/element.module.js
@@ -88,11 +88,8 @@ this.require.define({"app/controllers/element":function(exports, require, module
Element.prototype.defaults = function() {
var result;
return result = {
- position: 'absolute',
width: 100,
height: 100,
- left: 0,
- top: 0,
backgroundColor: new Color.Black(0.2)
};
};
View
102 public/assets/app/controllers/elements/button.module.js
@@ -0,0 +1,102 @@
+(function() {
+ if (!this.require) {
+ var modules = {}, cache = {};
+
+ var require = function(name, root) {
+ var path = expand(root, name), indexPath = expand(path, './index'), module, fn;
+ module = cache[path] || cache[indexPath];
+ if (module) {
+ return module;
+ } else if (fn = modules[path] || modules[path = indexPath]) {
+ module = {id: path, exports: {}};
+ cache[path] = module.exports;
+ fn(module.exports, function(name) {
+ return require(name, dirname(path));
+ }, module);
+ return cache[path] = module.exports;
+ } else {
+ throw 'module ' + name + ' not found';
+ }
+ };
+
+ var expand = function(root, name) {
+ var results = [], parts, part;
+ // If path is relative
+ if (/^\.\.?(\/|$)/.test(name)) {
+ parts = [root, name].join('/').split('/');
+ } else {
+ parts = name.split('/');
+ }
+ for (var i = 0, length = parts.length; i < length; i++) {
+ part = parts[i];
+ if (part == '..') {
+ results.pop();
+ } else if (part != '.' && part != '') {
+ results.push(part);
+ }
+ }
+ return results.join('/');
+ };
+
+ var dirname = function(path) {
+ return path.split('/').slice(0, -1).join('/');
+ };
+
+ this.require = function(name) {
+ return require(name, '');
+ };
+
+ this.require.define = function(bundle) {
+ for (var key in bundle) {
+ modules[key] = bundle[key];
+ }
+ };
+
+ this.require.modules = modules;
+ this.require.cache = cache;
+ }
+
+ return this.require;
+}).call(this);
+this.require.define({"app/controllers/elements/button":function(exports, require, module){(function() {
+ var Background, Button, Color, Element,
+ __hasProp = {}.hasOwnProperty,
+ __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+
+ Element = require('../element');
+
+ Color = require('app/models/properties/color');
+
+ Background = require('app/models/properties/background');
+
+ Button = (function(_super) {
+
+ __extends(Button, _super);
+
+ Button.name = 'Button';
+
+ function Button() {
+ return Button.__super__.constructor.apply(this, arguments);
+ }
+
+ Button.prototype.defaults = function() {
+ var result;
+ return result = {
+ width: 100,
+ height: 40,
+ borderRadius: 5,
+ borderWidth: 1,
+ borderStyle: 'solid',
+ borderColor: new Color(166, 166, 166),
+ backgroundImage: [new Background.LinearGradient(new Background.Position(270), [new Background.ColorStop(new Color.White, 0), new Background.ColorStop(new Color.White, 30), new Background.ColorStop(new Color(242, 242, 242), 100)])]
+ };
+ };
+
+ return Button;
+
+ })(Element);
+
+ module.exports = Button;
+
+}).call(this);
+;}});
View
10 public/assets/app/controllers/elements/input.module.js
@@ -77,6 +77,16 @@ this.require.define({"app/controllers/elements/input":function(exports, require,
Input.prototype.tag = 'input';
+ Input.prototype.defaults = function() {
+ return {};
+ };
+
+ Input.prototype.text = function() {};
+
+ Input.prototype.startEditing = function() {};
+
+ Input.prototype.stopEditing = function() {};
+
return Input;
})(Element);
View
18 public/assets/app/controllers/header.module.js
@@ -59,7 +59,7 @@
return this.require;
}).call(this);
this.require.define({"app/controllers/header":function(exports, require, module){(function() {
- var Ellipsis, Header, Rectangle, Text,
+ var Button, Ellipsis, Header, Input, Rectangle, Text,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
@@ -69,6 +69,10 @@ this.require.define({"app/controllers/header":function(exports, require, module)
Text = require('./elements/text');
+ Input = require('./elements/input');
+
+ Button = require('./elements/button');
+
Header = (function(_super) {
__extends(Header, _super);
@@ -86,7 +90,9 @@ this.require.define({"app/controllers/header":function(exports, require, module)
Header.prototype.events = {
'click .rectangle': 'addRectangle',
'click .ellipsis': 'addEllipsis',
- 'click .text': 'addText'
+ 'click .text': 'addText',
+ 'click .textInput': 'addTextInput',
+ 'click .button': 'addButton'
};
Header.prototype.render = function() {
@@ -108,6 +114,14 @@ this.require.define({"app/controllers/header":function(exports, require, module)
return element.startEditing();
};
+ Header.prototype.addTextInput = function() {
+ return this.addElement(new Input.Text);
+ };
+
+ Header.prototype.addButton = function() {
+ return this.addElement(new Button);
+ };
+
Header.prototype.addElement = function(element) {
var position;
this.stage.history.record();
View
3  public/assets/app/controllers/stage/context_menu.module.js
@@ -156,6 +156,9 @@ this.require.define({"app/controllers/stage/context_menu":function(exports, requ
ContextMenu.prototype.show = function(e) {
var position;
+ if (e.metaKey) {
+ return;
+ }
e.preventDefault();
this.hide();
position = {
View
23 public/assets/application.css
@@ -244,6 +244,9 @@ body {
text-transform: uppercase;
font-size: 20px;
text-align: center;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
#app .header nav .ellipsis span {
-moz-border-radius: 50%;
@@ -256,6 +259,23 @@ body {
-webkit-box-shadow: none;
box-shadow: none;
}
+#app .header nav .textInput span {
+ background: #fff;
+ text-shadow: none;
+ font-size: 8px;
+ text-transform: none;
+ padding-left: 1px;
+}
+#app .header nav .button span {
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ border: 1px solid #a6a6a6;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ background: -webkit-linear-gradient(270deg, #fff, #fff 30%, #f2f2f2 100%);
+}
#app {
position: absolute;
top: 0;
@@ -876,6 +896,9 @@ body {
box-sizing: border-box;
color: #000;
outline: none;
+ position: absolute;
+ left: 0;
+ top: 0;
}
#app .stage .element.editing {
-webkit-user-select: text;
View
78 public/assets/application.js
@@ -12451,11 +12451,8 @@ this.require.define({"app/controllers/element":function(exports, require, module
Element.prototype.defaults = function() {
var result;
return result = {
- position: 'absolute',
width: 100,
height: 100,
- left: 0,
- top: 0,
backgroundColor: new Color.Black(0.2)
};
};
@@ -12828,6 +12825,48 @@ this.require.define({"app/controllers/element/resizing":function(exports, requir
}).call(this);
;}});
+this.require.define({"app/controllers/elements/button":function(exports, require, module){(function() {
+ var Background, Button, Color, Element,
+ __hasProp = {}.hasOwnProperty,
+ __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+
+ Element = require('../element');
+
+ Color = require('app/models/properties/color');
+
+ Background = require('app/models/properties/background');
+
+ Button = (function(_super) {
+
+ __extends(Button, _super);
+
+ Button.name = 'Button';
+
+ function Button() {
+ return Button.__super__.constructor.apply(this, arguments);
+ }
+
+ Button.prototype.defaults = function() {
+ var result;
+ return result = {
+ width: 100,
+ height: 40,
+ borderRadius: 5,
+ borderWidth: 1,
+ borderStyle: 'solid',
+ borderColor: new Color(166, 166, 166),
+ backgroundImage: [new Background.LinearGradient(new Background.Position(270), [new Background.ColorStop(new Color.White, 0), new Background.ColorStop(new Color.White, 30), new Background.ColorStop(new Color(242, 242, 242), 100)])]
+ };
+ };
+
+ return Button;
+
+ })(Element);
+
+ module.exports = Button;
+
+}).call(this);
+;}});
this.require.define({"app/controllers/elements/canvas":function(exports, require, module){(function() {
var Canvas, Element,
__hasProp = {}.hasOwnProperty,
@@ -12998,6 +13037,16 @@ this.require.define({"app/controllers/elements/input":function(exports, require,
Input.prototype.tag = 'input';
+ Input.prototype.defaults = function() {
+ return {};
+ };
+
+ Input.prototype.text = function() {};
+
+ Input.prototype.startEditing = function() {};
+
+ Input.prototype.stopEditing = function() {};
+
return Input;
})(Element);
@@ -13216,7 +13265,7 @@ this.require.define({"app/controllers/elements/triangle":function(exports, requi
}).call(this);
;}});
this.require.define({"app/controllers/header":function(exports, require, module){(function() {
- var Ellipsis, Header, Rectangle, Text,
+ var Button, Ellipsis, Header, Input, Rectangle, Text,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
@@ -13226,6 +13275,10 @@ this.require.define({"app/controllers/header":function(exports, require, module)
Text = require('./elements/text');
+ Input = require('./elements/input');
+
+ Button = require('./elements/button');
+
Header = (function(_super) {
__extends(Header, _super);
@@ -13243,7 +13296,9 @@ this.require.define({"app/controllers/header":function(exports, require, module)
Header.prototype.events = {
'click .rectangle': 'addRectangle',
'click .ellipsis': 'addEllipsis',
- 'click .text': 'addText'
+ 'click .text': 'addText',
+ 'click .textInput': 'addTextInput',
+ 'click .button': 'addButton'
};
Header.prototype.render = function() {
@@ -13265,6 +13320,14 @@ this.require.define({"app/controllers/header":function(exports, require, module)
return element.startEditing();
};
+ Header.prototype.addTextInput = function() {
+ return this.addElement(new Input.Text);
+ };
+
+ Header.prototype.addButton = function() {
+ return this.addElement(new Button);
+ };
+
Header.prototype.addElement = function(element) {
var position;
this.stage.history.record();
@@ -15153,6 +15216,9 @@ this.require.define({"app/controllers/stage/context_menu":function(exports, requ
ContextMenu.prototype.show = function(e) {
var position;
+ if (e.metaKey) {
+ return;
+ }
e.preventDefault();
this.hide();
position = {
@@ -19500,7 +19566,7 @@ this.require.define({"app/parsers/import":function(exports, require, module){(fu
(function() {
(function() {
- __out.push('<nav class="toolbar">\n <div class="rectangle" title="Rectangle"><span></span></div>\n <div class="ellipsis" title="Ellipsis"><span></span></div>\n <div class="text" title="Text"><span>A</span></div>\n</nav>\n');
+ __out.push('<nav class="toolbar">\n <div class="rectangle" title="Rectangle"><span></span></div>\n <div class="ellipsis" title="Ellipsis"><span></span></div>\n <div class="text" title="Text"><span>A</span></div>\n <div class="textInput" title="Text Input"><span>abc</span></div>\n <div class="button" title="Button"><span></span></div>\n</nav>\n');
}).call(this);
View
26 public/picker.html
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <title>Stylo</title>
- <script src="assets/application.js"></script>
- <style type="text/css" media="screen">
- #app {
- width: 600px;
- height: 600px;
- }
-
- .preview .inner {
- width: 50px;
- height: 50px;
- }
- </style>
-</head>
-<body>
- <div id="app"></div>
-
- <script type="text/javascript" charset="utf-8">
- var Picker = require('app/controllers/inspector/color_picker');
- new Picker({el: $('#app')});
- </script>
-</body>
-</html>
Please sign in to comment.
Something went wrong with that request. Please try again.