[extensions-web: 10/75] Reintroduce the global domain bar along with a very basic profile page.

From: Jasper St. Pierre <jstpierre src gnome org>
To: commits-list gnome org
Cc:
Subject: [extensions-web: 10/75] Reintroduce the global domain bar along with a very basic profile page.
Date: Fri, 23 Sep 2011 03:15:16 +0000 (UTC)
commit 22328b8de0b76b76739781f41d39c69802a30117
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Tue Sep 13 13:34:30 2011 -0400

    Reintroduce the global domain bar along with a very basic profile page.

 sweettooth/auth/templates/auth/profile-edit.html   |    1 +
 sweettooth/auth/templates/auth/profile.html        |   21 ++++
 sweettooth/auth/urls.py                            |   13 ++-
 sweettooth/auth/views.py                           |   14 +++-
 sweettooth/extensions/templatetags/gravatar.py     |   13 ++-
 sweettooth/settings.py                             |    2 +-
 sweettooth/static/css/template.css                 |  100 ++++++++++++++++++--
 .../static/images/globaldomain-popup-arrow.png     |  Bin 0 -> 280 bytes
 .../static/images/globaldomain-user-arrow.png      |  Bin 0 -> 211 bytes
 sweettooth/static/js/main.js                       |   35 +++++++
 sweettooth/templates/base.html                     |   19 +++-
 sweettooth/urls.py                                 |    2 +-
 12 files changed, 194 insertions(+), 26 deletions(-)
---
diff --git a/sweettooth/auth/templates/auth/profile-edit.html b/sweettooth/auth/templates/auth/profile-edit.html
new file mode 100644
index 0000000..4da2891
--- /dev/null
+++ b/sweettooth/auth/templates/auth/profile-edit.html
@@ -0,0 +1 @@
+{% extends "auth/profile.html" %}
diff --git a/sweettooth/auth/templates/auth/profile.html b/sweettooth/auth/templates/auth/profile.html
new file mode 100644
index 0000000..1a2192b
--- /dev/null
+++ b/sweettooth/auth/templates/auth/profile.html
@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+{% block title %}{{ display_name }}'s Profile - {{ block.super }}{% endblock %}
+
+{% block body %}
+{% load gravatar %}
+<div class="profile">
+  <h2>{{ display_name }}</h2>
+  <img class="gravatar" src="{% gravatar_url request.user.email 128 %}">
+
+  <table>
+    <tr>
+      <td>Name</td>
+      <td>{{ request.user.full_name }}</td>
+    </tr>
+    <tr>
+      <td>Email</td>
+      <td>{{ request.user.email }}</td>
+    </tr>
+  </table>
+</div>
+{% endblock %}
diff --git a/sweettooth/auth/urls.py b/sweettooth/auth/urls.py
index 5a83b01..6808eda 100644
--- a/sweettooth/auth/urls.py
+++ b/sweettooth/auth/urls.py
@@ -1,12 +1,15 @@
 
 from django.conf.urls.defaults import patterns, url
-from auth.views import AutoFocusAuthenticationForm
+from auth import views
 
 urlpatterns = patterns('',
-    url(r'login/$', 'django.contrib.auth.views.login',
+    url(r'^login/', views.login,
         dict(template_name='auth/login.html',
-             authentication_form=AutoFocusAuthenticationForm), name='auth-login'),
-    url(r'logout/$', 'django.contrib.auth.views.logout',
+             authentication_form=views.AutoFocusAuthenticationForm), name='auth-login'),
+
+    url(r'^logout/', views.logout,
         dict(next_page='/'), name='auth-logout'),
-    url(r'register/$', 'auth.views.register', name='auth-register'),
+
+    url(r'^register/', views.register, name='auth-register'),
+    url(r'^profile/(?P<user>.+)', views.profile, name='auth-profile'),
 )
diff --git a/sweettooth/auth/views.py b/sweettooth/auth/views.py
index df63196..e8d5822 100644
--- a/sweettooth/auth/views.py
+++ b/sweettooth/auth/views.py
@@ -1,5 +1,7 @@
 
-from django.contrib.auth import forms as forms
+from django.contrib.auth import forms, models
+from django.contrib.auth.views import login, logout
+from django.shortcuts import get_object_or_404, render
 
 class AutoFocusAuthenticationForm(forms.AuthenticationForm):
     def __init__(self, *a, **kw):
@@ -12,5 +14,15 @@ class InlineAuthenticationForm(forms.AuthenticationForm):
         for field in self.fields.itervalues():
             field.widget.attrs['placeholder'] = field.label
 
+def profile(request, user):
+    user = get_object_or_404(models.User, username=user)
+
+    template = 'auth/profile.html'
+    if request.user == user:
+        template = 'auth/profile-edit.html'
+
+    display_name = user.get_full_name() or request.user.username
+    return render(request, template, dict(user=user, display_name=display_name))
+
 def register(request):
     return None
diff --git a/sweettooth/extensions/templatetags/gravatar.py b/sweettooth/extensions/templatetags/gravatar.py
index 537edb1..71346b5 100644
--- a/sweettooth/extensions/templatetags/gravatar.py
+++ b/sweettooth/extensions/templatetags/gravatar.py
@@ -14,8 +14,9 @@ import urllib, hashlib
 register = template.Library()
 
 class GravatarUrlNode(template.Node):
-    def __init__(self, email):
+    def __init__(self, email, size):
         self.email = template.Variable(email)
+        self.size = size
 
     def render(self, context):
         try:
@@ -24,19 +25,19 @@ class GravatarUrlNode(template.Node):
             return ''
 
         default = "http://planet.gnome.org/heads/nobody.png";
-        size = 70
 
         gravatar_url = "http://www.gravatar.com/avatar/"; + hashlib.md5(email.lower()).hexdigest() + "?"
-        gravatar_url += urllib.urlencode({'d':default, 's':str(size)})
+        gravatar_url += urllib.urlencode({'d':default, 's':str(self.size)})
 
         return gravatar_url
 
 @register.tag
 def gravatar_url(parser, token):
     try:
-        tag_name, email = token.split_contents()
+        # Default of 70 px
+        tag_name, email, size = (token.split_contents() + [70])[:3]
 
     except ValueError:
-        raise template.TemplateSyntaxError, "%r tag requires a single argument" % token.contents.split()[0]
+        raise template.TemplateSyntaxError, "%r tag requires one or two arguments" % token.contents.split()[0]
 
-    return GravatarUrlNode(email)
+    return GravatarUrlNode(email, size)
diff --git a/sweettooth/settings.py b/sweettooth/settings.py
index 9894f3b..76d2973 100644
--- a/sweettooth/settings.py
+++ b/sweettooth/settings.py
@@ -123,7 +123,7 @@ TEMPLATE_CONTEXT_PROCESSORS = (
     "django.core.context_processors.static",
     "django.contrib.messages.context_processors.messages")
 
-LOGIN_URL = '/login/'
+LOGIN_URL = '/accounts/login/'
 
 INSTALLED_APPS = (
     'django.contrib.auth',
diff --git a/sweettooth/static/css/template.css b/sweettooth/static/css/template.css
index 1cccfae..a7736c8 100644
--- a/sweettooth/static/css/template.css
+++ b/sweettooth/static/css/template.css
@@ -49,29 +49,111 @@ a:visited {
     background: #fff;
     height: 10px;
 }
-#global_domain_bar div {
-    max-width: 940px;
-    margin: 0 auto;
+#global_domain_bar .maxwidth {
     position: relative;
 }
-#global_domain_bar a {
+
+/* Tab */
+
+#global_domain_bar .tab {
+    background: #fff;
     position: absolute;
     right: 0;
-    margin-right: 30px;
     float: right;
-    background: #fff url(../images/favicon.png) 8px 7px no-repeat;
-    padding: 4px 12px 2px 26px;
-    color: #555753;
-    text-decoration: none;
+    padding: 6px 8px;
     font-size: 12px;
+    line-height: 16px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
     -moz-box-shadow: 0 4px 2px -2px #8fb3d9;
     -webkit-box-shadow: 0 4px 2px -2px #8fb3d9;
     box-shadow: 0 4px 2px -2px #8fb3d9;
+    white-space: nowrap;
+}
+#global_domain_bar .tab a.root {
+    color: #555753 !important;
+    font-weight: bold;
+    text-decoration: none;
+    background: #fff url(../images/favicon.png) 0 0 no-repeat;
+    padding-left: 18px;
+    border-right: 1px solid #ccc;
+    padding-right: 6px;
+    margin-right: 3px;
+}
+#global_domain_bar .tab a.root:last-child {
+    border-right: 0;
+    padding-right: 0;
+    margin-right: 0;
+}
+#global_domain_bar .tab a.root:hover {
+    text-decoration: underline;
+}
+#global_domain_bar .tab a.user {
+    padding: 2px 14px 2px 4px;
+    margin: -2px -4px -2px -2px;
+    color: inherit !important;
+    text-decoration: none;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    background: url(../images/globaldomain-user-arrow.png) right center no-repeat;
+    outline: none;
+}
+#global_domain_bar .tab a.user:hover,
+#global_domain_bar .tab a.user:focus {
+    background-color: #ececec;
+}
+#global_domain_bar .tab a.user.active {
+    background-color: #ececec;
+    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
 }
 
+#global_domain_bar .tab a:visited {
+    color: #204A87;
+}
+
+/* User settings */
+
+#global_domain_bar .user_settings:before {
+    width: 20px;
+    height: 10px;
+    margin-top: -25px;
+    right: 10px;
+    position: absolute;
+    content: url(../images/globaldomain-popup-arrow.png);
+}
+#global_domain_bar .user_settings {
+    display: none;
+    z-index: 10;
+    position: absolute;
+    background: #000;
+    background: rgba(0, 0, 0, 0.9);
+    border: 2px solid rgba(100%, 100%, 100%, 0.2);
+    right: 0;
+    top: -10px;
+    margin: 32px 0 0 0;
+    padding: 8px 0 0 0;
+    min-width: 140px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+}
+#global_domain_bar .user_settings a {
+    color: #fff;
+    text-decoration: none;
+    display: block;
+    padding: 3px 16px;
+}
+#global_domain_bar .user_settings a:hover {
+    background: rgba(100%, 100%, 100%, 0.2);
+}
+#global_domain_bar .user_settings li {
+    list-style-type: none;
+    margin-left: 0;
+}
 
 
 /* GNOME Header */
diff --git a/sweettooth/static/images/globaldomain-popup-arrow.png b/sweettooth/static/images/globaldomain-popup-arrow.png
new file mode 100644
index 0000000..64802e1
Binary files /dev/null and b/sweettooth/static/images/globaldomain-popup-arrow.png differ
diff --git a/sweettooth/static/images/globaldomain-user-arrow.png b/sweettooth/static/images/globaldomain-user-arrow.png
new file mode 100644
index 0000000..ad8ca70
Binary files /dev/null and b/sweettooth/static/images/globaldomain-user-arrow.png differ
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index 5e91b06..0d6cb9d 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -31,6 +31,41 @@ require(['jquery', 'messages', 'jquery.cookie', 'jquery.jeditable'], function($,
             return false;
         });
 
+        function closeUserSettings() {
+            var needsClose = $('#global_domain_bar .user').hasClass('active');
+            if (!needsClose)
+                return false;
+
+            $('#global_domain_bar .user').removeClass('active');
+            $('#global_domain_bar .user_settings').animate({ top: '10px', opacity: 0 }, 200, function() {
+                $(this).hide();
+            });
+            return true;
+        }
+
+        function openUserSettings() {
+            $('#global_domain_bar .user').addClass('active');
+            $('#global_domain_bar .user_settings').show().css({ top: '-10px', opacity: 0 }).animate({ top: '0', opacity: 1 }, 200);
+        }
+
+        $(document.body).click(function() {
+            if (closeUserSettings())
+                return false;
+        });
+
+        $('#global_domain_bar .user_settings').click(function(e) {
+            e.stopPropagation();
+        });
+
+        $('#global_domain_bar .user').click(function() {
+            if ($(this).hasClass('active')) {
+                closeUserSettings();
+            } else {
+                openUserSettings();
+            }
+            return false;
+        });
+
         $('#submit-ajax').click(function() {
             var $elem = $(this);
 
diff --git a/sweettooth/templates/base.html b/sweettooth/templates/base.html
index 930a7f2..3a17b43 100644
--- a/sweettooth/templates/base.html
+++ b/sweettooth/templates/base.html
@@ -15,9 +15,22 @@ window._SW = function() {
   </head>
   <body>
     <div id="global_domain_bar">
-      <div>
-        {% include "auth/login_popup_form.html" %}
-        <a href="http://www.gnome.org/";><strong>GNOME</strong>.org</a>
+      <div class="maxwidth">
+        <div class="tab">
+          <a class="root" href="http://www.gnome.org/";>GNOME.org</a>
+          {% if request.user.is_authenticated %}
+          <a class="user" href="#">{{ request.user.username }}</a>
+          {% else %}
+          <a href="{% url auth-login %}">Login</a>
+          {% endif %}
+        </div>
+        <div class="user_settings">
+          <ul>
+            <li><a href="{% url auth-profile user=request.user.username %}">Your profile</a></li>
+            <li><a href="#">Settings</a></li>
+            <li><a href="{% url auth-logout %}">Log out</a></li>
+          </ul>
+        </div>
       </div>
     </div>
 
diff --git a/sweettooth/urls.py b/sweettooth/urls.py
index c50a1d4..c057f28 100644
--- a/sweettooth/urls.py
+++ b/sweettooth/urls.py
@@ -9,7 +9,7 @@ admin.autodiscover()
 
 urlpatterns = patterns('',
     # 'login' and 'register'
-    url(r'^', include('auth.urls')),
+    url(r'^accounts/', include('auth.urls')),
     url(r'^', include('extensions.urls'), name='index'),
 
     url(r'^review/', include('review.urls')),
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]