Compose-box layout redesign #915

gnprice · 2024-08-23T02:49:04Z

From @terpimost we have a spiffy new design for the compose box:

Details are in Figma:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395&m=dev

This issue is for updating the compose box to match that design. That means:

the white background, the border from the message list, where applicable the separator between topic and content
the text styling for topic and for content
the styling of the send button and the compose buttons (attach file, take photo, etc.)
the height and scrolling behavior of the content input
other related details I'm overlooking at the moment

Out of scope:

the set of buttons that exist — adding buttons corresponds to new features, which will happen in their own issues
the "..." overflow button, scrolling, and fading for excess compose buttons — for now we have just three of them, not enough to make those come into effect
the autocomplete results — those are Redesign for @-mention autocomplete items #913 and Redesign for autocomplete result lists #914
editing a message — that's compose: Support editing an already-sent message #126
loading state and error feedback for message send — those are tracked in Await send request; handle failure #720

This also supports horizontal scrolling, to later support more compose box icons. But we leave those for later. Fixex: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

This also supports horizontal scrolling, to later add shadow when we have more compose box icons. Fixex: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

The shadow is always present, but the overlay is only visible when there is text under it. This only happens when the TextField is long enough to be scrollable. Fixex: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

The shadow is always present, but the overlay is only visible when there is text under it. This only happens when the TextField is long enough to be scrollable. See also: - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395 - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3862-14350 Fixes: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

`ClipRect`'s size is determined by the `ConstrainedBox`. This is mainly for showing the content through the `contentPadding` of the `TextField`, so that our `InsetShadowBox` can fade it smoothly there. The shadow is always there, but it is only visible when the `TextField` is long enough to be scrollable. See also: - zulip#928 (comment), which elaborates on the issue we intend to solve with the `ClipRect` setup. - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395 - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3862-14350 Fixes: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

The bottom underline implementation draws similarity to that of `Spoiler`'s. We could have used `UnderlineInputBorder` on `InputDecoration`, but that also comes with other input state styles that we do not need (e.g.: focused, disabled, etc.). Note that we use `withFadedAlpha` on `designVariables.textInput` because the color is already transparent in dark mode, and the helper allows us to multiply, instead of to override, the alpha channel of the color with a factor. `ClipRect`'s size is determined by the `ConstrainedBox`. This is mainly for showing the content through the `contentPadding` of the `TextField`, so that our `InsetShadowBox` can fade it smoothly there. The shadow is always there, but it is only visible when the `TextField` is long enough to be scrollable. See also: - zulip#928 (comment) - zulip#928 (comment), which elaborates on the issue we intend to solve with the `ClipRect` setup. - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395 - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3862-14350 Fixes: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

`ClipRect`'s size is determined by the `ConstrainedBox`. This is mainly for showing the content through the `contentPadding` of the `TextField`, so that our `InsetShadowBox` can fade it smoothly there. The shadow is always there, but it is only visible when the `TextField` is long enough to be scrollable. See also: - zulip#928 (comment), which elaborates on the issue we intend to solve with the `ClipRect` setup. - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395 - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3862-14350 Fixes: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

The bottom underline implementation draws similarity to that of `Spoiler`'s. We could have used `UnderlineInputBorder` on `InputDecoration`, but that also comes with other input state styles that we do not need (e.g.: focused, disabled, etc.). Note that we use `withFadedAlpha` on `designVariables.textInput` because the color is already transparent in dark mode, and the helper allows us to multiply, instead of to override, the alpha channel of the color with a factor. `ClipRect`'s size is determined by the `ConstrainedBox`. This is mainly for showing the content through the `contentPadding` of the `TextField`, so that our `InsetShadowBox` can fade it smoothly there. The shadow is always there, but it is only visible when the `TextField` is long enough to be scrollable. See also: - zulip#928 (comment) - zulip#928 (comment), which elaborates on the issue we intend to solve with the `ClipRect` setup. - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395 - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3862-14350 Fixes: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

`ClipRect`'s size is determined by the `ConstrainedBox`. This is mainly for showing the content through the `contentPadding` of the `TextField`, so that our `InsetShadowBox` can fade it smoothly there. The shadow is always there, but it is only visible when the `TextField` is long enough to be scrollable. See also: - zulip#928 (comment), which elaborates on the issue we intend to solve with the `ClipRect` setup. - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395 - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3862-14350 Fixes: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

The bottom underline implementation draws similarity to that of `Spoiler`'s. We could have used `UnderlineInputBorder` on `InputDecoration`, but that also comes with other input state styles that we do not need (e.g.: focused, disabled, etc.). Note that we use `withFadedAlpha` on `designVariables.textInput` because the color is already transparent in dark mode, and the helper allows us to multiply, instead of to override, the alpha channel of the color with a factor. `ClipRect`'s size is determined by the `ConstrainedBox`. This is mainly for showing the content through the `contentPadding` of the `TextField`, so that our `InsetShadowBox` can fade it smoothly there. The shadow is always there, but it is only visible when the `TextField` is long enough to be scrollable. See also: - zulip#928 (comment) - zulip#928 (comment), which elaborates on the issue we intend to solve with the `ClipRect` setup. - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395 - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3862-14350 Fixes: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

This disables the splash effect for all the compose buttons and the send button, and implements a rounded rectangular background that appears on hover/pressed. In the future we should migrate more buttons to use this style. See also: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3707-41711&node-type=frame&t=sSYomsJzGCt34D8N-0 Fixes: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

This disables the splash effect for all the compose buttons and the send button, and implements a rounded rectangular background that appears on hover/pressed. Different from the style that all the compose buttons share, this feedback also applies to the send button, and will apply to more buttons in the app. In the future we should migrate more buttons to use this style, so it doesn't belong to a shared base class. See also: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3707-41711&node-type=frame&t=sSYomsJzGCt34D8N-0 Fixes: zulip#915 Signed-off-by: Zixuan James Li <[email protected]>

gnprice added a-compose Compose box, autocomplete, attaching files/images a-design Visual and UX design labels Aug 23, 2024

gnprice added this to the Launch milestone Aug 23, 2024

github-project-automation bot added this to Flutter app Aug 23, 2024

This was referenced Aug 31, 2024

Await send request; handle failure #720

Open

compose_box: Wait for send message request to complete. #924

Closed

PIG208 self-assigned this Sep 3, 2024

PIG208 mentioned this issue Sep 6, 2024

Compose box redesign #928

Merged

gnprice closed this as completed in 94cf40e Nov 16, 2024

github-project-automation bot moved this to Done in Flutter app Nov 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compose-box layout redesign #915

Compose-box layout redesign #915

gnprice commented Aug 23, 2024 •

edited by chrisbobbe

Loading

Compose-box layout redesign #915

Compose-box layout redesign #915

Comments

gnprice commented Aug 23, 2024 • edited by chrisbobbe Loading

gnprice commented Aug 23, 2024 •

edited by chrisbobbe

Loading