diff --git a/horizon/static/horizon/js/horizon.accordion_nav.js b/horizon/static/horizon/js/horizon.accordion_nav.js deleted file mode 100644 index 6b51e59cd8..0000000000 --- a/horizon/static/horizon/js/horizon.accordion_nav.js +++ /dev/null @@ -1,93 +0,0 @@ -horizon.addInitFunction(function() { - var allPanelGroupBodies = $('.nav_accordion > dd > div > ul'); - // In case the event was generated by clicking any mouse button, - // the normalized codes are matched according to http://api.jquery.com/event.which/ - var MOUSE_LBUTTON_CODE_NORMALIZED = 1; - var MOUSE_WHEEL_CODE_NORMALIZED = 2; - - // mark the active panel group - var activePanel = $('.nav_accordion > dd > div > ul > li > a.active'); - activePanel.closest('div').find('h4').addClass('active'); - - // dashboard click - $('.nav_accordion > dt').click(function() { - var myDashHeader = $(this); - var myDashWasActive = myDashHeader.hasClass("active"); - - // mark the active dashboard - var allDashboardHeaders = $('.nav_accordion > dt'); - allDashboardHeaders.removeClass("active"); - - // collapse all dashboard contents - var allDashboardBodies = $('.nav_accordion > dd'); - allDashboardBodies.slideUp(); - - // if the current dashboard was active, leave it collapsed - if(!myDashWasActive) { - myDashHeader.addClass("active"); - - // expand the active dashboard body - var myDashBody = myDashHeader.next(); - myDashBody.slideDown(); - - var activeDashPanel = myDashBody.find("div > ul > li > a.active"); - // if the active panel is not in the expanded dashboard - if (activeDashPanel.length === 0) { - // expand the active panel group - var activePanel = myDashBody.find("div:first > ul"); - activePanel.removeClass('hidden').slideDown(); - activePanel.closest('div').find("h4").addClass("active"); - - // collapse the inactive panel groups - var nonActivePanels = myDashBody.find("div:not(:first) > ul"); - nonActivePanels.slideUp(); - nonActivePanels.closest('div').find("h4").removeClass("active"); - } - // the expanded dashboard contains the active panel - else - { - // collapse the inactive panel groups - activeDashPanel.closest('div').find("h4").addClass("active"); - activeDashPanel.closest('ul').removeClass('hidden').slideDown(); - allPanelGroupBodies.each(function(index, value) { - var activePanels = $(value).find('li > a.active'); - if(activePanels.length === 0) { - $(this).slideUp(); - $(this).closest('div').find("h4").removeClass("active"); - } - }); - } - } - return false; - }); - - // panel group click - $('.nav_accordion > dd > div > h4').click(function() { - var myPanelGroupHeader = $(this); - var myPanelGroupWasActive = myPanelGroupHeader.hasClass("active"); - - // collapse all panel groups - var allPanelGroupHeaders = $('.nav_accordion > dd > div > h4'); - allPanelGroupHeaders.removeClass("active"); - allPanelGroupBodies.slideUp(); - - // expand the selected panel group if not already active - if(!myPanelGroupWasActive) { - myPanelGroupHeader.addClass("active"); - myPanelGroupHeader.closest('div').find('ul').removeClass('hidden') - .slideDown(); - } - }); - - // panel selection - $('.nav_accordion > dd > div > ul > li > a').click(function(ev) { - // NOTE(tsufiev): prevent infinite 'Loading' spinner when opening link - // in the other browser tab with mouse wheel or mouse lbutton + modifier - if ( ev.which !== MOUSE_WHEEL_CODE_NORMALIZED && - !( ev.which === MOUSE_LBUTTON_CODE_NORMALIZED && - ( ev.shiftKey || ev.ctrlKey || ev.metaKey ) ) ) { - horizon.modals.modal_spinner(gettext("Loading")); - } - }); - -}); diff --git a/horizon/static/horizon/js/horizon.modals.js b/horizon/static/horizon/js/horizon.modals.js index c5e1d97756..a0535de340 100644 --- a/horizon/static/horizon/js/horizon.modals.js +++ b/horizon/static/horizon/js/horizon.modals.js @@ -386,4 +386,19 @@ horizon.addInitFunction(horizon.modals.init = function() { handle: ".modal-header" }); }); + + // Helper class to show modal spinner on click + // In case the event was generated by clicking any mouse button, + // the normalized codes are matched according to http://api.jquery.com/event.which/ + var MOUSE_LBUTTON_CODE_NORMALIZED = 1; + var MOUSE_WHEEL_CODE_NORMALIZED = 2; + $(document).on('click', '.openstack-spin', function(ev) { + // NOTE(tsufiev): prevent infinite 'Loading' spinner when opening link + // in the other browser tab with mouse wheel or mouse lbutton + modifier + if ( ev.which !== MOUSE_WHEEL_CODE_NORMALIZED && + !( ev.which === MOUSE_LBUTTON_CODE_NORMALIZED && + ( ev.shiftKey || ev.ctrlKey || ev.metaKey ) ) ) { + horizon.modals.modal_spinner(gettext("Loading")); + } + }); }); diff --git a/horizon/templates/horizon/_accordion_nav.html b/horizon/templates/horizon/_accordion_nav.html deleted file mode 100644 index 9f16c3c41a..0000000000 --- a/horizon/templates/horizon/_accordion_nav.html +++ /dev/null @@ -1,40 +0,0 @@ -{% load horizon i18n %} -{% load url from future %} - -
-{% for dashboard, panel_info in components %} - {% if user|has_permissions:dashboard %} -
- {{ 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 %} -
- {% endif %} - {% endif %} - {% endwith %} - {% endfor %} -
- {% endif %} -{% endfor %} -
diff --git a/horizon/templates/horizon/_sidebar.html b/horizon/templates/horizon/_sidebar.html new file mode 100644 index 0000000000..401a241d0e --- /dev/null +++ b/horizon/templates/horizon/_sidebar.html @@ -0,0 +1,58 @@ +{% load horizon i18n %} +{% load url from future %} + + diff --git a/horizon/templates/horizon/common/_sidebar.html b/horizon/templates/horizon/common/_sidebar.html index 78cb395576..d9bbcf8304 100644 --- a/horizon/templates/horizon/common/_sidebar.html +++ b/horizon/templates/horizon/common/_sidebar.html @@ -1,6 +1,6 @@ {% load branding horizon i18n %} {% load url from future %} -
+ diff --git a/horizon/templatetags/horizon.py b/horizon/templatetags/horizon.py index d5fb283b92..da4501a12b 100644 --- a/horizon/templatetags/horizon.py +++ b/horizon/templatetags/horizon.py @@ -44,7 +44,7 @@ def has_permissions_on_list(components, user): in components if has_permissions(user, component)] -@register.inclusion_tag('horizon/_accordion_nav.html', takes_context=True) +@register.inclusion_tag('horizon/_sidebar.html', takes_context=True) def horizon_nav(context): if 'request' not in context: return {} @@ -65,9 +65,9 @@ def horizon_nav(context): panel.can_access(context)): allowed_panels.append(panel) if panel == current_panel: - current_panel_group = group.name + current_panel_group = group.slug if allowed_panels: - non_empty_groups.append((group.name, allowed_panels)) + non_empty_groups.append((group, allowed_panels)) if (callable(dash.nav) and dash.nav(context) and dash.can_access(context)): dashboards.append((dash, SortedDict(non_empty_groups))) diff --git a/openstack_dashboard/static/dashboard/img/sidebar_bg.png b/openstack_dashboard/static/dashboard/img/sidebar_bg.png deleted file mode 100644 index 3f7fdc70f5..0000000000 Binary files a/openstack_dashboard/static/dashboard/img/sidebar_bg.png and /dev/null differ diff --git a/openstack_dashboard/static/dashboard/scss/_variables.scss b/openstack_dashboard/static/dashboard/scss/_variables.scss index 84ba111e3f..167ed01039 100644 --- a/openstack_dashboard/static/dashboard/scss/_variables.scss +++ b/openstack_dashboard/static/dashboard/scss/_variables.scss @@ -12,7 +12,6 @@ $webroot: "" !default; $code-font-family: Menlo, Monaco, Consolas, 'Courier New' !default; $main-content-min-width: 900px !default; -$sidebar-background-color: #f9f9f9 !default; $sidebar-width: 220px !default; $border-color: #dddddd !default; $table-bg-odd: $table-bg-accent !default; @@ -66,20 +65,6 @@ $fa-font-path: $webroot + "/static/horizon/lib/font-awesome/fonts"; $overview_chart_height: 81px; - -/* Accordion Navigation */ - -$accordionBaseFontColor: #6e6e6e !default; -$accordionBorderColor: #e5e5e5 !default; -$accordionBoxShadowColor: #c7c7c7 !default; -$accordionHighlightColor: #d93c27 !default; -$accordionHeaderActiveColor: #e3e4e6 !default; -$accordionHeaderBorderColor: #bbbbbb !default; -$accordionItemActiveBgColor: #ffffff !default; -$accordionItemFontColor: #6e6e6e !default; -$accordionSubBorderColor: #c0c1c2 !default; -$accordionSubHeaderFontColor: #6e6e6e !default; - /* Help panel */ // theme diff --git a/openstack_dashboard/static/dashboard/scss/components/_accordion_nav.scss b/openstack_dashboard/static/dashboard/scss/components/_accordion_nav.scss deleted file mode 100644 index 70cf6906af..0000000000 --- a/openstack_dashboard/static/dashboard/scss/components/_accordion_nav.scss +++ /dev/null @@ -1,100 +0,0 @@ -@mixin sidebar_toggle_icon { - & > span { - transition: all .3s ease 0s; - @extend .fa-angle-down; - &:before { - font-size: 1em; - 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: $accordionBaseFontColor; - margin: 0px 0px; - dt, dd { - line-height: 18px; - h4 { - padding: .5em 0 .3em 0; - margin: 0 1.2em .5em 1.2em; - border-bottom: 3px solid $accordionSubBorderColor; - font-size: $font-size-base; - line-height: $line-height-base; - color: $accordionSubHeaderFontColor; - font-weight: bold; - text-rendering: optimizelegibility; - cursor: pointer; - @include sidebar_toggle_icon(); - transition: all .3s ease 0s; - &:hover{ - border-color: darken($accordionSubBorderColor, 10%) - } - } - ul { - list-style: none outside none; - margin: 0; - padding: 0; - } - li { - &:not(:first-child) a { - margin-top: .2em; - } - &:not(:last-child) a { - margin-bottom: .2em; - } - a { - color: $accordionItemFontColor; - padding: .7em 1.2em; - outline: none; - text-decoration: none; - display: block; - text-align: right; - transition: all .3s ease 0s; - &.active, &:hover { - color: $accordionHighlightColor; - } - &.active { - background: $accordionItemActiveBgColor; - border-top: 1px solid $accordionBorderColor; - border-left: 4px solid $accordionHighlightColor; - border-bottom: 1px solid $accordionBorderColor; - -webkit-box-shadow: -3px 2px 6px -3px $accordionBoxShadowColor; - box-shadow: -3px 3px 6px -3px $accordionBoxShadowColor; - } - } - } - } - dd { - padding: 0; - border-bottom: 1px solid $accordionHeaderBorderColor; - div { - &:first-child h4 { - margin-top: .5em; - } - &:last-child h4:not(.active) { - margin-bottom: 1em; - } - } - } - dt { - &:first-child { border-top: 1px solid $accordionHeaderBorderColor; } - border-bottom: 1px solid $accordionHeaderBorderColor; - padding: .5em 1.2em; - max-width: 231px; - cursor: pointer; - @include sidebar_toggle_icon(); - transition: all .3s ease 0s; - &.active { - background-color: $accordionHeaderActiveColor; - } - &:hover{ - background-color: darken($accordionHeaderActiveColor, 3%) - } - } -} diff --git a/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss b/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss new file mode 100644 index 0000000000..6521f1d6b8 --- /dev/null +++ b/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss @@ -0,0 +1,66 @@ +#sidebar { + margin-left: -$sidebar-width; + left: $sidebar-width; + width: $sidebar-width; + position: absolute; + z-index: 0; + + // Sets the arrow toggles for each dashboard list + [data-toggle="collapse"] { + .openstack-toggle.fa { + line-height: $line-height-computed; + width: $line-height-computed; + height: $line-height-computed; + text-align: center; + @include transition(transform 0.3s ease 0s); + @extend .fa-chevron-down; + } + + &.collapsed { + .openstack-toggle.fa { + @include rotate(270deg); + } + } + } + + // Styles for the Dashboard Names + .openstack-dashboard { + & > a { + border-radius: $border-radius-base $border-radius-base 0 0; + } + } + + // Styles for the Panel Names + .openstack-panel { + & > a { + text-align: right; + color: $text-color; + } + + &.active > a { + color: $brand-primary; + font-weight: bold; + } + } + + .panel { + border: none; + border-radius: 0; + @include box-shadow(none); + margin-bottom: 0; + } +} + +// Bootstrap 3 removed nav headers, lets add them back +.nav .nav-header > a > .nav-header-title { + font-size: $font-size-base; + font-weight: bold; + text-transform: uppercase; + text-align: center; + width: 100%; + display: inline-block; + + &:hover { + background-color: transparent; + } +} \ No newline at end of file diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss index 3c67febfb7..703fbe9860 100644 --- a/openstack_dashboard/static/dashboard/scss/horizon.scss +++ b/openstack_dashboard/static/dashboard/scss/horizon.scss @@ -15,7 +15,7 @@ // Dashboard Components @import "splash"; @import "components/resource_browser"; -@import "components/accordion_nav"; +@import "components/sidebar"; @import "components/inline_edit"; @import "components/charts"; @import "components/workflow"; @@ -55,13 +55,6 @@ } 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; } small { @@ -121,33 +114,6 @@ h2 { margin-top: 190px; } -.sidebar { - background-color: $sidebar-background-color; - 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 { - margin-left: 14px; - color: $headings-color; -} - -.sidebar .nav-tabs { - margin-top: -34px; -} - -.sidebar .nav-tabs li.active a { - background-color: $body-bg; -} - - - /* Tenant Dropdown */ diff --git a/openstack_dashboard/templates/horizon/_scripts.html b/openstack_dashboard/templates/horizon/_scripts.html index c65665d0d3..1ac8a485e7 100644 --- a/openstack_dashboard/templates/horizon/_scripts.html +++ b/openstack_dashboard/templates/horizon/_scripts.html @@ -28,7 +28,6 @@ - diff --git a/openstack_dashboard/themes/default/_variables.scss b/openstack_dashboard/themes/default/_variables.scss index cca9d0bc63..618e3383ce 100644 --- a/openstack_dashboard/themes/default/_variables.scss +++ b/openstack_dashboard/themes/default/_variables.scss @@ -1,2 +1,3 @@ @import "bootstrap/variables"; @import "horizon/variables"; +@import "/horizon/lib/font-awesome/scss/variables"; \ No newline at end of file diff --git a/openstack_dashboard/themes/default/bootstrap/_styles.scss b/openstack_dashboard/themes/default/bootstrap/_styles.scss index 34c08d821e..d9fa4c6ab9 100644 --- a/openstack_dashboard/themes/default/bootstrap/_styles.scss +++ b/openstack_dashboard/themes/default/bootstrap/_styles.scss @@ -1 +1,2 @@ +@import 'components/navs'; @import 'components/navbar'; \ No newline at end of file diff --git a/openstack_dashboard/themes/default/bootstrap/_variables.scss b/openstack_dashboard/themes/default/bootstrap/_variables.scss index a2376cf9b8..ba20b309ed 100644 --- a/openstack_dashboard/themes/default/bootstrap/_variables.scss +++ b/openstack_dashboard/themes/default/bootstrap/_variables.scss @@ -17,8 +17,8 @@ $bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("") $gray-darker: lighten(#000, 13.5%) !default; // #222 $gray-dark: lighten(#000, 20%) !default; // #333 -$gray: lighten(#000, 33.5%) !default; // #555 -$gray-light: #CCC !default; +$gray: #6e6e6e !default; +$gray-light: #BBB !default; $gray-lighter: lighten(#000, 93.5%) !default; // #eee $brand-primary: #428bca !default; @@ -405,8 +405,8 @@ $navbar-inverse-toggle-border-color: #333 !default; //## //=== Shared nav styles -$nav-link-padding: 10px 15px !default; -$nav-link-hover-bg: $gray-lighter !default; +$nav-link-padding: 0.5em 1.2em !default; +$nav-link-hover-bg: #dbdcdf !default; $nav-disabled-link-color: $gray-light !default; $nav-disabled-link-hover-color: $gray-light !default; @@ -426,9 +426,9 @@ $nav-tabs-justified-link-border-color: #ddd !default; $nav-tabs-justified-active-link-border-color: $body-bg !default; //== Pills -$nav-pills-border-radius: $border-radius-base !default; -$nav-pills-active-link-hover-bg: $component-active-bg !default; -$nav-pills-active-link-hover-color: $component-active-color !default; +$nav-pills-border-radius: 0 !default; +$nav-pills-active-link-hover-bg: #e3e4e6 !default; +$nav-pills-active-link-hover-color: $gray !default; //== Pagination diff --git a/openstack_dashboard/themes/default/bootstrap/components/_navs.scss b/openstack_dashboard/themes/default/bootstrap/components/_navs.scss new file mode 100644 index 0000000000..8b99aee9e6 --- /dev/null +++ b/openstack_dashboard/themes/default/bootstrap/components/_navs.scss @@ -0,0 +1,26 @@ +.nav-pills.nav-stacked { + a { + color: $gray; + } + + & > li { + & > a { + border-top: 1px solid $gray-light; + border-bottom: 1px solid $gray-light; + border-radius: 0; + font-weight: bold; + } + } + + & > li + li { + margin-top: 0; + + & > a { + border-top: none; + } + } + + & > li > .in { + border-bottom: 1px solid $gray-light; + } +} \ No newline at end of file diff --git a/openstack_dashboard/themes/default/horizon/_styles.scss b/openstack_dashboard/themes/default/horizon/_styles.scss index b5fcbf7d04..ffbb382856 100644 --- a/openstack_dashboard/themes/default/horizon/_styles.scss +++ b/openstack_dashboard/themes/default/horizon/_styles.scss @@ -1,3 +1,7 @@ +@import '/bootstrap/scss/bootstrap/mixins/_vendor-prefixes.scss'; + +@import 'components/sidebar'; + .navbar-brand { // The 114 is a legacy value to push the context-menu over diff --git a/openstack_dashboard/themes/default/horizon/_variables.scss b/openstack_dashboard/themes/default/horizon/_variables.scss index e69de29bb2..6e963c0321 100644 --- a/openstack_dashboard/themes/default/horizon/_variables.scss +++ b/openstack_dashboard/themes/default/horizon/_variables.scss @@ -0,0 +1,6 @@ +$sidebar-box-shadow-color: #c7c7c7; +$sidebar-box-shadow: -3px 2px 6px -2px $sidebar-box-shadow-color inset, -1px 0 0 0 $sidebar-box-shadow-color inset; +$sidebar-background-color: $table-bg-accent; +$sidebar-active-color: #d93c27; +$sidebar-active-indicator-width: $caret-width-base; +$sidebar-active-box-shadow: -3px 3px 6px -3px; diff --git a/openstack_dashboard/themes/default/horizon/components/_sidebar.scss b/openstack_dashboard/themes/default/horizon/components/_sidebar.scss new file mode 100644 index 0000000000..d15759f9ff --- /dev/null +++ b/openstack_dashboard/themes/default/horizon/components/_sidebar.scss @@ -0,0 +1,84 @@ +// Sidebar specific helper variables need to fallback to Bootstrap +// variables. This allows this specific _sidenav user experience +// to easily cascade to a different Bootstrap theme +$sidebar-active-color: $brand-primary !default; +$sidebar-box-shadow: -3px 2px 6px -2px $gray-light inset, -1px 0 0 0 $gray-light inset !default; + + +#sidebar { + background-color: $sidebar-background-color; + @include box-shadow($sidebar-box-shadow); + height: 100%; + + // Legacy padding at the top of nav ... we should remove this. + padding-top: $line-height-computed; + + .nav-header > a > .nav-header-title { + text-align: left; + text-transform: none; + padding: $padding-small-vertical 0; + border-bottom: $padding-base-vertical/2 solid $gray-light; + } + + .panel { + background-color: transparent; + } + + .openstack-dashboard { + & > a { + border-radius: 0; + } + } + + .openstack-panel { + & > a { + color: $gray; + padding: $padding-large-vertical $padding-large-horizontal; + } + + &.active > a { + font-weight: normal; + color: $sidebar-active-color; + background: $body-bg; + border-bottom: 1px solid $dropdown-divider-bg; + border-left: $sidebar-active-indicator-width solid $sidebar-active-color; + border-top: 1px solid $dropdown-divider-bg; + @include box-shadow($sidebar-active-box-shadow $sidebar-box-shadow-color); + } + } + + .openstack-panel > a, + .openstack-dashboard > a.collapsed, + .nav-header > a { + background-color: transparent; + } + + .openstack-dashboard > a:hover, + .openstack-dashboard > a:focus, + li > a { + background-color: $nav-pills-active-link-hover-bg; + } + + li > a { + @include transition(all 0.3s ease 0s); + outline: 0; + } + + // Sets the arrow toggles for each dashboard list + .openstack-dashboard [data-toggle="collapse"] { + + .openstack-toggle.fa { + font-size: $font-size-small; + + &::before { + content: $fa-var-angle-up; + } + } + + &.collapsed { + .openstack-toggle.fa { + @include rotate(180deg); + } + } + } +}