[Remove Vuetify from Studio] Send e-mail dialog #5487

Prashant-thakur77 · 2025-10-21T06:13:46Z

Summary

This PR completes the removal of Vuetify from the Send Email dialog as part of the larger Vuetify migration effort (#5060). The dialog now uses Kolibri Design System components exclusively while maintaining all existing functionality.

Changes Made:

✅ Replaced VDialog and ConfirmationDialog with KModal

✅ Replaced VFlex and VLayout with custom CSS flex styles

✅ Replaced VForm with native form element

✅ Replaced VTextField and VTextarea with KTextbox

✅ Replaced VTooltip with KTooltip

✅ Implemented form validation using generateFormMixin

✅ Created new StudioChip component to replace VChip

References

Sub-issue of #5060.

Reviewer guidance

Login as [email protected] with password a
Go to Administration > Users
Select few users in the table
Click Email

Visual Changes:

Minor styling differences due to KDS vs Vuetify
Consistent with Kolibri Design System patterns
Maintains all existing functionality

LianaHarris360

Thanks so much for updating the EmailUsersDialog component. This is a good start so far. There’s still a couple of Vuetify components that can be removed. The VBtn and VCardText can be replaced with KButton and a div. There’s also a few user-facing strings that still need to be translated. The KModal title, the From and To labels within the form, “Subject line”, “Email body”, and the phrase “Add placeholder to message”, and all of the placeholder labels.

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

...ation/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js

contentcuration/contentcuration/frontend/shared/views/StudioChip.vue

Prashant-thakur77 · 2025-10-25T06:50:36Z

@LianaHarris360

There’s also a few user-facing strings that still need to be translated. The KModal title, the From and To labels within the form, “Subject line”, “Email body”, and the phrase “Add placeholder to message”, and all of the placeholder labels.

I have a doubt related #5426 (comment) this.Here i was told that wrapped strings are not to be used in administraion.So please do tell what i need to do here in this context

MisRob

Chiming in with some additional notes.

Overall congratulations on your first more complex issue. Overall nice work. All main features seem to be preserved Thanks for examining the current experience carefully.

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

...ation/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js

contentcuration/contentcuration/frontend/shared/views/__tests__/StudioChip.spec.js

contentcuration/contentcuration/frontend/shared/views/StudioChip.vue

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

Prashant-thakur77 · 2025-11-01T17:12:15Z

Hey @MisRob, just a quick note — when triggering the email dialog from the UserActionDropdown for a specific user, their name doesn’t show up as a chip in the “To” field.
Wanted to check if that’s intentional or an oversight. 🙂
Checked it in unstable.
Screencast From 2025-11-01 22-35-19.webm
I just looked into it a little and its happening because of passing wrong prop insite EmailDialog in UserActionDropdown.

EmailUsersDialog
v-model="emailDialog"
:query="{ ids: [userId] }"

which actually should be

EmailUsersDialog
v-model="emailDialog"
:initialRecipients="[userId]"

MisRob · 2025-11-03T08:47:51Z

@Prashant-thakur77

Wanted to check if that’s intentional or an oversight

Oversight, I would say.

Prashant-thakur77 · 2025-11-03T09:18:39Z

Should i update it?

MisRob · 2025-11-03T09:50:33Z

@Prashant-thakur77 That'd be nice, thank you.

MisRob · 2025-11-07T10:43:34Z

Hi @Prashant-thakur77, just checking in on what's status or if you need re-review from @LianaHarris360.

From brief skim, it seems you've resolved most of the feedback. I only don't see changes related to this comment - is it still work in progress, or some clarification is needed?

Prashant-thakur77 · 2025-11-07T10:51:09Z

I only don't see changes related to this comment - is it still work in progress, or some clarification is needed?

YES @MisRob do i need to make whole area clickable chips for this as in StudioChip component because i have already implemented it using button as you mentioned and this has been updated(the button component is in EmailUsersdialog not in studiochip) and the chips with x button have been implemented with help of kicon button in StudioChip component.And those chips without clear button such as used in (in front of front text )or when just one recepient is present are also in Studiochip.
I just have doubt that do we need to use the Studiochip for the placeholder button too or is it fine the way i have currently implemented it with button in EmailUsersDialog?
(Just a note that the Vchip wasnot used in placeholder button before too).

The chips are working as expected.And you also mentioned to remove the extra computed effects such as(darken on clicking) and will further notify during review :)

Prashant-thakur77 · 2025-11-07T10:54:50Z

r if you need re-review from @LianaHarris360.

apart from it everything else if fine.
Yes , changes are ready for the review.

MisRob · 2025-11-07T13:13:57Z

Ah I see @Prashant-thakur77. It's good consideration. I think that having <button> related logic in EmailUsersDialog is fine - I am not yet sure if it will be needed at another place or not, so there's no need to abstract those parts into StudioChip yet. I was primarily interested whether the comment is resolved and if we should re-review. I will let @LianaHarris360 to start the next review round :) Thanks both.

LianaHarris360

Thanks for updating your PR and resolving the feedback, it's almost ready to be merged! There were some visual elements that are slightly different from the initial modal that I commented on.

LianaHarris360 · 2025-11-07T17:38:31Z

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

      },
+      placeholderButtonStyles() {
+        return {
+          backgroundColor: this.$themePalette.grey.v_300,


Can we make the background color of these placeholder buttons the same as the StudioChips?

That's a good suggestion - it will be a minor deviation, but using a little lighter version like in StudioChip will also help contrast 👍

Nice suggestion .on it

Addressed it

LianaHarris360 · 2025-11-07T17:53:49Z

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

+
+    &:hover {
+      opacity: 0.9;
+      transform: translateY(-1px);


We typically darken button backgrounds on hover, so I would suggest setting the background-color to #CCCCCC here instead. We should also remove the transform animation to keep the button behavior the same as before.

When updating a color, is it okay to directly use #CCCCCC in the hover state? Shouldn’t we use a theme token instead? If so, could you provide an example of how to use a theme token for hover effects? I tried implementing it, but it didn’t work as expected.

Yes to tokens. $computedClass to the rescue :) Scroll to Computed classes section on https://design-system.learningequality.org/colors We use those for hovers. First steps can be a bit tricky, but you can also search Studio and Kolibri codebases for plenty examples.

Addressed it

LianaHarris360 · 2025-11-07T18:06:12Z

contentcuration/contentcuration/frontend/shared/views/StudioChip.vue

+    min-height: 24px;
+    padding: 2px 8px;
+    margin: 2px;
+    font-size: 12px;


The font-size of the original chips was 13px, can we update the font-size here to match?

Original PR Version

Also, the close icon buttons look bigger than the original x buttons. The size of the chips or the size of the icon buttons might need to be updated.

And dark gray background with white X for close button needs to be preserved as well, @Prashant-thakur77. Except tiny details, we really need to stay close to the current experience. If it helps, feel free to drop KIconButton use in favor of custom <button> for close button.

Updated with native button

This done with the help of KIconbutton .
Screencast From 2025-11-08 02-59-12.webm
The :color prop of kbutton will be used with hex
The issue is that the icon cannot be more smaller than this.

KIconButton
v-if="close"
class="studio-chip__close"
:aria-label="removeLabel"
icon="delete"
color=#999999
appearance="flat-button"
data-test="remove-chip"
@click.stop="handleClose"

This is done with the help of Div and native button
Screencast From 2025-11-08 03-04-00.webm

The only major diff is that the kIconButton provides with the background show and rest it similar.The native button requires more styling.

Do tell which we should prefer :)

Both versions look fine, but I believe the one that more clearly shows a visual difference when hovered is preferred, the KIconButton version.

Addressed it,Used kIconbutton

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

…lose function

…perly

Prashant-thakur77 changed the title ~~Remove vuetify email dialog~~ [Remove Vuetify from Studio] Send e-mail dialog Oct 21, 2025

rtibbles requested a review from LianaHarris360 October 21, 2025 15:47

rtibbles assigned LianaHarris360 Oct 21, 2025

LianaHarris360 requested changes Oct 24, 2025

View reviewed changes

MisRob requested changes Oct 28, 2025

View reviewed changes

MisRob added the hacktoberfest-accepted label Oct 28, 2025

Prashant-thakur77 force-pushed the remove-vuetify-email-dialog branch from f701169 to 86e2c7f Compare November 1, 2025 13:42

Prashant-thakur77 requested a review from MisRob November 1, 2025 17:01

Prashant-thakur77 requested a review from LianaHarris360 November 1, 2025 17:34

LianaHarris360 requested changes Nov 7, 2025

View reviewed changes

Prashant-thakur77 added 11 commits November 8, 2025 00:35

Created for the ConfirmationDialog

eee38b4

Maintained proper functionality of discard Draft button by updating c…

017d2fc

…lose function

Made a base for studiochip

c14cabe

added kbutton to cancel and send mail

b1007c4

made some changes for ktextbox

c2f3744

correcting email body width

b6d3c08

added textarea to ktextbox

f5017ba

corrected textarea dimensions

246a106

Implemented Ktootip and remove Vflex

6adfa3e

added Generate form mixin Functionality

d6a2fde

Fixed minor Generate form mixin Functionality

f53593b

Prashant-thakur77 added 28 commits November 8, 2025 00:35

updated studioChip.vue

2d980c7

removed excess strs strings

140c98b

removed excess strs strings

b0c683f

removed excess strs strings

85bebae

removed excess strs strings

7ce139c

Updated Styles

9d5dbe6

Updated Styles

7b5b176

removed the small prop

cff95b3

removed the small prop

bc3453a

Added hover css

6303878

removed comments

4e833e7

updated tests

475b531

Added improved checks

02b995c

removed hover functionlity

97e3f51

updated tests

fcff6bf

Updated failing tests

4fc2519

Final changes done

20fa04c

removed unnecessary comments

cd10271

added the text truncation functionality

9d67b61

Updated test file

5caa743

Updated the prop in userActionDropdown to handle EmailUsersDialog pro…

4eff00f

…perly

Updated placeholder font-sze

444a9d3

Added hover computed class

cc12241

Added button instead of kbutton

9da8892

Added button instead of kbutton

8598d33

Used Kbutton with right prop

926b82d

Used Kbutton with right prop

440b4ba

Added the needed updates

1158ecb

Prashant-thakur77 force-pushed the remove-vuetify-email-dialog branch from a8aad03 to 1158ecb Compare November 7, 2025 22:37

Prashant-thakur77 requested a review from LianaHarris360 November 7, 2025 22:39

[Remove Vuetify from Studio] Send e-mail dialog #5487

Are you sure you want to change the base?

[Remove Vuetify from Studio] Send e-mail dialog #5487

Uh oh!

Conversation

Prashant-thakur77 commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes Made:

References

Reviewer guidance

Visual Changes:

Uh oh!

LianaHarris360 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Prashant-thakur77 commented Oct 25, 2025

Uh oh!

MisRob left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Prashant-thakur77 commented Nov 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MisRob commented Nov 3, 2025

Uh oh!

Prashant-thakur77 commented Nov 3, 2025

Uh oh!

MisRob commented Nov 3, 2025

Uh oh!

MisRob commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Prashant-thakur77 commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Prashant-thakur77 commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MisRob commented Nov 7, 2025

Uh oh!

LianaHarris360 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MisRob Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Prashant-thakur77 commented Oct 21, 2025 •

edited

Loading

Prashant-thakur77 commented Nov 1, 2025 •

edited

Loading

MisRob commented Nov 7, 2025 •

edited

Loading

Prashant-thakur77 commented Nov 7, 2025 •

edited

Loading

Prashant-thakur77 commented Nov 7, 2025 •

edited

Loading

MisRob Nov 7, 2025 •

edited

Loading

MisRob Nov 7, 2025 •

edited

Loading

Prashant-thakur77 Nov 7, 2025 •

edited

Loading

Prashant-thakur77 Nov 7, 2025 •

edited

Loading

Prashant-thakur77 Nov 8, 2025 •

edited

Loading