New tag editor.

scrumdo-web/apps/projects/media/projects/css/projects.css

@@ -334,11 +334,11 @@
   padding-right: 2px;
 }
 
-#story_details ul {
+#story_details #points_section ul {
   margin: 0px;
   padding: 0px;
 }
-#story_details li {
+#story_details #points_section li {
   list-style-type: none;
   display: inline-block;
   background-color: #ededed;

scrumdo-web/media/css/combined.css

@@ -839,7 +839,3 @@ div.footer {
 
 
 
-
-
-
-

scrumdo-web/media/css/layout.css

@@ -121,7 +121,8 @@
 	background-color: #fffeff;
 	left: 50%;
 
-    behavior: url(/site_media/static/css/PIE.htc);  text-align: left;
+    behavior: url(/site_media/static/css/PIE.htc);  
+    text-align: left;
     margin-bottom: 10px;
     margin-right: 2px;
     margin-left: 0px;

scrumdo-web/media/css/tagit.css

@@ -0,0 +1,90 @@
+/* @override http://localhost:8000/site_media/static/css/tagit.css */
+
+.ui-autocomplete {
+	background-color: #eee;
+	position: absolute;
+	cursor: default;
+}
+.ui-autocomplete .ui-menu-item {
+}
+.ui-autocomplete  .ui-menu-item a {
+	display:block;
+	padding:4px 6px;
+	text-decoration:none;
+	line-height:12px;
+}
+.ui-autocomplete .ui-menu-item a.ui-state-hover,
+.ui-autocomplete .ui-menu-item a.ui-state-active {
+	background-color:#78959D;
+	color:#fff;
+	margin:0;
+}
+.ui-autocomplete-loading {
+	background: white url(images/ui-anim_basic_16x16.gif) right center no-repeat;
+}
+
+ul.tagit {
+	padding:1px 5px;
+	border-style:solid;
+	border-width:1px;
+	border-color:#C6C6C6;
+	overflow:auto;
+
+}
+ul.tagit li {
+	display: block;
+	float: left;
+	margin:2px 5px 2px 0px;
+	padding: 0px;
+
+}
+ul.tagit li.tagit-choice {
+	background-color:#DEE7F8;
+	border:1px solid #CAD8F3;
+	padding:2px 4px 3px;
+
+	-webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    behavior: url(/site_media/static/css/PIE.htc);
+
+}
+ul.tagit li.tagit-choice:hover {
+	background-color:#bbcef1;
+	border-color:#6d95e0;
+
+}
+ul.tagit li.tagit-new {
+	padding:2px 4px 3px;
+	padding:2px 4px 1px;
+	padding:2px 4px 1px 0;
+
+}
+
+ul.tagit li.tagit-choice input {
+	display:block;
+	float:left;
+	margin:2px 5px 2px 0;
+	padding:0px;
+	min-width: 20px;
+
+}
+ul.tagit li.tagit-choice a.tagit-close {
+	color:#777777;
+	cursor:pointer;
+	font-size:12px;
+	font-weight:bold;
+	outline:medium none;
+	padding:2px 0 2px 3px;	
+}
+ul.tagit input[type="text"] {
+	-moz-box-sizing:border-box;
+	border:none;
+	margin:0;
+	padding:0;
+	width:inherit;
+	border-color:#C6C6C6;
+	background-color:#FFFFFF;
+	color:#333333;
+}
+

scrumdo-web/media/js/tag-it.js

@@ -0,0 +1,136 @@
+(function($) {
+
+	$.fn.tagit = function(options) {
+
+		var el = this;
+
+		const BACKSPACE		= 8;
+		const ENTER			= 13;
+		const SPACE			= 32;
+		const COMMA			= 44;
+
+        var input_field = $(options.input_field);
+
+
+		// add the tagit CSS class.
+		el.addClass("tagit");
+
+		// create the input field.
+		var html_input_field = "<li class=\"tagit-new\"><input class=\"tagit-input\" type=\"text\" /></li>\n";
+		el.html (html_input_field);
+
+		tag_input		= el.children(".tagit-new").children(".tagit-input");
+
+		$(this).click(function(e){
+			if (e.target.tagName == 'A') {
+				// Removes a tag when the little 'x' is clicked.
+				// Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
+				$(e.target).parent().remove();
+			}
+			else {
+				// Sets the focus() to the input field, if the user clicks anywhere inside the UL.
+				// This is needed because the input field needs to be of a small size.
+				tag_input.focus();
+			}
+			serializeTags();
+		});
+
+		tag_input.keypress(function(event){
+			if (event.which == BACKSPACE) {
+				if (tag_input.val() == "") {
+					// When backspace is pressed, the last tag is deleted.
+					$(el).children(".tagit-choice:last").remove();
+				}
+			}
+			// Comma/Space/Enter are all valid delimiters for new tags.
+			else if (event.which == COMMA || event.which == SPACE || event.which == ENTER) {
+				event.preventDefault();
+
+				var typed = tag_input.val();
+				typed = typed.replace(/,+$/,"");
+				typed = typed.trim();
+
+				if (typed != "") {
+					if (is_new (typed)) {
+						create_choice (typed);
+					}
+					// Cleaning the input.
+					tag_input.val("");
+				}
+			}
+			serializeTags();
+		});
+
+         tag_input.autocomplete({
+         source: options.availableTags, 
+         select: function(event,ui){
+             if (is_new (ui.item.value)) {
+                 create_choice (ui.item.value);
+             }
+             // Cleaning the input.
+             tag_input.val("");
+
+             // Preventing the tag input to be update with the chosen value.
+             return false;
+         }
+        });
+
+        function serializeTags()
+        {
+            var new_value = "";
+            this.tag_input.parents("ul").children(".tagit-choice").each(function(i){
+				n = $(this).children("input").val();
+				if( new_value.trim().length > 0)
+				{
+				    new_value = new_value + ","
+				}
+				if( n.trim().length > 0)
+				{
+				    new_value = new_value + n
+			    }
+			})
+            input_field.val(new_value);
+        }
+
+		function is_new (value){
+			var is_new = true;
+			this.tag_input.parents("ul").children(".tagit-choice").each(function(i){
+				n = $(this).children("input").val();
+				if (value == n) {
+					is_new = false;
+				}
+			})
+			return is_new;
+		}
+		function create_choice (value){
+		    if( value.trim() == "")
+		    {
+		        return;
+		    }
+			var el = "";
+			el  = "<li class=\"tagit-choice\">\n";
+			el += value + "\n";
+			el += "<a class=\"tagit-close\">x</a>\n";
+			el += "<input type=\"hidden\" style=\"display:none;\" value=\""+value+"\" name=\"item[tags][]\">\n";
+			el += "</li>\n";
+			var li_search_tags = this.tag_input.parent();
+			$(el).insertBefore (li_search_tags);
+			this.tag_input.val("");
+			serializeTags();
+		}
+
+		var current_vals = input_field.val().split(',');		
+		var current_val;
+		for( current_val=0 ; current_val< current_vals.length ; current_val++ )
+		{		    
+		    create_choice(current_vals[current_val]);
+		}
+		input_field.hide();
+
+	};
+
+	String.prototype.trim = function() {
+		return this.replace(/^\s+|\s+$/g,"");
+	};
+
+})(jQuery);

scrumdo-web/templates/base.html

@@ -14,6 +14,7 @@
 
 
 
+
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
 	      <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.tipTip.js"></script>
@@ -35,6 +36,7 @@
           {% block extra_css %}
           {% endblock %}
         </style>
+        <link rel="stylesheet" href="{{ STATIC_URL }}css/tagit.css" />
 
         {% if GOOGLE_ANALYTICS %}
         <script type="text/javascript">

scrumdo-web/templates/projects/base.html

@@ -173,5 +173,6 @@
 
 <script src="{{ STATIC_URL }}js/burndown.js" type="text/javascript"></script>  
 <script src="{{ STATIC_URL }}js/project.js" type="text/javascript"></script>  
+<script src="{{ STATIC_URL }}js/tag-it.js" type="text/javascript"></script>  
 
 {% endblock %}

scrumdo-web/templates/stories/story.html

@@ -2,7 +2,7 @@
 
 <form id="story_detail_form" method="POST" action="{% url story_form group_slug=project.slug story_id=story.id %}">
    {{ form.non_field_errors }}
-   
+
     <h1>Story #{{story.local_id}}</h1><br/>
 
 
@@ -17,8 +17,12 @@ <h2>Read Only: The iteration this story belongs to is locked.</h2>
     <table>
       <tr><td>Summary</td><td>{{form.summary}}    {{form.summary.errors}} </td></tr>
       <tr><td>Detail</td><td>{{form.detail}}    {{form.detail.errors}} </td></tr>
-      <tr><td>Tags</td><td>{{form.tags}} {{form.tags.errors}} </td></tr>
-      <tr><td>Points&nbsp;</td><td>{{form.points}}  {{form.points.errors}} </td></tr>
+      <tr><td>Tags</td>
+        <td>
+            <ul id="id_tags2"></ul>
+            {{form.tags}} {{form.tags.errors}} 
+        </td></tr>
+      <tr><td>Points&nbsp;</td><td id="points_section">{{form.points}}  {{form.points.errors}} </td></tr>
       {% if project.use_assignee %}
         <tr><td>Assignee</td><td>{{form.assignee}}  {{form.assignee.errors}} </td></tr>
       {% endif %}
@@ -70,6 +74,12 @@ <h2>Comments {% silk "comments" %}</h2>
 </div>
 
 <script type="text/javascript" charset="utf-8">
+
+      $("#story_details #id_tags2").tagit({
+          availableTags:["one","two"], 
+          input_field:"#facebox #story_details #id_tags"
+          });
+
       $("#story_area .commentForm").show();
 
       $("#story_detail_form").ajaxForm({