Icons, fonts, colors, oh my! Also, more Design System in Studio

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue

@@ -67,14 +67,14 @@
         <template v-if="header.class === 'first' && selected.length">
           <span>({{ selectedCount }})</span>
           <IconButton
-            icon="get_app"
+            icon="download"
             class="ma-0"
             text="Download CSV"
             data-test="csv"
             @click="downloadCSV"
           />
           <IconButton
-            icon="picture_as_pdf"
+            icon="pdf"
             class="ma-0"
             text="Download PDF"
             data-test="pdf"

contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue

@@ -62,7 +62,7 @@
         <template v-if="header.class === 'first' && selected.length">
           <span>({{ selectedCount }})</span>
           <IconButton
-            icon="mail_outline"
+            icon="email"
             class="ma-0"
             text="Email"
             data-test="email"

contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue

@@ -57,11 +57,11 @@
                 <keep-alive :max="5">
                   <!-- Input question shows a text field with type of `number` -->
                   <div v-if="isInputQuestion">
-                    <VTextField 
-                      v-if="isAnswerOpen(answerIdx)" 
-                      v-model="answer.answer" 
-                      class="answer-number" 
-                      type="number" 
+                    <VTextField
+                      v-if="isAnswerOpen(answerIdx)"
+                      v-model="answer.answer"
+                      class="answer-number"
+                      type="number"
                       :rules="[numericRule]"
                     />
                     <VTextField v-else :value="answer.answer" class="no-border" type="number" />
@@ -244,9 +244,9 @@
         }
 
         if (this.answers[answerIdx].correct) {
-          classes.push('correct');
+          classes.push('answer-correct');
         } else {
-          classes.push('wrong');
+          classes.push('answer-wrong');
         }
 
         return classes;
@@ -432,11 +432,11 @@
       cursor: pointer;
     }
 
-    &.closed.correct:hover {
+    &.closed.answer-correct:hover {
       background-color: fade(@exercise-answer-correct, 15%);
     }
 
-    &.closed.wrong:hover {
+    &.closed.answer-wrong:hover {
       background-color: fade(@exercise-answer-wrong, 15%);
     }
 
@@ -445,11 +445,11 @@
       width: 4px;
       height: 100%;
 
-      &.correct {
+      &.answer-correct {
         background-color: @exercise-answer-correct;
       }
 
-      &.wrong {
+      &.answer-wrong {
         background-color: @exercise-answer-wrong;
       }
     }

contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/TopicNode.vue

@@ -109,7 +109,7 @@
   }
 
   /deep/ .v-badge__badge {
-    top: -1px;
+    top: 0;
     right: -32px;
     border-radius: 3px;
   }

contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue

@@ -34,17 +34,17 @@
                 <div v-if="selectionState">
                   <IconButton
                     v-if="canEdit"
-                    icon="swap_horiz"
+                    icon="move"
                     :text="$tr('moveSelectedButton')"
                     @click="moveNodes()"
                   />
                   <IconButton
-                    icon="content_copy"
+                    icon="copy"
                     :text="$tr('duplicateSelectedButton')"
                     @click="duplicateNodes()"
                   />
                   <IconButton
-                    icon="remove_circle_outline"
+                    icon="remove"
                     :text="$tr('deleteSelectedButton')"
                     @click="removeNodes()"
                   />

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

@@ -26,11 +26,11 @@
       </template>
 
       <template #actions-end>
-        <VListTileAction :aria-hidden="!active" class="px-1">
+        <VListTileAction :aria-hidden="!active" class="px-1 action-icon">
           <VMenu v-model="activated" offset-y left>
             <template #activator="{ on }">
               <IconButton
-                icon="more_horiz"
+                icon="optionsVertical"
                 :text="$tr('optionsTooltip')"
                 v-on="on"
               />
@@ -140,4 +140,11 @@
     margin-right: 0;
   }
 
+  .action-icon {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: flex-start;
+    justify-content: center;
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue

@@ -11,7 +11,7 @@
         active: active || hover,
       }"
       data-test="content-item"
-      @click="$emit(isTopic? 'topicChevronClick': 'infoClick')"
+      @click="handleTileClick"
     >
       <slot name="actions-start" :hover="hover" class="actions-start-col"></slot>
 
@@ -69,18 +69,16 @@
         />
       </VListTileContent>
 
-      <div class="actions-end-col">
-        <VListTileAction v-if="isTopic" :aria-hidden="!hover">
-          <IconButton
-            data-test="btn-chevron"
-            icon="chevron_right"
-            :text="$tr('openTopic')"
-            @click="$emit('topicChevronClick')"
-          />
-        </VListTileAction>
-
-        <slot name="actions-end" :hover="hover"></slot>
-      </div>
+      <VListTileAction class="actions-end-col">
+        <IconButton
+          v-if="isTopic"
+          :aria-hidden="hover"
+          data-test="btn-chevron"
+          icon="chevronRight"
+          :text="$tr('openTopic')"
+        />
+      </VListTileAction>
+      <slot name="actions-end" :hover="hover"></slot>
     </VListTile>
   </VHover>
 
@@ -151,6 +149,14 @@
         return this.node.role_visibility === RolesNames.COACH;
       },
     },
+    methods: {
+      handleTileClick(e) {
+        // Ensures that clicking an icon button is not treated the same as clicking the card
+        if (e.target.tagName !== 'svg') {
+          this.isTopic ? this.$emit('topicChevronClick') : this.$emit('infoClick');
+        }
+      },
+    },
     $trs: {
       resources: '{value, number, integer} {value, plural, one {resource} other {resources}}',
       questions: '{value, number, integer} {value, plural, one {question} other {questions}}',
@@ -195,6 +201,10 @@
       }
       .compact & {
         padding-top: 16px;
+
+        .button {
+          margin-top: -8px;
+        }
       }
     }
   }

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

@@ -13,7 +13,7 @@
       @click="onNodeClick(node.id)"
     >
       <ContextMenu :disabled="!allowEditing">
-        <VLayout row align-center>
+        <VLayout row align-center style="height: 40px">
           <VFlex shrink style="min-width: 40px;" class="text-xs-center">
             <VBtn
               v-if="showExpansion"
@@ -58,7 +58,7 @@
               >
                 <template #activator="{ on }">
                   <IconButton
-                    icon="more_horiz"
+                    icon="optionsVertical"
                     :text="$tr('optionsTooltip')"
                     v-on="on"
                   />

contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue

@@ -46,16 +46,14 @@
         >
           <VLayout row>
             <IconButton
-              icon="collapse_all"
+              icon="collapseAll"
               :text="$tr('collapseAllButton')"
               @click="collapseAll"
-            >
-              $vuetify.icons.collapse_all
-            </IconButton>
+            />
             <VSpacer />
             <IconButton
               :disabled="!ancestors || !ancestors.length"
-              icon="gps_fixed"
+              icon="myLocation"
               :text="$tr('openCurrentLocationButton')"
               @click="jumpToLocation"
             />

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

@@ -14,7 +14,7 @@
             <VMenu v-if="item.displayNodeOptions" offset-y right>
               <template #activator="{ on }">
                 <IconButton
-                  icon="arrow_drop_down"
+                  icon="dropdown"
                   :text="$tr('optionsButton')"
                   v-on="on"
                 />
@@ -48,25 +48,25 @@
             @click="editNodes(selected)"
           />
           <IconButton
-            icon="content_paste"
+            icon="clipboard"
             :text="$tr('copySelectedButton')"
             @click="copyToClipboard(selected)"
           />
           <IconButton
             v-if="canEdit"
-            icon="swap_horiz"
+            icon="move"
             :text="$tr('moveSelectedButton')"
             @click="setMoveNodes(selected)"
           />
           <IconButton
             v-if="canEdit"
-            icon="content_copy"
+            icon="copy"
             :text="$tr('duplicateSelectedButton')"
             @click="duplicateNodes(selected)"
           />
           <IconButton
             v-if="canEdit"
-            icon="remove_circle_outline"
+            icon="remove"
             :text="$tr('deleteSelectedButton')"
             @click="removeNodes(selected)"
           />
@@ -154,16 +154,16 @@
       >
         <template v-if="canEdit" #actions>
           <IconButton
-            small
+            size="small"
             icon="edit"
             :text="$tr('editButton')"
             @click="editNodes([detailNodeId])"
           />
           <VMenu offset-y left>
             <template #activator="{ on }">
               <IconButton
-                small
-                icon="more_horiz"
+                size="small"
+                icon="optionsVertical"
                 :text="$tr('optionsButton')"
                 v-on="on"
               />
@@ -178,7 +178,7 @@
         </template>
         <template v-else #actions>
           <IconButton
-            small
+            size="small"
             icon="content_copy"
             :text="$tr('copyToClipboardButton')"
             @click="copyToClipboard([detailNodeId])"

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue

@@ -63,7 +63,7 @@
       />
       <IconButton
         :text="$tr('addToClipboardAction')"
-        icon="content_paste"
+        icon="clipboard"
         @click="$emit('copy_to_clipboard')"
       />
     </VCardActions>

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue

@@ -42,7 +42,7 @@
 
               <VListTileAction>
                 <IconButton
-                  icon="create"
+                  icon="edit"
                   color="grey"
                   :text="$tr('editAction')"
                   @click="handleClickEdit(search.id)"

contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue

@@ -14,19 +14,32 @@
         {{ currentChannel.name }}
       </VToolbarTitle>
       <VToolbarItems v-if="$vuetify.breakpoint.smAndUp" class="ml-4">
-        <IconButton icon="info" :text="$tr('channelDetails')" :to="viewChannelDetailsLink" />
-        <IconButton v-if="canEdit" icon="edit" :text="$tr('editChannel')" :to="editChannelLink">
-          <template #icon>
-            <VBadge color="transparent">
-              <template #badge>
-                <Icon v-if="!currentChannel.language" color="red" small>
-                  error
-                </Icon>
-              </template>
-              <Icon>edit</Icon>
-            </VBadge>
-          </template>
-        </IconButton>
+        <router-link :to="viewChannelDetailsLink">
+          <IconButton 
+            class="toolbar-icon-btn" 
+            icon="info" 
+            :text="$tr('channelDetails')" 
+          />
+        </router-link>
+        <router-link :to="editChannelLink">
+          <IconButton 
+            v-if="canEdit" 
+            class="toolbar-icon-btn" 
+            icon="edit" 
+            :text="$tr('editChannel')" 
+          >
+            <template #icon>
+              <VBadge color="transparent">
+                <template #badge>
+                  <Icon v-if="!currentChannel.language" color="red" small>
+                    error
+                  </Icon>
+                </template>
+                <Icon>edit</Icon>
+              </VBadge>
+            </template>
+          </IconButton>
+        </router-link>
       </VToolbarItems>
       <VSpacer />
       <OfflineText indicator />
@@ -308,4 +321,8 @@
     }
   }
 
+  .toolbar-icon-btn {
+    margin-top: 10px;
+  }
+
 </style>