[damned-lies] Improve user box at global navigation bar

[Tom Tryfonidis <tomtryf src gnome org>]

commit 3e65e990f7b81f75fa1af039765926a34a6c00b0
Author: Tom Tryfonidis <tomtryf gmail com>
Date:   Tue Dec 1 15:08:20 2015 +0200

    Improve user box at global navigation bar
    
    Fixes bug #758869

 common/static/css/template.css                 |   90 +++++++++++++++++++++++-
 common/static/img/globaldomain-popup-arrow.png |  Bin 0 -> 389 bytes
 common/static/img/globaldomain-user-arrow.png  |  Bin 0 -> 211 bytes
 common/static/js/login.js                      |   34 +++++++++
 common/static/js/modal.js                      |   36 ++++++++++
 templates/base.html                            |   12 ++--
 templates/login/login_popup_form.html          |   12 +++
 templates/login/login_usermenu.html            |   20 +++++
 8 files changed, 196 insertions(+), 8 deletions(-)
---
diff --git a/common/static/css/template.css b/common/static/css/template.css
index 60771d8..e19f738 100644
--- a/common/static/css/template.css
+++ b/common/static/css/template.css
@@ -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 */
diff --git a/common/static/img/globaldomain-popup-arrow.png b/common/static/img/globaldomain-popup-arrow.png
new file mode 100644
index 0000000..b1b295a
Binary files /dev/null and b/common/static/img/globaldomain-popup-arrow.png differ
diff --git a/common/static/img/globaldomain-user-arrow.png b/common/static/img/globaldomain-user-arrow.png
new file mode 100644
index 0000000..ad8ca70
Binary files /dev/null and b/common/static/img/globaldomain-user-arrow.png differ
diff --git a/common/static/js/login.js b/common/static/js/login.js
new file mode 100644
index 0000000..051a42c
--- /dev/null
+++ b/common/static/js/login.js
@@ -0,0 +1,34 @@
+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;
+        });
+    });
+})($);
diff --git a/common/static/js/modal.js b/common/static/js/modal.js
new file mode 100644
index 0000000..2e76dc7
--- /dev/null
+++ b/common/static/js/modal.js
@@ -0,0 +1,36 @@
+// -*- 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
+    };
+})($);
diff --git a/templates/base.html b/templates/base.html
index f1e25be..da7a299 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -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>
 
diff --git a/templates/login/login_popup_form.html b/templates/login/login_popup_form.html
new file mode 100644
index 0000000..d5c4159
--- /dev/null
+++ b/templates/login/login_popup_form.html
@@ -0,0 +1,12 @@
+{% 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>
diff --git a/templates/login/login_usermenu.html b/templates/login/login_usermenu.html
new file mode 100644
index 0000000..a95ebed
--- /dev/null
+++ b/templates/login/login_usermenu.html
@@ -0,0 +1,20 @@
+{% 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 %}