Merge branch 'panel_improvements' into ux_improvements

app/helpers/application_helper.rb

@@ -20,6 +20,6 @@ def display_item_title item
   end
 
   def link_to_with_tooltip(link_title, link, tooltip)
-    link_to link_title.camelize, link, :id => link_title.gsub(' ', '-').downcase, :title => tooltip
+    link_to link_title, link, :title => tooltip
   end
 end

app/stylesheets/partials/_lists.sass

@@ -3,12 +3,16 @@
     :background #785C17 none repeat scroll 0 0
     :border 2 solid #89A407
     :color #C1C4B5
-    :margin-right 58px
-    :margin-left 371px
+    :position relative
+    :float right
+    :display block
     :padding 2px
     :text-align center
     :height 23px
     :width 40px
+  .order_icon:hover
+    :background #C1C4B5 none repeat scroll 0 0
+    :color black
   #lists
     :padding 16px
     .handler
@@ -19,20 +23,10 @@
       :text-align center
       :margin 2px
       :top 2px
-    span.active, .order_box, li .icons
-      :background #89A407 none repeat scroll 0 0
-      :border thin solid #785C17
-      :margin-top 12px
-      :display inline-block
-    ul
-      :padding-top 23px
-    ul > li
-      :background #FCFDEF none repeat scroll 0 0
-      :border-bottom thin solid #BACA54
-      :border-top thin solid #EDF2BF
-      :margin 3px
-      :min-height 62px
-      :padding 5px 8px 0
+    #list-head
+      :height 50px
+      :width 408px
+      :margin 0 auto
     .list_content
       :display inline-block
       :padding-left 13px
@@ -44,10 +38,5 @@
       :float left
       :right 3px
     li span.icons
-      :height 32px
-      :width 88px
+      :position relative
       :float right
-      a
-        :margin-left 4px
-        :margin-top 7px
-        :float left

app/stylesheets/partials/icons.sass

@@ -0,0 +1,22 @@
+ul.icons
+  li
+    cursor:pointer
+    list-style-image:none
+    list-style-position:outside
+    list-style-type:none
+    margin:2px
+    :position relative
+    :float left
+    :position relative
+    :float left
+    :margin 1px
+    :padding-top 1px
+    a
+      :display block
+      :height 23px
+      :width 23px
+      :margin 0px auto
+span.ui-icon
+  margin: auto !important
+  width: 16px
+  height: 16px

app/stylesheets/screen.sass

@@ -36,6 +36,8 @@
 
 @import partials/pagination.sass
 
+@import partials/icons.sass
+
 @import partials/accordion.sass
 
 @import partials/hover_dialog.sass
@@ -77,6 +79,8 @@ body.salad
     +link-colors(#C1C4B5, #785C17, #C1C4B5, #C1C4B5, #C1C4B5)
     +unstyled-link
     :cursor -moz-contextmenu
+  div.clearfix
+    :clear both
   #header
     :height 80px
     #logo
@@ -117,6 +121,17 @@ body.salad
         +column(6.97)
         :padding 13px 0 0 12px
         :min-height 150px
+      span.active, .order_box, span.icons
+        :padding 12px 0px
+        :background #89A407 none repeat scroll 0 0
+        :border thin solid #785C17
+      ul.items-list > li
+        :background #FCFDEF none repeat scroll 0 0
+        :border-bottom thin solid #BACA54
+        :border-top thin solid #EDF2BF
+        :margin 3px
+        :min-height 85px
+        :padding 5px 8px 0
     #sidebar
       // One third of the grid columns, rounding down. With 24 cols, this is 8.
       !sidebar_columns = floor(!blueprint_grid_columns / 3.1)

app/views/common/_icons.html.erb

@@ -1,8 +1,26 @@
 <span class="icons ui-widget ui-widget-content ui-corner-all">
-  <%= link_to "View", {:controller => model.class.to_s.downcase.pluralize, :id => model, :action => 'show'}, {:class=>"ui-icon-note ui-icon"} %>
-  <%= link_to "Edit", {:controller => model.class.to_s.downcase.pluralize, :id => model, :action => 'edit'}, {:id=>"edit_#{model.class.to_s.downcase}_#{model.id}",:class=>"ui-icon-pencil ui-icon"} %>
-  <% if not assoc.nil? %>
-  <%= link_to "New #{assoc.capitalize}", {:controller => assoc.pluralize, :action => :new, "#{model.class.to_s.downcase}_id".to_sym => model.id }, {:class=>"ui-icon-document ui-icon"} %>
-  <% end %>
-  <%= link_to 'Delete', model, {:class=>"ui-icon-trash ui-icon",:method => :delete,:confirm => 'Are you sure?'} %>
+  <ul class="icons">
+    <li title="View" class="ui-state-default ui-corner-all">
+        <%= link_to "<span class='ui-icon ui-icon-note' />", {:controller => model.class.to_s.downcase.pluralize, :id => model, :action => 'show'} %>
+    </li>
+    <li title="Edit" class="ui-state-default ui-corner-all">
+      <%= link_to "<span class='ui-icon-pencil ui-icon' />",
+        {:controller => model.class.to_s.downcase.pluralize, :id => model, :action => 'edit'}, {:id=>"edit_#{model.class.to_s.downcase}_#{model.id}"} %>
+    </li>
+    <% if assoc.nil? == false && model.send("#{assoc.to_s.singularize}_ids").empty? == false %>
+    <li title="<%= assoc.pluralize.capitalize %>" class="ui-state-default ui-corner-all">
+      <%= link_to "<span class='ui-icon ui-icon-zoomin' />",
+        {:controller => model.class.to_s.downcase.pluralize, :id => model.id, :action => assoc.pluralize }%>
+    </li>
+    <% end %>
+    <li title="Delete" class="ui-state-default ui-corner-all">
+      <%= link_to "<span class='ui-icon-trash ui-icon' />", model, {:method => :delete,:confirm => 'Are you sure?'} %>
+    </li>
+    <% if not assoc.nil? %>
+    <li title="New <%=assoc.capitalize%>" class="ui-state-default ui-corner-all">
+      <%= link_to "<span class='ui-icon-document ui-icon' />",
+        {:controller => assoc.pluralize, :action => :new, "#{model.class.to_s.downcase}_id".to_sym => model.id } %>
+    </li>
+    <% end %>
+  </ul>
 </span>

app/views/common/_sortable_list.html.erb

@@ -4,11 +4,13 @@
     <div class="list_content">
         <%= will_paginate models unless models.nil? or !models.respond_to?(:total_pages) %>
       <div class="<%= item_name.pluralize.downcase %> ui-widget ui-widget-content ui-corner-all" id="lists">
-        <%= link_to "New #{item_name.singularize.capitalize}",
+        <div id="list-head">
+          <%= order_btn models, order  if defined? order%>
+          <%= link_to "New #{item_name.singularize.capitalize}",
             :controller => item_name.pluralize.downcase,
             :action => :new %>
-        <%= order_btn models, order  if defined? order%>
-        <ul id="<%= item_name.pluralize.downcase %>">
+        </div>
+        <ul id="<%= item_name.pluralize.downcase %>" class="items-list">
         <% if !models.blank? %>
             <% models.each_with_index do |model,index| %>
               <% content_tag_for(:li, model) do %>

app/views/common/list/_feature.html.erb

@@ -1,5 +1,2 @@
 <b>Title: </b><%= feature.title %><br/>
-<b>Created at: </b><%= feature.creation_date %><br/>
-<% if !feature.story_ids.empty? %>
-  <%= link_to "Stories", stories_feature_path(feature)%>
-<% end %>
+<b>Created at: </b><%= feature.creation_date %><br/>

app/views/common/list/_project.html.erb

@@ -1,7 +1,4 @@
 <b>Title: </b><%= project.title %><br/>
 <b>Description: </b><%= project.description %><br/>
 <b>Aim: </b><%= project.aim %><br/>
-<b>Created at: </b><%= project.creation_date %><br/>
-<% if !project.feature_ids.empty? %>
-    <%= link_to "Features", features_project_path(project)%>
-<% end %>
+<b>Created at: </b><%= project.creation_date %><br/>

app/views/common/list/_story.html.erb

@@ -1,4 +1 @@
-<b>Scenario: </b><%=h story.scenario %><br/>
-<% if !story.step_ids.empty? %>
-  <%= link_to "Steps", steps_story_path(story), {:id=>"story_#{story.id}_steps"} %>
-<% end %>
+<b>Scenario: </b><%=h story.scenario %><br/>

app/views/common/panels/_feature.html.erb

@@ -0,0 +1,31 @@
+<span id="panel" class="icons ui-widget ui-widget-content ui-corner-all">
+  <ul class="icons">
+    <% if not feature.stories.blank? %>
+    <li class="ui-state-default ui-corner-all">
+      <%= link_to_with_tooltip "<span class='ui-icon ui-icon-disk' />", export_feature_path(feature), 'Export a feature' %>
+    </li>
+    <% end %>
+    <% if feature.is_diff? %>
+    <li class="ui-state-default ui-corner-all">
+      <%= link_to_with_tooltip "<span class='ui-icon-transferthick-e-w ui-icon' />", changes_feature_path(feature), 'Check the difference between the systems & your applications features' %>
+    </li>
+    <li class="ui-state-default ui-corner-all">
+      <%= link_to_with_tooltip "<span class='ui-icon ui-icon-arrowthickstop-1-n'/>", merge_feature_path(feature), 'Merge a systems changes with the feature' %>
+    </li>
+    <% end %>
+    <% if !feature.stories.blank? %>
+    <li class="ui-state-default ui-corner-all">
+      <%= link_to_with_tooltip "<span class='ui-icon ui-icon-arrowthickstop-1-s'/>", system_merge_feature_path(feature), 'Merge a features changes with the system' %>
+    </li>
+    <% end %>
+    <% if feature.is_diff? %>
+    <li class="ui-state-default ui-corner-all">
+      <%= link_to_with_tooltip "<span class='ui-icon ui-icon-shuffle'/>", feature_path(feature, :format => :patch), 'Patch a feature with the systems changes' %>
+    </li>
+    <% end %>
+    <li class="ui-state-default ui-corner-all">
+      <%= link_to_with_tooltip "<span class='ui-icon ui-icon-pencil'/>", edit_feature_path(feature),  'Edit the feature and it\'s stories' %>
+    </li>
+  </ul>
+</span>
+<div class="clearfix"></div>

app/views/common/panels/_project.html.erb

@@ -0,0 +1,14 @@
+<span id="panel" class="icons ui-widget ui-widget-content ui-corner-all">
+  <ul class="icons">
+    <li class="ui-state-default ui-corner-all">
+      <%= link_to_with_tooltip "<span class='ui-icon ui-icon ui-icon-plus'/>", import_project_path(project), 'Allows you to import features singularly' unless @project.location.blank? %>
+    </li>
+    <li class="ui-state-default ui-corner-all">
+      <%= link_to_with_tooltip "<span class='ui-icon ui-icon-circle-plus'/>", import_all_project_path(project), 'Allows you to import all project features in one easy step' unless @project.location.blank? %>
+    </li>
+    <li class="ui-state-default ui-corner-all">
+      <%= link_to_with_tooltip "<span class='ui-icon ui-icon-pencil'/>", edit_project_path(project), 'Allows you to edit a projects information' %>
+    </li>
+  </ul>
+</span>
+<div class="clearfix"></div>

app/views/common/panels/_step.html.erb

@@ -0,0 +1,8 @@
+<span id="panel" class="ui-widget ui-widget-content ui-corner-all">
+  <ul class="icons">
+    <li class="ui-state-default ui-corner-all">
+      <%= link_to_with_tooltip "<span class='ui-icon ui-icon-pencil'/>", edit_step_path(@step), 'Edit the step' %>
+    </li>
+  </ul>
+</span>
+<div class="clearfix"></div>

app/views/common/panels/_story.html.erb

@@ -0,0 +1,8 @@
+<span id="panel" class="icons ui-widget ui-widget-content ui-corner-all">
+  <ul class="icons">
+    <li class="ui-state-default ui-corner-all">
+      <%= link_to_with_tooltip "<span class='ui-icon ui-icon-pencil'/>", edit_story_path(story), 'Edit the features information' %>
+    </li>
+  </ul>
+</span>
+<div class="clearfix"></div>

app/views/features/show.html.erb

@@ -6,18 +6,7 @@
 
 <%= render :partial => '/common/model_info_and_summary', :locals => {:model => @feature, :assoc => :stories } %>
 
-<span id="panel" class="ui-widget ui-widget-content ui-corner-all">
-  <% if @feature.is_diff? %>
-    <%= link_to_with_tooltip "view changes", changes_feature_path(@feature), :title => 'Check the difference between the systems & your applications features' %>
-    <%= link_to_with_tooltip "merge changes", merge_feature_path(@feature), :title => 'Merge a systems changes with the feature' %>
-    <%= link_to_with_tooltip "merge system", system_merge_feature_path(@feature), :title => 'Merge a features changes with the system' %>  
-    <%= link_to_with_tooltip "patch changes", feature_path(@feature, :format => :patch), :title => 'Patch a feature with the systems changes' %>
-  <% end %>
-  <% if !@feature.stories.blank? %>
-      <%= link_to_with_tooltip "export feature", export_feature_path(@feature), :title => 'Export the feature from the system.' %>
-  <% end %>
-    <%= link_to_with_tooltip "Edit", edit_feature_path(@feature),  :title => 'Edit the feature and it\'s stories' %>
-</span>
+<%= render :partial => '/common/panels/feature', :locals => {:feature => @feature} %>
 
 <%= render :partial => '/common/sortable_list',:locals => {:models => @feature_stories, :item_name => 'story', :assoc => 'step', :order =>true} %>
 

app/views/projects/show.html.erb

@@ -6,11 +6,7 @@
 
 <%= render :partial => '/common/model_info_and_summary', :locals => {:model => @project, :assoc => :features } %>
 
-<span id="panel" class="ui-widget ui-widget-content ui-corner-all">
-  <%= link_to_with_tooltip "import", import_project_path(@project), 'Allows you to import features singularly' unless @project.location.blank? %> | 
-  <%= link_to_with_tooltip "import all", import_all_project_path(@project), 'Allows you to import all project features in one easy step' unless @project.location.blank? %> | 
-  <%= link_to_with_tooltip "edit project", edit_project_path(@project), 'Allows you to edit a projects information' %>
-</span>
+<%= render :partial => '/common/panels/project', :locals => {:project => @project} %>
 
 <%= render :partial => '/common/sortable_list',:locals => {:models => @project_features, :item_name => 'feature', :assoc => 'story', :order =>true}%>
 

app/views/steps/show.html.erb

@@ -9,9 +9,7 @@
   <%= render :partial => '/common/model_summary', :locals => {:model => @step}%>
 </div>
 
-<span id="panel" class="ui-widget ui-widget-content ui-corner-all">
-  <%= link_to_with_tooltip "Edit step", edit_step_path(@step), 'Edit the steps' %>
-</span>
+<%= render :partial => '/common/panels/step', :locals => {:step => @step} %>
 
 <% semantic_form_for @step do |form| -%>
   <%= render :partial => '/common/checkboxes', :locals => {:model => @step, :item_name => Story}%>

app/views/stories/show.html.erb

@@ -5,10 +5,7 @@
 
 <%= render :partial => '/common/model_info_and_summary', :locals => {:model => @story, :assoc => :steps } %>
 
-<span id="panel" class="ui-widget ui-widget-content ui-corner-all">
-  <%= link_to_with_tooltip "Edit story", edit_story_path(@story), 'Edit the features information' %>
-</span>
-
+<%= render :partial => '/common/panels/story', :locals => {:story => @story} %>
 <div>
   <%= render :partial => '/common/sortable_list',
     :locals => {:models => @story_steps,

public/javascripts/application.js

@@ -5,6 +5,12 @@ $.ajaxSetup({
 });
 
 $(document).ready(function() {
+  //hover states on the static widgets
+  $('ul.icons li').hover(
+    function() { $(this).addClass('ui-state-hover'); },
+    function() { $(this).removeClass('ui-state-hover'); }
+  );
+
   /**
    * We don't want our checkboxes viewable initially
    */