styleus 0.0.7 → 0.0.8

data/app/assets/javascripts/styleus/behaviors/sampleContent.js.coffee

@@ -10,7 +10,6 @@ namespace 'styleus.sampleContent', (exports) ->
 
     render: => @view
 
-
   class Diagonal extends Shape
     constructor: (@width, @height, @direction) ->
       super()
@@ -68,7 +67,6 @@ namespace 'styleus.sampleContent', (exports) ->
       @view.css('width', @boxWidth)
       @view.css('height', @boxHeight)
 
-
     addDiagonals: =>
       diagonals = [new Diagonal(@boxWidth, @boxHeight), new Diagonal(@boxWidth, @boxHeight, 'inverted')]
       diagonal.expand() and @view.append(diagonal.render()) for diagonal in diagonals

data/app/assets/stylesheets/styleus/themes/base.css.scss

@@ -18,3 +18,4 @@
 @import 'base/components/option_bar';
 @import 'base/components/component_index';
 @import 'base/components/dummy_content';
+@import 'base/components/index_documnentation';

data/app/assets/stylesheets/styleus/themes/base/behaviors/_text.css.scss

@@ -1,5 +1,9 @@
-@mixin ambient-font {
+@mixin floating-text-font {
   font-family: 'Source Sans Pro';
+}
+
+@mixin ambient-font {
+  @include floating-text-font;
   color: $soft-text;
 }
 

data/app/assets/stylesheets/styleus/themes/base/components/_article.css.scss

@@ -4,46 +4,68 @@
   padding-right: 1em;
 }
 
+@mixin text-content-padding {
+  padding-left: 0.5em;
+}
+
 .__sg_article {
-  @include border-radius(3px);
-  @include box-shadow(0 2px 3px 0 #cdcdcd);
   @include component;
   @include default-side-margin;
-  background: $content_background;
-  margin-bottom: 1em;
-  min-height: 3em;
-  padding-top: 1em;
-
-  > h3 {
-    @include ambient-headline;
-    @include article-side-padding;
-    margin-bottom: 0.5em;
-    text-align: right;
-    color: #ccc;
-  }
 
-  .__sg_component, .CodeRay, .__code_note {
-    @include article-side-padding;
-  }
+  header {
+    @include component;
+    margin-top: 1.5em;
+    margin-bottom: 0.3em;
 
-  .__sg_component {
-    padding-top: 0.3em;
-    padding-bottom: 1em;
+    > h3 {
+      @include ambient-headline;
+      @include text-content-padding;
+      color: #222;
+      line-height: 1.8em;
+    }
   }
 
-  .__code_note {
-    @include background(linear-gradient(bottom, #b5b5b5, #e4e4e4));
-    @include border-radius(6px 0 0 0);
-    @include ambient-font;
-    border-top: 1px solid #cacaca;
-    border-bottom: 1px solid #999;
-    text-align: center;
-    //margin-top: 0.5em;
-    line-height: 1.5em;
+  .__documentation {
+    @include floating-text-font;
+    @include text-content-padding;
+    margin-bottom: 0.5em;
   }
 
-  .CodeRay {
-    @include border-radius(0 0 3px 3px);
+  .__code_partials {
+    @include border-radius(3px);
+    @include box-shadow(0 2px 3px 0 #cdcdcd);
+    position: relative;
+    top: 0; left: 0;
+
+    background: $content_background;
+    margin-bottom: 1em;
+    min-height: 3em;
+    padding-top: 1em;
+
+    .__sg_component, .CodeRay, .__code_note {
+      @include article-side-padding;
+    }
+
+    .__sg_component {
+      padding-top: 0.3em;
+      padding-bottom: 1em;
+    }
+
+    .__code_note {
+      @include background(linear-gradient(bottom, #b5b5b5, #e4e4e4));
+      @include border-radius(6px 0 0 0);
+      @include ambient-font;
+      border-top: 1px solid #cacaca;
+      border-bottom: 1px solid #999;
+      text-align: center;
+      //margin-top: 0.5em;
+      line-height: 1.5em;
+    }
+
+    .CodeRay {
+      @include border-radius(0 0 3px 3px);
+    }
+
   }
 }
 

data/app/assets/stylesheets/styleus/themes/base/components/_index_documnentation.css.scss

@@ -0,0 +1,5 @@
+.__index_documentation {
+  @include default-side-margin;
+  margin-top: 2em;
+  padding-left: 0.5em;
+}

data/app/assets/stylesheets/styleus/themes/base/components/_option_bar.css.scss

@@ -3,9 +3,9 @@
 // each article.
 nav.__option_bar {
   @include component;
-  @include default-side-margin;
-  margin-top: 1em;
-  margin-bottom: 0.2em;
+  position: absolute;
+  top: -2.25em;
+  right: 0;
 
   ul {
     li {

data/app/assets/stylesheets/styleus/themes/base/layout/main.css.scss

@@ -13,7 +13,7 @@ body { background: $main_background asset-url('styleus/themes/base/noise.png', i
 .__styleus_wrapper {
   @include box-sizing(border-box);
   @include component;
-
+  margin-bottom: 10em;
   > header {
     @include default-side-padding;
     padding-top: 2em;

data/app/helpers/external_helper.rb

@@ -1,19 +1,24 @@
 require 'styleus_helper'
 
 module ExternalHelper
+  def index_documentation(&block)
+    content_tag 'section', class: '__index_documentation', &block
+  end
+
+  def documentation(&block)
+    _cleared_content_for :documentation, _styleus_documentation_wrap(&block)
+  end
+
   def display(&block)
-    @view_flow.set(:representation, '')
-    content_for :representation, _styleus_component_wrap(&block)
+    _cleared_content_for :representation, _styleus_component_wrap(&block)
   end
 
   def html(&block)
-    @view_flow.set(:html, '')
-    content_for :html, _html_representation(&block)
+    _cleared_content_for :html, _html_representation(&block)
   end
 
   def helper(&block)
-    @view_flow.set(:helper, '')
-    content_for :helper, _helper_representation(&block)
+    _cleared_content_for :helper, _helper_representation(&block)
   end
 
   def styleus_page(comp_list = [])
@@ -24,15 +29,15 @@ module ExternalHelper
   end
 
   def styleus_components(comp_list)
-    build_view_components(comp_list)
+    _build_view_components(comp_list)
 
-    @component_list = @components.map { |component| wrap_component component }
+    @component_list = @components.map { |component| _wrap_component component }
 
     @component_list.join.html_safe
   end
 
   def styleus_index(comp_list)
-    build_view_components(comp_list)
+    _build_view_components(comp_list)
     _component_index(components_category, @components)
   end
 end

data/app/helpers/styleus_helper.rb

@@ -1,42 +1,60 @@
 require 'styleus_representer_helper'
 
 module StyleusHelper
-  def build_view_components(comp_list)
-    @components ||= Styleus::ViewComponent.from_hashes(comp_list)
-  end
 
-  def wrap_component(component)
-    article = _styleus_article_wrap(headline: component.headline, id: component.id) do
-      styleus_partials(component.partial_path, helper: component.helper?)
-    end
-    option_bar(component).concat article
-  end
+  # this heart of gold function renders the app component partials
+  # and enables the configured content_for blocks for the target
+  # partial called styleus_partials.
+  def _styleus_partials(component, options = { })
+    # execute application partial without responding it directly,
+    # so only the given content_for methods will help.
+    render partial: "#{component.partial_path}"
 
-  def styleus_partials(partial_path, options = { })
-    #sample_template = _styleus_component_wrap(class: '__boxed') { render partial: "#{partial_path}_sample" }
-    #
-    #plain_template = _html_representation("#{partial_path}.html.erb") { render partial: "#{partial_path}" }
-    #
-    #helper_template = _helper_representation { render partial: "#{partial_path}_helper" } if options[:helper]
+    # returning concatenating responder partial, which consists of content_for blocks only.
+    render(layout: 'styleus/styleus_partials', locals: { component: component }) { }
+  end
 
-    #sample_template.concat(plain_template).concat(helper_template || _safe_empty)
+  # To use the render layout: '...' method multiple times
+  # for the several components, including the same content_for
+  # blocks each time, we have to clean up them before registering
+  # the next blocks.
+  #
+  # So this function wraps the content_for function with
+  # a prepended clearing for the specific content_for attribute,
+  # so that earlier defined content_for areas are not
+  # rendered again.
+  def _cleared_content_for(content_name, content)
+    # clear content_for calls for this name
+    @view_flow.set(content_name, '')
+
+    # set new content_for for this name
+    content_for content_name, content
+  end
 
 
-    # execute application partial without responding it directly,
-    # so only the given content_for methods will help.
-    render partial: "#{partial_path}"
+  # converts the list of component hashes configured in the
+  # app to a list of ViewComponent instances.
+  def _build_view_components(comp_list)
+    @components ||= Styleus::ViewComponent.from_hashes(comp_list)
+  end
 
-    # returning concatenating responder partial, which consists of content_for blocks only.
-    render(layout: 'styleus/styleus_partials') {  ''.html_safe }
+  # wraps a component in an article and combines it with
+  # a depending optionbar, that enables the user to show
+  # and hide the different partials.
+  def _wrap_component(component)
+    _styleus_article_wrap(component) do
+      _styleus_partials(component, helper: component.helper?)
+    end
   end
 
-  def option_bar(component)
+  def _option_bar(component)
     _option_bar(component)
   end
 
-  def _styleus_article_wrap(options = { }, &block)
+  # renders an article attribute wrap for a component
+  def _styleus_article_wrap(component, &block)
     captured_block = capture(&block)
-    _article(options) { captured_block }
+    _article(component) { captured_block }
   end
 
   def _styleus_component_wrap(options = { }, &block)
@@ -45,9 +63,12 @@ module StyleusHelper
     _component(classes) { captured_block }
   end
 
+  def _styleus_documentation_wrap(options = { }, &block)
+    captured_block = capture(&block)
+  end
 
-  def _html_representation(note = nil, &block)
-    _coderay_highlight_wrap(note, &block)
+  def _html_representation(&block)
+    _coderay_highlight_wrap('HTML Snippet', &block)
   end
 
   def _helper_representation(&block)

data/app/helpers/styleus_representer_helper.rb

@@ -7,8 +7,8 @@ module StyleusRepresenterHelper
     _render_styleus('component_index', locals: { headline: headline, components: components })
   end
 
-  def _article(options, &block)
-    _render_styleus('article', locals: { headline: options[:headline], id: options[:id] }, &block)
+  def _article(component, &block)
+    _render_styleus('article', locals: { headline: component.headline, id: component.id, component: component }, &block)
   end
 
   def _component(classes, &block)

data/app/views/components/index.html.erb

@@ -2,8 +2,11 @@
   <nav class="__component_index">
     <h3>Components</h3>
     <ul>
-      <li><a href="/components/containers">Container Components</a></li>
-      <li><a href="/components/forms">Form Components</a></li>
+      <!--<li><a href="/components/containers">Container Components</a></li>-->
+      <!--<li><a href="/components/forms">Form Components</a></li>-->
+      <% Styleus::Component.spaces.each do |space| %>
+        <li><%= link_to space.to_s.camelcase, send(:"#{space}_path") %></li>
+      <% end %>
     </ul>
   </nav>
 </div>

data/app/views/styleus/_article.html.erb

@@ -1,4 +1,6 @@
 <article class="__sg_article" id="<%= id %>">
-  <%= content_tag 'h3', headline if headline %>
+  <header>
+    <%= content_tag 'h3', headline if headline %>
+  </header>
   <%= yield %>
 </article>

data/app/views/styleus/_styleus_partials.html.erb

@@ -1,3 +1,13 @@
-<%= content_for(:representation).html_safe %>
-<%= content_for(:html).html_safe %>
-<%= content_for(:helper).html_safe %>
+<% if content_for? :documentation %>
+  <section class="__documentation">
+    <%= content_for :documentation %>
+  </section>
+<% end %>
+
+<section class="__code_partials">
+  <%= _option_bar(component) %>
+
+  <%= content_for(:representation).html_safe %>
+  <%= content_for(:html).html_safe %>
+  <%= content_for(:helper).html_safe %>
+</section>

data/lib/styleus/version.rb

@@ -1,3 +1,3 @@
 module Styleus
-  VERSION = "0.0.7"
+  VERSION = "0.0.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: styleus
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-11 00:00:00.000000000 Z
+date: 2012-12-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -90,6 +90,7 @@ files:
 - app/assets/stylesheets/styleus/themes/base/components/_article.css.scss
 - app/assets/stylesheets/styleus/themes/base/components/_component_index.css.scss
 - app/assets/stylesheets/styleus/themes/base/components/_dummy_content.css.scss
+- app/assets/stylesheets/styleus/themes/base/components/_index_documnentation.css.scss
 - app/assets/stylesheets/styleus/themes/base/components/_option_bar.css.scss
 - app/assets/stylesheets/styleus/themes/base/fonts/raphael.css.scss
 - app/assets/stylesheets/styleus/themes/base/layout/main.css.scss