Skip to content

Commit

Permalink
fix: Design fixes and enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
@szuperaz
szuperaz committed Jul 5, 2022
1 parent 3c8a143 commit 4fc7d25
Show file tree
Hide file tree
Showing 25 changed files with 175 additions and 102 deletions.
45 changes: 23 additions & 22 deletions docs/theming/theme-variables.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,28 +21,29 @@ You can read about each category in detail in the tables below.

## Colors

| Name | Description | Where is it used? |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
| `--str-chat__primary-color` | Used for emphasis, brands can inject their main color using this variable | Links, buttons, avatar fallback background, etc. |
| `--str-chat__on-primary-color` | If the primary color is used as a background, text/icons are displayed in this color | Button color, text on avatar fallback, etc. |
| `--str-chat__active-primary-color` | Used to indicate that a UI element with primary color is in an active state | Pressed buttons |
| `--str-chat__primary-color-low-emphasis` | Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color | Selected message reaction background color |
| `--str-chat__background-color` | Used as a background color for the main chat UI components | Channel background, message list background, message input background |
| `--str-chat__secondary-background-color` | Used as a background color for the main chat UI components | Channel list background, tooltip background, etc. |
| `--str-chat__primary-surface-color` | Used as a background color to give emphasis, but less vibrant than the primary color | Background of messages sent by the current user |
| `--str-chat__surface-color` | A neutral color used to give emphasis to different surfaces | Selected channel preview background, borders |
| `--str-chat__secondary-surface-color` | A neutral color used to give emphasis to different surfaces | Background of received messages etc. |
| `--str-chat__tertiary-surface-color` | A neutral color used to give emphasis to different surfaces | Hover background of message options |
| `--str-chat__text-color` | The main color used for texts/icons | Messages, channel header, channel title in the channel preview, etc. |
| `--str-chat__text-low-emphasis-color` | Used for texts/icons that need less emphasis | The latest message in the channel preview, deleted message text, default icon state, etc. |
| `--str-chat__disabled-color` | Used for displaying disabled UI elements (typically buttons) | Disabled send button etc. |
| `--str-chat__on-disabled-color` | Used for text/icon colors if disabled color is used as a background color | Text on disabled send button etc. |
| `--str-chat__unread-badge-color` | Used for displaying the unread badge | Background of the unread badge |
| `--str-chat__on-unread-badge-color` | Used for text/icon colors if unread badge color is used as a background color | Text on the unread badge |
| `--str-chat__danger-color` | Used for error messages, and destructive actions | Delete action label etc. |
| `--str-chat__overlay-color` | The background color used for overlays | Modal overlay color, attachment preview overlay |
| `--str-chat__secondary-overlay-color` | The background color used for subtle overlays | Image gallery, modal overlay color |
| `--str-chat__secondary-overlay-text-color` | The text/icon color used on subtle overlays | Image gallery |
| Name | Description | Where is it used? |
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
| `--str-chat__primary-color` | Used for emphasis, brands can inject their main color using this variable | Links, buttons, avatar fallback background, etc. |
| `--str-chat__on-primary-color` | If the primary color is used as a background, text/icons are displayed in this color | Button color, text on avatar fallback, etc. |
| `--str-chat__active-primary-color` | Used to indicate that a UI element with primary color is in an active state | Pressed buttons |
| `--str-chat__primary-color-low-emphasis` | Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color | Selected message reaction background color |
| `--str-chat__background-color` | Used as a background color for the main chat UI components | Channel background, message list background, message input background |
| `--str-chat__secondary-background-color` | Used as a background color for the main chat UI components | Channel list background, tooltip background, etc. |
| `--str-chat__primary-surface-color` | Used as a background color to give emphasis, but less vibrant than the primary color. | Background of messages sent by the current user |
| `--str-chat__primary-surface-color-low-emphasis` | Used as a background color to give emphasis, but less emphasis than primary surface color. | Background of reactions sent by the current user |
| `--str-chat__surface-color` | A neutral color used to give emphasis to different surfaces | Selected channel preview background, borders |
| `--str-chat__secondary-surface-color` | A neutral color used to give emphasis to different surfaces | Background of received messages etc. |
| `--str-chat__tertiary-surface-color` | A neutral color used to give emphasis to different surfaces | Hover background of message options |
| `--str-chat__text-color` | The main color used for texts/icons | Messages, channel header, channel title in the channel preview, etc. |
| `--str-chat__text-low-emphasis-color` | Used for texts/icons that need less emphasis | The latest message in the channel preview, deleted message text, default icon state, etc. |
| `--str-chat__disabled-color` | Used for displaying disabled UI elements (typically buttons) | Disabled send button etc. |
| `--str-chat__on-disabled-color` | Used for text/icon colors if disabled color is used as a background color | Text on disabled send button etc. |
| `--str-chat__unread-badge-color` | Used for displaying the unread badge | Background of the unread badge |
| `--str-chat__on-unread-badge-color` | Used for text/icon colors if unread badge color is used as a background color | Text on the unread badge |
| `--str-chat__danger-color` | Used for error messages, and destructive actions | Delete action label etc. |
| `--str-chat__overlay-color` | The background color used for overlays | Modal overlay color, attachment preview overlay |
| `--str-chat__secondary-overlay-color` | The background color used for subtle overlays | Image gallery, modal overlay color |
| `--str-chat__secondary-overlay-text-color` | The text/icon color used on subtle overlays | Image gallery |

## Spacing and sizing

Expand Down
14 changes: 12 additions & 2 deletions src/v1/Attachment.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,27 +99,37 @@
align-items: flex-start;
justify-content: center;
row-gap: 2px;
width: 100%;
min-width: 0;

.str-chat__message-attachment-file--item-first-row {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 8px;
width: 100%;

.str-chat__message-attachment-file--item-name {
font-weight: var(--font-weight-bold);
color: var(--black);

white-space: nowrap;
overflow: hidden;
overflow-y: visible;
// Not every browser support clip overflow, so hidden is defined as a fallback
overflow-x: hidden;
overflow-x: clip;
text-overflow: ellipsis;
width: 100%;
min-width: 0;
}

.str-chat__message-attachment-download-icon {
svg {
width: 24px;
height: 16px;

path {
fill: var(--black);
}
}
}
}
Expand Down
19 changes: 0 additions & 19 deletions src/v1/Gallery.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,25 +37,6 @@
}
}

.stream-chat-angular__image-modal {
display: flex;
justify-content: center;
align-items: center;

&-stepper {
padding: 10px;
border: none;
cursor: pointer;
background: transparent;
}

&-image {
object-fit: cover;
max-width: 90%;
max-height: 90%;
}
}

.livestream.str-chat,
.messaging.str-chat,
.commerce.str-chat,
Expand Down
39 changes: 39 additions & 0 deletions src/v1/ImageCarousel.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.str-chat__message {
.str-chat__attachment-list-angular-host {
.str-chat__modal--open {
.str-chat__modal__inner {
height: 80%;
width: 80%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
}
}

.str-chat__image-carousel {
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
min-width: 0;
max-width: 100%;
max-height: 100%;

.str-chat__image-carousel-stepper {
padding: 8px;
border: none;
cursor: pointer;
background: transparent;
}

.str-chat__image-carousel-image {
object-fit: cover;
min-height: 0;
max-height: 100%;
min-width: 0;
max-width: 100%;
}
}
2 changes: 2 additions & 0 deletions src/v1/Modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
}

&__inner {
max-width: 100%;
background: var(--white);
padding: var(--md-p);
border-radius: var(--border-radius-md);
Expand Down Expand Up @@ -47,6 +48,7 @@
}

.str-chat__edit-message-form {
max-width: 100%;
width: var(--modal-edit-message-form-width);
}

Expand Down
1 change: 0 additions & 1 deletion src/v1/SmallMessageInput.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
margin: var(--xs-m);
padding: var(--xs-m);
position: relative;
z-index: 1000;

.rfu-file-previewer {
flex: 1 1 100%;
Expand Down
8 changes: 7 additions & 1 deletion src/v1/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,8 +222,14 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
}
}

// Only in theme-v2
.str-chat__empty-channel {
display: none;
}

// Fixes icon sizing problem in Angular SDK
stream-icon {
stream-icon,
stream-icon-placeholder {
display: flex;
justify-content: center;
align-items: center;
Expand Down
1 change: 1 addition & 0 deletions src/v1/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
@import './DateSeparator.scss';
@import './EditMessageForm.scss';
@import './Gallery.scss';
@import './ImageCarousel.scss';
@import './LoadingChannels.scss';
@import './LoadingIndicator.scss';
@import './LoadMoreButton.scss';
Expand Down
24 changes: 15 additions & 9 deletions src/v2/styles/AttachmentList/AttachmentList-layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
min-width: 0;

.str-chat__message-attachment--card {
max-width: calc(var(--message-with-attachments-max-width) - var(--str-chat__attachment-margin));
max-width: calc(var(--message-max-width) - var(--str-chat__attachment-margin));
}

.str-chat__message-attachment--image,
Expand All @@ -22,10 +22,8 @@

img,
video {
max-width: calc(
var(--message-with-attachments-max-width) - 2 * var(--str-chat__attachment-margin)
);
max-height: var(--message-with-attachments-max-width);
max-width: calc(var(--message-max-width) - 2 * var(--str-chat__attachment-margin));
max-height: var(--message-max-width);
object-fit: cover;
width: 100%;
height: 100%;
Expand All @@ -34,6 +32,10 @@

.str-chat__message-attachment--image {
margin: var(--str-chat__attachment-margin);

img {
cursor: zoom-in;
}
}

.str-chat__message-attachment--video {
Expand All @@ -49,23 +51,24 @@
grid-template-columns: 50% 50%;
overflow: hidden;
gap: var(--str-chat__spacing-0_5);
max-width: var(--message-with-attachments-max-width);
max-height: var(--message-with-attachments-max-width);
max-width: var(--message-max-width);
max-height: var(--message-max-width);
margin: var(--str-chat__attachment-margin);

&.str-chat__gallery-two-rows {
grid-template-rows: 50% 50%;
aspect-ratio: 1;
}

.str-chat__gallery-image {
cursor: zoom-in;
padding: 0;
margin: 0;

img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: zoom-in;
}
}

Expand All @@ -77,6 +80,7 @@
background-size: cover;
background-position: top left;
background-repeat: no-repeat;
margin: 0;
cursor: zoom-in;

p {
Expand Down Expand Up @@ -120,6 +124,7 @@

.str-chat__message-attachment-file--item-name {
@include utils.ellipsis-text;
min-width: 0;
}

.str-chat__message-attachment-download-icon {
Expand Down Expand Up @@ -167,7 +172,8 @@
}

.str-chat__quoted-message-preview {
--str-chat__attachment-margin: 0;
/* stylelint-disable-next-line length-zero-no-unit */
--str-chat__attachment-margin: 0px;

.str-chat__message-attachment-card {
.str-chat__message-attachment-card--content {
Expand Down
4 changes: 2 additions & 2 deletions src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@

.str-chat__attachment-preview-delete {
position: absolute;
top: 0;
inset-inline-end: 0;
top: calc(var(--str-chat__spacing-px) * 2);
inset-inline-end: calc(var(--str-chat__spacing-px) * 2);
cursor: pointer;
z-index: 1;

Expand Down
12 changes: 5 additions & 7 deletions src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
--str-chat__attachment-preview-list-border-inline-start: none;
--str-chat__attachment-preview-list-border-inline-end: none;
--str-chat__attachment-preview-list-box-shadow: none;
--str-chat__attachment-preview-close-icon-background: var(--str-chat__text-low-emphasis-color);
--str-chat__attachment-preview-close-icon-color: var(--str-chat__on-disabled-color);
--str-chat__attachment-preview-close-icon-background: var(--str-chat__secondary-overlay);
--str-chat__attachment-preview-close-icon-color: var(--str-chat__secondary-overlay-text-color);
--str-chat__attachment-preview-retry-icon-color: var(--str-chat__primary-color);
--str-chat__attachment-preview-download-icon-color: var(--str-chat__text-low-emphasis-color);
--str-chat__attachment-preview-overlay-color: var(--str-chat__overlay-color);
Expand Down Expand Up @@ -68,14 +68,12 @@

.str-chat__attachment-preview-delete {
svg {
background-color: var(--str-chat__attachment-preview-close-icon-background);
border-radius: 999px;

path {
fill: var(--str-chat__attachment-preview-close-icon-color);
}

rect,
circle {
fill: var(--str-chat__attachment-preview-close-icon-background);
}
}
}

Expand Down
2 changes: 2 additions & 0 deletions src/v2/styles/ChannelPreview/ChannelPreview-layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@

.str-chat__channel-preview-end-first-row {
display: flex;
column-gap: var(--str-chat__spacing-1);
align-items: center;
height: var(
--channel-name-height,
Expand All @@ -56,6 +57,7 @@
.str-chat__channel-preview-messenger--name,
.str-chat__channel-preview-messenger--last-message {
@include utils.ellipsis-text;
min-width: 0;

p {
@include utils.ellipsis-text;
Expand Down
Loading

0 comments on commit 4fc7d25

Please sign in to comment.