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

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

View file

@ -275,4 +275,44 @@ a.disable-delete {
}
.disabledSubmit {
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;
}

View file

@ -41,7 +41,7 @@ function proxyInfoElement(template, uri, label, classLabel, imageUrl, removeInfo
this.uri = uri;
this.label = label;
this.classLabel = classLabel;
this.imageUrl = imageUrl;
this.imageUrl = (imageUrl) ? imageUrl : imageUrl="../images/placeholders/person.thumbnail.jpg";
this.toString = function() {
return "proxyInfoElement: " + content;
@ -52,8 +52,10 @@ function proxyInfoElement(template, uri, label, classLabel, imageUrl, removeInfo
.replace(/%label%/g, this.label)
.replace(/%classLabel%/g, this.classLabel)
.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();
removeLink.click(function(event) {

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('');
})
});

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}/edit/forms/css/customForm.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/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>',
'<script type="text/javascript" src="${urls.base}/js/account/accountListenerSetup.js"></script>')}

View file

@ -5,46 +5,42 @@
${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 name="proxyProxiesPanel" style="border: solid; padding: 5px; float: right;">
Proxy self editors
<br><br>
<p>Add proxy:</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>
<br><br>
<p>Selected proxies:</p>
<div id="edit-myProxy" name="proxyProxiesPanel">
<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>
<#-- 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">
<#list proxies as proxy>
<div name="data"" style="display: none">
<p name="uri">${proxy.uri}</p>
<p name="label">${proxy.label}</p>
<p name="classLabel">${proxy.classLabel}</p>
<p name="imageUrl">${proxy.imageUrl}</p>
<#list proxies as proxy>
<div name="data" style="display: none">
<p name="uri">${proxy.uri}</p>
<p name="label">${proxy.label}</p>
<p name="classLabel">${proxy.classLabel}</p>
<p name="imageUrl">${proxy.imageUrl}</p>
</div>
</#list>
<#--
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"
-->
<#--
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 width="90" alt="%label%" src="%imageUrl%">
<img class="photo-profile" width="90" alt="%label%" src="%imageUrl%">
</td>
<td>
<div>
<td class="proxy-info">
%label% | %classLabel%
</div>
<div>
<a href="." templatePart="remove">remove</a>
<input type="hidden" name="proxyUri" value="%uri%" >
</div>
<br /><a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
<input type="hidden" name="proxyUri" value="%uri%" >
</td>
</tr>
</table>
@ -54,14 +50,14 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/auto
<script type="text/javascript">
var proxyMechanism = {
baseUrl: '${urls.base}',
sparqlQueryUrl: '${formUrls.sparqlQueryAjax}',
matchingProperty: '${matchingProperty}',
myAccountUri: '${myAccountUri}'
baseUrl: '${urls.base}',
sparqlQueryUrl: '${formUrls.sparqlQueryAjax}',
matchingProperty: '${matchingProperty}',
myAccountUri: '${myAccountUri}'
};
</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/account/accountProxyCommon.js"></script>',
'<script type="text/javascript" src="${urls.base}/js/account/accountProxyProxiesPanel.js"></script>')}