Merge branch 'bug_9704' into 3.12-master

This commit is contained in:
Jared Camins-Esakov 2013-03-20 15:24:32 -04:00
commit b9ebee8996
4 changed files with 273 additions and 1 deletions

View file

@ -0,0 +1,228 @@
/* Link body */
.persona-button{
color: #fff;
display: inline-block;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1.1;
overflow: hidden;
position: relative;
text-decoration: none;
text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2);
background: #297dc3;
background: -moz-linear-gradient(top, #43a6e2, #287cc2);
background: -ms-linear-gradient(top, #43a6e2, #287cc2);
background: -o-linear-gradient(top, #43a6e2, #287cc2);
background: -webkit-linear-gradient(top, #43a6e2, #287cc2);
background: linear-gradient(top, #43a6e2, #287cc2);
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
-ms-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
-o-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.persona-button:hover{
background: #21669f;
background: -moz-linear-gradient(top, #3788b9, #21669f);
background: -ms-linear-gradient(top, #3788b9, #21669f);
background: -o-linear-gradient(top, #3788b9, #21669f);
background: -webkit-linear-gradient(top, #3788b9, #21669f);
background: linear-gradient(top, #3788b9, #21669f);
}
.persona-button:active, .persona-button:focus{
top: 1px;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.persona-button span{
display: inline-block;
padding: 5px 10px 5px 40px;
}
/* Icon */
.persona-button span:after{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==) 10px center no-repeat;
content: '';
display: block;
width: 31px;
position: absolute;
bottom: 0;
left: -3px;
top: 0;
z-index: 10;
}
/* Icon background */
.persona-button span:before{
content: '';
display: block;
height: 100%;
width: 20px;
position: absolute;
bottom: 0;
left: 0;
top: 0;
z-index: 1;
background: #42a9dd;
background: -moz-linear-gradient(top, #50b8e8, #3095ce);
background: -ms-linear-gradient(top, #50b8e8, #3095ce);
background: -o-linear-gradient(top, #50b8e8, #3095ce);
background: -webkit-linear-gradient(top, #50b8e8, #3095ce);
background: linear-gradient(top, #50b8e8, #3095ce);
-moz-border-radius: 3px 0 0 3px;
-ms-border-radius: 3px 0 0 3px;
-o-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
/* Triangle */
.persona-button:before{
background: #42a9dd;
content: '';
display: block;
height: 26px;
width: 26px;
position: absolute;
left: 2px;
top: 50%;
margin-top: -13px;
z-index: 0;
background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce);
background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce);
background: -o-linear-gradient(-45deg, #50b8e8, #3095ce);
background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce);
background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */
-moz-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
-ms-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
-o-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Inset shadow (required here because the icon background clips it when on the `a` element) */
.persona-button:after{
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 10;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
-ms-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
-o-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
}
/* ========================================================
* Dark button
* ===================================================== */
.persona-button.dark{
background: #3c3c3c;
background: -moz-linear-gradient(top, #606060, #3c3c3c);
background: -ms-linear-gradient(top, #606060, #3c3c3c);
background: -o-linear-gradient(top, #606060, #3c3c3c);
background: -webkit-linear-gradient(top, #606060, #3c3c3c);
background: linear-gradient(top, #606060, #3c3c3c);
}
.persona-button.dark:hover{
background: #2d2d2d;
background: -moz-linear-gradient(top, #484848, #2d2d2d);
background: -ms-linear-gradient(top, #484848, #2d2d2d);
background: -o-linear-gradient(top, #484848, #2d2d2d);
background: -webkit-linear-gradient(top, #484848, #2d2d2d);
background: linear-gradient(top, #484848, #2d2d2d);
}
.persona-button.dark span:before{ /* Icon BG */
background: #d34f2d;
background: -moz-linear-gradient(top, #ebac45, #d34f2d);
background: -ms-linear-gradient(top, #ebac45, #d34f2d);
background: -o-linear-gradient(top, #ebac45, #d34f2d);
background: -webkit-linear-gradient(top, #ebac45, #d34f2d);
background: linear-gradient(top, #ebac45, #d34f2d);
}
.persona-button.dark:before{ /* Triangle */
background: #d34f2d;
background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d);
background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d);
background: -o-linear-gradient(-45deg, #ebac45, #d34f2d);
background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d);
background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */
}
/* ========================================================
* Orange button
* ===================================================== */
.persona-button.orange{
background: #ee731a;
background: -moz-linear-gradient(top, #ee731a, #d03116);
background: -ms-linear-gradient(top, #ee731a, #d03116);
background: -o-linear-gradient(top, #ee731a, #d03116);
background: -webkit-linear-gradient(top, #ee731a, #d03116);
background: linear-gradient(top, #ee731a, #d03116);
}
.persona-button.orange:hover{
background: #cb6216;
background: -moz-linear-gradient(top, #cb6216, #b12a13);
background: -ms-linear-gradient(top, #cb6216, #b12a13);
background: -o-linear-gradient(top, #cb6216, #b12a13);
background: -webkit-linear-gradient(top, #cb6216, #b12a13);
background: linear-gradient(top, #cb6216, #b12a13);
}
.persona-button.orange span:before{ /* Icon BG */
background: #e84a21;
background: -moz-linear-gradient(top, #f7ad27, #e84a21);
background: -ms-linear-gradient(top, #f7ad27, #e84a21);
background: -o-linear-gradient(top, #f7ad27, #e84a21);
background: -webkit-linear-gradient(top, #f7ad27, #e84a21);
background: linear-gradient(top, #f7ad27, #e84a21);
}
.persona-button.orange:before{ /* Triangle */
background: #e84a21;
background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21);
background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21);
background: -o-linear-gradient(-45deg, #f7ad27, #e84a21);
background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21);
background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */
}

View file

@ -26,6 +26,10 @@
<link rel="stylesheet" type="text/css" media="screen and (max-width:700px)" href="[% themelang %]/css/mobile.css" />
[% IF ( OPACMobileUserCSS ) %]<style type="text/css" media="screen and (max-width:700px)">[% OPACMobileUserCSS %]</style>[% END %]
[% IF ( OPACUserCSS ) %]<style type="text/css">[% OPACUserCSS %]</style>[% END %]
[% IF persona %]
<link rel="stylesheet" type="text/css" href="[% themelang %]/css/persona-buttons.css" />
[% END %]
<!-- yui js -->
<script type="text/javascript" src="[% yuipath %]/utilities/utilities.js"></script>
<script type="text/javascript" src="[% yuipath %]/container/container-min.js"></script>

View file

@ -65,7 +65,7 @@
[% IF ( ShowOpacRecentSearchLink ) %]
<li><a href="/cgi-bin/koha/opac-search-history.pl" title="View your search history">Search history</a></li>
[% END %]
[% IF ( loggedinusername ) %]<li><a class="logout" id="logout" href="/cgi-bin/koha/opac-main.pl?logout.x=1">Log Out</a></li>[% END %]
[% IF ( loggedinusername ) %]<li>[% IF persona %]<a class="logout" id="logout" href="/cgi-bin/koha/opac-main.pl?logout.x=1" onclick='navigator.id.logout();'>[% ELSE %]<a class="logout" id="logout" href="/cgi-bin/koha/opac-main.pl?logout.x=1">[% END %]Log Out</a></li>[% END %]
</ul>
[% END %]
</div>

View file

@ -87,5 +87,45 @@ $(function() {
<!-- /ADD JQUERY PLUGIN JQTRANSFORM - LIBÉO -->
[% IF persona %]
<script src="https://login.persona.org/include.js"></script>
<script type="text/javascript" language="javascript">
navigator.id.watch({
loggedInUser: [% IF emailaddress && loggedinpersona %]'[% emailaddress %]'[% ELSE %]null[% END %],
onlogin: function (assertion) {
$.post('/cgi-bin/koha/svc/login',
{ assertion: assertion },
function (data) {
window.location = '/cgi-bin/koha/opac-user.pl';
}
)
.fail(function() {
var errstr = _("Could not login, perhaps your Persona email does not match your Koha one");
alert(errstr);
});
},
onlogout: function () {
window.location = '/cgi-bin/koha/opac-main.pl?logout.x=1';
}
});
var signinLink = document.getElementById('browserid');
if (signinLink) {
signinLink.onclick = function(evt) {
// Requests a signed identity assertion from the user.
navigator.id.request({
siteName: "[% LibraryName | html %]",
returnTo: '/cgi-bin/koha/opac-user.pl',
oncancel: function() { alert('user refuses to share identity.'); }
});
};
}
</script>
[% END %]
</body>
</html>