Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix AliasSettings and RelatedGroups UX #2679

Merged
merged 12 commits into from
Feb 22, 2019

Conversation

turt2live
Copy link
Member

@turt2live turt2live commented Feb 22, 2019

Fixes element-hq/element-web#8803
Fixes element-hq/element-web#8740
Fixes element-hq/element-web#8640
Fixes element-hq/element-web#8783 (by removing it)
Fixes element-hq/element-web#8591
Fixes element-hq/element-web#8101 (by not allowing editing)
Fixes element-hq/element-web#6341 (by using a different component for inputs)
Fixes element-hq/element-web#5634

This mirrors a UX similar to 3pids in order to better make use of the <Field> component. Inline editing was removed because it makes things a little too complicated for direct manipulation, and the UX is undefined for inline save buttons. Instead, a flow for delete + add is provided which is much easier to support for direct manipulation and to represent.

In addition to all of the above, the affected components have been converted to classes (sorry) because it's something we want to do anyways and the bulk of the component is being modified here anyways. It also magically fixes some this context errors that were encountered when using the older createClass approach (despite trying fat arrows).

Below is a preview of the UX. If you look carefully behind the dialog, you'll see things moving in the timeline and in the room name.

newgroups mp4

@turt2live turt2live marked this pull request as ready for review February 22, 2019 01:18
@turt2live turt2live requested a review from a team February 22, 2019 01:18
@jryans jryans self-assigned this Feb 22, 2019
Copy link
Collaborator

@jryans jryans left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Seems much better than the current version. 😁

.mx_EditableItemList_newItem .mx_Field input {
// Use 100% of the space available for the input, but don't let the 10px
// padding on either side of the input to push it out of alignment.
width: calc(100% - 20px);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe box-sizing instead?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Nope - tried border-box, padding-box, and content-box and all 3 have very similar results.

@luixxiul luixxiul mentioned this pull request May 1, 2023
3 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.