lanes 0.1.9.5 → 0.3.0

data/client/lanes/workspace/Navbar.cjsx

@@ -1,4 +1,11 @@
 class Lanes.Workspace.Navbar extends Lanes.React.Component
+    dataObjects:
+        settings: -> Lanes.config.system_settings
+
+    propTypes:
+        history: React.PropTypes.shape(
+            push: React.PropTypes.func
+        ).isRequired
 
     contextTypes:
         uistate: React.PropTypes.object.isRequired
@@ -10,16 +17,23 @@ class Lanes.Workspace.Navbar extends Lanes.React.Component
         _.classnames 'header-top', @model.screen_menu_preference,
             "menu-hidden": !@model.screen_menu_shown
 
+    Logo: ->
+        if @settings.logo?.url
+            <img src={@settings.logo.thumb.url} />
+        else
+            <span>Lanes</span>
+
     render: ->
+
         <div className="header-top">
             <div className="navbar-header">
                 <a className="navbar-brand logo" href="#">
-                    Lanes
+                    <@Logo />
                 </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/>
+            <Lanes.Workspace.Tabs history={@props.history} />
         </div>

data/client/lanes/workspace/ScreenView.cjsx

@@ -1,10 +1,10 @@
 Screen = React.createClass
 
+    displayName: 'Screen'
     shouldComponentUpdate: ->
         false
-
     render: ->
-        React.createElement(@props.component)
+        React.createElement(@props.screen.component(), @props.screen.props)
 
 class Lanes.Workspace.ScreenView extends Lanes.React.Component
     contextTypes:
@@ -12,16 +12,23 @@ class Lanes.Workspace.ScreenView extends Lanes.React.Component
 
     dataObjects:
         displaying: -> Lanes.Screens.Definitions.displaying
+        allScreens: -> Lanes.Screens.Definitions.all
 
     bindDataEvents:
         displaying: 'change:active remove add'
+        allScreens: 'change:loading'
 
     renderScreen: (screen) ->
         <div key={screen.id} className={_.classnames("screen", active:screen.active)}>
-            <Screen component={screen.component()} />
+            <Screen screen={screen} />
         </div>
 
+    renderLoading: ->
+        screen = Lanes.Screens.Definitions.all.findWhere(loading: true)
+        <LC.NetworkActivityOverlay visible model={screen} message="Loading #{screen.title}…" />
+
     render: ->
         <div className={"page-content #{@context.uistate.layout_size}"}>
+            {@renderLoading() if Lanes.Screens.Definitions.all.isLoading()}
             {@displaying.map @renderScreen}
         </div>

data/client/lanes/workspace/ScreensMenu.cjsx

@@ -1,40 +1,56 @@
 class ScreenList extends Lanes.React.Component
+    propTypes:
+        history: React.PropTypes.shape(
+            push: React.PropTypes.func
+        ).isRequired
 
     activateScreen: ->
-        @model.display()
+        @model.display().then (screen) =>
+            @props.history.push(screen.historyUrl())
 
     render: ->
         <li>
             <a href="#" onClick={@activateScreen}>
-                <span>{@model.title}</span><i className={"icon icon-#{@model.icon}"}></i>
+                <span>{@model.title}</span><LC.Icon type={@model.icon} />
             </a>
         </li>
 
 
 class ScreenGroup extends Lanes.React.Component
 
+    propTypes:
+        history: React.PropTypes.shape(
+            push: React.PropTypes.func
+        ).isRequired
+
     toggleActive: ->
         @model.active = !@model.active
         undefined
 
     render: ->
-        screens = @model.screens().map (list) ->
-            <ScreenList model=list key=list.id />
+        screens = @model.screens().map (list) =>
+            <ScreenList {...@props} 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>
+                <span>{@model.title}</span>
+                <i className={"icon icon-#{@model.icon}"}></i>
             </a>
             <ul>{screens}</ul>
         </li>
 
 class Lanes.Workspace.ScreensMenu extends Lanes.React.Component
 
+    propTypes:
+        history: React.PropTypes.shape(
+            push: React.PropTypes.func
+        ).isRequired
+
     dataObjects:
         user: -> Lanes.current_user
 
     renderGroup: (group) ->
-        <ScreenGroup model=group key=group.id />
+        <ScreenGroup {...@props} model=group key=group.id />
 
     logOut: ->
         Lanes.current_user.logout()
@@ -50,7 +66,7 @@ class Lanes.Workspace.ScreensMenu extends Lanes.React.Component
                 <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>
+                        <LC.Icon type='times' />
                     </a>
                 </li>
             </ul>

data/client/lanes/workspace/Tabs.cjsx

@@ -0,0 +1,55 @@
+class TabView extends Lanes.React.Component
+
+    setDataState: (nextState) ->
+        if @model.active
+            _.dom(document.head).qs('title').text = @model.title()
+            @props.history.replace(@model.historyUrl())
+        if Lanes.Screens.Definitions.displaying.length is 0
+            @props.history.push('/')
+        @setState(nextState)
+
+    propTypes:
+        history: React.PropTypes.shape(
+            push: React.PropTypes.func
+        ).isRequired
+
+    activate: ->
+        @props.history.push(@model.historyUrl())
+        null
+
+    close: -> @model.remove()
+
+    render: ->
+        <li key={@model.cid} className={_.classnames(active: @model.active)}>
+            <a onClick={@activate} className='tab'>{@model.title()}</a>
+            <LC.Icon type={@model.screen.icon} />
+            <span onClick={@close} className='close'>×</span>
+        </li>
+
+
+class Lanes.Workspace.Tabs extends Lanes.React.Component
+    propTypes:
+        history: React.PropTypes.shape(
+            push: React.PropTypes.func
+        ).isRequired
+
+    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 {...@props} key={view.id} model=view /> }
+                    </ul>
+                </div>
+            </div>
+        </div>

data/client/lanes/workspace/UIState.coffee

@@ -14,14 +14,13 @@ class Lanes.Workspace.UIState extends Lanes.Models.State
             type: 'string',
             values: [ 'menu-wide', 'menu-narrow', 'menu-hidden' ]
         }
-        root:       'element'
-        menu_view:  'any'
-        width:      'number'
-        height:     'number'
+        root:      'element'
+        menu_view: 'any'
+        width:     'number'
+        height:    'number'
+        layout:    'state'
+        viewport:  'object'
         screen_menu_shown: 'boolean'
-        layout: 'state'
-        modalDialog: 'react'
-        viewport:    'object'
 
     derived:
         menu_width:
@@ -54,7 +53,7 @@ class Lanes.Workspace.UIState extends Lanes.Models.State
 
         screens_width:
             deps: ['width', 'screen_menu_size'], fn: ->
-                @width - @menu_width
+                @width - ( if @popover_menu then 0 else @menu_width )
 
         screens_height:
             deps: ['height'], fn: ->

data/client/lanes/workspace/index.js

@@ -1,7 +1,8 @@
+//=require ./mixins
 //=require ./Extension
 //=require ./UIState
 //=require ./ScreensMenu
-//=require ./ActiveScreenSwitcher
+//=require ./Tabs
 //=require ./ScreenView
 //=require ./Navbar
 //=require ./Layout

data/client/lanes/workspace/mixin.coffee

@@ -0,0 +1,11 @@
+Lanes.Workspace.Mixins.Viewport = {
+
+    contextTypes:
+        viewport: Lanes.PropTypes.State
+
+}
+
+
+Object.defineProperty Lanes.React.Mixins.Viewport, 'uistate',
+    get: ->
+        @context.viewport

data/client/lanes/workspace/mixins/UIState.coffee

@@ -0,0 +1,8 @@
+Lanes.Workspace.Mixins.UIState = {
+    contextTypes:
+        uistate: Lanes.PropTypes.State
+}
+
+Object.defineProperty Lanes.React.Mixins.Viewport, 'uistate',
+    get: ->
+        @context.viewport

data/client/lanes/workspace/mixins/index.js

@@ -0,0 +1,3 @@
+//=require_self
+//=require_tree .
+Lanes.namespace("Workspace.Mixins")

data/client/lanes/workspace/styles.scss

@@ -1,3 +1,5 @@
+$workspace-header-height: 50px;
+
 @import "lanes/styles/bootstrap";
 @import "lanes/styles/fonts";
 // extensions are rooted at .lanes
@@ -12,6 +14,5 @@
 @import "styles/header";
 @import "styles/tabs";
 @import "styles/screens";
-@import "styles/toolbar";
 @import "styles/forms";
 @import "styles/keybindings";

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

@@ -3,7 +3,7 @@
     @extend .navbar-inverse;
     @extend .navbar-fixed-top;
     z-index: 20;
-    height: 50px;
+    height: $workspace-header-height;
     border-radius: 0;
     margin: 0;
     border: 0;
@@ -25,6 +25,12 @@
         color: rgb(205, 208, 212);
         font-size: 30px;
         text-shadow: rgb(143, 112, 112) 2px 2px 4px;
+        padding: 0;
+        overflow: hidden;
+        img {
+            width: 100%;
+            height: 100%;
+        }
     }
 
     .navbar-toggle, .screens-menu-toggle {
@@ -39,4 +45,20 @@
         margin: 12px 0 12px 0px;
         border-radius: 0;
     }
+
+    .nav-tabs {
+        li {
+            i {
+                position: absolute;
+                left: 2px;
+                top: 2px;
+                font-size: 12px;
+                color: darken(#333333, 10%);
+            }
+            &.active i {
+                color: lightgrey;
+            }
+        }
+    }
+
 }

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

@@ -1,38 +1,42 @@
+.layout {
+    height: 100%;
+    .header-top, .screens-menu {
+        position: fixed;
+    }
+}
+
+.page-container {
+    height: calc(100% - #{$workspace-header-height});
+    .screens-menu {
+        width: 240px;
+        z-index: 20;
+        left: 0;
+        top: 50px;
+        bottom: 0;
+    }
+}
 
 .page-content {
     @extend .container-fluid;
+    overflow-x: hidden;
     position: relative;
-    min-height: 500px;
+    top: 50px;
     transition: all 0.15s ease-in-out 0s;
     margin-left: 240px;
-    padding: 0px;
-
+    padding: 0 0 20px 0;
+    height: 100%;
     .screen {
+        height: 100%;
         display: none;
+        > div { min-height: 100%; }
         &.active {
             display: block
         }
     }
-    
-}
-
-
-.page-container {
-    .screens-menu {
-        width: 240px;
-        z-index: 26;
-        left: 0;
-        top: 50px;
-        position: absolute;
-        bottom: 0;
-    }
 }
 
 .screens-menu {
-
     background-color: $navbar-inverse-bg;
-
-    
     .navigation {
         border-bottom: 1px solid $navbar-inverse-border;
         list-style: none outside none;
@@ -110,8 +114,6 @@
                 }
             }
         }
-
-
         .logout>a {
             border-bottom: 2px solid #49565d;
             i {
@@ -119,7 +121,6 @@
                 top: 6px;
             }
         }
-
     }
 }
 
@@ -205,12 +206,13 @@
     }
 }
 
-.popover-menu {
+
+.popover_menu {
     .page-content {
         margin-left: 0px;
     }
     .screens-menu {
 
     }
-    
+
 }

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

@@ -1,8 +1,4 @@
 .screen {
     padding: 5px;
-    //  overflow: hidden;
     width: 100%;
-    .toolbar {
-        margin-top: 10px;
-    }
 }

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

@@ -12,7 +12,7 @@
         overflow-x: visible;
         overflow-y: auto;
         border: 0;
-        top: 5px;
+        top: 0;
         transition: all 0.15s ease-in-out 0s;
         overflow-x: visible;
         overflow-y: auto;
@@ -42,7 +42,7 @@
                 overflow:hidden;
                 padding:5px;
                 height:45px;
-
+                top: 5px;
             }
             .nav {
                 position:absolute;
@@ -122,10 +122,8 @@
     }
 
     .active-screens {
-
-        height: 45px;
+        height: 50px;
         padding: 0 5px;
-
         .nav-tabs {
             border-bottom: 0;
             position: absolute;
@@ -138,11 +136,6 @@
             top: 0px;
         }
 
-        /* a { */
-        /*   white-space: nowrap; */
-        /* } */
-
     }
 
-
 }