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

Render more space efficient user nav when viewport is insufficient

pull/10616/head
Alex P 2017-11-13 22:25:15 -08:00
parent a47aff3fba
commit 74cf0f26c4
2 changed files with 134 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
ui/src/side_nav/components/UserNavBlock.js
View File

@ -27,6 +27,8 @@ class UserNavBlock extends Component {
const isSuperAdmin = role === SUPERADMIN_ROLE
const isSmallViewport = window.visualViewport.height < 850
return (
<div className="sidebar--item">
<div className="sidebar--square">
@ -35,62 +37,129 @@ class UserNavBlock extends Component {
? <span className="sidebar--icon sidebar--icon__superadmin icon crown2" />
: null}
</div>
<div className="sidebar-menu">
<div className="sidebar-menu--heading sidebar--no-hover">
{me.name}
</div>
<div className="sidebar-menu--section">Account</div>
{isSuperAdmin
? <div className="sidebar-menu--superadmin">
<div>
<span className="icon crown2" /> You are a SuperAdmin
</div>
{isSmallViewport
? <div className="sidebar-menu sidebar-menu--inverse">
{customLinks
? <div className="sidebar-menu--section">Custom Links</div>
: null}
{customLinks
? customLinks.map((link, i) =>
<a
key={i}
className="sidebar-menu--item"
href={link.url}
target="_blank"
>
{link.name}
</a>
)
: null}
<div className="sidebar-menu--section">Switch Organizations</div>
<FancyScrollbar
className="sidebar-menu--scrollbar"
autoHeight={true}
maxHeight={isSmallViewport ? 105 : 300}
autoHide={false}
>
{roles.map((r, i) => {
const isLinkCurrentOrg =
currentOrganization.id === r.organization
return (
<span
key={i}
className={classnames({
'sidebar-menu--item': true,
active: isLinkCurrentOrg,
})}
onClick={this.handleChangeCurrentOrganization(
r.organization
)}
>
{
organizations.find(o => o.id === r.organization).name
}{' '}
<strong>({r.name})</strong>
</span>
)
})}
</FancyScrollbar>
<div className="sidebar-menu--section">Account</div>
<a className="sidebar-menu--item" href={logoutLink}>
Logout
</a>
{isSuperAdmin
? <div className="sidebar-menu--superadmin">
<div>
<span className="icon crown2" /> You are a SuperAdmin
</div>
</div>
: null}
<div className="sidebar-menu--heading sidebar--no-hover">
{me.name}
</div>
: null}
<a className="sidebar-menu--item" href={logoutLink}>
Logout
</a>
<div className="sidebar-menu--section">Switch Organizations</div>
<FancyScrollbar
className="sidebar-menu--scrollbar"
autoHeight={true}
maxHeight={300}
autoHide={false}
>
{roles.map((r, i) => {
const isLinkCurrentOrg = currentOrganization.id === r.organization
return (
<span
key={i}
className={classnames({
'sidebar-menu--item': true,
active: isLinkCurrentOrg,
})}
onClick={this.handleChangeCurrentOrganization(r.organization)}
>
{organizations.find(o => o.id === r.organization).name}{' '}
<strong>({r.name})</strong>
</span>
)
})}
</FancyScrollbar>
{customLinks
? <div className="sidebar-menu--section">Custom Links</div>
: null}
{customLinks
? customLinks.map((link, i) =>
<a
key={i}
className="sidebar-menu--item"
href={link.url}
target="_blank"
>
{link.name}
</a>
)
: null}
<div className="sidebar-menu--triangle" />
</div>
<div className="sidebar-menu--triangle" />
</div>
: <div className="sidebar-menu">
<div className="sidebar-menu--heading sidebar--no-hover">
{me.name}
</div>
<div className="sidebar-menu--section">Account</div>
{isSuperAdmin
? <div className="sidebar-menu--superadmin">
<div>
<span className="icon crown2" /> You are a SuperAdmin
</div>
</div>
: null}
<a className="sidebar-menu--item" href={logoutLink}>
Logout
</a>
<div className="sidebar-menu--section">Switch Organizations</div>
<FancyScrollbar
className="sidebar-menu--scrollbar"
autoHeight={true}
maxHeight={isSmallViewport ? 100 : 300}
autoHide={false}
>
{roles.map((r, i) => {
const isLinkCurrentOrg =
currentOrganization.id === r.organization
return (
<span
key={i}
className={classnames({
'sidebar-menu--item': true,
active: isLinkCurrentOrg,
})}
onClick={this.handleChangeCurrentOrganization(
r.organization
)}
>
{
organizations.find(o => o.id === r.organization).name
}{' '}
<strong>({r.name})</strong>
</span>
)
})}
</FancyScrollbar>
{customLinks
? <div className="sidebar-menu--section">Custom Links</div>
: null}
{customLinks
? customLinks.map((link, i) =>
<a
key={i}
className="sidebar-menu--item"
href={link.url}
target="_blank"
>
{link.name}
</a>
)
: null}
<div className="sidebar-menu--triangle" />
</div>}
</div>
)
}

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

@ -140,6 +140,11 @@ $sidebar-menu--gutter: 18px;
transition: opacity 0.25s ease;
display: none;
flex-direction: column;
&.sidebar-menu--inverse {
top: initial;
bottom: 0;
}
}
.sidebar-menu--heading,
.sidebar-menu--item {
@ -229,6 +234,11 @@ $sidebar-menu--gutter: 18px;
height: 2px;
@include gradient-h($c-laser,$c-potassium);
}
&:first-child:after {
display: none;
border-top-right-radius: $radius;
}
}
// SuperAdminIndicator