Move toggle menu into its own macro.
Use ToggleMenu macro in application team table.
This commit is contained in:
parent
a5194d6f70
commit
5ba22d82e3
@ -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";
|
||||||
|
@ -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 {
|
||||||
|
49
styles/components/_toggle_menu.scss
Normal file
49
styles/components/_toggle_menu.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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>
|
||||||
|
17
templates/components/toggle_menu.html
Normal file
17
templates/components/toggle_menu.html
Normal 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 %}
|
Loading…
x
Reference in New Issue
Block a user