NIHVIVO-3299: Refactored markup for manage proxy pages and my account

This commit is contained in:
manolobevia 2011-11-11 15:15:05 +00:00
parent 20134640bf
commit 1debf09199
5 changed files with 125 additions and 158 deletions

View file

@ -386,9 +386,9 @@ a.disable-delete {
#search-proxy h4 {
margin-bottom: 0;
}
.proxy-profile .proxyInfoElement {
/*.proxy-profile .proxyInfoElement {
margin-left: 20px;
}
}*/
p.selected-editors {
padding-top: 1.2em;
border-top: 1px solid #E0DFDF;
@ -432,4 +432,10 @@ section.list-proxy-profile:nth-child(2n) {
}
a.remove-proxyUri {
font-size: .9em;
}
li.proxyInfoElement {
padding-bottom: 1em;
clear: both;
padding-left: 20px;
}

View file

@ -162,7 +162,7 @@ $(document).ready(function() {
return;
}
$("div[name='proxyProfilesPanel']").each(function(i) {
$("section[name='proxyProfilesPanel']").each(function(i) {
var context = {
baseUrl: proxyContextInfo.baseUrl,
ajaxUrl: proxyContextInfo.ajaxUrl,
@ -172,7 +172,7 @@ $(document).ready(function() {
this["proxyItemsPanel"] = new proxyItemsPanel(this, context);
});
$("div[name='proxyProxiesPanel']").each(function(i) {
$("section[name='proxyProxiesPanel']").each(function(i) {
var context = {
baseUrl: proxyContextInfo.baseUrl,
ajaxUrl: proxyContextInfo.ajaxUrl,

View file

@ -1,13 +1,12 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
$(document).ready(function(){
//Remove initial value of input text 'Select an existing last name'
$('input[name="proxySelectorAC"]').click(function(){
$(this).val('');
});
//Alert when user doesn't select an editor and a profile
//Alert when user doesn't select an editor and a profile after submitting from for relating proxy-profiles
$('input[name="createRelationship"]').click(function(){
var $proxyUri = $('#add-relation input[name="proxyUri"]').val();
var $profileUri = $('#add-relation input[name="profileUri"]').val();

View file

@ -2,21 +2,17 @@
<#-- Template for setting the account reference field, which can also associate a profile with the user account -->
${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" />')}
<div id="edit-myProxy" name="proxyProxiesPanel">
<section id="edit-myProxy" name="proxyProxiesPanel" role="region">
<h4>Who can edit my profile</h4>
<p>Add profile editor</p>
<p><input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name"></p>
<p class="search-status"><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>&nbsp;</span></p>
<p name="excludeUri" style="display: none">${myAccountUri}<p>
<p class="selected-editors">Selected editors:</p>
<#-- Magic div thst holds all of the proxy data and the template that shows how to display it. -->
<div name="proxyData">
<ul name="proxyData">
<#list proxies as proxy>
<div name="data" style="display: none">
<p name="uri">${proxy.uri}</p>
@ -33,21 +29,18 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/auto
-- a hidden input field with templatePart="uriField"
-->
<div name="template" style="display: none">
<table>
<tr>
<td>
<li>
<img class="photo-profile" width="90" alt="%label%" src="%imageUrl%">
</td>
<td class="proxy-info">
<div class="proxy-info">
%label% | <span class="class-label">%classLabel%</span>
<br /><a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
<input type="hidden" name="proxyUri" value="%uri%" >
</td>
</tr>
</table>
</div
</li>
</div>
</div>
</div>
</ul>
</section>
<script type="text/javascript">
var proxyContextInfo = {
@ -56,6 +49,9 @@ var proxyContextInfo = {
};
</script>
${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" />')}
${scripts.add('<script type="text/javascript" src="${urls.base}/js/account/proxyUtils.js"></script>',
'<script type="text/javascript" src="${urls.base}/js/account/accountProxyCommon.js"></script>',
'<script type="text/javascript" src="${urls.base}/js/account/accountProxyItemsPanel.js"></script>',

View file

@ -2,12 +2,6 @@
<#-- Template for displaying list of user accounts -->
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/account.css" />')}
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/customForm.css" />')}
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/autocomplete.css" />')}
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
<h3>Manage profile editing</h3>
<#if message??>
@ -30,151 +24,126 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
<h4 class="grey">Relate profile editors and profiles <img src="${urls.images}/iconInfo.png" alt="info icon" title="The editors you select on the left hand side will have the ability to edit the VIVO profiles you select on the right hand side. You can select multiple editors and multiple profiles, but you must select a minimum of 1 each." /></h4>
<section class="proxy-profile">
<form id="add-relation" action="${formUrls.create}" method="POST">
<fieldset class="proxy">
<legend>Select editors</legend>
<div name="proxyProxiesPanel">
<input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name" role="input" />
<p class="search-status"><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>&nbsp;</span></p>
<#-- Magic div that holds all of the proxy data and the template that shows how to display it. -->
<div name="proxyData">
<#--
Each proxy will be shown using the HTML inside this div.
It must contain at least:
-- a link with templatePart="remove"
-- a hidden input field with templatePart="uriField"
-->
<div name="template" style="display: none">
<table>
<tr>
<td>
<img class="photo-profile" width="90" alt="%label%" src="%imageUrl%">
</td>
<td class="proxy-info">
%label% | <span class="class-label">%classLabel%</span>
<br />
<a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
<input type="hidden" name="proxyUri" value="%uri%" >
</td>
</tr>
</table>
</div>
</div>
</div>
</fieldset>
<fieldset class="proxy">
<legend>Select editors</legend>
<fieldset class="profile">
<legend>Select profiles</legend>
<div name="proxyProfilesPanel">
<input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name">
<p class="search-status"><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>&nbsp;</span></p>
<#-- Magic div thst holds all of the proxy data and the template that shows how to display it. -->
<div name="proxyData">
<section name="proxyProxiesPanel" role="section">
<input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name" role="input" />
<p class="search-status"><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>&nbsp;</span></p>
<#-- Magic div that holds all of the proxy data and the template that shows how to display it. -->
<ul name="proxyData">
<#--
Each proxy will be shown using the HTML inside this element.
Each proxy will be shown using the HTML inside this div.
It must contain at least:
-- a link with templatePart="remove"
-- a hidden input field with templatePart="uriField"
-->
<div name="template" style="display: none">
<table>
<tr>
<td>
<img class="photo-profile" width="60" alt="%label%" src="%imageUrl%">
</td>
<td class="proxy-info">
%label% | <span class="class-label">%classLabel%</span>
<br />
<a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
</td>
</tr>
</table>
<input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" >
</div>
</div>
</div>
<div name="template" style="display: none">
<li>
<img class="photo-profile" width="90" alt="%label%" src="%imageUrl%">
<div class="proxy-info">
%label% | <span class="class-label">%classLabel%</span>
<br />
<a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
<input type="hidden" name="proxyUri" value="%uri%" >
</div>
</li>
</div>
</ul>
</section>
</fieldset>
<fieldset class="profile">
<legend>Select profiles</legend>
<section name="proxyProfilesPanel" role="region">
<input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name">
<p class="search-status"><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>&nbsp;</span></p>
</fieldset>
<#-- Magic div thst holds all of the proxy data and the template that shows how to display it. -->
<ul name="proxyData">
<#--
Each proxy will be shown using the HTML inside this element.
It must contain at least:
-- a link with templatePart="remove"
-- a hidden input field with templatePart="uriField"
-->
<div name="template" style="display: none">
<li>
<img class="photo-profile" width="60" alt="%label%" src="%imageUrl%">
<div class="proxy-info">
%label% | <span class="class-label">%classLabel%</span>
<br />
<a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
</div>
<input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" >
</li>
</div>
</ul>
</section>
</fieldset>
<p><input class="submit pos-submit" type="submit" name="createRelationship" value="Save" /></p>
<p><input class="submit pos-submit" type="submit" name="createRelationship" value="Save" role="button" /></p>
</form>
</section>
<#if page.last != 0>
<#if page.last != 0>
<h4>Profile editors</h4>
<section id="search-proxy" role="region">
<form action="${formUrls.list}" method="POST">
<input type="text" name="searchTerm" role="input" />
<input class="submit" type="submit" name="searchByProxy" value="Search" role="button" />
<#if page.previous??>
| <a href="${formUrls.list}?pageIndex=${page.previous}&searchTerm=${searchTerm}">Previous</a>
</#if>
${page.current} of ${page.last}
<#if page.next??>
<a href="${formUrls.list}?pageIndex=${page.next}&searchTerm=${searchTerm}">Next</a>
</#if>
<#if searchTerm?has_content>
<p>
Search results for "<span class="blue">${searchTerm}</span>" |
<a href="${formUrls.list}">View all profile editors</a>
</p>
</#if>
<input type="text" name="searchTerm" role="input" />
<input class="submit" type="submit" name="searchByProxy" value="Search" role="button" />
<#if page.previous??>
| <a href="${formUrls.list}?pageIndex=${page.previous}&searchTerm=${searchTerm}">Previous</a>
</#if>
${page.current} of ${page.last}
<#if page.next??>
<a href="${formUrls.list}?pageIndex=${page.next}&searchTerm=${searchTerm}">Next</a>
</#if>
<#if searchTerm?has_content>
<p>
Search results for "<span class="blue">${searchTerm}</span>" |
<a href="${formUrls.list}">View all profile editors</a>
</p>
</#if>
</form>
</section>
</#if>
<#-- --------------------------------->
<#list relationships as r>
<section class="proxy-profile list-proxy-profile">
<form class="edit-proxy-profiles" action="${formUrls.edit}" method="POST">
<fieldset class="proxy">
<#assign p = r.proxyInfos[0]>
<table class="proxy-item">
<tr>
<td>
<img class="photo-profile" width="90" src="${p.imageUrl}" alt="${p.label}">
</td>
<td class="proxyInfoElement proxy-info">
${p.label} | <span class="class-label">${p.classLabel}</span>
<br>
<a class="remove-proxyUri" href="${formUrls.edit}?proxyUri=${p.uri}&deleteProxy=Delete proxy">Delete profile editor</a>
<input type="hidden" value="${p.uri}" name="proxyUri">
</td>
</tr>
</table>
<div class="proxy-item">
<img class="photo-profile" width="90" src="${p.imageUrl}" alt="${p.label}">
<p class="proxyInfoElement proxy-info">
${p.label} | <span class="class-label">${p.classLabel}</span>
<br>
<a class="remove-proxyUri" href="${formUrls.edit}?proxyUri=${p.uri}&deleteProxy=Delete proxy">Delete profile editor</a>
<input type="hidden" value="${p.uri}" name="proxyUri">
</p>
</div>
</fieldset>
<fieldset class="profile">
<legend>Add profile</legend>
<div name="proxyProfilesPanel">
<section name="proxyProfilesPanel" role="region">
<input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name">
<p class="search-status">
<span name='proxySelectorSearchStatus'
moreCharsText='type more characters'
noMatchText='no match'>&nbsp;</span>
</p>
<p class="search-status"><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>&nbsp;</span></p>
<p name="excludeUri" style="display: none">${r.proxyInfos[0].profileUri}<p>
<p class="selected-editors">Selected profiles:</p>
<#-- Magic div that holds all of the proxy data and the template that shows how to display it. -->
<div name="proxyData">
<ul name="proxyData">
<#list r.profileInfos as p>
<div name="data" style="display: none">
<p name="uri">${p.uri}</p>
@ -191,33 +160,25 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
-- a hidden input field with templatePart="uriField"
-->
<div name="template" style="display: none">
<table>
<tr>
<td>
<img class="photo-profile" width="60" alt="%label%" src="%imageUrl%">
</td>
<td class="proxy-info">
%label% | <span class="class-label">%classLabel%</span>
<br />
<a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
</td>
</tr>
</table>
<li>
<img class="photo-profile" width="60" alt="%label%" src="%imageUrl%">
<div class="proxy-info">%label% | <span class="class-label">%classLabel%</span>
<br /><a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
</div>
</li>
<input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" >
</div>
</div>
</div>
</ul>
</section>
<input class="submit" type="submit" name="modifyProfileList" value="Save changes to profiles" />
</fieldset>
</form>
</form>
</section>
</#list>
<script type="text/javascript">
var proxyContextInfo = {
baseUrl: '${urls.base}',
@ -225,6 +186,11 @@ var proxyContextInfo = {
};
</script>
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/account.css" />')}
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/customForm.css" />')}
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/autocomplete.css" />')}
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery.js"></script>',
'<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>')}
${scripts.add('<script type="text/javascript" src="${urls.base}/js/account/proxyUtils.js"></script>',