diff --git a/js/components/forms/multi_step_modal_form.js b/js/components/forms/multi_step_modal_form.js index 3ef31b81..968e20cb 100644 --- a/js/components/forms/multi_step_modal_form.js +++ b/js/components/forms/multi_step_modal_form.js @@ -2,7 +2,6 @@ import FormMixin from '../../mixins/form' import textinput from '../text_input' import optionsinput from '../options_input' import checkboxinput from '../checkbox_input' -import Selector from '../selector' import Modal from '../../mixins/modal' import toggler from '../toggler' @@ -14,7 +13,6 @@ export default { components: { toggler, Modal, - Selector, textinput, optionsinput, checkboxinput, diff --git a/js/components/selector.js b/js/components/selector.js deleted file mode 100644 index 06c1bc63..00000000 --- a/js/components/selector.js +++ /dev/null @@ -1,117 +0,0 @@ -import { VPopover } from 'v-tooltip' - -const SelectorInput = { - name: 'SelectorInput', - props: { - name: String, - value: String, - label: String, - description: String, - selected: Boolean, - handleChange: Function, - handleEnter: Function, - handleEsc: Function, - }, - - computed: { - id: function() { - return `${this.name}_${this.value}` - }, - }, - - methods: { - onChange: function(e) { - this.handleChange(this.value) - }, - - onEnter: function(e) { - this.handleEnter() - }, - - onEsc: function(e) { - this.handleEsc() - }, - }, -} - -export default { - name: 'selector', - - components: { - VPopover, - SelectorInput, - }, - - props: { - choices: Array, - defaultLabel: String, - initialErrors: Array, - initialChoice: { - type: String, - default: null, - }, - }, - - data: function() { - return { - value: this.initialChoice || null, - currentChoice: this.initialChoice || null, - showError: (this.initialErrors && this.initialErrors.length) || false, - usingKeyboard: false, - } - }, - - computed: { - label: function() { - if (this.value) { - const selectedChoice = this.choices.find(choice => { - return this.value === choice[0] - })[1] - return selectedChoice.name - } else { - return this.defaultLabel - } - }, - }, - - methods: { - change: function(value) { - this.value = value - this.showError = false - }, - - onShow: function() { - setTimeout(() => { - // timeout is a hack to make focus work in Chrome - const selected = this.$refs.choices.find(choice => choice.selected) - if (selected) { - selected.$refs.input[0].focus() - } else { - this.$refs.choices[0].$refs.input[0].focus() - } - }, 100) - }, - - enter: function() { - this.$refs.popover.hide() - }, - - esc: function() { - this.value = this.currentChoice - this.usingKeyboard = false - this.$refs.popover.hide() - }, - - handleEnterOption: function(e) { - this.change(e.target.value) - this.currentChoice = e.target.value - this.usingKeyboard = false - this.$refs.popover.hide() - }, - - handleButtonArrowDown: function(e) { - this.usingKeyboard = true - this.$refs.popover.show() - }, - }, -} diff --git a/js/index.js b/js/index.js index 575006d4..b1fbca9f 100644 --- a/js/index.js +++ b/js/index.js @@ -19,7 +19,6 @@ import ApplicationEnvironments from './components/forms/new_application/environm import MultiStepModalForm from './components/forms/multi_step_modal_form' import uploadinput from './components/upload_input' import Modal from './mixins/modal' -import selector from './components/selector' import BudgetChart from './components/charts/budget_chart' import SpendTable from './components/tables/spend_table' import LocalDatetime from './components/local_datetime' @@ -52,7 +51,6 @@ const app = new Vue({ poc, ApplicationNameAndDescription, ApplicationEnvironments, - selector, BudgetChart, SpendTable, LocalDatetime, diff --git a/static/icons/envelope.svg b/static/icons/envelope.svg index a2557ef2..e0c6e57d 100644 --- a/static/icons/envelope.svg +++ b/static/icons/envelope.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index fea6cf20..2b4f4358 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -138,11 +138,6 @@ .portfolio-content { margin: (4 * $gap) $gap 0 $gap; - .panel { - @include shadow-panel; - padding-bottom: $gap * 3; - } - a.add-new-button { display: inherit; margin-left: auto; @@ -156,11 +151,6 @@ margin-bottom: 0; } - table { - min-width: 100%; - margin-top: 0; - } - input.usa-button.usa-button-primary { width: 9rem; height: 4rem; @@ -250,6 +240,12 @@ .panel { @include shadow-panel; padding-bottom: 2rem; + + table { + .form-row { + margin: 0; + } + } } .application-list-item { @@ -419,82 +415,6 @@ padding: 2 * $gap; padding-top: 0; } - - table { - thead { - th:first-child { - padding-left: 3 * $gap; - } - } - - th { - background-color: $color-gray-lightest; - padding: $gap 2 * $gap; - border-top: none; - border-bottom: none; - color: $color-gray; - - .icon { - margin-left: 1rem; - } - } - - td { - border-bottom: 1px solid $color-gray-lightest; - } - - td.unused-balance { - color: $color-red; - } - - .label--expired { - background-color: $color-gray-light; - } - - .to-performance-period { - display: flex; - flex-wrap: wrap; - - .to-end-date { - margin-right: 1.2rem; - } - - &.to-expiring-soon { - .to-expiration-alert { - font-weight: $font-bold; - font-size: 1.5rem; - word-break: normal; - white-space: normal; - - .icon { - margin-left: 0; - } - } - - &.funded .to-expiration-alert { - color: $color-blue; - - .icon { - @include icon-color($color-blue); - } - } - - &.unfunded { - .to-expiration-alert { - color: $color-red; - } - - .icon { - @include icon-color($color-red); - } - - .to-end-date { - color: $color-red; - } - } - } - } - } } .portfolio-reports { diff --git a/styles/elements/_labels.scss b/styles/elements/_labels.scss index 4dae377f..d36ae027 100644 --- a/styles/elements/_labels.scss +++ b/styles/elements/_labels.scss @@ -18,6 +18,7 @@ padding: 0 $gap; border-radius: $gap / 3; white-space: nowrap; + text-transform: uppercase; &--info { background-color: $color-primary; diff --git a/styles/elements/_panels.scss b/styles/elements/_panels.scss index b8d306cf..8ecd36c6 100644 --- a/styles/elements/_panels.scss +++ b/styles/elements/_panels.scss @@ -46,7 +46,6 @@ } @mixin shadow-panel { - padding: ($gap / 2) 0; box-shadow: $box-shadow; border-top: none; border-bottom: none; @@ -59,8 +58,7 @@ @include shadow-panel; &__content { - margin: ($gap * 2) 0; - padding: 0 ($gap * 2); + padding: $gap * 2; } &__body { @@ -110,8 +108,4 @@ &__footer { padding: 3 * $gap; } - - &__actions { - @include panel-actions; - } } diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss index 89469512..1086215b 100644 --- a/styles/elements/_tables.scss +++ b/styles/elements/_tables.scss @@ -6,7 +6,6 @@ table.atat-table { @include panel-margin; - min-width: 100%; @include ie-only { @@ -42,42 +41,25 @@ table.atat-table { } } + tbody, thead { - tr th { - .sorting-direction { - position: inherit; - margin-right: -16px; - width: 16px; - - .icon { - height: 14px; - width: 16px; - margin: 0; - } - } - } - } - - tbody { tr { th, td { - @include block-list-item; - + background-color: $color-white; + margin: 0; + padding: $gap * 2; + border: 1px solid $color-gray-lighter; display: table-cell; white-space: nowrap; - border-bottom-style: solid; - border-top: none; + vertical-align: top; + + &:first-child { + border-left: none; + } &:last-child { - border-bottom-style: dashed; - } - } - - &:last-child { - td, - th { - border-bottom-style: solid; + border-right: none; } } } @@ -87,19 +69,12 @@ table.atat-table { tr { th, td { - @include block-list-header; - display: table-cell; - white-space: nowrap; - color: black; + background-color: $color-gray-lightest; + padding: 1rem 1.5rem; + border-top: none; } } } - - @at-root .panel #{&} { - &:last-child { - margin-bottom: 0; - } - } } .responsive-table-wrapper { diff --git a/styles/sections/_application_list.scss b/styles/sections/_application_list.scss index 8ab14f0a..8b5bfa94 100644 --- a/styles/sections/_application_list.scss +++ b/styles/sections/_application_list.scss @@ -37,28 +37,4 @@ left: 4px; } } - - table { - thead { - td { - font-weight: bold; - font-size: 1.4rem; - border-top: 0; - } - } - - tbody { - th { - font-weight: bold; - font-size: 1.6rem; - } - - td { - font-size: 1.6rem; - border-bottom: 1px solid $color-gray-lightest; - border-top: 0; - padding: (3 * $gap) (2 * $gap); - } - } - } } diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss index 27a1564e..a53e2842 100644 --- a/styles/sections/_reports.scss +++ b/styles/sections/_reports.scss @@ -212,7 +212,6 @@ table { th, td { font-weight: bold; - border-bottom: 1px solid $color-gray-lightest; } } diff --git a/templates/fragments/environments.html b/templates/applications/fragments/environments.html similarity index 95% rename from templates/fragments/environments.html rename to templates/applications/fragments/environments.html index 7b39f730..8ea06585 100644 --- a/templates/fragments/environments.html +++ b/templates/applications/fragments/environments.html @@ -1,4 +1,5 @@ {% from "components/icon.html" import Icon %} +{% from "components/label.html" import Label %} {% from 'components/save_button.html' import SaveButton %} {% from "components/text_input.html" import TextInput %} {% from "components/toggle_list.html" import ToggleButton, ToggleSection %} @@ -6,9 +7,7 @@ {% macro EnvironmentManagementTemplate( application, environments_obj, - new_env_form, - user_can_create_environment -) %} + new_env_form) %}

{{ "portfolios.applications.settings.environments" | translate }}

@@ -53,7 +52,7 @@ }}
{% if env['pending'] -%} - {{Icon('exchange')}} CHANGES PENDING + {{ Label('exchange', 'Changes Pending', classes='label--below')}} {% else %} {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} @@ -94,7 +93,7 @@ {%- endif %} - {% if user_can_create_environment -%} + {% if user_can(permissions.CREATE_ENVIRONMENT) -%} {% include "applications/fragments/add_new_environment.html" %} {%- endif %}
diff --git a/templates/fragments/members.html b/templates/applications/fragments/members.html similarity index 65% rename from templates/fragments/members.html rename to templates/applications/fragments/members.html index 823dcbc7..a04df7b8 100644 --- a/templates/fragments/members.html +++ b/templates/applications/fragments/members.html @@ -1,5 +1,6 @@ {% from "components/alert.html" import Alert %} {% from "components/icon.html" import Icon %} +{% from "components/label.html" import Label %} {% import "applications/fragments/new_member_modal_content.html" as member_steps %} {% import "applications/fragments/member_form_fields.html" as member_fields %} {% from "components/modal.html" import Modal %} @@ -12,9 +13,9 @@ new_member_form, action) %} -
+

{{ 'portfolios.applications.settings.team_members' | translate }} -

+ {% if g.matchesPath("application-members") %} {% include "fragments/flash.html" %} @@ -23,33 +24,11 @@
{% if not application.members %}
-

{{ ("portfolios.applications.team_settings.blank_slate.title" | translate) }}

- - {{ Icon('avatar') }} - - {% if not user_can(permissions.CREATE_APPLICATION_MEMBER) %} -

{{ ("portfolios.applications.team_settings.blank_slate.sub_message" | translate) }}

- {% endif %} - - {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %} - {% set new_member_modal_name = "add-app-mem" %} - - {{ "portfolios.applications.team_settings.blank_slate.action_label" | translate }} - - {{ MultiStepModalForm( - name=new_member_modal_name, - form=new_member_form, - form_action=url_for(action, application_id=application.id), - steps=[ - member_steps.MemberStepOne(new_member_form), - member_steps.MemberStepTwo(new_member_form, application) - ], - ) }} - {% endif %} +

+ {{ ("portfolios.applications.members.blank_slate" | translate) }} +

- {% else %} - {% set new_member_modal_name = "add-app-mem" %} {% for member in members %} {%- if user_can(permissions.EDIT_APPLICATION_MEMBER) %} @@ -114,10 +93,9 @@ - + - @@ -131,7 +109,7 @@
{% if member.role_status == 'pending' %} - INVITE PENDING + {{ Label('envelope', 'invite pending', 'success', classes='label--below') }} {% endif %} @@ -142,44 +120,47 @@ {% endfor %} - {% endfor %}
MemberName Application Permissions Environment Access
- {% for env in member.environment_roles %} - {{ env.environment_name }}{% if not env == member.environment_roles[-1]%},{% endif %} - {% endfor %} - - {% if member.role_status == 'pending' -%} - {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %} - {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %} - Resend Invite
- {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%} - {{ 'invites.revoke' | translate }} - {%- endif %} - {%- endif %} +
+
+ {% for env in member.environment_roles %} + {{ env.environment_name }}
+ {% endfor %} +
+
+ {% if member.role_status == 'pending' -%} + {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %} + {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %} + Resend Invite
+ {% if user_can_delete_app_member -%} + {{ 'invites.revoke' | translate }} + {%- endif %} + {%- endif %} +
+
- {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %} - - {{ "portfolios.applications.add_member" | translate }} - - {% endif %}
- - {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %} - {{ MultiStepModalForm( - name=new_member_modal_name, - form=new_member_form, - form_action=url_for(action, application_id=application.id), - steps=[ - member_steps.MemberStepOne(new_member_form), - member_steps.MemberStepTwo(new_member_form, application) - ], - ) }} - {% endif %} {% endif %} + {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %} + {% set new_member_modal_name = "add-app-mem" %} + + {{ "portfolios.applications.add_member" | translate }} + + + {{ MultiStepModalForm( + name=new_member_modal_name, + form=new_member_form, + form_action=url_for(action, application_id=application.id), + steps=[ + member_steps.MemberStepOne(new_member_form), + member_steps.MemberStepTwo(new_member_form, application) + ], + ) }} + {% endif %} {% endmacro %} diff --git a/templates/applications/new/step_3.html b/templates/applications/new/step_3.html index 94521d8b..3094c52e 100644 --- a/templates/applications/new/step_3.html +++ b/templates/applications/new/step_3.html @@ -2,7 +2,7 @@ {% extends "applications/base.html" %} -{% from "fragments/members.html" import MemberManagementTemplate with context %} +{% from "applications/fragments/members.html" import MemberManagementTemplate with context %} {% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %} {% block portfolio_header %} @@ -16,16 +16,16 @@ {{ ('portfolios.applications.new.step_3_description' | translate) }}

- + {{ MemberManagementTemplate( - application, + application, members, new_member_form, "applications.update_new_application_step_3") }} - + - + Return to Application Settings @@ -35,6 +35,5 @@ Cancel - -{% endblock %} +{% endblock %} diff --git a/templates/applications/settings.html b/templates/applications/settings.html index 15cee284..b3a79081 100644 --- a/templates/applications/settings.html +++ b/templates/applications/settings.html @@ -2,8 +2,8 @@ {% from "components/alert.html" import Alert %} {% from "components/delete_confirmation.html" import DeleteConfirmation %} -{% from "fragments/environments.html" import EnvironmentManagementTemplate %} -{% from "fragments/members.html" import MemberManagementTemplate with context %} +{% from "applications/fragments/environments.html" import EnvironmentManagementTemplate with context %} +{% from "applications/fragments/members.html" import MemberManagementTemplate with context %} {% from "components/modal.html" import Modal %} {% from "components/pagination.html" import Pagination %} {% from "components/save_button.html" import SaveButton %} @@ -27,8 +27,7 @@ {% else %} - -
+

{{ "fragments.edit_application_form.explain" | translate }}

@@ -57,9 +56,7 @@ {{ EnvironmentManagementTemplate( application, environments_obj, - new_env_form, - user_can_create_environment=user_can(permissions.CREATE_ENVIRONMENT) - ) }} + new_env_form) }} {% if user_can(permissions.DELETE_APPLICATION) %} {% set env_count = application.environments | length %} diff --git a/templates/components/label.html b/templates/components/label.html new file mode 100644 index 00000000..4fcd897f --- /dev/null +++ b/templates/components/label.html @@ -0,0 +1,8 @@ +{% from "components/icon.html" import Icon %} + +{% macro Label(icon_name, text, type=None, classes="") -%} + + + {{ Icon(icon_name) }} {{ text }} + +{%- endmacro %} diff --git a/templates/components/selector.html b/templates/components/selector.html deleted file mode 100644 index 1b0181a3..00000000 --- a/templates/components/selector.html +++ /dev/null @@ -1,98 +0,0 @@ -{% from "components/icon.html" import Icon %} - -{# expects a wtforms SelectField instance #} -{% macro Selector(field, default_label='Select an option') -%} - - - -
- - -
{{ field.label | striptags }}
- - {% if field.description %} -

- {{ field.description | safe }} -

- {% endif %} - - {{ Icon('alert',classes="icon-validation") }} - - - - - {{ Icon('alert',classes="icon-validation") }} - - - - - - - -
- - -{%- endmacro %} diff --git a/templates/portfolios/fragments/change_ppoc.html b/templates/portfolios/fragments/change_ppoc.html index eef989cc..7500e20d 100644 --- a/templates/portfolios/fragments/change_ppoc.html +++ b/templates/portfolios/fragments/change_ppoc.html @@ -1,5 +1,4 @@ {% from "components/icon.html" import Icon %} -{% from "components/selector.html" import Selector %} {% from "components/text_input.html" import TextInput %} {% from "components/multi_step_modal_form.html" import MultiStepModalForm %} {% from "components/alert.html" import Alert %} diff --git a/templates/portfolios/fragments/members_edit.html b/templates/portfolios/fragments/members_edit.html index 8fb62f35..a297356f 100644 --- a/templates/portfolios/fragments/members_edit.html +++ b/templates/portfolios/fragments/members_edit.html @@ -30,10 +30,9 @@ {{ "portfolios.members.archive_button" | translate }} + {% if not ppoc %} + {{ subform.member_id() }} + {% endif %} - - {% if not ppoc %} - {{ subform.member_id() }} - {% endif %} {% endfor %} diff --git a/translations.yaml b/translations.yaml index 7ff39092..b3c5a0a4 100644 --- a/translations.yaml +++ b/translations.yaml @@ -310,7 +310,7 @@ portfolios: applications: add_application_text: Add a new application add_environment: Create an Environment - add_member: Add a New Team Member + add_member: Add Team Member add_another_environment: Add another environment app_settings_text: App settings new: @@ -376,13 +376,9 @@ portfolios: settings_heading: Application Settings settings: name_description: Application name and description - team_members: Team Members + team_members: Application Team environments: Application Environments team_settings: - blank_slate: - action_label: Invite a new team member - sub_message: Please contact your JEDI Cloud portfolio administrator to invite new members. - title: There are currently no team members for this application. environments: Environments section: table: @@ -394,6 +390,7 @@ portfolios: add_to_environment: Add to existing environment team_text: Team members: + blank_slate: This Application has no members form: env_mgmt: label: Manage Environments