lots of changes: swapped dropdown and contextmenu icons, contextmenu …

…will now open on click and close when unfocused or an action is taken on the menu. ContextMenu styling changes
uab-cgds-worthey · Dec 15, 2023 · f2f1a5e · f2f1a5e
1 parent f8bdee4
commit f2f1a5e
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 85 deletions.
diff --git a/frontend/src/components/AnalysisView/DiscussionPost.vue b/frontend/src/components/AnalysisView/DiscussionPost.vue
@@ -6,11 +6,8 @@
             {{  timestamp  }}
           </div>
           <ul v-if="isUser" class="actions-menu">
-            <!-- <DropDownMenu :actions="this.postActions">
-              <font-awesome-icon class="header-icon" icon="caret-down" size="xl" />
-            </DropDownMenu> -->
-            <ContextMenu :actions="this.postActions" :context_id="id">
-              <font-awesome-icon class="header-icon" icon="caret-down" size="xl" />
+            <ContextMenu :actions="actions" :context_id="id">
+              <font-awesome-icon class="header-icon" icon="ellipsis-vertical" size="xl" />
             </ContextMenu>
           </ul>
         </div>
@@ -21,14 +18,12 @@
 </template>
 
 <script>
-import DropDownMenu from '@/components/DropDownMenu.vue';
 import ContextMenu from '@/components/ContextMenu.vue';
 
 export default {
   name: 'discussion-post',
   components: {
-    DropDownMenu,
-    ContextMenu
+    ContextMenu,
   },
   props: {
     id: {
@@ -59,39 +54,19 @@ export default {
       },
     },
     userClientId: {
-      type: String
-    }
-  },
-  data: function() {
-    return {
-      postActions: [
-        {
-          icon: 'pencil',
-          text: 'Edit',
-          operation: () => {
-            console.log("Editing post")
-          },
-        },
-        {
-          divider: true
-        },
-        {
-          icon: 'xmark',
-          text: 'Delete',
-          operation: () => {
-            console.log("Deleting post")
-          },
-        },
-      ]
-    }
+      type: String,
+    },
+    actions: {
+      type: Array,
+    },
   },
   computed: {
     timestamp: function() {
       return new Date(this.publish_timestamp).toUTCString();
     },
     isUser: function() {
-      return this.userClientId == this.author_id
-    }
+      return this.userClientId == this.author_id;
+    },
   },
 };
 </script>
@@ -139,6 +114,8 @@ export default {
 
 .header-icon {
   color: var(--rosalution-purple-300);
+  cursor: pointer;
+  padding: var(--p-5)
 }
 
 </style>
diff --git a/frontend/src/components/AnalysisView/DiscussionSection.vue b/frontend/src/components/AnalysisView/DiscussionSection.vue
@@ -52,6 +52,7 @@
                 :attachments="discussion.attachments"
                 :thread="discussion.thread"
                 :userClientId="userClientId"
+                :actions="actions"
             />
         </div>
     </div>
@@ -77,8 +78,14 @@ export default {
       },
     },
     userClientId: {
-      type: String
-    }
+      type: String,
+    },
+    actions: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
   },
   data: function() {
     return {

diff --git a/frontend/src/components/ContextMenu.vue b/frontend/src/components/ContextMenu.vue
@@ -1,11 +1,8 @@
 <template>
-    <li>
-        <label :for="context_id">
-            <slot></slot>
-        </label>
-        <input type="checkbox" :id="context_id" />
+    <li tabindex="1" ref="contextRef">
+        <slot></slot>
         <ul class="grey-rounded-menu drop-down-content">
-            <li v-for="action in actions" :key="action.text" @click="action.operation()">
+            <li v-for="action in actions" :key="action.text" @click="this.runAction(action.operation)">
                 <span> {{ action.text }} </span>
                 <font-awesome-icon v-if="action.icon" :icon="action.icon" size="lg" class="right-side-icon" />
             </li>
@@ -15,21 +12,25 @@
 
 <script>
 export default {
-    name: 'context-menu',
-    props: {
-        actions: {
-            type: Array,
-            validator: (prop) => prop.every(
-                (action) => action.text !== undefined || action.divider,
-            )
-        },
-        context_id: String,
+  name: 'context-menu',
+  props: {
+    actions: {
+      type: Array,
+      validator: (prop) => prop.every(
+          (action) => action.text !== undefined || action.divider,
+      ),
     },
-    computed: {
-        context_toggle() {
-            return this.context_id.toLowerCase() + '_menu'
-        }
-    }
+    context_id: String,
+  },
+  methods: {
+    runAction(actionOperation) {
+      actionOperation();
+      this.closeContext();
+    },
+    closeContext() {
+      this.$refs.contextRef.blur();
+    },
+  },
 };
 </script>
 
@@ -42,17 +43,9 @@ hr {
     border-radius: var(--content-border-radius);
     background-color: var(--rosalution-white);
     border: 3px solid var(--rosalution-grey-000);
-    width: 230px;
+    width: 175px;
     padding: .75rem;
-}
-
-.drop-down-content {
-    text-align: right;
-}
-
-.right-side-icon {
-    margin-left: var(--p-8);
-    margin-bottom: 0.12rem;
+    margin-right: var(--p-16)
 }
 
 ul li ul {
@@ -69,23 +62,24 @@ ul li ul:hover li:hover {
   background-color: var(--rosalution-purple-100);
 }
 
-label {
-    cursor: pointer;
-}
-
-input[type="checkbox"] {
-    display: none;
+ul li ul li {
+  clear: both;
+  width: 100%;
+  line-height: 2rem;
 }
 
-/* li input[type=checkbox]:checked ~ ul {
+li:focus ul {
     visibility: visible;
     opacity: 1;
     display: block;
-} */
+}
 
-input[type=checkbox]:checked + ul {
-    visibility: visible;
-    opacity: 1;
-    display: block;
+.drop-down-content {
+    text-align: right;
+}
+
+.right-side-icon {
+    margin-left: var(--p-8);
+    margin-bottom: 0.12rem;
 }
-</style>
+</style>
diff --git a/frontend/src/components/RosalutionHeader.vue b/frontend/src/components/RosalutionHeader.vue
@@ -33,7 +33,7 @@
           </router-link>
         </drop-down-menu>
         <drop-down-menu v-if="actionsExist" :actions="actions" data-test="user-menu">
-          <font-awesome-icon class="header-icon" icon="ellipsis-vertical" size="xl" />
+          <font-awesome-icon class="header-icon" icon="bars" size="xl" />
         </drop-down-menu>
       </ul>
     </div>

diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -24,7 +24,7 @@ import {
   faAsterisk, faPause, faCheck, faX, faUser, faUsers, faUserGroup, faCalendar, faBookOpen, faList, faLayerGroup,
   faBoxArchive, faQuestion, faClock, faClipboardCheck, faMagnifyingGlass, faChevronDown, faChevronRight,
   faUpRightFromSquare, faCirclePlus, faPencil, faEllipsisVertical, faLink, faXmark, faUserDoctor, faPaperclip, faPlus,
-  faAnglesRight, faFileImage, faFileCirclePlus, faMountainSun, faArrowUp, faArrowDown, faCaretDown
+  faAnglesRight, faFileImage, faFileCirclePlus, faMountainSun, faArrowUp, faArrowDown, faCaretDown, faBars,
 } from '@fortawesome/free-solid-svg-icons';
 import {
   faCopy, faFile, faComment, faCircleCheck, faCircleQuestion, faCircleXmark, faImages,
@@ -35,7 +35,7 @@ library.add(
     faLayerGroup, faBoxArchive, faQuestion, faClock, faClipboardCheck, faChevronDown, faChevronRight,
     faUpRightFromSquare, faCopy, faCirclePlus, faFile, faComment, faPencil, faEllipsisVertical, faLink, faXmark,
     faUserDoctor, faPaperclip, faPlus, faAnglesRight, faCircleCheck, faCircleQuestion, faCircleXmark, faImages,
-    faFileImage, faFileCirclePlus, faMountainSun, faArrowUp, faArrowDown, faCaretDown
+    faFileImage, faFileCirclePlus, faMountainSun, faArrowUp, faArrowDown, faCaretDown, faBars,
 );
 
 // The NotFoundView should always be last because it's an ordered array.

diff --git a/frontend/src/stores/authStore.js b/frontend/src/stores/authStore.js
@@ -24,7 +24,7 @@ const authStore = {
     this.state.email = user['email'];
     this.state.roles.push(user['scope']);
     this.state.clientId = user['client_id'];
-    
+
     user['client_secret'] ? this.state.clientSecret = user['client_secret'] : '';
   },
   getUser() {

diff --git a/frontend/src/views/AnalysisView.vue b/frontend/src/views/AnalysisView.vue
@@ -43,6 +43,7 @@
         id="Discussion"
         :discussions="this.discussions"
         :userClientId="auth.getClientId()"
+        :actions="this.discussionContextActions"
         @discussion:new-post="this.addDiscussionPost"
       />
       <SupplementalFormList
@@ -201,7 +202,24 @@ export default {
 
       return actionChoices;
     },
-
+    discussionContextActions() {
+      return [
+        {
+          icon: 'pencil',
+          text: 'Edit',
+          operation: () => {
+            console.log('Editing Discussion Post');
+          },
+        },
+        {
+          icon: 'xmark',
+          text: 'Delete',
+          operation: () => {
+            console.log('Deleting Discussion Post');
+          },
+        },
+      ];
+    },
     sectionsList() {
       return this.analysis.sections;
     },