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/error_page.scss";
@import "components/member_form.scss";
@import "components/toggle_menu.scss";
@import "sections/login";
@import "sections/home";

49
styles/components/_portfolio_layout.scss
View File

@ -154,55 +154,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 {

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;
}
}
}
}

16
templates/applications/fragments/members.html
View File

@ -5,6 +5,7 @@
{% from "components/modal.html" import Modal %}
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% from "components/save_button.html" import SaveButton %}
{% from "components/toggle_menu.html" import ToggleMenu %}
{% macro MemberManagementTemplate(
application,
@ -131,16 +132,7 @@
</div>
{% endfor %}
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%}
<toggle-menu inline-template v-cloak>
<div class="app-member-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 app-member-menu__toggle">
{% call ToggleMenu() %}
<a v-on:click="openModal('{{ perms_modal }}')">
{{ "portfolios.applications.members.menu.edit" | translate }}
</a>
@ -154,9 +146,7 @@
<a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
{%- endif %}
{%- endif %}
</div>
</div>
</toggle-menu>
{% endcall %}
{%- endif %}
</td>
</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 %}