Fancy dropdownish user menu for folk with JS. #110

misago/context_processors.py

@@ -14,6 +14,10 @@ def common(request):
         'hook_guest_menu_append': u'',
         'hook_user_menu_prepend': u'',
         'hook_user_menu_append': u'',
+        'hook_user_menu_important_prepend': u'',
+        'hook_user_menu_important_append': u'',
+        'hook_user_menu_dropdown_prepend': u'',
+        'hook_user_menu_dropdown_append': u'',
         'hook_credits_side': u'',
     }
 

static/cranefly/css/cranefly.css

@@ -881,7 +881,19 @@ footer .container .credits p{margin-bottom:0px;color:#555555;font-size:90%;}foot
 .navbar-header .navbar-inner .navbar-blocks li a:hover.fresh,.navbar-header .navbar-inner .navbar-blocks li a:active.fresh,.navbar-header .navbar-inner .navbar-blocks li .btn-link:hover.fresh,.navbar-header .navbar-inner .navbar-blocks li .btn-link:active.fresh{background-color:#46a546;border-color:#378137;}
 .navbar-header .navbar-inner .navbar-blocks li a:hover i,.navbar-header .navbar-inner .navbar-blocks li a:active i,.navbar-header .navbar-inner .navbar-blocks li .btn-link:hover i,.navbar-header .navbar-inner .navbar-blocks li .btn-link:active i{background-image:url("../img/glyphicons-halflings-white.png");opacity:1;filter:alpha(opacity=100);}
 .navbar-header .navbar-inner .navbar-blocks li a:hover .label,.navbar-header .navbar-inner .navbar-blocks li a:active .label,.navbar-header .navbar-inner .navbar-blocks li .btn-link:hover .label,.navbar-header .navbar-inner .navbar-blocks li .btn-link:active .label{background-color:#eeeeee;color:#333333;}
-.navbar-header .navbar-inner .navbar-blocks li.user-profile a:link,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:visited,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:hover,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:active{background:none;border:none;margin-right:8px;margin-top:5px;font-weight:bold;text-shadow:none;}.navbar-header .navbar-inner .navbar-blocks li.user-profile a:link img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:visited img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:hover img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:active img{border-radius:3px;margin-right:4px;width:32px;height:32px;position:relative;bottom:1px;}
+.navbar-header .navbar-inner .navbar-blocks li.user-profile a:link,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:visited,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:hover,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:active{background:none;border:none;margin-right:8px;margin-top:5px;font-weight:bold;text-shadow:none;}.navbar-header .navbar-inner .navbar-blocks li.user-profile a:link img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:visited img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:hover img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:active img{border-radius:3px;margin-right:6px;width:32px;height:32px;position:relative;bottom:1px;}
+.navbar-header .navbar-inner .navbar-compact{display:none;}.navbar-header .navbar-inner .navbar-compact li.user-profile>a:link,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:visited{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin-top:0px;padding:14px;padding-top:10px;padding-bottom:8px;}.navbar-header .navbar-inner .navbar-compact li.user-profile>a:link img,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:visited img{margin-right:0px;margin-left:6px;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile>a:hover,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:active{background-color:#fbfbfb;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:link,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:visited,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:hover,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:focus{background-color:#fbfbfb;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu{border:none;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;border-top:4px solid #cf402e;-webkit-box-shadow:0px 3px 4px #999999;-moz-box-shadow:0px 3px 4px #999999;box-shadow:0px 3px 4px #999999;margin:0px;margin-top:-3px;margin-right:8px;padding:0px;width:270px;}.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu:before{display:none;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu:after{border-bottom:6px solid #cf402e;margin-top:-3px;margin-right:11px;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li{margin:0px;padding:0px;}.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .label{float:right;margin:0px;margin-top:-18px;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li a,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;clear:none;display:block;float:none;margin:0px;padding:6px 12px;color:#333333;font-weight:normal;text-align:left;}.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li a i,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link i{opacity:1;filter:alpha(opacity=100);}
+.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li a:link .label,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link:link .label,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li a:active .label,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link:active .label,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li a:visited .label,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link:visited .label,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li a:hover .label,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link:hover .label{background-color:#cf402e;float:right;color:#ffffff;text-shadow:0px 1px 0px #7c261b;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li a:link,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li a:visited{opacity:0.8;filter:alpha(opacity=80);}
+.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li a:hover{background-color:#555555;opacity:1;filter:alpha(opacity=100);color:#ffffff;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link{background:none;border:none;width:100%;}.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link:hover,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link:active{background:#cf402e;opacity:1;filter:alpha(opacity=100);color:#ffffff;text-shadow:0px 1px 0px #7c261b;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link i{position:relative;top:0px;}
 .navbar-header .navbar-inner .navbar-user-nav li .btn{padding:2px 8px;margin-left:8px;margin-top:13px;}.navbar-header .navbar-inner .navbar-user-nav li .btn:link,.navbar-header .navbar-inner .navbar-user-nav li .btn:active,.navbar-header .navbar-inner .navbar-user-nav li .btn:hover,.navbar-header .navbar-inner .navbar-user-nav li .btn:visited{color:#ffffff;}
 .navbar-header .navbar-inner .navbar-user-nav li .btn.btn-danger{text-shadow:0px 1px 0px #902d20;}.navbar-header .navbar-inner .navbar-user-nav li .btn.btn-danger:hover,.navbar-header .navbar-inner .navbar-user-nav li .btn.btn-danger:active,.navbar-header .navbar-inner .navbar-user-nav li .btn.btn-danger:focus{background-color:#e82c15;border-color:#d12813;}
 .navbar-header .navbar-inner .navbar-user-nav li .btn.btn-inverse{text-shadow:0px 1px 0px #0d0d0d;}.navbar-header .navbar-inner .navbar-user-nav li .btn.btn-inverse:hover,.navbar-header .navbar-inner .navbar-user-nav li .btn.btn-inverse:active,.navbar-header .navbar-inner .navbar-user-nav li .btn.btn-inverse:focus{background-color:#262626;border-color:#1a1a1a;}

static/cranefly/css/cranefly/navbar.less

@@ -128,7 +128,7 @@
 
             img {
               border-radius: @baseBorderRadius;
-              margin-right: 4px;
+              margin-right: 6px;
               width: 32px;
               height: 32px;
               position: relative;
@@ -139,6 +139,129 @@
       }
     }
 
+    .navbar-compact {
+      display: none;
+      
+      li {
+        &.user-profile {
+          &>a {
+            &:link, &:visited {
+              .border-radius(0);
+              margin-top: 0px;
+              padding: @baseFontSize;
+              padding-top: 10px;
+              padding-bottom: 8px;
+
+              img {
+                margin-right: 0px;
+                margin-left: 6px;
+              }
+            }
+
+            &:hover, &:active {
+              background-color: @bodyBackground;
+            }
+          }
+
+          &.open .dropdown-toggle {
+            &:link, &:visited, &:hover, &:focus {
+              background-color: @bodyBackground;
+            }
+          }
+
+          .dropdown-menu {
+            border: none;
+            .border-radius(2px);
+            border-top: 4px solid @red;
+            .box-shadow(0px 3px 4px @grayLight);
+            margin: 0px;
+            margin-top: -3px;
+            margin-right: 8px;
+            padding: 0px;
+            width: 270px;
+
+            &:before {
+              display: none;
+            }
+
+            &:after {
+              border-bottom: 6px solid @red;
+              margin-top: -3px;
+              margin-right: 11px;
+            }
+
+            &>li {
+              margin: 0px;
+              padding: 0px;
+
+              .label {
+                float: right;
+                margin: 0px;
+                margin-top: -18px;
+              }
+
+              a, .btn-link {
+                .border-radius(0);
+                clear: none;
+                display: block;
+                float: none;
+                margin: 0px;
+                padding: 6px 12px;
+
+                color: @textColor;
+                font-weight: normal;
+                text-align: left;
+                
+                i {
+                  .opacity(100);
+                }
+
+                &:link, &:active, &:visited, &:hover {
+                  .label {
+                    background-color: @red;
+                    float: right;
+
+                    color: @white;
+                    text-shadow: 0px 1px 0px darken(@red, 20%);
+                  }
+                }
+              }
+
+              a:link, a:visited {
+                .opacity(80);
+              }
+
+              a:hover {
+                background-color: @gray;
+                .opacity(100);
+
+                color: @white;
+              }
+
+              .btn-link {
+                background: none;
+                border: none;
+                width: 100%;
+
+                &:hover, &:active {
+                  background: @red;
+                  .opacity(100);
+
+                  color: @white;
+                  text-shadow: 0px 1px 0px darken(@red, 20%);
+                }
+
+                i {
+                  position: relative;
+                  top: 0px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
     .navbar-user-nav {
       li {
         .btn {

templates/cranefly/base.html

@@ -15,6 +15,9 @@
   	<script src="{{ STATIC_URL }}cranefly/js/bootstrap.min.js"></script>
     <script type="text/javascript">
       var l_img_broken_msg = "{{ _('Image could not be loaded.') }}";
+      $(function() {
+        $('#fancy-user-nav').show();
+      });
     </script>
   	<script src="{{ STATIC_URL }}cranefly/js/cranefly.js"></script>{% block javascripts %}{% endblock %}
     {{ hook_append_extra|safe }}

templates/cranefly/layout.html

@@ -50,22 +50,58 @@
         </ul>
         {% if not user.is_crawler() %}
         {% if user.is_authenticated() %}
-        <ul class="nav navbar-blocks pull-right">
-          <li class="user-profile"><a href="{% url 'user' user=user.id, username=user.username_slug %}" title="{% trans %}Go to your profile{% endtrans %}" class="tooltip-bottom"><div><img src="{{ user.get_avatar(28) }}" alt=""> {{ user.username }}</div></a></li>
-          {{ hook_user_menu_prepend|safe }}
-          <li><a href="{% url 'alerts' %}" title="{% if user.alerts %}{% trans %}You have new notifications!{% endtrans %}{% else %}{% trans %}Your Notifications{% endtrans %}{% endif %}" class="tooltip-bottom"><i class="icon-asterisk"></i>{% if user.alerts %}<span class="label label-important">{{ user.alerts }}</span>{% endif %}</a></li>
-          {% if acl.reports.can_handle() %}
-          <li><a href="{% url 'reports' %}" title="{% if monitor.reported_posts %}{% trans %}There are unresolved reports!{% endtrans %}{% else %}{% trans %}Reports{% endtrans %}{% endif %}" class="tooltip-bottom"><i class="icon-fire"></i>{% if monitor.reported_posts %}<span class="label label-important">{{ monitor.reported_posts }}</span>{% endif %}</a></li>
+        <ul id="fancy-user-nav" class="nav navbar-blocks navbar-compact pull-right">
+          {{ hook_user_menu_important_prepend|safe }}
+          {% if acl.reports.can_handle() and monitor.reported_posts %}
+          <li><a href="{% url 'reports' %}" title="{% trans %}There are unresolved reports!{% endtrans %}" class="tooltip-bottom"><i class="icon-fire"></i><span class="label label-important">{{ monitor.reported_posts }}</span></a></li>
           {% endif %}
-          {% if settings.enable_private_threads and acl.private_threads.can_participate() %}
-          <li><a href="{% url 'private_threads' %}" title="{% if user.unread_pds %}{% trans %}There are unread Private Threads!{% endtrans %}{% else %}{% trans %}Your Private Threads{% endtrans %}{% endif %}" class="tooltip-bottom"><i class="icon-inbox"></i>{% if user.unread_pds %}<span class="label label-important">{{ user.unread_pds }}</span>{% endif %}</a></li>
+          {% if user.alerts %}
+          <li><a href="{% url 'alerts' %}" title="{% trans %}You have new notifications!{% endtrans %}" class="tooltip-bottom"><i class="icon-asterisk"></i><span class="label label-important">{{ user.alerts }}</span></a></li>
           {% endif %}
-          <li><a href="{% url 'newsfeed' %}" title="{% trans %}Your News Feed{% endtrans %}" class="tooltip-bottom"><i class="icon-signal"></i></a></li>
-          <li><a href="{% url 'watched_threads' %}" title="{% trans %}Threads you are watching{% endtrans %}" class="tooltip-bottom"><i class="icon-bookmark"></i></a></li>
-          <li><a href="{% url 'usercp' %}" title="{% trans %}Edit your profile options{% endtrans %}" class="tooltip-bottom"><i class="icon-cog"></i></a></li>
-          {{ hook_user_menu_append|safe }}
-          <li><form action="{% url 'sign_out' %}" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><button type="submit" title="{% trans %}Sign Out and browse as guest{% endtrans %}" class="btn btn-link danger tooltip-bottom"><i class="icon-off"></i></button></form></li>
+          {% if settings.enable_private_threads and acl.private_threads.can_participate() and user.unread_pds%}
+          <li><a href="{% url 'private_threads' %}" title="{% trans %}There are unread Private Threads!{% endtrans %}" class="tooltip-bottom"><i class="icon-inbox"></i><span class="label label-important">{{ user.unread_pds }}</span></a></li>
+          {% endif %}
+          {{ hook_user_menu_important_append|safe }}
+          <li class="user-profile dropdown">
+            <a href="{% url 'user' user=user.id, username=user.username_slug %}" class="dropdown-toggle" data-toggle="dropdown"><div>{{ user.username }} <img src="{{ user.get_avatar(28) }}" alt=""></div></a>
+            <ul class="dropdown-menu">
+              <li><a href="{% url 'user' user=user.id, username=user.username_slug %}"><i class="icon-user"></i> {% trans %}Your profile{% endtrans %}</a></li>
+              <li><a href="{% url 'usercp' %}"><i class="icon-cog"></i> {% trans %}Change options{% endtrans %}</a></li>
+              <li role="presentation" class="divider"></li>
+              {% if acl.reports.can_handle() %}
+              <li><a href="{% url 'reports' %}"><i class="icon-fire"></i> {% trans %}Reported Posts{% endtrans %}{% if monitor.reported_posts %}<span class="label">{{ monitor.reported_posts }}</span>{% endif %}</a></li>
+              {% endif %}
+              <li><a href="{% url 'alerts' %}"><i class="icon-asterisk"></i> {% trans %}Notifications{% endtrans %}{% if user.alerts %}<span class="label">{{ user.alerts }}</span>{% endif %}</a></li>
+              {{ hook_user_menu_dropdown_prepend|safe }}
+              {% if settings.enable_private_threads and acl.private_threads.can_participate() %}
+              <li><a href="{% url 'private_threads' %}"><i class="icon-inbox"></i> {% trans %}Private Threads{% endtrans %}{% if user.unread_pds %}<span class="label">{{ user.unread_pds }}</span>{% endif %}</a></li>
+              {% endif %}
+              <li><a href="{% url 'newsfeed' %}"><i class="icon-signal"></i> {% trans %}News Feed{% endtrans %}</a></li>
+              <li><a href="{% url 'watched_threads' %}"><i class="icon-bookmark"></i> {% trans %}Watched Threads{% endtrans %}</a></li>
+              {{ hook_user_menu_dropdown_prepend|safe }}
+              <li role="presentation" class="divider"></li>
+              <li><form action="{% url 'sign_out' %}" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><button type="submit" class="btn btn-link danger"><i class="icon-off"></i> {% trans %}Sign out{% endtrans %}</button></form></li>
+            </ul>
+          </li>
         </ul>
+        <noscript>
+          <ul class="nav navbar-blocks pull-right">
+            {{ hook_user_menu_prepend|safe }}
+            <li><a href="{% url 'alerts' %}" title="{% if user.alerts %}{% trans %}You have new notifications!{% endtrans %}{% else %}{% trans %}Your Notifications{% endtrans %}{% endif %}" class="tooltip-bottom"><i class="icon-asterisk"></i>{% if user.alerts %}<span class="label label-important">{{ user.alerts }}</span>{% endif %}</a></li>
+            {% if acl.reports.can_handle() %}
+            <li><a href="{% url 'reports' %}" title="{% if monitor.reported_posts %}{% trans %}There are unresolved reports!{% endtrans %}{% else %}{% trans %}Reports{% endtrans %}{% endif %}" class="tooltip-bottom"><i class="icon-fire"></i>{% if monitor.reported_posts %}<span class="label label-important">{{ monitor.reported_posts }}</span>{% endif %}</a></li>
+            {% endif %}
+            {% if settings.enable_private_threads and acl.private_threads.can_participate() %}
+            <li><a href="{% url 'private_threads' %}" title="{% if user.unread_pds %}{% trans %}There are unread Private Threads!{% endtrans %}{% else %}{% trans %}Your Private Threads{% endtrans %}{% endif %}" class="tooltip-bottom"><i class="icon-inbox"></i>{% if user.unread_pds %}<span class="label label-important">{{ user.unread_pds }}</span>{% endif %}</a></li>
+            {% endif %}
+            <li><a href="{% url 'newsfeed' %}" title="{% trans %}Your News Feed{% endtrans %}" class="tooltip-bottom"><i class="icon-signal"></i></a></li>
+            <li><a href="{% url 'watched_threads' %}" title="{% trans %}Threads you are watching{% endtrans %}" class="tooltip-bottom"><i class="icon-bookmark"></i></a></li>
+            <li><a href="{% url 'usercp' %}" title="{% trans %}Edit your profile options{% endtrans %}" class="tooltip-bottom"><i class="icon-cog"></i></a></li>
+            {{ hook_user_menu_append|safe }}
+            <li class="user-profile"><a href="{% url 'user' user=user.id, username=user.username_slug %}" title="{% trans %}Go to your profile{% endtrans %}" class="tooltip-bottom"><div><img src="{{ user.get_avatar(28) }}" alt=""> {{ user.username }}</div></a></li>
+            <li><form action="{% url 'sign_out' %}" method="post"><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"><button type="submit" title="{% trans %}Sign Out and browse as guest{% endtrans %}" class="btn btn-link danger tooltip-bottom"><i class="icon-off"></i></button></form></li>
+          </ul>
+        </noscript>
         {% else %}
         <ul class="nav navbar-user-nav pull-right">
           {{ hook_guest_menu_prepend|safe }}