From 9eb0dae8f893a61a6fbf615211b4cf5087e8d7e9 Mon Sep 17 00:00:00 2001 From: dsc Date: Sun, 26 Feb 2012 03:23:20 -0800 Subject: [PATCH] Booleans now render as checkboxes, and objects/arrays/functions as textareas. --- lib/graph.co | 24 +------------ lib/main.co | 2 +- lib/scaffold/model.co | 4 +- lib/server/server.co | 3 ++ lib/template/graph-option.jade | 26 +++++++++----- www/css/graph.styl | 72 +++++++++++++++++++--------------------- www/css/layout.styl | 5 +++ www/layout.jade | 4 +- 8 files changed, 66 insertions(+), 74 deletions(-) diff --git a/lib/graph.co b/lib/graph.co index 17d0356..5f24b30 100644 --- a/lib/graph.co +++ b/lib/graph.co @@ -32,22 +32,6 @@ GraphOptionList = exports.GraphOptionList = FieldList.extend do # {{{ @categories = {} - # reset: -> - # FieldList::reset ... - # console.log "#this.reset!" - # - # n = 0 - # cats = @categories - # @forEach (field) -> - # cat = field.get('tags', [])[0] - # unless cats[cat]? - # cats[cat] = n++ - # field.set 'category', "category_#{cats[cat]}", {+silent} - # - # setTimeout do - # ~> _ _.pluck(@models, 'view') .invoke 'render' - # 10 - # this # }}} @@ -67,14 +51,10 @@ GraphOptionView = exports.GraphOptionView = FieldView.extend do # {{{ 'blur .value' : 'update' 'submit .value' : 'update' 'click .close' : 'toggleCollapsed' - 'click' : 'onClick' + 'click h3' : 'toggleCollapsed' + 'click .collapsed' : 'onClick' - # initialize: -> - # console.log "#this.initialize!" - # FieldView::initialize ... - # - update: -> val = @$el.find('.value').val() current = @model.get 'value' diff --git a/lib/main.co b/lib/main.co index c995cc4..ce96a23 100644 --- a/lib/main.co +++ b/lib/main.co @@ -14,7 +14,7 @@ main = -> graph = root.graph = new GraphView { graph_spec: CHART_OPTIONS_SPEC } - $ '#content' .append graph.el + $ '#content .inner' .append graph.el jQuery.ajax do diff --git a/lib/scaffold/model.co b/lib/scaffold/model.co index 48d3a71..c9a08d1 100644 --- a/lib/scaffold/model.co +++ b/lib/scaffold/model.co @@ -6,7 +6,7 @@ Hash = require 'hashish' ### Scaffold Models -class exports.Tags extends Array +class exports.TagSet extends Array tags : {} (values=[]) -> @@ -32,7 +32,7 @@ class exports.Tags extends Array toString: -> "Tags(length=#{@length}, values=[\"#{@join '", "'}\"])" -KNOWN_TAGS = exports.KNOWN_TAGS = new Tags() +KNOWN_TAGS = exports.KNOWN_TAGS = new TagSet() Field = exports.Field = Backbone.Model.extend do # {{{ ctorName : 'Field' diff --git a/lib/server/server.co b/lib/server/server.co index 1dded9e..3fe8f7a 100755 --- a/lib/server/server.co +++ b/lib/server/server.co @@ -115,6 +115,9 @@ app.get '/', (req, res) -> YAML_EXT_PAT = /\.ya?ml$/i +/** + * Returns a JSON listing of the datasource metadata files. + */ app.get '/data/list', (req, res, next) -> fs.readdir "#CWD/data", (err, files) -> res.send do diff --git a/lib/template/graph-option.jade b/lib/template/graph-option.jade index dec60ba..2c6755a 100644 --- a/lib/template/graph-option.jade +++ b/lib/template/graph-option.jade @@ -1,21 +1,29 @@ include browser-helpers -- var option_id = _.domize('option', id); -- var value_id = _.domize('value', id); -- var category_cls = _.domize('category', model.getCategoryIndex()) + ' ' + _.domize('category', model.getCategory()); -- var tags_cls = tags.map(_.domize('tag')).join(' '); -- var type_cls = _.domize('type', type); +- var option_id = _.domize('option', id) + +- var value_id = _.domize('value', id) +- var type_cls = _.domize('type', type) + +- var category_cls = _.domize('category', model.getCategoryIndex()) + ' ' + _.domize('category', model.getCategory()) +- var tags_cls = tags.map(_.domize('tag')).join(' ') + .field.option(id=option_id, class="#{category_cls} #{tags_cls}") - a.close × + a.close(title="Click to collapse") × + h3.shortname(title="Click to collapse") #{name} //- h3.shortname #{_.shortname(name)} - h3.shortname #{name} + label.name(for=value_id) #{name} - input.value(type="text", id=value_id, name=name, class=type_cls, value=value) + + if ( /object|array|function/i.test(type) ) + textarea.value(id=value_id, name=name, class=type_cls) #{value} + else + - var input_type = (/boolean/i.test(type) ? 'checkbox' : 'text'); + input.value(type=input_type, id=value_id, name=name, class=type_cls, value=value) .type(class=type_cls) #{type} .default(class=type_cls, title="Default: #{def} (#{type})") #{def} - .desc != jade.filters.markdown(desc) diff --git a/www/css/graph.styl b/www/css/graph.styl index 8558dc5..f9a37b6 100644 --- a/www/css/graph.styl +++ b/www/css/graph.styl @@ -2,6 +2,11 @@ @import 'nib' section.graph + position relative + + * + position relative + .graph-label position relative @@ -23,52 +28,47 @@ section.graph float left z-index 3 padding 0.5em - margin 0.5em - width 200px - min-height 2em + margin 0.4em + min-width 200px + max-width 250px + min-height 1.5em + line-height 1.5 overflow hidden border-radius 5px background-color #ccc font-size 90% - * - position relative - .close - z-index 10 - // absolute top 0.5em right 0.5em - absolute top 0.25em right 0.25em + h3 + font-size 14px + line-height 1.3 cursor pointer - + + .close + absolute top right 0.1em width 1em height 1em + line-height 1.2em text-align center - // border-radius 50% - - // text-decoration none - // border 1px solid #afafaf - // background-color #ccc - - // opacity 1 - // color rgba(51,51,51, 0.4) - - // .close:hover - // color rgba(51,51,51, 1) - // border 1px solid #999 + text-decoration none + z-index 10 + cursor pointer + opacity 0.3 + &:hover + opacity 0.6 .shortname - // z-index -1 - // absolute bottom 0.5em right 0.5em font-weight bold color white + min-height 1.5em .name display none font-weight bold // line-height 1.5 // font-size 100% - .value - width auto + input.value + width 240px font-family menlo, monospace .type &::before @@ -109,20 +109,21 @@ section.graph z-index 2 width auto min-width 50px - min-height 2em + min-height 1.5em + line-height 1.5 - line-height 2em - text-align center cursor pointer + text-align center * display none .shortname - display inline - position static + display inline-block + min-width 50px + min-height auto - /* Category Colors {{{ */ + /* Category/Tag Colors {{{ */ for i in 0...length($hilites) $bg_color = $hilites[i] $tag_color = $bg_color + contrast_direction($bg_color) * 50% @@ -143,12 +144,7 @@ section.graph color $fg_color background-color $bg_color - - - - - - // }}} + /* }}} */ diff --git a/www/css/layout.styl b/www/css/layout.styl index 39ef922..39cffae 100644 --- a/www/css/layout.styl +++ b/www/css/layout.styl @@ -13,6 +13,11 @@ header, footer, #content background-color $page_bgcolor box-shadow 0px 0px 6px 2px rgba(0,0,0,0.4) + & > .inner + position relative + width 80% + margin 0 auto + // .spacer offsets #content to pad for header .spacer font-size 250% diff --git a/www/layout.jade b/www/layout.jade index 4f64153..a76e3ee 100644 --- a/www/layout.jade +++ b/www/layout.jade @@ -31,8 +31,8 @@ html section#content .spacer - - block content + .inner + block content footer block footer -- 1.7.0.4