styling for people tag UI

js/jquery.tagInput.js

@@ -0,0 +1,381 @@
+/*
+  Copyright (c) 2009 Open Lab, http://www.open-lab.com/
+  Written by Roberto Bicchierai http://roberto.open-lab.com.
+  Permission is hereby granted, free of charge, to any person obtaining
+  a copy of this software and associated documentation files (the
+  "Software"), to deal in the Software without restriction, including
+  without limitation the rights to use, copy, modify, merge, publish,
+  distribute, sublicense, and/or sell copies of the Software, and to
+  permit persons to whom the Software is furnished to do so, subject to
+  the following conditions:
+
+  The above copyright notice and this permission notice shall be
+  included in all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+  LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+  OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+  WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+/**
+   * options.tags an object array [{tag:"tag1",freq:1},{tag:"tag2",freq:2}, {tag:"tag3",freq:3},{tag:"tag4",freq:4} ].
+   * options.jsonUrl an url returning a json object array in the same format of options.tag. The url will be called with
+   *                              "search" parameter to be used server side to filter results
+   * option.autoFilter true/false  default=true when active show only matching tags, "false" should be used for server-side filtering
+   * option.autoStart true/false  default=false when active dropdown will appear entering field, otherwise when typing
+   * options.sortBy "frequency"|"tag"|"none"  default="tag"
+   * options.tagSeparator default="," any separator char as space, comma, semicolumn
+   * options.boldify true/false default trrue boldify the matching part of tag in dropdown
+   *
+   * options.suggestedTags callback an object array like ["sugtag1","sugtag2","sugtag3"]
+   * options.suggestedTagsPlaceHolder  jquery proxy for suggested tag placeholder. When placeholder is supplied (hence unique), tagField should be applied on a single input
+   *                          (something like  $("#myTagFiled").tagField(...) will works fine: $(":text").tagField(...) probably not!)
+   */
+
+if (typeof(String.prototype.trim)  == "undefined"){
+    String.prototype.trim = function () {
+      return this.replace(/^\s*(\S*(\s+\S+)*)\s*$/, "$1");
+    };
+}
+
+
+
+jQuery.fn.tagInput = function(options) {
+  // --------------------------  start default option values --------------------------
+  if (!options.tags && !options.jsonUrl) {
+    options.tags = [ { tag:"tag1", freq:1 }, { tag:"tag2", freq:2 }, { tag:"tag3", freq:3 }, { tag:"tag4", freq:4 } ];
+  }
+
+  if (typeof(options.tagSeparator) == "undefined")
+    options.tagSeparator = ",";
+
+  if (typeof(options.autoFilter) == "undefined")
+    options.autoFilter = true;
+
+  if (typeof(options.autoStart) == "undefined")
+    options.autoStart = false;
+
+  if (typeof(options.boldify) == "undefined")
+    options.boldify = true;
+
+  if (typeof(options.animate) == "undefined")
+    options.animate = true;
+
+  if (typeof(options.animate) != "function") {
+    options._animate = options.animate;
+    options.animate = function(show, el, cb) {
+      var func = (options._animate) ? (show ? 'fadeIn' : 'fadeOut') : (show ? 'show' : 'hide');
+      el[func](cb);
+    }
+  }
+
+  if (typeof(options.sortBy) == "undefined")
+    options.sortBy = "tag";
+
+  if (typeof(options.sortBy) == "string") {
+    options._sortBy = options.sortBy;
+    options.sortBy = function(obj) { return obj[options._sortBy]; }
+  }
+
+  if (typeof(options.formatLine) == "undefined")
+    options.formatLine = function (i, obj, search, matches) {
+      var tag = obj.tag;
+      if (options.boldify && matches) {
+        tag = "<b>" + tag.substring(0, search.length) + "</b>" + tag.substring(search.length);
+      }
+
+      var line = $("<div/>");
+      line.append("<div class='tagInputLineTag'>" + tag + "</div>");
+      if (obj.freq)
+        line.append("<div class='tagInputLineFreq'>" + obj.freq + "</div>");
+      return line;
+    }
+
+  if (typeof(options.formatValue == "undefined"))
+    options.formatValue = function (obj, i) {
+      return obj.tag;
+    }
+  // --------------------------  end default option values --------------------------
+
+
+  this.each(function() {
+
+    var theInput = $(this);
+    var theDiv;
+
+    theInput.addClass("tagInput");
+    theInput.tagOptions=options;
+    theInput.attr('autocomplete', 'off');
+
+    var suggestedTagsPlaceHolder=options.suggestedTagsPlaceHolder;
+    //create suggested tags place if the case
+    if (options.suggestedTags){
+      if (!suggestedTagsPlaceHolder){
+        //create a placeholder
+        var stl=$("<div class='tagInputSuggestedTags'><span class='label'>suggested tags: </span><span class='tagInputSuggestedTagList'></span></div>");
+        suggestedTagsPlaceHolder=stl.find(".tagInputSuggestedTagList");
+        theInput.after(stl);
+      }
+
+      //fill with suggestions
+      for (var tag in options.suggestedTags) {
+        suggestedTagsPlaceHolder.append($("<span class='tag'>" + options.suggestedTags[tag] + "</span>"));
+      }
+
+      // bind click on suggestion tags
+      suggestedTagsPlaceHolder.find(".tag").click(function() {
+        var element = $(this);
+        var val = theInput.val();
+        var tag = element.text();
+
+        //check if already present
+        var re = new RegExp(tag + "\\b","g");
+        if (containsTag(val, tag)) {
+          val = val.replace(re, ""); //remove all the tag
+          element.removeClass("tagUsed");
+        } else {
+          val = val + options.tagSeparator + tag;
+          element.addClass("tagUsed");
+        }
+        theInput.val(refurbishTags(val));
+//        selectSuggTagFromInput();
+
+      });
+
+    }
+
+
+    // --------------------------  INPUT FOCUS --------------------------
+    var tagInputFocus = function () {
+      theDiv = $("#__tagInputDiv");
+      // check if the result box exists
+      if (theDiv.size() <= 0) {
+        //create the div
+        theDiv = $("<div id='__tagInputDiv' class='tagInputDiv' style='width:" + theInput.get(0).clientWidth + ";display:none; '></div>");
+        theInput.after(theDiv);
+        theDiv.css({left:theInput.position().left});
+      }
+      if (options.autoStart)
+        tagInputRefreshDiv(theInput, theDiv);
+    };
+
+
+    // --------------------------  INPUT BLUR --------------------------
+    var tagInputBlur = function () {
+      // reformat string
+      theDiv = $("#__tagInputDiv");
+      theInput.val(refurbishTags(theInput.val()));
+
+      options.animate(0, theDiv, function() {
+        theDiv.remove();
+      });
+    };
+
+
+    // --------------------------  INPUT KEYBOARD --------------------------
+    var tagInputKey = function (e) {
+      var rows = theDiv.find("div.tagInputLine");
+      var rowNum = rows.index(theDiv.find("div.tagInputSel"));
+
+      var ret = true;
+      switch (e.which) {
+        case 38: //up arrow
+          rowNum = (rowNum < 1 ? 0 : rowNum - 1 );
+          tagInputHLSCR(rows.eq(rowNum), true);
+          break;
+
+        case 40: //down arrow
+          rowNum = (rowNum < rows.size() - 1 ? rowNum + 1 : rows.size() - 1 );
+          tagInputHLSCR(rows.eq(rowNum), false);
+          break;
+
+        case 9: //tab
+        case 13: //enter
+          if (theDiv.is(":visible")){
+            var theRow = rows.eq(rowNum);
+            tagInputClickRow(theRow);
+            ret = false;
+          }
+          break;
+
+        case 27: //esc
+          options.animate(0, theDiv);
+          break;
+
+        default:
+          $(document).stopTime("tagInputRefresh");
+          $(document).oneTime(400, "tagInputRefresh", function() {
+            tagInputRefreshDiv();
+          });
+          break;
+      }
+      return ret;
+    };
+
+
+    // --------------------------  TAG DIV HIGHLIGHT AND SCROLL --------------------------
+    var tagInputHLSCR = function(theRowJQ, isUp) {
+      if (theRowJQ.size() > 0) {
+        var div = theDiv.get(0);
+        var theRow = theRowJQ.get(0);
+        if (isUp) {
+          if (theDiv.scrollTop() > theRow.offsetTop) {
+            theDiv.scrollTop(theRow.offsetTop);
+          }
+        } else {
+          if ((theRow.offsetTop + theRow.offsetHeight) > (div.scrollTop + div.offsetHeight)) {
+            div.scrollTop = theRow.offsetTop + theRow.offsetHeight - div.offsetHeight;
+          }
+        }
+        theDiv.find("div.tagInputSel").removeClass("tagInputSel");
+        theRowJQ.addClass("tagInputSel");
+      }
+    };
+
+
+    // --------------------------  TAG LINE CLICK --------------------------
+    var tagInputClickRow = function(theRow) {
+ 
+      var lastComma = theInput.val().lastIndexOf(options.tagSeparator);
+      var sep= lastComma<=0? (""):(options.tagSeparator+ (options.tagSeparator==" "?"":" "));
+      var newVal = (theInput.val().substr(0, lastComma) + sep + theRow.attr('id').replace('val-','')).trim();
+      theInput.val(newVal);
+      theDiv.hide();
+      $().oneTime(200, function() {
+        theInput.focus();
+      });
+    };
+
+
+    // --------------------------  REFILL TAG BOX --------------------------
+    var tagInputRefreshDiv = function () {
+
+      var lastComma = theInput.val().lastIndexOf(options.tagSeparator);
+      var search = theInput.val().substr(lastComma + 1).trim();
+
+
+      // --------------------------  FILLING THE DIV --------------------------
+      var fillingCallbak = function(tags) {
+        tags = tags.sort(function (a, b) {
+          if (options.sortBy(a) < options.sortBy(b))
+            return 1;
+          if (options.sortBy(a) > options.sortBy(b))
+            return -1;
+          return 0;
+        });
+
+        for (var i in tags) {
+          tags[i]._val = options.formatValue(tags[i], i);
+          var el = tags[i];
+          var matches = el._val.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) == 0;
+          if (!options.autoFilter || matches) {
+            var line = $(options.formatLine(i, el, search, matches));
+            if (!line.is('.tagInputLine'))
+              line = $("<div class='tagInputLine'></div>").append(line);
+            line.attr('id', 'val-' + el._val);
+            theDiv.append(line);
+          }
+        }
+        if (theDiv.html()!=""){
+            options.animate(true, theDiv);
+        }
+
+        theDiv.find("div:first").addClass("tagInputSel");
+        theDiv.find("div.tagInputLine").bind("click", function() {
+          tagInputClickRow($(this));
+        });
+      };
+
+
+      if (search != "" || options.autoStart) {
+        theDiv.html("");
+
+        if (options.tags)
+          fillingCallbak(options.tags);
+        else{
+          var data = {search:search};
+          $.getJSON(options.jsonUrl, data, fillingCallbak );
+        }
+      } else {
+          options.animate(false, theDiv);
+      }
+    };
+
+    // --------------------------  CLEAN THE TAG LIST FROM EXTRA SPACES, DOUBLE COMMAS ETC. --------------------------
+    var refurbishTags = function (tagString) {
+      var splitted = tagString.split(options.tagSeparator);
+      var res = "";
+      var first = true;
+      for (var i = 0; i < splitted.length; i++) {
+        if (splitted[i].trim() != "") {
+          if (first) {
+            first = false;
+            res = res + splitted[i].trim();
+          } else {
+            res = res + options.tagSeparator+ (options.tagSeparator==" "?"":" ") + splitted[i].trim();
+          }
+        }
+      }
+      return( res);
+    };
+
+    // --------------------------  TEST IF TAG IS PRESENT --------------------------
+    var containsTag=function (tagString,tag){
+      var splitted = tagString.split(options.tagSeparator);
+      var res="";
+      var found=false;
+      tag=tag.trim();
+      for(i = 0; i < splitted.length; i++){
+        var testTag=splitted[i].trim();
+        if (testTag==tag){
+          found=true;
+          break;
+        }
+      }
+      return found;
+    };
+
+
+    // --------------------------  SELECT TAGS BASING ON USER INPUT --------------------------
+    var delayedSelectTagFromInput= function(){
+      var element = $(this);
+      $().stopTime("suggTagRefresh");
+      $().oneTime(200, "suggTagRefresh", function() {
+        selectSuggTagFromInput();
+      });
+
+    };
+
+    var selectSuggTagFromInput = function () {
+      var val = theInput.val();
+      suggestedTagsPlaceHolder.find(".tag").each(function(){
+        var el = $(this);
+        var tag=el.text();
+
+        //check if already present
+        if (containsTag(val,tag)) {
+          el.addClass("tagUsed");
+        } else {
+          el.removeClass("tagUsed");
+        }
+      });
+
+    };
+
+
+
+
+    // --------------------------  INPUT BINDINGS --------------------------
+    $(this).bind("focus", tagInputFocus).bind("blur", tagInputBlur).bind("keydown", tagInputKey);
+    if (options.suggestedTags)
+      $(this).bind("keyup",delayedSelectTagFromInput) ;
+
+
+  });
+  return this;
+};
+
+

js/jquery.timers.js

@@ -0,0 +1,138 @@
+/**
+ * jQuery.timers - Timer abstractions for jQuery
+ * Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
+ * Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
+ * Date: 2009/10/16
+ *
+ * @author Blair Mitchelmore
+ * @version 1.2
+ *
+ **/
+
+jQuery.fn.extend({
+	everyTime: function(interval, label, fn, times) {
+		return this.each(function() {
+			jQuery.timer.add(this, interval, label, fn, times);
+		});
+	},
+	oneTime: function(interval, label, fn) {
+		return this.each(function() {
+			jQuery.timer.add(this, interval, label, fn, 1);
+		});
+	},
+	stopTime: function(label, fn) {
+		return this.each(function() {
+			jQuery.timer.remove(this, label, fn);
+		});
+	}
+});
+
+jQuery.extend({
+	timer: {
+		global: [],
+		guid: 1,
+		dataKey: "jQuery.timer",
+		regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
+		powers: {
+			// Yeah this is major overkill...
+			'ms': 1,
+			'cs': 10,
+			'ds': 100,
+			's': 1000,
+			'das': 10000,
+			'hs': 100000,
+			'ks': 1000000
+		},
+		timeParse: function(value) {
+			if (value == undefined || value == null)
+				return null;
+			var result = this.regex.exec(jQuery.trim(value.toString()));
+			if (result[2]) {
+				var num = parseFloat(result[1]);
+				var mult = this.powers[result[2]] || 1;
+				return num * mult;
+			} else {
+				return value;
+			}
+		},
+		add: function(element, interval, label, fn, times) {
+			var counter = 0;
+			
+			if (jQuery.isFunction(label)) {
+				if (!times) 
+					times = fn;
+				fn = label;
+				label = interval;
+			}
+			
+			interval = jQuery.timer.timeParse(interval);
+
+			if (typeof interval != 'number' || isNaN(interval) || interval < 0)
+				return;
+
+			if (typeof times != 'number' || isNaN(times) || times < 0) 
+				times = 0;
+			
+			times = times || 0;
+			
+			var timers = jQuery.data(element, this.dataKey) || jQuery.data(element, this.dataKey, {});
+			
+			if (!timers[label])
+				timers[label] = {};
+			
+			fn.timerID = fn.timerID || this.guid++;
+			
+			var handler = function() {
+				if ((++counter > times && times !== 0) || fn.call(element, counter) === false)
+					jQuery.timer.remove(element, label, fn);
+			};
+			
+			handler.timerID = fn.timerID;
+			
+			if (!timers[label][fn.timerID])
+				timers[label][fn.timerID] = window.setInterval(handler,interval);
+			
+			this.global.push( element );
+			
+		},
+		remove: function(element, label, fn) {
+			var timers = jQuery.data(element, this.dataKey), ret;
+			
+			if ( timers ) {
+				
+				if (!label) {
+					for ( label in timers )
+						this.remove(element, label, fn);
+				} else if ( timers[label] ) {
+					if ( fn ) {
+						if ( fn.timerID ) {
+							window.clearInterval(timers[label][fn.timerID]);
+							delete timers[label][fn.timerID];
+						}
+					} else {
+						for ( var fn in timers[label] ) {
+							window.clearInterval(timers[label][fn]);
+							delete timers[label][fn];
+						}
+					}
+					
+					for ( ret in timers[label] ) break;
+					if ( !ret ) {
+						ret = null;
+						delete timers[label];
+					}
+				}
+				
+				for ( ret in timers ) break;
+				if ( !ret ) 
+					jQuery.removeData(element, this.dataKey);
+			}
+		}
+	}
+});
+
+jQuery(window).bind("unload", function() {
+	jQuery.each(jQuery.timer.global, function(index, item) {
+		jQuery.timer.remove(item);
+	});
+});

js/util.js

@@ -450,6 +450,74 @@ var SN = { // StatusNet
             });
         },
 
+        FormProfileSearchXHR: function(form) {
+            $.ajax({
+                type: 'POST',
+                dataType: 'xml',
+                url: form.attr('action'),
+                data: form.serialize() + '&ajax=1',
+                beforeSend: function(xhr) {
+                    form
+                        .addClass(SN.C.S.Processing)
+                        .find('.submit')
+                            .addClass(SN.C.S.Disabled)
+                            .attr(SN.C.S.Disabled, SN.C.S.Disabled);
+                },
+                error: function (xhr, textStatus, errorThrown) {
+                    alert(errorThrown || textStatus);
+                },
+                success: function(data, textStatus) {
+                    var results_placeholder = $('#profile_search_results');
+                    if (typeof($('ul', data)[0]) != 'undefined') {
+                        var list = document._importNode($('ul', data)[0], true);
+                        results_placeholder.replaceWith(list);
+                    }
+                    else {
+                        var _error = $('<li/>').append(document._importNode($('p', data)[0], true)); 
+                        results_placeholder.html(_error);
+                    }
+                    form
+                        .removeClass(SN.C.S.Processing)
+                        .find('.submit')
+                            .removeClass(SN.C.S.Disabled)
+                            .attr(SN.C.S.Disabled, false);
+                }
+            });
+        },
+
+        FormPeopletagsXHR: function(form) {
+            $.ajax({
+                type: 'POST',
+                dataType: 'xml',
+                url: form.attr('action'),
+                data: form.serialize() + '&ajax=1',
+                beforeSend: function(xhr) {
+                    form.addClass(SN.C.S.Processing)
+                        .find('.submit')
+                            .addClass(SN.C.S.Disabled)
+                            .attr(SN.C.S.Disabled, SN.C.S.Disabled);
+                },
+                error: function (xhr, textStatus, errorThrown) {
+                    alert(errorThrown || textStatus);
+                },
+                success: function(data, textStatus) {
+                    var results_placeholder = form.parents('.entity_tags');
+                    if (typeof($('.entity_tags', data)[0]) != 'undefined') {
+                        var tags = document._importNode($('.entity_tags', data)[0], true);
+                        $(tags).find('.editable').append($('<button class="peopletags_edit_button"/>'));
+                        results_placeholder.replaceWith(tags);
+                    } else {
+                        results_placeholder.find('p').remove();
+                        results_placeholder.append(document._importNode($('p', data)[0], true));
+                        form.removeClass(SN.C.S.Processing)
+                            .find('.submit')
+                                .removeClass(SN.C.S.Disabled)
+                                .attr(SN.C.S.Disabled, false);
+                    }
+                }
+            });
+        },
+
         normalizeGeoData: function(form) {
             SN.C.I.NoticeDataGeo.NLat = form.find('[name=lat]').val();
             SN.C.I.NoticeDataGeo.NLon = form.find('[name=lon]').val();
@@ -479,6 +547,7 @@ var SN = { // StatusNet
             }
 
         },
+
         /**
          * Fetch an XML DOM from an XHR's response data.
          *
@@ -1326,11 +1395,23 @@ var SN = { // StatusNet
                 $('.form_group_join').live('click', function() { SN.U.FormXHR($(this)); return false; });
                 $('.form_group_leave').live('click', function() { SN.U.FormXHR($(this)); return false; });
                 $('.form_user_nudge').live('click', function() { SN.U.FormXHR($(this)); return false; });
+                $('.form_peopletag_subscribe').live('click', function() { SN.U.FormXHR($(this)); return false; });
+                $('.form_peopletag_unsubscribe').live('click', function() { SN.U.FormXHR($(this)); return false; });
+                $('.form_user_add_peopletag').live('click', function() { SN.U.FormXHR($(this)); return false; });
+                $('.form_user_remove_peopletag').live('click', function() { SN.U.FormXHR($(this)); return false; });
 
                 SN.U.NewDirectMessage();
             }
         },
 
+        ProfileSearch: function() {
+            if ($('body.user_in').length > 0) {
+                $('.form_peopletag_edit_user_search input.submit').live('click', function() {
+                    SN.U.FormProfileSearchXHR($(this).parents('form')); return false;
+                });
+            }
+        },
+
         /**
          * Run setup code for login form:
          *
@@ -1353,6 +1434,45 @@ var SN = { // StatusNet
             });
         },
 
+        PeopletagAutocomplete: function() {
+            $('.form_tag_user #tags').tagInput({
+                tags: SN.C.PtagACData,
+                tagSeparator: " ",
+                animate: false,
+                formatLine: function (i, e, search, matches) {
+                  var tag = "<b>" + e.tag.substring(0, search.length) + "</b>" + e.tag.substring(search.length);
+
+                  var line = $("<div/>").addClass('mode-' + e.mode);
+                    line.append($("<div class='tagInputLineTag'>" + tag
+                        + " <em class='privacy_mode'>" + e.mode + "</em></div>"));
+                  if (e.freq)
+                    line.append("<div class='tagInputLineFreq'>" + e.freq + "</div>");
+                  return line;
+                }
+            });
+        },
+
+        PeopleTags: function() {
+            $('.user_profile_tags .editable').append($('<button class="peopletags_edit_button"/>'));
+
+            $('.peopletags_edit_button').live('click', function() {
+                var form = $(this).parents('dd').eq(0).find('form');
+                // We can buy time from the above animation
+                if (typeof SN.C.PtagACData === 'undefined') {
+                    $.getJSON(_peopletagAC + '?token=' + $('#token').val(), function(data) {
+                        SN.C.PtagACData = data;
+                        _loadTagInput(SN.Init.PeopletagAutocomplete);
+                    });
+                } else { _loadTagInput(SN.Init.PeopletagAutocomplete); }
+
+                $(this).parents('ul').eq(0).fadeOut(200, function() {form.fadeIn(200).find('input#tags')});
+            })
+
+            $('.user_profile_tags form .submit').live('click', function() {
+                SN.U.FormPeopletagsXHR($(this).parents('form')); return false;
+            });
+        },
+
         /**
          * Add logic to any file upload forms to handle file size limits,
          * on browsers that support basic FileAPI.
@@ -1402,4 +1522,10 @@ $(document).ready(function(){
     if ($('#form_login').length > 0) {
         SN.Init.Login();
     }
+    if ($('#profile_search_results').length > 0) {
+        SN.Init.ProfileSearch();
+    }
+    if ($('.user_profile_tags .editable').length > 0) {
+        SN.Init.PeopleTags();
+    }
 });

theme/base/css/display.css

@@ -218,7 +218,7 @@ font-weight:bold;
 #form_settings_avatar legend,
 #newgroup legend,
 #editgroup legend,
-#form_tag_user legend,
+.form_tag_user legend,
 #form_remote_subscribe legend,
 #form_openid_login legend,
 #form_search legend,
@@ -228,10 +228,22 @@ font-weight:bold;
 #form_password_change legend,
 .form_entity_block legend,
 #form_filter_bytag legend,
-#apioauthauthorize_allowdeny {
+#apioauthauthorize_allowdeny,
+.form_tag_user_wrap form,
+.form_tag_user_wrap label,
+.form_tag_user_wrap legend {
 display:none;
 }
-
+.form_tag_user_wrap {
+clear:both;
+}
+.form_tag_user {
+float:left;
+width:auto;
+}
+.form_tag_user input.submit {
+width:50px;
+}
 .form_settings .form_data p.form_guide {
 clear:both;
 margin-left:26%;
@@ -707,7 +719,7 @@ min-height:123px;
 float:left;
 margin-bottom:18px;
 margin-left:0;
-overflow:hidden;
+overflow:visible;
 }
 .entity_profile dt,
 #entity_statistics dt {
@@ -735,6 +747,17 @@ margin-bottom:18px;
 margin-left:113px;
 margin-bottom:4px;
 }
+.entity_tags p.error {
+clear:both;
+}
+
+.peopletags_edit_button {
+cursor:pointer;
+border:0;
+padding:0;
+width:16px;
+height:16px;
+}
 
 .entity_profile .entity_fn,
 .entity_profile .entity_nickname {
@@ -775,7 +798,6 @@ font-style:italic;
 .entity_actions {
 float:right;
 margin-left:2%;
-margin-bottom:18px;
 min-width:21%;
 }
 .entity_actions h2 {
@@ -964,13 +986,89 @@ min-height:60px;
 .profile .form_group_join legend,
 .profile .form_group_leave legend,
 .profile .form_user_subscribe legend,
-.profile .form_user_unsubscribe legend {
+.profile .form_user_unsubscribe legend,
+.form_user_add_peopletag legend,
+.form_user_remove_peopletag legend {
 display:none;
 }
-
+.profile_search_wrap h3 {
+float:left;
+font-weight:normal;
+margin-right:10px;
+}
 .profiles {
 list-style-type:none;
 }
+.peopletag .entry-content {
+width:auto;
+}
+.peopletag .tagged-count a:after,
+.peopletag .subscriber-count a:after {
+content: ':';
+}
+.peopletag .updated {
+display:none;
+}
+.peopletag .tag a{
+font-weight: bold;
+text-decoration: none;
+}
+.peopletag .tag:before {
+/* raquo */
+content: "\00BB";
+}
+.peopletag .entity_statistics {
+font-size:80%;
+}
+.peopletag .entity_statistics a {
+text-decoration:none;
+}
+
+.profile-lister {
+list-style-type:none;
+}
+.profile-lister li {
+min-height:30px;
+padding:5px;
+clear:both;
+}
+.profile-lister li a {
+text-decoration:none;
+}
+.profile-lister li .photo {
+display:inline;
+margin-right:7px;
+margin-bottom:-5px;
+}
+.profile-lister li .fn {
+font-weight:bold;
+}
+#profile_search_results {
+border-radius:4px;
+-moz-border-radius:4px;
+-webkit-border-radius:4px;
+}
+.form_peopletag_edit_user_search legend,
+.form_peopletag_edit_user_search label,
+.form_peopletag_edit_user_search .form_guide {
+display:none;
+}
+.form_peopletag_edit_user_search #field {
+height:30px;
+}
+.form_peopletag_edit_user_search .submit {
+width:60px;
+}
+.form_user_remove_peopletag,
+.form_user_add_peopletag {
+float:right;
+}
+.form_user_add_peopletag input.submit,
+.form_user_remove_peopletag input.submit {
+width:100px;
+padding-left:25px;
+text-align:left;
+}
 .profile .entity_profile .fn.nickname,
 .profile .entity_profile .url[rel~=contact] {
 margin-left:0;
@@ -990,15 +1088,19 @@ clear:none;
 .profile .entity_profile .entity_tags,
 .profile .entity_profile .form_subscription_edit {
 margin-left:59px;
+margin-bottom:7px;
 clear:none;
 display:block;
 width:auto;
 }
-.profile .entity_profile .entity_tags dt {
+.entity_profile .entity_tags dt {
 display:inline;
+float:left;
 margin-right:11px;
 }
-
+.profile .entity_profile .form_subscription_edit {
+clear:left;
+}
 .profile .entity_profile .form_subscription_edit label {
 font-weight:normal;
 margin-right:11px;
@@ -1083,7 +1185,8 @@ width:14.5%;
 /* NOTICE */
 .notice,
 .profile,
-.application {
+.application,
+#content .peopletag {
 position:relative;
 padding-top:11px;
 padding-bottom:11px;
@@ -1351,7 +1454,8 @@ margin-left:0;
 }
 .notice-options input,
 .notice-options a,
-.notice-options .repeated {
+.notice-options .repeated,
+.peopletags_edit_button {
 text-indent:-9999px;
 outline:none;
 }
@@ -1395,7 +1499,8 @@ height:16px;
 position:relative;
 padding-left:16px;
 }
-.notice .attachment.more {
+.notice .attachment.more,
+.mode-private .privacy_mode {
 text-indent:-9999px;
 width:16px;
 height:16px;
@@ -1508,16 +1613,22 @@ padding-left:7px;
 border-left-width:1px;
 border-left-style:solid;
 }
-#filter_tags #filter_tags_all {
+#filter_tags #filter_tags_all,
+#filter_tags #filter_tags_for {
 margin-left:0;
 border-left:0;
 padding-left:0;
 }
-#filter_tags_all a {
+#filter_tags_all a,
+#filter_tags_for a  {
+text-decoration:none;
 font-weight:bold;
 margin-top:7px;
 float:left;
 }
+#filter_tags_for a {
+margin:0;
+}
 
 #filter_tags_item label {
 margin-right:7px;
@@ -1536,6 +1647,15 @@ position:relative;
 top:3px;
 left:3px;
 }
+#filter_tags #form_filter_bymode .form_guide {
+display:none;
+}
+#filter_tags #form_filter_bymode .checkbox {
+float:none;
+}
+#filter_tags #form_filter_bymode legend {
+display:none;
+}
 
 .pagination {
 float:left;
@@ -1791,6 +1911,33 @@ width:auto;
 min-width:0;
 }
 
+/* tag autocomplete */
+
+.tagInputDiv {
+display: none;
+position: absolute;
+overflow: auto;
+margin-top:-1px;
+z-index: 99;
+}
+
+.tagInputLine {
+font-weight: normal;
+padding:4px;
+}
+
+.tagInputLineTag {
+min-width: 150px;
+display: inline-block;
+}
+
+.tagInputLineFreq {
+min-width: 50px;
+text-align: right;
+display: inline-block;
+float:right;
+}
+
 .inline-attachment img {
     /* Why on earth is this changed to block at the top? */
     display: inline;

theme/default/css/display.css

@@ -136,6 +136,7 @@ color:#002FA7;
 .notice,
 .profile,
 .application,
+.peopletag,
 #content tbody tr {
 border-top-color:#C8D1D5;
 }
@@ -186,8 +187,13 @@ button.close,
 .form_user_unsubscribe input.submit,
 .form_group_join input.submit,
 .form_user_subscribe input.submit,
+.form_user_remove_peopletag input.submit,
+.form_user_add_peopletag input.submit,
+.form_peopletag_subscribe input.submit,
+.form_peopletag_unsubscribe input.submit,
 .form_remote_authorize input.submit,
 .entity_subscribe a,
+.entity_tag a,
 .entity_moderation p,
 .entity_sandbox input.submit,
 .entity_silence input.submit,
@@ -205,7 +211,9 @@ button.minimize,
 .entity_subscribe input.submit,
 #realtime_play,
 #realtime_pause,
-#realtime_popup {
+#realtime_popup,
+.peopletags_edit_button,
+.mode-private .privacy_mode {
 background-image:url(../../base/images/icons/icons-01.gif);
 background-repeat:no-repeat;
 background-color:transparent;
@@ -300,33 +308,66 @@ background-position:0 1px;
 .form_group_join input.submit,
 .form_group_leave input.submit,
 .form_user_subscribe input.submit,
+.form_peopletag_subscribe input.submit,
+.form_peopletag_unsubscribe input.submit,
 .form_user_unsubscribe input.submit,
 .form_remote_authorize input.submit,
+.form_user_add_peopletag input.submit,
+.form_user_remove_peopletag input.submit,
 .entity_subscribe a {
 background-color:#AAAAAA;
 color:#FFFFFF;
 }
 .form_group_leave input.submit,
-.form_user_unsubscribe input.submit {
+.form_user_unsubscribe input.submit,
+.form_user_remove_peopletag input.submit,
+.form_peopletag_unsubscribe input.submit {
 background-position:5px -1246px;
 }
 .form_group_join input.submit,
 .form_user_subscribe input.submit,
+.form_peopletag_subscribe input.submit,
 .form_remote_authorize input.submit,
-.entity_subscribe a {
+.form_user_add_peopletag input.submit,
+.entity_subscribe a,
+.entity_tag a {
 background-position:5px -1181px;
 }
 
-.entity_edit a {
+.profile-lister li {
+border-top: 1px #eee solid;
+}
+.profile-lister li:first-child {
+border:0;
+}
+#profile_search_results.profile-lister {
+max-height:800px;
+margin:10px 0;
+border:1px #ddd solid;
+}
+
+.entity_edit a, .peopletags_edit_button {
 background-position: 5px -719px;
 }
+
+.peopletags_edit_button {
+background-position: 0px -724px;
+}
+.entity_tags li.mode-private {
+color: #829D25;
+}
+.mode-private .privacy_mode {
+background-position: 0px -1978px;
+}
+
 .entity_send-a-message a {
 background-position: 5px -852px;
 }
 .entity_send-a-message .form_notice,
 .entity_moderation:hover ul,
 .entity_role:hover ul,
-.dialogbox {
+.dialogbox,
+#profile_search_results {
 box-shadow:3px 7px 5px rgba(194, 194, 194, 0.7);
 -moz-box-shadow:3px 7px 5px rgba(194, 194, 194, 0.7);
 -webkit-box-shadow:3px 7px 5px rgba(194, 194, 194, 0.7);
@@ -515,4 +556,18 @@ background-position:90% 47%;
 background-position:10% 47%;
 }
 
+.tagInputDiv {
+background-color: white;
+border: 1px solid lightgray;
+}
+
+.tagInputDiv .mode-public .privacy_mode {
+display:none;
+}
+
+.tagInputSel {
+background-color: gray;
+color:white;
+}
+
 }/*end of @media screen, projection, tv*/