From 847c300d33a8e6750079d11ca0fbedfc9a9a20dd Mon Sep 17 00:00:00 2001 From: George Drummond Date: Thu, 18 Apr 2019 15:23:24 -0400 Subject: [PATCH 1/7] Multiple drop down sections for toggler --- js/components/toggler.js | 19 +++-- styles/components/_accordion_table.scss | 7 +- templates/components/toggle_list.html | 57 +++++--------- .../fragments/applications/environments.html | 74 ++++++++++++++++--- templates/portfolios/applications/team.html | 67 +++++++++++------ 5 files changed, 139 insertions(+), 85 deletions(-) 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 %} From 4b03845717d082de815a12f1309264e9095f2142 Mon Sep 17 00:00:00 2001 From: George Drummond Date: Mon, 22 Apr 2019 09:54:03 -0400 Subject: [PATCH 2/7] Toggler was broken on applications page --- templates/portfolios/applications/index.html | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index 5cde606d..d2103afb 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 %} From cac7679fb29eb563637c9c8c1218b0a9b55860e7 Mon Sep 17 00:00:00 2001 From: George Drummond Date: Mon, 22 Apr 2019 10:02:00 -0400 Subject: [PATCH 3/7] Remove ToggleList --- templates/components/toggle_list.html | 6 --- .../fragments/applications/environments.html | 46 ++++++++++--------- templates/portfolios/applications/team.html | 24 +++++----- 3 files changed, 36 insertions(+), 40 deletions(-) diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html index b5990955..08526c5a 100644 --- a/templates/components/toggle_list.html +++ b/templates/components/toggle_list.html @@ -9,12 +9,6 @@     {% endmacro %} -{% macro ToggleList(item_name, item_type, length) %} -
    - {{ caller() }} -
    -{% endmacro %} - {% macro ToggleSection(section_name) %}
    {{ caller() }} diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html index ac4c3a60..b85f52f4 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, ToggleButton, ToggleSection %} +{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
    @@ -60,27 +60,31 @@
    - {% call ToggleList() %} - {% call ToggleSection(section_name="environments") %} - - {% endcall %} + {% call ToggleSection(section_name="environments") %} + + {% endcall %} - {% call ToggleSection(section_name="edit") %} - - {% endcall %} + {% call ToggleSection(section_name="edit") %} + {% endcall %} diff --git a/templates/portfolios/applications/team.html b/templates/portfolios/applications/team.html index 489e6698..ac467251 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, ToggleButton, ToggleSection %} +{% from "components/toggle_list.html" import ToggleButton, ToggleSection %} {% set secondary_breadcrumb = 'portfolios.applications.team_settings.title' | translate({ "application_name": application.name }) %} @@ -96,18 +96,16 @@ }}
    - {% call ToggleList() %} - {% call ToggleSection(section_name="environments") %} - - {% endcall %} + {% call ToggleSection(section_name="environments") %} + {% endcall %} From 29655e45ddd18717acfed2b53e968088323b42a5 Mon Sep 17 00:00:00 2001 From: George Drummond Date: Mon, 22 Apr 2019 10:02:24 -0400 Subject: [PATCH 4/7] Use set rather than macro --- templates/fragments/applications/environments.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html index b85f52f4..a27722c3 100644 --- a/templates/fragments/applications/environments.html +++ b/templates/fragments/applications/environments.html @@ -42,18 +42,18 @@ }} - {% macro OpenEnvironmentsButton() %} + {% set open_environments_button %} {{ "common.show" | translate }} Environments ({{ members_list | length }}) - {% endmacro %} + {% endset %} - {% macro CloseEnvironmentsButton() %} + {% set close_environments_button %} {{ "common.hide" | translate }} Environments ({{ members_list | length }}) - {% endmacro %} + {% endset %} {{ ToggleButton( - open_html=OpenEnvironmentsButton(), - close_html=CloseEnvironmentsButton(), + open_html=open_environments_button, + close_html=close_environments_button, section_name="environments" ) }} From c61f5f20bd1b7f922e263d7c02900b7753a59614 Mon Sep 17 00:00:00 2001 From: George Drummond Date: Mon, 22 Apr 2019 10:24:06 -0400 Subject: [PATCH 5/7] Another macro to set --- templates/fragments/applications/environments.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html index a27722c3..cd10bf3c 100644 --- a/templates/fragments/applications/environments.html +++ b/templates/fragments/applications/environments.html @@ -29,14 +29,14 @@ {{ name }} - {% macro EditEnvironmentButton() %} + {% set edit_environment_button %} {{ Icon('edit') }} - {% endmacro %} + {% endset %} {{ ToggleButton( - open_html=EditEnvironmentButton(), - close_html=EditEnvironmentButton(), + open_html=edit_environment_button, + close_html=edit_environment_button, section_name="edit" ) }} From a35a6320a9a955ff08118362eeedb73bc08a5623 Mon Sep 17 00:00:00 2001 From: George Drummond Date: Mon, 22 Apr 2019 11:22:32 -0400 Subject: [PATCH 6/7] Add in missing carets --- templates/fragments/applications/environments.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html index cd10bf3c..470aa10b 100644 --- a/templates/fragments/applications/environments.html +++ b/templates/fragments/applications/environments.html @@ -43,11 +43,11 @@ {% set open_environments_button %} - {{ "common.show" | translate }} Environments ({{ members_list | length }}) + {{ "common.show" | translate }} Environments ({{ members_list | length }}) {{ Icon('caret_down') }} {% endset %} {% set close_environments_button %} - {{ "common.hide" | translate }} Environments ({{ members_list | length }}) + {{ "common.hide" | translate }} Environments ({{ members_list | length }}) {{ Icon('caret_up') }} {% endset %} {{ From b5795a30aa43918c292fec2f81be29aca72dccef Mon Sep 17 00:00:00 2001 From: George Drummond Date: Mon, 22 Apr 2019 11:29:17 -0400 Subject: [PATCH 7/7] Fix application toggle --- templates/portfolios/applications/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index d2103afb..6a4c486c 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -61,13 +61,13 @@
    - - - +