litvinovg/vitro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

10
webapp/web/css/account/account.css
View file

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

4
webapp/web/js/account/accountProxyItemsPanel.js
View file

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

3
webapp/web/js/account/proxyUtils.js
View file

@ -1,13 +1,12 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */ /* $This file is distributed under the terms of the license in /doc/license.txt$ */
$(document).ready(function(){ $(document).ready(function(){
//Remove initial value of input text 'Select an existing last name' //Remove initial value of input text 'Select an existing last name'
$('input[name="proxySelectorAC"]').click(function(){ $('input[name="proxySelectorAC"]').click(function(){
$(this).val(''); $(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(){ $('input[name="createRelationship"]').click(function(){
var $proxyUri = $('#add-relation input[name="proxyUri"]').val(); var $proxyUri = $('#add-relation input[name="proxyUri"]').val();
var $profileUri = $('#add-relation input[name="profileUri"]').val(); var $profileUri = $('#add-relation input[name="profileUri"]').val();

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

@ -2,21 +2,17 @@
<#-- Template for setting the account reference field, which can also associate a profile with the user account --> <#-- 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" />', <section id="edit-myProxy" name="proxyProxiesPanel" role="region">
'<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
<div id="edit-myProxy" name="proxyProxiesPanel">
<h4>Who can edit my profile</h4> <h4>Who can edit my profile</h4>
<p>Add profile editor</p> <p>Add profile editor</p>
<p><input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name"></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 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 name="excludeUri" style="display: none">${myAccountUri}<p>
<p class="selected-editors">Selected editors:</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. --> <#-- 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> <#list proxies as proxy>
<div name="data" style="display: none"> <div name="data" style="display: none">
<p name="uri">${proxy.uri}</p> <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" -- a hidden input field with templatePart="uriField"
--> -->
<div name="template" style="display: none"> <div name="template" style="display: none">
<table> <li>
<tr>
<td>
<img class="photo-profile" width="90" alt="%label%" src="%imageUrl%"> <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> %label% | <span class="class-label">%classLabel%</span>
<br /><a class='remove-proxy' href="." templatePart="remove">Remove selection</a> <br /><a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
<input type="hidden" name="proxyUri" value="%uri%" > <input type="hidden" name="proxyUri" value="%uri%" >
</td> </div
</tr> </li>
</table>
</div> </div>
</div> </ul>
</div> </section>
<script type="text/javascript"> <script type="text/javascript">
var proxyContextInfo = { var proxyContextInfo = {
@ -56,6 +49,9 @@ var proxyContextInfo = {
}; };
</script> </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>', ${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/accountProxyCommon.js"></script>',
'<script type="text/javascript" src="${urls.base}/js/account/accountProxyItemsPanel.js"></script>', '<script type="text/javascript" src="${urls.base}/js/account/accountProxyItemsPanel.js"></script>',

234
webapp/web/templates/freemarker/body/manageproxies/manageProxies-list.ftl
View file

@ -2,12 +2,6 @@
<#-- Template for displaying list of user accounts --> <#-- 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> <h3>Manage profile editing</h3>
<#if message??> <#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> <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"> <section class="proxy-profile">
<form id="add-relation" action="${formUrls.create}" method="POST"> <form id="add-relation" action="${formUrls.create}" method="POST">
<fieldset class="proxy"> <fieldset class="proxy">
<legend>Select editors</legend> <legend>Select editors</legend>
<div name="proxyProxiesPanel"> <section name="proxyProxiesPanel" role="section">
<input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name" role="input" /> <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> <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. --> <#-- Magic div that holds all of the proxy data and the template that shows how to display it. -->
<div name="proxyData"> <ul 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="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">
<#-- <#--
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: It must contain at least:
-- a link with templatePart="remove" -- a link with templatePart="remove"
-- a hidden input field with templatePart="uriField" -- a hidden input field with templatePart="uriField"
--> -->
<div name="template" style="display: none"> <div name="template" style="display: none">
<table> <li>
<tr> <img class="photo-profile" width="90" alt="%label%" src="%imageUrl%">
<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>
</fieldset> <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>
<p><input class="submit pos-submit" type="submit" name="createRelationship" value="Save" /></p> <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>
<#-- 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" role="button" /></p>
</form> </form>
</section> </section>
<#if page.last != 0> <#if page.last != 0>
<h4>Profile editors</h4> <h4>Profile editors</h4>
<section id="search-proxy" role="region"> <section id="search-proxy" role="region">
<form action="${formUrls.list}" method="POST"> <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>
<input type="text" name="searchTerm" role="input" /> <#if searchTerm?has_content>
<input class="submit" type="submit" name="searchByProxy" value="Search" role="button" /> <p>
Search results for "<span class="blue">${searchTerm}</span>" |
<#if page.previous??> <a href="${formUrls.list}">View all profile editors</a>
| <a href="${formUrls.list}?pageIndex=${page.previous}&searchTerm=${searchTerm}">Previous</a> </p>
</#if> </#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> </form>
</section> </section>
</#if> </#if>
<#-- --------------------------------->
<#list relationships as r> <#list relationships as r>
<section class="proxy-profile list-proxy-profile"> <section class="proxy-profile list-proxy-profile">
<form class="edit-proxy-profiles" action="${formUrls.edit}" method="POST"> <form class="edit-proxy-profiles" action="${formUrls.edit}" method="POST">
<fieldset class="proxy"> <fieldset class="proxy">
<#assign p = r.proxyInfos[0]> <#assign p = r.proxyInfos[0]>
<table class="proxy-item"> <div class="proxy-item">
<tr> <img class="photo-profile" width="90" src="${p.imageUrl}" alt="${p.label}">
<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>
<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>
<fieldset class="profile"> <fieldset class="profile">
<legend>Add profile</legend> <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"> <input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name">
<p class="search-status"> <p class="search-status"><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>&nbsp;</span></p>
<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 name="excludeUri" style="display: none">${r.proxyInfos[0].profileUri}<p>
<p class="selected-editors">Selected profiles:</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. --> <#-- 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> <#list r.profileInfos as p>
<div name="data" style="display: none"> <div name="data" style="display: none">
<p name="uri">${p.uri}</p> <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" -- a hidden input field with templatePart="uriField"
--> -->
<div name="template" style="display: none"> <div name="template" style="display: none">
<table> <li>
<tr> <img class="photo-profile" width="60" alt="%label%" src="%imageUrl%">
<td>
<img class="photo-profile" width="60" alt="%label%" src="%imageUrl%"> <div class="proxy-info">%label% | <span class="class-label">%classLabel%</span>
</td> <br /><a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
<td class="proxy-info"> </div>
%label% | <span class="class-label">%classLabel%</span> </li>
<br />
<a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
</td>
</tr>
</table>
<input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" > <input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" >
</div> </div>
</div> </ul>
</div> </section>
<input class="submit" type="submit" name="modifyProfileList" value="Save changes to profiles" /> <input class="submit" type="submit" name="modifyProfileList" value="Save changes to profiles" />
</fieldset> </fieldset>
</form> </form>
</section> </section>
</#list> </#list>
<script type="text/javascript"> <script type="text/javascript">
var proxyContextInfo = { var proxyContextInfo = {
baseUrl: '${urls.base}', baseUrl: '${urls.base}',
@ -225,6 +186,11 @@ var proxyContextInfo = {
}; };
</script> </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>', ${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>')} '<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>', ${scripts.add('<script type="text/javascript" src="${urls.base}/js/account/proxyUtils.js"></script>',