lanes 0.1.9.5 → 0.3.0

data/client/lanes/components/grid/PopOverMixin.cjsx

@@ -6,20 +6,30 @@ Lanes.Components.Grid.PopoverMixin = {
         Lanes.Components.Grid.EditingMixin
     ]
 
+    propTypes:
+        width:  React.PropTypes.number.isRequired
+        height: React.PropTypes.number.isRequired
+
+    getDefaultProps: ->
+        width:  280, height: 350
+
     renderPopover: (child) ->
-        props = if @props.editingEl
-            xpos = @props.editingEl.offsetLeft + this.props.editingEl.scrollWidth / 2
-            if @props.editingEl.offsetLeft + 20 > @props.grid.width() / 2
-                { placement: 'left', positionLeft: @props.editingEl.offsetLeft }
-            else
-                { placement: 'right', positionLeft: @props.editingEl.offsetLeft + (this.props.editingEl.offsetWidth / 2) }
+        props = _.extend({}, @props)
+        {position} = @props
+        if position.left > ((position.container.width / 2) - 150)
+            props.placement = 'left'
+            props.positionLeft = position.left - @props.width
         else
-            { placement: 'right', positionLeft: 200 }
+            props.placement = 'right'
+            props.positionLeft = position.left
+        props.arrowOffsetTop = Math.min(position.top, (@props.height - 75))
+        props.positionTop    = Math.max(5, position.top - props.arrowOffsetTop + (position.rowHeight / 2))
+
         <div className="editor po">
             <BS.Popover
+                id="editing-form"
                 {...props}
-                positionTop={@topOffset() - 100}
-                arrowOffsetTop={100 + @props.rowHeight / 2}
+                style={height: @props.height, width: @props.width}
                 title = "Edit #{@model.name || 'Record'}"
             >
                 {@renderEditingBody()}

data/client/lanes/components/grid/PopoverEditor.cjsx

@@ -1,8 +1,14 @@
 class Lanes.Components.Grid.PopoverEditor extends Lanes.React.Component
 
     mixins: [
-        Lanes.Components.Grid.PopOverMixin
+        Lanes.Components.Grid.PopoverMixin
     ]
 
+    renderBody: ->
+        <form>
+            {@renderFields()}
+            {@renderControls()}
+        </form>
+
     render: ->
         @renderPopover()

data/client/lanes/components/grid/RowEditor.cjsx

@@ -5,6 +5,6 @@ class Lanes.Components.Grid.RowEditor extends Lanes.React.Component
     mixins: [Lanes.Components.Grid.EditingMixin]
 
     render: ->
-        <div className="editor row" style={top: @topOffset() - 3}>
+        <div className="editor row" style={top: @props.position.top}>
             {@renderEditingBody()}
         </div>

data/client/lanes/components/grid/Selections.cjsx

@@ -0,0 +1,39 @@
+class CheckBox extends Lanes.React.BaseComponent
+    d: -> @props.query.results.xtraData(@props.row)
+
+    onChange: (ev) -> #, me, results, index) ->
+        @d().selected = ev.target.checked
+        @props.selections.onChange?(@props)
+        @forceUpdate()
+
+    render: ->
+        selected = @d().selected
+        selected = @props.selections.selectionDefault unless selected?
+        <input type="checkbox" checked={selected} onChange={@onChange} />
+
+
+class Lanes.Components.Grid.Selections
+    id: 'selected'
+    query: false
+    textAlign: 'center'
+    fixedWidth: 90
+    selectionDefault: true
+    sortBy: (row, indx, all) ->
+        false == this.xtraData(indx)?.selected
+
+    constructor: (options) ->
+        @onChange = options.onChange
+        @choices = {}
+        _.bindAll(@, 'onColumnClick')
+        @component = _.partial(@component, _, @)
+
+    onColumnClick: (ev, props) ->
+        unless ev.target.tagName is 'INPUT'
+            input = ev.target.querySelector('input')
+            xd = props.query.results.xtraData(props.rowNum)
+            xd.selected = input.checked = !input.checked
+        @onChange?(props)
+        ev.stopPropagation()
+
+    component: (props, me) ->
+        <CheckBox {...props} selections={me} />

data/client/lanes/components/grid/Toolbar.cjsx

@@ -1,14 +1,33 @@
-class Lanes.Components.Grid.Toolbar extends Lanes.React.Component
+class Lanes.Components.Grid.Toolbar extends Lanes.React.BaseComponent
 
     propTypes:
         addRecord: React.PropTypes.func
+        startEdit: React.PropTypes.func
+        toolbarChildren: React.PropTypes.oneOfType([
+            React.PropTypes.element,
+            React.PropTypes.arrayOf(React.PropTypes.element)
+        ])
 
-    addButton: ->
-        <BS.Button className="navbar-btn" onClick={@props.onAddRecord} bsSize='small'>
-            Add Row
+    onAddRecord: ->
+        model = @props.query.results.addBlankRow(0)
+        @props.startEdit(0)
+
+    AddButton: ->
+        return null unless @props.allowCreate
+        <BS.Button className="navbar-btn add-row pull-right"
+            onClick={@onAddRecord} bsSize='small'
+        >
+            <LC.Icon type="plus" />Add Row
         </BS.Button>
 
     render: ->
+        if ( ( false == @props.commands?.isEditing() or not @props.allowCreate ) and not @props.toolbarChildren )
+            return null
+
+        props = _.extend {}, @props,
+        <Lanes.Components.Grid.Toolbar key="toolbar" {...props} />
+
         <BS.Navbar className="toolbar">
-            {@addButton() if @props.onAddRecord}
+            {@props.toolbarChildren}
+            <@AddButton />
         </BS.Navbar>

data/client/lanes/components/grid/editors.scss

@@ -3,6 +3,11 @@
 $editor-background: #e6e6e6;
 $editor-border-color: #a8a8a8;
 $editor-border: 1px solid $editor-border-color;
+
+.toolbar {
+    .add-row { margin-right: 10px; }
+}
+
 .editor {
 
     .controls {
@@ -10,10 +15,10 @@ $editor-border: 1px solid $editor-border-color;
         position: relative;
         overflow: visible;
         .buttons {
-            width: 200px;
+            display: inline-block;
             margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
+            //display: flex;
+            //justify-content: space-between;
         }
     }
     // common styles shared between row, popover and other editors
@@ -32,61 +37,20 @@ $editor-border: 1px solid $editor-border-color;
                 height: 35px;
                 border-radius: 5px;
             }
+            &.center { justify-content: center;   }
+            &.right  { justify-content: flex-end; }
         }
         input {
             padding: 0 5px;
         }
-
-    }
-
-    // The row editor
-    &.row {
-        position: absolute;
-        width: 100%;
-        right: 25px;
-        left: 5px;
-        z-index:11;
-        min-height: 10px;
-
-        label { display: none; }
-
-        .fields {
-            flex-direction: row;
-            background: $editor-background;
-        }
-        .controls .buttons {
-            background: $editor-background;
-            padding: 2px 8px 8px;
-            position: relative;
-            border-bottom-left-radius: 7px;
-            border-bottom-right-radius: 7px;
-
-            // http://css-tricks.com/better-tabs-with-round-out-borders/
-            &:before,
-            &:after {
-                position: absolute;
-                top: -1px;
-                width: 7px;
-                height: 6px;
-                content: " ";
-            }
-            &:before {
-                left: -7px;
-                border-top-right-radius: 6px;
-                border-width: 1px 1px 0px 0px;
-                box-shadow: 3px 0px 0px $editor-background;
-            }
-            &:after {
-                right: -7px;
-                border-top-left-radius: 6px;
-                border-width: 1px 0px 0px 1px;
-                box-shadow: -3px 0px 0px $editor-background;
-            }
+        input[type=checkbox] {
+            width: inherit;
         }
     }
+
     //Popover editor
     .popover {
-
+        min-width: 250px;
         .fields {
             flex-direction: column;
         }
@@ -101,6 +65,14 @@ $editor-border: 1px solid $editor-border-color;
             border-top: 1px solid darken($editor-background, 15%);
             padding-top: 8px;
             margin-top: 8px;
+            .buttons {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                flex: 1;
+            }
         }
     }
 }
+
+@import "./row-editor";

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

@@ -1,3 +1,2 @@
-//= require 'lanes/vendor/grid'
 //= require ./Grid
 //= require_tree .

data/client/lanes/components/grid/row-editor.scss

@@ -0,0 +1,68 @@
+// The row editor
+.editor.row {
+    position: absolute;
+    width: 100%;
+    right: 25px;
+    left: 5px;
+    z-index:11;
+    min-height: 10px;
+
+    pointer-events: none;
+    .editing-body { pointer-events: none; }
+    .fields   { pointer-events: all;  }
+    .controls { pointer-events: none; }
+    .buttons  { pointer-events: all;  }
+
+    label { display: none; }
+
+    .fields {
+        flex-direction: row;
+        background: $editor-background;
+        .value {
+            width: 100%;
+            height: 35px;
+            border-radius: 5px;
+            flex: 1;
+            .rw-input { height: 35px; }
+        }
+        .field {
+            &.center input { text-align: center; }
+            &.right  input { text-align: right;  }
+        }
+    }
+    .controls .buttons {
+        background: $editor-background;
+        padding: 2px 8px 8px 8px;
+        position: relative;
+        border-bottom-left-radius: 7px;
+        border-bottom-right-radius: 7px;
+
+        button {
+            margin-left: 20px;
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+        // http://css-tricks.com/better-tabs-with-round-out-borders/
+        &:before,
+        &:after {
+            position: absolute;
+            top: -1px;
+            width: 7px;
+            height: 6px;
+            content: " ";
+        }
+        &:before {
+            left: -7px;
+            border-top-right-radius: 6px;
+            border-width: 1px 1px 0px 0px;
+            box-shadow: 3px 0px 0px $editor-background;
+        }
+        &:after {
+            right: -7px;
+            border-top-left-radius: 6px;
+            border-width: 1px 0px 0px 1px;
+            box-shadow: -3px 0px 0px $editor-background;
+        }
+    }
+}

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

@@ -1,8 +1,85 @@
-@import "lanes/vendor/grid";
-
 .grid-component {
+
+    min-height: 250px;
+    width: 100%;
+    border: 1px solid $table-border-color;
     position: relative;
 
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+
+    // styles shared between header and row
+    .header, .r {
+        display: flex;
+        flex-direction: row;
+
+        display: flex;
+        flex-direction: row;
+        .c {
+            padding: $table-cell-padding;
+            line-height: $line-height-base;
+
+            display: flex;
+            flex-direction: row;
+
+            &.center { justify-content: center;   }
+            &.right  { justify-content: flex-end; }
+
+        }
+        &:first-child {
+            border-top: 0;
+        }
+    }
+
+    .header {
+        min-height: 40px;
+        .c {
+            border: 1px solid $table-border-color;
+            align-items: flex-end;
+            display: inline-block;
+            cursor: pointer;
+
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+
+            &.sort {
+                &:after {
+                    content: $fa-var-sort;
+                    font-family: FontAwesome;
+                    position: relative;
+                    right: -5px;
+                    color: lightgray;
+                }
+                &.asc:after {
+                    color: gray;
+                    content: $fa-var-sort-asc;
+                }
+                &.desc:after {
+                    color: gray;
+                    content: $fa-var-sort-desc;
+                }
+            }
+        }
+    }
+
+    .grid-body {
+        border-top: 1px solid $table-border-color;
+        overflow: auto;
+        position: relative; // for absolutely positioned row editor
+        flex-grow: 1;
+        height: 1px;
+        .r:nth-child(odd) {
+            background-color: $table-bg-accent;
+        }
+        .c {
+            align-items: center;
+        }
+    }
+
     .toolbar {
         margin-bottom: 0;
         border-bottom-left-radius: 0;
@@ -11,5 +88,4 @@
 
     @import "./editors";
 
-
 }

data/client/lanes/components/modal/Modal.cjsx

@@ -1,36 +1,76 @@
 class Lanes.Components.Modal extends Lanes.React.Component
 
+    propTypes:
+        title:     React.PropTypes.string
+        onOk:      React.PropTypes.func
+        onCancel:  React.PropTypes.func
+        body:      React.PropTypes.func
+        show:      React.PropTypes.bool
+        buttons:   React.PropTypes.array
+        autoHide:  React.PropTypes.bool
+        className: React.PropTypes.string
+        size:      React.PropTypes.string
+
     contextTypes:
-        uistate: Lanes.PropTypes.State.isRequired
+        viewport: Lanes.PropTypes.State
+        uistate:  Lanes.PropTypes.State
 
-    dataObjects: ->
-        model: ->
-            @context.uistate
+    getDefaultProps: ->
+        size: 'large', autoHide: false
+        buttons: [
+            { title: 'Cancel' }
+            { title: 'OK', style: 'primary' }
+        ]
 
-    bindDataEvents: ->
-        model: "change:width"
+    getInitialState: ->
+        show: false
 
-    componentWillUnmount: ->
-        @context.uistate.modalDialog = null
+    onOkButton: -> @state.onOk?(this)
+    onCancelButton: -> @state.onCancel?(this)
+    onButton: (btn) ->
+        @selected = btn
+        @_hide() if @state.autoHide
+        if btn.eventKey is 'ok'
+            @onOkButton()
+        else
+            @onCancelButton()
 
-    propTypes:
-        title: React.PropTypes.node,
-        backdrop: React.PropTypes.oneOf(['static', true, false]),
-        keyboard: React.PropTypes.bool,
-        closeButton: React.PropTypes.bool,
-        animation: React.PropTypes.bool,
-        onRequestHide: React.PropTypes.func
+    componentWillReceiveProps: (nextProps) ->
+        @replaceState(nextProps)
+
+    _hide: ->
+        @context.viewport.modalProps.show = false
+        @setState(show: false)
 
-    onRequestHide: ->
-        @context.uistate.modalDialog = null
+    show: ->
+        @context.viewport.modalProps.show = true
+        @setState(show: true)
+
+    hide: ->
+        @_hide()
+        @state.onCancel?()
 
     render: ->
-        <BS.Modal
-            className={@context.uistate.layout_size}
-            bsSize="large"
-            onRequestHide={@onRequestHide}
-            {...@props} >
+        return null unless @state.show
+
+        buttons = for button in @state.buttons
+            if _.isString(button) then button = {title: button}
+            button.eventKey ||= (button.key or button.title).toLowerCase()
+            <BS.Button key={button.title}
+                bsStyle={button.style || 'default'} className={name}
+                onClick={_.partial(@onButton, button)}>{button.title}</BS.Button>
+
+        cls = _.classnames('lanes-modal', @state.className, @context.uistate?.layout_size)
+        Body = @state.body
+        <BS.Modal.Dialog className={cls} bsSize={@state.size} onHide={@_hide}>
+            <BS.Modal.Header>
+                <BS.Modal.Title>{@state.title}</BS.Modal.Title>
+            </BS.Modal.Header>
+
+            <BS.Modal.Body style={maxHeight: @context.viewport.height - 250}>
+                <Body modal={@} />
+            </BS.Modal.Body>
 
-            {@props.children}
+            <BS.Modal.Footer>{buttons}</BS.Modal.Footer>
 
-        </BS.Modal>
+        </BS.Modal.Dialog>