From b8b1aa2acc6b06ca1a49f4ea9662b7632f7c1ab1 Mon Sep 17 00:00:00 2001 From: Jiri Tomasek Date: Thu, 2 Oct 2014 17:45:06 +0200 Subject: [PATCH] Restyled sidebar to resemble UX guidelines Partially-Implements: blueprint navigation-styling Closes-Bug: #1365680 Change-Id: I37e603ee5ba310ba5f18b69df4c1cd6fa529c1d9 --- .../horizon/js/horizon.accordion_nav.js | 2 +- horizon/templates/base.html | 8 +- horizon/templates/horizon/_accordion_nav.html | 72 ++++---- .../static/dashboard/img/sidebar_bg.png | Bin 0 -> 162 bytes .../static/dashboard/scss/_accordion_nav.scss | 159 +++++++++--------- .../static/dashboard/scss/_variables.scss | 2 + .../static/dashboard/scss/horizon.scss | 27 +-- 7 files changed, 142 insertions(+), 128 deletions(-) create mode 100644 openstack_dashboard/static/dashboard/img/sidebar_bg.png diff --git a/horizon/static/horizon/js/horizon.accordion_nav.js b/horizon/static/horizon/js/horizon.accordion_nav.js index 8553151164..d7d5ea2b0d 100644 --- a/horizon/static/horizon/js/horizon.accordion_nav.js +++ b/horizon/static/horizon/js/horizon.accordion_nav.js @@ -79,7 +79,7 @@ horizon.addInitFunction(function() { }); // panel selection - $('.nav_accordion > dd > ul > li > a').click(function() { + $('.nav_accordion > dd > div > ul > li > a').click(function() { horizon.modals.modal_spinner(gettext("Loading")); }); diff --git a/horizon/templates/base.html b/horizon/templates/base.html index d0589316d6..ecc6b8cf02 100644 --- a/horizon/templates/base.html +++ b/horizon/templates/base.html @@ -26,8 +26,12 @@ {% include 'horizon/common/_sidebar.html' %} {% endblock %}
- {% block page_header %}{% endblock %} - {% block main %}{% endblock %} +
+
+ {% block page_header %}{% endblock %} + {% block main %}{% endblock %} +
+
diff --git a/horizon/templates/horizon/_accordion_nav.html b/horizon/templates/horizon/_accordion_nav.html index fd8634ef24..5d21bc1476 100644 --- a/horizon/templates/horizon/_accordion_nav.html +++ b/horizon/templates/horizon/_accordion_nav.html @@ -1,40 +1,42 @@ {% load horizon i18n %} {% load url from future %} -
-
- {% for dashboard, panel_info in components %} - {% if user|has_permissions:dashboard %} - {% if dashboard.supports_tenants and request.user.authorized_tenants or not dashboard.supports_tenants %} -
-
{{ dashboard.name }}
-
- {% if current.slug == dashboard.slug %} -
- {% else %} -
- {% endif %} - {% for heading, panels in panel_info.iteritems %} - {% with panels|has_permissions_on_list:user as filtered_panels %} - {% if filtered_panels %} - {% if heading %} -

{{ heading }}

- {% endif %} - - {% if heading %} -
- {% endif %} - {% endif %} - {% endwith %} - {% endfor %} -
+
+{% for dashboard, panel_info in components %} + {% if user|has_permissions:dashboard %} + {% if dashboard.supports_tenants and request.user.authorized_tenants or not dashboard.supports_tenants %} +
+ {{ dashboard.name }} + +
+ {% if current.slug == dashboard.slug %} +
+ {% else %} +
{% endif %} + {% for heading, panels in panel_info.iteritems %} + {% with panels|has_permissions_on_list:user as filtered_panels %} + {% if filtered_panels %} + {% if heading %} +
+

+ {{ heading }} + +

+ {% endif %} + + {% if heading %} +
+ {% endif %} + {% endif %} + {% endwith %} + {% endfor %} +
{% endif %} - {% endfor %} -
-
- + {% endif %} +{% endfor %} + diff --git a/openstack_dashboard/static/dashboard/img/sidebar_bg.png b/openstack_dashboard/static/dashboard/img/sidebar_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..8dfc34a0381433fcdedcc857bcfbb81e9646bfd1 GIT binary patch literal 162 zcmeAS@N?(olHy`uVBq!ia0y~yU|a%ZGjgy2$%(IS-2qZ;N#5=*4F5rJ!QSPQfg+p* z9+AZi4BWyX%*Zfnjs#GUy~NYkmHi$U2REDC=_ix60)_NFT^vI!PQN{PP>{iZgUR4V zyFVdQ&MBb@ E08TnD*Z=?k literal 0 HcmV?d00001 diff --git a/openstack_dashboard/static/dashboard/scss/_accordion_nav.scss b/openstack_dashboard/static/dashboard/scss/_accordion_nav.scss index 2448c02c74..531bf97c45 100644 --- a/openstack_dashboard/static/dashboard/scss/_accordion_nav.scss +++ b/openstack_dashboard/static/dashboard/scss/_accordion_nav.scss @@ -1,100 +1,103 @@ -$accordionBorderColor: #e5e5e5; +$accordionBorderColor: #aeb0b2; + +@mixin sidebar_toggle_icon { + & > span { + transition: all .3s ease 0s; + @extend .glyphicon-chevron-down; + &:before { + font-size: .6em; + line-height: 18px; + vertical-align: middle; + } + } + &.active > span { + -ms-transform: rotate(180deg); /* IE 9 */ + -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ + transform: rotate(180deg); + } +} .nav_accordion { color: #6e6e6e; margin: 0px 0px; dt, dd { - padding: 10px 0 10px 0; line-height: 18px; h4 { - border: 1px solid #bbbbbb; - border-right: 0; - border-bottom: 0; - background-color: #f0f0f0; - background-repeat: no-repeat; - background-position: 96% center; - background-image: url("../img/right_droparrow.png"); - padding: 10px 0 10px 0; - line-height: 16px; - margin-top: 0; - margin-bottom: 0; + padding: .5em 0 .3em 0; + margin: 0 1.2em .5em 1.2em; + border-bottom: 3px solid #c0c1c2; + font-size: $font-size-base; + line-height: $line-height-base; color: #6e6e6e; font-weight: bold; text-rendering: optimizelegibility; - max-width: 217px; - padding-right: 16px; cursor: pointer; - div { - color: #6e6e6e; - font-size: 14px; - margin: 0 0 0 14px; - display: block; - font-weight: bold; - outline: none; - overflow: hidden; - text-overflow: ellipsis; - max-width: 177px; } } - h4.active { - border-bottom: 1px solid #bbbbbb; - background-image: url("../img/drop_arrow.png"); } - a { - color: #6e6e6e; - font-size: 16px; - margin: 0 0 0 14px; - padding: 0; - display: block; - font-weight: bold; - outline: none; - text-decoration: none; } + @include sidebar_toggle_icon(); + transition: all .3s ease 0s; + &:hover{ + border-color: darken(#c0c1c2, 10%) + } + } ul { list-style: none outside none; - margin: 10px 0 0; + margin: 0; padding: 0; - width: 222px; } + } li { + &:not(:first-child) a { + margin-top: .2em; + } + &:not(:last-child) a { + margin-bottom: .2em; + } a { - width: 209px; - padding: 10px; + color: #6e6e6e; + padding: .7em 1.2em; + outline: none; + text-decoration: none; display: block; - line-height: 18px; - margin-left: 20px; - font-weight: normal; - font-size: 13px; } - a.active { - background: white; - border-top: 2px solid $accordionBorderColor; - border-left: 4px solid #d93c27; - border-bottom: 2px solid $accordionBorderColor; - margin-left: 19px; - border-radius: 5px 0 0 5px; } - a:last-child { - margin-bottom: 8px; } } } + font-size: 1.2em; + text-align: right; + transition: all .3s ease 0s; + &.active, &:hover { + color: #d93c27; + } + &.active { + background: white; + border-top: 1px solid $accordionBorderColor; + border-left: 4px solid #d93c27; + border-bottom: 1px solid $accordionBorderColor; + -webkit-box-shadow: -3px 2px 6px -3px #C7C7C7; + box-shadow: -3px 3px 6px -3px #C7C7C7; + } + } + } + } dd { padding: 0; - margin-left: 9px; - font-size: 12px; } + border-bottom: 1px solid #bbbbbb; + div { + &:first-child h4 { + margin-top: .5em; + } + &:last-child h4:not(.active) { + margin-bottom: 1em; + } + } + } dt { - border-top: 1px solid #bbbbbb; - background-color: $accordionBorderColor; - background-repeat: no-repeat; - background-position: 96% center; - background-image: url("../img/right_droparrow.png"); - padding-right: 16px; + &:first-child { border-top: 1px solid #bbbbbb; } + border-bottom: 1px solid #bbbbbb; + padding: .5em 1.2em; max-width: 231px; cursor: pointer; - div { - color: #6e6e6e; - font-size: 14px; - margin: 0 0 0 14px; - padding: 0; - font-weight: bold; - outline: none; - overflow: hidden; - text-overflow: ellipsis; - max-width: 201px; } } - dt.active { - background-image: url("../img/drop_arrow.png"); } - dt:first-child { - border-top: 0; } - dt a { - text-decoration: none; } } + @include sidebar_toggle_icon(); + transition: all .3s ease 0s; + &.active { + background-color: #e3e4e6; + } + &:hover{ + background-color: darken(#e3e4e6, 3%) + } + } +} diff --git a/openstack_dashboard/static/dashboard/scss/_variables.scss b/openstack_dashboard/static/dashboard/scss/_variables.scss index a3db3625d1..7d7ec43332 100644 --- a/openstack_dashboard/static/dashboard/scss/_variables.scss +++ b/openstack_dashboard/static/dashboard/scss/_variables.scss @@ -52,3 +52,5 @@ $rbrowser-header-background-color: $gray-lighter; $rbrowser-footer-background-color: #f1f1f1; // Note: the content-wrapper background colors are determined by // .table-striped-datatable styles. + +$sidebar-width: 220px; diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss index 1735a5ec12..dc95ad049c 100644 --- a/openstack_dashboard/static/dashboard/scss/horizon.scss +++ b/openstack_dashboard/static/dashboard/scss/horizon.scss @@ -43,6 +43,11 @@ body { background-color: $body-bg; + &:not(#splash) { + background-image: url('../img/sidebar_bg.png'); + background-repeat: repeat-y; + background-position: -200px top; + } color: $text-color; min-width: 900px; } @@ -142,12 +147,14 @@ h2 { .sidebar { background-color: $sidebar-background-color; - border-width: 0 6px 5px 0; - border-color: $border-color; - border-style: solid; - border-radius: 0 0 5px 0; - float: left; - min-width: 236px; + padding-top: 20px; + margin-left: -$sidebar-width; + left: $sidebar-width; + width: $sidebar-width; + position: absolute; + z-index: 0; + -webkit-box-shadow:inset -3px 2px 6px -2px #C7C7C7, inset -1px 0 0 0 #cccccc; + box-shadow:inset -3px 2px 6px -2px #C7C7C7, inset -1px 0 0 0 #cccccc; } .sidebar h4 { @@ -1063,8 +1070,8 @@ tr.terminated { } #content_body { - padding-left: 255px; - padding-right: 25px; + padding-left: $sidebar-width + 15px; + padding-right: 15px; } .tab_wrapper { @@ -1238,10 +1245,6 @@ div .flavor_table { width: 160px; } -#main_content .row { - margin: 10px 0 20px; -} - #main_content .row:last-child { margin-bottom: 0; }