Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Apply theme-v2 to message input #283 #297

Merged
merged 1 commit into from
May 31, 2022

Conversation

szuperaz
Copy link
Contributor

@szuperaz szuperaz commented May 27, 2022

In this PR:

  • Enabled-disabled mode
  • File upload
  • Slow mode
  • File upload previews

Coming up in the next PR:

  • Emojis
  • Quoted message
  • Autocomplete

This issue took way longer than expected, I feel we are a bit behind schedule so I offloaded some potential enhancements into a separate issue: GetStream/stream-chat-css#106 - hopefully we'll be able to get back to this

Message input

Figma
message-input-empty-figma
message-input-dark-empty-figma

message input light figma attachments

message input figma dark attachments

Implementation
message input light

message input dark attachments

message input dark

Note: The instant command icon is part of the enhancement issue: GetStream/stream-chat-css#106

Message input - message sending disabled

Figma
Screenshot 2022-05-27 at 13 13 14

Screenshot 2022-05-27 at 13 13 21

Implementation
Screenshot 2022-05-27 at 13 21 19
Screenshot 2022-05-27 at 13 21 41

Message input - slow mode

Figma

Screenshot 2022-05-27 at 13 24 59
Screenshot 2022-05-27 at 13 25 07

Implementation

Screenshot 2022-05-27 at 13 26 01

Screenshot 2022-05-27 at 13 26 17

Note: Users can compose their messages during slow mode (based on Figma)

Message input - multiline text

Figma
Screenshot 2022-05-27 at 13 12 52

Implementation
multiline message input

Note: Message input can expand to half of the channel height (based on my experience chat apps allow textareas to expand a lot), the scrolling could be improved: #296

Multiline text is only available in theme-v2, not in theme-v1: https://github.com/GetStream/stream-chat-angular/pull/297/files#diff-19513186105b0f2288b61d8bb68c5e71e0a51b4bfca3e6965e874bb8ebbc00d0L212

Attachment previews

Figma

Screenshot 2022-05-27 at 12 46 22

Screenshot 2022-05-27 at 12 46 16

Implementation

attachment long name

attachment dark error

attachments loading light

attachments error dark

Screenshot 2022-05-30 at 14 13 18

Screenshot 2022-05-30 at 14 14 49

Note: Instead of the error icon we show the retry icon, we don't display the file size - these are all part of the UX improvement issue GetStream/stream-chat-css#106, Angular doesn't display different icons for different mime types, improvement issue here: #78

Theme v1 changes

Users can type during slow mode:
slow-mode-theme-v1

This is a small change, but icons are replaced with material icons:
attachments-theme-v1

@@ -20,7 +26,7 @@
</defs>
<path
d="M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z"
fill="url(#a)"
[attr.fill]="'url(#' + linearGradientId + ')'"
Copy link
Contributor Author

@szuperaz szuperaz May 27, 2022

Choose a reason for hiding this comment

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

Linear gradient needs to have a unique ID through the page otherwise the loading indicator doesn't displayed properly - this is not a new issue, I just wasn't able to find the cause before, I assume this is a problem in React as well

@szuperaz szuperaz force-pushed the message-input-theme-v2 branch from 1791e05 to d321798 Compare May 27, 2022 12:31
@szuperaz szuperaz merged commit c9611b1 into theming-v2 May 31, 2022
@szuperaz szuperaz deleted the message-input-theme-v2 branch May 31, 2022 07:16
@szuperaz
Copy link
Contributor Author

🎉 This PR is included in version 4.0.0-theming-v2.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@szuperaz
Copy link
Contributor Author

🎉 This PR is included in version 4.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants