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..08526c5a 100644 --- a/templates/components/toggle_list.html +++ b/templates/components/toggle_list.html @@ -1,45 +1,16 @@ -{% 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) %} -
  • - -
  • +{% macro ToggleSection(section_name) %} +
    + {{ caller() }} +
    {% endmacro %} diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html index 4d8b7e4d..470aa10b 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 ToggleButton, ToggleSection %}
    @@ -22,16 +22,72 @@
      {% 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 }} + + + {% set edit_environment_button %} + {{ Icon('edit') }} + {% endset %} + + {{ + ToggleButton( + open_html=edit_environment_button, + close_html=edit_environment_button, + section_name="edit" + ) + }} + + + {% set open_environments_button %} + {{ "common.show" | translate }} Environments ({{ members_list | length }}) {{ Icon('caret_down') }} + {% endset %} + + {% set close_environments_button %} + {{ "common.hide" | translate }} Environments ({{ members_list | length }}) {{ Icon('caret_up') }} + {% endset %} + + {{ + ToggleButton( + open_html=open_environments_button, + close_html=close_environments_button, + section_name="environments" + ) + }} + +
      + + {% call ToggleSection(section_name="environments") %} +
        + {% for member in members_list %} +
      • +
        {{ member.name }}
        +
        {{ member.role }}
        +
      • + {% endfor %} +
      + {% endcall %} + + {% call ToggleSection(section_name="edit") %} +
        +
      • +
        +
        +
        +
        + Row here +
        +
        +
        +
        +
      • +
      + {% endcall %} +
    • +
      {% endfor %}
    diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index db464d36..29d54b8e 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -35,11 +35,13 @@
    {% for application in portfolio.applications|sort(attribute='name') %} -
    - -
    +
    + {% endfor %} diff --git a/templates/portfolios/applications/team.html b/templates/portfolios/applications/team.html index 39a5014a..2cb6f896 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 ToggleButton, ToggleSection %} {% set secondary_breadcrumb = 'portfolios.applications.team_settings.title' | translate({ "application_name": application.name }) %} @@ -67,29 +67,48 @@ {% 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 ToggleSection(section_name="environments") %} +
      + {% for environment in user_info["environments"] %} +
    • +
      + {{ environment.name }} +
      +
    • + {% endfor %} +
    + {% endcall %} +
  • +
    {% endfor %}