Move toggle menu into its own macro.

Use ToggleMenu macro in application team table.
This commit is contained in:
leigh-mil 2020-01-07 12:00:34 -05:00
parent a5194d6f70
commit 5ba22d82e3
5 changed files with 83 additions and 75 deletions

View File

@ -39,6 +39,7 @@
@import "components/sticky_cta.scss"; @import "components/sticky_cta.scss";
@import "components/error_page.scss"; @import "components/error_page.scss";
@import "components/member_form.scss"; @import "components/member_form.scss";
@import "components/toggle_menu.scss";
@import "sections/login"; @import "sections/login";
@import "sections/home"; @import "sections/home";

View File

@ -154,55 +154,6 @@
margin-right: $gap * 6; margin-right: $gap * 6;
} }
} }
.app-member-menu {
position: absolute;
top: $gap;
right: $gap * 2;
.accordion-table__item__toggler {
padding: $gap / 3;
border: 1px solid $color-gray-lighter;
border-radius: 3px;
cursor: pointer;
&:hover,
&--active {
background-color: $color-aqua-lightest;
}
.icon {
margin: $gap / 2;
}
}
&__toggle {
position: absolute;
right: 0;
top: 30px;
background-color: $color-white;
border: 1px solid $color-gray-light;
z-index: 1;
margin-top: 0;
a {
display: block;
padding: $gap;
border-bottom: 1px solid $color-gray-lighter;
text-decoration: none;
color: $color-black;
cursor: pointer;
&:last-child {
border-bottom: 0;
}
&:hover {
background-color: $color-aqua-lightest;
}
}
}
}
} }
#add-new-env { #add-new-env {

View File

@ -0,0 +1,49 @@
.toggle-menu {
position: absolute;
top: $gap;
right: $gap * 2;
.accordion-table__item__toggler {
padding: $gap / 3;
border: 1px solid $color-gray-lighter;
border-radius: 3px;
cursor: pointer;
&:hover,
&--active {
background-color: $color-aqua-lightest;
}
.icon {
margin: $gap / 2;
}
}
&__toggle {
position: absolute;
right: 0;
top: 30px;
background-color: $color-white;
border: 1px solid $color-gray-light;
z-index: 1;
margin-top: 0;
a {
display: block;
padding: $gap;
border-bottom: 1px solid $color-gray-lighter;
text-decoration: none;
color: $color-black;
cursor: pointer;
white-space: nowrap;
&:last-child {
border-bottom: 0;
}
&:hover {
background-color: $color-aqua-lightest;
}
}
}
}

View File

@ -5,6 +5,7 @@
{% from "components/modal.html" import Modal %} {% from "components/modal.html" import Modal %}
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %} {% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% from "components/save_button.html" import SaveButton %} {% from "components/save_button.html" import SaveButton %}
{% from "components/toggle_menu.html" import ToggleMenu %}
{% macro MemberManagementTemplate( {% macro MemberManagementTemplate(
application, application,
@ -131,32 +132,21 @@
</div> </div>
{% endfor %} {% endfor %}
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%} {% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%}
<toggle-menu inline-template v-cloak> {% call ToggleMenu() %}
<div class="app-member-menu"> <a v-on:click="openModal('{{ perms_modal }}')">
<span v-if="isVisible" class="accordion-table__item__toggler accordion-table__item__toggler--active"> {{ "portfolios.applications.members.menu.edit" | translate }}
{{ Icon('ellipsis')}} </a>
</span> {% if invite_pending or invite_expired -%}
<span v-else class="accordion-table__item__toggler"> {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
{{ Icon('ellipsis')}} {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
</span> <a v-on:click='openModal("{{ resend_invite_modal }}")'>
{{ "portfolios.applications.members.menu.resend" | translate }}
<div v-show="isVisible" class="accordion-table__item-toggle-content app-member-menu__toggle"> </a>
<a v-on:click="openModal('{{ perms_modal }}')"> {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
{{ "portfolios.applications.members.menu.edit" | translate }} <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
</a> {%- endif %}
{% if invite_pending or invite_expired -%} {%- endif %}
{% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %} {% endcall %}
{% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
<a v-on:click='openModal("{{ resend_invite_modal }}")'>
{{ "portfolios.applications.members.menu.resend" | translate }}
</a>
{% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
<a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
{%- endif %}
{%- endif %}
</div>
</div>
</toggle-menu>
{%- endif %} {%- endif %}
</td> </td>
</tr> </tr>

View File

@ -0,0 +1,17 @@
{% from "components/icon.html" import Icon %}
{% macro ToggleMenu() %}
<toggle-menu inline-template v-cloak>
<div class="toggle-menu">
<span v-if="isVisible" class="accordion-table__item__toggler accordion-table__item__toggler--active">
{{ Icon('ellipsis')}}
</span>
<span v-else class="accordion-table__item__toggler">
{{ Icon('ellipsis')}}
</span>
<div v-show="isVisible" class="accordion-table__item-toggle-content toggle-menu__toggle">
{{ caller() }}
</div>
</div>
</toggle-menu>
{% endmacro %}