Merge pull request #99 from dod-ccpo/ui/workspace-navigation

Ui/workspace navigation

atst/app.py

@@ -121,7 +121,7 @@ def make_app(config, deps, **kwargs):
         url(r"/reports", Main, {"page": "reports"}, name="reports"),
         url(r"/calculator", Main, {"page": "calculator"}, name="calculator"),
         url(r"/workspaces/(\S+)/members", WorkspaceMembers, {}, name="workspace_members"),
-        url(r"/workspaces/(\S+)", Workspace, {}, name="workspace"),
+        url(r"/workspaces/(\S+)/projects", Workspace, {}, name="workspace_projects"),
     ]
 
     if not ENV == "production":

atst/handlers/workspace.py

@@ -12,4 +12,4 @@ class Workspace(BaseHandler):
     @tornado.gen.coroutine
     def get(self, workspace_id):
         projects = self.projects_repo.get_many(workspace_id)
-        self.render("workspace.html.to", projects=projects)
+        self.render("workspace_projects.html.to", workspace_id=workspace_id, projects=projects)

atst/handlers/workspace_members.py

@@ -12,4 +12,4 @@ class WorkspaceMembers(BaseHandler):
     @tornado.gen.coroutine
     def get(self, workspace_id):
         members = self.members_repo.get_many(workspace_id)
-        self.render("workspace_members.html.to", members=members)
+        self.render("workspace_members.html.to", workspace_id=workspace_id, members=members)

atst/ui_methods.py

@@ -8,7 +8,7 @@ def dev(self):
     return os.getenv("TORNADO_ENV", "dev") == "dev"
 
 def matchesPath(self, href):
-    return self.request.uri.startswith(href)
+    return re.match('^'+href, self.request.uri)
 
 def modal(self, body):
     return self.render_string(

scss/atat.scss

@@ -16,9 +16,10 @@
 @import 'elements/labels';
 @import 'elements/diff';
 
-@import 'components/layout';
 @import 'components/topbar';
+@import 'components/global_layout';
 @import 'components/global_navigation';
+@import 'components/workspace_layout';
 @import 'components/site_action';
 @import 'components/empty_state';
 @import 'components/alerts';

scss/components/_workspace_layout.scss

@@ -0,0 +1,26 @@
+.workspace-panel-container {
+  @include media($large-screen) {
+    @include grid-row;
+  }
+}
+
+.workspace-navigation {
+  @include panel-margin;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      flex-grow: 1;
+    }
+  }
+
+  @include media($large-screen) {
+    width: 20rem;
+    margin-right: $gap * 2;
+
+    ul {
+      display: block;
+    }
+  }
+}

templates/base_workspace.html.to

@@ -2,8 +2,14 @@
 
 {% block content %}
 
+  <div class='workspace-panel-container'>
+    <div class='col'>
       {% include 'navigation/workspace_navigation.html.to' %}
+    </div>
 
+    <div class='col col--grow'>
       {% block workspace_content %}{% end %}
+    </div>
+  </div>
 
 {% end %}

templates/navigation/topbar.html.to

@@ -6,7 +6,7 @@
 
     <div class="topbar__context topbar__context--{{context}}">
       <a href="/" class="topbar__link">
-        <span class="topbar__link-label">{{ "Workspace Name" if context == 'workspace' else "JEDI" }}</span>
+        <span class="topbar__link-label">{{ "Workspace "+workspace_id if context == 'workspace' else "JEDI" }}</span>
         {% module Icon('caret_down', classes='topbar__link-icon icon--tiny') %}
       </a>
 

templates/navigation/workspace_navigation.html.to

@@ -1 +1,21 @@
-nav
+<nav class='sidenav workspace-navigation'>
+  <ul>
+    {% module SidenavItem(
+      "Projects",
+      href=reverse_url('workspace_projects', workspace_id),
+      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/projects'))
+    %}
+
+    {% module SidenavItem(
+      "Members",
+      href=reverse_url('workspace_members', workspace_id),
+      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/members'))
+    %}
+
+    {% module SidenavItem(
+      "Funding & Reports",
+      href=reverse_url('workspace_projects', workspace_id),
+      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports'))
+    %}
+  </ul>
+</nav>

templates/workspace_members.html.to

@@ -1,6 +1,6 @@
-{% extends "base.html.to" %}
+{% extends "base_workspace.html.to" %}
 
-{% block content %}
+{% block workspace_content %}
 
 <div class="panel">
   <div class='responsive-table-wrapper'>

templates/workspaces.html.to

@@ -14,7 +14,7 @@
     {% for w in workspaces %}
      <tr>
         <td scope="row">
-          <a href="/workspaces/{{w['task_order']['number']}}">{{ w['name'] }}</a><br>
+          <a href="/workspaces/{{w['task_order']['number']}}/projects">{{ w['name'] }}</a><br>
           Task Order: #{{ w['task_order']['number'] }}
         </td>
         <td>