lanes 0.1.2 → 0.1.5

data/client/lanes/workspace/Navbar.coffee

@@ -6,39 +6,23 @@ class Lanes.Workspace.Navbar extends Lanes.Views.Base
         Lanes.Workspace.WorkspaceView
     ]
 
-    events:
+    domEvents:
         'click .screens-menu-toggle': 'switchMenu'
         'click .navbar-toggle':  'showHideMenu'
 
     subviews:
         screens:
             hook: 'screens-container'
-            view: 'Workspace.ActiveScreenSwitcher'
+            view: 'ActiveScreenSwitcher'
             model: 'model'
 
     bindings:
         'menu_shown_class': { type: 'class' }
         'screen_menu_class': { type: 'class' }
 
-    derived:
-        menu_shown_class:
-            deps: ['model.screen_menu_shown']
-            fn: -> if @model.screen_menu_shown then 'screen-menu-visible' else 'screen-menu-hidden'
-        screen_menu_class:
-            deps: ['model.screen_menu_position']
-            fn: -> if @model.screen_menu_position == 'top' then 'with-screen-menu' else 'no-screen-menu'
-
-
-    initialize: ->
-        this.listenTo(@model,'change:screen_menu_position', this.moveScreensMenu )
-
     onActiveChange: ->
         this.$el.toggleClass('screens-menu-hidden',true)
 
-    moveScreensMenu: ->
-        if 'top' == @model.screen_menu_position
-            this.query('.menu-container').appendChild( @model.menu_view.el )
-
     switchMenu: ->
         @model.nextSidebarState()
 

data/client/lanes/workspace/Pages.coffee

@@ -7,29 +7,28 @@ class Lanes.Workspace.Pages extends Lanes.Views.Base
     ]
 
     bindings:
-        'model.screen_menu_size': { type: 'class' }
         'model.layout_size': { selector: '.page-content', type: 'class' }
-        'screen_menu_class': { type: 'class' }
+        'model.screen_menu_size': { type: 'class' }
+        'model.popover_menu': { type: 'booleanClass', name: 'popover-menu' }
+
 
-    derived:
-        screen_menu_class:
-            deps: ['model.screen_menu_position']
-            fn: -> if @model.screen_menu_position == 'side' then 'with-screen-menu' else 'no-screen-menu'
+    subviews:
+        menu:
+            view: 'ScreensMenu'
 
     ui:
         screen: '.screen'
-        screens_menu_container: '.screens-menu-container'
+
 
     initialize: (options)->
-        this.listenTo( Lanes.Models.Screens.displaying, "change:active", this.onActiveChange )
-        this.listenTo( Lanes.Models.Screens.displaying, "remove",        this.onRemove )
-        this.listenTo( @model,'change:screen_menu_position', this.moveScreensMenu )
+        this.listenTo( Lanes.Screens.Definitions.displaying, "change:active", this.onActiveChange )
+        this.listenTo( Lanes.Screens.Definitions.displaying, "remove",        this.onRemove )
+        #this.listenTo( @model,'change:screen_menu_position', this.moveScreensMenu )
         super
 
-
-    moveScreensMenu: ->
-        return unless 'side' == this.viewport.screen_menu_position
-        this.ui.screens_menu_container.append( this.viewport.menu_view.el )
+    # moveScreensMenu: ->
+    #     return unless 'side' == this.viewport.screen_menu_position
+    #     this.ui.screens_menu_container.append( this.viewport.menu_view.el )
 
     onRemove: (sv)->
         sv.view.remove()

data/client/lanes/workspace/ScreensMenu.coffee

@@ -5,8 +5,7 @@ class ScreenList extends Lanes.Views.Base
     mixins:[
         Lanes.Workspace.WorkspaceView
     ]
-
-    events:
+    domEvents:
         click: 'displayScreen'
 
     displayScreen: ->
@@ -19,13 +18,13 @@ class ScreenList extends Lanes.Views.Base
 
 class ScreenGroup extends Lanes.Views.Base
 
-    template: -> '<li class="group"><a href="#"><span></span><i></i></a><ul></ul></li>'
+    template: '<li class="group"><a class="heading" href="#"><span></span><i></i></a><ul></ul></li>'
     FILE: FILE
     mixins:[
         Lanes.Workspace.WorkspaceView
     ]
-    events:
-        'click .group>a': 'toggleMenu'
+    domEvents:
+        'click a.heading': 'toggleMenu'
 
     initialize: ->
         this.screens = @model.screens()
@@ -46,44 +45,36 @@ class ScreenGroup extends Lanes.Views.Base
         @model.active = ! @model.active
 
 
-
-
 class Lanes.Workspace.ScreensMenu extends Lanes.Views.Base
 
+    FILE: FILE
     templateName: 'screens-menu'
     mixins:[
         Lanes.Workspace.WorkspaceView
     ]
-
-    FILE: FILE
-
     subviews:
         navigation:
             container: 'ul.navigation'
             collection: 'groups'
             view: ScreenGroup
-
-    events:
+    domEvents:
         'highlight-hide': 'onHighlightHide'
         'highlight-show': 'onHighlightShown'
         'click .logout':  'onLogout'
-
     session:
         groups: 'collection'
-
-    key_scope: { name: 'menu', shortcut: 'ctrl+shift+m' }
-    key_bindings:
+    keyScope: { name: 'menu', shortcut: 'ctrl+shift+m' }
+    keyBindings:
         up:    'prevMenu'
         down:  'nextMenu'
         enter: 'onEnter'
         right: 'expandMenu'
         left:  'collapseMenu'
 
-
     initialize: ->
         super
         this.listenTo(Lanes.current_user, "change:isLoggedIn", this.resetGroups)
-        @groups = Lanes.Models.Screens.groups.available()
+        @groups = Lanes.Screens.Definitions.groups.available()
         this
 
     resetGroups: ->

data/client/lanes/workspace/UIState.coffee

@@ -0,0 +1,78 @@
+MENU_NARROW_WIDTH = 60
+MENU_WIDE_WIDTH   = 250
+NAVBAR_HEIGHT     = 50
+BREAKPOINTS = {
+    sm: 750
+    md: 970
+    lg: 1170
+}
+
+class Lanes.Workspace.UIState extends Lanes.Views.Base
+
+    session:
+        screen_menu_preference: {
+            type: 'string',
+            values: [ 'menu-wide', 'menu-narrow', 'menu-hidden' ]
+        }
+        root:       'element'
+        menu_view:  'any'
+        width:      'number'
+        screen_menu_shown: 'boolean'
+        layout: 'state'
+
+    derived:
+        menu_width:
+            deps: ['screen_menu_size'], fn: ->
+                switch this.screen_menu_size
+                    when 'menu-wide' then 240
+                    when 'menu-narrow' then 60
+                    else 0
+
+        layout_size:
+            deps: ['screens_width'], fn:->
+                switch
+                    when @screens_width < BREAKPOINTS.sm then 'xs'
+                    when @screens_width < BREAKPOINTS.md then 'sm'
+                    when @screens_width < BREAKPOINTS.lg then 'md'
+                    else 'lg'
+
+        popover_menu:
+            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: ->
+                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'
+                    else 'menu-wide'
+
+        screens_width:
+            deps: ['width','screen_menu_size'], fn: ->
+                @width - @menu_width
+
+        screens_height:
+            deps: ['height'], fn: ->
+                @height - NAVBAR_HEIGHT
+
+    modelEvents:
+        'change:width': 'setWidth'
+
+    constructor: ->
+        super
+        this.setWidth(@model,@model.width)
+        this.screen_menu_shown = false if this.tiny_screen
+
+    setWidth: (model,width)->
+        this.width = width
+
+    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"
+        else
+            this.toggle('screen_menu_preference')

data/client/lanes/workspace/WorkspaceView.coffee

@@ -1,5 +1,8 @@
 Lanes.Workspace.WorkspaceView = {
 
-    templatePrefix: -> 'workspace/'
+    templatePrefix: -> 'workspace'
+
+    subviewPrefix: ->
+        this.FILE.namespace['Workspace']
 
 }

data/client/lanes/workspace/index.js

@@ -1,5 +1,2 @@
-//= require ../minimal
-//= require_self
 //= require ./WorkspaceView
 //= require_tree .
-Lanes.namespace( 'Workspace' );

data/client/lanes/workspace/navbar.html

@@ -7,10 +7,6 @@
             <i class="icon-tab"></i>
         </button>
 
-        <button class="navbar-toggle collapsed" type="button">
-            <span class="sr-only">Toggle navigation</span>
-            <i class="icon-paragraph-justify"></i>
-        </button>
     </div>
     <div class="menu-container">
         <div data-hook="screens-container"></div>

data/client/lanes/workspace/pages.html

@@ -1,5 +1,5 @@
 <div class="page-container">
-    <div class="screens-menu-container"></div>
+    <div data-hook="menu" class="menu-container"></div>
     <div class="page-content">
         <div class="screen"></div>
     </div>

data/client/lanes/workspace/styles/changes-notification.scss

@@ -0,0 +1,57 @@
+.changes-notification {
+    &.navbar-right {
+        margin-right: 0px;
+    }
+    
+    .btn.dropdown-toggle {
+        padding: 0 0 0 10px;
+        margin-bottom: 0;
+        margin-top: 8px;
+        i {
+            font-size: 28px;
+        }
+        .badge {
+            top: -14px;
+            position: relative;
+            left: -8px;
+            padding: 3px 7px;
+            font-size: 75%;
+        }
+    }
+    .title{
+        margin: 0; // reset heading margin
+        padding: 8px 14px;
+        font-size: $font-size-base;
+        background-color: $popover-title-bg;
+        border-bottom: 1px solid darken($popover-title-bg, 5%);
+        border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
+    }
+
+    .dropdown-menu {
+        padding-top: 0px;
+        .arrow {
+        }
+        .update {
+            @extend .list-group-item;
+            span {
+                color: $dropdown-link-color;
+                text-decoration: underline;
+                cursor: pointer;
+            }
+            span:hover{
+                text-decoration: none;
+                color: $dropdown-link-hover-color;
+            }
+        }
+        .scroller {
+            max-height: 200px;
+            overflow-y: auto;
+        }
+        .ago {
+            @extend small;
+        }
+    }
+    .tooltip{
+        position: fixed;
+    }
+}

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

@@ -0,0 +1,42 @@
+.header-top {
+    @extend .navbar;
+    @extend .navbar-inverse;
+    @extend .navbar-fixed-top;
+    z-index: 20;
+    height: 50px;
+    border-radius: 0;
+    margin: 0;
+    border: 0;
+    position:relative;
+
+    .navbar-header {
+        position: relative;
+        min-width: 203px;
+        width: 100%;
+        height: 50px;
+        margin-left: 0;
+    }
+
+    .logo {
+        display: inline-block;
+        height: 48px;
+        width: 150px;
+        margin: 2px;
+        background: url(asset_path('images/logo-sm.png')) no-repeat;
+    }
+
+    .navbar-toggle, .screens-menu-toggle {
+        color: #fff;
+        display: block;
+        float: left;
+        color: #fff;
+        border: 0;
+        padding: 6px 7px 7px;
+        line-height: 1;
+        background-color: rgba(0, 0, 0, 0.2);
+        margin: 12px 0 12px 0px;
+        border-radius: 0;
+    }
+    
+
+}

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

@@ -0,0 +1,209 @@
+
+.page-content {
+    @extend .container-fluid;
+    position: relative;
+    min-height: 500px;
+    transition: all 0.15s ease-in-out 0s;
+    margin-left: 240px;
+    padding: 0px;
+
+
+}
+
+
+.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;
+        margin: 0 0 10px;
+        padding: 0;
+        a {
+            color: $navbar-inverse-link-color;
+        }
+        li {
+            position: relative;
+            > a {
+                text-decoration:  none;
+                border-left: 3px solid transparent;
+                color: $navbar-inverse-link-color;
+                display: block;
+                padding: 13px 40px 14px 14px;
+                > i {
+                    opacity: 0.5;
+                    position: absolute;
+                    right: 14px;
+                    top: 13px;
+                }
+            }
+        }
+        > li {
+            border-top: 1px solid #49565d;
+            position: relative;
+            font-size: 15px;
+            &.active {
+                &:focus > a,
+                &:hover > a {
+                    color: $navbar-inverse-link-active-color;
+                    background-color: $navbar-inverse-link-active-bg;
+                }
+                > a {
+                    color: $navbar-inverse-link-active-color;
+                    background-color: $navbar-inverse-link-active-bg;
+                    span {
+                        &:after {
+                            font-family: 'lanes-icon';
+                            color: #339900;
+                            content: "\00a0\00a0\f067";
+                        }
+                    }
+                }
+            }
+            &:hover > a {
+                border-left: 3px solid $navbar-inverse-link-active-bg;
+                color: $navbar-inverse-link-hover-color;
+                background-color: $navbar-default-link-hover-color;
+            }
+            ul {
+                background-color: lighten($navbar-inverse-bg,20%);
+                display: none;
+                font-size: 13px;
+                list-style: none outside none;
+                margin: 0;
+                padding: 0;
+                > li {
+                    border-top: 1px solid #35454b;
+                    &:first-child {
+                        border-top: 0 none;
+                    }
+                    > a {
+                        color: #fff;
+                        display: block;
+                        padding: 13px 14px 14px 24px;
+                        padding-left: 30px;
+
+                        &:hover {
+                            background: none repeat scroll 0 0 #27353a;
+                            text-decoration:  none;
+                        }
+                    }
+                }
+            }
+        }
+
+
+        .logout>a {
+            border-bottom: 2px solid #49565d;
+            i {
+                font-size: 30px;
+                top: 6px;
+            }
+        }
+
+    }
+}
+
+.menu-hidden {
+    .page-content {
+        margin-left: 0px;
+    }
+    .screens-menu {
+        display: none;
+    }
+}
+
+.menu-wide {
+    .screens-menu {
+        overflow-x: visible;
+        overflow-y: auto;
+        width: 240px;
+    }
+    .navigation > li.active {
+        ul {
+            display: block;
+        }
+    }
+}
+
+.menu-narrow {
+    .screens-menu {
+        background-color: $navbar-inverse-bg;
+        width: 60px;
+    }
+    .navigation > li {
+        > a {
+            > {
+                span {
+                    display: none;
+                }
+                i {
+                    display: block;
+                    position: static;
+                }
+            }
+            padding: 17px 3px 18px 0;
+            text-align: center;
+            width: 100%;
+        }
+
+        ul {
+            list-style: none outside none;
+            margin: 0;
+            padding: 0;
+        }
+        > ul {
+            border-left: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 0 2px 2px 0;
+            display: none;
+            left: 100%;
+            margin-left: -1px;
+            position: absolute;
+            top: 0;
+            width: 220px;
+        }
+        > ul > li {
+            &:first-child {
+                border-top: 0 none;
+                > a {
+                    border-radius: 2px 2px 0 0;
+                }
+            }
+            &:last-child > a {
+                border-radius: 0 0 2px 2px;
+            }
+        }
+        &:hover > ul {
+            display: block;
+        }
+        &.expand > ul {
+            display: block;
+        }
+    }
+
+    .page-content {
+        margin-left: 60px;
+    }
+}
+
+.popover-menu {
+    .page-content {
+        margin-left: 0px;
+    }
+    .screens-menu {
+
+    }
+    
+}

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

@@ -0,0 +1,67 @@
+.screen {
+    padding: 5px;
+    //  overflow: hidden;
+    width: 100%;
+    .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; */
+            }
+        }
+
+    }
+
+}