Merge pull request #1104 from dod-ccpo/modal-styling-update
Modal styling update
This commit is contained in:
leigh-mil
GitHub
commit
250b6755aa
@ -3,7 +3,7 @@
|
||||
"files": "^.secrets.baseline$",
|
||||
"lines": null
|
||||
},
|
||||
"generated_at": "2019-10-02T23:24:50Z",
|
||||
"generated_at": "2019-10-03T14:34:50Z",
|
||||
"plugins_used": [
|
||||
{
|
||||
"base64_limit": 4.5,
|
||||
|
||||
@ -23,9 +23,13 @@
|
||||
<div class="modal__container">
|
||||
<div aria-modal="true" class="modal__dialog" role="dialog">
|
||||
<div class="modal__body">
|
||||
<!-- Use these elements in caller for modal to be styled properly -->
|
||||
<!-- h1 for header text -->
|
||||
<!-- hr -->
|
||||
<!-- div class='action-group' for buttons -->
|
||||
<div class="task-order__modal-cancel">
|
||||
<h1>Do you want to save this draft?</h1>
|
||||
<div class="task-order__modal-cancel_buttons">
|
||||
<div class="action-group">
|
||||
<button class="usa-button usa-button-primary" formaction="/portfolios/e4edf994-04f4-4aaa-ba30-39507e1068a8/task_orders/form/cancel?save=False" type="submit">No, delete it</button>
|
||||
<button class="usa-button usa-button-primary" formaction="/portfolios/e4edf994-04f4-4aaa-ba30-39507e1068a8/task_orders/form/cancel?save=True" type="submit">Yes, save for later</button>
|
||||
</div>
|
||||
@ -33,9 +37,6 @@
|
||||
<button class="icon-link modal__dismiss" type="button" v-on:click='closeModal("cancel")'>
|
||||
<span aria-hidden="true" class="icon icon--x"><svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"></path><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"></path></svg>
|
||||
</span>
|
||||
<span>
|
||||
Close
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
padding: $gap 0;
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
border: 1px solid $color-red;
|
||||
}
|
||||
|
||||
@ -20,16 +19,16 @@
|
||||
&__body {
|
||||
padding: $gap * 2;
|
||||
margin: 0;
|
||||
|
||||
hr {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
margin-bottom: $gap * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include icon-size(60);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-bottom: $gap * 4;
|
||||
width: 80%;
|
||||
border: 0.5px solid $color-gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -197,6 +197,5 @@
|
||||
|
||||
& > fieldset.usa-input__choices label {
|
||||
display: inline;
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,9 +50,8 @@ body {
|
||||
|
||||
&__body {
|
||||
background-color: $color-white;
|
||||
padding: $gap * 2;
|
||||
padding: $gap * 1.5;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
|
||||
@ -60,10 +59,6 @@ body {
|
||||
max-height: calc(100vh - #{$gap * 8});
|
||||
}
|
||||
|
||||
@include media($medium-screen) {
|
||||
padding: $gap * 2.5 $gap * 5;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
@include h3;
|
||||
@ -121,13 +116,22 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-group {
|
||||
background-color: $color-gray-lightest;
|
||||
padding: $gap * 2;
|
||||
margin: ($gap * 5) (-$gap * 1.5) (-$gap * 1.5);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__dismiss {
|
||||
position: absolute;
|
||||
top: $gap;
|
||||
right: $gap;
|
||||
width: 8rem;
|
||||
|
||||
@include media($medium-screen) {
|
||||
top: $gap * 2;
|
||||
@ -140,99 +144,14 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
&--dissmissable {
|
||||
.modal__body {
|
||||
> :first-child {
|
||||
margin-right: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
&--header {
|
||||
margin-bottom: 4rem;
|
||||
text-align: left;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
padding-top: 0.5rem;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--padded {
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
|
||||
.usa-input .usa-input__choices select {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-menu ul {
|
||||
width: 40%;
|
||||
margin-left: 30%;
|
||||
font-size: 2rem;
|
||||
|
||||
&__item::before {
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
margin-left: -1.25rem;
|
||||
}
|
||||
|
||||
&__item--complete::before {
|
||||
content: url("#{$asset-path}/icons/checkmark-alt.svg");
|
||||
padding-top: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
.form-col {
|
||||
.usa-input {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-link--default {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.usa-button {
|
||||
margin-left: 2rem;
|
||||
|
||||
&[type="button"]:disabled {
|
||||
background-color: $color-gray-lighter;
|
||||
opacity: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.wide {
|
||||
.modal__dialog {
|
||||
max-width: 90rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal__body {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-button {
|
||||
min-width: 17rem;
|
||||
}
|
||||
|
||||
.usa-input .checkbox {
|
||||
margin-left: 3rem;
|
||||
.usa-input {
|
||||
.checkbox {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
@ -241,3 +160,9 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal--dismissable {
|
||||
.modal__body {
|
||||
padding-top: $gap * 3.5;
|
||||
}
|
||||
}
|
||||
|
||||
@ -157,7 +157,6 @@
|
||||
}
|
||||
|
||||
input.usa-button.usa-button-primary {
|
||||
margin: 0;
|
||||
width: 9rem;
|
||||
height: 4rem;
|
||||
}
|
||||
@ -590,3 +589,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#modal--add-port-mem {
|
||||
.modal__body {
|
||||
width: 55rem;
|
||||
}
|
||||
|
||||
.form-col:last-child {
|
||||
margin-right: $gap * 3;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,8 +3,10 @@
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
padding: 0;
|
||||
padding-top: $gap;
|
||||
}
|
||||
|
||||
&--two {
|
||||
@ -40,7 +42,7 @@
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: ($gap * 4) ($gap * 2);
|
||||
padding: ($gap * 4) ($gap * 2) 0;
|
||||
margin: 0 ($gap * 2);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
|
||||
@ -80,3 +80,9 @@
|
||||
p {
|
||||
max-width: 80ch;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid $color-gray-light;
|
||||
margin: ($gap * 3) ($site-margins * -4);
|
||||
}
|
||||
|
||||
@ -88,6 +88,7 @@
|
||||
|
||||
&__title {
|
||||
align-items: center;
|
||||
font-weight: $font-normal;
|
||||
|
||||
&-inline {
|
||||
display: inline-block;
|
||||
|
||||
@ -119,11 +119,4 @@
|
||||
&__actions {
|
||||
@include panel-actions;
|
||||
}
|
||||
|
||||
hr,
|
||||
&__break {
|
||||
border: 0;
|
||||
border-bottom: 1px solid $color-gray-light;
|
||||
margin: ($gap * 4) ($site-margins * -4);
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,6 +34,10 @@
|
||||
|
||||
.input__inline-fields {
|
||||
text-align: left;
|
||||
|
||||
.usa-input__choices label {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.input__inline-fields {
|
||||
@ -77,11 +81,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
.environment-roles {
|
||||
@ -110,7 +109,7 @@
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0.5em;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -18,13 +18,6 @@
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid $color-gray-light;
|
||||
margin-top: $gap * 4;
|
||||
margin-bottom: $gap * 4;
|
||||
}
|
||||
|
||||
.links {
|
||||
justify-content: flex-start;
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
&__col {
|
||||
hr {
|
||||
margin: (2 * $gap) 0;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
}
|
||||
|
||||
@include media($medium-screen) {
|
||||
|
||||
@ -29,10 +29,8 @@
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
margin-top: $gap * 4;
|
||||
margin-bottom: $gap * 4;
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
@ -139,77 +137,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.usa-input__title,
|
||||
.usa-input__title-inline {
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
|
||||
&.task_order__form {
|
||||
hr {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.totals-box {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
left: 100%;
|
||||
&.icon--question {
|
||||
@include icon-color($color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
.usa-input__title {
|
||||
font-weight: $font-bold;
|
||||
margin-bottom: $gap;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-form-group-year {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
|
||||
.usa-alert {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.usa-input {
|
||||
margin-top: $gap;
|
||||
margin-bottom: $gap;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin-bottom: 0;
|
||||
|
||||
.usa-input {
|
||||
margin-left: $gap;
|
||||
margin-right: $gap;
|
||||
}
|
||||
|
||||
.form-col:first-child {
|
||||
.usa-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-col:last-child {
|
||||
.usa-input {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-order__pdf-help-text {
|
||||
margin-bottom: 4 * $gap;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
@include shadow-panel;
|
||||
}
|
||||
@ -271,15 +198,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.task-order__modal-cancel_buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.clin-card {
|
||||
width: 62rem;
|
||||
position: relative;
|
||||
|
||||
@ -2,10 +2,8 @@
|
||||
{% import "applications/fragments/member_form_fields.html" as member_fields %}
|
||||
|
||||
{% macro MemberFormTemplate(title, next_button, previous=True) %}
|
||||
<div class="modal__form--header">
|
||||
<h1>{{ Icon('avatar') }} {{ title }}</h1>
|
||||
<hr>
|
||||
</div>
|
||||
<hr>
|
||||
<h1>{{ Icon('avatar') }} {{ title }}</h1>
|
||||
|
||||
{{ caller() }}
|
||||
|
||||
@ -18,7 +16,7 @@
|
||||
class='action-group__action usa-button usa-button-secondary'
|
||||
value='{{ "common.previous" | translate }}'>
|
||||
{% endif %}
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
|
||||
<a class='action-group__action' v-on:click="closeModal('{{ new_port_mem }}')">{{ "common.cancel" | translate }}</a>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
{{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="panel__break">
|
||||
<hr>
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--two-thirds">
|
||||
{{ TextInput(form.description, paragraph=True, optional=True) }}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<p>
|
||||
{{ 'portfolios.applications.new.step_2_description' | translate }}
|
||||
</p>
|
||||
<hr class="panel__break">
|
||||
<hr>
|
||||
<application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
|
||||
<form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit">
|
||||
<div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
<p>
|
||||
{{ ('portfolios.applications.new.step_3_description' | translate) }}
|
||||
</p>
|
||||
<hr class="panel__break">
|
||||
|
||||
<hr>
|
||||
|
||||
{{ MemberManagementTemplate(
|
||||
application,
|
||||
members,
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
{% import "applications/fragments/new_member_modal_content.html" as member_steps %}
|
||||
{% from "fragments/members.html" import MemberManagementTemplate %}
|
||||
{% from "components/modal.html" import Modal %}
|
||||
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
|
||||
{% from "components/pagination.html" import Pagination %}
|
||||
{% from "components/save_button.html" import SaveButton %}
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
@ -219,7 +218,7 @@
|
||||
|
||||
{% call Modal(name="delete-application") %}
|
||||
<h1>{{ "portfolios.applications.delete.header" | translate }}</h1>
|
||||
|
||||
<hr>
|
||||
{{
|
||||
Alert(
|
||||
title=("components.modal.destructive_title" | translate),
|
||||
|
||||
@ -59,6 +59,8 @@
|
||||
{% for user, form in users_info %}
|
||||
{% set modal_id = "disable_ccpo_user_{}".format(user.dod_id) %}
|
||||
{% call Modal(name=modal_id) %}
|
||||
<h1>Disable CCPO User</h1>
|
||||
<hr>
|
||||
{{
|
||||
Alert(
|
||||
title=("components.modal.destructive_title" | translate),
|
||||
|
||||
@ -16,9 +16,7 @@
|
||||
{{ delete_text }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="action-group">
|
||||
<a v-on:click="deleteText = ''; $root.closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
|
||||
</div>
|
||||
<a v-on:click="deleteText = ''; $root.closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</delete-confirmation>
|
||||
|
||||
@ -6,14 +6,16 @@
|
||||
<div class='modal__container'>
|
||||
<div class='modal__dialog' role='dialog' aria-modal='true'>
|
||||
<div class='modal__body'>
|
||||
<!-- Use these elements in caller for modal to be styled properly -->
|
||||
<!-- h1 for header text -->
|
||||
<!-- hr -->
|
||||
<!-- div class='action-group' for buttons -->
|
||||
|
||||
{{ caller() }}
|
||||
|
||||
{% if dismissable %}
|
||||
<button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
|
||||
{{ Icon('x') }}
|
||||
<span>
|
||||
{{ "common.close" | translate }}
|
||||
</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@ -28,12 +28,12 @@
|
||||
{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%}
|
||||
{% set step_count = steps|length %}
|
||||
<multi-step-modal-form inline-template :steps={{ step_count }}>
|
||||
{% call Modal(name=name, dismissable=dismissable, classes="wide") %}
|
||||
{% call Modal(name=name, dismissable=dismissable) %}
|
||||
<form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
|
||||
{{ form.csrf_token }}
|
||||
<div v-if="$root.activeModal === '{{ name }}'">
|
||||
{% for step in steps %}
|
||||
<div class="modal__form" v-show="step === {{ loop.index0 }}">
|
||||
<div v-show="step === {{ loop.index0 }}">
|
||||
{{ FormSteps(step_count, loop.index) }}
|
||||
{{ step }}
|
||||
</div>
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
{%- endif %}
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="panel__body">
|
||||
<hr>
|
||||
<p>
|
||||
{{ "common.lorem" | translate }}
|
||||
</p>
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
{% for member in members %}
|
||||
{%- if user_can_edit_app_member %}
|
||||
{% set modal_name = "edit_member-{}".format(loop.index) %}
|
||||
{% call Modal(modal_name) %}
|
||||
{% call Modal(modal_name, classes="form-content--app-mem") %}
|
||||
<div class="modal__form--header">
|
||||
<h1>{{ Icon('avatar') }} {{ member.user_name }}</h1>
|
||||
<hr>
|
||||
@ -88,7 +88,7 @@
|
||||
{{ member_fields.InfoFields(member.update_invite_form) }}
|
||||
<div class="action-group">
|
||||
{{ SaveButton(text='Resend Invite', element='input', additional_classes='action-group__action') }}
|
||||
<a class='action-group__action usa-button usa-button-secondary' v-on:click="closeModal('{{ resend_invite_modal }}')">{{ "common.cancel" | translate }}</a>
|
||||
<a class='action-group__action' v-on:click="closeModal('{{ resend_invite_modal }}')">{{ "common.cancel" | translate }}</a>
|
||||
</div>
|
||||
</form>
|
||||
</base-form>
|
||||
@ -98,17 +98,17 @@
|
||||
|
||||
{% if user_can_delete_app_member and member.role_status == 'pending' -%}
|
||||
{% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
|
||||
{% call Modal(name=revoke_invite_modal, dismissable=True) %}
|
||||
<div class="task-order__modal-cancel">
|
||||
<form method="post" action="{{ url_for('applications.revoke_invite', application_id=application.id, application_role_id=member.role_id) }}">
|
||||
{{ member.form.csrf_token }}
|
||||
<h1>{{ "invites.revoke.modal_heading" | translate({'user_name': member.user_name}) }}</h1>
|
||||
<div class="task-order__modal-cancel_buttons">
|
||||
<button class="usa-button usa-button-primary" type="submit">{{ "invites.revoke.submit" | translate }}</button>
|
||||
<button type='button' v-on:click='closeModal("{{revoke_invite_modal}}")' class="usa-button usa-button-primary">{{ "invites.revoke.cancel" | translate }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% call Modal(name=revoke_invite_modal) %}
|
||||
<form method="post" action="{{ url_for('applications.revoke_invite', application_id=application.id, application_role_id=member.role_id) }}">
|
||||
{{ member.form.csrf_token }}
|
||||
<h1>{{ "invites.revoke" | translate }}</h1>
|
||||
<hr>
|
||||
{{ "invites.revoke_modal_text" | translate({"application": application.name}) }}
|
||||
<div class="action-group">
|
||||
<button class="action-group__action usa-button usa-button-primary" type="submit">{{ "invites.revoke" | translate }}</button>
|
||||
<button class='action-group__action usa-button usa-button-secondary' v-on:click='closeModal("{{revoke_invite_modal}}")' type="button">{{ "common.cancel" | translate }}</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endcall %}
|
||||
{%- endif %}
|
||||
{% endfor %}
|
||||
@ -156,7 +156,7 @@
|
||||
{% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
|
||||
<a v-on:click='openModal("{{ resend_invite_modal }}")'>Resend Invite</a><br>
|
||||
{% if user_can_delete_app_member -%}
|
||||
<a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke.button' | translate }}</a>
|
||||
<a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
</td>
|
||||
|
||||
@ -16,9 +16,8 @@
|
||||
{% endmacro %}
|
||||
|
||||
{% set step_one %}
|
||||
<div class="modal__form--header">
|
||||
<h1>Invite new portfolio member</h1>
|
||||
</div>
|
||||
<hr>
|
||||
<h1>Invite new portfolio member</h1>
|
||||
<div class='form-row'>
|
||||
<div class='form-col form-col--half'>
|
||||
{{ TextInput(member_form.user_data.first_name, validation='requiredField', optional=False) }}
|
||||
@ -47,32 +46,29 @@
|
||||
type='button'
|
||||
v-on:click="next()"
|
||||
v-bind:disabled="invalid"
|
||||
class='action-group__action usa-button'
|
||||
class='action-group__action usa-button usa-button-primary'
|
||||
value='Next'>
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
|
||||
<a class='action-group__action' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
|
||||
</div>
|
||||
{% endset %}
|
||||
{% set step_two %}
|
||||
<div class="modal__form--padded">
|
||||
<div class="modal__form--header">
|
||||
<h1>Assign member permissions</h1>
|
||||
<a class='icon-link'>
|
||||
{{ Icon('info') }}
|
||||
{{ "portfolios.admin.permissions_info" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
{{ SimpleOptionsInput(member_form.permission_sets.perms_app_mgmt) }}
|
||||
{{ SimpleOptionsInput(member_form.permission_sets.perms_funding) }}
|
||||
{{ SimpleOptionsInput(member_form.permission_sets.perms_reporting) }}
|
||||
{{ SimpleOptionsInput(member_form.permission_sets.perms_portfolio_mgmt) }}
|
||||
<div class='action-group'>
|
||||
<input
|
||||
type="submit"
|
||||
class='action-group__action usa-button'
|
||||
form="add-port-mem"
|
||||
value='Invite member'>
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
|
||||
</div>
|
||||
<hr>
|
||||
<h1>Assign member permissions</h1>
|
||||
<a class='icon-link'>
|
||||
{{ Icon('info') }}
|
||||
{{ "portfolios.admin.permissions_info" | translate }}
|
||||
</a>
|
||||
{{ SimpleOptionsInput(member_form.permission_sets.perms_app_mgmt) }}
|
||||
{{ SimpleOptionsInput(member_form.permission_sets.perms_funding) }}
|
||||
{{ SimpleOptionsInput(member_form.permission_sets.perms_reporting) }}
|
||||
{{ SimpleOptionsInput(member_form.permission_sets.perms_portfolio_mgmt) }}
|
||||
<div class='action-group'>
|
||||
<input
|
||||
type="submit"
|
||||
class='action-group__action usa-button usa-button-primary'
|
||||
form="add-port-mem"
|
||||
value='Invite member'>
|
||||
<a class='action-group__action' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
|
||||
</div>
|
||||
{% endset %}
|
||||
{{ MultiStepModalForm(
|
||||
|
||||
@ -6,9 +6,8 @@
|
||||
{% from "components/options_input.html" import OptionsInput %}
|
||||
|
||||
{% set step_one %}
|
||||
<div class="modal__form--header">
|
||||
<h1>{{ "fragments.ppoc.update_ppoc_title" | translate }}</h1>
|
||||
</div>
|
||||
<hr>
|
||||
<h1>{{ "fragments.ppoc.update_ppoc_title" | translate }}</h1>
|
||||
|
||||
{{
|
||||
Alert(
|
||||
@ -43,28 +42,25 @@
|
||||
{% endset %}
|
||||
|
||||
{% set step_two %}
|
||||
<div class="modal__form--padded">
|
||||
<div class="modal__form--header">
|
||||
<h1>{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}</h1>
|
||||
</div>
|
||||
<hr>
|
||||
<h1>{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}</h1>
|
||||
|
||||
{{
|
||||
Alert(
|
||||
level="info",
|
||||
title=("fragments.ppoc.confirm_alert.title" | translate),
|
||||
)
|
||||
}}
|
||||
{{
|
||||
Alert(
|
||||
level="info",
|
||||
title=("fragments.ppoc.confirm_alert.title" | translate),
|
||||
)
|
||||
}}
|
||||
|
||||
<div class='action-group'>
|
||||
<input
|
||||
type="submit"
|
||||
class='action-group__action usa-button'
|
||||
form="change-ppoc-form"
|
||||
value='{{ "common.confirm" | translate }}'>
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">
|
||||
{{ "common.cancel" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
<div class='action-group'>
|
||||
<input
|
||||
type="submit"
|
||||
class='action-group__action usa-button'
|
||||
form="change-ppoc-form"
|
||||
value='{{ "common.confirm" | translate }}'>
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">
|
||||
{{ "common.cancel" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
{% endset %}
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<h1>
|
||||
{{ 'fragments.delete_portfolio.title' | translate }}
|
||||
</h1>
|
||||
|
||||
<hr>
|
||||
{{
|
||||
Alert(
|
||||
level="warning",
|
||||
|
||||
@ -81,6 +81,7 @@
|
||||
{% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.member_id.data) %}
|
||||
{% call Modal(name=modal_id, dismissable=False) %}
|
||||
<h1>{{ "portfolios.admin.alert_header" | translate }}</h1>
|
||||
<hr>
|
||||
{{
|
||||
Alert(
|
||||
title="portfolios.admin.alert_title" | translate,
|
||||
@ -88,16 +89,14 @@
|
||||
level="warning"
|
||||
)
|
||||
}}
|
||||
<div class="panel__footer">
|
||||
<div class="action-group">
|
||||
<form method="POST" action="{{ url_for('portfolios.remove_member', portfolio_id=portfolio.id, portfolio_role_id=subform.member_id.data)}}">
|
||||
{{ member_perms_form.csrf_token }}
|
||||
<button class="usa-button usa-button-danger">
|
||||
{{ "portfolios.members.archive_button" | translate }}
|
||||
</button>
|
||||
</form>
|
||||
<a v-on:click="closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
|
||||
</div>
|
||||
<div class="action-group">
|
||||
<form method="POST" action="{{ url_for('portfolios.remove_member', portfolio_id=portfolio.id, portfolio_role_id=subform.member_id.data)}}">
|
||||
{{ member_perms_form.csrf_token }}
|
||||
<button class="usa-button usa-button-danger">
|
||||
{{ "portfolios.members.archive_button" | translate }}
|
||||
</button>
|
||||
</form>
|
||||
<a v-on:click="closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endfor %}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
{% include "fragments/flash.html" %}
|
||||
<h1>New Portfolio Form</h1>
|
||||
<base-form inline-template>
|
||||
<form id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
|
||||
<form class="panel__content" id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
|
||||
{{ form.csrf_token }}
|
||||
|
||||
{{ TextInput(form.name, optional=False) }}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
{% call Modal(name='styleguideModal', dismissable=True) %}
|
||||
<h1>A modal dialog</h1>
|
||||
|
||||
<hr>
|
||||
<p>We count thirty Rebel ships, Lord Vader. But they're so small they're evading our turbo-lasers! We'll have to destroy them ship to ship. Get the crews to their fighters. Luke, let me know when you're going in. I'm on my way in now... Watch yourself! There's a lot of fire coming from the right side of that deflection tower. I'm on it. Squad leaders, we've picked up a new group of signals. Enemy fighters coming your way.</p>
|
||||
<p>I hope the old man got that tractor beam out if commission, or this is going to be a real short trip. Okay, hit it! We're coming up on the sentry ships. Hold 'em off! Angle the deflector shields while I charge up the main guns! I can't believe he's gone. There wasn't anything you could have done. Come on, buddy, we're not out of this yet! You in, kid? Okay, stay sharp!</p>
|
||||
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
{% call Modal(name='cancel', dismissable=True) %}
|
||||
<div class="task-order__modal-cancel">
|
||||
<h1>Do you want to save this draft?</h1>
|
||||
<div class="task-order__modal-cancel_buttons">
|
||||
<div class="action-group">
|
||||
<button formaction="{{ cancel_discard_url }}" class="usa-button usa-button-primary" type="submit">No, delete it</button>
|
||||
<button formaction="{{ cancel_save_url }}" class="usa-button usa-button-primary" type="submit">Yes, save for later</button>
|
||||
</div>
|
||||
|
||||
@ -267,11 +267,8 @@ fragments:
|
||||
update_ppoc_confirmation_title: Confirmation
|
||||
update_ppoc_title: Update primary point of contact
|
||||
invites:
|
||||
revoke:
|
||||
button: Revoke Invite
|
||||
modal_heading: 'Do you want to revoke the invite for {user_name}?'
|
||||
submit: Yes, revoke it
|
||||
cancel: No, do not revoke it
|
||||
revoke: Revoke Invite
|
||||
revoke_modal_text: "By revoking this invitation to {application}, you are confirming that this member will no longer have access."
|
||||
login:
|
||||
ccpo_logo_alt_text: Cloud Computing Program Office Logo
|
||||
certificate_selection:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user