hippo-fw 0.9.1

data/client/hippo/components/grid/config.json

@@ -0,0 +1,3 @@
+{
+
+}

data/client/hippo/components/grid/editors.scss

@@ -0,0 +1,78 @@
+// Only to be included from grid/styles
+
+$editor-background: #e6e6e6;
+$editor-border-color: #a8a8a8;
+$editor-border: 1px solid $editor-border-color;
+
+.toolbar {
+    .pull-right { margin-right: 10px; }
+}
+
+.editor {
+
+    .controls {
+        text-align: center;
+        position: relative;
+        overflow: visible;
+        .buttons {
+            display: inline-block;
+            margin: 0 auto;
+            //display: flex;
+            //justify-content: space-between;
+        }
+    }
+    // common styles shared between row, popover and other editors
+    .fields {
+        display: flex;
+
+        .field {
+            box-sizing: border-box;
+            margin: 3px;
+            flex: 1;
+            justify-content: center;
+            display: flex;
+            flex-direction: column;
+            > input {
+                width: 100%;
+                height: 35px;
+                border-radius: 5px;
+            }
+            &.center { justify-content: center;   }
+            &.right  { justify-content: flex-end; }
+        }
+        input {
+            padding: 0 5px;
+        }
+        input[type=checkbox] {
+            width: inherit;
+        }
+    }
+
+    //Popover editor
+    .popover {
+        min-width: 250px;
+        .fields {
+            flex-direction: column;
+        }
+        label {
+            display: block;
+            font-size: 85%;
+        }
+        input {
+            width: 100%;
+        }
+        .controls {
+            border-top: 1px solid darken($editor-background, 15%);
+            padding-top: 8px;
+            margin-top: 8px;
+            .buttons {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                flex: 1;
+            }
+        }
+    }
+}
+
+@import "./row-editor";

data/client/hippo/components/grid/index.js

@@ -0,0 +1,2 @@
+//= require ./Grid
+//= require_tree .

data/client/hippo/components/grid/row-editor.scss

@@ -0,0 +1,74 @@
+// The row editor
+.editor.row {
+    position: absolute;
+    width: 100%;
+    right: 25px;
+    left: 5px;
+    z-index:11;
+    min-height: 10px;
+
+    pointer-events: none;
+    .editing-body { pointer-events: none; }
+    .fields   { pointer-events: all;  }
+    .controls { pointer-events: none; }
+    .buttons  { pointer-events: all;  }
+
+    label { display: none; }
+
+    .fields {
+        flex-direction: row;
+        background: $editor-background;
+        .value {
+            width: 100%;
+            height: 35px;
+            border-radius: 5px;
+            flex: 1;
+            .rw-input { height: 35px; }
+        }
+        .field {
+            &.center input { text-align: center; }
+            &.right  input { text-align: right;  }
+        }
+        .hippo-field, .form-group {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            margin: 0;
+        }
+    }
+    .controls .buttons {
+        background: $editor-background;
+        padding: 2px 8px 8px 8px;
+        position: relative;
+        border-bottom-left-radius: 7px;
+        border-bottom-right-radius: 7px;
+
+        button {
+            margin-left: 20px;
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+        // http://css-tricks.com/better-tabs-with-round-out-borders/
+        &:before,
+        &:after {
+            position: absolute;
+            top: -1px;
+            width: 7px;
+            height: 6px;
+            content: " ";
+        }
+        &:before {
+            left: -7px;
+            border-top-right-radius: 6px;
+            border-width: 1px 1px 0px 0px;
+            box-shadow: 3px 0px 0px $editor-background;
+        }
+        &:after {
+            right: -7px;
+            border-top-left-radius: 6px;
+            border-width: 1px 0px 0px 1px;
+            box-shadow: -3px 0px 0px $editor-background;
+        }
+    }
+}

data/client/hippo/components/grid/styles.scss

@@ -0,0 +1,118 @@
+.grid-component {
+
+    min-height: 250px;
+    width: 100%;
+    border: 1px solid $table-border-color;
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    // styles shared between header and row
+    .header, .r {
+        display: flex;
+        flex-direction: row;
+        min-height: 40px;
+        display: flex;
+        flex-direction: row;
+        page-break-inside: avoid;
+        .c {
+            padding: $table-cell-padding;
+            line-height: $line-height-base;
+            display: flex;
+            flex-direction: row;
+            &.center { justify-content: center;   }
+            &.right  { justify-content: flex-end; }
+
+        }
+        &:first-child {
+            border-top: 0;
+        }
+    }
+
+    .header {
+        min-height: 40px;
+        .c {
+            border: 1px solid $table-border-color;
+            align-items: flex-end;
+            display: inline-block;
+            cursor: pointer;
+
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            &.sort {
+                &:after {
+                    content: $fa-var-sort;
+                    font-family: FontAwesome;
+                    position: relative;
+                    right: -5px;
+                    color: lightgray;
+                }
+                &.center {
+                    position: relative;
+                    &:after {
+                        right: 5px;
+                        position: absolute;
+                    }
+                }
+
+                &:not(.asc):not(.desc) {
+                    &:after {
+                        @include hidden-print;
+                    }
+                }
+                &.asc:after {
+                    color: gray;
+                    content: $fa-var-sort-asc;
+                }
+                &.desc:after {
+                    color: gray;
+                    content: $fa-var-sort-desc;
+                }
+            }
+        }
+    }
+    .r {
+        margin-right: 10px;
+        page-break-inside: avoid;
+        break-inside: avoid-page;
+        margin-left: 5px;
+    }
+    .grid-body {
+        border-top: 1px solid $table-border-color;
+        overflow: auto;
+        position: relative; // for absolutely positioned row editor
+        flex-grow: 1;
+        height: 1px; // panel needs height to force scroll
+        @media print {
+            overflow: visible;
+            height: initial;
+        }
+
+        .c {
+            align-items: center;
+        }
+        .r {
+            &.focused {
+                outline-style: dotted;
+                outline-width: 2px;
+                outline-color: gray;
+            }
+            &:nth-child(odd) {
+                background-color: $table-bg-accent;
+            }
+        }
+    }
+
+    .toolbar {
+        margin-bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    @import "./editors";
+
+}

data/client/hippo/components/icon.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import { uniqueId, extend } from 'lodash';
+import classnames from 'classnames';
+
+const DEFAULT_TOOLTIP_PROPS = { placement: 'top', trigger: 'click' };
+
+export default class Icon extends React.Component {
+
+    static propTypes = {
+        type:         PropTypes.string.isRequired,
+        animated:     PropTypes.bool,
+        spinner:      PropTypes.bool,
+        className:    PropTypes.string,
+        tooltip:      PropTypes.oneOfType([
+            PropTypes.string, PropTypes.element
+        ]),
+        tooltipProps: PropTypes.object,
+    };
+
+    static defaultProps = {
+        tooltipProps: DEFAULT_TOOLTIP_PROPS,
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            uniqueId: uniqueId('icon-tooltip-'),
+        };
+    }
+
+    render() {
+        const classes = classnames('icon', `icon-${this.props.type}`, this.props.className, {
+            'non-printable': this.props.noPrint,
+            'with-action' : this.props.onClick,
+            [`icon-${this.props.size}`] : this.props.size,
+            'icon-pulse' : this.props.animated,
+            'icon-spin'  : this.props.spin || (this.props.type === 'spinner'),
+            'flush'      : this.props.flush,
+            'icon-lg'    : this.props['lg'],
+            'icon-2x'    : this.props['2x'],
+            'icon-3x'    : this.props['3x'],
+            'icon-4x'    : this.props['4x'],
+            'icon-5x'    : this.props['5x'],
+            'clickable'  : this.props.clickable || (this.props.tooltip && (this.props.tooltipProps.trigger === 'click'))
+        }
+        );
+
+        const icon =
+            React.createElement("i", {"style": (this.props.style), "className": (classes), "onClick": (this.props.onClick)});
+
+        if (this.props.tooltip) {
+            const props = extend({}, DEFAULT_TOOLTIP_PROPS, this.props.tooltipProps);
+            return (
+                React.createElement(LC.Tooltip, Object.assign({"id": (this.state.uniqueId),
+                    "content": (this.props.tooltip)
+                    }, props
+                ),
+                    (icon)
+                )
+            );
+        } else {
+            return (
+                icon
+            );
+        }
+    }
+}

data/client/hippo/components/index.js

@@ -0,0 +1,3 @@
+//= require ./helpers
+//= require ./shared
+//= require ./enabled

data/client/hippo/components/modal/index.js

@@ -0,0 +1 @@
+//= require ./Modal

data/client/hippo/components/modal/styles.scss

@@ -0,0 +1,12 @@
+.hippo-modal {
+
+
+    .modal-body {
+        @include flexbox();
+        @include flex-direction(column);
+    }
+
+    .grid-component .grid-body {
+        height: initial;
+    }
+}

data/client/hippo/components/network-activity-overlay.jsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { autorun, action } from 'mobx';
+import Spinning from 'grommet/components/icons/Spinning';
+import CircleInformationIcon from 'grommet/components/icons/base/CircleInformation';
+import { delay, isEmpty, includes, get } from 'lodash';
+import classnames from 'classnames';
+import { BaseModel, observable, computed } from '../models/base';
+
+import './network-activity-overlay.scss';
+
+function Indicator({ error }) {
+    return error ? <CircleInformationIcon size="medium" /> : <Spinning size="medium" />;
+}
+
+@observer
+export default class NetworkActivityOverlay extends React.PureComponent {
+
+    static defaultProps = {
+        timeout: 30000,
+        errorTimeout: 2000,
+    }
+
+    static propTypes = {
+        model:   MobxPropTypes.observableObject,
+        message: PropTypes.string,
+        timeout: PropTypes.number,
+        visible: PropTypes.bool,
+        method:  PropTypes.string,
+        errorTimeout: PropTypes.number,
+    }
+
+    @computed get isRequesting() {
+        const { syncInProgress } = this.props.model;
+        if (this.props.method) {
+            return !!(syncInProgress && syncInProgress.method === this.props.method);
+        }
+        return !!syncInProgress;
+    }
+
+    @computed get hasError() {
+        return !isEmpty(this.props.model.errors);
+    }
+
+    @computed get isVisible() {
+        return this.props.visible || this.isPending;
+    }
+
+    @observable isPending = false;
+
+    removeHandler = null;
+
+    @action.bound
+    removeMessage() {
+        this.isPending = false;
+    }
+
+    clearTimeout() {
+        if (this.removeHandler) {
+            clearTimeout(this.removeHandler);
+            this.removeHandler = null;
+        }
+    }
+
+    installRemoval() {
+        this.clearTimeout();
+        this.removeHandler = delay(
+            this.removeMessage, (this.hasError ? this.props.errorTimeout : this.props.timeout),
+        );
+    }
+
+    componentWillMount() {
+        this.loadingObserverDisposer = autorun(() => {
+            if (this.hasError || this.isRequesting) {
+                this.isPending = true;
+                this.installRemoval();
+            } else if (!this.hasError) {
+                this.isPending = false;
+            }
+        });
+    }
+
+    componentWillUnMount() {
+        this.loadingObserverDisposer();
+        this.clearTimeout();
+    }
+
+    get message() {
+        const { props: { model } } = this;
+        let message = this.props.message;
+        if (!message) {
+            if (this.hasError) {
+                message = model.errorMessage || 'Error';
+            } else {
+                const method = get(model, 'syncInProgress.method');
+                if ('GET' === method) {
+                    message = 'Loading…';
+                } else if (includes(['PATCH', 'POST', 'PUT'], method)) {
+                    message = 'Saving…';
+                } else if ('DELETE' === method) {
+                    message = 'Deleting…';
+                }
+            }
+        }
+        return message || 'Pending…';
+    }
+
+    render() {
+        if (!this.isVisible) { return null; }
+
+        const classes = classnames('network-activity-overlay', this.props.className, {
+            rounded: this.props.roundedCorners,
+        });
+
+        return (
+            <div className={classes}>
+                <div className="mask">
+                    <div className="message">
+                        <Indicator error={this.hasError} />
+                        <span>{this.message}</span>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}