From 9131fc784932a93b625b756c4ce653fc201f2fff Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Fri, 22 Nov 2019 12:49:48 -0500 Subject: [PATCH 1/3] Update styling for hover and active states --- styles/components/_portfolio_layout.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 4b2b3c65..a931b659 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -253,6 +253,11 @@ border-radius: 3px; cursor: pointer; + &:hover, + &--active { + background-color: $color-aqua-lightest; + } + .icon { margin: $gap / 2; } From f4922f0db256585c95c0ac7f45cfc50be7f8121d Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Mon, 25 Nov 2019 10:33:25 -0500 Subject: [PATCH 2/3] Create new toggle menu component --- js/components/toggle_menu.js | 25 ++++ js/index.js | 2 + templates/applications/fragments/members.html | 137 +++++++++--------- 3 files changed, 93 insertions(+), 71 deletions(-) create mode 100644 js/components/toggle_menu.js diff --git a/js/components/toggle_menu.js b/js/components/toggle_menu.js new file mode 100644 index 00000000..e17a201a --- /dev/null +++ b/js/components/toggle_menu.js @@ -0,0 +1,25 @@ +import ToggleMixin from '../mixins/toggle' + +export default { + name: 'toggleMenu', + + mixins: [ToggleMixin], + + methods: { + toggle: function(e) { + if (this.$el.contains(e.target)) { + this.isVisible = !this.isVisible + } else { + this.isVisible = false + } + }, + }, + + mounted: function() { + document.addEventListener('click', this.toggle) + }, + + beforeDestroy: function() { + document.removeEventListener('click', this.toggle) + }, +} diff --git a/js/index.js b/js/index.js index dd5ef06a..a28c4868 100644 --- a/js/index.js +++ b/js/index.js @@ -30,6 +30,7 @@ import ToForm from './components/forms/to_form' import ClinFields from './components/clin_fields' import PopDateRange from './components/pop_date_range' import Accordion from './components/accordion' +import ToggleMenu from './components/toggle_menu' Vue.config.productionTip = false @@ -61,6 +62,7 @@ const app = new Vue({ ToForm, ClinFields, PopDateRange, + ToggleMenu, }, mounted: function() { diff --git a/templates/applications/fragments/members.html b/templates/applications/fragments/members.html index a8e8d80b..6305f570 100644 --- a/templates/applications/fragments/members.html +++ b/templates/applications/fragments/members.html @@ -94,83 +94,78 @@
- - - +
+ + + + + + + + + {% for member in members %} + {% set perms_modal = "edit_member-{}".format(loop.index) %} + {% set invite_pending = member.role_status == 'invite_pending' %} + {% set invite_expired = member.role_status == 'invite_expired' %} - - - - - - - {% for member in members %} - {% set perms_modal = "edit_member-{}".format(loop.index) %} - {% set invite_pending = member.role_status == 'invite_pending' %} - {% set invite_expired = member.role_status == 'invite_expired' %} - - + - - + - - {% endfor %} - -
{{ "common.name" | translate }}{{ "portfolios.applications.members.form.app_perms.title" | translate }}{{ 'portfolios.applications.members.form.env_access.table_header' | translate }}
{{ "common.name" | translate }}{{ "portfolios.applications.members.form.app_perms.title" | translate }}{{ 'portfolios.applications.members.form.env_access.table_header' | translate }}
- {{ member.user_name }} -
- {{ Label(type=member.role_status, classes='label--below') }} - 		+ {{ member.user_name }} +
+ {{ Label(type=member.role_status, classes='label--below') }} + 		- {% for perm, value in member.permission_sets.items() %} -
- {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }} -
- {% endfor %} - 		- {% for env in member.environment_roles %} -
- - {{ env.environment_name }} - - - : {{ env.role }} - -
- {% endfor %} - {% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%} -
- {% set toggle_button -%} - {{ Icon('ellipsis')}} - {%- endset %} - {% set section = "app_member_edit-{}".format(member.role_id) %} +
+ {% for perm, value in member.permission_sets.items() %} +
+ {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }} +
+ {% endfor %} + 		+ {% for env in member.environment_roles %} +
+ + {{ env.environment_name }} + + + : {{ env.role }} + +
+ {% endfor %} + {% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%} + +
+ + {{ Icon('ellipsis')}} + + + {{ Icon('ellipsis')}} + - {{ - ToggleButton( - open_html=toggle_button, - close_html=toggle_button, - section_name=section, - active_style=True - ) - }} - {% call ToggleSection(section_name=section, classes="app-member-menu__toggle") %} - - {{ "portfolios.applications.members.menu.edit" | translate }} +
+ + {{ "portfolios.applications.members.menu.edit" | translate }} + + {% if invite_pending or invite_expired -%} + {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %} + {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %} + + {{ "portfolios.applications.members.menu.resend" | translate }} - {% if invite_pending or invite_expired -%} - {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %} - {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %} - - {{ "portfolios.applications.members.menu.resend" | translate }} - - {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%} - {{ 'invites.revoke' | translate }} - {%- endif %} + {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%} + {{ 'invites.revoke' | translate }} {%- endif %} - {% endcall %} + {%- endif %}
- {%- endif %} -
- + +
+ + {%- endif %} + + + {% endfor %} + +
{% endif %} From 05bdfde059b7073a5b650385d7d956b74a6f4aa7 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 27 Nov 2019 09:47:15 -0500 Subject: [PATCH 3/3] Add v-cloack to toggle-menu component and add hover style to drop down menu items --- styles/components/_portfolio_layout.scss | 4 ++ templates/applications/fragments/members.html | 43 +++++++++---------- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index a931b659..0e018809 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -283,6 +283,10 @@ &:last-child { border-bottom: 0; } + + &:hover { + background-color: $color-aqua-lightest; + } } } } diff --git a/templates/applications/fragments/members.html b/templates/applications/fragments/members.html index 6305f570..1a7bcb4a 100644 --- a/templates/applications/fragments/members.html +++ b/templates/applications/fragments/members.html @@ -133,32 +133,31 @@ {% endfor %} {% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%} - -
- - {{ Icon('ellipsis')}} - - - {{ Icon('ellipsis')}} - + +
+ + {{ Icon('ellipsis')}} + + + {{ Icon('ellipsis')}} + -
- - {{ "portfolios.applications.members.menu.edit" | translate }} - - {% if invite_pending or invite_expired -%} - {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %} - {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %} - - {{ "portfolios.applications.members.menu.resend" | translate }} +
+ + {{ "portfolios.applications.members.menu.edit" | translate }} - {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%} - {{ 'invites.revoke' | translate }} + {% if invite_pending or invite_expired -%} + {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %} + {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %} + + {{ "portfolios.applications.members.menu.resend" | translate }} + + {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%} + {{ 'invites.revoke' | translate }} + {%- endif %} {%- endif %} - {%- endif %} +
- -
{%- endif %}