Close button or escape key for task detail view?

I am surprised not to have found a feature request for it. Maybe it’s a bug on my end, but shouldn’t the task detail view have a close or okay button?
The only way to get back to the list quickly seems to be to click on the list link in the div “subtitle”.
Usually I would expect a button at the top right or at the bottom to confirm or close the dialog.
Alternatively or additionally also the closing of the view by the esc key would be nice. I think that was already implemented elsewhere.

Thanks for this great app that I try with much pleasure since a few days!

2 Likes

From where did you open that view? If the task detail view is open as a popup you should be able to close it via the X on the top right.

Thanks for the quick reply.
Ah, that explains why no one else asked for this feature. :grin:

I get this view when opening a task, no matter which one.
I have disabled my adblocker.

Frontend version: 0.20.5
API version: v0.20.4
(Firefox 111.0.1, macOS; but on my iPad in Safari it looks the same)

Admittedly, though, the console spits out a lot of error messages as soon as I open the task detail view. Surely it has something to do with that.
See the error log below.
I’ve already tried to fix these CORS errors without success. Maybe you remember my other post here, with Caddy and Authelia this issue is really super complicated (for me). But since it works as it should except for this detail with the close button, I’ll leave it at that for now.

Log:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2FTaskDetailView-69b3bdd0.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2FprioritySelect.vue_vue_type_script_setup_true_lang-e449b261.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2FDone-aa80641b.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2FColorPicker-24a09c44.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2FuseCopyToClipboard-4d27738e.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2FcreateAsyncComponent-3deb6945.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource. 2

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2FlistSearch-575b2c6f.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2FAsyncEditor-050be975.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2Fmultiselect-6cc4a5b3.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2Floading-b6b62fff.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2Findex-e1a598c6.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2Fpurify.es-18bd93c1.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource. 2

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://my-authelia-domain.de/?rd=https%3A%2F%2Fmy-vikunja-domain.de%2Fassets%2Feditor-49442769.js&rm=GET. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

From which project view? From Kanban as well?

The error message sounds like you’re not logged in or the authentication cookie is not relayed properly.

I tried it, and yes, also in Kanban and the other view modes, there is no close button.
(but of course I can use esc in Kanban :-))

Yes, something between Authelia, Caddy and Vikunja is not working well. But I am logged in, all tasks are editable, all options changeable, everything is saved. From my inexperienced point of view, the app works well, except for the mentioned detail.

Okay, now it’s getting really interesting!
It has nothing to do with my installation.
On https://try.vikunja.io/ the result is the same!
In Safari and Firefox it looks like this:

and also in Edge, the same result:

It looks better in Linux (Midori browser).
But even here it is not quite correct, because as soon as I try to click the X with the mouse, the edit line for the heading is shown and the button disappears.

This is what it looks like for me:

Tested in Firefox and Chromium. Which OS are you using? And which screen resolution did you configure?

Ah you are right, in Kanban mode the tasks open as a “popup” and there indeed is the X in the upper right corner.
I had overlooked it, sorry. Because I’m working with a pretty big screen here. 2880x1620 (macOS, Firefox and Chromium)
It would be more ergonomic if the Close button is on the top right of the gray area, the actual popup, and not in the corner of the screen. But that’s just as a polite suggestion.

By the way, in the other modes, table and list, the tasks are not opened as a popup but more like a normal page. And there is no Close button there.
Is that intentional, that there is no popup here?

Here is an example of the same task:

List view:

Kanban (full screen):

Yes, that’s intentional. These pages behave like a normal page which you’re probably used to from other sites and applications (since they are not popups). The usual browser back button should work here.

Thanks a lot for your effort!
For me, this works very well already.
But as I said, if e.g. the esc key would work in all view modes to close the task detail view quickly, that would speed up the handling even more. And it is also a familiar functionality that you know from other applications, so I would welcome that.
Thanks again for your great work.

Adding escape as a shortcut would be relatively easy. Do you want to send a PR?

I’m afraid I myself lack the coding skills to implement this and create a PR. :frowning:
But I can offer a coffee, as motivation :wink:

1 Like

@WolfgangDpunkt Note that there usually also is a shortcut for going back in browser history.

I wouldn’t add add this for normal views. For modals we already have this. With finished implementation of feat: route modals everywhere #2735 we also have the ability to show tasks in a sidebar in all views (use can decide to open in sidebar / modal / full view).

So Esc only makes sense for modal view (where it is already is possible) or sidebar views (missing).

Thank you for your explanation.
For me as a new user it was not quite intuitive that after you have edited or created a task entry, you do not confirm this editing with OK or CLOSE, but you should use the “going back” command of the browser. Here, as a user, I always suspect data loss, i.e. that my changes are not saved, even if an autosave takes place, one is intuitively accustomed to completing the entries with a confirming action. I think that’s just habit because very often input dialogues are designed in that way.
For me personally, I have built a quick and dirty solution that adds a corresponding button by using a customized css and thus this brief moment of irritation is eliminated for me in the editing process. :slight_smile:

By the way, actually I almost only use the Kanban view in Vikunja now, there it is very well solved.

1 Like

Here, as a user, I always suspect data loss, i.e. that my changes are not saved, even if an autosave takes place, one is intuitively accustomed to completing the entries with a confirming action. I think that’s just habit because very often input dialogues are designed in that way.

Very valid point! We’ll improve the task detail page iteratively and hopefully will remove those fears by making the ux clearer over time.

We track this issue of the hidden close button in #3252 - task card: "close" button is covered by "title" input - frontend - Gitea