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

NIHVIVO-3213: Worked on markup/styles for adding proxies through account pages

Browse source
This commit is contained in:
manolobevia 2011-10-31 22:05:57 +00:00
parent c93cecb63c
commit af9d8c7424
5 changed files with 82 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -275,4 +275,44 @@ a.disable-delete {
} }
.disabledSubmit { .disabledSubmit {
cursor: default ! important; cursor: default ! important;
}
/* PROXY MY ACCOUNT'S PROFILE ------> */
#edit-myProxy {
float: right;
padding: 2em;
padding-top: 1em;
background-color: #f7f7f4;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#edit-myProxy h4 {
padding-top: 0;
}
.photo-profile {
border: 2px solid #DDE4E3;
}
.proxyInfoElement {
padding-top: .8em;
border-bottom: 1px dotted #E0DFDF;
padding-bottom: 1em;
}
#edit-myProxy p.search-status {
margin-top: -10px;
font-size: .8em;
color: #7F8993;
padding-left: 10px;
}
#edit-myProxy p.selected-editors {
padding-top: 1.2em;
border-top: 1px solid #E0DFDF;
}
#edit-myProxy a.remove-proxy {
font-size: .9em;
}
#edit-myProxy .proxy-info {
padding-left: 1em;
vertical-align: middle;
} }

6
webapp/web/js/account/accountProxyCommon.js
View file

@ -41,7 +41,7 @@ function proxyInfoElement(template, uri, label, classLabel, imageUrl, removeInfo
this.uri = uri; this.uri = uri;
this.label = label; this.label = label;
this.classLabel = classLabel; this.classLabel = classLabel;
this.imageUrl = imageUrl; this.imageUrl = (imageUrl) ? imageUrl : imageUrl="../images/placeholders/person.thumbnail.jpg";
this.toString = function() { this.toString = function() {
return "proxyInfoElement: " + content; return "proxyInfoElement: " + content;
@ -52,8 +52,10 @@ function proxyInfoElement(template, uri, label, classLabel, imageUrl, removeInfo
.replace(/%label%/g, this.label) .replace(/%label%/g, this.label)
.replace(/%classLabel%/g, this.classLabel) .replace(/%classLabel%/g, this.classLabel)
.replace(/%imageUrl%/g, this.imageUrl); .replace(/%imageUrl%/g, this.imageUrl);
var element = $("<div name='proxyInfoElement'>" + content + "</div>");
var element = $("<div class='proxyInfoElement' name='proxyInfoElement'>" + content + "</div>");
var removeLink = $("[templatePart='remove']", element).first(); var removeLink = $("[templatePart='remove']", element).first();
removeLink.click(function(event) { removeLink.click(function(event) {

7
webapp/web/js/account/proxyUtils.js Normal file
View file

@ -0,0 +1,7 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
$(document).ready(function(){
$('input[name="proxySelectorAC"]').click(function(){
$(this).val('');
})
});

3
webapp/web/templates/freemarker/body/accounts/userAccounts-myAccount.ftl
View file

@ -93,6 +93,5 @@
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/account.css" />')} ${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/customForm.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-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>',
'<script type="text/javascript" src="${urls.base}/js/account/accountListenerSetup.js"></script>')} '<script type="text/javascript" src="${urls.base}/js/account/accountListenerSetup.js"></script>')}

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

@ -5,46 +5,42 @@
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/autocomplete.css" />', ${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" />')} '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
<div name="proxyProxiesPanel" style="border: solid; padding: 5px; float: right;"> <div id="edit-myProxy" name="proxyProxiesPanel">
Proxy self editors <h4>Who can edit my profile</h4>
<br><br>
<p>Add proxy:</p> <p>Add profile editor</p>
<p><input type="text" name="proxySelectorAC" class="acSelector" size="35"></p>
<p><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>type here</span></p> <p><input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name"></p>
<br><br> <p class="search-status"><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>&nbsp;</span></p>
<p>Selected proxies:</p>
<#-- Magic div thst holds all of the proxy data and the template that shows how to display it. --> <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"> <div 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>
<p name="label">${proxy.label}</p> <p name="label">${proxy.label}</p>
<p name="classLabel">${proxy.classLabel}</p> <p name="classLabel">${proxy.classLabel}</p>
<p name="imageUrl">${proxy.imageUrl}</p> <p name="imageUrl">${proxy.imageUrl}</p>
</div> </div>
</#list> </#list>
<#-- <#--
Each proxy will be shown using the HTML inside this div. 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> <table>
<tr> <tr>
<td> <td>
<img width="90" alt="%label%" src="%imageUrl%"> <img class="photo-profile" width="90" alt="%label%" src="%imageUrl%">
</td> </td>
<td> <td class="proxy-info">
<div>
%label% | %classLabel% %label% | %classLabel%
</div> <br /><a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
<div> <input type="hidden" name="proxyUri" value="%uri%" >
<a href="." templatePart="remove">remove</a>
<input type="hidden" name="proxyUri" value="%uri%" >
</div>
</td> </td>
</tr> </tr>
</table> </table>
@ -54,14 +50,14 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/auto
<script type="text/javascript"> <script type="text/javascript">
var proxyMechanism = { var proxyMechanism = {
baseUrl: '${urls.base}', baseUrl: '${urls.base}',
sparqlQueryUrl: '${formUrls.sparqlQueryAjax}', sparqlQueryUrl: '${formUrls.sparqlQueryAjax}',
matchingProperty: '${matchingProperty}', matchingProperty: '${matchingProperty}',
myAccountUri: '${myAccountUri}' myAccountUri: '${myAccountUri}'
}; };
</script> </script>
${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery.js"></script>', ${scripts.add('<script type="text/javascript" src="${urls.base}/js/account/proxyUtils.js"></script>',
'<script type="text/javascript" src="${urls.base}/js/sparqlUtils.js"></script>', '<script type="text/javascript" src="${urls.base}/js/sparqlUtils.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/accountProxyProxiesPanel.js"></script>')} '<script type="text/javascript" src="${urls.base}/js/account/accountProxyProxiesPanel.js"></script>')}