hippo-fw 0.9.8 → 0.9.9

data/client/hippo/components/text-editor/image-plugin/Component/Display/index.js

@@ -1,82 +0,0 @@
-// @flow
-import React from 'react';
-import { observer, inject } from 'mobx-react';
-import { action, computed } from 'mobx';
-import { find } from 'lodash';
-import Dropzone from 'react-dropzone';
-import Button from 'grommet/components/Button';
-import ImageIcon from 'grommet/components/icons/base/Image';
-import cn from 'classnames';
-
-const iconStyle = {
-    width: '100%',
-    height: 'auto',
-    padding: '0',
-    color: '#aaa',
-    textAlign: 'center',
-    minWidth: 64,
-    minHeight: 64,
-    maxHeight: 256,
-};
-
-
-@inject('assets')
-@observer
-export default class Display extends React.PureComponent {
-
-    @computed get asset() {
-        return find(this.props.assets, asset =>
-            asset.metadata && asset.metadata.nodeId === this.props.id);
-    }
-
-    @action.bound
-    onFileDrop(files) {
-        let { asset } = this;
-        if (!asset) {
-            this.props.assets.push({ metadata: { nodeId: this.props.id } });
-            asset = this.props.assets.get(this.props.assets.length - 1);
-        }
-
-        asset.setFile(files[0]).then(() => {
-            this.props.onChange({ src: asset.previewUrl });
-            asset.save().then(() => {
-                this.props.onChange({
-                    assetId: asset.id, src: asset.urlFor(),
-                });
-            });
-        });
-    }
-
-    renderImage() {
-        const { state: { src } } = this.props;
-        return src ? <img className="content-image" src={src} /> : <ImageIcon style={iconStyle} />;
-    }
-
-    @action.bound
-    onAddClick() {
-        this.dropZone.open();
-    }
-
-    render() {
-        const { isEditMode, state, focused } = this.props;
-        if (isEditMode) {
-            return (
-                <div className={cn('content-image-wrapper', { focused })}>
-                    <Button onClick={this.onAddClick}>{state.src ? 'Change' : 'Add'}</Button>
-                    <Dropzone
-                        ref={(dz) => { this.dropZone = dz; }}
-                        style={{}}
-                        disableClick
-                        multiple={false}
-                        onDrop={this.onFileDrop}
-                        className="image-drop-zone"
-                    >
-                        {this.renderImage()}
-                    </Dropzone>
-                </div>
-            );
-        }
-        return this.renderImage();
-    }
-
-}

data/client/hippo/components/text-editor/image-plugin/Component/Form/index.js

@@ -1,42 +0,0 @@
-// @flow
-import React from 'react';
-import { inject, observer } from 'mobx-react';
-import Dropzone from 'react-dropzone';
-import { action } from 'mobx';
-import { BottomToolbar } from 'ory-editor-ui';
-
-import Display from '../Display';
-
-@inject('model', 'images_attribute')
-@observer
-export default class Form extends React.PureComponent {
-
-    get assets() {
-        return this.props.model[this.props.images_attribute];
-    }
-
-    @action.bound
-    onFileDrop(files) {
-        this.assets.push({});
-        const asset = this.assets.at(this.assets.length - 1);
-        asset.setFile(files[0]);
-    }
-
-    render() {
-        const { props } = this;
-
-        return (
-            <div>
-                <Display {...props} />
-                <BottomToolbar open={props.focused}>
-                    <Dropzone
-                        onDrop={this.onFileDrop}
-                    >
-                        Drop a file here, or click to select one to upload.
-                    </Dropzone>
-                </BottomToolbar>
-            </div>
-        );
-    }
-
-}

data/client/hippo/components/text-editor/image-plugin/Component/index.js

@@ -1,16 +0,0 @@
-// @flow
-import React from 'react'; // eslint-disable-line no-unused-vars
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-import type { ContentPluginProps } from 'ory-editor-core/lib/service/plugin/classes';
-import Display from './Display';
-
-export type PropTypes = ContentPluginProps<{ src: string, caption: string }>
-
-const Image = (props: PropTypes) => (
-    <MuiThemeProvider muiTheme={getMuiTheme()}>
-        <Display {...props} />
-    </MuiThemeProvider>
-);
-
-export default Image;

data/client/hippo/components/text-editor/image-plugin/index.js

@@ -1,32 +0,0 @@
-// @flow
-import React from 'react'; // eslint-disable-line no-unused-vars
-import Panorama from 'material-ui/svg-icons/image/panorama';
-import './index.scss';
-import Asset from '../../../models/asset';
-import Component from './Component';
-
-export default {
-    Component,
-    name: 'ory/editor/core/content/image',
-    version: '0.0.1',
-    IconComponent: <Panorama />,
-    text: 'Image',
-    isInlineable: true,
-    description: 'Loads an image from an url.',
-
-    handleRemoveHotKey(ev, node) {
-        if (node.content.state.assetId) {
-            const asset = new Asset({ id: node.content.state.assetId });
-            return asset.destroy();
-        }
-        return Promise.resolve(node);
-    },
-
-    // We need this because otherwise we lose hotkey focus on elements like spoilers.
-    // This could probably be solved in an easier way by listening to window.document?
-
-    handleFocus: (props: any, source: any, ref: HTMLElement) => {
-        if (!ref) { return; }
-        setTimeout(() => ref.focus());
-    },
-};

data/client/hippo/components/text-editor/image-plugin/index.scss

@@ -1,25 +0,0 @@
-@import 'hippo/styles/global';
-
-.ory-plugins-content-image {
-  width: 100%;
-}
-
-.ory-plugins-content-image-placeholder {
-  position: relative;
-  width: 100%;
-  text-align: center;
-}
-
-.content-image-wrapper {
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    cursor: pointer;
-    &.focused {
-        border-width: 2px;
-        border-color: $focus-border-color;
-    }
-    button {
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
-    }
-}

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

@@ -1,63 +0,0 @@
-.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

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

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

@@ -1,74 +0,0 @@
-.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";
-}