Replace contentNodeOPtions with KDropdown

Author: AlexVelezLl

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue

@@ -49,30 +49,28 @@
         <template #actions-end>
           <VListTileAction class="action-icon px-1" @click.stop>
             <transition name="fade">
-              <IconButton
+              <KIconButton
                 icon="rename"
                 size="small"
-                :text="$tr('editTooltip')"
+                :tooltip="$tr('editTooltip')"
                 :disabled="copying"
                 @click.stop
                 @click="editTitleDescription()"
               />
             </transition>
           </VListTileAction>
           <VListTileAction :aria-hidden="!active" class="action-icon px-1">
-            <Menu v-model="activated">
-              <template #activator="{ on }">
-                <IconButton
-                  icon="optionsVertical"
-                  :text="$tr('optionsTooltip')"
-                  size="small"
-                  :disabled="copying"
-                  v-on="on"
-                  @click.stop
-                />
+            <KIconButton
+              icon="optionsVertical"
+              size="small"
+              :tooltip="$tr('optionsTooltip')"
+              :disabled="copying"
+              @click.stop
+            >
+              <template #menu>
+                <ContentNodeOptions v-if="!copying" :nodeId="nodeId" />
               </template>
-              <ContentNodeOptions v-if="!copying && activated" :nodeId="nodeId" />
-            </Menu>
+            </KIconButton>
           </VListTileAction>
         </template>
 
@@ -94,6 +92,7 @@
 
         <template #context-menu="{ showContextMenu, positionX, positionY }">
           <ContentNodeContextMenu
+            v-if="false"
             :show="showContextMenu"
             :positionX="positionX"
             :positionY="positionY"
@@ -164,11 +163,6 @@
         default: false,
       },
     },
-    data() {
-      return {
-        activated: false,
-      };
-    },
     computed: {
       ...mapGetters('currentChannel', ['canEdit']),
       ...mapGetters('contentNode', [
@@ -186,7 +180,7 @@
         },
       },
       active() {
-        return this.selected || this.activated || this.previewing;
+        return this.selected || this.previewing;
       },
       contentNode() {
         return this.getContentNode(this.nodeId);

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue

@@ -1,6 +1,10 @@
 <template>
 
-  <div
+  <KDropdownMenu
+    :options="menuOptions"
+    @select="onSelect"
+  />
+  <!-- <div
     style="max-height: 80vh"
   >
     <VList ref="optionsList">
@@ -37,7 +41,7 @@
       :moveNodeIds="[nodeId]"
       @target="moveNode"
     />
-  </div>
+  </div> -->
 
 </template>
 
@@ -197,6 +201,14 @@
           .filter(group => group.some(option => option.condition))
           .map(group => group.filter(option => option.condition));
       },
+      menuOptions() {
+        return this.groupedOptions.reduce((acc, group, idx) => {
+          if (idx > 0) {
+            acc.push({ type: 'divider' });
+          }
+          return acc.concat(group);
+        });
+      },
       editLink() {
         return {
           name: RouteNames.CONTENTNODE_DETAILS,
@@ -243,13 +255,13 @@
       ]),
       ...mapActions('clipboard', ['copy']),
       async focusFirstOption() {
-        const { optionsList } = this.$refs;
-        const firstOption = optionsList.$el.querySelector('a');
-        let tries = 0;
-        while (document.activeElement !== firstOption && tries++ < 20) {
-          await new Promise(resolve => setTimeout(resolve, 0));
-          firstOption.focus();
-        }
+        // const { optionsList } = this.$refs;
+        // const firstOption = optionsList.$el.querySelector('a');
+        // let tries = 0;
+        // while (document.activeElement !== firstOption && tries++ < 20) {
+        //   await new Promise(resolve => setTimeout(resolve, 0));
+        //   firstOption.focus();
+        // }
       },
       checkTabBoundaries($event) {
         const optionsList = this.$refs.optionsList;
@@ -264,6 +276,14 @@
           this.$destroy();
         }
       },
+      onSelect(option) {
+        if (option.onClick) {
+          option.onClick();
+        }
+        if (option.to) {
+          this.$router.push(option.to);
+        }
+      },
       newTopicNode() {
         this.trackAction('New topic');
         const nodeData = {
@@ -309,8 +329,7 @@
         return () => {};
       },
       quickEditModalFactory(modal) {
-        return $event => {
-          $event.preventDefault();
+        return () => {
           this.setQuickEditModal({
             modal,
             nodeIds: [this.nodeId],

contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue

@@ -121,24 +121,19 @@
                         size="15"
                         width="2"
                       />
-                      <Menu
+                      <KIconButton
                         v-else
-                        v-model="showMenu"
-                        data-test="editMenu"
+                        icon="optionsVertical"
+                        :tooltip="$tr('optionsTooltip')"
+                        @click.stop
                       >
-                        <template #activator="{ on }">
-                          <IconButton
-                            icon="optionsVertical"
-                            :text="$tr('optionsTooltip')"
-                            v-on="on"
-                            @click.stop
-                          />
+                        <template #menu>
+                          <ContentNodeOptions :nodeId="nodeId" />
                         </template>
-                        <ContentNodeOptions v-if="showMenu" :nodeId="nodeId" />
-                      </Menu>
+                      </KIconButton>
                     </VFlex>
                     <ContentNodeContextMenu
-                      v-if="allowEditing && !copying"
+                      v-if="allowEditing && !copying && false"
                       :show="showContextMenu"
                       :positionX="positionX"
                       :positionY="positionY"
@@ -258,7 +253,6 @@
         draggableSize: 5,
         draggableExpanded: false,
         debouncedLoad: null,
-        showMenu: false,
       };
     },
     computed: {

contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue

@@ -11,16 +11,15 @@
             <VFlex class="font-weight-bold text-truncate" shrink :class="getTitleClass(item)">
               {{ getTitle(item) }}
             </VFlex>
-            <Menu v-if="item.displayNodeOptions" v-model="breadcrumbsMenu">
-              <template #activator="{ on }">
-                <IconButton
-                  icon="dropdown"
-                  :text="$tr('optionsButton')"
-                  v-on="on"
-                />
+            <KIconButton
+              v-if="item.displayNodeOptions"
+              icon="dropdown"
+              :tooltip="$tr('optionsButton')"
+            >
+              <template #menu>
+                <ContentNodeOptions v-if="node" :nodeId="topicId" />
               </template>
-              <ContentNodeOptions v-if="node && breadcrumbsMenu" :nodeId="topicId" />
-            </Menu>
+            </KIconButton>
           </VLayout>
           <span v-else class="grey--text" :class="getTitleClass(item)">
             {{ getTitle(item) }}
@@ -195,23 +194,18 @@
             :text="$tr('editButton')"
             @click="editNodes([detailNodeId])"
           />
-          <Menu v-model="resourceDrawerMenu">
-            <template #activator="{ on }">
-              <IconButton
-                size="small"
-                icon="optionsVertical"
-                :text="$tr('optionsButton')"
-                v-on="on"
+          <KIconButton
+            icon="optionsVertical"
+            :tooltip="$tr('optionsButton')"
+          >
+            <template #menu>
+              <ContentNodeOptions
+                hideEditLink
+                hideDetailsLink
+                :nodeId="detailNodeId"
               />
             </template>
-            <ContentNodeOptions
-              v-if="resourceDrawerMenu"
-              :nodeId="detailNodeId"
-              hideDetailsLink
-              hideEditLink
-              @removed="closePanel"
-            />
-          </Menu>
+          </KIconButton>
         </template>
         <template v-else #actions>
           <IconButton
@@ -287,8 +281,6 @@
         loadingAncestors: false,
         elevated: false,
         moveModalOpen: false,
-        breadcrumbsMenu: false,
-        resourceDrawerMenu: false,
       };
     },
     computed: {

yarn.lock

@@ -3496,17 +3496,17 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-"aphrodite@git+https://github.com/learningequality/aphrodite.git":
+"aphrodite@https://github.com/learningequality/aphrodite.git":
   version "2.2.3"
-  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"
     string-hash "^1.1.3"
 
-"aphrodite@https://github.com/learningequality/aphrodite.git":
+"aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
-  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"