Entity actions re-designed (table buttons)

[kevinpapst]

Description

Huge update on the UX of entity actions:

• move action buttons (icons) into a dropdown to be able to create further actions and to make it clearer what each button does
• clicking the table row opens the "edit entry" dialog directly
• open the customer/activity/project edit dialog in modal
• fixed day summary on small screens an duration_only mode
• using hidden-md on personal timesheet for improved responsibility on mid-sized screens

TODO

• using hidden-md on admin timesheet for improved responsibility on mid-sized screens

The screenshots demonstrate the changes and fixed problems:

Before (action buttons take up a lot of space or are not visible):

After (dropdown and hidden-md columns):

Types of changes

• New feature (non-breaking change which adds functionality)

Checklist

• I ran bin/console kimai:codestyle --fix to verify the correct code style
• I agree that this code is used in Kimai and will be published under the MIT license

[bjoerne2]

@kevinpapst Great that actions are now provided via menu and not with a growing set of icons!

In my opinion the main action could also be moved to the menu to use the power of a text labels. The fa-redo-alt icon of My times is really hard to guess. As a menu item it could say "Start recording new activity" which helps to understand the function. In other cases the main action is just one of the actions and for me it's not clear why it's that one, e.g. user statistics. A menu would move the actions to the same level of priority.

And I'd like to have to menu in the right column where the icons were before. That's more state-of-the-are, I would say. If there is no main action, the arrow could look a bit too tiny and another icon may look better e.g. burger menu icon as in the screenshot of #747.

I hope it's not too late for these comments. Very funny that I created #747 a day after this issue. I've not seen it when searching for existing issues.

[kevinpapst]

Every contribution (feedback is one as well) is welcome at any point. The result will just get better when more people are involved! That doesn't mean I will change everything that was suggested ;-) but please share all your thoughts. I am very happy to receive help.

Two choices: the split button as currently used in the PR or a dropdown without default action.

Yes, I want to get rid of these icons as well, they are not always clear to understand (that's why I am against the burger icon as well). And as clicking the table row is now linked to the edit functionality, one could argue that there is already a globals default action.
Result: icons are problematic to understand, lets use wording completely and not a burger icon
Moving forward: Replace the split button with a dropdown. I am currently working on that last one for demonstration. Any proposal for the wording ("Actions" or "More")?

The reason for moving the buttons to the left side (which I don't like as well, as it is counter-intuitive) was the screen-size problem on the most used screen: the timesheet (shown above in the screenshots, there are screen sizes that are problematic). I am not happy with the result as well and will move them back.

[kevinpapst]

@bjoerne2 wanna test the latest commit?

[bjoerne2]

@kevinpapst Great!! I like it!

One little thing. In languages with longer text length (like French) the space for the menu items could be too small. Can you right align the menu area? Just add dropdown-menu-right to the ul with dropdown-menu class.

[kevinpapst]

Awesome suggestion!
I already wondered how I might get that dropdown pushed away from the edge of the screen ... should have looked into the bootstrap docu right away ;-)

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. If you use Kimai on a daily basis, please consider donating to support further development of Kimai.