diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js index 6017c595fc2..4273196b686 100644 --- a/ui/scripts/ui/core.js +++ b/ui/scripts/ui/core.js @@ -332,6 +332,10 @@ return false; }); } + if (this == 'label.logout') { + $link.addClass('logout'); + + } }); // Initialize browser @@ -463,8 +467,14 @@ } // User options - if ($target.closest('#user div.icon.options').size()) { - $('#user-options').toggle(); + if ($target.closest('#user').size()) { + var $options = $('#user-options'); + + $options.css({ + top: $target.offset().top + $target.height(), + left: $target.offset().left + }); + $options.toggle(); return false; } diff --git a/ui/stylesheets/cloudstack.scss b/ui/stylesheets/cloudstack.scss index 61bba1c00eb..a41f16190eb 100644 --- a/ui/stylesheets/cloudstack.scss +++ b/ui/stylesheets/cloudstack.scss @@ -202,10 +202,21 @@ body { .ui-dialog, .notification-box, #user-options { @include dialog; + + display: none; } #user-options { - display: none; + a { + @include csui-hyperlink; + @include row; + + &.logout { + font-weight: bold; + border-bottom: 1px solid gray; + margin-bottom: 25px; + } + } } // List view widget diff --git a/ui/stylesheets/csui/_csui.scss b/ui/stylesheets/csui/_csui.scss index 599eeea46ea..ae5557abd3b 100644 --- a/ui/stylesheets/csui/_csui.scss +++ b/ui/stylesheets/csui/_csui.scss @@ -22,6 +22,15 @@ html, body { font-size: 13px; } +@mixin csui-hyperlink { + color: black; + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + // Sub-components @import "login"; @import "button";