Added tags widget on tasks list using inputosaurus jquery plugin

Michel Felipe · Leandro Santos
1 parent b4000b01
Showing 3 changed files with 34 additions and 0 deletions Show diff stats
app/views/tasks/_task.html.erb
app/views/tasks/index.html.erb
public/stylesheets/tasks.css
@@ -61,6 +61,13 @@
         <%= render :partial => partial_for_class(task.class, nil, :reject_details), :locals => {:task => task, :f => f} %>
       </div>
     <% end %>
+
+    <div class="formfieldline">
+      <div class="formfield tag-list-fields">
+        <%= labelled_text_field(_('Tags'),"tasks[#{task.id}][task][tag_list]", '', :size => 36, :class => 'tag-list') %>
+      </div>
+    </div>
+
   <% end %>
 </div><!-- class="task_box" -->
@@ -72,6 +72,13 @@
       <% end %>
     </ul>
+    <script>
+      jQuery('.tag-list').inputosaurus({
+        autoCompleteSource: <%= "'/myprofile/#{profile.identifier}/cms/search_tags'," %>
+        activateFinalResult : true
+      })
+    </script>
+
     <%= pagination_links(@tasks)%>
     <% button_bar(:class => 'task-actions') do %>
@@ -53,3 +53,23 @@
 .task_responsible {
   text-align: right;
 }
+
+/* Task tags list */
+
+.formfieldline label {
+  font-weight: bold;
+  margin: 0 5px 0 10px;
+}
+
+.formfieldline .inputosaurus-container {
+  vertical-align: middle;
+}
+
+.tag-list-fields input {
+  background-color: #fff !important;
+}
+
+.formfield.tag-list-fields .ui-autocomplete-loading {
+  background: url('/images/loading-small.gif') right center no-repeat !important;
+  background-color: #fff !important;
+}
	@@ -61,6 +61,13 @@		@@ -61,6 +61,13 @@
61	<%= render :partial => partial_for_class(task.class, nil, :reject_details), :locals => {:task => task, :f => f} %>	61	<%= render :partial => partial_for_class(task.class, nil, :reject_details), :locals => {:task => task, :f => f} %>
62	</div>	62	</div>
63	<% end %>	63	<% end %>
		64	+
		65	+ <div class="formfieldline">
		66	+ <div class="formfield tag-list-fields">
		67	+ <%= labelled_text_field(_('Tags'),"tasks[#{task.id}][task][tag_list]", '', :size => 36, :class => 'tag-list') %>
		68	+ </div>
		69	+ </div>
		70	+
64	<% end %>	71	<% end %>
65		72
66	</div><!-- class="task_box" -->	73	</div><!-- class="task_box" -->
	@@ -72,6 +72,13 @@		@@ -72,6 +72,13 @@
72	<% end %>	72	<% end %>
73	</ul>	73	</ul>
74		74
		75	+ <script>
		76	+ jQuery('.tag-list').inputosaurus({
		77	+ autoCompleteSource: <%= "'/myprofile/#{profile.identifier}/cms/search_tags'," %>
		78	+ activateFinalResult : true
		79	+ })
		80	+ </script>
		81	+
75	<%= pagination_links(@tasks)%>	82	<%= pagination_links(@tasks)%>
76		83
77	<% button_bar(:class => 'task-actions') do %>	84	<% button_bar(:class => 'task-actions') do %>
	@@ -53,3 +53,23 @@		@@ -53,3 +53,23 @@
53	.task_responsible {	53	.task_responsible {
54	text-align: right;	54	text-align: right;
55	}	55	}
		56	+
		57	+/* Task tags list */
		58	+
		59	+.formfieldline label {
		60	+ font-weight: bold;
		61	+ margin: 0 5px 0 10px;
		62	+}
		63	+
		64	+.formfieldline .inputosaurus-container {
		65	+ vertical-align: middle;
		66	+}
		67	+
		68	+.tag-list-fields input {
		69	+ background-color: #fff !important;
		70	+}
		71	+
		72	+.formfield.tag-list-fields .ui-autocomplete-loading {
		73	+ background: url('/images/loading-small.gif') right center no-repeat !important;
		74	+ background-color: #fff !important;
		75	+}