hippo-fw 0.9.1

data/client/hippo/components/shared/NumberInput.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export class FakeNumberEvent {
+    constructor(value) {
+        value = _.isNull(value) ? 0 : value;
+        this.target = {value};
+    }
+    isDefaultPrevented() { return false; }
+}
+
+export class NumberInput extends React.Component {
+    static mixins = [
+        Hippo.Components.Form.InputFieldMixin
+    ];
+    handleNumberChange(n) {
+        return (
+            this.fieldMixinSetValue( new FakeNumberEvent(n) )
+        );
+    }
+
+    renderInputField(props, handlers) {
+
+        if (!props.format) { props.format = '#,###.00'; }
+        props = _.omit(props, 'label');
+
+        return (
+
+            <Hippo.Vendor.ReactWidgets.NumberPicker
+                ref="select"
+                {...handlers}
+                {...props}
+                onChange={this.handleNumberChange}
+                value={Number(props.value)} />
+
+        );
+    }
+}

data/client/hippo/components/shared/PanelHeader.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export class PanelHeader extends BaseComponent {
+    render() {
+        return (
+            <div export className="hippo-panel-heading">
+                <h3 export className="panel-title">
+                    {this.props.title}
+                </h3>
+                <div export className="spacer" />
+                {this.props.children}
+            </div>
+        );
+    }
+}

data/client/hippo/components/shared/RadioField.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export class FakeInputEvent {
+    constructor(value) {
+        this.target = {value};
+    }
+    isDefaultPrevented() { return false; }
+}
+
+
+export class RadioField extends React.Component {
+    static mixins = [
+        Hippo.Components.Form.FieldMixin
+    ];
+    handleRadioChange(ev) {
+        if (ev.target.checked) {
+            return (
+                this.fieldMixinSetValue( new FakeInputEvent(this.props.value) )
+            );
+        }
+    }
+
+    renderEdit(props, handlers) {
+        return (
+            <BS.FormControl
+                {...props}
+                {...handlers}
+                type="radio"
+                checked={(this.props.checked != null) || (this.props.value === this.model[this.props.name])}
+                onChange={this.handleRadioChange} />
+        );
+    }
+}

data/client/hippo/components/shared/ResizeSensor.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+export class ResizeSensor extends BaseComponent {
+    static propTypes =
+        {onResize: PropTypes.func.isRequired};
+    render() {
+        return (
+            <Hippo.Vendor.ComponentResize
+                {...this.props}
+                embedCss={false}
+                export className={_.classnames('hippo-resize-sensor', this.props.className)}>
+                {this.props.children}
+            </Hippo.Vendor.ComponentResize>
+        );
+    }
+}

data/client/hippo/components/shared/ScreenWrapper.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export class ScreenWrapper extends React.Component {
+    static propTypes =
+        {identifier: React.PropTypes.string.isRequired};
+    render() {
+        const export classes = _.classnames(
+            'screen-wrapper',  this.props.identifier, this.props.export className,
+            {'flex-vertically': this.props.flexVertical}
+        );
+        return (
+            React.createElement("div", {"export className": (classes), "style": (this.props.style)},
+                (this.props.children)
+            )
+        );
+    }
+}

data/client/hippo/components/shared/TextArea.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export class TextArea extends React.Component {
+    static mixins = [
+        Hippo.Components.Form.InputFieldMixin
+    ];
+    renderInputField(props, handlers) {
+        const export className = _.classnames(props.className, 'form-control');
+        return (
+            React.createElement("textarea", Object.assign({}, 
+                props, 
+                handlers, 
+                _.pick(this.props, 'placeholder'), { 
+                "export className": (className),  
+                "onChange": (this.fieldMixinSetValue)
+            }))
+        );
+    }
+}

data/client/hippo/components/shared/Throbber.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export class Throbber extends React.Component({render() {
+        return (
+            <div export className="throbber" />
+        );
+}
+}) {}

data/client/hippo/components/shared/ToggleField.jsx

@@ -0,0 +1,2 @@
+import React from 'react';
+

data/client/hippo/components/shared/Tooltip.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default class Tooltip extends React.Component {
+    static TTProps = [
+        'id', 'placement', 'positionLeft', 'positionTop',
+        'arrowOffsetLeft', 'arrowOffsetTop'
+    ];
+    render() {
+        const ttprops = _.pick(this.props, ...this.TTProps);
+        const tooltip = <BS.Tooltip {...ttprops}>
+            {this.props.content}
+        </BS.Tooltip>;
+        return (
+            <BS.OverlayTrigger
+                overlay={tooltip}
+                placement="left"
+                container={this.context.viewport.hippo}
+                {...this.props}>
+                {this.props.children}
+            </BS.OverlayTrigger>
+        );
+    }
+}

data/client/hippo/components/shared/fields.scss

@@ -0,0 +1,58 @@
+@import "hippo/styles/bootstrap/variables";
+@import "hippo/styles/bootstrap/mixins";
+
+$hippo-field-margin: 6px;
+
+
+
+.hippo-field {
+    .form-control {
+        height: inherit;
+    }
+    .control-label {
+        display: block;
+        min-height: 18px;
+    }
+
+    &.display {
+        .form-group {
+            border-bottom: 1px solid $input-border;
+            min-height: 57px; // 55 + 1px border
+        }
+        &.toggle {
+            .form-group { border-bottom: 0; }
+            .react-toggle { cursor: inherit; }
+        }
+
+    }
+    &.align-right{
+        .control-label, .value, .rw-widget input {text-align: right; }
+    }
+    &.align-center{
+        .control-label, .value, .rw-widget input { text-align: center; }
+    }
+
+    &.select {
+        .form-control-feedback { right: 30px; }
+    }
+    .form-group {
+        background-color: rgba(255, 255, 255, 1);
+        transition: background-color 1000ms linear;
+        input { transition: background-color 1000ms linear; }
+    }
+    &.changeset .form-group {
+        $color-rgba: rgba(255, 241, 72, .6);
+        border-color: darken($color-rgba, 10%);
+        background-color: $color-rgba;
+        outline: 0;
+        @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
+        input {
+            background-color: darken($color-rgba, 20%);
+        }
+    }
+
+    .rw-datetimepicker {
+        &.rw-has-both { padding-right: 0; }
+        .rw-select { @include hidden-print; }
+    }
+}

data/client/hippo/components/shared/fieldset.scss

@@ -0,0 +1,27 @@
+fieldset.collapsible {
+    border: 1px solid $input-border;
+    padding: 10px;
+    border-radius: $border-radius-large;
+    transition: max-height 1.40s ease-in-out;
+    overflow: hidden;
+    legend {
+        border-bottom: 0;
+        margin-bottom: 0;
+        padding-left: 10px;
+        width: inherit;
+        cursor: pointer;
+        &:after {
+            @extend .icon;
+            padding: 0 10px;
+        }
+    }
+    &.expanded {
+        legend:after { @extend .icon-minus-square-o:before; }
+    }
+    &.collapsed {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        legend:after { @extend .icon-plus-square-o:before; }
+    }
+
+}

data/client/hippo/components/shared/image-asset.scss

@@ -0,0 +1,53 @@
+@import "../../styles/bootstrap/buttons";
+
+.image-asset {
+    position: relative;
+    &.field {
+        .value {
+            border-bottom: 0;
+            height: inherit;
+        }
+        &.display {
+            .value {
+                padding-left: 0;
+            }
+        }
+    }
+    input.file {
+        width: 0.1px;
+        height: 0.1px;
+        opacity: 0;
+        overflow: hidden;
+        position: absolute;
+        z-index: -1;
+    }
+    label.selector {
+        @extend .btn;
+        @extend .btn-default;
+    }
+    &.with-image label.selector {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        z-index: 2;
+        box-shadow: 0 8px 6px -6px black;
+    }
+    img {
+        height: auto;
+        width: 100%;
+    }
+}
+
+.assets-listing {
+
+    display: flex;
+
+    .image-asset {
+        max-width: 200px;
+        & + .image-asset {
+            border-left: 1px dotted lightgrey;
+            padding-left: 10px;
+            margin-left: 10px;
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+//= require ./Helpers
+//= require hippo/vendor/toggle
+//= require ./FieldMixin
+//= require ./InputFieldMixin
+//= require_tree

data/client/hippo/components/shared/overlay.scss

@@ -0,0 +1,83 @@
+$gray-light: lightGrey !default;
+$well-border: darkGrey !default;
+$border-radius-large: 8px !default;
+$body-bg: white !default;
+$font-size-large: 15px !default;
+$gray-darker: lighten(#000, 13.5%) !default;
+
+.overlay {
+  position: absolute;
+  z-index: 11;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  .mask {
+    background-color: white;
+    height: 100%;
+    left: 0;
+    opacity: 0.8;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+  &.rounded {
+      .mask { border-radius: $border-radius-large; }
+  }
+
+  .message {
+    width: 450px;
+    max-width: 90%;
+    min-height: 65px;
+    line-height: 3rem;
+    border: 2px solid $well-border;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 2rem;
+    position: relative;
+    top: 25%;
+    border-radius: $border-radius-large;
+    padding: 10px;
+    box-shadow: 6px 7px 5px $gray-light;
+    background-color: $body-bg;
+
+    i {
+      display: inline-block;
+      font-size: 3.2rem;
+      float: left;
+      margin-right: 0.5rem;
+      &.loading-spinner {
+        background:url(image-path('images/hippo/ajax-loader.gif')) no-repeat;
+        height: 32px;
+        margin-top: 10px;
+        width: 32px;
+      }
+      &.icon-success {
+        color: darkgreen;
+      }
+      &.icon-warning {
+        color: darkred;
+      }
+
+    }
+    p {
+      display: inline;
+      margin: 0;
+      font-size: $font-size-large;
+      color: $gray-darker;
+    }
+    &.short {
+      width: 250px;
+      padding: 5px;
+      p {
+        position: relative;
+        top: 15px;
+        left: 5px;
+      }
+    }
+
+  }
+
+}

data/client/hippo/components/shared/resize-sensor.scss

@@ -0,0 +1,30 @@
+.hippo-resize-sensor {
+
+    position: relative;
+
+    .resize-triggers {
+        visibility: hidden;
+
+        &,
+        > div,
+        .contract-trigger:before {
+            content: " ";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        > div {
+            overflow: auto;
+        }
+
+        .contract-trigger:before {
+            width: 200%;
+            height: 200%;
+        }
+    }
+}