hobo_bootstrap 2.0.0.pre5 → 2.0.0.pre6

data/README.md

@@ -70,8 +70,9 @@ This theme includes the bootstrap responsive CSS, which makes it work nicely wit
 
 [![responsive][5]][5]
 
-If you don't want to include the responsive CSS use
+If you don't want to include the responsive CSS, use
 
+    *= require bootstrap
     *= require hobo_bootstrap/hobo_bootstrap_main
 
 instead of

data/VERSION

@@ -1 +1 @@
-2.0.0.pre5
+2.0.0.pre6

data/hobo_bootstrap.gemspec

@@ -11,8 +11,8 @@ Gem::Specification.new do |s|
   s.summary = 'A bootstrap based theme for Hobo'
   s.description = 'A bootstrap based theme for Hobo'
 
-  s.add_runtime_dependency('hobo', "~> 2.0.0.pre1")
-  s.add_runtime_dependency('hobo_jquery_ui', "~> 2.0.0.pre1")
+  s.add_runtime_dependency('hobo', "~> 2.0.0.pre6")
+  s.add_runtime_dependency('hobo_jquery', "~> 2.0.0.pre6")
   s.add_runtime_dependency "bootstrap-sass", "~> 2.1"
   s.add_runtime_dependency "will_paginate-bootstrap", "~> 0.2.1"
 

data/lib/hobo_bootstrap.rb

@@ -5,7 +5,6 @@ require 'bootstrap-sass'
 require 'will_paginate-bootstrap'
 require 'hobo_rapid'
 require 'hobo_jquery'
-require 'hobo_jquery_ui'
 
 module HoboBootstrap
 

data/taglibs/delete_button.dryml

@@ -1,3 +1,6 @@
+<!--
+Adds bootstrap styling to `<delete-button>`
+-->
 <extend tag="delete-button">
   <old-delete-button class="btn" merge/>
 </extend>

data/taglibs/edit_page.dryml

@@ -1,5 +1,9 @@
+<!--
+Adds bootstrap styling to `<edit-page>`
+-->
 <extend tag="edit-page">
   <old-edit-page: merge>
     <delete-button: class="pull-right"/>
+    <content-header: class="clearfix"/>
   </old-edit-page:>
 </extend>

data/taglibs/forms.dryml

@@ -3,12 +3,13 @@
 <!--</def>-->
 
 
-<%# When using field-lists, remember to add the form-horizontal class to get the bootstrap looks (this is done automatically in forms and show-page).
+<%# `field-list` in hobo_bootstrap is provided by `<bootstrap-fields>`.   `<bootstrap-fields>` has more options than Hobo's stock field-list's, so please check the `<bootstrap-fields>` documentation for more details.
+
+    When using field-lists, remember to add the form-horizontal class to get the bootstrap looks (this is done automatically in forms and show-page).
     <div class="form-horizontal">
       <field-list class="form-horizontal" with="&Project.first"/>
     </div>
 %>
-
 <def tag="field-list">
   <bootstrap-fields merge/>
 </def>
@@ -22,20 +23,42 @@
   <view merge class="uneditable-input"/>
 </def>
 
-<def tag="bootstrap-fields" attrs="size, columns, tag, no-edit, required, no-blanks">
+<%# `bootstrap-fields` provides HTML markup for an object in a manner suitable for use inside of Bootstrap's [form-horizontal](http://twitter.github.com/bootstrap/base-css.html#forms).
+
+`bootstrap-fields` implements a superset of the `<feckless-fieldset>` interface.   We only document the differences here.   Please read the `<feckless-fieldset>` documentation first.
+
+### Attributes
+
+- size: # of columns in the grid system.  Default is 12
+- columns: # of columns.  Default is 1.
+- input-attrs: A ruby hash containing attributes to be merged onto each view.   For example
+
+    <bootstrap-fields fields="foo,bar" input-attrs="&{:class => 'span9'}"/>
+
+is equivalent to:
+
+    <bootstrap-fields fields="foo,bar">
+      <foo-tag: class="span9"/>
+      <bar-tag: class="span9"/>
+    </bootstrap-fields>
+
+%>
+<def tag="bootstrap-fields" attrs="size, columns, tag, no-edit, required, no-blanks, input-attrs">
   <% tag ||= scope.in_form ? "input" : "view"; no_edit ||= "skip" -%>
   <% required ||= "" ; required = comma_split(required.gsub('-', '_')) -%>
   <div merge-attrs="&attributes - attrs_for(:with_fields)">
     <legend param if="&all_parameters[:legend]" />
-    <with-fields-grouped merge-attrs="&attributes & attrs_for(:with_fields)" size="&size" columns="&columns">
+    <with-fields-grouped merge-attrs="&attributes & attrs_for(:with_fields)" size="&size" columns="&columns" param>
 
     <% field_name = this_field_name
-       input_attrs = {:no_edit => no_edit} if tag == "input" && no_edit == "disable"
+       input_attrs ||= {}
+       input_attrs[:no_edit] = no_edit if tag == "input" && no_edit == "disable"
        field_method = scope.field_name.to_s.sub('?', '').gsub('.', '-')
        id_for_this = param_name_for_this.gsub('[', '_').gsub(']', '')
+       error_class = this_parent.errors[this_field].empty? ? "" : "error"
     -%>
       <div
-         class="control-group #{'required' if required.include?(scope.field_name)}" 
+         class="control-group #{'required' if required.include?(scope.field_name)} #{error_class}" 
          unless="&(tag == 'input' && no_edit == 'skip' && !can_edit?) || ((tag == 'view' || tag == 'uneditable-input') && no_blanks && this.blank?)"
          param="#{field_method}-field">
 
@@ -58,6 +81,7 @@
 </def>
 
 
+<!-- nodoc. -->
 <extend tag="form">
   <old-form: class="form-horizontal" merge>
     <actions: class="form-actions"/>
@@ -86,7 +110,7 @@ Supports all attributes supported by `<with-fields>` plus:
   field_names_groups = field_names.in_groups(columns, false)
   row_classes = "row"
   row_classes += " columns" if columns > 1
-  %><div class="#{row_classes}"> <%
+  %><div class="#{row_classes}" merge-attrs> <%
   field_names_groups.each do |field_names_group|
     %> <div class="span#{span_size}"> <%
     field_names_group.each do |field|
@@ -138,7 +162,7 @@ Supports all attributes supported by `<with-fields>` plus:
 </def>
 
 
-<!-- This field list creates a field list in just one line using -->
+<!-- This field list creates a field list in just one line -->
 <def tag="one-line-field-list" attrs="tag, no-edit, required, no-blanks">
   <% tag ||= scope.in_form ? "input" : "view"; no_edit ||= "skip" -%>
   <% required ||= "" ; required = comma_split(required.gsub('-', '_')) -%>
@@ -165,7 +189,7 @@ Supports all attributes supported by `<with-fields>` plus:
 
 
 
-
+<!-- This tag creates a form in just one line using bootstrap's inline-form -->
 <def tag="one-line-form" attrs="fields">
   <div class="row">
     <div class="span12">

data/taglibs/index_page.dryml

@@ -1,13 +1,48 @@
 <%# displays the pencil and trash can icons used by the bootstrap index page. %>
 <def tag="bootstrap-table-actions">
-  <a with="&this_parent" action="edit">
-    <i class="icon icon-edit"></i>
-  </a>
+  <do with="&this_parent">
+    <a action="edit" if="&object_url(this, :edit)" param="edit">
+      <i class="icon icon-edit"></i>
+    </a>
+  </do>
   <% if can_delete?(this_parent) %>
-  <%= link_to '<i class=\'icon-trash\'></i>'.html_safe, this_parent, :'data-confirm' => t('hobo.messages.confirm', :default=>'Are you sure?'), :method => :delete %>
+    <do param="delete">
+      <%= link_to '<i class=\'icon-trash\'></i>'.html_safe, this_parent, :'data-confirm' => t('hobo.messages.confirm', :default=>'Are you sure?'), :method => :delete %>
+    </do>
   <% end %>
 </def>
 
+<%# This is the hobo_bootstrap customization of the index page.
+
+It uses a table for the collection view, rather than the list of cards that hobo_clean uses.
+
+To switch to a list of cards, parameterize your index page like this:
+
+     <index-page>
+       <collection: replace>
+         <collection/>
+       </collection:>
+     </index-page>
+
+If you wish to customize the table instead, the collections param may be tweaked like any other `<table>`.
+
+    <collection: fields="this, subject, actions">
+      <this-view:>My <view/></this-view>
+    </collection:>
+
+`actions` is defined in this tag.  Remove it from `fields` to remove the column.
+
+The best way to remove any of the actions is to adjust your permission functions.   However, if you wish to remove or tweak in the view:
+
+    <collection:>
+      <actions-view:>
+        <bootstrap-table-actions>
+          <delete: replace/>
+        </bootstrap-table-actions>
+      </actions-view:>
+    </collection:>
+
+%>
 <extend tag="index-page">
   <old-index-page: without-count without-top-page-nav merge>
 

data/taglibs/input_many.dryml

@@ -0,0 +1,8 @@
+<!--
+Adds bootstrap styling to `<input-many>`
+-->
+<extend tag="input-many">
+  <old-input-many merge>
+    <field-list: size="0"/>
+  </old-input-many>
+</extend>

data/taglibs/page.dryml

@@ -15,7 +15,9 @@ Attributes:
 
 - `bottom-load-javascript` - if set, will load Javascript at the bottom of the page rather than in head
 - nav-location: `top`, `sub`.   Where do you want your main-nav located.   `top` merges it into the top bar, `sub` gives it its own bar. `top` is the default option.
-
+- content-size: The width, in the bootstrap grid system for the main content.  Default is 12 unless there is an aside, in which case the default is 9.
+- aside-size: The width, in the bootstrap grid system for the aside content.  Default is 12 - content_size.
+- aside-location
 
 Make your choice global with:
 
@@ -24,7 +26,7 @@ Make your choice global with:
     </extend>
 
 -->
-<def tag="page" attrs="title, full-title, nav-location, bottom-load-javascript">
+<def tag="page" attrs="title, full-title, nav-location, bottom-load-javascript, aside-location">
   <% full_title ||= "#{title} : #{app_name}" %>
   <html lang="en" merge-attrs>
     <head param>
@@ -51,11 +53,11 @@ Make your choice global with:
         <div class="navbar" param="navbar">
           <div class="navbar-inner" param="navbar-innner">
             <header class="container" param>
-              <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
+              <a href="#" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
-              </button>
+              </a>
               <div param="app-name">
                 <a class="brand" href="#{base_url}/"><app-name/></a>
               </div>
@@ -69,15 +71,32 @@ Make your choice global with:
             <main-nav class="nav nav-pills" current="&title" include-search param/>
           </div>
         </div>
-        <% attributes[:content_size] = "12" unless attributes[:content_size] 
-        aside_span = "span" + (12 - attributes[:content_size].to_i).to_s
+        <%
+          if all_parameters[:aside]
+            attributes[:content_size] ||= "9"
+            attributes[:aside_size] ||= (12 - attributes[:content_size].to_i).to_s
+            aside_span = "span" + attributes[:aside_size]
+            aside_location ||= 'right'
+          else
+            attributes[:content_size] = "12" unless attributes[:content_size]
+          end
         %>
         <div class="container bootstrap-content" param="container">
           <div class="row" param="main-row">
+            <div class="#{aside_span}" if="&all_parameters[:aside] && aside_location=='left'" param="aside-column">
+              <div class="well">
+                <section param="aside"/>
+              </div>
+            </div>
             <div class="span#{attributes[:content_size]}" param="main-column">
-              <section with-flash-messages param="content"/>
+              <section with-flash-messages param="content">
+                <section param="main-content">
+                  <header param="content-header"/>
+                  <section param="content-body"/>
+                </section>
+              </section>
             </div>
-            <div class="#{aside_span}" if="&attributes[:content_size].to_i < 12" param="aside-column">
+            <div class="#{aside_span}" if="&all_parameters[:aside] && aside_location=='right'" param="aside-column">
               <div class="well">
                 <section param="aside"/>
               </div>
@@ -118,6 +137,7 @@ Make your choice global with:
   </html>
 </def>
 
+<!-- nodoc. -->
 <def tag="simple-page">
   <page without-live-search without-main-nav merge>
     <account-nav: replace />

data/taglibs/page_nav.dryml

@@ -1,3 +1,6 @@
+<!--
+Adds bootstrap styling to `<page-nav>`
+-->
 <extend tag="page-nav">
   <% add_classes!(attributes, "pagination") %>
   <old-page-nav merge renderer="&BootstrapPagination::Rails"/>

data/taglibs/search.dryml

@@ -5,7 +5,7 @@ Adds bootstrap styling to `<live-search>`
   <old-live-search remove-class="form-horizontal">
     <label: replace/>
     <form: class="form-search"/>
-    <input: placeholder="Search" class="search-query"/>
+    <input: placeholder="&t('hobo.live_search.label', :default => 'Search')" class="search-query"/>
     <after-input:>
       <i class="icon-search"></i>
     </after-input:>

data/taglibs/select_many.dryml

@@ -0,0 +1,6 @@
+<extend tag="select-many">
+  <old-select-many merge>
+    <remove-button: class="btn btn-small"/>
+    <proto-remove-button: class="btn btn-small"/>
+  </old-select-many>
+</extend>

data/taglibs/show_page.dryml

@@ -1,3 +1,6 @@
+<!--
+Adds bootstrap styling to `<show-page>`
+-->
 <extend tag="show-page">
   <old-show-page: merge>
     <field-list: class="form-horizontal"/>

data/taglibs/table-plus.dryml

@@ -6,9 +6,11 @@ Adds bootstrap styling to `<table-plus>`
     <table: class="table table-striped table-bordered" style="clear: both;"/>
     <header: style="float: right;"/>
     <search-filter:>
-      <search-form: class="form-search" style="display: inline;" />
-      <input: class="search-query"/>
-      <clear-form: class="form-search" style="display: inline;"/>
+      <search-form: class="form-search" remove-class="form-horizontal" style="display: inline;" />
+      <label: replace/>
+      <input: class="search-query" placeholder="Search"/>
+      <search-submit: remove-class="btn-primary" class="btn-small"/>
+      <clear-form: class="form-search" remove-class="form-horizontal" style="display: inline;"/>
     </search-filter:>
   </old-table-plus>
 </extend>

data/vendor/assets/stylesheets/hobo_bootstrap.scss

@@ -1,3 +1,5 @@
-@import "hobo_bootstrap/hobo_bootstrap_main";
-@import "hobo_bootstrap/hobo_bootstrap_responsive";
+@import "bootstrap";
+@import "hobo_bootstrap/hobo_bootstrap_main";  // bootstrap stylings for hobo components
+@import "bootstrap-responsive"; // Main responsive file
+@import "hobo_bootstrap/hobo_bootstrap_responsive"; // Hobo responsive workarounds
 @import "hobo_bootstrap/hobo_bootstrap_docs";

data/vendor/assets/stylesheets/hobo_bootstrap/hobo_bootstrap_main.scss

@@ -1,6 +1,4 @@
 
-@import "bootstrap";
-
 /* Top menu bar (app name, login...): 
    It's full width so border-radius is unnecessary */
 .navbar-inner{
@@ -25,7 +23,7 @@
   margin:4px 4px 0 0;
 }
 .form-search i {
-  margin: -20px 0 0 162px;
+  margin: -22px 0 0 178px;
   display: block;
   position:absolute;
 }
@@ -56,8 +54,9 @@ div.hidden-fields {
 
 /* spinner */
 .ajax-progress{
-  padding: 0 20px 10px;
-  background: image-url('ajax-loader.gif') no-repeat 0px 1px;
+  padding: 5px 12px 5px 27px;
+  background: image-url('ajax-loader.gif') no-repeat 8px 6px rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
   display: none;
   z-index: 1000;
 }
@@ -71,12 +70,14 @@ div.hidden-fields {
 ul.input-many {list-style-type: none;}
 ul.input-all  {list-style-type: none;}
 
-ul.input-many > li { overflow:hidden; zoom:1;}
-ul.input-many .input-many-item {float:left;}
-ul.input-many div.buttons {float:left; margin-left:10px;}
-li.input-many-template { display:none; }
-
-
+ul.input-many > li { display: table-row; }
+ul.input-many > li > div.input-many-item {display: table-cell; padding-right: 10px; padding-top: 20px; border-right: 1px dotted; border-bottom: 1px dotted; }
+/* li:nth-child(3) is the first visible child; first two are hidden */
+ul.input-many > li:nth-child(3) > div.input-many-item {padding-top: 0px;}
+ul.input-many > li > div.buttons {display: table-cell; padding-left: 10px; vertical-align: middle;}
+ul.input-many > li > div.buttons button {@extend .btn}
+ul.input-many > li.input-many-template { display:none; }
+ul.input-many > li.hidden { display:none; }
 
 
 /* Index page fix */
@@ -128,6 +129,9 @@ ul.collection { margin-left: 0;}
   content:"*";
   color: #C62121;
 }
+.form-horizontal .actions {
+  @extend .form-actions;
+}
 
 
 
@@ -141,3 +145,41 @@ div.ordering-handle {
   padding: 0 2px;
   border-radius: 4px 4px 4px 4px;
 }
+
+
+
+/* Select-many */
+.select-many .items{
+  width: 100%;
+  display: table;
+  margin-bottom: 3px;
+}
+.select-many .item{
+  display: table-row;
+}
+.select-many .item * {
+  display: table-cell;
+  margin-bottom: 5px;
+}
+.select-many optgroup.disabled-option {
+  color: #BBBBBB;
+  height: 1em;
+}
+
+
+/* Table plus search */
+.table-plus .header .search{
+  padding-bottom:5px;
+}
+.table-plus .header .search .submit-button{
+  margin-left:5px;
+}
+
+
+/* check-many */
+.check-many {
+  list-style-type: none;
+}
+.check-many li label {
+  display: inline;
+}