[PATCH conductor] fix user dropdown in masthead - aeolus-devel - Fedora mailing-lists

22 Dec 2011

From: Jiri Tomasek jtomasek@redhat.com
---
 src/app/stylesheets/custom.scss           |   18 ----------
 src/app/stylesheets/layout.scss           |   53 ++++++++++++++++++++++++-----
 src/app/views/layouts/_masthead.html.haml |    5 ++-
 src/public/javascripts/application.js     |   14 --------
 4 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/app/stylesheets/custom.scss b/src/app/stylesheets/custom.scss
index 692c61c..2041fee 100644
--- a/src/app/stylesheets/custom.scss
+++ b/src/app/stylesheets/custom.scss
@@ -1,21 +1,3 @@
-#user-menu.nojs a {
-  margin-left: 1em;
-}
-
-#user-menu.js {
-  position: fixed;
-  width: 100px;
-  height: 30px;
-  background: white;
-  display: none;
-  border: 2px solid #E7E7E7;
-  padding: 0.5em;
-
-  a {
-    display: block;
-  }
-}
-
 /*fixes the button_to helper used in button-group problem*/
 .button-group .button_to div .button.pill{
   -webkit-border-radius: 0em 50em;
diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss
index a6d5301..18a7c53 100644
--- a/src/app/stylesheets/layout.scss
+++ b/src/app/stylesheets/layout.scss
@@ -888,26 +888,61 @@ header#masthead{
     margin: 0 auto;
     width: 960px;
     overflow: hidden;
-    position: relative;
   }
-  a.user-dropdown{
+  label#user-dropdown-label{
     border: 1px solid #ccc;
-    background: url('../../images/button-userdrop.png') no-repeat center center;
-    background: url('../../images/button-userdrop.png') no-repeat center center, -moz-linear-gradient(top, rgba(239,239,239,0), rgba(204,204,204,0));
-    background: url('../../images/button-userdrop.png') no-repeat center center, -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(239,239,239)),color-stop(1, rgb(204,204,204)));
+    background: #e7e7e7 url('../../images/button-userdrop.png') no-repeat center 4px;
+    display: inline-block;
     width: 46px;
     margin-left: 4px;
     padding: 5px 2px 5px 2px;
     color: transparent;
     font-size: 12px; /* match the font-size of the query box, for proper valign */
+    -webkit-border-radius: 50em;
+    -moz-border-radius: 50em;
+    border-radius: 50em;
+    position: relative;
+    z-index: 2;
+    cursor: pointer;
+    margin-left: -26px;
+  }
+
+  #user-menu {
+    position: absolute;
+    top: 34px;
+    left: 50%;
+    margin-left: 354px;
+    width: 100px;
+    height: 30px;
+    background: #e7e7e7;
+    display: none;
+    border: 1px solid #ccc;
+    padding: 8px 12px;
+    z-index: 1;
+    -webkit-border-radius: 7px 0px 7px 7px;
+    -moz-border-radius: 7px 0px 7px 7px;
+    border-radius: 7px 0px 7px 7px;
-    &:active{
-      background: url('../../images/button-userdrop.png') no-repeat center center;
-      background: url('../../images/button-userdrop.png') no-repeat center center, -moz-linear-gradient(top, rgba(232,232,232,0), rgba(210,210,210,0));
-      background: url('../../images/button-userdrop.png') no-repeat center center, -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(232,232,232)),color-stop(1, rgb(210,210,210)));
+    a {
+      display: block;
     }
+  }
+  input[type="checkbox"]#user-dropdown{
+    margin: 0px 0px 0px 10px;
+    position: relative;
+    z-index: 0;
+    opacity: 0;
+  }
+  /*toggle user-menu on checkbox checking*/
+  input[type="checkbox"]#user-dropdown:checked ~ #user-menu{ display: block; }
+  input[type="checkbox"]#user-dropdown:checked ~ #user-dropdown-label{
+    border-bottom: none;
+    -webkit-border-radius: 1em 1em 0px 0px;
+    -moz-border-radius: 1em 1em 0px 0px;
+    border-radius: 1em 1em 0px 0px;
+    height: 18px;
   }
nav#system{
diff --git a/src/app/views/layouts/_masthead.html.haml b/src/app/views/layouts/_masthead.html.haml
index ea66453..4eaa72f 100644
--- a/src/app/views/layouts/_masthead.html.haml
+++ b/src/app/views/layouts/_masthead.html.haml
@@ -5,8 +5,9 @@
       %li.account
         %span.name.label.strong.small-caps
           = "#{current_user.first_name} #{current_user.last_name}" if current_user.present?
-        %a.button.pill.user-dropdown{:href => '#'} &nbsp;
-        %span#user-menu{ :class => javascript? ? 'js' : 'nojs' }
+        %input{:type => 'checkbox', :id => 'user-dropdown'}
+        %label{:for => "user-dropdown", :id => 'user-dropdown-label'} &nbsp;
+        #user-menu
           = link_to t('masthead.my_account'), account_path
           = link_to t('masthead.logout'), logout_path
 /      %li.separator
diff --git a/src/public/javascripts/application.js b/src/public/javascripts/application.js
index 9df25bf..d2c262b 100644
--- a/src/public/javascripts/application.js
+++ b/src/public/javascripts/application.js
@@ -202,19 +202,6 @@ $.extend(Conductor, {
     });
   },
-  enhanceUserMenu: function() {
-    var $userDropdown = $('#system a.user-dropdown');
-    if($userDropdown.length == 0) return;
-
-    var offset = $userDropdown.offset()
-    offset.top = offset.top + 40;
-    $('#user-menu').offset(offset)
-    $userDropdown.click(function(ev) {
-      ev.preventDefault();
-      $('#user-menu').toggle();
-    });
-  },
-
 });
/* custom methods */
@@ -311,7 +298,6 @@ $(document).ready(function () {
   Conductor.closeNotification();
   Conductor.toggleCollapsible();
   Conductor.selectAllCheckboxes();
-  Conductor.enhanceUserMenu();
   Conductor.tabAjaxRequest();
   Conductor.initializeBackbone();
 });
-- 
1.7.7.3


    