Create new toggle menu component

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)
+  },
+}

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() {

templates/applications/fragments/members.html

@@ -94,7 +94,6 @@
 
     <section class="member-list application-list">
       <div class='responsive-table-wrapper'>
-        <toggler inline-template>
         <table class="atat-table">
           <thead>
             <tr>
@@ -134,21 +133,16 @@
                     </div>
                   {% endfor %}
                   {% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%}
+                    <toggle-menu inline-template>
                     <div class="app-member-menu">
-                        {% set toggle_button -%}
+                      <span v-if="isVisible" class="accordion-table__item__toggler accordion-table__item__toggler--active">
                         {{ Icon('ellipsis')}}
-                        {%- endset %}
-                        {% set section = "app_member_edit-{}".format(member.role_id) %}
+                      </span>
+                      <span v-else class="accordion-table__item__toggler">
+                        {{ Icon('ellipsis')}}
+                      </span>
 
-                        {{
-                          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") %}
+                      <div v-show="isVisible" class="accordion-table__item-toggle-content app-member-menu__toggle">
                         <a v-on:click="openModal('{{ perms_modal }}')">
                           {{ "portfolios.applications.members.menu.edit" | translate }}
                         </a>
@@ -162,15 +156,16 @@
                             <a v-on:click='openModal("{{ revoke_invite_modal }}")'>{{ 'invites.revoke' | translate }}</a>
                           {%- endif %}
                         {%- endif %}
-                        {% endcall %}
                       </div>
+
+                    </div>
+                    </toggle-menu>
                   {%- endif %}
                 </td>
               </tr>
             {% endfor %}
           </tbody>
         </table>
-        </toggler>
       </div>
     </section>
   {% endif %}