Fix and generalize styling for member form macro
Only display permissions with 'Edit' value Delete unused files and rename MemberForm macro file
This commit is contained in:
leigh-mil
parent
79b2773852
commit
c9d0c64c1f
@ -38,6 +38,7 @@
|
||||
@import "components/dod_login_notice.scss";
|
||||
@import "components/sticky_cta.scss";
|
||||
@import "components/error_page.scss";
|
||||
@import "components/member_form.scss";
|
||||
|
||||
@import "sections/login";
|
||||
@import "sections/home";
|
||||
|
||||
55
styles/components/_member_form.scss
Normal file
55
styles/components/_member_form.scss
Normal file
@ -0,0 +1,55 @@
|
||||
.member-form {
|
||||
text-align: left;
|
||||
min-width: 75rem;
|
||||
|
||||
input[type="checkbox"] + label::before {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.input__inline-fields {
|
||||
text-align: left;
|
||||
|
||||
.usa-input__choices label {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.input__inline-fields {
|
||||
padding: $gap * 2;
|
||||
border: 1px solid $color-gray-lighter;
|
||||
|
||||
&.checked {
|
||||
border: 1px solid $color-blue;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
p.usa-input__help {
|
||||
margin-bottom: 0;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
.usa-input {
|
||||
width: 45rem;
|
||||
|
||||
input,
|
||||
label,
|
||||
.usa-input__message {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
label .icon-validation {
|
||||
left: unset;
|
||||
right: -$gap * 4;
|
||||
}
|
||||
|
||||
&--validation--phoneExt {
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -23,66 +23,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
#modal--add-app-mem,
|
||||
.form-content--app-mem {
|
||||
text-align: left;
|
||||
|
||||
.modal__body {
|
||||
min-width: 75rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label::before {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.input__inline-fields {
|
||||
text-align: left;
|
||||
|
||||
.usa-input__choices label {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.input__inline-fields {
|
||||
padding: $gap * 2;
|
||||
border: 1px solid $color-gray-lighter;
|
||||
|
||||
&.checked {
|
||||
border: 1px solid $color-blue;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
p.usa-input__help {
|
||||
margin-bottom: 0;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.application-member__user-info {
|
||||
.usa-input {
|
||||
width: 45rem;
|
||||
|
||||
input,
|
||||
label,
|
||||
.usa-input__message {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
label .icon-validation {
|
||||
left: unset;
|
||||
right: -$gap * 4;
|
||||
}
|
||||
|
||||
&--validation--phoneExt {
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.environment-roles {
|
||||
padding: 0 ($gap * 3) ($gap * 3);
|
||||
|
||||
|
||||
@ -118,7 +118,7 @@
|
||||
{% endmacro %}
|
||||
|
||||
{% macro InfoFields(member_form) %}
|
||||
<div class="application-member__user-info">
|
||||
<div class="user-info">
|
||||
{{ TextInput(member_form.first_name, validation='requiredField', optional=False) }}
|
||||
{{ TextInput(member_form.last_name, validation='requiredField', optional=False) }}
|
||||
{{ TextInput(member_form.email, validation='email', optional=False) }}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/label.html" import Label %}
|
||||
{% import "components/member_form_template.html" as member_form %}
|
||||
{% import "components/member_form.html" as member_form %}
|
||||
{% import "applications/fragments/member_form_fields.html" as member_fields %}
|
||||
{% from "components/modal.html" import Modal %}
|
||||
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% macro MemberFormTemplate(title=None, next_button=None, previous=True, modal=modal) %}
|
||||
<hr class="full-width">
|
||||
{% if title %} <h1>{{ title }}</h1> {% endif %}
|
||||
|
||||
{{ caller() }}
|
||||
<!-- Layout macro -->
|
||||
{% macro MemberForm(title=None, next_button=None, previous=True, modal=modal) %}
|
||||
<div class="member-form">
|
||||
<hr class="full-width">
|
||||
{% if title %} <h1>{{ title }}</h1> {% endif %}
|
||||
|
||||
{{ caller() }}
|
||||
</div>
|
||||
<div class='action-group'>
|
||||
{{ next_button }}
|
||||
{% if previous %}
|
||||
@ -19,6 +19,8 @@
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
<!-- Step macros to use with MultiStepModalForm -->
|
||||
{% macro BasicStep(
|
||||
title=None,
|
||||
form=form,
|
||||
@ -35,7 +37,7 @@
|
||||
value='{{ next_button_text }}'>
|
||||
{% endset %}
|
||||
|
||||
{% call MemberFormTemplate(title=title, next_button=next_button, previous=previous, modal=modal) %}
|
||||
{% call MemberForm(title=title, next_button=next_button, previous=previous, modal=modal) %}
|
||||
{{ form }}
|
||||
{% endcall %}
|
||||
{% endmacro %}
|
||||
@ -57,7 +59,7 @@
|
||||
value='{{ submit_text }}'>
|
||||
{% endset %}
|
||||
|
||||
{% call MemberFormTemplate(title=title, next_button=next_button, previous=previous, modal=modal) %}
|
||||
{% call MemberForm(title=title, next_button=next_button, previous=previous, modal=modal) %}
|
||||
{{ form }}
|
||||
{% endcall %}
|
||||
{% endmacro %}
|
||||
@ -9,7 +9,7 @@
|
||||
{{ Icon('info') }}
|
||||
{{ "portfolios.admin.permissions_info" | translate }}
|
||||
</a>
|
||||
<div class="application-perms">
|
||||
<div class="portfolio-perms">
|
||||
{% if new %}
|
||||
{% set app_mgmt = form.perms_app_mgmt.name %}
|
||||
{% set funding = form.perms_funding.name %}
|
||||
@ -30,7 +30,7 @@
|
||||
{% endmacro %}
|
||||
|
||||
{% macro InfoFields(member_form) %}
|
||||
<div class="application-member__user-info">
|
||||
<div class="user-info">
|
||||
{{ TextInput(member_form.first_name, validation='requiredField', optional=False) }}
|
||||
{{ TextInput(member_form.last_name, validation='requiredField', optional=False) }}
|
||||
{{ TextInput(member_form.email, validation='email', optional=False) }}
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
{% from "components/alert.html" import Alert %}
|
||||
{% from "components/modal.html" import Modal %}
|
||||
{% from "components/options_input.html" import OptionsInput %}
|
||||
|
||||
{% for subform in member_perms_form.members_permissions %}
|
||||
{% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.member_id.data) %}
|
||||
{% set ppoc = subform.member_id.data == ppoc_id %}
|
||||
{% set archive_button_class = 'button-danger-outline' %}
|
||||
|
||||
<tr {% if ppoc %}class="members-table-ppoc"{% endif %}>
|
||||
<td class='name'>{{ subform.member_name.data }}
|
||||
<div>
|
||||
{% if ppoc %}
|
||||
{% set archive_button_class = 'usa-button-disabled' %}
|
||||
<span class='you'>PPoC</span>
|
||||
{% endif %}
|
||||
{% if subform.member_id.data == current_member_id %}
|
||||
{% set archive_button_class = 'usa-button-disabled' %}
|
||||
<span class='you'>(<span class='green'>you</span>)</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>{{ OptionsInput(subform.perms_app_mgmt, label=False, disabled=ppoc) }}</td>
|
||||
<td>{{ OptionsInput(subform.perms_funding, label=False, disabled=ppoc) }}</td>
|
||||
<td>{{ OptionsInput(subform.perms_reporting, label=False, disabled=ppoc) }}</td>
|
||||
<td>{{ OptionsInput(subform.perms_portfolio_mgmt, label=False, disabled=ppoc) }}</td>
|
||||
|
||||
<td>
|
||||
<a v-on:click="openModal('{{ modal_id }}')" class='usa-button {{ archive_button_class }}'>
|
||||
{{ "portfolios.members.archive_button" | translate }}
|
||||
</a>
|
||||
{% if not ppoc %}
|
||||
{{ subform.member_id() }}
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
@ -1,26 +0,0 @@
|
||||
{% for subform in member_perms_form.members_permissions %}
|
||||
{% set ppoc = subform.member_id.data == ppoc_id %}
|
||||
{% set heading_perms = [subform.perms_app_mgmt, subform.perms_funding, subform.perms_reporting, subform.perms_portfolio_mgmt] %}
|
||||
|
||||
<tr>
|
||||
<td class='name'>{{ subform.member_name.data }}
|
||||
<div>
|
||||
{% if ppoc %}
|
||||
<span class='you'>PPoC</span>
|
||||
{% endif %}
|
||||
{% if subform.member_id.data == current_member_id %}
|
||||
<span class='you'>(<span class='green'>you</span>)</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{% for access in heading_perms %}
|
||||
{% if dict(access.choices).get(access.data) == ('portfolios.members.permissions.edit_access' | translate) %}
|
||||
<td class='green'>{{ 'portfolios.members.permissions.edit_access' | translate }}</td>
|
||||
{% else %}
|
||||
<td>{{ 'common.view' | translate }}</td>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</tr>
|
||||
{% endfor %}
|
||||
@ -1,6 +1,6 @@
|
||||
{% from "components/alert.html" import Alert %}
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% import "components/member_form_template.html" as member_form %}
|
||||
{% import "components/member_form.html" as member_form %}
|
||||
{% from "components/modal.html" import Modal %}
|
||||
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
|
||||
{% from 'components/save_button.html' import SaveButton %}
|
||||
@ -34,7 +34,9 @@
|
||||
<td>
|
||||
{% for perm, value in member.permission_sets.items() -%}
|
||||
<div>
|
||||
{{ ("portfolios.admin.members.{}.{}".format(perm, value)) | translate }}
|
||||
{% if value -%}
|
||||
{{ ("portfolios.admin.members.{}.{}".format(perm, value)) | translate }}
|
||||
{%- endif %}
|
||||
</div>
|
||||
{%-endfor %}
|
||||
</td>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user