Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DO NOT MERGE UNTIL NEW KDS RELEASE] Almost complete icons migration from Vuetify to KDS #4633

Closed
wants to merge 37 commits into from
Closed

[DO NOT MERGE UNTIL NEW KDS RELEASE] Almost complete icons migration from Vuetify to KDS #4633

Show file tree
Hide file tree
Changes from 35 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
43f6bdb
Use KIcon in Administration
MisRob Jul 1, 2024
fdaeafb
Use KIcon in ContentNodeValidator
MisRob Jul 2, 2024
8480af3
Use KIcon in StudioTree
MisRob Jul 2, 2024
e52f6ac
Use KTooltip together with KIcon for coach content indicator
MisRob Jul 2, 2024
613599b
Use KIcon in edit modal tabs
MisRob Jul 2, 2024
0306be8
Use KIcon in LazyListGroup
MisRob Jul 3, 2024
c35e9a8
Icon fixes for clipboard sub-item
MisRob Jul 3, 2024
5556471
Use KIcon in ContentNodeIcon
MisRob Jul 3, 2024
67c1e2b
Fix missing space between icon and label
MisRob Jul 3, 2024
21b233e
Use KIcon in EditListItem
MisRob Jul 4, 2024
31a9155
Use KIcon in FileUpload
MisRob Jul 4, 2024
3312f98
Remove dead code
MisRob Jul 4, 2024
4401813
Use KIcon in ImportFromChannelsModal
MisRob Jul 4, 2024
da722f5
Use KIcon in ContentNodeCopyTaskProgress
MisRob Jul 4, 2024
63e429f
Use KIcon in the staging tree banner
MisRob Jul 4, 2024
23739a7
Use KIcon in ImmersiveModalLayout
MisRob Jul 4, 2024
fff37a2
Use KIcon in FileStatus
MisRob Jul 4, 2024
68cc4bc
Use KIcon in ContentRenderer
MisRob Aug 11, 2024
1475772
Use KIcon in ChannelInfoCard
MisRob Aug 11, 2024
755ab81
Move Thumbnail to a directory
MisRob Jul 5, 2024
71217e9
Remove unused custom icons
MisRob Jul 5, 2024
a8a52e3
Move learning activity icon helper
MisRob Jul 5, 2024
4718501
Remove global registrations of Vuetify icon
MisRob Jul 5, 2024
1974c44
Move VIconWrapper and Vuetify icons helper to Thumbnail dir
MisRob Jul 5, 2024
926760e
Remove obsolete test suite
MisRob Jul 5, 2024
fb566c0
Remove Icon wrapper
MisRob Jul 5, 2024
9b0e133
Remove IconButton wrapper
MisRob Jul 5, 2024
e38506f
Do not use hardcoded color
MisRob Jul 5, 2024
652f59e
Fix help tooltips position
MisRob Aug 3, 2024
aa2971b
Remove unnecessary rtl-flip usage
MisRob Aug 3, 2024
62e957b
Remove/replace obsolete .v-icon styling
MisRob Jul 5, 2024
9757163
Fix tests after migrating from VIcon to KIcon
MisRob Aug 11, 2024
9f9da8f
Remove Teleport in favour of appendToRoot
MisRob Aug 11, 2024
38cb5c8
Add deprecation note
MisRob Aug 11, 2024
14cfe2b
[TMP] Temporarily pin KDS to fork
MisRob Aug 11, 2024
e0563de
Merge branch 'unstable' into complete-icons-migration
MisRob Aug 28, 2024
ff3c26c
[TMP] Update to the latest KDS
MisRob Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@ import Vuetify from 'vuetify';

import 'vuetify/dist/vuetify.min.css';

import { icons, theme } from 'shared/vuetify';
import { theme } from 'shared/vuetify';

Vue.use(Vuetify, {
theme: theme(),
icons: icons(),
theme: theme()
});

addDecorator(() => ({
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
data-test="copy"
@click="copyToClipboard"
>
<Icon
<KIcon
icon="copy"
/>
</VBtn>
Expand Down
8 changes: 0 additions & 8 deletions contentcuration/contentcuration/frontend/administration/pages/AdministrationIndex.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,14 +126,6 @@
vertical-align: middle;
}

.v-icon:not(.v-icon--is-component) {
font-size: 16pt !important;
/* stylelint-disable-next-line custom-property-pattern */
color: var(--v-darkGrey-darken1) !important;
opacity: 1 !important;
transform: none !important;
}

.v-input--checkbox {
display: inline-block;
width: min-content;
Expand Down
2 changes: 1 addition & 1 deletion ...uration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
<template #activator="{ on }">
<VBtn v-bind="$attrs" v-on="on">
actions
<Icon
<KIcon
icon="dropdown"
class="ml-1"
/>
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<FullscreenModal v-model="dialog">
<template #close>
<VBtn flat exact style="font-size: 14pt; text-transform: none;" @click="dialog = false">
<Icon class="mr-2" :color="$themeTokens.textInverted" icon="back" />
<KIcon class="mr-2" :color="$themeTokens.textInverted" icon="back" />

Channel list
</VBtn>
Expand Down
10 changes: 5 additions & 5 deletions contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<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
<KIcon
icon="unpublishedResource"
/>
</span>
Expand All @@ -38,7 +38,7 @@
target="_blank"
class="ma-0"
>
<Icon
<KIcon
icon="openNewTab"
/>
</VBtn>
Expand Down Expand Up @@ -73,7 +73,7 @@
:to="searchChannelEditorsLink"
target="_blank"
>
<Icon
<KIcon
icon="openNewTab"
/>
</VBtn>
Expand Down Expand Up @@ -109,7 +109,7 @@
/>
<span v-else class="grey--text">Not set</span>
<VBtn small icon flat>
<Icon
<KIcon
icon="edit"
/>
</VBtn>
Expand Down Expand Up @@ -145,7 +145,7 @@
/>
<span v-else class="grey--text">Not set</span>
<VBtn small icon flat>
<Icon
<KIcon
icon="edit"
/>
</VBtn>
Expand Down
12 changes: 6 additions & 6 deletions contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,17 +69,19 @@

<template v-if="header.class === 'first' && selected.length">
<span>({{ selectedCount }})</span>
<IconButton
<KIconButton
icon="download"
class="ma-0"
text="Download CSV"
tooltip="Download CSV"
ariaLabel="Download CSV"
data-test="csv"
@click="downloadCSV"
/>
<IconButton
<KIconButton
icon="pdf"
class="ma-0"
text="Download PDF"
tooltip="Download PDF"
ariaLabel="Download PDF"
data-test="pdf"
@click="downloadPDF"
/>
Expand All @@ -106,7 +108,6 @@
import { channelExportMixin } from 'shared/views/channel/mixins';
import { routerMixin } from 'shared/mixins';
import Checkbox from 'shared/views/form/Checkbox';
import IconButton from 'shared/views/IconButton';
import LanguageDropdown from 'shared/views/LanguageDropdown';

const channelFilters = {
Expand All @@ -127,7 +128,6 @@
Checkbox,
ChannelItem,
LanguageDropdown,
IconButton,
},
mixins: [tableMixin, filterMixin, channelExportMixin, routerMixin],
data() {
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<template #activator="{ on }">
<VBtn v-bind="$attrs" v-on="on">
Actions
<Icon icon="dropdown" />
<KIcon icon="dropdown" />
</VBtn>
</template>
<VList>
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +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" icon="back" :color="$themeTokens.textInverted" />
<KIcon class="mr-2" icon="back" :color="$themeTokens.textInverted" />
User list
</VBtn>
</template>
Expand Down
28 changes: 18 additions & 10 deletions contentcuration/contentcuration/frontend/administration/pages/Users/UserItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,22 @@
<Checkbox v-model="selected" />
</VFlex>
<VFlex shrink>
<VTooltip v-if="user.is_admin" bottom z-index="200" lazy>
<template #activator="{ on }">
<span class="px-1 py-2" v-on="on">
<VIconWrapper color="light-green accent-4">$vuetify.icons.indicator</VIconWrapper>
</span>
</template>
<span>Administrator</span>
</VTooltip>
<KIcon
v-if="user.is_admin"
ref="admin"
icon="dot"
aria-label="Administrator"
:color="$themePalette.green.v_800"
:style="{ marginRight: '4px', fontSize: '10px' }"
/>
<KTooltip
reference="admin"
:refs="$refs"
placement="bottom"
appendToRoot
>
Administrator
</KTooltip>
</VFlex>
<VFlex class="py-2 text-truncate" grow style="max-width: 200px;">
<ActionLink
Expand All @@ -39,7 +47,7 @@
<template #activator="{ on }">
{{ formatFileSize(user.disk_space) }}
<VBtn icon small v-on="on">
<Icon
<KIcon
icon="edit"
/>
</VBtn>
Expand All @@ -60,7 +68,7 @@
<td>
{{ user.edit_count }}
<VBtn icon small :to="searchUserChannelsLink" target="_blank">
<Icon icon="openNewTab" />
<KIcon icon="openNewTab" />
</VBtn>
</td>
<td>{{ user.view_count }}</td>
Expand Down
12 changes: 6 additions & 6 deletions contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
<div>
<h1 class="font-weight-bold px-4 py-2 title">
{{ `${$formatNumber(count)} ${count === 1 ? 'user' : 'users'}` }}
<IconButton
<KIconButton
v-if="count"
icon="email"
class="ma-0"
:color="$themeTokens.primary"
:text="`Email ${$formatNumber(count)} ${count === 1 ? 'user' : 'users'}`"
:tooltip="`Email ${$formatNumber(count)} ${count === 1 ? 'user' : 'users'}`"
:ariaLabel="`Email ${$formatNumber(count)} ${count === 1 ? 'user' : 'users'}`"
@click="showMassEmailDialog = true"
/>
<EmailUsersDialog
Expand Down Expand Up @@ -78,10 +79,11 @@

<template v-if="header.class === 'first' && selected.length">
<span>({{ selectedCount }})</span>
<IconButton
<KIconButton
icon="email"
class="ma-0"
text="Email"
tooltip="Email"
ariaLabel="Email"
Comment on lines +85 to +86
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was wondering if these should be translated but then I think I recall that we don't translate the administration app?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. Hmm I am not sure, I just used what was there. @bjester or @marcellamaki do you know?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah generally we haven't worried about translating the administration side of Studio. So this is acceptable given the current state of it.

data-test="email"
@click="showEmailDialog = true"
/>
Expand All @@ -108,7 +110,6 @@
import EmailUsersDialog from './EmailUsersDialog';
import UserItem from './UserItem';
import { routerMixin } from 'shared/mixins';
import IconButton from 'shared/views/IconButton';
import Checkbox from 'shared/views/form/Checkbox';
import CountryField from 'shared/views/form/CountryField';

Expand All @@ -125,7 +126,6 @@
name: 'UserTable',
components: {
Checkbox,
IconButton,
EmailUsersDialog,
UserItem,
CountryField,
Expand Down
4 changes: 2 additions & 2 deletions ...ion/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,13 @@
mr-2
>
<template v-if="$vuetify.breakpoint.lgAndUp">
<Icon icon="error" />
<KIcon icon="error" />
<span class="font-weight-bold red--text">
{{ $tr('incompleteItemIndicatorLabel') }}
</span>
</template>
<template v-else>
<Icon ref="incompleteError" icon="error" />
<KIcon ref="incompleteError" icon="error" />
<KTooltip
reference="incompleteError"
placement="bottom"
Expand Down
2 changes: 1 addition & 1 deletion ...entcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
<VLayout align-start justify-space-between>
<MarkdownViewer :markdown="question" />

<Icon
<KIcon
:color="$themePalette.grey.v_800"
icon="edit"
class="mr-2"
Expand Down
2 changes: 1 addition & 1 deletion ...tcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
data-test="hintsToggle"
@click="areHintsOpen = !areHintsOpen"
>
<Icon icon="chevronRight" />
<KIcon icon="chevronRight" />
<span>{{ hintsToggleLabel }}</span>
</span>

Expand Down
4 changes: 2 additions & 2 deletions contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
v-on="on"
@click="clickItem(action)"
>
<Icon
<KIcon
v-if="config[action] && config[action].icon"
:icon="
config[action].icon
Expand All @@ -40,7 +40,7 @@
icon
v-on="on"
>
<Icon
<KIcon
icon="optionsVertical"
:color="$themePalette.grey.v_800"
/>
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<LazyListGroup
v-model="open"
appendIcon="arrow_drop_down"
appendIcon="dropdown"
class="channel-item"
:style="{ 'border-left-color': channelColor }"
>
Expand Down
4 changes: 2 additions & 2 deletions contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
<VListTileAction
class="action-col px-1 v-list__group__header__append-icon"
>
<Icon icon="dropdown" />
<KIcon :icon="open ? 'dropup' : 'dropdown'" :style="{ fontSize: '22px' }" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a blocker, but I'm wondering if there's a way to make a nice visual transition between these two icons.

</VListTileAction>
<VSpacer />
</template>
Expand All @@ -85,7 +85,7 @@
v-on="on"
@click.stop
>
<Icon icon="optionsHorizontal" />
<KIcon icon="optionsHorizontal" />
</VBtn>
</template>

Expand Down
Loading