feat: Message input - theme-v2 #93

GetStream · May 27, 2022 · d7b16c2 · d7b16c2
1 parent b21d1f3
commit d7b16c2
Show file tree

Hide file tree

Showing 13 changed files with 569 additions and 26 deletions.
diff --git a/docs/theming/component-variables.mdx b/docs/theming/component-variables.mdx
diff --git a/src/v1/MessageInputFlat.scss b/src/v1/MessageInputFlat.scss
@@ -139,13 +139,6 @@
     background: var(--white);
   }
 
-  .str-chat-angular__cooldown {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 25px;
-  }
-
   &-emojiselect {
     position: absolute;
     top: calc(100% - 45px);
@@ -173,8 +166,23 @@
   }
 
   &-cooldown {
-    font-size: var(--xl-font);
-    font-weight: var(--font-weight-bold);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-left: var(--xs-p);
+
+    .str-chat__message-input-cooldown-text {
+      font-size: var(--xl-font);
+      font-weight: var(--font-weight-bold);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 50px;
+      height: 50px;
+      background-color: var(--grey);
+      color: var(--white);
+      border-radius: var(--border-radius-round);
+    }
   }
 
   &--textarea-wrapper {
@@ -254,6 +262,10 @@
           opacity: 0.9;
           height: 25px;
           width: 25px;
+
+          path {
+            fill: var(--white-snow);
+          }
         }
       }
     }

diff --git a/src/v1/SendButton.scss b/src/v1/SendButton.scss
@@ -11,4 +11,10 @@
   @media screen and (min-width: 768px) {
     display: none;
   }
+
+  .str-chat__send-button-angular {
+    svg path {
+      fill: var(--primary-color);
+    }
+  }
 }
diff --git a/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss b/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss
@@ -0,0 +1,100 @@
+@use '../utils';
+
+.str-chat__attachment-preview-list {
+  $preview-height: calc(var(--str-chat__spacing-px) * 72);
+
+  @include utils.flex-row-center;
+  padding: var(--str-chat__spacing-1_5);
+  width: 100%;
+
+  .str-chat__attachment-list-scroll-container {
+    overflow-y: hidden;
+    overflow-x: auto;
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    column-gap: var(--str-chat__spacing-2);
+  }
+
+  @mixin overlay {
+    @include utils.flex-row-center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .str-chat__attachment-preview-image {
+    position: relative;
+    height: $preview-height;
+    width: $preview-height;
+
+    .str-chat__attachment-preview-image-loading {
+      @include overlay;
+    }
+
+    .str-chat__attachment-preview-thumbnail {
+      object-fit: cover;
+      height: $preview-height;
+      width: $preview-height;
+      word-break: break-all;
+      overflow: hidden;
+    }
+  }
+
+  .str-chat__attachment-preview-file {
+    @include utils.flex-row-center;
+    height: $preview-height;
+    width: calc(var(--str-chat__spacing-px) * 200);
+    position: relative;
+    padding: var(--str-chat__spacing-4);
+    column-gap: var(--str-chat__spacing-2);
+
+    .str-chat__attachment-preview-file-end {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      justify-content: center;
+      overflow-y: visible;
+      overflow-x: clip;
+
+      .str-chat__attachment-preview-file-name {
+        @include utils.ellipsis-text;
+        max-width: 100%;
+      }
+
+      .str-chat__attachment-preview-file-download {
+        line-height: calc(var(--str-chat__spacing-px) * 16);
+
+        svg {
+          width: calc(var(--str-chat__spacing-px) * 16);
+          height: calc(var(--str-chat__spacing-px) * 16);
+        }
+      }
+    }
+  }
+
+  .str-chat__attachment-preview-delete {
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+    cursor: pointer;
+    z-index: 1;
+
+    svg {
+      width: calc(var(--str-chat__spacing-px) * 24);
+      height: calc(var(--str-chat__spacing-px) * 24);
+    }
+  }
+
+  .str-chat__attachment-preview-error {
+    @include overlay;
+    cursor: pointer;
+  }
+}
+
+.str-chat__attachment-preview-list-angular-host {
+  width: 100%;
+  max-width: 100%;
+}
diff --git a/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss b/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss
@@ -0,0 +1,97 @@
+@use '../utils';
+
+.str-chat {
+  --str-chat__attachment-preview-list-font-family: var(--str-chat__font-family);
+  --str-chat__attachment-preview-list-border-radius: var(--str-chat__border-radius-md);
+  --str-chat__attachment-preview-list-color: var(--str-chat__text-color);
+  --str-chat__attachment-preview-list-background-color: transparent;
+  --str-chat__attachment-preview-list-border-block-start: none;
+  --str-chat__attachment-preview-list-border-block-end: none;
+  --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-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);
+
+  --str-chat__attachment-preview-image-font-family: var(--str-chat__font-family);
+  --str-chat__attachment-preview-image-border-radius: var(--str-chat__border-radius-sm);
+  --str-chat__attachment-preview-image-color: var(--str-chat__text-color);
+  --str-chat__attachment-preview-image-background-color: transparent;
+  --str-chat__attachment-preview-image-border-block-start: none;
+  --str-chat__attachment-preview-image-border-block-end: none;
+  --str-chat__attachment-preview-image-border-inline-start: none;
+  --str-chat__attachment-preview-image-border-inline-end: none;
+  --str-chat__attachment-preview-image-box-shadow: none;
+
+  --str-chat__attachment-preview-file-font-family: var(--str-chat__font-family);
+  --str-chat__attachment-preview-file-border-radius: var(--str-chat__border-radius-md);
+  --str-chat__attachment-preview-file-color: var(--str-chat__text-color);
+  --str-chat__attachment-preview-file-background-color: transparent;
+  --str-chat__attachment-preview-file-border-block-start: 1px solid var(--str-chat__surface-color);
+  --str-chat__attachment-preview-file-border-block-end: 1px solid var(--str-chat__surface-color);
+  --str-chat__attachment-preview-file-border-inline-start: 1px solid var(--str-chat__surface-color);
+  --str-chat__attachment-preview-file-border-inline-end: 1px solid var(--str-chat__surface-color);
+  --str-chat__attachment-preview-file-box-shadow: none;
+}
+
+.str-chat__attachment-preview-list {
+  @include utils.component-layer-overrides('attachment-preview-list');
+
+  .str-chat__attachment-preview-image {
+    @include utils.component-layer-overrides('attachment-preview-image');
+
+    .str-chat__attachment-preview-thumbnail,
+    .str-chat__attachment-preview-image-loading {
+      border-radius: var(--str-chat__attachment-preview-image-border-radius);
+      background-color: var(--str-chat__attachment-preview-overlay-color);
+    }
+  }
+
+  .str-chat__attachment-preview-file {
+    @include utils.component-layer-overrides('attachment-preview-file');
+
+    .str-chat__attachment-preview-file-name {
+      font-size: 1rem;
+      line-height: 1.25rem;
+      font-weight: 500;
+    }
+
+    .str-chat__attachment-preview-file-download {
+      svg path {
+        fill: var(--str-chat__attachment-preview-download-icon-color);
+      }
+    }
+  }
+
+  .str-chat__attachment-preview-delete {
+    svg {
+      path {
+        fill: var(--str-chat__attachment-preview-close-icon-color);
+      }
+
+      rect,
+      circle {
+        fill: var(--str-chat__attachment-preview-close-icon-background);
+      }
+    }
+  }
+
+  .str-chat__attachment-preview-error {
+    background-color: var(--str-chat__attachment-preview-overlay-color);
+
+    svg path {
+      fill: var(--str-chat__attachment-preview-retry-icon-color);
+    }
+
+    &.str-chat__attachment-preview-error-image {
+      border-radius: var(--str-chat__attachment-preview-image-border-radius);
+    }
+
+    &.str-chat__attachment-preview-error-file {
+      border-radius: var(--str-chat__attachment-preview-file-border-radius);
+    }
+  }
+}
diff --git a/src/v2/styles/Channel/Channel-layout.scss b/src/v2/styles/Channel/Channel-layout.scss
@@ -15,6 +15,7 @@
       display: flex;
       flex-direction: column;
       width: 100%;
+      min-width: 0;
     }
   }
 }

diff --git a/src/v2/styles/Channel/Channel-theme.scss b/src/v2/styles/Channel/Channel-theme.scss
@@ -62,7 +62,14 @@
     .str-chat__loading-channel-message-input,
     .str-chat__loading-channel-message-send {
       @include utils.loading-item-background('channel');
-      border-radius: var(--str-chat__border-radius-circle);
+    }
+
+    .str-chat__loading-channel-message-input {
+      border-radius: var(--str-chat__message-textarea-border-radius);
+    }
+
+    .str-chat__loading-channel-message-send {
+      border-radius: var(--str-chat__message-send-border-radius);
     }
   }
 }
diff --git a/src/v2/styles/MessageInput/MessageInput-layout.scss b/src/v2/styles/MessageInput/MessageInput-layout.scss
@@ -0,0 +1,87 @@
+@use '../utils';
+
+.str-chat__message-input {
+  $send-button-size: calc(var(--str-chat__spacing-px) * 40);
+
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  display: flex;
+  align-items: end;
+  justify-content: center;
+  padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
+
+  .str-chat__file-input-container {
+    @include utils.flex-row-center;
+    width: calc(var(--str-chat__spacing-px) * 40);
+    height: calc(var(--str-chat__spacing-px) * 40);
+    cursor: pointer;
+
+    .str-chat__file-input {
+      display: none;
+    }
+
+    .str-chat__file-input-label {
+      cursor: pointer;
+    }
+  }
+
+  .str-chat__message-textarea-container {
+    @include utils.flex-col-center;
+    width: 100%;
+    min-width: 0;
+    max-height: 100%;
+
+    .str-chat__message-textarea-with-emoji-picker {
+      width: 100%;
+      min-height: 0;
+      max-height: 100%;
+      display: flex;
+      padding: var(--str-chat__spacing-2) var(--str-chat__spacing-5);
+
+      .str-chat__message-textarea {
+        width: 100%;
+        display: flex;
+        max-height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+    }
+  }
+
+  .str-chat__message-textarea-angular-host {
+    @include utils.flex-row-center;
+    width: 100%;
+  }
+
+  .str-chat__send-button {
+    @include utils.flex-row-center;
+    cursor: pointer;
+    padding: 0;
+    width: $send-button-size;
+    height: $send-button-size;
+    min-width: $send-button-size;
+
+    svg {
+      width: calc(var(--str-chat__spacing-px) * 32);
+      height: calc(var(--str-chat__spacing-px) * 32);
+    }
+  }
+
+  .str-chat__message-input-cooldown {
+    @include utils.flex-row-center;
+    margin-inline-start: var(--str-chat__spacing-2);
+    margin-block: calc(var(--str-chat__spacing-2) / 2);
+    min-width: calc(#{$send-button-size} - var(--str-chat__spacing-2));
+    min-height: calc(#{$send-button-size} - var(--str-chat__spacing-2));
+  }
+
+  .str-chat__message-input-not-allowed {
+    align-self: center;
+    padding: var(--str-chat__spacing-3);
+  }
+}
+
+.str-chat__message-input-angular-host {
+  max-height: 50%;
+}