Assign Users UI/UX Improvements

joshuajames-smith commented 3 years ago

Is your feature request related to a problem? Please describe

There is no current way to to edit the name of the project once its created. You can invite users but there is no way to view these users once assigned or remove a user from a project [issue #74].

Describe the solution you'd like

TABLE UI CHANGES & VIEW ASSIGNED USERS

The PROJECTS table will now require a table header to help the user understand each column. Therefore the space for 'create new project' has been used. I tried a few placements and ended up with the plus icon with description tooltip in the top-right... but is this clear enough? To access the three icons ['edit project' and 'navigate to CURATE or AUDIT'] the user hovers on the row within the table. This is documented within the NAVIGATION update.

Two options for visualising the assigned users within the table itself [can also view in the 'edit project' dialogue]:

Project Assignees > Avatar Visualisation [hover on avatar shows popover with full name and hover on +? avatar show popover with list of names / click on any and opens list of users [edit project dialogue - pencil icon]]

MANAGE v1 - progress – 1

Project Assignees > Text Visualisation [click on any and opens list of user [edit project dialogue - pencil icon]]

MANAGE v2 - progress – 2

The dropdown list/search component works well and has been adopted in MANAGE but also the assignment system UI/UX in the proposed ANNOTATE and CURATE updates.

CREATE NEW PROJECT Text field is now a container rather than a line. Divided by a line between that the dropdown list of users. The create button to confirm the creation of the new project - the cross or clicking away allows the user to cancel this action.

MANAGE - assign – 1

EDIT EXISTING PROJECT Text field allows the user to click and change the project name. They can remove a user from the project by clicking on the cross in the name container but this also allows them to overview the assignees without needing to open the dropdown.

MANAGE - assign – 2

Within the dropdown menu, the currently assigned users are demonstrated with a tick. If the user clicks again, this unassigns that user from this project. A grey bar behind the text should be active for the hover state on each label/row.

MANAGE - assign – 3

The text field allows the user to search by typing for easier finding of the desired user.

MANAGE - assign – 4

Describe alternatives you've considered

N/A

Additional context

An ANNOTATE and CURATE issue will be also created to update the UI/UX of this system.

cooper667 commented 3 years ago

can the chips be black rather than the green on white?

joshuajames-smith commented 3 years ago

can the chips be black rather than the green on white?

Yes actually! I forgot to add to this issue, but I mention it within the CURATE and ANNOTATE issue - I did have black as an alternative and think that is probably the way forward.

MANAGE - assign – 6

joshuajames-smith commented 2 years ago

🚧 Work in Progress: To-do List 🚧

See https://github.com/gliff-ai/manage/pull/245#issuecomment-1016557163 for original update.

[ ] The dialogue could be wider to support long names and email addresses better?
[ ] The design has a another text field above the user assign to edit the project name separated by a grey line (edge-to-edge). Is this for another PR altogether?
[ ] User Emails should be replaced with User First and Last Names for a better visual and UX – the dropdown menu will contain both for clarity.
[ ] The dropdown menu containing List of Users stays highlighted as grey when selected – the UX pattern across other UI work uses the grey bar as the hover state for the mouse and doesn't stay active.
[ ] The User Input (text field) should act as a search box with the ability for users to type in, with the drop menu only offering a list of users which met the input, i.e. input: jos dropdownmenu: Josh Smith.
[ ] Look into how to speed up or avoid needing to fetch data to update users. If a team owner clicks to add a user to the project, their name should ideally appear instantly in the black boxes. This could be superficial while the platform has a slower backend to make the assignment happen?
[ ] [depends on ^] The 'update' button would then need to be moved to bottom-right and renamed 'confirm' (grey when no changes made, grey when changes made to prompt user to confirm changes)
[ ] The MANAGE: Projects board view has a top row with describes the column contents. Could this have some more padding above and below the text?

gliff-ai / manage