invoiceninja / ui

Invoice Ninja: Web admin portal built with React
https://app.invoicing.co
Other
53 stars 46 forks source link

v5 tasks list table and filters are not consistently responsive (not adapted to various window widths) and not as efficient, compared to v4's Time Tracker #1357

Open nekohayo opened 8 months ago

nekohayo commented 8 months ago

I'm a user of the paid SaaS version, and I waited as long as possible before doing the upgrade to v5 because I wanted to give you more time to polish things up, and to run into the least issues possible. However, as I upgraded now, I see that https://app.invoicing.co/#/tasks is a big usability & UX regression for me compared to the traditional https://app.invoiceninja.com/time_tracker?q=Ftime_tracker ...especially as I'm using it with a bookmark in a separate browser window (or as an Epiphany with Invoice Ninja set as a "web app"!) as a quick minimalist time tracking app while I'm working.

Speed/efficiency

The previous UI had a very simple workflow: you open the time tracker, you type a few characters to quick search the task (or client, or project) you want, select the task, click the big green "Resume" button, and "Stop" when you're done. This could be done in the blink of an eye, extremely important when you need to start a task on a dime when receiving a phone call or during a meeting. I really liked that big obvious single-click button in the top-right corner, though I guess I can learn to live with the need to go through a menu for a task to be "Started" or "Stopped", but it would be nice if this was a prime action rather than buried in a submenu.

Adapting to any window width

The old v4 time tracker, with its multiline rows, behaved fine and looked well balanced even at tiny window sizes, there was no way to "break" it:

invoice ninja time trackers - v4 - pix opti

v5's tasks list is really not consistently responsive, whether I test with Firefox or with Epiphany (I particularly like using Epiphany's app mode). Both the tasks table and its filters bar above it break in so many ways, it's really not a pleasant experience. Below are screenshots of how broken it looks at various widths.

First, the only minimum width where it is not broken: around 1500 px wide:

invoice ninja time tracker - v5 at 2023-11-27 17-31-43 - pix opti

Shrink a bit, and the buttons in the rightmost column get cut off:

invoice ninja time tracker - v5 at 2023-11-27 17-34-14 - pix opti

Shrink more, and those buttons become entirely off-screen, and the filters bar's widgets start breaking apart and becoming multiline:

invoice ninja time tracker - v5 at 2023-11-27 17-34-23 - pix opti

Now this is just getting silly:

invoice ninja time tracker - v5 at 2023-11-27 17-34-31 - pix opti

...and even with the main menu sidebar turned off, the table still can't display all its stuff!

invoice ninja time tracker - v5 at 2023-11-27 17-34-57 - pix opti

Could you please make it breakdown nicely at any width? And probably automatically toggle off the main menu sidebar when width is way too small to be practical showing table data anyway.

For starters, it would probably help if your table rows were multi-line to display the client and project name below the task name, like the v4 UI, and didn't display the state column twice (!), or a task number column (that's a new thing in v5 it seems? why don't my existing tasks not have a number, and why should I care to see the task's number in a table?)

turbo124 commented 8 months ago

Thank for the feedback, we'll look to improve this.

When working in small viewports / outside of invoice ninja, I think the the chrome extension would provide the better ui/ux

image