feat: Implement typing indicator theme-v2 #95 #130
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| @use '../utils'; | ||
|
|
||
| .str-chat__typing-indicator { | ||
| padding: var(--str-chat__spacing-1_5); | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| column-gap: var(--str-chat__spacing-1); | ||
| position: absolute; | ||
| inset-block-end: 0; | ||
| inset-inline-start: 0; | ||
| inset-inline-end: 0; | ||
|
|
||
| .str-chat__typing-indicator__dots { | ||
| @include utils.flex-row-center; | ||
| column-gap: var(--str-chat__spacing-0_5); | ||
|
|
||
| .str-chat__typing-indicator__dot { | ||
| width: calc(var(--str-chat__spacing-px) * 4); | ||
| height: calc(var(--str-chat__spacing-px) * 4); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,52 @@ | ||||||
| @use '../utils'; | ||||||
|
|
||||||
| .str-chat { | ||||||
| --str-chat__typing-indicator-font-family: var(--str-chat__font-family); | ||||||
| --str-chat__typing-indicator-border-radius: none; | ||||||
| --str-chat__typing-indicator-color: var(--str-chat__text-low-emphasis-color); | ||||||
| --str-chat__typing-indicator-background-color: var(--str-chat__overlay-color); | ||||||
| --str-chat__typing-indicator-border-block-start: none; | ||||||
| --str-chat__typing-indicator-border-block-end: none; | ||||||
| --str-chat__typing-indicator-border-inline-start: none; | ||||||
| --str-chat__typing-indicator-border-inline-end: none; | ||||||
| --str-chat__typing-indicator-box-shadow: none; | ||||||
| --str-chat__typing-indicator-dot-background-color: var(--str-chat__text-color); | ||||||
|
There was a problem hiding this comment.
Suggested change
Nitpick: I'm not sure how closely BEM is followed across other files but, I think There was a problem hiding this comment. In theme-v2 for CSS variables we use camel-case after the There was a problem hiding this comment. I think BEM is just for class names, but I'm happy to be corrected. Let's stick to snake-case for CSS variables. There was a problem hiding this comment. Unfortunately, our CSS class names are not 100% consistent, it's mostly BEM, but there are exceptions, the only consistent part is the There was a problem hiding this comment. #135 created an issue to create some lint rules to check class and variable names |
||||||
| } | ||||||
|
|
||||||
| .str-chat__typing-indicator { | ||||||
| @include utils.component-layer-overrides('typing-indicator'); | ||||||
|
|
||||||
| .str-chat__typing-indicator__dots { | ||||||
| .str-chat__typing-indicator__dot { | ||||||
| border-radius: 999px; | ||||||
| animation: dotFlashing 1s infinite alternate; | ||||||
| background-color: var(--str-chat__typing-indicator-dot-background-color); | ||||||
|
|
||||||
| &:nth-child(1) { | ||||||
| animation-delay: 0s; | ||||||
| } | ||||||
|
|
||||||
| &:nth-child(2) { | ||||||
| animation-delay: 0.5s; | ||||||
| } | ||||||
|
|
||||||
| &:nth-child(3) { | ||||||
| animation-delay: 1s; | ||||||
| } | ||||||
|
|
||||||
| @keyframes dotFlashing { | ||||||
| 0% { | ||||||
| opacity: 1; | ||||||
| } | ||||||
|
|
||||||
| 50% { | ||||||
| opacity: 0.6; | ||||||
| } | ||||||
|
|
||||||
| 100% { | ||||||
| opacity: 0.2; | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, that is a copy-paste mistake copied a lot of times 😀, will take care of this everywhere
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will fix this after the ongoing PRs merged into theming-v2