lanes 0.0.1

data/client/javascripts/workspace/ScreensMenu.coffee

@@ -0,0 +1,126 @@
+class ScreenList extends Lanes.View.Base
+
+    template: "<li><a href='#'><span></span><i></i></a></li>"
+
+    events:
+        click: 'displayScreen'
+
+    displayScreen: ->
+        this.model.display(this.ui)
+
+    bindings:
+        'model.title':{ selector: 'span', type: 'text' }
+        'model.icon': { selector: 'i', type: 'class' }
+
+
+class ScreenGroup extends Lanes.View.Base
+
+    template: -> '<li class="group"><a href="#"><span></span><i></i></a><ul></ul></li>'
+    events:
+        'click .group>a': 'toggleMenu'
+
+    initialize: ->
+        this.screens = @model.screens()
+
+    subviews:
+        navigation:
+            container: 'ul'
+            collection: 'screens'
+            view: ScreenList
+
+    bindings:
+        'model.title':  { selector: '.group>a>span', type: 'text' }
+        'model.icon':   { selector: '.group>a>i', type: 'class'   }
+        'model.active': { selector: '', type: 'booleanClass', name:'active' }
+
+    toggleMenu: (ev)->
+        ev.preventDefault()
+        @model.active = ! @model.active
+
+
+
+
+class Lanes.Workspace.ScreensMenu extends Lanes.View.Base
+
+    constructor: -> super
+    templateName: 'workspace/screens-menu'
+
+    subviews:
+        navigation:
+            container: 'ul.navigation'
+            collection: 'groups'
+            view: ScreenGroup
+
+    events:
+        'highlight-hide': 'onHighlightHide'
+        'highlight-show': 'onHighlightShown'
+        'click .logout':  'onLogout'
+
+    session:
+        groups: 'collection'
+
+    key_scope: { name: 'menu', shortcut: 'ctrl+shift+m' }
+    key_bindings:
+        up:    'prevMenu'
+        down:  'nextMenu'
+        enter: 'onEnter'
+        right: 'expandMenu'
+        left:  'collapseMenu'
+
+
+    initialize: ->
+        super
+        this.listenTo(Lanes.current_user, "change:isLoggedIn", this.resetGroups)
+        @groups = Lanes.Data.Screens.groups.available()
+        this
+
+    resetGroups: ->
+        @groups.filter()
+
+    onLogout: ->
+        Lanes.current_user.logout()
+
+    onHighlightShown: (ev)->
+        this.getKeyboardFocus()
+
+    onEnter: (ev)->
+        focus = this.getKeyboardFocus()
+        focus.trigger('click')
+        if focus.hasClass("group")
+            Lanes.View.TimedHighlight.move( focus.find('ul li').first() )
+
+    onHighlightHide: (ev)->
+        Lanes.$(ev.target).closest('.navigation .expand').removeClass("expand")
+
+    collapseMenu: ->
+        current = this.getKeyboardFocus()
+        focus = current.closest('.navigation .expand').removeClass("expand")
+        return unless focus.length
+        Lanes.View.TimedHighlight.move( focus.first() )
+
+    expandMenu: ->
+        focus = this.getKeyboardFocus()
+        return unless focus.find('ul li').length
+        focus.addClass('expand')
+        Lanes.View.TimedHighlight.move( focus.find('ul li').first() )
+
+    nextMenu: ->
+        current = this.getKeyboardFocus()
+        focus = current.next('li')
+        focus = current.siblings('li:first') unless focus.length
+        return unless focus.length
+        Lanes.View.TimedHighlight.move( focus.first() )
+
+    prevMenu: ->
+        current = this.getKeyboardFocus()
+        focus = current.prev('li')
+        focus = current.siblings('li:last') unless focus.length
+        return unless focus.length
+        Lanes.View.TimedHighlight.move( focus.first() )
+
+    getKeyboardFocus: ->
+        focus = this.$('.highlighted')
+        unless focus.length
+            focus = this.$('.navigation li:first')
+            Lanes.View.TimedHighlight.move(focus)
+        focus

data/client/javascripts/workspace/index.js

@@ -0,0 +1,12 @@
+//= require ../lib/noConflict
+//= require ../vendor/modern-stack
+//= require ../lib
+//= require_self
+//= require ../extension
+//= require ../data
+//= require ../plugins
+//= require ../view
+//= require ../component
+//= require_tree .
+
+Lanes.namespace( 'Workspace' );

data/client/javascripts/workspace/layout.html

@@ -0,0 +1,4 @@
+<div class="layout">
+    <div data-hook="navbar-container"></div>
+    <div data-hook="page-container"></div>
+</div>

data/client/javascripts/workspace/login-dialog.html

@@ -0,0 +1,16 @@
+<div class="row">
+  <div style="display:none" class="alert alert-danger" role="alert"></div>
+  <div class="<%= h.grid_offsets(0,2) %> <%= h.grid_widths 12, 8%>">
+        <form role="form">
+            <div class="form-group">
+                <label for="LoginField">Login</label>
+                <input type="email" id="LoginField" value="admin" class="form-control login" placeholder="Enter Login">
+            </div>
+            <div class="form-group">
+                <label for="PasswordField">Password <a href="/sessions/forgot_password">(forgot password)</a></label>
+                <input type="password" id="PasswordField" value="password" class="form-control password" placeholder="Password">
+            </div>
+
+        </form>
+    </div>
+</div>

data/client/javascripts/workspace/menu.html

@@ -0,0 +1,356 @@
+          <li class="active">
+            <a href="#sr">
+              <span>Dashboard</span>
+              <i class="icon-screen2"></i>
+            </a>
+          </li>
+
+          <li>
+            <a href="#" class="expand">
+              <span>Form components</span>
+              <i class="icon-paragraph-justify2"></i>
+            </a>
+
+            <ul style="">
+              <li>
+                <a href="#form_components.html">Form components</a>
+              </li>
+
+              <li><a href=
+              "#form_layouts.html">Form
+              layouts</a></li>
+
+              <li><a href=
+              "#/form_grid.html">Inputs
+              grid</a></li>
+
+              <li><a href=
+              "#wysiwyg.html">WYSIWYG
+              editor</a></li>
+
+              <li><a href=
+              "#validation.html">Validation</a></li>
+
+              <li><a href=
+              "#file_uploader.html">
+              Multiple file uploader</a></li>
+
+              <li><a href=
+              "#form_snippets.html">
+              Form snippets</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#" class="expand level-closed">
+              <span>Interface components</span>
+              <i class="icon-grid-alt"></i>
+            </a>
+
+            <ul style="">
+              <li><a href=
+              "#visuals.html">Visuals
+              &amp; notifications</a></li>
+
+              <li><a href=
+              "#navs.html">Navs</a></li>
+
+              <li><a href=
+              "#panel_options.html">
+              Panel options</a></li>
+
+              <li><a href=
+              "#navbars.html">Navbars</a></li>
+
+              <li><a href=
+              "#info_blocks.html">Info
+              blocks</a></li>
+
+              <li><a href=
+              "#icons.html">Icons
+              <span class="label label-danger">850+</span></a></li>
+
+              <li><a href=
+              "#buttons.html">Buttons</a></li>
+
+              <li><a href=
+              "#calendar.html">Calendar</a></li>
+
+              <li><a href=
+              "#typography.html">Typography</a></li>
+
+              <li><a href=
+              "#gallery.html">Media
+              gallery</a></li>
+
+              <li><a href=
+              "#header_elements.html">
+              Page header elements</a></li>
+
+              <li><a href=
+              "#content_grid.html">Content
+              grid</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#" class=
+            "expand level-closed"><span>Layouts</span></a>
+
+            <ul style="">
+              <li><a href=
+              "#sidebar_wide_left.html">
+              Left wide sidebar</a></li>
+
+              <li><a href=
+              "#sidebar_wide_right.html">
+              Right wide sidebar</a></li>
+
+              <li><a href=
+              "#sidebar_narrow_left.html">
+              Left narrow sidebar</a></li>
+
+              <li><a href=
+              "#sidebar_narrow_right.html">
+              Right narrow sidebar</a></li>
+
+              <li><a href=
+              "#sidebar_icons_left.html">
+              Left aligned icons</a></li>
+
+              <li><a href=
+              "#sidebar_collapsed.html">
+              Collapsed sidebar</a></li>
+
+              <li><a href=
+              "#layout_boxed.html">Boxed
+              layout <span class=
+              "label label-danger">New</span></a></li>
+
+              <li><a href=
+              "#layout_fixed_navbar.html">
+              Fixed navbar</a></li>
+
+              <li><a href=
+              "#horizontal_navigation.html">
+              Lanes.rizontal navigation</a></li>
+
+              <li><a href=
+              "#horizontal_sidebar.html">
+              Sidebar &amp; Lanes.rizontal navigation</a></li>
+
+              <li><a href=
+              "#navigation_disabled_items.html">
+              Disabled navigation items</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#" class="expand level-closed"><span>Task
+            manager</span></a>
+
+            <ul style="">
+              <li><a href=
+              "#task_grid.html">Task
+              grid</a></li>
+
+              <li><a href=
+              "#task_list.html">Task
+              list</a></li>
+
+              <li><a href=
+              "#task_detailed.html">
+              Task detailed</a></li>
+            </ul>
+          </li>
+
+          <li><a href=
+          "#charts.html"><span>Charts</span>
+          </a></li>
+
+          <li>
+            <a href="#" class=
+            "expand level-closed"><span>User</span></a>
+
+            <ul style="">
+              <li><a href=
+              "#team.html">Team</a></li>
+
+              <li><a href=
+              "#contacts.html">Contact
+              list</a></li>
+
+              <li><a href=
+              "#profile.html">User
+              profile</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#" class=
+            "expand level-closed"><span>Support</span></a>
+
+            <ul style="">
+              <li><a href=
+              "#faq.html">FAQ's</a></li>
+
+              <li><a href=
+              "#chat_tabs.html">Chat
+              with tabs</a></li>
+
+              <li><a href=
+              "#chat_contacts.html">
+              Chat with contacts</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#" class=
+            "expand level-closed"><span>Tables</span></a>
+
+            <ul style="display: none;">
+              <li><a href=
+              "#tables_static.html">
+              Static tables</a></li>
+
+              <li><a href=
+              "#tables_dynamic.html">
+              Data tables</a></li>
+            </ul>
+          </li>
+
+          <li><a href=
+          "#search.html"><span>Search
+          page</span> </a></li>
+
+          <li>
+            <a href="#" class=
+            "expand level-closed"><span>Invoice</span></a>
+
+            <ul style="display: none;">
+              <li><a href=
+              "#invoice.html">Invoice
+              template</a></li>
+
+              <li><a href=
+              "#invoice_list.html">Invoice
+              list</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#" class="expand level-closed"><span>Login
+            page</span></a>
+
+            <ul style="display: none;">
+              <li><a href=
+              "#login_simple.html">Simple
+              login form</a></li>
+
+              <li><a href=
+              "#login_advanced.html">
+              Login form with user image</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#" class="expand level-closed"><span>Error
+            pages</span></a>
+
+            <ul style="display: none;">
+              <li><a href=
+              "#403.html">403
+              page</a></li>
+
+              <li><a href=
+              "#404.html">404
+              page</a></li>
+
+              <li><a href=
+              "#405.html">405
+              page</a></li>
+
+              <li><a href=
+              "#500.html">500
+              page</a></li>
+
+              <li><a href=
+              "#503.html">503
+              page</a></li>
+
+              <li><a href=
+              "#offline.html">Offline
+              page</a></li>
+
+              <li><a href=
+              "#error_sidebar.html">
+              Error page with sidebar</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#" class="expand level-closed"><span>Blank
+            pages</span></a>
+
+            <ul style="display: none;">
+              <li><a href=
+              "/blank_left_sidebar.html">
+              Left sidebar</a></li>
+
+              <li><a href=
+              "/blank_right_sidebar.html">
+              Right sidebar</a></li>
+
+              <li><a href=
+              "/blank_narrow_sidebar.html">
+              Narrow sidebar</a></li>
+
+              <li><a href=
+              "/blank_collapsed_sidebar.html">
+              Collapsed sidebar</a></li>
+
+              <li><a href="/blank_full_width.html">
+              Full width page</a></li>
+            </ul>
+          </li>
+
+          <li>
+            <a href="#" class=
+            "expand level-closed"><span>Navigation
+            levels</span></a>
+
+            <ul style="display: none;">
+              <li><a href="#">Second level first item</a></li>
+
+              <li>
+                <a href="#" class="expand level-closed">Second
+                level second item</a>
+
+                <ul style="display: none;">
+                  <li><a href="#">Third level first item</a></li>
+
+                  <li><a href="#">Third level second item</a></li>
+
+                  <li>
+                    <a href="#" class="expand level-closed">Third
+                    level third item</a>
+
+                    <ul style="display: none;">
+                      <li><a href="#">Fourth level first
+                      item</a></li>
+
+                      <li><a href="#">Fourth level second
+                      item</a></li>
+
+                      <li><a href="#">Fourth level third
+                      item</a></li>
+                    </ul>
+                  </li>
+
+                  <li><a href="#">Third level second item</a></li>
+                </ul>
+              </li>
+
+              <li><a href="#">Second level third item</a></li>
+            </ul>
+          </li>

data/client/javascripts/workspace/menu_toggle.html

@@ -0,0 +1,9 @@
+      <a class="menu-toggle"><i class="icon-paragraph-justify2"></i></a>
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-icons">
+        <span class="sr-only">Toggle navbar</span>
+      </button>
+
+      <button data-target=".sidebar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
+        <span class="sr-only">Toggle navigation</span>
+        <i class="icon-paragraph-justify2"></i>
+      </button>

data/client/javascripts/workspace/navbar.html

@@ -0,0 +1,19 @@
+<div class="header-top">
+    <div class="navbar-header">
+        <a class="navbar-brand logo" href="#"></a>
+
+        <button class="screens-menu-toggle" type="button">
+            <span class="sr-only">Toggle navbar</span>
+            <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>
+    </div>
+
+</div>

data/client/javascripts/workspace/pages.html

@@ -0,0 +1,6 @@
+<div class="page-container">
+    <div class="screens-menu-container"></div>
+    <div class="page-content">
+        <div class="screen"></div>
+    </div>
+</div>

data/client/javascripts/workspace/screens-menu.html

@@ -0,0 +1,11 @@
+<div class="screens-menu">
+    <div class="screens-menu-content">
+        <ul class="navigation">
+        </ul>
+    </div>
+    <ul class="navigation">
+        <li class="group logout" data-tooltip-message="Log Out" data-placement="right">
+            <a href="#" name="LogOut"><span>Log Out</span><i class="icon-exit"></i></a>
+        </li>
+    </ul>
+</div>

data/client/javascripts/workspace/screens-switcher.html

@@ -0,0 +1,7 @@
+<div class="active-screens">
+    <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
+    <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
+    <div class="wrapper">
+        <ul class="nav nav-tabs"></ul>
+    </div>
+</div>

data/client/screens/user-management/UserEditScreen.coffee

@@ -0,0 +1,21 @@
+class Lanes.Screens.UserEditScreen extends Lanes.Component.Grid.PopOverEditor
+
+    templateName: 'user-management/grid-popover-editor'
+    templateData: ->
+        { columns: _.reject(this.grid.column_definitions,(f)-> f.field=='role_names') }
+
+    subviews:
+        roles:
+            component: 'SelectField'
+            model: 'model'
+            options: 'roleOptions'
+
+    roleOptions: ->
+        { multiple: true, data: this.model.allRoles, mappings:{ title: 'name', selected: 'member' } }
+
+    persistFields: ->
+        super
+        @model.set({
+            role_names: _.pluck(this.$('select option:selected'), 'value'),
+            password:  this.$('input[name=password]').val()
+        })

data/client/screens/user-management/UserManagement.coffee

@@ -0,0 +1,24 @@
+class Lanes.Screens.UserManagement extends Lanes.View.Screen
+
+    templateName: 'user-management/user-management'
+
+    subviews:
+        grid:
+            component: 'Grid'
+            options: 'gridOptions'
+
+    gridOptions: ->
+        {
+            record_query: new Lanes.Data.Query({
+                collection_class: Lanes.Data.User.Collection,
+                fields: [ 'login', 'name', 'email', 'role_names' ]
+            }),
+            editor_config: {
+                foo: 1
+            }
+            editing_controller: Lanes.Screens.UserEditScreen
+            selectionMode: 'single',
+            edit_records: true
+            add_records: true
+            delete_records: true
+        }

data/client/screens/user-management/grid-popover-editor.html

@@ -0,0 +1,33 @@
+<form class="user-edit form-horizontal" role="form">
+<% for field in @columns: %>
+  <div class="form-group">
+    <label for="field-<%= field.field %>" class="col-sm-3 control-label"><%= field.title %></label>
+    <div class="col-sm-9">
+      <input type="text" name="<%= field.field %>" class="form-control" id="field-<%= field.field %>" placeholder="">
+    </div>
+  </div>
+<% end %>
+
+  <div class="form-group">
+    <label for="field-password" class="col-sm-3 control-label">Roles</label>
+    <div class="col-sm-9">
+      <div data-hook="roles"></div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="field-password" class="col-sm-3 control-label">Password</label>
+    <div class="col-sm-9">
+      <input type="password" name="password" class="form-control" id="field-password" placeholder="">
+    </div>
+  </div>
+
+  <div class="buttons">
+    <button type="button" class="btn btn-default cancel">
+      <i class="icon-cancel-circle"> Cancel</i>
+    </button>
+    <button type="button" class="btn btn-primary save">
+      <i class="icon-save"> Save</i>
+    </button>
+  </div>
+</form>

data/client/screens/user-management/index.css

@@ -0,0 +1,4 @@
+/*
+*= require_self
+*= require ./user-management-styles.scss
+*/

data/client/screens/user-management/index.js

@@ -0,0 +1,2 @@
+//= require_self
+//= require_tree .

data/client/screens/user-management/user-management-styles.scss

@@ -0,0 +1,7 @@
+.lanes {
+  .grid-popover-editor {
+    width: 350px;
+
+  }
+
+}