Commit 3e65e990 authored by Tom Tryfonidis's avatar Tom Tryfonidis

Improve user box at global navigation bar

Fixes bug #758869
parent 7be53321
......@@ -90,7 +90,7 @@ a:hover {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: url(images/globaldomain-user-arrow.png) right center no-repeat;
background: url(../img/globaldomain-user-arrow.png) right center no-repeat;
outline: none;
}
#global_domain_bar .tab a.user:hover,
......@@ -104,6 +104,94 @@ a:hover {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
/* User settings */
#global_domain_bar .user_popup:before {
width: 20px;
height: 10px;
margin-top: -17px;
pointer-events: none;
right: 10px;
position: absolute;
content: url(../img/globaldomain-popup-arrow.png);
}
#global_domain_bar .user_popup {
display: none;
z-index: 10;
position: absolute;
background: #2e3436;
border: 2px solid rgba(100%, 100%, 100%, 0.2);
right: 0;
top: -10px;
margin: 32px 0 0 0;
min-width: 140px;
border-radius: 10px;
}
#global_domain_bar .user_popup img {
display: block;
margin: 0 auto;
width: 80px;
height: 80px;
}
#global_domain_bar .user_popup a.text {
color: #fff;
text-decoration: none;
display: block;
padding: 3px 40px;
}
#global_domain_bar .user_settings a.text:hover {
background: rgba(100%, 100%, 100%, 0.2);
}
#global_domain_bar .user_settings ul {
margin: 14px 0;
}
#global_domain_bar .user_settings li {
list-style-type: none;
margin-left: 0;
}
/* Login Area */
/* ==================================================================== */
#global_domain_bar .login_popup_form input[type=submit],
#global_domain_bar .login_popup_form a {
color: #fff;
display: block;
margin: 0;
border: 0;
background: none;
font-weight: normal;
padding: 3px 0;
border-radius: 0;
width: 100%;
text-decoration: none;
text-align: center;
}
#global_domain_bar .login_popup_form input[type=submit]:hover,
#global_domain_bar .login_popup_form a:hover {
background: rgba(100%, 100%, 100%, 0.2);
}
#global_domain_bar .login_popup_form * {
display: block;
margin: 10px 5px;
}
#global_domain_bar .login_popup_form input {
padding: 3px;
border: 1px solid #999;
border-radius: 4px;
background-color: #fff;
}
#global_domain_bar .avatar {
display: block;
margin: 14px auto 0px;
width: 80px;
height: 80px;
background-color: #FFF;
background-size: contain;
border: 2px solid #8B8B8B;
border-radius: 5px;
}
/* GNOME Header */
......
login = (function($) {
"use strict";
$(document).ready(function() {
// Make the login link activatable.
$("#login_link").click(function(event) {
$(this).toggleClass('selected');
$("#login_popup_form").slideToggle();
return false;
});
var $userPopupLink = $('#global_domain_bar .user');
var $userPopup = $('#global_domain_bar .user_popup');
function closeUserSettings() {
if ($userPopupLink.hasClass('active')) {
$userPopupLink.removeClass('active');
$userPopup.animate({ top: '10px', opacity: 0 }, 200, function() {
$(this).hide();
});
return true;
}
}
$userPopupLink.click(function() {
$userPopupLink.addClass('active');
$userPopup.
show().
css({ top: '-10px', opacity: 0 }).
animate({ top: '0', opacity: 1 }, 200);
modal.activateModal($userPopup, closeUserSettings);
return false;
});
});
})($);
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
modal = (function($) {
"use strict";
// jQuery doesn't support events in the capturing phase natively.
// This is a trick that fires jQuery's event handler during the
// capturing phase.
function captureHandler() {
$.event.handle.apply(document.body, arguments);
}
function activateModal(elem, closeFunction) {
$(document.body).on('click', function(e) {
// If the user clicked inside the modal popup, don't
// close it.
if ($(elem).has(e.target).length) {
return true;
}
if (closeFunction()) {
$(document.body).off(e);
document.body.removeEventListener('click', captureHandler, true);
return false;
}
return true;
});
document.body.addEventListener('click', captureHandler, true);
}
return {
activateModal:activateModal
};
})($);
......@@ -16,6 +16,8 @@
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.cookie.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/overlayhelpers.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/main.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/modal.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/login.js"></script>
<script type="text/javascript">
$(document).ready(function () {
......@@ -37,16 +39,12 @@
<div class="tab">
<a class="root" href="http://www.gnome.org/">GNOME.org</a>
{% if user.is_authenticated %}
<form action="{% url 'login' %}" method="post">
{% csrf_token %}
<a href="{% url 'person_detail_username' user.username %}"><img src="{{ STATIC_URL }}img/nobody-16.png" alt="Person">&nbsp;{{ user.person }}</a> &bull;
<input type="hidden" name="logout" value="1">
<input type="submit" value="{% trans 'Log out' %}">
</form>
<a class="user" href="{% url 'person_detail_username' user.username %}">{{ user.person }}</a>
{% else %}
<a href="{% url 'login' %}">{% trans "Log in" %}</a>
<a class="user" href="{% url 'login' %}">{% trans "Log in" %}</a>
{% endif %}
</div>
{% include "login/login_usermenu.html" %}
</div>
</div>
......
{% load i18n %}
<form action="{% url 'login' %}" method="post" class="login_popup_form user_popup">
{% csrf_token %}
<input type="text" name="username" id="id_username" placeholder="{% trans 'Username' %}"/>
<input type="password" name="password" id="id_password" placeholder="{% trans 'Password' %}"/>
<input type="hidden" name="this_is_the_login_form" value="1" />
<input type="hidden" name="post_data" value="{{ post_data }}" />
<input type="hidden" name="referer" value="{{ referer|default:"" }}" />
<input type="submit" value="{% trans "Log in" %}">
<a href="{% url 'register' %}">{% trans "Register" %}</a>
</form>
{% load i18n people %}
{% if user.is_authenticated %}
<div class="user_settings user_popup">
<a class="avatar" href="{% url 'person_detail_username' user.username %}" title="Profile">
{{ user.person|people_image }}
</a>
<ul>
<li><a class="text" href="{% url 'person_detail_username' user.username %}">{% trans 'User Settings' %}</a></li>
</ul>
<form action="{% url 'login' %}" method="post" class="login_popup_form">
{% csrf_token %}
<input type="hidden" name="logout" value="1">
<input type="submit" value="{% trans 'Log out' %}">
</form>
</div>
{% else %}
{% include "login/login_popup_form.html" %}
{% endif %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment