lanes 0.1.9 → 0.1.9.5

data/client/lanes/components/shared/FieldSet.cjsx

@@ -0,0 +1,58 @@
+class Lanes.Components.FieldSet extends Lanes.React.Component
+
+    getDefaultProps: ->
+        speed: 0.4
+
+    propTypes:
+        title: React.PropTypes.string.isRequired
+        speed: React.PropTypes.number
+        collapsed: React.PropTypes.bool
+
+    getInitialState: ->
+        state = {
+            expanded: !@props.collapsed,
+            icon: if @props.collapsed then 'plus' else 'minus'
+        }
+        state.height = 30 if @props.collapsed
+        state
+
+    getClientHeight: ->
+        _.max(
+            _.pluck(@refs.body.getDOMNode().children, 'clientHeight')
+        ) + 45
+
+
+    toggleExpanded: ->
+        if @state.expanded
+            if ! @state.hasExpanded
+                @setState( hasExpanded: true, height: @getClientHeight() )
+                _.defer @toggleExpanded
+                return
+            @setState expanded: false, height: 30
+        else
+            @setState expanded: true, height: @getClientHeight()
+
+        _.delay( =>
+            if @isMounted()
+                @setState(icon: if @state.expanded then 'minus' else 'plus')
+        , @props.speed * 1000)
+
+    render: ->
+        colProps = _.omit(@props, 'name')
+        <BS.Col {...colProps}>
+            <fieldset className={
+                _.classnames("collapsible", @props.className, @state.icon
+                {expanded: @state.expanded, collapsed: !@state.expanded})
+            }
+            style={
+                maxHeight: @state.height
+                transition: "max-height #{@props.speed}s ease-in-out";
+            }>
+                <legend onClick={@toggleExpanded}>
+                    {@props.title}
+                </legend>
+                <div ref="body" className="fieldset-fields">
+                    {@props.children}
+                </div>
+            </fieldset>
+        </BS.Col>

data/client/lanes/components/shared/GenericField.cjsx

@@ -0,0 +1,5 @@
+Lanes.Components.GenericField = {
+
+
+
+}

data/client/lanes/components/shared/Helpers.coffee

@@ -0,0 +1,9 @@
+Lanes.Components.Helpers = {
+
+    modelLinkFields: (model) ->
+        return (field) ->
+            onChange: (ev) -> model[field] = ev.target.value
+            value: _.result(model, field)
+
+
+}

data/client/lanes/components/shared/RadioField.cjsx

@@ -0,0 +1,14 @@
+class Lanes.Components.RadioField extends Lanes.React.Component
+
+    mixins: [
+        Lanes.Components.Form.FieldMixin
+    ]
+
+    renderEdit: ->
+        <BS.Col {...@props}>
+            <BS.Input
+                type="radio"
+                checked={@props.checked? || @props.value == @model[@props.name]}
+                onChange={@handleChange}
+                {...@props} />
+        </BS.Col>

data/client/lanes/components/shared/Resize.cjsx

@@ -0,0 +1,152 @@
+# ###* @jsx React.DOM ###
+
+# React = require('react')
+# ZyngaScroller = require('react-touch/lib/environment/ZyngaScroller')
+# AnimatableContainer = require('react-touch/lib/primitives/AnimatableContainer')
+# TouchableArea = require('react-touch/lib/primitives/TouchableArea')
+# ANIMATABLE_CONTAINER_STYLE =
+#     bottom: 0
+#     left: 0
+#     position: 'absolute'
+#     right: 0
+#     top: 0
+
+# ###*
+# SimpleScroller component from react-touch, with event for detecting content resizes with overflow/underflow events.
+# See these articles:
+# http://www.backalleycoder.com/2013/03/14/oft-overlooked-overflow-and-underflow-events/
+# http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/
+# *
+# ###
+
+Lanes.Components.Resize = React.createClass
+
+    addFlowListener: (element, type, fn) ->
+        flow = type == 'over'
+        event = if 'OverflowEvent' of window then 'overflowchanged' else "#{type}flow"
+        element.addEventListener( event, ((e) ->
+            if (e.type == "#{type}flow") || ((e.orient == 0 && e.horizontalOverflow == flow) || (e.orient == 1 && e.verticalOverflow == flow) ||  (e.orient == 2 && e.horizontalOverflow == flow && e.verticalOverflow == flow))
+
+                e.flow = type
+                return fn.call(this, e)
+
+            return
+        ), false)
+
+    fireEvent: (element, type, data, options = {}) ->
+        # event = document.createEvent('Event')
+        # event.initEvent(type,  if 'bubbles' of options then options.bubbles else true, if 'cancelable' of options then options.cancelable else true)
+        # for z of data
+        #     event[z] = data[z]
+        # element.dispatchEvent event
+        # return
+
+    addResizeListener: (element, fn) ->
+        resize = 'onresize' of element
+        if !resize and !element._resizeSensor
+            sensor = element._resizeSensor = React.findDOMNode(@refs.sensor)
+            x = 0
+            y = 0
+            first = sensor.firstElementChild.firstChild
+            last = sensor.lastElementChild.firstChild
+            matchFlow = ((event) ->
+                change = false
+                width = element.offsetWidth
+                if x != width
+                    first.style.width = width - 1 + 'px'
+                    last.style.width = width + 1 + 'px'
+                    change = true
+                    x = width
+                height = element.offsetHeight
+                if y != height
+                    first.style.height = height - 1 + 'px'
+                    last.style.height = height + 1 + 'px'
+                    change = true
+                    y = height
+                if change and event.currentTarget != element
+                    @fireEvent element, 'resize'
+                return
+            ).bind(this)
+            if getComputedStyle(element).position == 'static'
+                element.style.position = 'relative'
+                element._resizeSensor._resetPosition = true
+            @addFlowListener sensor, 'over', matchFlow
+            @addFlowListener sensor, 'under', matchFlow
+            @addFlowListener sensor.firstElementChild, 'over', matchFlow
+            @addFlowListener sensor.lastElementChild, 'under', matchFlow
+            matchFlow {}
+        events = element._flowEvents or (element._flowEvents = [])
+        if events.indexOf(fn) == -1
+            events.push fn
+        if !resize
+            element.addEventListener 'resize', fn, false
+
+        element.onresize = (e) ->
+            events.forEach (fn) ->
+                fn.call element, e
+                return
+            return
+
+        return
+    removeResizeListener: (element, fn) ->
+        index = element._flowEvents.indexOf(fn)
+        if index > -1
+            element._flowEvents.splice index, 1
+        if !element._flowEvents.length
+            sensor = element._resizeSensor
+            if sensor
+                if sensor._resetPosition
+                    element.style.position = 'static'
+            if 'onresize' of element
+                element.onresize = null
+            delete element._flowEvents
+        element.removeEventListener 'resize', fn
+        return
+    handleContentResize: (e) ->
+        if @configured
+            # re-calculate the dimensions of the Scroller
+            @configured = false
+            @configure()
+        return
+    getInitialState: ->
+        {
+            left: 0
+            top: 0
+        }
+    componentWillMount: ->
+        @configured = false
+
+    componentWillUnmount: ->
+        # remove event listeners
+        node = React.findDOMNode(@refs.content)
+        @removeResizeListener node, @handleContentResize
+
+    componentDidMount: ->
+        # attach event listeners
+        node = React.findDOMNode(@refs.content)
+        @addResizeListener node, @handleContentResize
+        @configure()
+
+    componentDidUpdate: ->
+        @configure()
+
+    configure: ->
+        if @configured
+            return
+        @configured = true
+        node = React.findDOMNode(@refs.content)
+        @props.onResize(width: node.clientWidth, height: node.clientHeight)
+
+        # @scroller.setDimensions @getDOMNode().clientWidth, @getDOMNode().clientHeight, node.clientWidth, node.clientHeight
+
+    # handleScroll: (left, top) ->
+    #     @setState({left, top})
+
+    render: ->
+        <div ref="content">
+            {this.props.children}
+            <div ref="sensor" className="resize-sensor">
+                <div className="resize-overflow"><div></div></div>
+                <div className="resize-underflow"><div></div></div>
+            </div>
+        </div>

data/client/lanes/components/shared/TextArea.cjsx

@@ -0,0 +1,19 @@
+class Lanes.Components.TextArea extends Lanes.React.Component
+
+    mixins: [
+        Lanes.Components.Form.FieldMixin
+    ]
+
+    propTypes:
+        unlabled:  React.PropTypes.bool
+
+    renderEdit: (label) ->
+        <BS.Col {...@props}>
+            <BS.Input
+                className={_.classnames('lanes-input', changeset: @state.changeset)}
+                type='textarea'
+                label={label}
+                value={@props.model[@props.name]}
+                onChange={@handleChange}
+                {...@props}/>
+        </BS.Col>

data/client/lanes/components/shared/TextField.cjsx

@@ -0,0 +1,25 @@
+class Lanes.Components.TextField extends Lanes.React.Component
+
+    mixins: [
+        Lanes.Components.Form.FieldMixin
+    ]
+
+    propTypes:
+        unlabled:  React.PropTypes.bool
+
+    getValue: ->
+        @refs.input.getValue()
+
+    renderEdit: (label) ->
+        colProps = _.omit(@props, 'name')
+        <BS.Col {...colProps} >
+            <BS.Input
+                {...@props}
+                ref="input"
+                className={_.classnames('value', changeset: @state.changeset)}
+                type='text'
+                label={label}
+                value={@props.model[@props.name]}
+                onChange={@handleChange}
+            />
+        </BS.Col>

data/client/lanes/components/shared/Tooltip.cjsx

@@ -0,0 +1,10 @@
+class Lanes.Components.Tooltip extends Lanes.React.Component
+
+    TTProps: ['placement', 'positionLeft', 'positionTop', 'arrowOffsetLeft', 'arrowOffsetTop']
+
+    render: ->
+        ttprops = _.pick(@props, @TTProps...)
+        tooltip = <BS.Tooltip {...ttprops}>{@props.content}</BS.Tooltip>
+        <BS.OverlayTrigger overlay={tooltip} container={@context.viewport.root}>
+            {@props.children}
+        </BS.OverlayTrigger>

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

@@ -0,0 +1,35 @@
+label.field {
+    display: block;
+}
+.field {
+
+    .display, .read-only {
+        font-weight: normal;
+        padding: 6px 0;
+        margin-top: 5px;
+        height: 34px;
+    }
+    .display {
+        border-bottom: 1px solid $input-border;
+    }
+    .read-only {
+        @extend .form-control;
+        padding: 6px 12px;
+        cursor: not-allowed;
+    }
+    .label {
+        padding: 0;
+        font-size: 85%;
+    }
+
+}
+
+.field, .form-group {
+    .changeset {
+        $color-rgba: rgba(255, 241, 72, .6);
+        border-color: $color-rgba;
+        outline: 0;
+        @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
+    }
+
+}

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

@@ -0,0 +1,29 @@
+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;
+        }
+    }
+    &.collapsed {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    &.plus {
+        legend:after { @extend .icon-plus-square-o:before; }
+    }
+    &.minus {
+        legend:after { @extend .icon-minus-square-o:before; }
+    }
+
+}

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

@@ -0,0 +1,3 @@
+//= require ./Helpers
+//= require ./FieldMixin
+//= require_tree

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

@@ -0,0 +1,32 @@
+@import "./fields";
+@import "./fieldset";
+
+.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;
+    }
+}

data/client/lanes/components/toolbar/RemoteChangeSets.cjsx

@@ -0,0 +1,75 @@
+class Change extends Lanes.React.Component
+
+    renderField: (field) ->
+        <span key={field.name}>
+            <p className="field">{@model.record_name} {_.field2title field.name}:</p>
+            <span className="change">{field.from}<br />{field.to}</span>
+        </span>
+
+    render: ->
+        if @model.by
+            user = <LC.Tooltip placement='left' content={@model.by.email}>
+                <span>{@model.by.name}</span>
+            </LC.Tooltip>
+
+        <div className="update">
+            {user}
+            <p className="ago">{Lanes.Vendor.Moment( @model.created_at ).fromNow()}</p>
+            <p className="changes">
+                {@renderField(change) for change in @model.displayed_changes }
+            </p>
+        </div>
+
+class Lanes.Components.Toolbar.RemoteChangeSets extends Lanes.React.Component
+
+    propTypes:
+        model: Lanes.PropTypes.State
+
+    render: ->
+        return null unless @model?.changes
+        title = <span>
+            <i className="icon icon-cloud-download icon-lg" />
+            <LC.CountBadge superScript count={@model.changes.length} />
+        </span>
+        <BS.Nav navbar right className="changes-notification">
+          <BS.DropdownButton eventKey={3} title={title}>
+              <div className="scroller">
+                  {@model.changes.map (ch) -> <Change key={ch.cid} model={ch} />}
+              </div>
+          </BS.DropdownButton>
+        </BS.Nav>
+
+        # <ul className="nav navbar-nav navbar-right">
+        #     <li className="dropdown">
+        #         <a href="#" className="dropdown-toggle"
+        #             data-toggle="dropdown" role="button"
+        #             aria-haspopup="true" aria-expanded="false"
+        #         >
+        #             <i className="icon icon-cloud-download" /> Changes {@props.model.changes.length}
+        #         </a>
+        #         <ul className="dropdown-menu">
+        #             <li><a href="#">Action</a></li>
+        #             <li><a href="#">Another action</a></li>
+        #             <li><a href="#">Something else here</a></li>
+        #             <li role="separator" className="divider"></li>
+        #             <li><a href="#">Separated link</a></li>
+        #         </ul>
+        #     </li>
+        # </ul>
+
+
+        # title = <span>
+        #     <i className="icon icon-cloud-download" /> Changes {@props.model.changes.length}
+        # </span>
+        # <BS.SplitButton bsStyle="default" title={title}
+        #     navItem
+        #     componentClass="button"
+        #     onClick={@props.onSave}
+        #     className="changes navbar-btn"
+        # >
+        #     <BS.MenuItem eventKey='1'>Action</BS.MenuItem>
+        #     <BS.MenuItem eventKey='2'>Another action</BS.MenuItem>
+        #     <BS.MenuItem eventKey='3'>Something else here</BS.MenuItem>
+        #     <BS.MenuItem divider />
+        #     <BS.MenuItem eventKey='4'>Separated link</BS.MenuItem>
+        # </BS.SplitButton>