NIHVIVO-2343 Simplify the UI.

webapp/web/css/account/proxy.css

@@ -1,15 +0,0 @@
-/* $This file is distributed under the terms of the license in /doc/license.txt$ */
-
-/* ------------------------------------------------->  */
-/* BOGUS STUFF FOR PROXIES ------------------------------------>  */
-/* ------------------------------------------------->  */
-
-.newProxyItem {
-    background-color: #DDFFDD;
-}
-.existingProxyItem {
-    background-color: #DDDDDD;
-}
-.removedProxyItem {
-    background-color: #FFDDDD;
-}

webapp/web/js/account/accountProxyCommon.js

@@ -13,10 +13,14 @@
  *    a profile -- Individual to be edited.
  *    a proxy   -- User Account to do the editing, optionally with info from a 
  *                   profile associated with that individual.
+ * 
+ * You provide:
+ *   template -- the HTML text that determines how the element should look.
+ *   uri, label, classLabel, imageUrl -- as described below
+ *   remove -- a function that we can call when the user clicks on the remove 
+ *             link or button. We will pass a reference to this struct.
  * ----------------------------------------------------------------------------
- * The template must inlude
+ * The template must inlude a link or button with attribute templatePart="remove"
- * 1) a link with attribute templatePart="remove" and restoreText="[something]"
- * 2) a hidden field with attribute templatePart="uriField" and value="%uri%" see below
  * 
  * The template may include tokens to be replaced, from the following:
  *    %uri% -- the URI of the individual being displayed 
@@ -31,15 +35,14 @@
  *   removedProxyItem  -- added to an item when the "remove" link is cheked.
  * ----------------------------------------------------------------------------
  */
-function proxyInfoElement(template, uri, label, classLabel, imageUrl, existing) {
+function proxyInfoElement(template, uri, label, classLabel, imageUrl, removeInfo) {
+	var self = this;
+	
 	this.uri = uri;
 	this.label = label;
 	this.classLabel = classLabel;
 	this.imageUrl = imageUrl;
 	
-	var existed = existing;
-	var removed = false;
-
 	this.toString = function() {
 		return "proxyInfoElement: " + content;
 	}
@@ -51,33 +54,13 @@ function proxyInfoElement(template, uri, label, classLabel, imageUrl, existing)
 				              .replace(/%imageUrl%/g, this.imageUrl);
 
 		var element = $("<div name='proxyInfoElement'>" + content + "</div>");
+
 		var removeLink = $("[templatePart='remove']", element).first();
-		var removeText = removeLink.text();
-		var restoreText = removeLink.attr('restoreText');
-		var proxyUriField = $("[templatePart='uriField']", element);
-
-		var showRemoved = function() {
-			if (removed) {
-				removeLink.text(restoreText);
-				proxyUriField.attr('disabled', 'disabled');
-				element.addClass('removedProxyItem');
-			} else {
-				removeLink.text(removeText);
-				proxyUriField.attr('disabled', '');
-				element.removeClass('removedProxyItem');
-			}
-		}
-
 		removeLink.click(function(event) {
-			removed = !removed;
+			removeInfo(self);
-			showRemoved();
 			return false;
 		});
 
-		element.removeClass('newProxyItem existingProxyItem removedProxyItem');
-		element.addClass(existed ? 'existingProxyItem' : 'newProxyItem')
-		showRemoved()
-
 		return element;
 	}
 }

webapp/web/js/account/accountProxyProxiesPanel.js

@@ -47,6 +47,10 @@ function proxyProxiesPanel(p)  {
 
 	var self = this;
 	
+	var removeProxyInfo = function(info) {
+		self.removeProxyInfo(info)
+	}
+	
 	this.disableFormInUnsupportedBrowsers = function() {
 		var disableWrapper = $('#ie67DisableWrapper');
 
@@ -67,6 +71,14 @@ function proxyProxiesPanel(p)  {
 		templateDiv.remove();
 	};
 	
+	this.removeProxyInfo = function(info) {
+		var idx = self.proxyData.indexOf(info);
+		if (idx != -1) {
+			self.proxyData.splice(idx, 1);
+		}
+		self.displayProxyData();
+	}
+	
 	this.parseProxyData = function() {
 		var datas = $("div[name='data']", this.proxyDataDiv)
 		
@@ -77,7 +89,7 @@ function proxyProxiesPanel(p)  {
 			var label = $("p[name='label']", data).text();
 			var classLabel = $("p[name='classLabel']", data).text();
 			var imageUrl = $("p[name='imageUrl']", data).text();
-			this.proxyData.push(new proxyInfoElement(this.templateHtml, uri, label, classLabel, imageUrl, true));
+			this.proxyData.push(new proxyInfoElement(this.templateHtml, uri, label, classLabel, imageUrl, removeProxyInfo));
 		}
 	}
 
@@ -130,7 +142,7 @@ function proxyProxiesPanel(p)  {
 	}
 	
 	this.addProxyInfo = function(selection) {
-		var info = new proxyInfoElement(self.templateHtml, selection.uri, selection.label, "", "", false)
+		var info = new proxyInfoElement(self.templateHtml, selection.uri, selection.label, "", "", removeProxyInfo)
         self.proxyData.unshift(info);
         self.getAdditionalInfo(info, selection.externalAuthId)
         self.displayProxyData();

webapp/web/templates/freemarker/body/accounts/userAccounts-myProxiesPanel.ftl

@@ -4,7 +4,6 @@
 
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/autocomplete.css" />',
                    '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
-${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/proxy.css" />')}
 
 <div name="proxyProxiesPanel" style="border: solid; padding: 5px; float: right;">
     Proxy self editors
@@ -29,10 +28,8 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/proxy.c
 		<#-- 
 		    Each proxy will be shown using the HTML inside this div.
 		    It must contain at least:
-		      1) a link with templatePart="remove"
+		      -- a link with templatePart="remove"
-		      2) a link with templatePart="restore"
+		      -- a hidden input field with templatePart="uriField"  
-		      3) a hidden input field with templatePart="uriField"  
-		    One of the links "remove" and "restore" will show at a time.
 		-->
         <div name="template" style="display: none">
             <table>
@@ -45,8 +42,8 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/proxy.c
                         %label% | %classLabel%
                         </div>
                         <div>
-                            <a href="." templatePart="remove" restoreText="restore">remove</a>
+                            <a href="." templatePart="remove">remove</a>
-                            <input type="hidden" name="proxyUri" templatePart="uriField" value="%uri%" >
+                            <input type="hidden" name="proxyUri" value="%uri%" >
                             </div>
                     </td>
                 </tr>