Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1944 from influxdata/sidebar-polish 

Sidebar Polish
pull/10616/head
Alex Paxton 2017-08-30 10:53:36 -07:00 committed by GitHub
parent 04769c2960 e3213d219a
commit aaf805fd15
4 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -12,6 +12,8 @@
1. [#1933](https://github.com/influxdata/chronograf/pull/1933): Use line-stacked graph type for memory information - thank you, @Joxit!
1. [#1940](https://github.com/influxdata/chronograf/pull/1940): Improve cell sizes in Admin Database tables
1. [#1942](https://github.com/influxdata/chronograf/pull/1942): Polish appearance of optional alert parameters in Kapacitor rule builder
1. [#1944](https://github.com/influxdata/chronograf/pull/1944): Add active state for Status page navbar icon
1. [#1944](https://github.com/influxdata/chronograf/pull/1944): Improve UX of navigation to a sub-nav item in the navbar
## v1.3.7.0 [2017-08-23]
### Bug Fixes

1
ui/src/side_nav/components/NavItems.js
View File

@ -86,6 +86,7 @@ const NavBlock = React.createClass({
{this.renderSquare()}
<div className="sidebar-menu">
{children}
<div className="sidebar-menu--triangle" />
</div>
</div>
)

6
ui/src/side_nav/containers/SideNav.js
View File

@ -69,10 +69,14 @@ const SideNav = React.createClass({
const dataExplorerLink = `${sourcePrefix}/chronograf/data-explorer`
const isUsingAuth = !!logoutLink
const isDefaultPage = location.split('/').includes(DEFAULT_HOME_PAGE)
return isHidden
? null
: <NavBar location={location}>
<div className="sidebar--item">
<div
className={isDefaultPage ? 'sidebar--item active' : 'sidebar--item'}
>
<Link
to={`${sourcePrefix}/${DEFAULT_HOME_PAGE}`}
className="sidebar--square sidebar--logo"

21
ui/src/style/layout/sidebar.scss
View File

@ -93,6 +93,7 @@ $sidebar-menu--gutter: 18px;
*/
.sidebar--item:hover {
cursor: pointer;
z-index: 5;
.sidebar--square {background-color: $sidebar--item-bg-hover;}
.sidebar--icon {color: $sidebar--icon-hover;}
@ -115,6 +116,16 @@ $sidebar-menu--gutter: 18px;
background-color: $sidebar--logo-bg-hover;
.sidebar--icon {color: $sidebar--logo-color-hover;}
}
.sidebar--item.active .sidebar--square.sidebar--logo {
background-color: $sidebar--logo-bg-hover;
.sidebar--icon {
color: $sidebar--logo-color-hover;
text-shadow:
0 0 9px $c-hydrogen,
0 0 15px $c-neutrino,
0 0 20px $c-yeti;
}
}
/*
Sidebar Sub Menus
@ -177,3 +188,13 @@ $sidebar-menu--gutter: 18px;
font-weight: 400;
padding: 0px $sidebar-menu--gutter;
}
// Invisible triangle for easier mouse movement when navigating to sub items
.sidebar-menu--item + .sidebar-menu--triangle {
position: absolute;
width: 40px;
height: 40px;
z-index: -1;
top: $sidebar--width;
left: 0px;
transform: translate(-50%,-50%) rotate(45deg);
}