added user bar items, improved ui

wagtail/wagtailadmin/static_src/wagtailadmin/js/userbar.js

@@ -1,12 +1,24 @@
 'use strict';
 
 document.addEventListener('DOMContentLoaded', function() {
+    var trigger = document.querySelectorAll('[data-wagtail-userbar-trigger]')[0];
     var userbar = document.querySelectorAll('[data-wagtail-userbar]')[0];
     var className = 'is-active';
 
-    userbar.addEventListener("mouseenter", showUserbar, false);
+    if ('ontouchstart' in window) {
+        userbar.classList.add("touch");
+    } else {
+        userbar.classList.add("no-touch");
+    }
+
+    trigger.addEventListener("mouseenter", showUserbar, false);
     userbar.addEventListener("mouseleave", hideUserbar, false);
 
+    trigger.addEventListener("touchstart", toggleUserbar, false);
+
+    // make sure userbar is hidden when navigating back
+    window.addEventListener('pageshow', hideUserbar, false);
+
     function showUserbar() {
         userbar.classList.add(className);
     }
@@ -14,5 +26,8 @@ document.addEventListener('DOMContentLoaded', function() {
     function hideUserbar() {
         userbar.classList.remove(className);
     }
-});
 
+    function toggleUserbar() {
+        userbar.classList.toggle(className);
+    }
+});

wagtail/wagtailadmin/static_src/wagtailadmin/scss/userbar.scss

@@ -9,39 +9,33 @@ $size-home-button: 3.5em;
     position: fixed;
     z-index: 9999;
     bottom: 2em;
-    right: 1.5em;
+    right: 2em;
-
-    a {
-        display: block;
-        overflow: hidden;
-        text-decoration: none;
-    }
 }
 
-    .wagtail-userbar__home {
+    .wagtail-userbar__trigger {
         width: $size-home-button;
         height: $size-home-button;
+        overflow: hidden;
+
         background-color: $color-white;
         border-radius: 50%;
         color: $color-black;
         padding: 0;
 
-        &:focus,
+        cursor: pointer;
-        &:hover {
-            color: $color-black;
-        }
 
         &.icon:before {
-            @include transition(color 0.2s ease);
+            @include transition(color .2s ease);
             font-size: 35px;
-            margin: 0.2em 0.15em;
+            margin: .25em .15em .2em .175em;
             display: block;
         }
 
         box-shadow: 0 0 1px 0 rgba(107, 214, 230, 1), 0 1px 10px 0 rgba(107, 214, 230, .7);
         transition: all 0.2s ease-in-out;
 
-        &:hover {
+        .wagtail-userbar.touch.is-active &,
+        .no-touch &:hover {
             box-shadow: 0 0 1px 0 rgba(107, 214, 230, 1), 0 3px 15px 0 rgba(107, 214, 230, .95);
         }
     }
@@ -56,7 +50,7 @@ $size-home-button: 3.5em;
             right: 0;
             margin: 0;
             padding-bottom: $width-arrow * 2;
-            min-width:16em;
+            min-width: 17em;
 
             visibility: hidden;
 
@@ -93,22 +87,22 @@ $size-home-button: 3.5em;
             background-color: $color-grey-1;
 
             &:first-child {
-                border-top-left-radius: 0.5em;
+                border-top-left-radius: .5em;
-                border-top-right-radius: 0.5em;
+                border-top-right-radius: .5em;
             }
 
             &:last-child {
-                border-bottom-right-radius: 0.5em;
+                border-bottom-right-radius: .5em;
-                border-bottom-left-radius: 0.5em;
+                border-bottom-left-radius: .5em;
             }
 
             & + li {
-                border-top: 1px solid darken($color-grey-1, 4%);
+                border-top: 1px solid darken($color-grey-1, 3%);
             }
 
             transform: translateY(1em);
             opacity: 0;
-            transition-duration: .15s;
+            transition-duration: .125s;
             transition-timing-function: cubic-bezier(.55,0,.1,1);
 
             .wagtail-userbar.is-active & {
@@ -126,6 +120,8 @@ $size-home-button: 3.5em;
         li a,
         li .action {
             color: #aaa;
+            display: block;
+            text-decoration: none;
 
             &:hover,
             &:focus {

wagtail/wagtailadmin/templates/wagtailadmin/userbar/base.html

@@ -5,7 +5,7 @@
     <link rel="stylesheet" href="{% static 'wagtailadmin/css/userbar.css' %}" type="text/css" />
     {% endcompress %}
     <div class="wagtail-userbar__nav">
-        <a href="{% url 'wagtailadmin_home' %}" target="_parent" class="icon icon-wagtail wagtail-userbar__home">{% trans 'Go to Wagtail admin interface' %}</a>
+        <div class="icon icon-wagtail wagtail-userbar__trigger" data-wagtail-userbar-trigger>{% trans 'Go to Wagtail admin interface' %}</div>
         <ul>
             {% for item in items %}
                 {{ item|safe }}

wagtail/wagtailadmin/templates/wagtailadmin/userbar/item_admin.html

@@ -0,0 +1,8 @@
+{% extends "wagtailadmin/userbar/item_base.html" %}
+{% load i18n  %}
+
+{% block item_content %}
+  <div class="action icon icon-wagtail">
+    <a href="{% url 'wagtailadmin_home' %}" target="_parent" class="">{% trans 'Go to Wagtail admin' %}</a>
+  </div>
+{% endblock %}

wagtail/wagtailadmin/templates/wagtailadmin/userbar/item_page_edit.html

@@ -3,6 +3,6 @@
 
 {% block item_content %}
     <div class="action icon icon-edit">
-        <a href="{% url 'wagtailadmin_pages:edit' self.page.id %}" target="_parent" class="">{% trans 'Edit' %}</a>
+        <a href="{% url 'wagtailadmin_pages:edit' self.page.id %}" target="_parent" class="">{% trans 'Edit this page' %}</a>
     </div>
 {% endblock %}

wagtail/wagtailadmin/templates/wagtailadmin/userbar/item_page_explore.html

@@ -0,0 +1,8 @@
+{% extends "wagtailadmin/userbar/item_base.html" %}
+{% load i18n %}
+
+{% block item_content %}
+    <div class="action icon icon-folder-open-inverse">
+        <a href="{% url 'wagtailadmin_explore' self.parent_page.id %}" target="_parent" class="">{% trans 'Show in Explorer' %}</a>
+    </div>
+{% endblock %}

wagtail/wagtailadmin/templatetags/wagtailuserbar.py

@@ -6,8 +6,8 @@ from wagtail.wagtailcore.models import Page, PageRevision, PAGE_TEMPLATE_VAR
 from django.shortcuts import render
 # from django.contrib.auth.decorators import permission_required
 
-from wagtail.wagtailadmin.userbar import EditPageItem, AddPageItem, ApproveModerationEditPageItem, \
+from wagtail.wagtailadmin.userbar import AdminItem, ExplorePageItem, EditPageItem, AddPageItem, \
-    RejectModerationEditPageItem
+    ApproveModerationEditPageItem, RejectModerationEditPageItem
 from wagtail.wagtailcore import hooks
 
 register = template.Library()
@@ -50,12 +50,16 @@ def wagtailuserbar(context):
 
     if revision_id is None:
         items = [
+            AdminItem(),
             EditPageItem(Page.objects.get(id=page.id)),
+            ExplorePageItem(Page.objects.get(id=page.id)),
             AddPageItem(Page.objects.get(id=page.id)),
         ]
     else:
         items = [
+            AdminItem(),
             EditPageItem(PageRevision.objects.get(id=revision_id).page),
+            ExplorePageItem(PageRevision.objects.get(id=revision_id).page),
             AddPageItem(PageRevision.objects.get(id=revision_id).page),
             ApproveModerationEditPageItem(PageRevision.objects.get(id=revision_id)),
             RejectModerationEditPageItem(PageRevision.objects.get(id=revision_id)),

wagtail/wagtailadmin/userbar.py

@@ -8,6 +8,18 @@ class BaseItem(object):
         return render_to_string(self.template, dict(self=self, request=request), request=request)
 
 
+class AdminItem(BaseItem):
+    template = 'wagtailadmin/userbar/item_admin.html'
+
+    def render(self, request):
+
+        # Don't render if user doesn't have permission to access the admin area
+        if not request.user.has_perm('wagtailadmin.access_admin'):
+            return ""
+
+        return super(AdminItem, self).render(request)
+
+
 class AddPageItem(BaseItem):
     template = 'wagtailadmin/userbar/item_page_add.html'
 
@@ -32,6 +44,30 @@ class AddPageItem(BaseItem):
         return super(AddPageItem, self).render(request)
 
 
+class ExplorePageItem(BaseItem):
+    template = 'wagtailadmin/userbar/item_page_explore.html'
+
+    def __init__(self, page):
+        self.page = page
+        self.parent_page = page.get_parent()
+
+    def render(self, request):
+        # Don't render if the page doesn't have an id
+        if not self.page.id:
+            return ""
+
+        # Don't render if user doesn't have permission to access the admin area
+        if not request.user.has_perm('wagtailadmin.access_admin'):
+            return ""
+
+        # Don't render if the user doesn't have permission to edit this page
+        permission_checker = self.page.permissions_for_user(request.user)
+        if not permission_checker.can_edit():
+            return ""
+
+        return super(ExplorePageItem, self).render(request)
+
+
 class EditPageItem(BaseItem):
     template = 'wagtailadmin/userbar/item_page_edit.html'