lanes 0.1.9.5 → 0.3.0

data/client/lanes/vendor/widgets.scss

@@ -29,30 +29,6 @@ input.rw-input::-moz-focus-inner {
   padding: 0;
 }
 /* -------------- */
-.rw-sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-.rw-widget,
-.rw-widget * {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.rw-widget:before,
-.rw-widget *:before,
-.rw-widget:after,
-.rw-widget *:after {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
 .rw-i {
   display: inline-block;
   font-family: FontAwesome;
@@ -65,27 +41,51 @@ input.rw-input::-moz-focus-inner {
   -moz-osx-font-smoothing: grayscale;
 }
 .rw-i-caret-down:before {
-  content: '\f0d7';
+  content: '\F0D7';
 }
 .rw-i-caret-up:before {
-  content: '\f0d8';
+  content: '\F0D8';
 }
 .rw-i-caret-left:before {
-  content: '\f0d9';
+  content: '\F0D9';
 }
 .rw-i-caret-right:before {
-  content: '\f0da';
+  content: '\F0DA';
 }
 .rw-i-clock-o:before {
-  content: '\f017';
+  content: '\F017';
 }
 .rw-i-calendar:before {
-  content: '\f073';
+  content: '\F073';
 }
 .rw-i-search:before {
-  content: '\f002';
+  content: '\F002';
 }
 /* for debugging */
+.rw-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.rw-widget,
+.rw-widget * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.rw-widget:before,
+.rw-widget *:before,
+.rw-widget:after,
+.rw-widget *:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
 .rw-widget {
   outline: 0;
   -moz-background-clip: border-box;
@@ -93,7 +93,7 @@ input.rw-input::-moz-focus-inner {
   background-clip: border-box;
 }
 .rw-btn {
-  color: #333333;
+  color: #333;
   line-height: 2.286em;
   display: inline-block;
   margin: 0;
@@ -112,7 +112,7 @@ input.rw-input::-moz-focus-inner {
   color: #555555;
   height: 2.286em;
   padding: 0.429em 0.857em;
-  background-color: #ffffff;
+  background-color: #fff;
 }
 .rw-input[disabled] {
   -webkit-box-shadow: none;
@@ -120,7 +120,7 @@ input.rw-input::-moz-focus-inner {
   cursor: not-allowed;
   opacity: 1;
   background-color: #eeeeee;
-  border-color: #cccccc;
+  border-color: #ccc;
 }
 .rw-input[readonly] {
   cursor: not-allowed;
@@ -129,7 +129,7 @@ input.rw-input::-moz-focus-inner {
   position: relative;
   width: 100%;
   padding-right: 1.9em;
-  border: #cccccc 1px solid;
+  border: #ccc 1px solid;
   border-radius: 4px;
   margin-bottom: 2px;
 }
@@ -172,14 +172,14 @@ input.rw-input::-moz-focus-inner {
   font-weight: 600;
 }
 .rw-state-focus {
-  background-color: #ffffff;
+  background-color: #fff;
   border: #66afe9 1px solid;
-  color: #333333;
+  color: #333;
 }
 .rw-state-selected {
   background-color: #adadad;
   border: #adadad 1px solid;
-  color: #333333;
+  color: #333;
 }
 .rw-state-disabled {
   -webkit-box-shadow: none;
@@ -243,15 +243,29 @@ ul.rw-list > li.rw-list-option:hover,
 }
 ul.rw-list > li.rw-list-option.rw-state-focus,
 .rw-selectlist > li.rw-list-option.rw-state-focus {
-  background-color: #ffffff;
+  background-color: #fff;
   border: #66afe9 1px solid;
-  color: #333333;
+  color: #333;
 }
 ul.rw-list > li.rw-list-option.rw-state-selected,
 .rw-selectlist > li.rw-list-option.rw-state-selected {
   background-color: #adadad;
   border: #adadad 1px solid;
-  color: #333333;
+  color: #333;
+}
+ul.rw-list > li.rw-list-option.rw-state-disabled,
+ul.rw-list > li.rw-list-option.rw-state-readonly,
+.rw-selectlist > li.rw-list-option.rw-state-disabled,
+.rw-selectlist > li.rw-list-option.rw-state-readonly {
+  color: #777777;
+  cursor: not-allowed;
+}
+ul.rw-list > li.rw-list-option.rw-state-disabled:hover,
+ul.rw-list > li.rw-list-option.rw-state-readonly:hover,
+.rw-selectlist > li.rw-list-option.rw-state-disabled:hover,
+.rw-selectlist > li.rw-list-option.rw-state-readonly:hover {
+  background: none;
+  border-color: transparent;
 }
 ul.rw-list.rw-list-grouped > li.rw-list-optgroup,
 .rw-selectlist.rw-list-grouped > li.rw-list-optgroup {
@@ -283,8 +297,8 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   height: auto;
 }
 .rw-widget {
-  background-color: #ffffff;
-  border: #cccccc 1px solid;
+  background-color: #fff;
+  border: #ccc 1px solid;
   border-radius: 4px;
 }
 .rw-widget .rw-input {
@@ -298,10 +312,10 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   border-top-right-radius: 4px;
 }
 .rw-widget > .rw-select {
-  border-left: #cccccc 1px solid;
+  border-left: #ccc 1px solid;
 }
 .rw-rtl.rw-widget > .rw-select {
-  border-right: #cccccc 1px solid;
+  border-right: #ccc 1px solid;
   border-left: none;
 }
 .rw-widget.rw-state-focus,
@@ -321,7 +335,7 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   -webkit-box-shadow: none;
   box-shadow: none;
   background-color: #eeeeee;
-  border-color: #cccccc;
+  border-color: #ccc;
 }
 .rw-combobox,
 .rw-datetimepicker,
@@ -348,29 +362,30 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
 .rw-datetimepicker > .rw-input::-moz-placeholder,
 .rw-numberpicker > .rw-input::-moz-placeholder,
 .rw-dropdownlist > .rw-input::-moz-placeholder {
-  color: #999999;
+  color: #999;
   opacity: 1;
 }
 .rw-combobox > .rw-input:-ms-input-placeholder,
 .rw-datetimepicker > .rw-input:-ms-input-placeholder,
 .rw-numberpicker > .rw-input:-ms-input-placeholder,
 .rw-dropdownlist > .rw-input:-ms-input-placeholder {
-  color: #999999;
+  color: #999;
 }
 .rw-combobox > .rw-input::-webkit-input-placeholder,
 .rw-datetimepicker > .rw-input::-webkit-input-placeholder,
 .rw-numberpicker > .rw-input::-webkit-input-placeholder,
 .rw-dropdownlist > .rw-input::-webkit-input-placeholder {
-  color: #999999;
+  color: #999;
 }
 .rw-placeholder {
-  color: #999999;
+  color: #999;
 }
 .rw-select {
   position: absolute;
   width: 1.9em;
   height: 100%;
   right: 0;
+  top: 0;
 }
 .rw-select.rw-btn,
 .rw-select > .rw-btn {
@@ -449,8 +464,8 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   border-top-left-radius: 0;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
-  border: #cccccc 1px solid;
-  background: #ffffff;
+  border: #ccc 1px solid;
+  background: #fff;
   padding: 2px;
   overflow: auto;
   margin-bottom: 10px;
@@ -475,6 +490,9 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   left: -11px;
   right: -11px;
 }
+.rw-widget.rw-state-focus .rw-popup-container {
+  z-index: 1015;
+}
 .rw-popup-container.rw-dropup {
   top: auto;
   bottom: 100%;
@@ -505,10 +523,10 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   height: 100%;
 }
 .rw-calendar {
-  background-color: #ffffff;
+  background-color: #fff;
 }
 .rw-calendar thead > tr {
-  border-bottom: 2px solid #cccccc;
+  border-bottom: 2px solid #ccc;
 }
 .rw-calendar .rw-header {
   padding-bottom: 5px;
@@ -528,7 +546,7 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   cursor: not-allowed;
 }
 .rw-calendar .rw-footer {
-  border-top: 1px solid #cccccc;
+  border-top: 1px solid #ccc;
 }
 .rw-calendar .rw-footer .rw-btn {
   width: 100%;
@@ -623,7 +641,7 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   border-color: transparent;
 }
 .rw-multiselect {
-  background-color: #ffffff;
+  background-color: #fff;
 }
 .rw-multiselect:hover {
   border-color: #adadad;
@@ -646,7 +664,6 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   right: 3px;
 }
 .rw-multiselect-wrapper > .rw-input {
-  float: left;
   outline: 0;
   border-width: 0;
   line-height: normal;
@@ -654,14 +671,14 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   max-width: 100%;
 }
 .rw-multiselect-wrapper > .rw-input::-moz-placeholder {
-  color: #999999;
+  color: #999;
   opacity: 1;
 }
 .rw-multiselect-wrapper > .rw-input:-ms-input-placeholder {
-  color: #999999;
+  color: #999;
 }
 .rw-multiselect-wrapper > .rw-input::-webkit-input-placeholder {
-  color: #999999;
+  color: #999;
 }
 .rw-state-readonly > .rw-multiselect-wrapper,
 .rw-state-disabled > .rw-multiselect-wrapper {
@@ -671,7 +688,7 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   float: right;
 }
 .rw-multiselect-create-tag {
-  border-top: 1px #cccccc solid;
+  border-top: 1px #ccc solid;
   padding-top: 5px;
   margin-top: 5px;
 }
@@ -679,6 +696,7 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   margin: 0;
   padding-left: 0;
   list-style: none;
+  display: inline;
   padding-right: 0;
 }
 .rw-multiselect-taglist > li {
@@ -687,23 +705,21 @@ ul.rw-list.rw-list-grouped > li.rw-list-option,
   padding-right: 5px;
 }
 .rw-multiselect-taglist > li {
-  float: left;
   display: inline-block;
   margin: 1px;
   padding: 0.214em 0.15em 0.214em 0.4em;
   line-height: 1.4em;
   text-align: center;
-  vertical-align: middle;
   white-space: nowrap;
   border-radius: 3px;
-  border: 1px solid #cccccc;
-  background-color: #cccccc;
+  border: 1px solid #ccc;
+  background-color: #ccc;
   cursor: pointer;
 }
 .rw-multiselect-taglist > li.rw-state-focus {
-  background-color: #ffffff;
+  background-color: #fff;
   border: #66afe9 1px solid;
-  color: #333333;
+  color: #333;
 }
 .rw-multiselect-taglist > li.rw-state-readonly,
 .rw-multiselect-taglist > li.rw-state-disabled,

data/client/lanes/workspace/Layout.cjsx

@@ -1,7 +1,8 @@
 class Lanes.Workspace.Layout extends Lanes.React.Component
 
     dataObjects:
-        uistate: -> Lanes.Workspace.Extension.uistate
+        uistate:  -> Lanes.Workspace.Extension.uistate
+        viewport: -> @context.viewport
 
     childContextTypes:
         uistate:  Lanes.PropTypes.State
@@ -9,20 +10,29 @@ class Lanes.Workspace.Layout extends Lanes.React.Component
     getChildContext: ->
         uistate: @uistate
 
-    componentWillMount: ->
-        @uistate.set(@props)
-
     pageClasses: ->
         _.classnames( 'page-container', @uistate.screen_menu_size,
             {"popover_menu": @uistate.popover_menu}
         )
 
+    componentWillMount: ->
+        @uistate.set(@props)
+        useBasename = Lanes.Vendor.BrowserHistory.useBasename
+        history = useBasename(Lanes.Vendor.BrowserHistory.createHistory)({
+            basename: Lanes.config.root_path
+        })
+        @historyStopListening = history.listen (location) ->
+            Lanes.Screens.Definitions.setBrowserLocation(location)
+        @setState({history})
+
+    componentWillUnmount: -> @historyStopListening()
+
     render: ->
         <div className="layout">
-            {@uistate.modalDialog?()}
-            <Lanes.Workspace.Navbar/>
+            <LC.Modal {...@context.viewport.modalProps} />
+            <Lanes.Workspace.Navbar history={@state.history} />
             <div className={@pageClasses()}>
-                <Lanes.Workspace.ScreensMenu/>
-                <Lanes.Workspace.ScreenView/>
+                <Lanes.Workspace.ScreensMenu history={@state.history} />
+                <Lanes.Workspace.ScreenView />
             </div>
         </div>

data/client/lanes/workspace/Modal.cjsx

@@ -0,0 +1,47 @@
+# This is the "real" dialog component. It's rendered to a div under document.body
+class Lanes.Workspace.Dialog extends Lanes.React.Component
+
+    propTypes:
+        title:     React.PropTypes.string.isRequired
+        onOk:      React.PropTypes.func.isRequired
+        onCancel:  React.PropTypes.func.isRequired
+        body:      React.PropTypes.element.isRequired
+        show:      React.PropTypes.bool
+        buttons:   React.PropTypes.object
+        className: React.PropTypes.string
+
+    getDefaultProps: ->
+        buttons: {'Cancel': 'default', 'OK': 'primary'}
+
+    getInitialState: ->
+        show: true
+
+    componentWillReceiveProps: (nextProps) ->
+        @setState(show: nextProps.show) if nextProps.show?
+
+    _hide: ->
+        @setState(show: false)
+
+    hide: ->
+        @_hide()
+        @props.onCancel()
+
+    render: ->
+        return null unless @state.show
+
+        buttons = for name, style of @props.buttons
+            <BS.Button key={name} className={name}
+              onClick={_.partial(@props.onButton, name)}>{name}</BS.Button>
+
+        classes = _.classnames('layout-dialog', @props.className)
+
+        <BS.Modal.Dialog>
+            <BS.Modal.Header>
+                <BS.Modal.Title>{@props.title}</BS.Modal.Title>
+            </BS.Modal.Header>
+
+            <BS.Modal.Body>{@props.body}</BS.Modal.Body>
+
+            <BS.Modal.Footer>{@buttons}</BS.Modal.Footer>
+
+        </BS.Modal.Dialog>