hippo-fw 0.9.1

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import { action } from 'mobx';
+import { observer } from 'mobx-react';
+import Icon from 'hippo/components/icon';
+
+import Anchor from 'grommet/components/Anchor';
+
+@observer
+export default class MenuOption extends React.Component {
+
+    static propTypes = {
+        screen: PropTypes.shape({
+            title:   PropTypes.string.isRequired,
+            icon:    PropTypes.string.isRequired,
+            display: PropTypes.func.isRequired,
+        }).isRequired,
+    }
+
+    static contextTypes = {
+        viewport: PropTypes.object,
+    }
+
+    @action.bound
+    activateScreen() {
+        this.props.screen.display();
+    }
+
+    render() {
+        const { screen } = this.props;
+        return (
+            <Anchor path={`/${screen.id}/`} onClick={this.activateScreen}>
+                {screen.title}
+                <Icon type={screen.icon} />
+            </Anchor>
+        );
+    }
+}
+//<div>{screen.title}</div>

data/client/hippo/workspace/menu.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react';
+import { action } from 'mobx';
+import PropTypes from 'prop-types';
+import Sidebar from 'grommet/components/Sidebar';
+import Heading from 'grommet/components/Heading';
+import Footer  from 'grommet/components/Footer';
+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 Icon from '../components/icon';
+
+import User from '../user';
+
+//const On
+
+@observer
+class Logout extends React.PureComponent {
+
+
+    static contextTypes = {
+        router: PropTypes.object,
+    }
+
+    @action.bound
+    onLogoutClick(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        User.logout();
+        const { router } = this.context;
+        router.push('/');
+    }
+
+    render() {
+        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>
+        );
+    }
+
+}
+
+@observer
+export default class WorkspaceMenu extends React.Component {
+
+    render() {
+        return (
+            <Sidebar
+                full size="small" separator="right"
+                colorIndex="brand"
+            >
+                <Header justify="between" size="large" pad={{ horizontal: 'medium' }}>
+                    Logo
+                </Header>
+                {Screens.activeGroups.map(g => <Group key={g.id} group={g} />)}
+
+                <Logout />
+
+            </Sidebar>
+        );
+    }
+}

data/client/hippo/workspace/navbar.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get, bindAll } from 'lodash';
+
+import Config from '../config';
+import Extensions from '../extensions';
+
+function Logo() {
+    const url = get(Config, 'system_settings.logo.thumbnail_url');
+    const title = get(Extensions, 'controlling.title');
+    return url ?
+        <img alt={`${title} Logo`} src={`//${Config.api_host}${url}`} /> : <span>{title}</span>;
+}
+
+export default class Navbar extends React.Component {
+
+    static contextTypes = {
+        uistate: PropTypes.object.isRequired,
+    }
+
+    constructor(props) {
+        super(props);
+        bindAll(this, 'switchMenu');
+    }
+
+    switchMenu(ev) {
+        if (ev) { ev.preventDefault(); }
+        this.context.uistate.nextSidebarState();
+    }
+
+    render() {
+        return (
+            <div className="header-top">
+                <div className="navbar-header">
+                    <div className="navbar-brand logo"><Logo /></div>
+                    <button className="screens-menu-toggle" onClick={this.switchMenu} type="button">
+                        <span className="sr-only">
+                                Toggle navbar
+                            </span>
+                        <i className="icon" />
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}

data/client/hippo/workspace/screen.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { observer } from 'mobx-react';
+import { Grid } from 'react-flexbox-grid';
+import Box from 'grommet/components/Box';
+import Screens from '../screens';
+import ScreenInstances from '../screens/instance';
+
+const ScreenView = observer((props) => {
+    const { screen: Screen, ...rest } = props;
+    return (
+        <Screen.component {...rest} screen={Screen} />
+    );
+});
+ScreenView.displayName = 'ScreenView';
+
+@observer
+export default class Screen extends React.Component {
+
+    static propTypes = {
+        params: PropTypes.shape({
+            screenId: PropTypes.string,
+        }).isRequired,
+    }
+
+    componentDidMount() {
+        const { screenId } = this.props.params;
+        if (screenId) {
+            const definition = Screens.all.get(screenId);
+            if (definition) { definition.display(); }
+        }
+    }
+
+    render() {
+        return (
+            <Box
+                full
+                className="screens-wrapper"
+                justify="start"
+                align="stretch"
+                flex="grow"
+            >
+                {ScreenInstances.displaying.map(s =>
+                    <ScreenView key={s.id} {...this.props.params} screen={s} />)}
+            </Box>
+
+        );
+    }
+}

data/client/hippo/workspace/styles.scss

@@ -0,0 +1,61 @@
+@import '../styles/global';
+@import '~grommet/scss/aruba/index';
+
+html {
+  font-family: $brand-font-family;
+}
+
+a.anchor {
+  display: block;
+}
+
+.request-access fieldset:first-of-type {
+  padding-top: 0;
+}
+
+pre {
+  width: 100%;
+  max-width: 100%;
+}
+
+.generic-branding {
+  display: none;
+}
+
+.content-pane .grommetux-tabs {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.screen {
+    flex: 1;
+    flex-direction: column;
+    padding: 0.5rem;
+    display: none;
+    &.is-active {
+        display: flex;
+    }
+
+}
+
+/* $workspace-header-height: 50px; */
+
+/* @import "../styles/bootstrap"; */
+/* @import "../styles/fonts"; */
+/* @import "../styles/global"; */
+
+/* // extensions are rooted at .hippo */
+/* .hippo { */
+/*   padding: 0px; */
+/*   margin: 0px; */
+/*   background-color: $body-bg; */
+/*   position: relative; */
+/*   min-height: 10px; // needs height for resizing sensor to function */
+/* } */
+
+/* @import "styles/layout"; */
+/* @import "styles/header"; */
+/* @import "styles/tabs"; */
+/* @import "styles/screens"; */
+/* @import "styles/forms"; */
+/* @import "styles/keybindings"; */

data/client/hippo/workspace/styles/forms.scss

@@ -0,0 +1,4 @@
+.section-header {
+    @extend .page-header;
+    margin: ($line-height-computed/2) 0;
+}

data/client/hippo/workspace/styles/header.scss

@@ -0,0 +1,69 @@
+.header-top {
+    @extend .navbar;
+    @extend .navbar-inverse;
+    @extend .navbar-fixed-top;
+    @include hidden-print;
+    z-index: 20;
+    height: $workspace-header-height;
+    border-radius: 0;
+    margin: 0;
+    border: 0;
+    position:relative;
+
+    .navbar-header {
+        position: relative;
+        min-width: 203px;
+        width: 100%;
+        height: 50px;
+        margin-left: 0;
+    }
+
+    .logo {
+        display: inline-block;
+        height: 48px;
+        width: 150px;
+        margin: 2px;
+        color: rgb(205, 208, 212);
+        font-size: 30px;
+        text-shadow: rgb(143, 112, 112) 2px 2px 4px;
+        padding: 0;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+
+    }
+
+    .navbar-toggle, .screens-menu-toggle {
+        color: #fff;
+        display: block;
+        float: left;
+        color: #fff;
+        border: 0;
+        padding: 6px 7px 7px;
+        line-height: 1;
+        background-color: rgba(0, 0, 0, 0.2);
+        margin: 12px 0 12px 0px;
+        border-radius: 0;
+    }
+
+    .nav-tabs {
+        li {
+            i {
+                position: absolute;
+                left: 2px;
+                top: 2px;
+                font-size: 12px;
+                color: darken(#333333, 10%);
+            }
+            &.active i {
+                color: lightgrey;
+            }
+        }
+    }
+
+}

data/client/hippo/workspace/styles/keybindings.scss

@@ -0,0 +1,6 @@
+
+.highlighted {
+  animation-duration: 2s;
+  outline: 3px solid #c00;
+  outline-offset: -3px;
+}

data/client/hippo/workspace/styles/layout.scss

@@ -0,0 +1,230 @@
+.layout {
+    height: 100%;
+    .header-top, .screens-menu {
+        position: fixed;
+    }
+}
+
+.page-container {
+    height: calc(100% - #{$workspace-header-height});
+    @media print { height: 100%; }
+
+    .screens-menu {
+        width: 240px;
+        z-index: 20;
+        left: 0;
+        top: 50px;
+        bottom: 0;
+    }
+}
+
+.page-content {
+    @extend .container-fluid;
+    overflow-x: hidden;
+    position: relative;
+    top: 50px;
+    @media print { top: 0; }
+    transition: all 0.15s ease-in-out 0s;
+    margin-left: 240px;
+
+    padding: 0 0 20px 0;
+    height: 100%;
+
+    @media print {
+        margin-left: 0;
+        height: initial;
+    }
+
+    .screen {
+        height: 100%;
+        display: none;
+        > div { min-height: 100%; }
+        &.active {
+            display: block
+        }
+    }
+}
+
+.screens-menu {
+    background-color: $navbar-inverse-bg;
+    @include hidden-print;
+    .navigation {
+        border-bottom: 1px solid $navbar-inverse-border;
+        list-style: none outside none;
+        margin: 0 0 10px;
+        padding: 0;
+        a {
+            color: $navbar-inverse-link-color;
+        }
+        li {
+            position: relative;
+            > a {
+                text-decoration:  none;
+                border-left: 3px solid transparent;
+                color: $navbar-inverse-link-color;
+                display: block;
+                padding: 13px 40px 14px 14px;
+                > i {
+                    opacity: 0.5;
+                    position: absolute;
+                    right: 14px;
+                    top: 13px;
+                }
+            }
+        }
+        > li {
+            border-top: 1px solid #49565d;
+            position: relative;
+            font-size: 15px;
+            &.active {
+                &:focus > a,
+                &:hover > a {
+                    color: $navbar-inverse-link-active-color;
+                    background-color: $navbar-inverse-link-active-bg;
+                }
+                > a {
+                    color: $navbar-inverse-link-active-color;
+                    background-color: $navbar-inverse-link-active-bg;
+                    span {
+                        &:after {
+                            font-family: $hippo-icon-font;
+                            color: #339900;
+                            content: "\00a0\00a0\f067";
+                        }
+                    }
+                }
+            }
+            &:hover > a {
+                border-left: 3px solid $navbar-inverse-link-active-bg;
+                color: $navbar-inverse-link-hover-color;
+                background-color: $navbar-default-link-hover-color;
+            }
+            ul {
+                background-color: lighten($navbar-inverse-bg,20%);
+                display: none;
+                font-size: 13px;
+                list-style: none outside none;
+                margin: 0;
+                padding: 0;
+                > li {
+                    border-top: 1px solid #35454b;
+                    &:first-child {
+                        border-top: 0 none;
+                    }
+                    > a {
+                        color: #fff;
+                        display: block;
+                        padding: 13px 14px 14px 24px;
+                        padding-left: 30px;
+
+                        &:hover {
+                            background: none repeat scroll 0 0 #27353a;
+                            text-decoration:  none;
+                        }
+                    }
+                }
+            }
+        }
+        .logout>a {
+            border-bottom: 2px solid #49565d;
+            i {
+                font-size: 30px;
+                top: 6px;
+            }
+        }
+    }
+}
+
+.menu-hidden {
+    .page-content {
+        margin-left: 0px;
+    }
+    .screens-menu {
+        display: none;
+    }
+}
+
+.menu-wide {
+    .screens-menu {
+        overflow-x: visible;
+        overflow-y: auto;
+        width: 240px;
+    }
+    .navigation > li.active {
+        ul {
+            display: block;
+        }
+    }
+}
+
+.menu-narrow {
+    .screens-menu {
+        background-color: $navbar-inverse-bg;
+        width: 60px;
+    }
+    .navigation > li {
+        > a {
+            > {
+                span {
+                    display: none;
+                }
+                i {
+                    display: block;
+                    position: static;
+                }
+            }
+            padding: 17px 3px 18px 0;
+            text-align: center;
+            width: 100%;
+        }
+
+        ul {
+            list-style: none outside none;
+            margin: 0;
+            padding: 0;
+        }
+        > ul {
+            border-left: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 0 2px 2px 0;
+            display: none;
+            left: 100%;
+            margin-left: -1px;
+            position: absolute;
+            top: 0;
+            width: 220px;
+        }
+        > ul > li {
+            &:first-child {
+                border-top: 0 none;
+                > a {
+                    border-radius: 2px 2px 0 0;
+                }
+            }
+            &:last-child > a {
+                border-radius: 0 0 2px 2px;
+            }
+        }
+        &:hover > ul {
+            display: block;
+        }
+        &.expand > ul {
+            display: block;
+        }
+    }
+
+    .page-content {
+        margin-left: 60px;
+        @media print { margin-left: 0; }
+    }
+}
+
+
+.popover_menu {
+    .page-content {
+        margin-left: 0px;
+    }
+    .screens-menu {
+
+    }
+
+}