urbit / landscape

Product board for Landscape.
20 stars 6 forks source link

chat references: minor visual uniformity tweaks #759

Closed urcades closed 3 years ago

urcades commented 3 years ago

commit: urbit/urbit@6a38c01

I spent some time cataloguing the existing "node reference" interfaces across a variety of contexts, and have devised a more uniform formatting scheme for all of them, which should end up looking a lot better and more "regular" wherever they are placed.

Here's the general structure:

Structure

Notable changes include formal specification of spacing, radii, and a moniker for what I'm calling "Conditional Body Information", which includes elements added above or below the Reference Body to grant it more context.

The existing on-hover treatment should continue to be applied, with the exception that due to the removal of the "View Content" button, we should treat the entire reference as an interactive (clickable) element, which should summon forth the mickey mouse glove to indicate thusly.

Below follows each reference type with these new tweaks applied:

Unavailable References:

Unavailable References

Chat Row References:

Chat Row References

Collection References + Comment (Any) References:

Collection References - Comment Reference

Notebook References:

Notebook References

Posts/Group Feed References:

Posts References

Group References:

Group References

urcades commented 3 years ago

As noted in #737 (point 3), there's an awkward "pop-in" transition that occurs when references load into the chat feed. This is the current state of the load-in transition:

Ref load example:

https://user-images.githubusercontent.com/1195363/114484495-536fa900-9bd8-11eb-8dbe-1d9eaf1b8779.mp4

Note that the reference points to a group I am already subscribed to (it refers to the message above it). Due to this, it appears as though I have immediate access to the channel's name, bellows.

Given the dramatic sizing difference between the initial state and the fully loaded state, I'd like to add on to this issue a state for references that have yet to load in:

Screen Shot 2021-04-12 at 9 40 09 PM

The referant's avatar, name, and the body of the referenced content should be represented by 24px tall rectangles, colored washedGray

If possible, we should approximate the height of the content-to-be-loaded in. Obviously, we should also simply make the reference load very fast, but a proper loading state to reduce the shifting of the chat interface is a good idea.

urcades commented 3 years ago

As noted in #737 , we insert the username of a referenced individual directly after a reference is invoked. I'm in agreement with the reporter that we should omit the mention of the pilot, which is duplicitous given one is notified whenever they are referenced (or should be notified, whenever they are referenced).

Here's the as-is auto-insertion when reply is clicked (note insertion point):

Screen Shot 2021-04-12 at 10 03 17 PM

Here's the fix (again, note insertion point):

Screen Shot 2021-04-12 at 10 03 28 PM