Skip to content

Issue#5123 : Migrated the offline alert bar in Settings from Vuetify to Kolibri Design System. - #5162

Merged
MisRob merged 9 commits into
learningequality:unstablefrom
AadarshM07:issue#5123
Jul 25, 2025
Merged

Issue#5123 : Migrated the offline alert bar in Settings from Vuetify to Kolibri Design System.#5162
MisRob merged 9 commits into
learningequality:unstablefrom
AadarshM07:issue#5123

Conversation

@AadarshM07

@AadarshM07AadarshM07 commented Jul 8, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

Migrated the OfflineText Vuetify component with a new StudioOfflineAlert component that uses Kolibri Design System by following the guidelines .

KDS components used:

  • KTransition : for smooth transition of alertbar
  • KIcon : disconnect icon used for alert
  • KLiveRegion : Screen reader accessability

Manual verification steps performed:

  • Switched network offline and back online to overview the behaviour.
  • Verified the alert appears with transition and UI consistency.
  • Confirmed accessibility messages are announced via useKLiveRegion
  • Checked responsiveness across viewports

UI screenshots:

Desktop:

image

Mobile:

image

References

Reviewer guidance

  • Toggle the app offline and online to test the component behaviour.
  • Ensure if the new component is visually appealing.

@MisRob

MisRob commented Jul 10, 2025

Copy link
Copy Markdown
Member

Thank you @AadarshM07, I will review soon.

@MisRob
MisRob self-requested a review July 10, 2025 08:30
@MisRobMisRob self-assigned this Jul 10, 2025
MisRob
MisRob reviewed Jul 10, 2025
View reviewed changes

@MisRobMisRob left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Very nice work @AadarshM07! I successfully tested on multiple screen sizes, on both RTL and LTR, and with screen reader too. Thanks for following the guidance, much appreciated.

Leaving few notes, let me know what you think.

Comment threadcontentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue Outdated
icon="disconnected"
class="mx-3"
/>
<span class="notranslate">{{ $tr('offlineText') }}</span>

@MisRobMisRobJul 10, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

notranslate needs to be removed here - its only for texts that shouldn't be translated. Here we are translating.

@AadarshM07AadarshM07Jul 12, 2025

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Sure, thanks for clarifying — I will remove it.

Comment threadcontentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
Comment threadcontentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue Outdated
Comment threadcontentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue Outdated
Comment threadcontentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue Outdated
Comment threadcontentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue Outdated
Comment threadcontentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
@AadarshM07AadarshM07 mentioned this pull request Jul 19, 2025
Merged
8 tasks
@AadarshM07@MisRob
fix(StudioOfflineAlert) : adjust z-index for proper layering
7a054fc
Co-authored-by: Michaela Robosova <robosovam@gmail.com>
MisRob
MisRob reviewed Jul 24, 2025
View reviewed changes

@MisRobMisRob left a comment •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Thanks for resolving feedback @AadarshM07!

Two small styling changes and then we can merge.

Generally during this project, we don't want to introduce unexpected visual changes, even minor ones in padding and such.

Comment threadcontentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue Outdated
Comment threadcontentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue Outdated
AadarshM07and others added 2 commits July 24, 2025 23:34
@AadarshM07@MisRob
style(StudioOfflineAlert): adjust right margin
8106787
Co-authored-by: Michaela Robosova <robosovam@gmail.com>
@AadarshM07@MisRob
style(StudioOfflineAlert): adjust left margin
3017375
Co-authored-by: Michaela Robosova <robosovam@gmail.com>
@AadarshM07

AadarshM07 commented Jul 24, 2025

Copy link
Copy Markdown
ContributorAuthor

I’ve made the necessary updates - thank you for the guidance👍

MisRob
MisRob approved these changes Jul 25, 2025
View reviewed changes

@MisRobMisRob left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Thanks @AadarshM07!

@MisRob
MisRob merged commit 7b7117b into learningequality:unstableJul 25, 2025
13 checks passed
@MisRobMisRob mentioned this pull request Jul 25, 2025
Closed
11 tasks
@VirajjaiVirajjai mentioned this pull request Sep 9, 2025
Closed
4 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@MisRobMisRobMisRob approved these changes

Assignees

@MisRobMisRob

Labels

TODO: needs review

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@AadarshM07@MisRob