lanes 0.1.9 → 0.1.9.5

data/client/lanes/workspace/ActiveScreenSwitcher.cjsx

@@ -0,0 +1,38 @@
+class TabView extends Lanes.React.Component
+
+    activate: ->
+        @model.active = true
+        null
+
+    close: ->
+        @model.remove()
+
+    render: ->
+        <li key={@model.cid} className={_.classnames(active: @model.active)}>
+            <a onClick={@activate} className='tab'>{@model.screen.title}</a>
+            <span onClick={@close} className='close'>×</span>
+        </li>
+
+
+class Lanes.Workspace.ActiveScreenSwitcher extends Lanes.React.Component
+
+    dataObjects:
+        collection: -> Lanes.Screens.Definitions.displaying
+
+    render: ->
+        <div className="menu-container">
+            <div className="active-screens">
+                <div className="scroller scroller-left">
+                    <i className="glyphicon glyphicon-chevron-left"/>
+                </div>
+                <div className="scroller scroller-right">
+                    <i className="glyphicon glyphicon-chevron-right"/>
+                </div>
+                <div className="wrapper">
+                    <ul className="nav nav-tabs">
+                        { @collection.map (view) ->
+                            <TabView key={view.id} model=view /> }
+                    </ul>
+                </div>
+            </div>
+        </div>

data/client/lanes/workspace/Extension.coffee

@@ -1,3 +1,9 @@
 class Lanes.Workspace.Extension extends Lanes.Extensions.Base
 
     identifier: "lanes-workspace"
+
+    setBootstrapData: (data) ->
+        Lanes.Workspace.Extension.uistate = new Lanes.Workspace.UIState
+
+    onAvailable: (viewport) ->
+        Lanes.Workspace.Extension.uistate.onBoot(viewport)

data/client/lanes/workspace/Layout.cjsx

@@ -0,0 +1,28 @@
+class Lanes.Workspace.Layout extends Lanes.React.Component
+
+    dataObjects:
+        uistate: -> Lanes.Workspace.Extension.uistate
+
+    childContextTypes:
+        uistate:  Lanes.PropTypes.State
+
+    getChildContext: ->
+        uistate: @uistate
+
+    componentWillMount: ->
+        @uistate.set(@props)
+
+    pageClasses: ->
+        _.classnames( 'page-container', @uistate.screen_menu_size,
+            {"popover_menu": @uistate.popover_menu}
+        )
+
+    render: ->
+        <div className="layout">
+            {@uistate.modalDialog?()}
+            <Lanes.Workspace.Navbar/>
+            <div className={@pageClasses()}>
+                <Lanes.Workspace.ScreensMenu/>
+                <Lanes.Workspace.ScreenView/>
+            </div>
+        </div>

data/client/lanes/workspace/Navbar.cjsx

@@ -0,0 +1,25 @@
+class Lanes.Workspace.Navbar extends Lanes.React.Component
+
+    contextTypes:
+        uistate: React.PropTypes.object.isRequired
+
+    switchMenu: ->
+        @context.uistate.nextSidebarState()
+
+    classNames: ->
+        _.classnames 'header-top', @model.screen_menu_preference,
+            "menu-hidden": !@model.screen_menu_shown
+
+    render: ->
+        <div className="header-top">
+            <div className="navbar-header">
+                <a className="navbar-brand logo" href="#">
+                    Lanes
+                </a>
+                <button className="screens-menu-toggle" onClick={@switchMenu} type="button">
+                    <span className="sr-only">Toggle navbar</span>
+                    <i className="icon"></i>
+                </button>
+            </div>
+            <Lanes.Workspace.ActiveScreenSwitcher/>
+        </div>

data/client/lanes/workspace/ScreenView.cjsx

@@ -0,0 +1,27 @@
+Screen = React.createClass
+
+    shouldComponentUpdate: ->
+        false
+
+    render: ->
+        React.createElement(@props.component)
+
+class Lanes.Workspace.ScreenView extends Lanes.React.Component
+    contextTypes:
+        uistate: React.PropTypes.object.isRequired
+
+    dataObjects:
+        displaying: -> Lanes.Screens.Definitions.displaying
+
+    bindDataEvents:
+        displaying: 'change:active remove add'
+
+    renderScreen: (screen) ->
+        <div key={screen.id} className={_.classnames("screen", active:screen.active)}>
+            <Screen component={screen.component()} />
+        </div>
+
+    render: ->
+        <div className={"page-content #{@context.uistate.layout_size}"}>
+            {@displaying.map @renderScreen}
+        </div>

data/client/lanes/workspace/ScreensMenu.cjsx

@@ -0,0 +1,57 @@
+class ScreenList extends Lanes.React.Component
+
+    activateScreen: ->
+        @model.display()
+
+    render: ->
+        <li>
+            <a href="#" onClick={@activateScreen}>
+                <span>{@model.title}</span><i className={"icon icon-#{@model.icon}"}></i>
+            </a>
+        </li>
+
+
+class ScreenGroup extends Lanes.React.Component
+
+    toggleActive: ->
+        @model.active = !@model.active
+        undefined
+
+    render: ->
+        screens = @model.screens().map (list) ->
+            <ScreenList model=list key=list.id />
+
+        <li className={_.classnames("group", active: @model.active)} onClick={@toggleActive}>
+            <a className="heading" href="#">
+                <span>{@model.title}</span><i className={"icon icon-#{@model.icon}"}></i>
+            </a>
+            <ul>{screens}</ul>
+        </li>
+
+class Lanes.Workspace.ScreensMenu extends Lanes.React.Component
+
+    dataObjects:
+        user: -> Lanes.current_user
+
+    renderGroup: (group) ->
+        <ScreenGroup model=group key=group.id />
+
+    logOut: ->
+        Lanes.current_user.logout()
+
+    render: ->
+        <div className="screens-menu">
+            <div className="screens-menu-content">
+                <ul className="navigation">
+                    {Lanes.Screens.Definitions.groups.available().map @renderGroup}
+                </ul>
+            </div>
+            <ul className="navigation">
+                <li className="group logout" data-tooltip-message="Log Out" data-placement="right">
+                    <a href="#" name="LogOut" onClick={@logOut}>
+                        <span>Log Out</span>
+                        <i className="icon icon-times"></i>
+                    </a>
+                </li>
+            </ul>
+        </div>

data/client/lanes/workspace/UIState.coffee

@@ -7,7 +7,7 @@ BREAKPOINTS = {
     lg: 1170
 }
 
-class Lanes.Workspace.UIState extends Lanes.Views.Base
+class Lanes.Workspace.UIState extends Lanes.Models.State
 
     session:
         screen_menu_preference: {
@@ -17,8 +17,11 @@ class Lanes.Workspace.UIState extends Lanes.Views.Base
         root:       'element'
         menu_view:  'any'
         width:      'number'
+        height:     'number'
         screen_menu_shown: 'boolean'
         layout: 'state'
+        modalDialog: 'react'
+        viewport:    'object'
 
     derived:
         menu_width:
@@ -29,7 +32,7 @@ class Lanes.Workspace.UIState extends Lanes.Views.Base
                     else 0
 
         layout_size:
-            deps: ['screens_width'], fn:->
+            deps: ['screens_width'], fn: ->
                 switch
                     when @screens_width < BREAKPOINTS.sm then 'xs'
                     when @screens_width < BREAKPOINTS.md then 'sm'
@@ -37,42 +40,40 @@ class Lanes.Workspace.UIState extends Lanes.Views.Base
                     else 'lg'
 
         popover_menu:
-            deps: ['width'], fn:->
+            deps: ['width'], fn: ->
                 # same as the below menu-hidden value on screen_menu_size
                 @width < BREAKPOINTS.md + MENU_NARROW_WIDTH
 
         screen_menu_size:
-            deps: ['width','screen_menu_preference'], fn: ->
+            deps: ['width', 'screen_menu_preference'], fn: ->
                 return @screen_menu_preference if @screen_menu_preference
-                width = this.width
                 switch
-                    when width < BREAKPOINTS.md + MENU_NARROW_WIDTH then 'menu-hidden'
-                    when width < BREAKPOINTS.lg + MENU_WIDE_WIDTH   then 'menu-narrow'
+                    when @width < BREAKPOINTS.md + MENU_NARROW_WIDTH then 'menu-hidden'
+                    when @width < BREAKPOINTS.lg + MENU_WIDE_WIDTH   then 'menu-narrow'
                     else 'menu-wide'
 
         screens_width:
-            deps: ['width','screen_menu_size'], fn: ->
+            deps: ['width', 'screen_menu_size'], fn: ->
                 @width - @menu_width
 
         screens_height:
             deps: ['height'], fn: ->
                 @height - NAVBAR_HEIGHT
 
-    modelEvents:
-        'change:width': 'setWidth'
-
-    constructor: ->
+    constructor:  ->
         super
-        this.setWidth(@model,@model.width)
+
+    onBoot: (@viewport) ->
+        this.listenToAndRun(@viewport, 'change:width change:height', @setSize)
         this.screen_menu_shown = false if this.tiny_screen
 
-    setWidth: (model,width)->
-        this.width = width
+    setSize: ->
+        this.set(_.pick(@viewport, 'width', 'height'))
 
     nextSidebarState: ->
         if ! @screen_menu_preference
             @screen_menu_preference = @screen_menu_size
         if @popover_menu
-            @screen_menu_preference = if @screen_menu_preference=="menu-wide" then "menu-hidden" else "menu-wide"
+            @screen_menu_preference = if @screen_menu_preference == "menu-wide" then "menu-hidden" else "menu-wide"
         else
             this.toggle('screen_menu_preference')

data/client/lanes/workspace/index.js

@@ -1,2 +1,7 @@
-//= require ./WorkspaceView
-//= require_tree .
+//=require ./Extension
+//=require ./UIState
+//=require ./ScreensMenu
+//=require ./ActiveScreenSwitcher
+//=require ./ScreenView
+//=require ./Navbar
+//=require ./Layout

data/client/lanes/workspace/styles.scss

@@ -8,13 +8,10 @@
   position: relative;
   min-height: 10px; // needs height for resizing sensor to function
 }
-
 @import "styles/layout";
 @import "styles/header";
 @import "styles/tabs";
 @import "styles/screens";
 @import "styles/toolbar";
 @import "styles/forms";
-@import "styles/changes-notification";
 @import "styles/keybindings";
-

data/client/lanes/workspace/styles/forms.scss

@@ -1,75 +1,4 @@
-
-label.skr {
-  white-space: nowrap;
-  b {
-    display: inline-block;
-    font-weight: 600;
-    text-indent: 5px;
-  }
-  input {
-    @extend .form-control;
-    margin-top: 5px;
-  }
-  .input-group-btn {
-    .btn {
-      margin-top: 5px;
-    }
-  }
-  div.ro-input {
-    margin-top: 5px;
-    font-weight: normal;
-    @extend .form-control;
-    cursor: not-allowed;
-  }
-
-  .feedback {
-    &.error{
-      @extend .font-icon-display;
-      @extend .icon-warning;
-      @extend .form-control-feedback;
-      display: inline;
-    }
-    display: none;
-    margin-right: 4px;
-    cursor: pointer;
-  }
-  select{
-    display: block;
-    @extend .form-control;
-    margin-top: 5px;
-  }
-}
-
-fieldset.bordered {
-  border: 1px solid $input-border;
-  border-radius: $border-radius-large;
-  padding: 10px;
-  legend {
-    display: inline-block;
-    width: auto;
-    border: none;
-    margin: 0;
-    padding: 0 5px;
-    margin-bottom: 0;
-    .toggled {
-      &:after {
-        @extend .icon-sort-down:before;
-        font-family: 'skr-icon';
-        cursor: pointer;
-      }
-    }
-  }
-
-}
-
-.skr .updated, .skr div.ro-input.updated {
-  $color-rgba: rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6);
-  border-color: $color-rgba;
-  outline: 0;
-  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
-}
-
 .section-header {
-  @extend .page-header;
-  margin: ($line-height-computed/2) 0;
+    @extend .page-header;
+    margin: ($line-height-computed/2) 0;
 }

data/client/lanes/workspace/styles/header.scss

@@ -39,6 +39,4 @@
         margin: 12px 0 12px 0px;
         border-radius: 0;
     }
-    
-
 }

data/client/lanes/workspace/styles/layout.scss

@@ -7,7 +7,13 @@
     margin-left: 240px;
     padding: 0px;
 
-
+    .screen {
+        display: none;
+        &.active {
+            display: block
+        }
+    }
+    
 }
 
 
@@ -26,6 +32,7 @@
 
     background-color: $navbar-inverse-bg;
 
+    
     .navigation {
         border-bottom: 1px solid $navbar-inverse-border;
         list-style: none outside none;
@@ -65,7 +72,7 @@
                     background-color: $navbar-inverse-link-active-bg;
                     span {
                         &:after {
-                            font-family: 'lanes-icon';
+                            font-family: $lanes-icon-font;
                             color: #339900;
                             content: "\00a0\00a0\f067";
                         }

data/client/lanes/workspace/styles/screens.scss

@@ -5,63 +5,4 @@
     .toolbar {
         margin-top: 10px;
     }
-
-    .toolbar{
-        @extend .navbar;
-        @extend .navbar-default;
-
-        .btn {
-            @extend .btn-default;
-            @extend .navbar-btn;
-        }
-
-        .arrow {
-            border-style: solid;
-
-            border-left-color: transparent;
-            border-right-color: transparent;
-
-            border-bottom-color: $popover-title-bg;
-            border-top-color: $popover-title-bg !important; 
-
-            border-width: 0 9px 9px;
-            height: 0;
-            left: 7px;
-            margin-top: 10px;
-            opacity: 1;
-            position: absolute;
-            top: -18px;
-            transition: all 0.25s ease 0s;
-            width: 0;
-            z-index: 10;
-        }
-        .navbar-left {
-            float: left;
-        }
-        .navbar-right{
-            float: right;
-            .arrow {
-                left: unset;
-                right: 10px;
-            }
-        }
-
-        .dropdown-toggle {
-            .badge{
-                padding: 2px 2px 0;
-                position: relative;
-                font-size: 70%;
-                top: -6px;
-                right: 5px;
-            }
-            position: relative;
-            padding-right: 2px;
-            i {
-                /* position: absolute; */
-                /* left: 0px; */
-            }
-        }
-
-    }
-
 }