Skip to content

[Remove Vuetify from Studio] Collection channels loader in Channels - New collection #5388

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

Open
wants to merge 9 commits into
base: unstable
Choose a base branch
from
Open

[Remove Vuetify from Studio] Collection channels loader in Channels - New collection #5388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0701d5b
feat: Migrate buttons in Related tab from Vuetify to KDS
nishatalam24 Sep 13, 2025
f9bee66
feat: Add StudioLargeLoader and replace old loaders (Closes #5244)
nishatalam24 Sep 13, 2025
a7518ad
Revert "feat: Migrate buttons in Related tab from Vuetify to KDS"
nishatalam24 Sep 13, 2025
9e71fd5
Revert "feat: Add StudioLargeLoader and replace old loaders (Closes #…
nishatalam24 Sep 13, 2025
96f21da
feat: Add StudioLargeLoader and replace old loaders (Closes #5244)
nishatalam24 Sep 13, 2025
0f2e809
Revert "feat: Add StudioLargeLoader and replace old loaders (Closes #…
nishatalam24 Sep 13, 2025
c2632f0
feat: Add StudioLargeLoader component
nishatalam24 Sep 13, 2025
e3503fc
refactor: Use StudioLargeLoader in ChannelSetModal
nishatalam24 Sep 13, 2025
ecea0ae
[pre-commit.ci lite] apply automatic fixes
pre-commit-ci-lite[bot] Sep 23, 2025
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
4 changes: 3 additions & 1 deletion contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@

<!-- Channel list section -->
<VCardText v-if="loadingChannels">
<LoadingText />
<StudioLargeLoader> Loading collections... </StudioLargeLoader>
</VCardText>
<div
v-else
Expand Down Expand Up @@ -219,6 +219,7 @@
import FullscreenModal from 'shared/views/FullscreenModal';
import Tabs from 'shared/views/Tabs';
import LoadingText from 'shared/views/LoadingText';
import StudioLargeLoader from 'shared/views/StudioLargeLoader.vue';

export default {
name: 'ChannelSetModal',
Expand All @@ -230,6 +231,7 @@
FullscreenModal,
Tabs,
LoadingText,
StudioLargeLoader,
},
mixins: [constantsTranslationMixin, routerMixin],
props: {
Expand Down
41 changes: 41 additions & 0 deletions contentcuration/contentcuration/frontend/shared/views/StudioLargeLoader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<template>

<div class="studio-large-loader">
<KCircularLoader :size="70" />
<div class="loader-text">
<slot ></slot>
</div>
Copy link
Member

Choose a reason for hiding this comment

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

This is not required, so should be removed.

</div>

</template>


<script>

import KCircularLoader from 'kolibri-design-system/lib/loaders/KCircularLoader.vue';

export default {
name: 'StudioLargeLoader',
components: { KCircularLoader },
};

</script>


<style scoped>

.studio-large-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
Copy link
Member

Choose a reason for hiding this comment

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

I think the loader size should be set using the size prop of the KCircularLoader so setting min-hight may not be useful in this case.

}
Copy link
Member

Choose a reason for hiding this comment

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

Simplify this css class in light of https://github.com/learningequality/studio/pull/5388/files#r2388418039


.loader-text {
margin-top: 16px;
font-size: 1.2em;
color: #555555;
Copy link
Member

Choose a reason for hiding this comment

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

Lets use the the KDS colors here. There are quite a number of examples on how this can be done eg $themeTokens, $themePalette, etc. Heres a example

Copy link
Member

Choose a reason for hiding this comment

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

Because of https://github.com/learningequality/studio/pull/5388/files#r2388418039, this css class should be removed as well

}

</style>
Loading