lanes 0.1.9.5 → 0.3.0

data/client/lanes/components/shared/resize-sensor.scss

@@ -0,0 +1,30 @@
+.lanes-resize-sensor {
+
+    position: relative;
+
+    .resize-triggers {
+        visibility: hidden;
+
+        &,
+        > div,
+        .contract-trigger:before {
+            content: " ";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        > div {
+            overflow: auto;
+        }
+
+        .contract-trigger:before {
+            width: 200%;
+            height: 200%;
+        }
+    }
+}

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

@@ -1,5 +1,10 @@
 @import "./fields";
 @import "./fieldset";
+@import "./resize-sensor";
+@import "./overlay";
+@import "./image-saver";
+@import "./throbber";
+@import "lanes/vendor/toggle";
 
 .record-finder {
     .icon { cursor: pointer; }
@@ -30,3 +35,11 @@
         display: inline;
     }
 }
+
+.job-executing {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .progress { width: 100%; }
+}

data/client/lanes/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/lanes/components/toolbar/RemoteChangeSets.cjsx

@@ -1,23 +1,31 @@
 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>
+        <div className='change' key={field.name}>
+            <div className="field">{@model.record_name} {_.field2title field.name}:</div>
+            <div className="from">{field.from}</div>
+            <div className='to'>{field.to}</div>
+        </div>
 
     render: ->
-        if @model.by
-            user = <LC.Tooltip placement='left' content={@model.by.email}>
-                <span>{@model.by.name}</span>
-            </LC.Tooltip>
+        user =
+            if @model.by?.email
+                <a href={"mailto:#{@model.by.email}"}>{@model.by.name}</a>
+            else if @model?.by.name
+                @model.by.name
+            else
+                'Unknown User'
+
+        user =
+            <LC.Tooltip id='user-email' placement='left'
+                content={Lanes.Vendor.Moment( @model.created_at ).fromNow()}
+            >{user}</LC.Tooltip>
 
         <div className="update">
             {user}
-            <p className="ago">{Lanes.Vendor.Moment( @model.created_at ).fromNow()}</p>
-            <p className="changes">
+            <div className="changes">
                 {@renderField(change) for change in @model.displayed_changes }
-            </p>
+            </div>
         </div>
 
 class Lanes.Components.Toolbar.RemoteChangeSets extends Lanes.React.Component
@@ -31,45 +39,10 @@ class Lanes.Components.Toolbar.RemoteChangeSets extends Lanes.React.Component
             <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}>
+        <BS.Nav navbar pullRight className="changes-notification">
+          <BS.DropdownButton id="record-changes" 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>

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

@@ -1,3 +1,27 @@
 class Lanes.Components.Toolbar.SaveButton extends Lanes.React.Component
 
+    propTypes:
+        commands: React.PropTypes.object.isRequired
+
+    onSave: ->
+        model = @props.commands.getModel()
+        if @isSavable(model)
+            @props.commands.saveModel()
+        else
+            model.unmaskInvalidField('all')
+
+    isSavable: (model) ->
+        if @props.commands.saveModel
+            @props.commands.isEditing() and model.isSavable
+        else
+            false
+
     render: ->
+        return null unless @props.commands.canEditModel()
+        model = @props.commands.getModel()
+        text = if model.isNew() then 'Create' else 'Save'
+        classNames = _.classnames('save', 'navbar-btn', 'control', {disabled: !@isSavable(model)})
+        <BS.Button navItem componentClass="button"
+            onClick={@onSave} className={classNames} >
+            <LC.Icon type="cloud-upload" />{text}
+        </BS.Button>

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

@@ -1,7 +1,9 @@
+##= require_self
+##= require ./SaveButton
+
 class Lanes.Components.Toolbar extends Lanes.React.Component
 
     propTypes:
-        onSave: React.PropTypes.func
         toggleEdit: Lanes.PropTypes.Model
         commands: React.PropTypes.object.isRequired
 
@@ -9,50 +11,35 @@ class Lanes.Components.Toolbar extends Lanes.React.Component
         changedModel: -> @props.commands.getModel()
 
     bindDataEvents:
-        changedModel: 'remote-update'
-
-    renderSaveButton: ->
-        <BS.Button navItem componentClass="button" disabled={!@isSavable()}
-            onClick={@props.commands.saveModel} className="save navbar-btn control">
-            <i className="icon icon-cloud-upload" />Save
-        </BS.Button>
+        changedModel: 'remote-update isSavable'
 
     renderResetButton: ->
         <BS.Button navItem componentClass="button"
-            onClick={@props.commands.resetModel} className="save navbar-btn control">
-            <i className="icon icon-undo" />Reset
+            onClick={@props.commands.resetModel} className="reset navbar-btn control">
+            <LC.Icon type="undo" />Reset
         </BS.Button>
 
-    renderEditToggle: ->
-        <form className="control navbar-form navbar-left" role="search">
-            <div className="form-group">
-                <label>
-                    <input type="checkbox" className="form-control"
-                        checked={@props.commands.isEditing()}
-                        onChange={@props.commands.toggleEdit} />
-                    Edit
-                </label>
-            </div>
-        </form>
-
-    isSavable: ->
-        if @props.commands.saveModel
-            if @props.commands.toggleEdit
-                @props.commands.isEditing()
-            else
-                true
-        else
-            false
+    EditToggle: ->
+        return null unless @props.commands.canEditModel()
+        <li navItem className="toggle control">
+           <label>
+               <Lanes.Vendor.ReactToggle
+               aria-labelledby="Editing"
+               onChange={@props.commands.toggleEdit}
+               defaultChecked={@props.commands.isEditing()} />
+               <span>Edit</span>
+            </label>
+        </li>
 
     renderSpacer: ->
         <span className="control spacer" />
 
     render: ->
-        <BS.Navbar className="lanes-toolbar">
-          <BS.Nav>
-            {@renderSaveButton()}
+        <BS.Nav bsStyle="pills" className="lanes-toolbar">
+            <Lanes.Components.Toolbar.SaveButton commands={@props.commands} />
             {@renderResetButton()}
-            {@renderEditToggle() if @props.commands.toggleEdit}
-          </BS.Nav>
-          <LC.Toolbar.RemoteChangeSets model=@changedModel />
-        </BS.Navbar>
+            {@props.children}
+            <div className="spacer"/>
+            <@EditToggle />
+            <LC.Toolbar.RemoteChangeSets model=@changedModel />
+        </BS.Nav>

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

@@ -5,9 +5,9 @@
             font-size: 28px;
         }
         .badge {
-            top: -14px;
+            top: -11px;
             position: relative;
-            left: -8px;
+            left: -11px;
             padding: 3px 7px;
             font-size: 75%;
         }
@@ -25,12 +25,16 @@
         .update {
             border-bottom: 1px solid $table-border-color;
             padding: 0.75rem;
-            p {
-                margin: 0;
+            .change > div {
                 margin-bottom: 2px;
             }
-            .field { font-size: 115%; }
-            .change span { margin-left: 5px; }
+            .from, .to {
+                margin-left: 0.5rem;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                max-width: 180px;
+                overflow: hidden;
+            }
         }
         .scroller {
             max-height: 350px;

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

@@ -1,19 +1,32 @@
 .lanes-toolbar {
 
-    padding-left: $navbar-padding-horizontal;
+    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;
 
     .btn {
         &.save {
             @extend .btn-primary;
+            // the save button needs to be clicable even if disabled
+            &.disabled {
+                pointer-events: all;
+                cursor: pointer;
+            }
         }
     }
-    // not sure why bootstrap doesn't set this properly?
-    .navbar-form  { margin-top: 15px; }
-    .form-control { height: inherit;  }
     .spacer {
-        height: 50px;
-        display: block;
-        float: left;
+        flex: 1;
     }
     .control {
         width: 100px;
@@ -26,7 +39,7 @@
         border-right-color: transparent;
 
         border-bottom-color: $popover-title-bg;
-        border-top-color: $popover-title-bg !important; 
+        border-top-color: $popover-title-bg !important;
 
         border-width: 0 9px 9px;
         height: 0;
@@ -46,6 +59,13 @@
     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/lanes/extension/Base.coffee

@@ -1,9 +1,8 @@
 class BaseExtension
 
-    setBootstrapModels: (data)->
-
-    @extended:(klass)->
+    @extended: (klass) ->
         Lanes.Extensions.register(klass)
 
-
-Lanes.Extensions.Base = Lanes.lib.MakeBaseClass( Lanes.Vendor.Ampersand.State, BaseExtension )
+Lanes.Extensions.Base = Lanes.lib.MakeBaseClass(
+    Lanes.Vendor.Ampersand.State, BaseExtension
+)

data/client/lanes/index.js

@@ -1,4 +1,3 @@
-//= require ./vendor/index
 //= require ./lib
 //= require ./extension
 //= require ./models

data/client/lanes/index.scss.erb

@@ -1,6 +1,16 @@
+@import "styles/variables";
 @import "styles/fonts";
+@import "styles/mixins/all";
+
+html { height: 100%;     }
+body { margin: 0; height: 100%; }
+.lanes-root {
+    height: 100%;
+    .lanes > div { height: 100%; }
+}
 
 .lanes {
+  height: 100%;
   @import "styles/global";
 
 <% Lanes::Extensions.each_asset(phase: :all, type: :css) do | asset | %>
@@ -18,5 +28,4 @@
   @import "<%= screen.css.remove(/\.css$/) + "/index.scss" %>";
 <% end %>
 
-  @import "styles/plugins/all";
 }