Merge pull request #51 from Unleash/github-link-into-menu-drawer

github link into menu + username tooltip + visual tweaks

frontend/src/component/app.jsx

@@ -4,7 +4,8 @@ import { Layout, Drawer, Header, Navigation, Content,
     Grid, Cell, Icon,
 } from 'react-mdl';
 import { Link } from 'react-router';
-import style from './styles.scss';
+import styles from './styles.scss';
+import { styles as commonStyles } from './common';
 import ErrorContainer from './error/error-container';
 
 import UserContainer from './user/user-container';
@@ -100,30 +101,49 @@ export default class App extends Component {
                 return [0, 0];
             }
         };
-        const createListItem = (path, caption, icon) =>
+        const createListItem = (path, caption, icon, isDrawerNavigation = false) => {
-            <Link
+            const linkColor = isDrawerNavigation &&
-                to={path}
+                this.context.router.isActive(path) ? 'mdl-color-text--black' : 'mdl-color-text--grey-900';
-                className={this.context.router.isActive(path) ? style.active : ''}>
+            const iconColor = isDrawerNavigation &&
-                {icon && <Icon name={icon} />} {caption}
+                this.context.router.isActive(path) ? 'mdl-color-text--black' : 'mdl-color-text--grey-600';
-            </Link>;
+            return (
+                <Link
+                    to={path}
+                    className={isDrawerNavigation && [styles.navigationLink, linkColor].join(' ')}>
+                    {icon && <Icon name={icon} className={isDrawerNavigation && [styles.navigationIcon, iconColor].join(' ')}/>}{caption}
+                </Link>
+            );
+        };
 
         return (
-            <div style={{}}>
+            <div>
                 <UserContainer />
                 <Layout fixedHeader>
                     <Header title={this.getTitleWithLinks()}>
                         <Navigation>
-                            <a href="https://github.com/Unleash" target="_blank">Github</a>
                             <ShowUserContainer />
                         </Navigation>
                     </Header>
-                    <Drawer title="Unleash Admin">
+                    <Drawer className="mdl-color--white">
-                        <Navigation>
+                        <span className={[styles.title, 'mdl-layout-title'].join(' ')}>Unleash</span>
-                            {createListItem('/features', 'Feature toggles', 'list')}
+                        <hr className={commonStyles.divider}/>
-                            {createListItem('/strategies', 'Strategies', 'extension')}
+                        <Navigation className={styles.navigation}>
-                            {createListItem('/history', 'Event history', 'history')}
+                            {createListItem('/features', 'Feature toggles', 'list', true)}
-                            {createListItem('/archive', 'Archived toggles', 'archive')}
+                            {createListItem('/strategies', 'Strategies', 'extension', true)}
-                            {createListItem('/applications', 'Applications', 'apps')}
+                            {createListItem('/history', 'Event history', 'history', true)}
+                            {createListItem('/archive', 'Archived toggles', 'archive', true)}
+                            {createListItem('/applications', 'Applications', 'apps', true)}
+                        </Navigation>
+                        <hr className={commonStyles.divider}/>
+                        <Navigation className={styles.navigation}>
+                            <a href="https://github.com/Unleash" target="_blank" className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}>
+                                <i className={[
+                                    'material-icons',
+                                    styles.navigationIcon,
+                                    styles.githubIcon,
+                                    'mdl-color-text--grey-600',
+                                ].join(' ')}/>GitHub
+                            </a>
                         </Navigation>
                     </Drawer>
                     <ScrollContainer scrollKey="container" shouldUpdateScroll={shouldUpdateScroll}>

frontend/src/component/common/common.scss

@@ -5,7 +5,8 @@
 }
 
 .divider {
-    border-color: #e1e1e1;
+    margin: 0;
+    border-color: rgba(0,0,0,.12);
 }
 
 @media (max-width: 960px) {

frontend/src/component/feature/metric-component.jsx

@@ -16,7 +16,7 @@ const StrategyChipItem = ({ strategy }) => (
 
 // TODO what about "missing" strategies here?
 const StrategiesList = ({ strategies }) => (
-    <div style={{ verticalAlign: 'middle' }}>With {strategies.length > 1 ? 'strategies' : 'strategy'} {
+    <div style={{ verticalAlign: 'middle', paddingTop: '14px' }}>With {strategies.length > 1 ? 'strategies' : 'strategy'} {
         strategies.map((strategy, i) => <StrategyChipItem key={i}  strategy={strategy} />)
     }</div>
 );

frontend/src/component/styles.scss

@@ -1,17 +1,31 @@
-.container {
+.title {
-    position: absolute;
+    padding-left: 24px !important;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: auto;
-    overflow-y: auto;
 }
-
+@media screen and (max-width: 1024px) {
-.navigation {
+    .title {
-    .active {
+        padding-left: 16px !important;
-        background-color: #EEE;
     }
 }
 
+.navigation {
+    padding: 8px 0 !important;
+}
+
+.navigationLink {
+    padding: 12px 24px !important;
+}
+@media screen and (max-width: 1024px) {
+    .navigationLink {
+        padding: 12px 16px !important;
+    }
+}
+
+.navigationIcon {
+    margin-right: 32px;
+}
+
+.githubIcon {
+    width: 24px;
+    height: 24px;
+    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoyNHB4O2hlaWdodDoyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkMyLDE2LjQyIDQuODcsMjAuMTcgOC44NCwyMS41QzkuMzQsMjEuNTggOS41LDIxLjI3IDkuNSwyMUM5LjUsMjAuNzcgOS41LDIwLjE0IDkuNSwxOS4zMUM2LjczLDE5LjkxIDYuMTQsMTcuOTcgNi4xNCwxNy45N0M1LjY4LDE2LjgxIDUuMDMsMTYuNSA1LjAzLDE2LjVDNC4xMiwxNS44OCA1LjEsMTUuOSA1LjEsMTUuOUM2LjEsMTUuOTcgNi42MywxNi45MyA2LjYzLDE2LjkzQzcuNSwxOC40NSA4Ljk3LDE4IDkuNTQsMTcuNzZDOS42MywxNy4xMSA5Ljg5LDE2LjY3IDEwLjE3LDE2LjQyQzcuOTUsMTYuMTcgNS42MiwxNS4zMSA1LjYyLDExLjVDNS42MiwxMC4zOSA2LDkuNSA2LjY1LDguNzlDNi41NSw4LjU0IDYuMiw3LjUgNi43NSw2LjE1QzYuNzUsNi4xNSA3LjU5LDUuODggOS41LDcuMTdDMTAuMjksNi45NSAxMS4xNSw2Ljg0IDEyLDYuODRDMTIuODUsNi44NCAxMy43MSw2Ljk1IDE0LjUsNy4xN0MxNi40MSw1Ljg4IDE3LjI1LDYuMTUgMTcuMjUsNi4xNUMxNy44LDcuNSAxNy40NSw4LjU0IDE3LjM1LDguNzlDMTgsOS41IDE4LjM4LDEwLjM5IDE4LjM4LDExLjVDMTguMzgsMTUuMzIgMTYuMDQsMTYuMTYgMTMuODEsMTYuNDFDMTQuMTcsMTYuNzIgMTQuNSwxNy4zMyAxNC41LDE4LjI2QzE0LjUsMTkuNiAxNC41LDIwLjY4IDE0LjUsMjFDMTQuNSwyMS4yNyAxNC42NiwyMS41OSAxNS4xNywyMS41QzE5LjE0LDIwLjE2IDIyLDE2LjQyIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJaIiAvPgo8L3N2Zz4=);
+}

frontend/src/component/user/show-user-component.jsx

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { Icon, Tooltip } from 'react-mdl';
 
 export default class ShowUserComponent extends React.Component {
     static propTypes () {
@@ -15,9 +16,10 @@ export default class ShowUserComponent extends React.Component {
 
     render () {
         return (
-            <a className="mdl-navigation__link" href="#edit-user" onClick={this.openEdit} style={{}}>
+            <a className="mdl-navigation__link" href="#edit-user" onClick={this.openEdit}>
-                Username:&nbsp;
+                <Tooltip label={this.props.user.userName || 'Unknown'} large>
-                <strong>{this.props.user.userName || 'Unknown'}</strong>
+                    <Icon name="account_circle"/>
+                </Tooltip>
             </a>
         );
     }