lanes 0.1.9.5 → 0.3.0

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

@@ -0,0 +1,48 @@
+Lanes.Components.Form.InputFieldMixin =
+
+    mixins: [
+        Lanes.Components.Form.FieldMixin
+    ]
+
+    propTypes:
+        unlabled:     React.PropTypes.bool
+        onlyNumeric:  React.PropTypes.bool
+        selctOnFocus: React.PropTypes.bool
+
+    getDefaultProps: ->
+        type: 'text'
+
+    getValue: ->
+        @refs.input.getValue()
+
+    handleKeyDown: (ev) ->
+        @props.onEnter() if ev.key is 'Enter'
+
+    selectOnFocus: (ev) ->
+        ev.target.select()
+
+    onFieldBlur: ->
+        @onFieldInteraction()
+        @props.onBlur?()
+
+    renderEdit: (label) ->
+        value = @props.value or @_getValue()
+        label ||= @props.label or _.field2title(@props.name)
+
+        props = _.extend({
+            ref:       'input'
+            className: _.classnames('value',
+                changeset: @state.changeset
+            )
+
+            label:     if @props.unlabeled then false else label
+            onChange:  @handleChange
+        }, @props, {value: value})
+
+        handlers = { onBlur: @onFieldBlur }
+
+        if @isFieldValueInvalid() then props.bsStyle   = 'error'
+        if @props.onEnter         then handlers.onKeyDown = @handleKeyDown
+        if @props.selectOnFocus   then handlers.onFocus   = @selectOnFocus
+
+        @renderInputField(props, handlers, label)

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

@@ -0,0 +1,27 @@
+class Lanes.Components.JobStatus extends Lanes.React.Component
+
+    propTypes:
+        job: Lanes.PropTypes.State
+        onlyExecuting: React.PropTypes.bool
+        message: React.PropTypes.string
+
+    pubsub: true
+    listenNetworkEvents: true
+    dataObjects: { job: 'props' }
+    statusMessage: ->
+        if _.isEmpty(@job.stepsCompleted) then '' else
+            'Completed: ' + _.toSentence(@job.stepsCompleted)
+
+    progressBar: ->
+        return null unless @job.progress
+        <BS.ProgressBar now={@job.progress * 100} />
+
+    render: ->
+        return null if @props.onlyExecuting and not @job.isExecuting
+        <div className="job-executing">
+            <h3 className="message">{@props.message}</h3>
+            <LC.Throbber />
+            <div className="status">{@statusMessage()}</div>
+            {@progressBar()}
+            {@props.children}
+        </div>

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

@@ -0,0 +1,58 @@
+class Lanes.Components.NetworkActivityOverlay extends Lanes.React.Component
+
+    propTypes:
+        model:   Lanes.PropTypes.Model.isRequired
+        message: React.PropTypes.string
+        timeout: React.PropTypes.number
+        visible: React.PropTypes.bool
+        errorTimeout: React.PropTypes.number
+
+    getDefaultProps: ->
+        timeout: 30000, errorTimeout: 2000
+
+    removeMessage: ->
+        return unless @isMounted()
+        @setState(isRequesting: false, hasError: false)
+
+    clearTimeout: ->
+        clearTimeout(@state.removeHandler) if @state.removeHandler
+
+    installRemoval: (state) ->
+        @clearTimeout()
+        @setState(removeHandler: _.delay(@removeMessage,
+            if state.hasError then @props.errorTimeout else @props.timeout
+        ))
+
+    listenNetworkEvents: true
+
+    setDataState: (state) ->
+        if state.hasError or state.isRequesting
+            @installRemoval(state)
+        else if not @state.hasError
+            @removeMessage()
+        @setState(state)
+
+    render: ->
+        return null unless @props.visible or @state.isRequesting or @state.hasError
+        message = @props.message or (
+            if @state.hasError
+                errorMsg = @model.errorMessage
+                if errorMsg and _.isString(errorMsg) then errorMsg else "Error"
+            else if @state.isRequesting is 'GET'
+                'Loading…'
+            else if _.includes(['PATCH', 'POST', 'PUT'], @state.isRequesting)
+                'Saving…'
+            else if @state.isRequesting is 'DELETE'
+                'Deleting…'
+            else
+                'Pending…'
+        )
+        icon = if @state.hasError then 'exclamation-circle' else 'spinner'
+        classes = _.classnames 'overlay', {rounded: @props.roundedCorners}
+        <div className={classes}>
+            <div className="mask" />
+            <div className="message">
+                <LC.Icon type={icon} animated={not @state.hasError} />
+                {message}
+            </div>
+        </div>

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

@@ -0,0 +1,29 @@
+class Lanes.Components.NumberInput extends Lanes.React.Component
+
+    mixins: [
+        Lanes.Components.Form.InputFieldMixin
+    ]
+    handleNumberChange: (n) ->
+        @handleChange(target: value: n)
+
+    renderInputField: (props, handlers, label) ->
+        props.format ||= '#,###.00'
+        props = _.omit(props, 'label')
+        input = <Lanes.Vendor.ReactWidgets.NumberPicker
+            ref="select"
+            className={@props.className}
+            {...handlers}
+            {...props}
+            onChange={@handleNumberChange}
+            value={Number(props.value)}
+        />
+        if @props.unstyled
+            input
+        else
+            <LC.FormGroup
+                {...@props}
+                className={@formGroupClassNames()}
+                label={@getLabelValue()}
+            >
+                {input}
+            </LC.FormGroup>

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

@@ -0,0 +1,11 @@
+class Lanes.Components.ResizeSensor extends Lanes.React.BaseComponent
+
+    propTypes:
+        onResize: React.PropTypes.func.isRequired
+
+    render: ->
+        <Lanes.Vendor.ComponentResize
+            {...@props}
+            embedCss={false}
+            className={_.classnames('lanes-resize-sensor', @props.className)}
+        >{@props.children}</Lanes.Vendor.ComponentResize>

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

@@ -0,0 +1,13 @@
+class Lanes.Components.ScreenWrapper extends Lanes.React.Component
+
+    propTypes:
+        identifier: React.PropTypes.string.isRequired
+
+    render: ->
+        classes = _.classnames(
+            'screen-wrapper',  @props.identifier,
+            'flex-vertically': @props.flexVertical
+        )
+        <div className={classes}>
+            {@props.children}
+        </div>

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

@@ -0,0 +1,3 @@
+class Lanes.Components.Throbber extends Lanes.React.Component
+    render: ->
+        <div className="throbber" />

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

@@ -0,0 +1,33 @@
+class Lanes.Components.ToggleField extends Lanes.React.Component
+    mixins: [ Lanes.Components.Form.FieldMixin ]
+
+    formGroupClass: 'toggle'
+
+    renderDisplayValue: ->
+        <Lanes.Vendor.ReactToggle
+            defaultChecked={!!@props.model[@props.name]}
+            checked={!!@props.model[@props.name]}
+            disabled={true}
+        />
+
+    handleToggleChange: (ev) ->
+        @props.model[@props.name] = ev.target.checked
+        null
+
+    renderEdit: (label) ->
+        props = _.omit(@props, 'label')
+        toggle = <Lanes.Vendor.ReactToggle
+            onChange={@handleToggleChange}
+            checked={!!@props.model[@props.name]}
+            defaultChecked={!!@props.model[@props.name]}
+            />
+        if @props.unstyled
+            toggle
+        else
+            <LC.FormGroup
+                {...props}
+                className={@formGroupClassNames()}
+                label={label}
+            >
+                {toggle}
+            </LC.FormGroup>

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

@@ -1,10 +1,10 @@
 class Lanes.Components.Tooltip extends Lanes.React.Component
 
-    TTProps: ['placement', 'positionLeft', 'positionTop', 'arrowOffsetLeft', 'arrowOffsetTop']
+    TTProps: ['id', '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}>
+        <BS.OverlayTrigger overlay={tooltip} placement='left' container={@context.viewport.lanes}>
             {@props.children}
         </BS.OverlayTrigger>

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

@@ -1,19 +1,33 @@
+@import "lanes/styles/bootstrap/variables";
+@import "lanes/styles/bootstrap/mixins";
+
+$lanes-field-margin: 6px;
+
 label.field {
     display: block;
 }
 .field {
-
-    .display, .read-only {
+    font-weight: normal;
+    .input-group {
         font-weight: normal;
-        padding: 6px 0;
-        margin-top: 5px;
-        height: 34px;
+        width: 100%;
     }
-    .display {
-        border-bottom: 1px solid $input-border;
+    &.display {
+        .input-group {
+            display: block;
+        }
+        .value {
+            padding-left: $lanes-field-margin;
+            padding-right: $lanes-field-margin;
+            display: block;
+            height: $lanes-field-value-height;
+            line-height:  $lanes-field-value-height;
+            border-bottom: 1px solid $input-border;
+        }
+
     }
-    .read-only {
-        @extend .form-control;
+    &.read-only .input-group {
+        @extend .form-control !optional;
         padding: 6px 12px;
         cursor: not-allowed;
     }
@@ -21,15 +35,63 @@ label.field {
         padding: 0;
         font-size: 85%;
     }
-
+    &.read-only .title { margin-bottom: 5px; }
 }
 
-.field, .form-group {
-    .changeset {
+.field, {
+    .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: $color-rgba;
+        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%);
+        }
+    }
+    &.display {
+        &.toggle {
+            .value { border-bottom: 0; }
+            .react-toggle { cursor: inherit; }
+        }
+        &.editing .react-toggle { margin-top: 5px; }
+        .value span {
+            display: inline-block;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            width: 100%;
+        }
+    }
+    .label-title {
+        display: inline-block;
     }
+    label {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+    }
+    i.error {
+        margin-left: $lanes-field-margin;
+    }
+    .control-label {
+        margin-left: $lanes-field-margin;
+        margin-right: $lanes-field-margin;
+    }
+
 
 }
+
+.align-right{
+    .control-label, .value, .rw-widget input {text-align: right; }
+}
+.align-center{
+    .control-label, .value, .rw-widget input { text-align: center; }
+}

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

@@ -15,15 +15,13 @@ fieldset.collapsible {
             padding: 0 10px;
         }
     }
+    &.expanded {
+        legend:after { @extend .icon-minus-square-o:before; }
+    }
     &.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/image-saver.scss

@@ -0,0 +1,38 @@
+@import "../../styles/bootstrap/buttons";
+
+.image-saver {
+    &.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%;
+    }
+}

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

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

data/client/lanes/{styles/plugins → components/shared}/overlay.scss

@@ -7,7 +7,13 @@ $gray-darker: lighten(#000, 13.5%) !default;
 
 .overlay {
   position: absolute;
-  z-index: 31;
+  z-index: 11;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   .mask {
     background-color: white;
     height: 100%;
@@ -17,24 +23,31 @@ $gray-darker: lighten(#000, 13.5%) !default;
     top: 0;
     width: 100%;
   }
+  &.rounded {
+      .mask { border-radius: $border-radius-large; }
+  }
+
   .message {
-    min-width: 100px;
+    width: 450px;
+    max-width: 90%;
     min-height: 65px;
-    line-height: 1.35;
+    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;
-    width: 70%;
+
     i {
       display: inline-block;
       font-size: 3.2rem;
       float: left;
+      margin-right: 0.5rem;
       &.loading-spinner {
         background:url(image-path('images/lanes/ajax-loader.gif')) no-repeat;
         height: 32px;