Change community track creation usability

Victor Costa
1 parent 77b54988
Showing 6 changed files with 117 additions and 33 deletions Show diff stats
plugins/community_track/lib/community_track_plugin/step_helper.rb
plugins/community_track/public/style.css
plugins/community_track/test/functional/community_track_plugin_content_viewer_controller_test.rb
plugins/community_track/test/unit/community_track_plugin/step_helper_test.rb
plugins/community_track/views/blocks/_track.rhtml
plugins/community_track/views/content_viewer/_step_item.rhtml
@@ -21,6 +21,16 @@ module CommunityTrackPlugin::StepHelper
     nil
   end
  
+  def link_to_step_tool(step, options={})
+    if step.tool
+      link_to step.tool.view_url, options do
+        yield
+      end
+    else
+      yield
+    end
+  end
+
   protected
  
   def status_index(step)
@@ -3,17 +3,17 @@
   background-image: url(/plugins/community_track/icons/community-track.png)
 }
  
-.step_active, #article .step_active a {
+.step_active, #article .step_active {
   background-color: #CCEBD6;
   color: #338533;
 }
  
-.step_waiting, #article .step_waiting a {
+.step_waiting, #article .step_waiting {
   background-color: #FFFFD1;
   color: #D17519;
 }
  
-.step_finished, #article .step_finished a {
+.step_finished, #article .step_finished {
   background-color: #D1FFFF;
   color: #00297A;
 }
@@ -24,6 +24,7 @@
  
 .step {
   font-weight: bold;
+  margin-bottom: 3px;
 }
  
 .track_list .item .step {
@@ -73,6 +74,11 @@
 .steps .step {
   margin-top: 3px;
   margin-bottom: 3px;
+  display: block;
+}
+
+.steps a {
+  text-decoration: none;
 }
  
 .track_list .item_card .track_stats {
@@ -126,11 +132,12 @@
 #track .position {
   font-size: 24px;
   font-weight: bold;
-  float: left;
   margin: 0 10px;
+  display: inline-block;
+  vertical-align: top;
 }
  
-#track .step .name, #track .step .name a {
+#track .step .name {
   font-weight: bold;
   color: #333;
 }
@@ -151,7 +158,7 @@
  
 #track .content {
   margin: 6px 0px;
-  border-bottom: 1px solid #DDDDDD;
+  display: inline-block;
 }
  
 #track .ui-state-default .content {
@@ -201,16 +208,51 @@
 }
  
 .step_list .step .tools {
-  text-align: center;
+  margin-top: 5px;
 }
  
-.step_list .step .actions {
-  float: right;
+#article .step_list .step .tool_icon, 
+.tool_icon {
+  color: #888;
+  background-color: transparent;
+  border: 0px;
+  background-repeat: no-repeat;
+  line-height: 20px;
+  height: 20px;
+  padding: 3px 2px 3px 22px;
 }
  
-#article .step_list .step .actions .button {
+#article .step .tool_link {
+  cursor: pointer;
+}
+
+#article .step_active .tool_link:hover,
+.step_active:hover {
+  background-color: #B8D4C1;
+}
+
+#article .step_waiting .tool_link:hover,
+.step_waiting:hover {
+  background-color: #E6E6BC;
+}
+
+#article .step_finished .tool_link:hover,
+.step_finished:hover {
+  background-color: #BCE6E6;
+}
+
+.step_list .step .step_actions {
+  text-align: right;
+  border-top: 1px solid;
+}
+
+#article .step_list .step .step_actions .button {
   color: #888;
   background-color: transparent;
   border: 0px;
-  background-image: none;
+  border-right: 1px solid;
+}
+
+#article .step_list .step .step_actions .button:hover {
+  color: #444;
 }
@@ -21,7 +21,7 @@ class ContentViewerControllerTest &lt; ActionController::TestCase
  
   should 'show actions for tracks when user has permission for edit' do
     get :view_page, @track.url
-    assert_tag :tag => 'div', :attributes => {:id => 'track' }, :descendant => { :tag => 'div', :attributes => { :class => 'actions' } }
+    assert_tag :tag => 'div', :attributes => {:id => 'track' }, :descendant => { :tag => 'div', :attributes => { :class => 'track actions' } }
   end
  
   should 'do not show actions for tracks when user has not permission to edit' do
@@ -107,7 +107,7 @@ class ContentViewerControllerTest &lt; ActionController::TestCase
     @block = CommunityTrackPlugin::TrackListBlock.create!(:box => box)
     @profile.boxes << box
     get :view_page, @step.url
-    assert_tag :tag => 'div', :attributes => { :class => "item category_#{@track.category_name}" }, :descendant => { :tag => 'div', :attributes => { :class => 'steps' }, :descendant => { :tag => 'div', :attributes => { :class => "step #{@block.status_class(@step)}" } } }
+    assert_tag :tag => 'div', :attributes => { :class => "item category_#{@track.category_name}" }, :descendant => { :tag => 'div', :attributes => { :class => 'steps' }, :descendant => { :tag => 'span', :attributes => { :class => "step #{@block.status_class(@step)}" } } }
   end
  
   should 'render tracks in track card list block' do
@@ -35,4 +35,21 @@ class StepHelperTest &lt; ActiveSupport::TestCase
     assert !custom_options_for_article(fast_create(Article))
   end
  
+  should 'return content without link if there is no tool in a step' do
+    link = link_to_step_tool(@step) do
+      "content"
+    end
+    assert_equal 'content', link
+  end
+
+  should 'return link to step tool if there is a tool' do
+    profile = fast_create(Community)
+    tool = fast_create(Article, :profile_id => profile.id)
+    @step.stubs(:tool).returns(tool)
+    expects(:link_to).with(tool.view_url, {}).once
+    link = link_to_step_tool(@step) do
+      "content"
+    end
+  end
+
 end
 <% extend CommunityTrackPlugin::TrackHelper %>
+<% extend CommunityTrackPlugin::StepHelper %>
 <div class="item <%= category_class(track) %>">
   <div class="track_content">
     <div class="lead">
@@ -10,10 +11,13 @@
     <div class="steps">
       <h3><%= _("Steps") %></h3>
       <% track.steps.each do |step| %>
-        <div class="step <%= block.status_class(step) %>">
-          <div class="position"><%= step.position %></div>
-          <%= link_to step.name, step.url %>
-        </div>
+        <% link_to_step_tool(step) do %>
+          <span class="step <%= block.status_class(step) %>">
+            <span class="position"><%= step.position %></span>
+            <span class="tool_icon button with-text icon-new icon-new<%= step.tool_class.icon_name if step.tool_class %>"></span>
+            <span class="name"><%= step.name %></span>
+          </span>
+        <% end %>
       <% end %>
     </div>
   </div>
 <li class="step <%= status_class(step_item) %>">
   <%= hidden_field_tag "step_ids[]", step_item.id %>
-  <div class="position"><%= step_item.hidden ? '' : step_item.position %></div>
-  <div class="actions">
+  <div class="tool_link" onclick="l=jQuery('#step_link_<%= step_item.id%>'); if(l.length) window.location = l.first().attr('href');">
+    <div class="position"><%= step_item.hidden ? '' : step_item.position %></div>
+    <div class="content">
+      <div class="date">
+        <%= show_period(step_item.start_date, step_item.end_date) %>
+      </div>
+      <div class="name"><span class="tool_icon button with-text icon-new icon-new<%= step_item.tool_class.icon_name if step_item.tool_class %>"></span>  <%= step_item.name %></div>
+      <div class="lead"><%= step_item.body %></div>
+      <div class="tools">
+        <% if step_item.tool %>
+          <%= _('Tool: ') %>
+
+          <% link_to_step_tool(step_item, {:id => "step_link_#{step_item.id}"}) do %>
+            <%= step_item.tool.name %>
+          <% end %>
+
+        <% elsif step_item.allow_create?(user) && step_item.tool_class %>
+          <a id="step_link_<%= step_item.id %>" href="<%= url_for({:controller => 'cms', :action => 'new', :type => step_item.tool_class, :parent_id => step_item, :success_back_to => url_for(step_item.parent.view_url)}) %>" class="button icon-new with-text icon-new<%= step_item.tool_class.icon_name %>"><%= _('Create %s' % step_item.tool_class.short_description) %></a>
+        <% end %>
+      </div>
+    </div>
+  </div>
+  <div class="step_actions">
     <% if step_item.allow_edit?(user) && !remove_content_button(:edit) %>
+      <%= button('eyes', _('View'), step_item.url) %>
       <% content = content_tag('span', label_for_edit_article(step_item)) %>
       <% url = profile.admin_url.merge({ :controller => 'cms', :action => 'edit', :id => step_item.id, :success_back_to => url_for(step_item.parent.view_url) }) %>
       <%= expirable_button step_item, :edit, content, url %>
     <% end %>
-  </div>
-  <div class="content">
-    <div class="date">
-      <%= show_period(step_item.start_date, step_item.end_date) %>
-    </div>
-    <div class="name"><%= link_to step_item.name, step_item.url %></div>
-    <div class="lead"><%= step_item.body %></div>
-  </div>
-  <div class="tools">
-  <% if step_item.tool %>
-    <%= link_to step_item.tool.name, step_item.tool.view_url %>
-  <% elsif step_item.allow_create?(user) && step_item.tool_class %>
-    <a href="<%= url_for({:controller => 'cms', :action => 'new', :type => step_item.tool_class, :parent_id => step_item, :success_back_to => url_for(step_item.parent.view_url)}) %>" class="button icon-new with-text icon-new<%= step_item.tool_class.icon_name %>"><%= _('Create %s' % step_item.tool_class.short_description) %></a>
-  <% end %>
+    <% if step_item.accept_uploads? && step_item.allow_create?(user) %>
+      <%= button('upload-file', _('Upload files'), profile.admin_url.merge(:controller => 'cms', :action => 'upload_files', :parent_id => step_item)) unless remove_content_button(:upload)%>
+    <% end %>
   </div>
 </li>
...	...	@@ -21,6 +21,16 @@ module CommunityTrackPlugin::StepHelper
21	21	nil
22	22	end
23	23
	24	+ def link_to_step_tool(step, options={})
	25	+ if step.tool
	26	+ link_to step.tool.view_url, options do
	27	+ yield
	28	+ end
	29	+ else
	30	+ yield
	31	+ end
	32	+ end
	33	+
24	34	protected
25	35
26	36	def status_index(step)
...	...
...	...	@@ -3,17 +3,17 @@
3	3	background-image: url(/plugins/community_track/icons/community-track.png)
4	4	}
5	5
6		-.step_active, #article .step_active a {
	6	+.step_active, #article .step_active {
7	7	background-color: #CCEBD6;
8	8	color: #338533;
9	9	}
10	10
11		-.step_waiting, #article .step_waiting a {
	11	+.step_waiting, #article .step_waiting {
12	12	background-color: #FFFFD1;
13	13	color: #D17519;
14	14	}
15	15
16		-.step_finished, #article .step_finished a {
	16	+.step_finished, #article .step_finished {
17	17	background-color: #D1FFFF;
18	18	color: #00297A;
19	19	}
...	...	@@ -24,6 +24,7 @@
24	24
25	25	.step {
26	26	font-weight: bold;
	27	+ margin-bottom: 3px;
27	28	}
28	29
29	30	.track_list .item .step {
...	...	@@ -73,6 +74,11 @@
73	74	.steps .step {
74	75	margin-top: 3px;
75	76	margin-bottom: 3px;
	77	+ display: block;
	78	+}
	79	+
	80	+.steps a {
	81	+ text-decoration: none;
76	82	}
77	83
78	84	.track_list .item_card .track_stats {
...	...	@@ -126,11 +132,12 @@
126	132	#track .position {
127	133	font-size: 24px;
128	134	font-weight: bold;
129		- float: left;
130	135	margin: 0 10px;
	136	+ display: inline-block;
	137	+ vertical-align: top;
131	138	}
132	139
133		-#track .step .name, #track .step .name a {
	140	+#track .step .name {
134	141	font-weight: bold;
135	142	color: #333;
136	143	}
...	...	@@ -151,7 +158,7 @@
151	158
152	159	#track .content {
153	160	margin: 6px 0px;
154		- border-bottom: 1px solid #DDDDDD;
	161	+ display: inline-block;
155	162	}
156	163
157	164	#track .ui-state-default .content {
...	...	@@ -201,16 +208,51 @@
201	208	}
202	209
203	210	.step_list .step .tools {
204		- text-align: center;
	211	+ margin-top: 5px;
205	212	}
206	213
207		-.step_list .step .actions {
208		- float: right;
	214	+#article .step_list .step .tool_icon,
	215	+.tool_icon {
	216	+ color: #888;
	217	+ background-color: transparent;
	218	+ border: 0px;
	219	+ background-repeat: no-repeat;
	220	+ line-height: 20px;
	221	+ height: 20px;
	222	+ padding: 3px 2px 3px 22px;
209	223	}
210	224
211		-#article .step_list .step .actions .button {
	225	+#article .step .tool_link {
	226	+ cursor: pointer;
	227	+}
	228	+
	229	+#article .step_active .tool_link:hover,
	230	+.step_active:hover {
	231	+ background-color: #B8D4C1;
	232	+}
	233	+
	234	+#article .step_waiting .tool_link:hover,
	235	+.step_waiting:hover {
	236	+ background-color: #E6E6BC;
	237	+}
	238	+
	239	+#article .step_finished .tool_link:hover,
	240	+.step_finished:hover {
	241	+ background-color: #BCE6E6;
	242	+}
	243	+
	244	+.step_list .step .step_actions {
	245	+ text-align: right;
	246	+ border-top: 1px solid;
	247	+}
	248	+
	249	+#article .step_list .step .step_actions .button {
212	250	color: #888;
213	251	background-color: transparent;
214	252	border: 0px;
215		- background-image: none;
	253	+ border-right: 1px solid;
	254	+}
	255	+
	256	+#article .step_list .step .step_actions .button:hover {
	257	+ color: #444;
216	258	}
...	...
...	...	@@ -21,7 +21,7 @@ class ContentViewerControllerTest < ActionController::TestCase
21	21
22	22	should 'show actions for tracks when user has permission for edit' do
23	23	get :view_page, @track.url
24		- assert_tag :tag => 'div', :attributes => {:id => 'track' }, :descendant => { :tag => 'div', :attributes => { :class => 'actions' } }
	24	+ assert_tag :tag => 'div', :attributes => {:id => 'track' }, :descendant => { :tag => 'div', :attributes => { :class => 'track actions' } }
25	25	end
26	26
27	27	should 'do not show actions for tracks when user has not permission to edit' do
...	...	@@ -107,7 +107,7 @@ class ContentViewerControllerTest < ActionController::TestCase
107	107	@block = CommunityTrackPlugin::TrackListBlock.create!(:box => box)
108	108	@profile.boxes << box
109	109	get :view_page, @step.url
110		- assert_tag :tag => 'div', :attributes => { :class => "item category_#{@track.category_name}" }, :descendant => { :tag => 'div', :attributes => { :class => 'steps' }, :descendant => { :tag => 'div', :attributes => { :class => "step #{@block.status_class(@step)}" } } }
	110	+ assert_tag :tag => 'div', :attributes => { :class => "item category_#{@track.category_name}" }, :descendant => { :tag => 'div', :attributes => { :class => 'steps' }, :descendant => { :tag => 'span', :attributes => { :class => "step #{@block.status_class(@step)}" } } }
111	111	end
112	112
113	113	should 'render tracks in track card list block' do
...	...
...	...	@@ -35,4 +35,21 @@ class StepHelperTest < ActiveSupport::TestCase
35	35	assert !custom_options_for_article(fast_create(Article))
36	36	end
37	37
	38	+ should 'return content without link if there is no tool in a step' do
	39	+ link = link_to_step_tool(@step) do
	40	+ "content"
	41	+ end
	42	+ assert_equal 'content', link
	43	+ end
	44	+
	45	+ should 'return link to step tool if there is a tool' do
	46	+ profile = fast_create(Community)
	47	+ tool = fast_create(Article, :profile_id => profile.id)
	48	+ @step.stubs(:tool).returns(tool)
	49	+ expects(:link_to).with(tool.view_url, {}).once
	50	+ link = link_to_step_tool(@step) do
	51	+ "content"
	52	+ end
	53	+ end
	54	+
38	55	end
...	...
1	1	<% extend CommunityTrackPlugin::TrackHelper %>
	2	+<% extend CommunityTrackPlugin::StepHelper %>
2	3	<div class="item <%= category_class(track) %>">
3	4	<div class="track_content">
4	5	<div class="lead">
...	...	@@ -10,10 +11,13 @@
10	11	<div class="steps">
11	12	<h3><%= _("Steps") %></h3>
12	13	<% track.steps.each do \|step\| %>
13		- <div class="step <%= block.status_class(step) %>">
14		- <div class="position"><%= step.position %></div>
15		- <%= link_to step.name, step.url %>
16		- </div>
	14	+ <% link_to_step_tool(step) do %>
	15	+ <span class="step <%= block.status_class(step) %>">
	16	+ <span class="position"><%= step.position %></span>
	17	+ <span class="tool_icon button with-text icon-new icon-new<%= step.tool_class.icon_name if step.tool_class %>"></span>
	18	+ <span class="name"><%= step.name %></span>
	19	+ </span>
	20	+ <% end %>
17	21	<% end %>
18	22	</div>
19	23	</div>
...	...
1	1	<li class="step <%= status_class(step_item) %>">
2	2	<%= hidden_field_tag "step_ids[]", step_item.id %>
3		- <div class="position"><%= step_item.hidden ? '' : step_item.position %></div>
4		- <div class="actions">
	3	+ <div class="tool_link" onclick="l=jQuery('#step_link_<%= step_item.id%>'); if(l.length) window.location = l.first().attr('href');">
	4	+ <div class="position"><%= step_item.hidden ? '' : step_item.position %></div>
	5	+ <div class="content">
	6	+ <div class="date">
	7	+ <%= show_period(step_item.start_date, step_item.end_date) %>
	8	+ </div>
	9	+ <div class="name"><span class="tool_icon button with-text icon-new icon-new<%= step_item.tool_class.icon_name if step_item.tool_class %>"></span> <%= step_item.name %></div>
	10	+ <div class="lead"><%= step_item.body %></div>
	11	+ <div class="tools">
	12	+ <% if step_item.tool %>
	13	+ <%= _('Tool: ') %>
	14	+
	15	+ <% link_to_step_tool(step_item, {:id => "step_link_#{step_item.id}"}) do %>
	16	+ <%= step_item.tool.name %>
	17	+ <% end %>
	18	+
	19	+ <% elsif step_item.allow_create?(user) && step_item.tool_class %>
	20	+ <a id="step_link_<%= step_item.id %>" href="<%= url_for({:controller => 'cms', :action => 'new', :type => step_item.tool_class, :parent_id => step_item, :success_back_to => url_for(step_item.parent.view_url)}) %>" class="button icon-new with-text icon-new<%= step_item.tool_class.icon_name %>"><%= _('Create %s' % step_item.tool_class.short_description) %></a>
	21	+ <% end %>
	22	+ </div>
	23	+ </div>
	24	+ </div>
	25	+ <div class="step_actions">
5	26	<% if step_item.allow_edit?(user) && !remove_content_button(:edit) %>
	27	+ <%= button('eyes', _('View'), step_item.url) %>
6	28	<% content = content_tag('span', label_for_edit_article(step_item)) %>
7	29	<% url = profile.admin_url.merge({ :controller => 'cms', :action => 'edit', :id => step_item.id, :success_back_to => url_for(step_item.parent.view_url) }) %>
8	30	<%= expirable_button step_item, :edit, content, url %>
9	31	<% end %>
10		- </div>
11		- <div class="content">
12		- <div class="date">
13		- <%= show_period(step_item.start_date, step_item.end_date) %>
14		- </div>
15		- <div class="name"><%= link_to step_item.name, step_item.url %></div>
16		- <div class="lead"><%= step_item.body %></div>
17		- </div>
18		- <div class="tools">
19		- <% if step_item.tool %>
20		- <%= link_to step_item.tool.name, step_item.tool.view_url %>
21		- <% elsif step_item.allow_create?(user) && step_item.tool_class %>
22		- <a href="<%= url_for({:controller => 'cms', :action => 'new', :type => step_item.tool_class, :parent_id => step_item, :success_back_to => url_for(step_item.parent.view_url)}) %>" class="button icon-new with-text icon-new<%= step_item.tool_class.icon_name %>"><%= _('Create %s' % step_item.tool_class.short_description) %></a>
23		- <% end %>
	32	+ <% if step_item.accept_uploads? && step_item.allow_create?(user) %>
	33	+ <%= button('upload-file', _('Upload files'), profile.admin_url.merge(:controller => 'cms', :action => 'upload_files', :parent_id => step_item)) unless remove_content_button(:upload)%>
	34	+ <% end %>
24	35	</div>
25	36	</li>
...	...