From a7f49d1299a974d276dc96d600e3edd7e5703467 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 30 Jul 2018 16:09:55 -0400 Subject: [PATCH 1/3] EmptyState UI module --- atst/ui_modules.py | 9 ++++++ scss/components/_empty_state.scss | 36 ++++++++++++++++-------- templates/components/empty_state.html.to | 9 ++++++ 3 files changed, 42 insertions(+), 12 deletions(-) create mode 100644 templates/components/empty_state.html.to diff --git a/atst/ui_modules.py b/atst/ui_modules.py index 748ca980..96bdab07 100644 --- a/atst/ui_modules.py +++ b/atst/ui_modules.py @@ -46,3 +46,12 @@ class SidenavItem(UIModule): active=active, icon=icon, subnav=subnav) + +class EmptyState(UIModule): + def render(self, message, actionLabel, actionHref, icon=None): + return self.render_string( + "components/empty_state.html.to", + message=message, + actionLabel=actionLabel, + actionHref=actionHref, + icon=icon) diff --git a/scss/components/_empty_state.scss b/scss/components/_empty_state.scss index d11f5083..be8675ad 100644 --- a/scss/components/_empty_state.scss +++ b/scss/components/_empty_state.scss @@ -1,15 +1,27 @@ .empty-state { text-align: center; - padding-top: 10rem; - - p { - font-family: $font-sans; - font-weight: 300; - line-height: 10rem; - font-size: 44px; - line-height: 5rem; - margin: 0 auto; - padding-bottom: 2rem; - max-width: 40%; + padding: 6rem ($gap * 2) 0; + display: flex; + flex-direction: column; + align-items: center; + + @include media($medium-screen) { + padding: 8rem ($gap * 4) 0; } -} \ No newline at end of file + + .icon { + @include icon-size(50); + @include icon-color($color-gray-light); + } + + p { + @include h2; + line-height: 1.2; + max-width: 15em; + color: $color-gray; + + @include media($large-screen) { + @include h1; + } + } +} diff --git a/templates/components/empty_state.html.to b/templates/components/empty_state.html.to new file mode 100644 index 00000000..30246ddb --- /dev/null +++ b/templates/components/empty_state.html.to @@ -0,0 +1,9 @@ +
+

{{ message }}

+ + {% if icon %} + {% module Icon(icon) %} + {% end %} + + {{ actionLabel }} +
From d9d638ab3b7fec632b415bac06e3bec58aac01a8 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 30 Jul 2018 16:10:28 -0400 Subject: [PATCH 2/3] Add conditional empty state modules to Requests, Workspace Members, and Workspace Projects --- templates/requests.html.to | 124 +++++++++++++++------------ templates/workspace_members.html.to | 118 +++++++++++-------------- templates/workspace_projects.html.to | 65 ++++++++------ 3 files changed, 163 insertions(+), 144 deletions(-) diff --git a/templates/requests.html.to b/templates/requests.html.to index 66dbcd9d..1cdd2433 100644 --- a/templates/requests.html.to +++ b/templates/requests.html.to @@ -1,5 +1,9 @@ {% extends "base.html.to" %} +{% block template_vars %} + {% set requestsEmpty = False %} +{% end %} + {% block modal %} {% if modalOpen() %} {% apply modal %} @@ -31,67 +35,79 @@ {% block content %} +{% if requestsEmpty %} -{% module Alert('Pending Financial Verification', - message="

Your next step is to create a Task Order (T.O.) associated with JEDI Cloud. Please consult a Contracting Officer (KO) or Contracting Officer Representative (COR) to help with this step.

" -) %} + {% module EmptyState( + 'There are currently no active requests for you to see.', + actionLabel='Create a new JEDI Cloud Request', + actionHref='/requests/new', + icon='document' + )%} -
+{% else %} -
-
- - - -
+ {% module Alert('Pending Financial Verification', + message="

Your next step is to create a Task Order (T.O.) associated with JEDI Cloud. Please consult a Contracting Officer (KO) or Contracting Officer Representative (COR) to help with this step.

" + ) %} -
- - -
-
+
-
- - - - - - - - - - - - - {% for r in requests %} - - + +
+ + + +
+ +
+ + +
+ + +
+
Order IDRequest DateRequesterTotal AppsStatusActions
- {{ r['order_id'] }} - {% if r['is_new'] %}New -
+ + + + + + + + + + + + {% for r in requests %} + + + {% end %} + + + + + + {% end %} - - - - - - - {% end %} - -
Order IDRequest DateRequesterTotal AppsStatusActions
+ {{ r['order_id'] }} + {% if r['is_new'] %}New + {{ r['date'] }}{{ r['full_name'] }}{{ r['app_count'] }}{{ r['status'] }} + Download + Approval +
{{ r['date'] }}{{ r['full_name'] }}{{ r['app_count'] }}{{ r['status'] }} - Download - Approval -
+ + +
-
+ +{% end %} {% end %} diff --git a/templates/workspace_members.html.to b/templates/workspace_members.html.to index a27a0b0b..53e70385 100644 --- a/templates/workspace_members.html.to +++ b/templates/workspace_members.html.to @@ -1,92 +1,78 @@ {% extends "base_workspace.html.to" %} +{% block template_vars %} + {% set membersEmpty = False %} +{% end %} + {% block workspace_content %} +{% if membersEmpty %} -
-
- - - -
+ {% module EmptyState( + 'There are currently no members in this Workspace.', + actionLabel='Invite a new Member', + actionHref='/members/new', + icon='avatar' + )%} -
- - -
-
- - -
-
+{% else %} -{#
-
-
-
- - - -
+
+
+ + +
-
-
-
-
+
+ + +
+ + + + + + + + + + + {% for m in members %} + + + + + + + {% end %} + +
Name Status FlagStatusWorkspace Role
{{ m['first_name'] }} {{ m['last_name'] }}{% if m['num_projects'] == '0' %} No Project Access {% end %}{{ m['status'] }}{{ m['workspace_role'] }}
-
#} - - -
- - - - - - - - - - - {% for m in members %} - - - - - - - {% end %} - -
Name Status FlagStatusWorkspace Role
{{ m['first_name'] }} {{ m['last_name'] }}{% if m['num_projects'] == '0' %} No Project Access {% end %}{{ m['status'] }}{{ m['workspace_role'] }}
-
+{% end %} {% end %} diff --git a/templates/workspace_projects.html.to b/templates/workspace_projects.html.to index e4008c3c..620b8396 100644 --- a/templates/workspace_projects.html.to +++ b/templates/workspace_projects.html.to @@ -1,32 +1,49 @@ {% extends "base_workspace.html.to" %} +{% block template_vars %} + {% set projectsEmpty = False %} +{% end %} + {% block workspace_content %} -{% for project in projects %} -
-
-

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

- - {% module Icon('edit') %} - edit - -
- -
{% end %} {% end %} From 4331f54adb670e805e088cf33b2b8eef11176d10 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Tue, 31 Jul 2018 12:07:25 -0400 Subject: [PATCH 3/3] remove dummy "empty" vars, just check if the arrays are empty --- templates/requests.html.to | 6 +----- templates/workspace_members.html.to | 6 +----- templates/workspace_projects.html.to | 6 +----- 3 files changed, 3 insertions(+), 15 deletions(-) diff --git a/templates/requests.html.to b/templates/requests.html.to index 1cdd2433..bd0c9e8c 100644 --- a/templates/requests.html.to +++ b/templates/requests.html.to @@ -1,9 +1,5 @@ {% extends "base.html.to" %} -{% block template_vars %} - {% set requestsEmpty = False %} -{% end %} - {% block modal %} {% if modalOpen() %} {% apply modal %} @@ -35,7 +31,7 @@ {% block content %} -{% if requestsEmpty %} +{% if not requests %} {% module EmptyState( 'There are currently no active requests for you to see.', diff --git a/templates/workspace_members.html.to b/templates/workspace_members.html.to index 53e70385..074628da 100644 --- a/templates/workspace_members.html.to +++ b/templates/workspace_members.html.to @@ -1,12 +1,8 @@ {% extends "base_workspace.html.to" %} -{% block template_vars %} - {% set membersEmpty = False %} -{% end %} - {% block workspace_content %} -{% if membersEmpty %} +{% if not members %} {% module EmptyState( 'There are currently no members in this Workspace.', diff --git a/templates/workspace_projects.html.to b/templates/workspace_projects.html.to index 620b8396..34b0933b 100644 --- a/templates/workspace_projects.html.to +++ b/templates/workspace_projects.html.to @@ -1,12 +1,8 @@ {% extends "base_workspace.html.to" %} -{% block template_vars %} - {% set projectsEmpty = False %} -{% end %} - {% block workspace_content %} -{% if projectsEmpty %} +{% if not projects %} {% module EmptyState( 'There are currently no projects set up for this Workspace.',