Spreed: "Leave call" modal improvements

[jancborchardt]

The current "Leaving call" modal could be better:

• [ ] Title in present form: "Leave call"
• [ ] The content text should be explanatory and include the room name: "Navigating away from the page will leave the call in Design team public."

---

• [ ] The icon is not needed, it just makes the text strangely aligned. nextcloud/server#20192
• [ ] "No" button should be "Stay in call". nextcloud/server#20192
• [ ] "Yes" button should be "Leave call" and not primary colored but red, as it is destructive. nextcloud/server#20192

@ma12-co if you point out where this needs to be changed, it would be a good first issue.

[nickvergessen]

The icon is not needed, it just makes the text strangely aligned.

Needs fixing in @nextcloud/dialogs

"No" button should be "Stay in call".

Needs fixing in @nextcloud/dialogs

"Yes" button should be "Leave call" and not primary colored but red, as it is destructive.

Needs fixing in @nextcloud/dialogs

Mind creating a new issue in server for those, as the package is also just wrapping OC.dialogs from https://github.com/nextcloud/server/blob/bb1d8b318964b5b778e4c381db2f9ff281164384/core/src/OC/dialogs.js

[nickvergessen]

Title and description can be modified here:
https://github.com/nextcloud/spreed/blob/3b2775350493f0a2bf4bcd98e084bdbb17764e4f/src/App.vue#L260-L262

So yeah looks like a good first issue

[jancborchardt]

@nickvergessen it makes more sense for you to open that issue I think, since I wouldn’t be able to explain what needs to be done where, as you listed above. Feel free to copy my text as supporting info. :)

[nickvergessen]

Duplicated to https://github.com/nextcloud/server/issues/20192

[gary-kim]

The following diff

diff --git a/src/App.vue b/src/App.vue
index 96649a65..f2d452a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -257,9 +257,15 @@ export default {
        */
        Router.beforeEach((to, from, next) => {
            if (this.isInCall) {
-               OC.dialogs.confirm(
-                   t('spreed', 'Do you really want to leave the call?'),
-                   t('spreed', 'Leaving call'),
+               OC.dialogs.confirmDestructive(
+                   t('spreed', `Navigating away from the page will leave the call in ${this.getConversationName(this.token)}`),
+                   t('spreed', 'Leave call'),
+                   {
+                       type: OC.dialogs.YES_NO_BUTTONS,
+                       confirm: t('spreed', 'Leave call'),
+                       confirmClasses: 'error',
+                       cancel: t('spreed', 'Stay in call')
+                   },
                    (decision) => {
                        if (!decision) {
                            return

makes this without the need for any changes in server:

What do you think @jancborchardt?

[ma12-co]

I think it's a very nice improvement!

[jancborchardt]

Perfect @gary-kim! I will :+1: that pull request :D