From 9369a137ca8e814ce100123735750c5c71869b63 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 30 Jul 2018 11:16:44 -0400
Subject: [PATCH 1/9] Add mock screen for editing a project

---
 atst/app.py                          | 1 +
 templates/workspace_projects.html.to | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/atst/app.py b/atst/app.py
index 5025ffc3..8b812018 100644
--- a/atst/app.py
+++ b/atst/app.py
@@ -122,6 +122,7 @@ def make_app(config, deps, **kwargs):
         url(r"/calculator", Main, {"page": "calculator"}, name="calculator"),
         url(r"/workspaces/(\S+)/members", WorkspaceMembers, {}, name="workspace_members"),
         url(r"/workspaces/(\S+)/projects", Workspace, {}, name="workspace_projects"),
+        url(r"/workspaces/123456/projects/789/edit", Main, {"page": "project_edit"}, name="project_edit"),
     ]
 
     if not ENV == "production":
diff --git a/templates/workspace_projects.html.to b/templates/workspace_projects.html.to
index bba33713..bd3a0c5b 100644
--- a/templates/workspace_projects.html.to
+++ b/templates/workspace_projects.html.to
@@ -6,7 +6,7 @@
   <div class='block-list project-list-item'>
     <header class='block-list__header'>
       <h2 class='block-list__title'>{{ project['name'] }} ({{ len(project['environments'])}} environments)</h2>
-      <a class='block-list__header__link' href='/'>edit</a>
+      <a class='block-list__header__link' href='/workspaces/123456/projects/789/edit'>edit</a>
     </header>
     <ul>
       {% for environment in project['environments'] %}

From fbbd766f1f534d00d946067ca61a82222829c456 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 30 Jul 2018 11:17:54 -0400
Subject: [PATCH 2/9] Remove workspace ID from templates, since its not really
 working anyway. Replace with a static dummy ID.

---
 templates/navigation/topbar.html.to           |  2 +-
 .../navigation/workspace_navigation.html.to   | 26 ++++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/templates/navigation/topbar.html.to b/templates/navigation/topbar.html.to
index 207f5ecd..9af26690 100644
--- a/templates/navigation/topbar.html.to
+++ b/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 "+workspace_id if context == 'workspace' else "JEDI" }}</span>
+        <span class="topbar__link-label">{{ "Workspace 123456" if context == 'workspace' else "JEDI" }}</span>
         {% module Icon('caret_down', classes='topbar__link-icon icon--tiny') %}
       </a>
 
diff --git a/templates/navigation/workspace_navigation.html.to b/templates/navigation/workspace_navigation.html.to
index 93ab38b1..21b48bb5 100644
--- a/templates/navigation/workspace_navigation.html.to
+++ b/templates/navigation/workspace_navigation.html.to
@@ -2,20 +2,28 @@
   <ul>
     {% module SidenavItem(
       "Projects",
-      href=reverse_url('workspace_projects', workspace_id),
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/projects'))
-    %}
+      href=reverse_url('workspace_projects', '123456'),
+      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/projects'),
+      subnav=[
+        {
+          "label": "Add New Project",
+          "href":"/",
+          "active": matchesPath('workspaces/projects/new'),
+          "icon": "plus"
+        }
+      ]
+    )%}
 
     {% module SidenavItem(
       "Members",
-      href=reverse_url('workspace_members', workspace_id),
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/members'))
-    %}
+      href=reverse_url('workspace_members', '123456'),
+      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'))
-    %}
+      href=reverse_url('workspace_projects', '123456'),
+      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports')
+    )%}
   </ul>
 </nav>

From 9d918b86f1e942fb666556413a6a072c0c869ab2 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 30 Jul 2018 11:18:08 -0400
Subject: [PATCH 3/9] Mock project-edit screen

---
 templates/project_edit.html.to | 92 ++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 templates/project_edit.html.to

diff --git a/templates/project_edit.html.to b/templates/project_edit.html.to
new file mode 100644
index 00000000..0ed30402
--- /dev/null
+++ b/templates/project_edit.html.to
@@ -0,0 +1,92 @@
+{% extends "base_workspace.html.to" %}
+{% set project_id = "789" %}
+
+{% block workspace_content %}
+
+{% module Alert(
+  "UI Mock",
+  message="<p>Please note, this screen is a non-functional UI mockup.</p>",
+  level="warning"
+) %}
+
+<form action=''>
+  <div class='panel'>
+    <div class='panel__heading'>
+      <h1 class='h2'>Add a new project</h1>
+    </div>
+
+    <div class='panel__content'>
+      <div class='usa-input'>
+        <label for='project-name'>Project Name</label>
+        <input id='project-name' type='text'/>
+      </div>
+
+      <div class='usa-input'>
+        <label for='project-description'>Description</label>
+        <textarea id='project-description'></textarea>
+      </div>
+    </div>
+  </div>
+
+  <section class='block-list'>
+    <header class='block-list__header'>
+      <h2 class='block-list__title'>Project Environments</h2>
+    </header>
+
+    {# All instances of .usa-input groups here should be replaced with {% module TextInput(wtforms.fields.Field) %} #}
+
+    <ul>
+      <li class='block-list__item project-edit__env-list-item'>
+        <div class='usa-input'>
+          <label for='environment-name-1'>Environment Name</label>
+          <input id='environment-name-1' type='text' placeholder="Environment 1" />
+        </div>
+        <button class='project-edit__env-list-item__remover'>
+          {% module Icon('trash') %}
+          <span>Remove</span>
+        </button>
+      </li>
+
+      <li class='block-list__item project-edit__env-list-item'>
+        <div class='usa-input'>
+          <label for='environment-name-2'>Environment Name</label>
+          <input id='environment-name-2' type='text' placeholder="Environment 2" />
+        </div>
+        <button class='project-edit__env-list-item__remover '>
+          {% module Icon('trash') %}
+          <span>Remove</span>
+        </button>
+      </li>
+
+      <li class='block-list__item project-edit__env-list-item'>
+        <div class='usa-input'>
+          <label for='environment-name-3'>Environment Name</label>
+          <input id='environment-name-3' type='text' placeholder="Environment 3" />
+        </div>
+        <button class='project-edit__env-list-item__remover'>
+          {% module Icon('trash') %}
+          <span>Remove</span>
+        </button>
+      </li>
+
+    </ul>
+
+    <footer class='block-list__footer'>
+      <a href='/' class='icon-link'>
+        {% module Icon('plus') %}
+        <span>Add another environment</span>
+      </a>
+    </footer>
+  </section>
+
+  <div class='action-group'>
+    <a href='/styleguide' class='action-group__action usa-button usa-button-big'>Save Project</a>
+    <a href='/styleguide' class='action-group__action icon-link'>
+      {% module Icon('x') %}
+      <span>Cancel</span>
+    </a>
+  </div>
+</form>
+
+{% end %}
+

From 6965aeedc8244bd9cc6ac1f0d933d45d1c1ee3ed Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 30 Jul 2018 11:18:25 -0400
Subject: [PATCH 4/9] block list footer

---
 scss/elements/_block_lists.scss | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/scss/elements/_block_lists.scss b/scss/elements/_block_lists.scss
index c222c3ad..abf51e03 100644
--- a/scss/elements/_block_lists.scss
+++ b/scss/elements/_block_lists.scss
@@ -22,6 +22,21 @@
   margin: 0;
 }
 
+@mixin block-list__footer {
+  @include panel-base;
+  @include panel-theme-default;
+  padding: $gap * 2;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+
+  .icon-link {
+    &:first-child {
+      margin-right: -$gap;
+    }
+  }
+}
+
 @mixin block-list-item {
   @include panel-base;
   margin: 0;
@@ -52,3 +67,8 @@
 .block-list__item {
   @include block-list-item;
 }
+
+.block-list__footer {
+  @include block-list__footer;
+  border-top: 0;
+}

From 3c50954cf0e003905c8bca654248e3fdf46374a9 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 30 Jul 2018 11:18:42 -0400
Subject: [PATCH 5/9] project edit screen styles

---
 scss/sections/_project_edit.scss | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 scss/sections/_project_edit.scss

diff --git a/scss/sections/_project_edit.scss b/scss/sections/_project_edit.scss
new file mode 100644
index 00000000..2222fd26
--- /dev/null
+++ b/scss/sections/_project_edit.scss
@@ -0,0 +1,19 @@
+.project-edit__env-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+  .usa-input {
+    margin: 0 ($gap * 4) 0 0;
+    flex-grow: 1;
+  }
+
+  .project-edit__env-list-item__remover {
+    @include icon-link;
+    @include icon-link-vertical;
+    @include icon-link-color($color-red, $color-red-lightest);
+
+    margin-bottom: -$gap;
+    margin-right: -$gap;
+  }
+}

From 0d541dd780fe6d27221463a28a7f19abf194ff7a Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 30 Jul 2018 11:19:00 -0400
Subject: [PATCH 6/9] icon-link component

---
 scss/elements/_icon_link.scss | 47 +++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 scss/elements/_icon_link.scss

diff --git a/scss/elements/_icon_link.scss b/scss/elements/_icon_link.scss
new file mode 100644
index 00000000..334c21c4
--- /dev/null
+++ b/scss/elements/_icon_link.scss
@@ -0,0 +1,47 @@
+@mixin icon-link {
+  @include h5;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding: $gap;
+  text-decoration: none;
+  background: none;
+  transition: background-color $hover-transition-time;
+  border-radius: $gap / 2;
+
+  .icon {
+    @include icon-color($color-primary);
+    @include icon-size(12);
+    margin-right: $gap;
+  }
+}
+
+@mixin icon-link-vertical {
+  flex-direction: column;
+
+  .icon {
+    margin: 0 $gap $gap;
+  }
+}
+
+@mixin icon-link-color($color: $color-blue, $hover-color: $color-aqua-lightest) {
+  color: $color;
+
+  &:hover {
+    background-color: $hover-color;
+    color: $color;
+  }
+
+  .icon {
+    @include icon-color($color);
+  }
+}
+
+.icon-link {
+  @include icon-link;
+  @include icon-link-color($color-primary);
+
+  &.icon-link--vertical {
+    @include icon-link-vertical;
+  }
+}

From 323d54ef0982e5b0eb328146669c050138b2c2aa Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 30 Jul 2018 11:19:12 -0400
Subject: [PATCH 7/9] remove default margin from field labels

---
 scss/elements/_inputs.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scss/elements/_inputs.scss b/scss/elements/_inputs.scss
index 275ad54a..2f3cf594 100644
--- a/scss/elements/_inputs.scss
+++ b/scss/elements/_inputs.scss
@@ -66,6 +66,7 @@
 
   label {
     padding: 0 0 $gap 0;
+    margin: 0;
     @include h4;
     @include line-max;
     position: relative;

From 81dff5a907a4fd60e98b6aa84bba467e43941b10 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 30 Jul 2018 11:19:18 -0400
Subject: [PATCH 8/9] imports

---
 scss/atat.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/scss/atat.scss b/scss/atat.scss
index c5485270..596ed396 100644
--- a/scss/atat.scss
+++ b/scss/atat.scss
@@ -6,6 +6,7 @@
 
 @import 'elements/typography';
 @import 'elements/icons';
+@import 'elements/icon_link';
 @import 'elements/inputs';
 @import 'elements/buttons';
 @import 'elements/panels';
@@ -30,3 +31,4 @@
 @import 'sections/login';
 @import 'sections/request_approval';
 @import 'sections/projects_list';
+@import 'sections/project_edit';

From d2e979f387c85ab493f228698969e8a8b9570e94 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 30 Jul 2018 12:09:30 -0400
Subject: [PATCH 9/9] Add a template_vars block

---
 templates/base.html.to         |  3 +++
 templates/project_edit.html.to | 20 +++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/templates/base.html.to b/templates/base.html.to
index 8ee8ceff..3f0d5995 100644
--- a/templates/base.html.to
+++ b/templates/base.html.to
@@ -14,6 +14,9 @@
   <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
 </head>
 <body class="{% if modalOpen() %} modalOpen{% end %}">
+
+  {% block template_vars %}{% end %}
+
   {% include 'navigation/topbar.html.to' %}
 
   <div class='global-layout'>
diff --git a/templates/project_edit.html.to b/templates/project_edit.html.to
index 0ed30402..13d9b995 100644
--- a/templates/project_edit.html.to
+++ b/templates/project_edit.html.to
@@ -1,5 +1,10 @@
 {% extends "base_workspace.html.to" %}
-{% set project_id = "789" %}
+
+{% block template_vars %}
+  {% set is_new_project = False %}
+  {% set project_name = "Code.mil" %}
+  {% set project_id = "789" %}
+{% end %}
 
 {% block workspace_content %}
 
@@ -12,7 +17,14 @@
 <form action=''>
   <div class='panel'>
     <div class='panel__heading'>
-      <h1 class='h2'>Add a new project</h1>
+      <h1 class='h2'>
+        {% if is_new_project %}
+          Add a new project
+        {% else %}
+          {{ project_name }}
+          <span class='subtitle'>Edit project</span>
+        {% end %}
+      </h1>
     </div>
 
     <div class='panel__content'>
@@ -80,7 +92,9 @@
   </section>
 
   <div class='action-group'>
-    <a href='/styleguide' class='action-group__action usa-button usa-button-big'>Save Project</a>
+    <a href='/styleguide' class='action-group__action usa-button usa-button-big'>
+      {% if is_new_project %}Create{% else %}Save{% end %} Project
+    </a>
     <a href='/styleguide' class='action-group__action icon-link'>
       {% module Icon('x') %}
       <span>Cancel</span>