pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move toggle menu into its own macro.

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
styles/atat.scss
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";

49
styles/components/_portfolio_layout.scss
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 {

49
styles/components/_toggle_menu.scss Normal file
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;
}
}
}
}

42
templates/applications/fragments/members.html
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>

17
templates/components/toggle_menu.html Normal file
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 %}