From: dsc Date: Thu, 23 Feb 2012 17:30:12 +0000 (-0800) Subject: Automatically maps tags to colors. X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=25713b17e43a9a25e59b2066f60120bfd49b55f5;p=kraken-ui.git Automatically maps tags to colors. --- diff --git a/lib/graph.co b/lib/graph.co index eda01aa..1bfcb1f 100644 --- a/lib/graph.co +++ b/lib/graph.co @@ -22,8 +22,32 @@ GraphOption = exports.GraphOption = Field.extend do # {{{ GraphOptionList = exports.GraphOptionList = FieldList.extend do # {{{ - ctorName : 'GraphOptionList' - model : GraphOption + ctorName : 'GraphOptionList' + model : GraphOption + categories : {} + + + initialize : -> + FieldList::initialize ... + @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 # }}} diff --git a/lib/scaffold/model.co b/lib/scaffold/model.co index 422de92..a98bd41 100644 --- a/lib/scaffold/model.co +++ b/lib/scaffold/model.co @@ -11,6 +11,7 @@ Field = exports.Field = Backbone.Model.extend do # {{{ initialize: -> @set 'value', @get('default'), {+silent} if not @has 'value' + # console.log "#this.initialize!" defaults: -> @@ -19,7 +20,6 @@ Field = exports.Field = Backbone.Model.extend do # {{{ type : 'String' default : null desc : '' - category : 'General' include : 'diff' tags : [] examples : [] diff --git a/lib/template/graph-option.jade b/lib/template/graph-option.jade index 01fae16..92fee6e 100644 --- a/lib/template/graph-option.jade +++ b/lib/template/graph-option.jade @@ -1,11 +1,11 @@ include browser-helpers - var option_id = _.domize('option', id); - var value_id = _.domize('value', id); -- var category_cls = _.domize('category', category); +//- - var category_cls = _.domize('category', category); - var tags_cls = tags.map(_.domize('tag')).join(' '); - var type_cls = _.domize('type', type); -.field.option(id=option_id, class="#{category_cls} #{tags_cls}") +.field.option(id=option_id, class="#{category} #{tags_cls}") a.close × h3.shortname #{_.shortname(name)} @@ -18,10 +18,12 @@ include browser-helpers .desc != (jade.filters || {}).markdown(desc) - .tags(data-toggle="collapse", data-target="ul"): ul.collapse + //- .tags(data-toggle="collapse", data-target="##{option_id} .tags ul"): ul.collapse + .tags for tag in tags - li.tag(class=_.domize('tag', tag)) #{tag} - .examples(data-toggle="collapse", data-target="ul"): ul.collapse + span.tag(class=_.domize('tag', tag)) #{tag} + | + .examples(data-toggle="collapse", data-target="##{option_id} .examples ul"): ul.collapse for example in examples li.example a(href="http://dygraphs.com/tests/#{example}.html", target="_blank") #{example} diff --git a/www/css/colors.styl b/www/css/colors.styl index 767a8cf..6fd557b 100644 --- a/www/css/colors.styl +++ b/www/css/colors.styl @@ -1,32 +1,46 @@ /** Project Colors **/ +$dark = #333 +$light = #eee + +/* spot colors */ +$hilite_dkblue = #182B53 +$hilite_ltblue = #4596FF +$hilite_steelblue = #A6D9FF +$hilite_teal = #00FFBC +$hilite_green = #83BB32 +$hilite_lime = #B1E43B +$hilite_yellow = #F1D950 +$hilite_squash = #EF8158 +$hilite_orange = #DC3522 +$hilite_red = #AD3238 +$hilite_pink = #FF87FF +$hilite_magenta = #FF0097 +$hilite_purple = #553DC9 +$hilite_periwinkle = #9DA5FF + + +$hilites = ($hilite_dkblue $hilite_ltblue $hilite_steelblue $hilite_teal $hilite_green $hilite_lime $hilite_yellow $hilite_squash $hilite_orange $hilite_red $hilite_pink $hilite_magenta $hilite_purple $hilite_periwinkle) + + /* background colors */ -$main_bgcolor = #fff -$page_bgcolor = #eee +$main_bgcolor = white +$page_bgcolor = $light $foot_bgcolor = #3b3b3b /* text & link colors */ -$body_text = #333 +$body_text = $dark $foot_text = #505050 $body_link = #2d588f $foot_link = #666 $border_color = #ccc -/* spot colors */ -$hilite_dkblue = #182B53 -$hilite_ltblue = #4596FF -$hilite_teal = #00FFBC -$hilite_green = #B1E43B -$hilite_yellow = #F1D950 -$hilite_orange = #EF8158 -$hilite_red = #AD3238 -$hilite_pink = #FF0097 -$hilite_purple = #553DC9 - /** Color Helpers **/ invert($v) hsla( 180deg * hue($v), 100% - saturation($v), 100% - lightness($v), alpha($v) ) + + diff --git a/www/css/graph.styl b/www/css/graph.styl index 4dc32bf..30f4b2c 100644 --- a/www/css/graph.styl +++ b/www/css/graph.styl @@ -21,6 +21,7 @@ section.graph .field.option float left + z-index 3 padding 0.5em margin 0.5em width 200px @@ -31,29 +32,34 @@ section.graph background-color #ccc font-size 90% + * + position relative + .close z-index 10 - absolute top 0.5em right 0.5em + // absolute top 0.5em right 0.5em + absolute top 0.25em right 0.25em + cursor pointer + width 1em height 1em - - opacity 1 - color rgba(51,51,51, 0.4) text-align center - border 1px solid #afafaf - border-radius 50% - background-color #ccc + // border-radius 50% - text-decoration none - cursor pointer + // 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 + // .close:hover + // color rgba(51,51,51, 1) + // border 1px solid #999 .shortname z-index -1 - absolute bottom 0.5em right 0.5em + // absolute bottom 0.5em right 0.5em font-weight bold color white .name @@ -62,34 +68,52 @@ section.graph font-size 100% .value width auto + font-family menlo, monospace .type &::before content "Type: " + font-weight bold .default &::before content "Default: " + font-weight bold .desc position relative + .tags, .examples + cursor pointer .tags &::before - content "Tags" - ul - display none + content "Tags: " + font-weight bold + font-size 85% .tag - position relative + margin 0.2em + line-height 1.5 + padding 0.2em + font-size 85% + color white + background-color rgba(255,255,255, 0.15) + border-radius 5px + border 1px solid white + white-space nowrap .examples + display none &::before content "Examples" + font-weight bold .example position relative &.collapsed + z-index 2 width auto min-width 50px min-height 2em + line-height 2em text-align center + cursor pointer * display none @@ -97,3 +121,25 @@ section.graph display inline position static + + /* Category Colors {{{ */ + for i in 0...length($hilites) + &.category_{i} + $bg_color = $hilites[i] + $fg_color = light($bg_color) ? $dark : $light + + background-color $bg_color + color $fg_color + label, h1, h2, h3, .shortname, .name, .close + color $fg_color + + + + + + + // }}} + + + +