Merge pull request #389 from dod-ccpo/workspaces-dropdown

Workspaces dropdown

atst/routes/workspaces.py

@@ -30,12 +30,14 @@ bp = Blueprint("workspaces", __name__)
 
 @bp.context_processor
 def workspace():
+    workspaces = Workspaces.for_user(g.current_user)
     workspace = None
     if "workspace_id" in http_request.view_args:
         try:
             workspace = Workspaces.get(
                 g.current_user, http_request.view_args["workspace_id"]
             )
+            workspaces = [ws for ws in workspaces if not ws.id == workspace.id]
         except UnauthorizedError:
             pass
 
@@ -46,7 +48,12 @@ def workspace():
             )
         return False
 
-    return {"workspace": workspace, "permissions": Permissions, "user_can": user_can}
+    return {
+        "workspace": workspace,
+        "workspaces": workspaces,
+        "permissions": Permissions,
+        "user_can": user_can,
+    }
 
 
 @bp.route("/workspaces")

styles/atat.scss

@@ -20,6 +20,7 @@
 @import 'elements/tooltip';
 @import 'elements/kpi';
 @import 'elements/graphs';
+@import 'elements/menu';
 
 @import 'components/topbar';
 @import 'components/global_layout';

styles/components/_topbar.scss

@@ -59,9 +59,38 @@
       align-items: stretch;
       justify-content: flex-end;
 
-      .topbar__link--workspace {
+      .topbar__workspace-menu {
-        &:first-child {
+        margin-right: auto;
-          margin-right: auto;
+        position: relative;
+
+        .topbar__workspace-menu__toggle {
+          margin: 0;
+          border-radius: 0;
+
+          &--open {
+            background-color: $color-blue-darkest;
+            position: relative;
+
+            &::before {
+              content: '';
+              display: block;
+              position: absolute;
+              bottom: 0;
+              left: $gap * 2;
+              right: $gap * 2;
+              height: $gap / 2;
+              background-color: $color-primary;
+            }
+          }
+
+          .icon {
+            @include icon-size(10);
+            margin-left: $gap * 2;
+          }
+        }
+
+        .topbar__workspace-menu__panel {
+          position: absolute;
         }
       }
 

styles/elements/_menu.scss

@@ -0,0 +1,56 @@
+.menu {
+  background-color: $color-blue-darkest;
+  color: $color-white;
+  position: absolute;
+  min-width: 30rem;
+  max-height: 80vh;
+  overflow-y: auto;
+  padding-bottom: $gap * 2;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
+
+  .menu__heading {
+    @include h5;
+    margin: 0;
+    padding: ($gap * 3) ($gap * 2) $gap;
+  }
+
+  .menu__list {
+    margin: 0;
+    padding: 0;
+
+    > .menu__list__item {
+      margin: 0;
+
+      > a {
+        @include h5;
+        font-weight: normal;
+        text-decoration: none;
+        display: block;
+        color: $color-white;
+        padding: ($gap * .75) ($gap * 2);
+
+        .icon {
+          @include icon-color($color-white);
+          @include icon-size(10);
+          margin-left: $gap;
+        }
+
+        &:hover {
+          background-color: $color-blue-darker;
+        }
+      }
+    }
+  }
+
+  .menu__message {
+    @include h5;
+    font-weight: normal;
+    font-style: italic;
+    padding: 0 ($gap * 2);
+  }
+
+  .menu__button {
+    margin: ($gap * 2) ($gap * 2) 0;
+    white-space: nowrap;
+  }
+}

templates/navigation/topbar.html

@@ -15,9 +15,44 @@
 
     <div class="topbar__context {% if workspace %}topbar__context--workspace{% endif %}">
       {% if workspace %}
-        <a href="{{ url_for("workspaces.show_workspace", workspace_id=workspace.id) }}" class="topbar__link topbar__link--workspace">
+
-          <span class="topbar__link-label">{{ ("Workspace " + workspace.name) }}</span>
+          <div is='toggler' class='topbar__workspace-menu'>
-        </a>
+            <template slot-scope='props'>
+              <button
+                v-on:click='props.toggle'
+                class="topbar__link topbar__workspace-menu__toggle"
+                v-bind:class="{ 'topbar__workspace-menu__toggle--open': props.isVisible }">
+                <span class="topbar__link-label">{{ ("Workspace " + workspace.name) }}</span>
+                <template v-if='props.isVisible'>{{ Icon('caret_up', classes='topbar__link-icon') }}</template>
+                <template v-else>{{ Icon('caret_down', classes='topbar__link-icon') }}</template>
+              </button>
+
+              <div v-show='props.isVisible' class='topbar__workspace-menu__panel menu'>
+                <h2 class='menu__heading'>Other Active Workspaces</h2>
+                {% if workspaces %}
+
+                  <ul class='menu__list'>
+                    {% for other_workspace in workspaces %}
+                      <li class='menu__list__item'>
+                        <a href="{{ url_for('workspaces.show_workspace', workspace_id=other_workspace.id)}}">
+                          {{ other_workspace.name }}
+                          {{ Icon('caret_right', classes='topbar__link-icon') }}
+                        </a>
+                      </li>
+                    {% endfor %}
+                  </ul>
+
+                {% else %}
+
+                  <p class='menu__message'>You have no other active JEDI workspaces.</p>
+
+                {% endif %}
+
+                <a href="{{ url_for('requests.requests_form_new', screen=1) }}" class='menu__button usa-button'>Request a new JEDI Workspace</a>
+              </div>
+            </template>
+          </div>
+
       {% endif %}
 
       <a href="{{ url_for('users.user') }}" class="topbar__link">