Merge pull request #4502 from BabyElias/Issue-#4451

Refactored Icon to use KIcon
learningequality · Apr 19, 2024 · b20e4a1 · b20e4a1
2 parents d53eb99 + f9c17b3
commit b20e4a1
Show file tree

Hide file tree

Showing 75 changed files with 399 additions and 421 deletions.
diff --git a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
@@ -14,9 +14,9 @@
       data-test="copy"
       @click="copyToClipboard"
     >
-      <Icon small>
-        content_copy
-      </Icon>
+      <Icon
+        icon="copy"
+      />
     </VBtn>
   </div>
 

diff --git a/...uration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue b/...uration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
@@ -46,9 +46,11 @@
       <template #activator="{ on }">
         <VBtn v-bind="$attrs" v-on="on">
           actions
-          <Icon class="ml-1">
-            arrow_drop_down
-          </Icon>
+          <Icon
+            icon="dropdown"
+            class="ml-1"
+          />
+
         </VBtn>
       </template>
       <VList>

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelDetails.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelDetails.vue
@@ -3,9 +3,8 @@
   <FullscreenModal v-model="dialog">
     <template #close>
       <VBtn flat exact style="font-size: 14pt; text-transform: none;" @click="dialog = false">
-        <Icon class="mr-2">
-          arrow_back
-        </Icon>
+        <Icon class="mr-2" :color="$themeTokens.textInverted" icon="back" />
+
         Channel list
       </VBtn>
     </template>

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
@@ -13,9 +13,9 @@
           <VTooltip v-if="channel.public && !channel.deleted" bottom z-index="200" lazy>
             <template #activator="{ on }">
               <span class="px-1 py-2" v-on="on">
-                <Icon color="light-green accent-4">
-                  $vuetify.icons.indicator
-                </Icon>
+                <Icon
+                  icon="unpublishedResource"
+                />
               </span>
             </template>
             <span>This channel is public</span>
@@ -38,9 +38,9 @@
             target="_blank"
             class="ma-0"
           >
-            <Icon small>
-              launch
-            </Icon>
+            <Icon
+              icon="openNewTab"
+            />
           </VBtn>
         </VFlex>
       </VLayout>
@@ -73,9 +73,9 @@
         :to="searchChannelEditorsLink"
         target="_blank"
       >
-        <Icon small>
-          open_in_new
-        </Icon>
+        <Icon
+          icon="openNewTab"
+        />
       </VBtn>
     </td>
     <td class="text-xs-right">
@@ -109,9 +109,9 @@
         />
         <span v-else class="grey--text">Not set</span>
         <VBtn small icon flat>
-          <Icon small>
-            edit
-          </Icon>
+          <Icon
+            icon="edit"
+          />
         </VBtn>
         <template #input>
           <VTextField
@@ -145,9 +145,9 @@
         />
         <span v-else class="grey--text">Not set</span>
         <VBtn small icon flat>
-          <Icon small>
-            edit
-          </Icon>
+          <Icon
+            icon="edit"
+          />
         </VBtn>
         <template #input>
           <VTextField

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
@@ -40,9 +40,7 @@
       <template #activator="{ on }">
         <VBtn v-bind="$attrs" v-on="on">
           Actions
-          <Icon small>
-            arrow_drop_down
-          </Icon>
+          <Icon icon="dropdown" />
         </VBtn>
       </template>
       <VList>

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
@@ -3,9 +3,7 @@
   <FullscreenModal v-if="user" v-model="dialog">
     <template #close>
       <VBtn flat exact style="font-size: 14pt; text-transform: none;" @click="dialog = false">
-        <Icon class="mr-2">
-          arrow_back
-        </Icon>
+        <Icon class="mr-2" icon="back" :color="$themeTokens.textInverted" />
         User list
       </VBtn>
     </template>

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserItem.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserItem.vue
@@ -13,9 +13,7 @@
           <VTooltip v-if="user.is_admin" bottom z-index="200" lazy>
             <template #activator="{ on }">
               <span class="px-1 py-2" v-on="on">
-                <Icon color="light-green accent-4">
-                  $vuetify.icons.indicator
-                </Icon>
+                <VIconWrapper color="light-green accent-4">$vuetify.icons.indicator</VIconWrapper>
               </span>
             </template>
             <span>Administrator</span>
@@ -41,9 +39,9 @@
         <template #activator="{ on }">
           {{ formatFileSize(user.disk_space) }}
           <VBtn icon small v-on="on">
-            <Icon small>
-              edit
-            </Icon>
+            <Icon
+              icon="edit"
+            />
           </VBtn>
         </template>
         <VCard>
@@ -62,9 +60,7 @@
     <td>
       {{ user.edit_count }}
       <VBtn icon small :to="searchUserChannelsLink" target="_blank">
-        <Icon small>
-          launch
-        </Icon>
+        <Icon icon="openNewTab" />
       </VBtn>
     </td>
     <td>{{ user.view_count }}</td>

diff --git a/...ion/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue b/...ion/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
@@ -58,22 +58,26 @@
                   mr-2
                 >
                   <template v-if="$vuetify.breakpoint.lgAndUp">
-                    <Icon class="red--text">
-                      error
-                    </Icon>
+                    <Icon icon="error" />
                     <span class="font-weight-bold red--text">
                       {{ $tr('incompleteItemIndicatorLabel') }}
                     </span>
                   </template>
+                  <template v-else>
+                    <Icon ref="incompleteError" icon="error" />
+                    <KTooltip
+                      reference="incompleteError"
+                      placement="bottom"
+                      :refs="$refs"
+                    >
+                      {{ $tr('incompleteItemIndicatorLabel') }}
+
+                    </KTooltip>
+
+
+                  </template>
+
 
-                  <VTooltip v-else top lazy>
-                    <template #activator="{ on }">
-                      <Icon class="red--text" v-on="on">
-                        error
-                      </Icon>
-                    </template>
-                    <span>{{ $tr('incompleteItemIndicatorLabel') }}</span>
-                  </VTooltip>
                 </VFlex>
 
                 <VFlex>

diff --git a/...entcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/...entcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -54,11 +54,11 @@
                   <MarkdownViewer :markdown="question" />
 
                   <Icon
-                    color="grey darken-1"
+                    :color="$themePalette.grey.v_800"
+                    icon="edit"
                     class="mr-2"
-                  >
-                    edit
-                  </Icon>
+                  />
+
                 </VLayout>
               </div>
             </keep-alive>

diff --git a/...tcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue b/...tcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
@@ -80,7 +80,7 @@
               data-test="hintsToggle"
               @click="areHintsOpen = !areHintsOpen"
             >
-              <Icon class="icon" small>chevron_right</Icon>
+              <Icon icon="chevronRight" />
               <span>{{ hintsToggleLabel }}</span>
             </span>
 

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
@@ -15,9 +15,15 @@
             v-on="on"
             @click="clickItem(action)"
           >
-            <Icon v-if="config[action] && config[action].icon" :color="iconColor(action)">
-              {{ config[action].icon }}
-            </Icon>
+            <Icon
+              v-if="config[action] && config[action].icon"
+              :icon="
+                config[action].icon
+              "
+              style="font-size: 20px;"
+              :color="iconColor(action)"
+            />
+
           </VBtn>
         </template>
         <span>{{ config[action].label }}</span>
@@ -34,9 +40,11 @@
             icon
             v-on="on"
           >
-            <Icon color="grey darken-1">
-              more_vert
-            </Icon>
+            <Icon
+              icon="optionsVertical"
+              :color="$themePalette.grey.v_800"
+            />
+
           </VBtn>
         </template>
 
@@ -164,11 +172,11 @@
             label: this.$tr('toolbarLabelEdit'),
           },
           [AssessmentItemToolbarActions.MOVE_ITEM_UP]: {
-            icon: 'keyboard_arrow_up',
+            icon: 'chevronUp',
             label: this.$tr('toolbarLabelMoveUp'),
           },
           [AssessmentItemToolbarActions.MOVE_ITEM_DOWN]: {
-            icon: 'keyboard_arrow_down',
+            icon: 'chevronDown',
             label: this.$tr('toolbarLabelMoveDown'),
           },
           [AssessmentItemToolbarActions.DELETE_ITEM]: {
@@ -257,27 +265,27 @@
         switch (action) {
           case AssessmentItemToolbarActions.EDIT_ITEM:
             if (this.canEdit) {
-              return 'grey darken-1';
+              return this.$themePalette.grey.v_800;
             } else {
-              return 'grey lighten-2';
+              return this.$themeTokens.textDisabled;
             }
 
           case AssessmentItemToolbarActions.MOVE_ITEM_UP:
             if (this.canMoveUp) {
-              return 'grey darken-1';
+              return this.$themePalette.grey.v_800;
             } else {
-              return 'grey lighten-2';
+              return this.$themeTokens.textDisabled;
             }
 
           case AssessmentItemToolbarActions.MOVE_ITEM_DOWN:
             if (this.canMoveDown) {
-              return 'grey darken-1';
+              return this.$themePalette.grey.v_800;
             } else {
-              return 'grey lighten-2';
+              return this.$themeTokens.textDisabled;
             }
 
           default:
-            return 'grey darken-1';
+            return this.$themePalette.grey.v_800;
         }
       },
       clickItem(action) {

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue
@@ -62,7 +62,7 @@
                       <VListTileAction
                         class="action-col px-1 v-list__group__header__append-icon"
                       >
-                        <Icon>arrow_drop_down</Icon>
+                        <Icon icon="dropdown" />
                       </VListTileAction>
                       <VSpacer />
                     </template>
@@ -85,7 +85,7 @@
                             v-on="on"
                             @click.stop
                           >
-                            <Icon>more_horiz</Icon>
+                            <Icon icon="optionsHorizontal" />
                           </VBtn>
                         </template>
 

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
@@ -50,7 +50,11 @@
                         class="back-to-clipboard"
                         @click.prevent="resetPreviewNode"
                       >
-                        <span class="link-icon"><Icon color="primary" small>arrow_back</Icon></span>
+                        <span class="link-icon"><Icon
+                          icon="back"
+                          :color="$themeTokens.primary"
+                        />
+                        </span>
                         <span class="link-text">{{ $tr('backToClipboard') }}</span>
                       </KButton>
                     </div>

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeChangedIcon.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeChangedIcon.vue
@@ -1,14 +1,20 @@
 <template>
 
-  <span v-if="message">
-    <VTooltip bottom lazy>
-      <template #activator="{ on }">
-        <Icon color="greenSuccess" small v-on="on">
-          {{ showFilled ? 'lens' : 'trip_origin' }}
-        </Icon>
-      </template>
-      <span>{{ message }}</span>
-    </VTooltip>
+  <span v-if="message" class="mx-2">
+
+    <Icon
+      ref="contentNode"
+      :icon="showFilled ? 'unpublishedResource' : 'unpublishedChange'"
+    />
+
+    <KTooltip
+      reference="contentNode"
+      placement="bottom"
+      :refs="$refs"
+    >
+      {{ message }}
+
+    </KTooltip>
   </span>
 
 </template>

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -30,9 +30,7 @@
           <VListTileAction class="handle-col" :aria-hidden="!hover" @click.stop>
             <transition name="fade">
               <VBtn :disabled="copying" flat icon>
-                <Icon color="#686868">
-                  drag_indicator
-                </Icon>
+                <Icon :color="$themePalette.grey.v_600" icon="dragVertical" />
               </VBtn>
             </transition>
           </VListTileAction>