diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss index a09d12f0..dd68fd64 100644 --- a/styles/components/_modal.scss +++ b/styles/components/_modal.scss @@ -163,10 +163,7 @@ body { .icon-link { padding-top: 0.5rem; padding-left: 0; - - .icon { - margin-left: 0; - } + margin-left: 0; } } diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 2ae5f61e..acd1c882 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -197,6 +197,7 @@ } table { + thead { th:first-child { padding-left: 3 * $gap; @@ -294,6 +295,21 @@ float: right; padding: 3 * $gap; } + + a.modal-link.icon-link { + float: right; + + .icon { + width: 1.7rem; + height: 1.7rem; + + svg { + width: 1.7rem; + height: 1.7rem; + } + } + + } } .application-content { diff --git a/templates/components/multi_step_modal_form.html b/templates/components/multi_step_modal_form.html index c4435bb8..5392c6d9 100644 --- a/templates/components/multi_step_modal_form.html +++ b/templates/components/multi_step_modal_form.html @@ -1,4 +1,5 @@ {% from "components/modal.html" import Modal %} +{% from "components/icon.html" import Icon %} {% set numbers = ['one', 'two', 'three', 'four', 'five'] %} @@ -28,7 +29,10 @@ {% set step_count = steps|length %}
- + + {{ button_text }} + {{ Icon('plus-circle-solid') }} +
{{ form.csrf_token }} {% call Modal(name=name, dismissable=dismissable, classes="wide") %} diff --git a/templates/fragments/admin/add_new_portfolio_member.html b/templates/fragments/admin/add_new_portfolio_member.html new file mode 100644 index 00000000..bc6bbd26 --- /dev/null +++ b/templates/fragments/admin/add_new_portfolio_member.html @@ -0,0 +1,80 @@ +{% from "components/icon.html" import Icon %} +{% from "components/text_input.html" import TextInput %} +{% from "components/multi_step_modal_form.html" import MultiStepModalForm %} + +{% macro SimpleOptionsInput(field) %} +
+
+ +
+ {{ field.label | striptags}} +
+ + {{ field() }} +
+
+{% endmacro %} + +{% set step_one %} +
+

Invite New Portfolio Member

+
+
+
+ {{ TextInput(member_form.first_name, validation='requiredField') }} +
+
+ {{ TextInput(member_form.last_name, validation='requiredField') }} +
+
+
+
+ {{ TextInput(member_form.email, validation='email') }} +
+
+ {{ TextInput(member_form.phone_number, validation='usPhone', optional=True) }} +
+
+
+
+ {{ TextInput(member_form.dod_id, validation='dodId') }} +
+
+
+
+
+ + Cancel +
+{% endset %} +{% set step_two %} +
+
+

Assign Member Permissions

+ + {{ Icon('info') }} + {{ "portfolios.admin.permissions_info" | translate }} + +
+ {{ SimpleOptionsInput(member_form.perms_app_mgmt) }} + {{ SimpleOptionsInput(member_form.perms_funding) }} + {{ SimpleOptionsInput(member_form.perms_reporting) }} + {{ SimpleOptionsInput(member_form.perms_portfolio_mgmt) }} +
+ + Cancel +
+
+{% endset %} +{{ MultiStepModalForm( + 'add-port-mem', + member_form, + url_for("portfolios.create_member", portfolio_id=portfolio.id), + [step_one, step_two], + button_text="portfolios.admin.add_new_member" | translate) + }} diff --git a/templates/fragments/admin/portfolio_members.html b/templates/fragments/admin/portfolio_members.html index 5c7032a7..f307c01f 100644 --- a/templates/fragments/admin/portfolio_members.html +++ b/templates/fragments/admin/portfolio_members.html @@ -47,19 +47,20 @@ - {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
- - {{ "portfolios.admin.add_member" | translate }} - {{ Icon('plus-circle-solid') }} - - + {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %} + {% include "fragments/admin/add_new_portfolio_member.html" %} + {% endif %} + {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %} + + {% endif %}
- {% endif %}
{% endif %} + + diff --git a/templates/portfolios/admin.html b/templates/portfolios/admin.html index 405e2b60..242d65af 100644 --- a/templates/portfolios/admin.html +++ b/templates/portfolios/admin.html @@ -5,19 +5,6 @@ {% from "components/text_input.html" import TextInput %} {% from "components/multi_step_modal_form.html" import MultiStepModalForm %} -{% macro SimpleOptionsInput(field) %} -
-
- -
- {{ field.label | striptags}} -
- - {{ field() }} -
-
-{% endmacro %} - {% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %} {% block portfolio_content %} @@ -64,70 +51,6 @@ {% include "fragments/admin/portfolio_members.html" %} {% endif %} - {% set step_one %} -
-

Invite New Portfolio Member

-
-
-
- {{ TextInput(member_form.first_name, validation='requiredField') }} -
-
- {{ TextInput(member_form.last_name, validation='requiredField') }} -
-
-
-
- {{ TextInput(member_form.email, validation='email') }} -
-
- {{ TextInput(member_form.phone_number, validation='usPhone', optional=True) }} -
-
-
-
- {{ TextInput(member_form.dod_id, validation='dodId') }} -
-
-
-
-
- - Cancel -
- {% endset %} - {% set step_two %} -
-
-

Assign Member Permissions

- - {{ Icon('info') }} - {{ "portfolios.admin.permissions_info" | translate }} - -
- {{ SimpleOptionsInput(member_form.perms_app_mgmt) }} - {{ SimpleOptionsInput(member_form.perms_funding) }} - {{ SimpleOptionsInput(member_form.perms_reporting) }} - {{ SimpleOptionsInput(member_form.perms_portfolio_mgmt) }} -
- - Cancel -
-
- {% endset %} - {{ MultiStepModalForm( - 'add-port-mem', - member_form, - url_for("portfolios.create_member", portfolio_id=portfolio.id), - [step_one, step_two], - button_text="add new member") - }} - {% include "fragments/audit_events_log.html" %} {% if user_can(permissions.VIEW_PORTFOLIO_ACTIVITY_LOG) %} diff --git a/translations.yaml b/translations.yaml index 364ced82..07caca25 100644 --- a/translations.yaml +++ b/translations.yaml @@ -571,6 +571,7 @@ portfolios: add_member: Add a New Member permissions_info: Learn more about these permissions activity_log_title: Activity Log + add_new_member: Add a New Member members: archive_button: Archive User permissions: