diff --git a/js/components/toggler.js b/js/components/toggler.js index a3e1ece5..52f756b0 100644 --- a/js/components/toggler.js +++ b/js/components/toggler.js @@ -1,14 +1,19 @@ -import ToggleMixin from '../mixins/toggle' - export default { name: 'toggler', - mixins: [ToggleMixin], + data: function() { + return { + selectedSection: null, + } + }, - props: { - defaultVisible: { - type: Boolean, - default: () => false, + methods: { + toggleSection: function(sectionName) { + if (this.selectedSection === sectionName) { + this.selectedSection = null + } else { + this.selectedSection = sectionName + } }, }, } diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index f11d767d..271e85d9 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -37,10 +37,10 @@ } .accordion-table__item-content { - padding-top: $gap*3; + padding-top: $gap*2; padding-right: $gap; - padding-bottom: $gap*3; - padding-left: $gap*3; + padding-bottom: $gap*2; + padding-left: $gap*2; } .accordion-table__items { @@ -69,7 +69,6 @@ float: right; color: $color-blue; padding: $gap; - margin: -$gap 0; .icon { @include icon-size(12); diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html index af5f5db2..b5990955 100644 --- a/templates/components/toggle_list.html +++ b/templates/components/toggle_list.html @@ -1,45 +1,22 @@ -{% from "components/icon.html" import Icon %} - -{% macro ToggleItem(action, item_type, length, icon) %} - - {{ action }} {{ item_type }} ({{ length }}){{ Icon(icon) }} +{% macro ToggleButton(action, open_html, close_html, section_name) %} + +
+ {{ close_html }} +
+
+ {{ open_html }} +
{% endmacro %} {% macro ToggleList(item_name, item_type, length) %} -
  • - -
  • +
    + {{ caller() }} +
    +{% endmacro %} + +{% macro ToggleSection(section_name) %} +
    + {{ caller() }} +
    {% endmacro %} diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html index 4d8b7e4d..ac4c3a60 100644 --- a/templates/fragments/applications/environments.html +++ b/templates/fragments/applications/environments.html @@ -1,5 +1,5 @@ {% from "components/icon.html" import Icon %} -{% from "components/toggle_list.html" import ToggleList %} +{% from "components/toggle_list.html" import ToggleList, ToggleButton, ToggleSection %}
    @@ -22,16 +22,68 @@
      {% for name, members_list in environments_obj.items() %} - {% call ToggleList(item_name=name, item_type="Members", length=(members_list|length)) %} -
        - {% for member in members_list %} -
      • -
        {{ member.name }}
        -
        {{ member.role }}
        -
      • - {% endfor %} -
      - {% endcall %} + +
    • +
      + + {{ name }} + + + {% macro EditEnvironmentButton() %} + {{ Icon('edit') }} + {% endmacro %} + + {{ + ToggleButton( + open_html=EditEnvironmentButton(), + close_html=EditEnvironmentButton(), + section_name="edit" + ) + }} + + + {% macro OpenEnvironmentsButton() %} + {{ "common.show" | translate }} Environments ({{ members_list | length }}) + {% endmacro %} + + {% macro CloseEnvironmentsButton() %} + {{ "common.hide" | translate }} Environments ({{ members_list | length }}) + {% endmacro %} + + {{ + ToggleButton( + open_html=OpenEnvironmentsButton(), + close_html=CloseEnvironmentsButton(), + section_name="environments" + ) + }} + +
      + + {% call ToggleList() %} + {% call ToggleSection(section_name="environments") %} +
        + {% for member in members_list %} +
      • +
        {{ member.name }}
        +
        {{ member.role }}
        +
      • + {% endfor %} +
      + {% endcall %} + + {% call ToggleSection(section_name="edit") %} +
        +
      • +
        + Edit section +
        +
      • +
      + {% endcall %} + {% endcall %} +
    • +
      {% endfor %}
    diff --git a/templates/portfolios/applications/team.html b/templates/portfolios/applications/team.html index c0550f29..489e6698 100644 --- a/templates/portfolios/applications/team.html +++ b/templates/portfolios/applications/team.html @@ -2,7 +2,7 @@ {% from "components/empty_state.html" import EmptyState %} {% from "components/icon.html" import Icon %} -{% from "components/toggle_list.html" import ToggleList %} +{% from "components/toggle_list.html" import ToggleList, ToggleButton, ToggleSection %} {% set secondary_breadcrumb = 'portfolios.applications.team_settings.title' | translate({ "application_name": application.name }) %} @@ -67,29 +67,50 @@ {% set user_info = environment_users[user.id] %} {% set user_permissions = user_info["permissions"] %} - {% set user_row %} - {{ user.full_name }} - {{ user_permissions["delete_access"] }} - {{ user_permissions["environment_management"] }} - {{ user_permissions["team_management"] }} - {% endset %} - {% call ToggleList( - item_name=user_row, - item_type=("portfolios.applications.team_settings.environments" | translate), - length=(user_info["environments"] | length) - ) - %} - - {% endcall %} + +
  • +
    + + {{ name }} + {{ user.full_name }} + {{ user_permissions["delete_access"] }} + {{ user_permissions["environment_management"] }} + {{ user_permissions["team_management"] }} + + + {% set open_html %} + {{ "common.show" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) + {% endset %} + + {% set close_html %} + {{ "common.hide" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) + {% endset %} + + {{ + ToggleButton( + open_html=open_html, + close_html=close_html, + section_name="environments" + ) + }} + +
    + {% call ToggleList() %} + {% call ToggleSection(section_name="environments") %} +
      + {% for environment in user_info["environments"] %} +
    • +
      + {{ environment.name }} +
      +
    • + {% endfor %} +
    + {% endcall %} + {% endcall %} +
  • +
    {% endfor %}