Merge pull request #108 from dod-ccpo/ui/project-editor
Ui/project editor
This commit is contained in:
andrewdds
GitHub
commit
558731107c
@ -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":
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
47
scss/elements/_icon_link.scss
Normal file
47
scss/elements/_icon_link.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -66,6 +66,7 @@
|
||||
|
||||
label {
|
||||
padding: 0 0 $gap 0;
|
||||
margin: 0;
|
||||
@include h4;
|
||||
@include line-max;
|
||||
position: relative;
|
||||
|
||||
19
scss/sections/_project_edit.scss
Normal file
19
scss/sections/_project_edit.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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'>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
106
templates/project_edit.html.to
Normal file
106
templates/project_edit.html.to
Normal file
@ -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="<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'>
|
||||
{% if is_new_project %}
|
||||
Add a new project
|
||||
{% else %}
|
||||
{{ project_name }}
|
||||
<span class='subtitle'>Edit project</span>
|
||||
{% end %}
|
||||
</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'>
|
||||
{% 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>
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% end %}
|
||||
|
||||
@ -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'] %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user