hippo-fw 0.9.5 → 0.9.6

data/client/hippo/react/Root.jsx

@@ -3,14 +3,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export default class Root extends React.Component {
-
     static childContextTypes = {
         viewport: PropTypes.object,
     }
 
     getChildContext() {
         return (
-            {viewport: this.props.viewport}
+            { viewport: this.props.viewport }
         );
     }
 

data/client/hippo/react/{DefaultComponentNotFound.jsx → component-not-found.jsx}

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { classify } from '../lib/util';
 
-export default class DefaultComponentNotFound extends React.Component {
-
+export default class ComponentNotFound extends React.PureComponent {
     static propTypes = {
         extension: PropTypes.shape({
             identifier: PropTypes.string,
@@ -19,5 +18,4 @@ export default class DefaultComponentNotFound extends React.Component {
             </div>
         );
     }
-
 }

data/client/hippo/screens/index.js

@@ -1,5 +1,5 @@
 import { observable, computed } from 'mobx';
-import { map, filter, intersection } from 'lodash';
+import { map, filter, compact, intersection } from 'lodash';
 import Group from './group';
 import Config from '../config';
 
@@ -14,7 +14,11 @@ const Screens = observable({
     },
 
     @computed get active() {
-        return map(Config.screen_ids, id => this.all.get(id));
+        return compact(map(Config.screen_ids, id => this.all.get(id)));
+    },
+
+    @computed get unGrouped() {
+        return filter(this.active, s => !s.group_id);
     },
 
     reset() {

data/client/hippo/screens/system-settings.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { observable, action, computed } from 'mobx';
+import { observable, action } from 'mobx';
 import { observer }   from 'mobx-react';
-import { map, compact, invoke, each } from 'lodash';
+import { map, compact, invoke } from 'lodash';
 import Heading from 'grommet/components/Heading';
 import Header from 'grommet/components/Header';
 import Button from 'grommet/components/Button';
@@ -12,7 +12,7 @@ import Screen from 'hippo/components/screen';
 import Asset  from 'hippo/components/asset';
 import Settings from 'hippo/models/system-setting';
 
-import {Row, Col} from 'react-flexbox-grid';
+import { Row, Col } from 'react-flexbox-grid';
 import ScreenInstance from 'hippo/screens/instance';
 import Extensions from '../extensions';
 import MailerConfig from './system-settings/mailer-config';
@@ -21,7 +21,6 @@ import './system-settings/system-settings.scss';
 
 @observer
 export default class SystemSettings extends React.PureComponent {
-
     @observable settings = new Settings();
     extensionPanelRefs = new Map();
 
@@ -56,10 +55,15 @@ export default class SystemSettings extends React.PureComponent {
     @action.bound
     onSave() {
         this.extensionPanelRefs.forEach(panel => invoke(panel, 'onSave'));
-        this.tenantSettings.onSave()
+        this.tenantSettings.onSave();
         this.settings.save();
     }
 
+    @action.bound
+    setTenantRef(ts) {
+        this.tenantSettings = ts;
+    }
+
     render() {
         return (
             <Screen {...this.props}>
@@ -72,7 +76,7 @@ export default class SystemSettings extends React.PureComponent {
                     />
                 </Header>
                 <Heading>{this.props.screen.definition.title}</Heading>
-                <TenantSettings ref={ts => this.tenantSettings = ts} />
+                <TenantSettings ref={this.setTenantRef} />
                 <Heading tag="h3">Images</Heading>
                 <Row>
                     <Col sm={4} xs={12}>

data/client/hippo/screens/system-settings/mailer-config.jsx

@@ -8,7 +8,6 @@ import { Form, Field, FormState, nonBlank, validEmail  } from 'hippo/components/
 
 @observer
 export default class MailerConfig extends React.PureComponent {
-
     formState = new FormState()
 
     @action.bound
@@ -40,5 +39,4 @@ export default class MailerConfig extends React.PureComponent {
             </div>
         );
     }
-
 }

data/client/hippo/screens/system-settings/tenant.jsx

@@ -1,14 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
-import { Row, Col } from 'react-flexbox-grid';
+import { Row } from 'react-flexbox-grid';
 import Heading from 'grommet/components/Heading';
 import Box from 'grommet/components/Box';
 import { Form, Field, FormState, nonBlank } from 'hippo/components/form';
 
 import Notification from 'grommet/components/Notification';
-import Extensions from '../../extensions';
 import Layer from 'grommet/components/Layer';
 import Paragraph from 'grommet/components/Paragraph';
 import Anchor from 'grommet/components/Anchor';
@@ -36,7 +34,6 @@ function TenantSlugChange({ oldSlug }) {
 
 @observer
 export default class TenantConfig extends React.PureComponent {
-
     formState = new FormState()
 
     @observable slugChangedFrom;

data/client/hippo/screens/user-management.jsx

@@ -15,7 +15,6 @@ import Editor from './user-management/edit-form';
 
 @observer
 export default class UserManagement extends React.PureComponent {
-
     @observable editingId;
 
     static contextTypes = {

data/client/hippo/screens/user-management/edit-form.jsx

@@ -11,11 +11,10 @@ import Warning from 'hippo/components/warning-notification';
 
 import Query from 'hippo/models/query';
 
-import { Form, Field, FormState, nonBlank, validEmail, booleanValue, field  } from 'hippo/components/form';
+import { Form, Field, FormState, nonBlank, validEmail, booleanValue } from 'hippo/components/form';
 
 @observer
 export default class EditForm extends React.PureComponent {
-
     static propTypes = {
         query:      PropTypes.instanceOf(Query).isRequired,
         rowIndex:   PropTypes.number.isRequired,

data/client/hippo/workspace/index.jsx

@@ -2,19 +2,18 @@ import React from 'react';
 
 import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { bindAll } from 'lodash';
+import cn from 'classnames';
 import {
     BrowserRouter as Router,
     Route,
     Switch,
 } from 'react-router-dom';
-
-
 import App from 'grommet/components/App';
 import Sidebar from 'react-sidebar';
 import 'hippo/config-data';
 import 'hippo/screen-definitions';
-
+import Button from 'grommet/components/Button';
+import CirclePlayIcon from 'grommet/components/icons/base/CirclePlay';
 import Extensions  from '../extensions';
 import Menu        from './menu';
 import Screen      from './screen';
@@ -36,13 +35,11 @@ function NoMatch({ match: { path } }) {
 
 @observer
 class Workspace extends React.Component {
-
     @observable sidebarOpen   = true;
     @observable sidebarDocked = false;
 
     constructor() {
         super();
-        bindAll(this, 'onMediaQueryChanged', 'onSetSidebarOpen');
         this.mql = window.matchMedia(`(min-width: ${DOCKED_WIDTH_BREAKPOINT}px)`);
         this.mql.addListener(this.onMediaQueryChanged);
         this.onMediaQueryChanged();
@@ -52,28 +49,40 @@ class Workspace extends React.Component {
         this.mql.removeListener(this.onMediaQueryChanged);
     }
 
-    @action
+    @action.bound
     onMediaQueryChanged() {
         this.sidebarDocked = this.mql.matches;
     }
 
-    @action
+    @action.bound
     onSetSidebarOpen(open) {
         this.sidebarOpen = open;
     }
+
+    @action.bound
+    toggleSidebarDocked() {
+        this.sidebarOpen = !this.sidebarOpen;
+    }
+
     render() {
         return (
-            <App
-                centered={false}
-            >
+            <App centered={false}>
                 <LoginDialog />
                 <Sidebar
                     styles={{ sidebar: { zIndex: 5 } }}
-                    sidebar={<Menu />}
+                    sidebar={<Menu onDockToggle={this.toggleSidebarDocked} />}
                     open={this.sidebarOpen}
                     docked={this.sidebarDocked}
                     onSetOpen={this.onSetSidebarOpen}
                 >
+
+                    <Button
+                        primary
+                        icon={<CirclePlayIcon />}
+                        onClick={this.toggleSidebarDocked}
+                        className={cn('sidebar-toggle', { 'is-open': this.sidebarOpen })}
+                    />
+
                     <Switch>
                         <Route name='screen' path="/:screenId/:identifier?" component={Screen} />
                         <Route component={NoMatch} />

data/client/hippo/workspace/menu-group.jsx

@@ -1,19 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { bindAll } from 'lodash';
 import { observer } from 'mobx-react';
 
 import Heading from 'grommet/components/Heading';
 import Header  from 'grommet/components/Header';
+import Menu    from 'grommet/components/Menu';
 
 import MenuOption from './menu-option';
-import Menu from 'grommet/components/Menu';
-import Icon   from '../components/icon';
+import Icon  from '../components/icon';
 
 @observer
-export default class Group extends React.Component {
-
+export default class Group extends React.PureComponent {
     static propTypes = {
         group: PropTypes.shape({
             active: PropTypes.bool.isRequired,
@@ -29,7 +26,7 @@ export default class Group extends React.Component {
                 <Header align="end" pad={{ horizontal: 'medium' }}>
                     <Heading tag="h4" strong>
                         {group.title}
-                        <Icon type={group.icon} />
+                        <Icon name={group.icon} />
                     </Heading>
                 </Header>
                 {group.screens.map(s => <MenuOption key={s.id} screen={s} />)}

data/client/hippo/workspace/menu-option.jsx

@@ -10,7 +10,6 @@ import Anchor from 'grommet/components/Anchor';
 
 @observer
 export default class MenuOption extends React.Component {
-
     static propTypes = {
         screen: PropTypes.shape({
             title:   PropTypes.string.isRequired,
@@ -33,9 +32,8 @@ export default class MenuOption extends React.Component {
         return (
             <Anchor path={`/${screen.id}/`} onClick={this.activateScreen}>
                 {screen.title}
-                <Icon type={screen.icon} />
+                <Icon name={screen.icon} />
             </Anchor>
         );
     }
 }
-//<div>{screen.title}</div>

data/client/hippo/workspace/menu.jsx

@@ -1,21 +1,22 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { action } from 'mobx';
+import { isEmpty, get } from 'lodash';
 import PropTypes from 'prop-types';
+import Box     from 'grommet/components/Box';
 import Sidebar from 'grommet/components/Sidebar';
 import Header  from 'grommet/components/Header';
 import Anchor  from 'grommet/components/Anchor';
 import Menu from 'grommet/components/Menu';
 import Group   from './menu-group';
 import Screens from '../screens';
-
-
+import MenuOption from './menu-option';
 import User from '../user';
+import Config from '../config';
+import Asset from '../models/asset';
 
 @observer
 class Logout extends React.PureComponent {
-
-
     static contextTypes = {
         router: PropTypes.object,
     }
@@ -32,19 +33,37 @@ class Logout extends React.PureComponent {
         if (!User.isLoggedIn) { return null; }
         return (
             <Menu direction="column" align="start" justify="between" primary>
-                <Header align="end" pad={{ horizontal: 'medium' }}>
-                </Header>
                 <Anchor label="Log Out" onClick={this.onLogoutClick}>
                     Log Out
                 </Anchor>
             </Menu>
         );
     }
-
 }
 
+
+const Logo = observer(() => {
+    if (!get(Config, 'logo.thumbnail')) {
+        if (!isEmpty(Config.product_name)) {
+            return <Box className="product-name">{Config.product_name}</Box>;
+        }
+        return null;
+    }
+    return (
+        <Box className="logo"><img src={Asset.urlForSize(Config.logo, 'thumbnail')} /></Box>
+    );
+});
+
 @observer
-export default class WorkspaceMenu extends React.Component {
+export default class WorkspaceMenu extends React.PureComponent {
+    renderUnGrouped() {
+        if (!User.isLoggedIn || isEmpty(Screens.unGrouped)) { return null; }
+        return (
+            <Menu direction="column" align="start" justify="between" primary>
+                {Screens.unGrouped.map(s => <MenuOption key={s.id} screen={s} />)}
+            </Menu>
+        );
+    }
 
     render() {
         return (
@@ -53,12 +72,11 @@ export default class WorkspaceMenu extends React.Component {
                 colorIndex="brand"
             >
                 <Header justify="between" size="large" pad={{ horizontal: 'medium' }}>
-                    Logo
+                    <Logo />
                 </Header>
                 {Screens.activeGroups.map(g => <Group key={g.id} group={g} />)}
-
+                {this.renderUnGrouped()}
                 <Logout />
-
             </Sidebar>
         );
     }

data/client/hippo/workspace/navbar.jsx

@@ -13,7 +13,6 @@ function Logo() {
 }
 
 export default class Navbar extends React.Component {
-
     static contextTypes = {
         uistate: PropTypes.object.isRequired,
     }
@@ -36,7 +35,7 @@ export default class Navbar extends React.Component {
                     <button className="screens-menu-toggle" onClick={this.switchMenu} type="button">
                         <span className="sr-only">
                                 Toggle navbar
-                            </span>
+                        </span>
                         <i className="icon" />
                     </button>
                 </div>

data/client/hippo/workspace/root-view.jsx

@@ -1,10 +1,13 @@
-import React from 'react';
+import React from 'react'; // eslint-disable-line no-unused-vars
 
 export default function RootView() {
     return (
         <div className="fancy-header">
             <h1>Welcome to the Hippo Framework</h1>
-            <p>This is the default root view.  You can change it by returning a different one from the rootView() method in the the extension.js file.</p>
+            <p>
+                This is the default root view.  You can change it by returning a
+                different one from the rootView() method in the the extension.js file.
+            </p>
         </div>
     );
 }

data/client/hippo/workspace/screen.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import Box from 'grommet/components/Box';
 import Screens from '../screens';
-import ScreenInstances from '../screens/instance';
+import { displaying } from '../screens/instance';
 
 const ScreenView = observer((props) => {
     const { screen: Screen, ...rest } = props;
@@ -15,7 +15,6 @@ ScreenView.displayName = 'ScreenView';
 
 @observer
 export default class Screen extends React.Component {
-
     static propTypes = {
         match: PropTypes.shape({
             params: PropTypes.shape({
@@ -41,7 +40,7 @@ export default class Screen extends React.Component {
                 align="stretch"
                 flex="grow"
             >
-                {ScreenInstances.displaying.map(s =>
+                {displaying.models.map(s =>
                     <ScreenView key={s.id} {...this.props.match.params} screen={s} />)}
             </Box>