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/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'; 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; +} 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; + } +} 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; 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; + } +} 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 @@ + + {% block template_vars %}{% end %} + {% include 'navigation/topbar.html.to' %}
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 @@
- {{ "Workspace "+workspace_id if context == 'workspace' else "JEDI" }} + {{ "Workspace 123456" if context == 'workspace' else "JEDI" }} {% module Icon('caret_down', classes='topbar__link-icon icon--tiny') %} 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 @@ diff --git a/templates/project_edit.html.to b/templates/project_edit.html.to new file mode 100644 index 00000000..13d9b995 --- /dev/null +++ b/templates/project_edit.html.to @@ -0,0 +1,106 @@ +{% extends "base_workspace.html.to" %} + +{% block template_vars %} + {% set is_new_project = False %} + {% set project_name = "Code.mil" %} + {% set project_id = "789" %} +{% end %} + +{% block workspace_content %} + +{% module Alert( + "UI Mock", + message="

Please note, this screen is a non-functional UI mockup.

", + level="warning" +) %} + +
+
+
+

+ {% if is_new_project %} + Add a new project + {% else %} + {{ project_name }} + Edit project + {% end %} +

+
+ +
+
+ + +
+ +
+ + +
+
+
+ +
+
+

Project Environments

+
+ + {# All instances of .usa-input groups here should be replaced with {% module TextInput(wtforms.fields.Field) %} #} + +
    +
  • +
    + + +
    + +
    • + +
  • +
    + + +
    + +
    • + +
  • +
    + + +
    + +
    • + +
+ + +
+ +
+ + {% if is_new_project %}Create{% else %}Save{% end %} Project + + + {% module Icon('x') %} + Cancel + +
+
+ +{% end %} + 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 @@

{{ project['name'] }} ({{ len(project['environments'])}} environments)

- edit + edit
    {% for environment in project['environments'] %}