hippo-fw 0.9.1

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

@@ -0,0 +1,64 @@
+@import "./fields";
+@import "./fieldset";
+@import "./resize-sensor";
+@import "./overlay";
+@import "./image-asset";
+@import "./throbber";
+@import "hippo/vendor/styles/toggle";
+@import "hippo/vendor/styles/widgets";
+
+.record-finder {
+    .icon { cursor: pointer; }
+}
+
+.alert {
+    .icon {
+        margin-right: 5px;
+    }
+}
+
+.badge.count {
+    &.super {
+        padding: 2px 2px 0;
+        position: relative;
+        font-size: 70%;
+        top: -6px;
+        right: 5px;
+    }
+}
+
+.requesting-spinner {
+    @extend .icon;
+    @extend .icon-spinner;
+    @extend .icon-spin;
+    display: none;
+    &.active {
+        display: inline;
+    }
+}
+
+.job-executing {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .progress { width: 100%; }
+}
+
+.icon {
+    &.with-action {
+        cursor: pointer;
+        &:hover{ text-shadow: 1px 2px 2px #666666; }
+    }
+}
+
+.hippo-panel-heading {
+    display: flex;
+    align-items: center;
+    .spacer {
+        flex: 1;
+    }
+    > *:not(.panel-title){
+        margin-left: 0.5rem;
+    }
+}

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

@@ -0,0 +1,53 @@
+$throbber-color: #dde2e7 !default;
+$throbber-highlight-color: #6b9dc8 !default;
+$throbber-height: 1.5em !default;
+$throbber-segment-width: 0.9em !default;
+$throbber-spacing: 0.7em !default;
+
+@mixin keyframes($name) {
+  @-webkit-keyframes #{$name} { @content }
+  @-moz-keyframes #{$name} { @content }
+  @-o-keyframes #{$name} { @content }
+  @keyframes #{$name} { @content }
+}
+
+@include keyframes(throbber) {
+  0%  { background: $throbber-color }
+  10% { background: $throbber-highlight-color }
+  40% { background: $throbber-color }
+}
+
+/* Styles for old versions of IE */
+.throbber {
+    font-family: sans-serif;
+    font-weight: 100;
+    animation: throbber 2000ms 300ms infinite ease-out;
+    background: $throbber-color;
+    display: inline-block;
+    position: relative;
+    text-indent: -9999px;
+    width: $throbber-segment-width;
+    height: $throbber-height;
+    margin: 0 ($throbber-segment-width + $throbber-spacing);
+
+    &:before,
+    &:after {
+        background: $throbber-color;
+        content: '\x200B';
+        display: inline-block;
+        width: $throbber-segment-width;
+        height: $throbber-height;
+        position: absolute;
+        top: 0;
+    }
+
+    &:before {
+        animation: throbber 2000ms 150ms infinite ease-out;
+        left: -($throbber-segment-width + $throbber-spacing);
+    }
+
+    &:after {
+        animation: throbber 2000ms 450ms infinite ease-out;
+        right: -($throbber-segment-width + $throbber-spacing);
+    }
+}

data/client/hippo/components/toolbar/changes-notification.scss

@@ -0,0 +1,63 @@
+.changes-notification {
+
+    .btn.dropdown-toggle {
+        i {
+            font-size: 28px;
+        }
+        .badge {
+            top: -11px;
+            position: relative;
+            left: -11px;
+            padding: 3px 7px;
+            font-size: 75%;
+        }
+    }
+    .title{
+        margin: 0; // reset heading margin
+        padding: 8px 14px;
+        font-size: $font-size-base;
+        background-color: $popover-title-bg;
+        border-bottom: 1px solid darken($popover-title-bg, 5%);
+        border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
+    }
+
+    .dropdown-menu {
+        width: 300px;
+        right: 0;
+        left: -200px;
+        .update {
+            border-bottom: 1px solid $table-border-color;
+            margin-bottom: 5px;
+            padding: 5px;
+            &:last-child {
+                margin-bottom: 0;
+                border-bottom: 0;
+            }
+            .header {
+                display: flex;
+                align-items: stretch;
+                justify-content: space-between;
+            }
+            .time {
+                font-size: 80%;
+            }
+            .change > div {
+                margin-bottom: 2px;
+            }
+            .from, .to {
+                margin-left: 0.5rem;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+        .scroller {
+            max-height: 350px;
+            overflow-y: auto;
+        }
+        .ago {
+            @extend small;
+        }
+    }
+
+}

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

@@ -0,0 +1,3 @@
+//= require ./Toolbar
+//= require ./SaveButton
+//= require ./RemoteChangeSets

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

@@ -0,0 +1,74 @@
+.hippo-toolbar {
+
+    background-color: $navbar-default-bg;
+
+    border: 1px solid transparent;
+    border-radius: $border-radius-base;
+    border-color: $navbar-default-border;
+    margin-bottom: $navbar-margin-bottom;
+    padding-right: $navbar-padding-horizontal;
+    padding-left:  $navbar-padding-horizontal;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+
+
+    .navbar-btn {
+        &.save > a {
+            width: 100%;
+            @extend .btn;
+            @extend .btn-primary;
+            // the save button needs to be clicable even if disabled
+            &.disabled {
+                pointer-events: all;
+                cursor: pointer;
+            }
+        }
+    }
+    .spacer {
+        flex: 1;
+    }
+    .control {
+        width: 120px;
+        margin-right: 10px;
+    }
+    .arrow {
+        border-style: solid;
+
+        border-left-color: transparent;
+        border-right-color: transparent;
+
+        border-bottom-color: $popover-title-bg;
+        border-top-color: $popover-title-bg !important;
+
+        border-width: 0 9px 9px;
+        height: 0;
+        left: 7px;
+        margin-top: 10px;
+        opacity: 1;
+        position: absolute;
+        top: -18px;
+        transition: all 0.25s ease 0s;
+        width: 0;
+        z-index: 10;
+    }
+
+    label {
+        margin-bottom: 0;
+    }
+    input {
+        margin: 0 0.25rem 0 0;
+    }
+    .toggle {
+        label {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-around;
+        }
+    }
+    @import "./changes-notification";
+}

data/client/hippo/components/warning-notification.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Notification from 'grommet/components/Notification';
+
+export default function WarningNotification(props) {
+    if (!props.message){ return null; }
+    return (
+        <Notification message={props.message} size="small" status="warning" />
+    );
+}
+
+WarningNotification.propTypes = {
+    message: PropTypes.string
+};

data/client/hippo/config.js

@@ -0,0 +1,72 @@
+import { observable, autorun, observe } from 'mobx';
+import { keysIn, pick, assign, isString } from 'lodash';
+import Extensions from './extensions';
+
+const STORAGE_KEY = 'hippo-user-data';
+
+class Config {
+
+    @observable api_host = window.location.origin;
+    @observable api_path = '/api';
+    @observable access_token;
+    @observable root_view;
+    @observable assets_path_prefix = '/assets';
+    @observable user;
+    @observable screens;
+
+    constructor() {
+        this.bootstrapUserData();
+        observe(this, 'user', ({ newValue }) => {
+            if (newValue) { this.setUserData(); }
+        });
+        observe(this, 'screens', ({ newValue }) => {
+            if (newValue) { this.setScreenData(); }
+        });
+        observe(this, 'access_token', ({ newValue: token }) => {
+            this.data.token = token;
+            this.persistToStorage();
+        });
+    }
+
+    bootstrap(attrs) {
+        assign(this, pick(attrs, keysIn(this)));
+        Extensions.setBootstrapData(attrs);
+    }
+
+    persistToStorage() {
+        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.data));
+    }
+
+    setScreenData() {
+        if (this.screens && this.data) {
+            this.screens.configure(this.data.screens);
+        }
+    }
+
+    setUserData() {
+        if (this.user && this.data) {
+            this.user.set(this.data.user);
+            this.user.access = this.data.access;
+        }
+    }
+
+    bootstrapUserData() {
+        const savedData = window.localStorage.getItem(STORAGE_KEY);
+        this.data = JSON.parse(savedData);
+        if (!this.data) { return; }
+        this.access_token = this.data.token;
+        this.setUserData();
+        this.setScreenData();
+    }
+
+    reset() {
+        this.data = {};
+        this.persistToStorage();
+        this.access_token = null;
+        if (this.user) { this.user.reset(); }
+        if (this.screens) { this.screens.reset(); }
+    }
+}
+
+const ConfigInstance = new Config();
+export default ConfigInstance;

data/client/hippo/extensions/EarlyExtensions.js.erb

@@ -0,0 +1,3 @@
+<% Hippo::Extensions.each_asset(phase: :early, type: :js) do | asset |
+require_asset asset
+end %>

data/client/hippo/extensions/LateLoaded.js.erb

@@ -0,0 +1,4 @@
+<% Hippo::Extensions.each_asset(phase: :late, type: :js) do | asset | %>
+// <%= asset %>
+<% require_asset asset %>
+<% end %>

data/client/hippo/extensions/base.js

@@ -0,0 +1,23 @@
+import { observable, computed } from 'mobx';
+import { titleize, humanize } from '../lib/util';
+import Extensions from './index';
+
+export { identifiedBy, identifier } from '../models/base';
+
+
+export class BaseExtension {
+
+    @observable data;
+
+    static register() {
+        Extensions.register(this);
+    }
+
+    @computed get title() {
+        return titleize(humanize(this.identifier));
+    }
+
+    setBootstrapData(data) {
+        this.data = data;
+    }
+}

data/client/hippo/extensions/hippo.js

@@ -0,0 +1,11 @@
+// This is the client-side version of Sh::Extension
+import {
+    BaseExtension, identifiedBy, identifier,
+} from './base';
+
+@identifiedBy('extensions/hippo')
+export default class HippoExtension extends BaseExtension {
+
+    @identifier id = 'hippo';
+
+}

data/client/hippo/extensions/index.js

@@ -0,0 +1,47 @@
+import { invoke, each } from 'lodash';
+import { observable } from 'mobx';
+
+export default {
+
+    instances: observable.map(),
+
+    @observable controlling_id: 'hippo',
+
+    register(Klass) {
+        const instance = new Klass();
+        this.instances.set(instance.id, instance);
+        return invoke(instance, 'onRegistered');
+    },
+
+    invoke(method, arg) {
+        each(this.instances.values(), instance => invoke(instance, method, arg));
+    },
+
+    fireOnInitialized(viewport) {
+        this.invoke('onInitialized', viewport);
+    },
+
+    fireOnAvailable(viewport) {
+        this.invoke('onAvailble', viewport);
+    },
+
+    getViews() {
+        return Promise.all(this.invoke('getView'));
+    },
+
+    get controlling() {
+        return this.get(this.controlling_id);
+    },
+
+    get(identifier) {
+        return this.instances.get(identifier);
+    },
+
+    setBootstrapData(bootstrapData) {
+        this.controlling_id = bootstrapData.controlling_extension;
+        this.instances.forEach((instance, key) => {
+            invoke(instance, 'setBootstrapData', bootstrapData[key]);
+        });
+    },
+
+};