Studio usability enhancements

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeContextMenu.vue

@@ -2,7 +2,7 @@
 
   <Menu v-model="value" :position-x="positionX" :position-y="positionY" absolute>
     <VCard>
-      <slot>
+      <slot v-if="value">
         <ContentNodeOptions :nodeId="nodeId" :hideDetailsLink="hideDetailsLink" />
       </slot>
     </VCard>

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

@@ -45,6 +45,18 @@
         </template>
 
         <template #actions-end>
+          <VListTileAction class="action-icon px-1" @click.stop>
+            <transition name="fade">
+              <IconButton
+                icon="rename"
+                size="small"
+                :text="$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 }">
@@ -57,7 +69,7 @@
                   @click.stop
                 />
               </template>
-              <ContentNodeOptions v-if="!copying" :nodeId="nodeId" />
+              <ContentNodeOptions v-if="!copying && activated" :nodeId="nodeId" />
             </Menu>
           </VListTileAction>
         </template>
@@ -105,7 +117,7 @@
   import DraggableItem from 'shared/views/draggable/DraggableItem';
   import { ContentNode } from 'shared/data/resources';
   import { DragEffect, DropEffect, EffectAllowed } from 'shared/mixins/draggable/constants';
-  import { DraggableRegions } from 'frontend/channelEdit/constants';
+  import { QuickEditModals, DraggableRegions } from 'frontend/channelEdit/constants';
   import { withChangeTracker } from 'shared/data/changes';
   import { COPYING_STATUS, COPYING_STATUS_VALUES } from 'shared/data/constants';
 
@@ -235,7 +247,14 @@
         'updateContentNode',
         'waitForCopyingStatus',
         'deleteContentNode',
+        'setQuickEditModal',
       ]),
+      editTitleDescription() {
+        this.setQuickEditModal({
+          modal: QuickEditModals.TITLE_DESCRIPTION,
+          nodeIds: [this.nodeId],
+        });
+      },
       retryFailedCopy: withChangeTracker(function(changeTracker) {
         this.updateContentNode({
           id: this.nodeId,
@@ -280,6 +299,7 @@
       creatingCopies: 'Copying...',
       copiedSnackbar: 'Copy operation complete',
       undo: 'Undo',
+      editTooltip: 'Edit Title & Description',
     },
   };
 

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

@@ -1,44 +1,50 @@
 <template>
 
-  <VList>
-    <VListTile v-if="isTopic && canEdit" @click="newTopicNode">
-      <VListTileTitle>{{ $tr('newSubtopic') }}</VListTileTitle>
-    </VListTile>
-    <VListTile v-if="canEdit && !hideEditLink" :to="editLink" @click="trackAction('Edit')">
-      <VListTileTitle>
-        {{ isTopic ? $tr('editTopicDetails') : $tr('editDetails') }}
-      </VListTileTitle>
-    </VListTile>
-    <VListTile v-if="!hideDetailsLink" :to="viewLink" @click="trackAction('View')">
-      <VListTileTitle>{{ $tr('viewDetails') }}</VListTileTitle>
-    </VListTile>
-    <VListTile v-if="canEdit" @click.stop="moveModalOpen = true">
-      <VListTileTitle>{{ $tr('move') }}</VListTileTitle>
-      <MoveModal
-        v-if="moveModalOpen"
-        ref="moveModal"
-        v-model="moveModalOpen"
-        :moveNodeIds="[nodeId]"
-        @target="moveNode"
-      />
-    </VListTile>
-    <VListTile v-if="canEdit" @click="duplicateNode()">
-      <VListTileTitle>{{ $tr('makeACopy') }}</VListTileTitle>
-    </VListTile>
-    <VListTile @click="copyToClipboard()">
-      <VListTileTitle>{{ $tr('copyToClipboard') }}</VListTileTitle>
-    </VListTile>
-    <VListTile v-if="canEdit" @click="removeNode()">
-      <VListTileTitle>{{ $tr('remove') }}</VListTileTitle>
-    </VListTile>
-  </VList>
+  <div
+    style="max-height: 80vh"
+  >
+    <VList ref="optionsList">
+      <template
+        v-for="(group, groupIndex) in groupedOptions"
+      >
+        <VListTile
+          v-for="(option, index) in group"
+          :key="groupIndex + '-' + index"
+          class="options-list-item"
+          ripple
+          :to="option.to"
+          tabindex="0"
+          @click="option.onClick($event)"
+          @keydown.enter="option.onClick($event)"
+          @keydown.tab="checkTabBoundaries($event)"
+        >
+          <VListTileTitle>
+            {{ option.label }}
+          </VListTileTitle>
+        </VListTile>
+        <VDivider
+          v-if="groupIndex < groupedOptions.length - 1"
+          :key="groupIndex + '-divider'"
+          class="divider"
+        />
+      </template>
+    </VList>
+
+    <MoveModal
+      v-if="moveModalOpen"
+      ref="moveModal"
+      v-model="moveModalOpen"
+      :moveNodeIds="[nodeId]"
+      @target="moveNode"
+    />
+  </div>
 
 </template>
 
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
-  import { RouteNames, TabNames } from '../constants';
+  import { RouteNames, TabNames, QuickEditModals } from '../constants';
   import MoveModal from './move/MoveModal';
   import { withChangeTracker } from 'shared/data/changes';
   import { RELATIVE_TREE_POSITIONS } from 'shared/data/constants';
@@ -76,6 +82,121 @@
       isTopic() {
         return this.node.kind === 'topic';
       },
+      /**
+       * Returns a list of options to display in the menu
+       * @returns {Array<Array<Object>>} List of lists, where each inner list is a group of options
+       *                                 already filtered by the render condition
+       */
+      groupedOptions() {
+        const options = [
+          [
+            {
+              label: this.$tr('viewDetails'),
+              to: this.viewLink,
+              onClick: () => this.trackAction('View'),
+              condition: !this.hideDetailsLink,
+            },
+            {
+              label: this.$tr('editTitleDescription'),
+              onClick: this.quickEditModalFactory(QuickEditModals.TITLE_DESCRIPTION),
+              condition: this.canEdit,
+            },
+          ],
+          [
+            {
+              label: this.$tr('editAllDetails'),
+              to: this.editLink,
+              onClick: () => this.trackAction('Edit'),
+              condition: this.canEdit && !this.hideEditLink,
+            },
+            {
+              label: this.$tr('move'),
+              onClick: $event => {
+                $event.stopPropagation();
+                this.moveModalOpen = true;
+              },
+              condition: this.canEdit,
+            },
+            {
+              label: this.$tr('copyToClipboard'),
+              onClick: this.copyToClipboard,
+              condition: true,
+            },
+            {
+              label: this.$tr('makeACopy'),
+              onClick: this.duplicateNode,
+              condition: this.canEdit,
+            },
+            {
+              label: this.$tr('newSubtopic'),
+              onClick: this.newTopicNode,
+              condition: this.canEdit && this.isTopic,
+            },
+            {
+              label: this.$tr('remove'),
+              onClick: this.removeNode,
+              condition: this.canEdit,
+            },
+          ],
+          [
+            {
+              label: this.$tr('editTags'),
+              onClick: this.quickEditModalFactory(QuickEditModals.TAGS),
+              condition: this.canEdit && false,
+            },
+            {
+              label: this.$tr('editLanguage'),
+              onClick: this.quickEditModalFactory(QuickEditModals.LANGUAGE),
+              condition: this.canEdit,
+            },
+          ],
+          [
+            {
+              label: this.$tr('editCategories'),
+              onClick: this.quickEditModalFactory(QuickEditModals.CATEGORIES),
+              condition: this.canEdit,
+            },
+            {
+              label: this.$tr('editLevels'),
+              onClick: this.quickEditModalFactory(QuickEditModals.LEVELS),
+              condition: this.canEdit,
+            },
+            {
+              label: this.$tr('editLearningActivities'),
+              onClick: this.quickEditModalFactory(QuickEditModals.LEARNING_ACTIVITIES),
+              condition: this.canEdit && !this.isTopic,
+            },
+          ],
+          [
+            {
+              label: this.$tr('editSource'),
+              onClick: this.quickEditModalFactory(QuickEditModals.SOURCE),
+              condition: this.canEdit && !this.isTopic,
+            },
+            {
+              label: this.$tr('editAudience'),
+              onClick: this.quickEditModalFactory(QuickEditModals.AUDIENCE),
+              condition: this.canEdit && !this.isTopic,
+            },
+          ],
+          [
+            {
+              label: this.$tr('editCompletion'),
+              onClick: this.quickEditModalFactory(QuickEditModals.COMPLETION),
+              condition: this.canEdit && !this.isTopic,
+            },
+            {
+              label: this.$tr('editWhatIsNeeded'),
+              onClick: this.quickEditModalFactory(QuickEditModals.WHAT_IS_NEEDED),
+              condition: this.canEdit,
+            },
+          ],
+        ];
+
+        return options
+          .filter(group => group.some(option => option.condition))
+          .map(group => group.filter(option => option.condition));
+      },
       editLink() {
         return {
           name: RouteNames.CONTENTNODE_DETAILS,
@@ -102,15 +223,47 @@
         }
       },
     },
+    beforeMount() {
+      this.lastFocus = document.activeElement;
+    },
+    mounted() {
+      this.focusFirstOption();
+    },
+    destroyed() {
+      this.lastFocus && this.lastFocus.focus();
+    },
     methods: {
       ...mapActions(['showSnackbar', 'clearSnackbar']),
       ...mapActions('contentNode', [
         'createContentNode',
         'moveContentNodes',
         'copyContentNode',
         'waitForCopyingStatus',
+        'setQuickEditModal',
       ]),
       ...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();
+        }
+      },
+      checkTabBoundaries($event) {
+        const optionsList = this.$refs.optionsList;
+        const options = optionsList.$el.querySelectorAll('a');
+        const index = Array.from(options).indexOf($event.target);
+        if (
+          (index === 0 && $event.shiftKey) ||
+          (index === options.length - 1 && !$event.shiftKey)
+        ) {
+          // destroy component
+          $event.preventDefault();
+          this.$destroy();
+        }
+      },
       newTopicNode() {
         this.trackAction('New topic');
         const nodeData = {
@@ -155,6 +308,17 @@
         // Otherwise, don't do anything
         return () => {};
       },
+      quickEditModalFactory(modal) {
+        return $event => {
+          $event.preventDefault();
+          this.setQuickEditModal({
+            modal,
+            nodeIds: [this.nodeId],
+          });
+          const trackActionLabel = modal.replace(/_/g, ' ').toLowerCase();
+          this.trackAction(`Edit ${trackActionLabel}`);
+        };
+      },
       removeNode: withChangeTracker(function(changeTracker) {
         this.trackAction('Delete');
         const redirect = this.getRemoveNodeRedirect();
@@ -222,8 +386,17 @@
 
     $trs: {
       newSubtopic: 'New folder',
-      editTopicDetails: 'Edit folder details',
-      editDetails: 'Edit details',
+      editTitleDescription: 'Edit title and description',
+      editAllDetails: 'Edit all details',
+      editTags: 'Edit tags',
+      editLanguage: 'Edit language',
+      editCategories: 'Edit categories',
+      editLevels: 'Edit levels',
+      editLearningActivities: 'Edit learning activities',
+      editSource: 'Edit source',
+      editAudience: 'Edit audience',
+      editCompletion: 'Edit completion',
+      editWhatIsNeeded: "Edit 'what is needed'",
       viewDetails: 'View details',
       move: 'Move',
       makeACopy: 'Make a copy',
@@ -240,5 +413,7 @@
 </script>
 
 <style scoped>
-
+  .divider {
+    margin: 8px 0!important;
+  }
 </style>