stream-chat-angular 2.20.2 → 3.0.0-beta.10

package/src/assets/styles/scss/Thread.scss

@@ -0,0 +1,306 @@
+.str-chat__thread {
+  background: var(--grey-whisper);
+  flex: 1 0 300px;
+  min-width: 300px;
+  max-width: 300px;
+  overflow-y: hidden;
+  font-family: var(--second-font);
+  overflow: hidden;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-top: 0;
+
+  &--full {
+    max-width: 100%;
+  }
+
+  &-header {
+    position: relative;
+    width: 100%;
+    background: var(--grey-whisper);
+    box-shadow: 0 1px 1px 0 var(--border);
+    height: 70px;
+    min-height: 70px;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--sm-p);
+
+    &-details {
+      font-size: var(--md-font);
+
+      small {
+        display: block;
+        font-size: var(--sm-font);
+      }
+    }
+  }
+
+  &-start {
+    border-radius: var(--border-radius-sm);
+    margin: var(--xs-m) var(--xs-m) 0 var(--xs-m);
+    padding: var(--xs-p);
+    background: var(--grey-whisper);
+    text-align: center;
+    font-size: var(--sm-font);
+  }
+
+  &-list {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    padding-top: var(--sm-p);
+
+    .str-chat__list {
+      padding: 0;
+    }
+
+    .str-chat__message:first-of-type .str-chat__message-inner {
+      margin-left: unset;
+      margin-right: unset;
+    }
+
+    .str-chat__message-attachment.str-chat__message-attachment--file {
+      border-radius: var(--border-radius-md);
+      border-bottom: 1px solid var(--grey-whisper);
+    }
+
+    .quoted-message {
+      display: flex;
+      align-items: flex-end;
+      margin-bottom: var(--xxs-m);
+
+      &-inner {
+        display: flex;
+        text-align: start;
+        align-items: flex-end;
+        background: var(--grey-whisper);
+        border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
+        max-width: 408px;
+        padding: var(--xxs-p) var(--xs-p);
+
+        .str-chat__message-attachment.str-chat__message-attachment--file {
+          display: none;
+        }
+
+        .str-chat__message-attachment-card.str-chat__message-attachment-card--image {
+          border-radius: unset;
+        }
+
+        .str-chat__message-attachment.str-chat__message-attachment--card {
+          border: none;
+          border-radius: var(--border-radius-md);
+        }
+
+        .str-chat__message-attachment {
+          &--image:first-of-type {
+            max-height: 48px;
+            max-width: 48px;
+          }
+
+          img {
+            border-radius: var(--border-radius-md);
+          }
+        }
+
+        :nth-child(2) {
+          margin-left: var(--xs-m);
+        }
+      }
+    }
+
+    .quoted-message.mine {
+      .quoted-message-inner {
+        background: var(--white);
+      }
+    }
+  }
+}
+
+.messaging {
+  &.str-chat {
+    .str-chat {
+      &__thread {
+        margin-right: var(--xs-m);
+        margin-top: var(--sm-m);
+        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+        overflow: hidden;
+        background: var(--white);
+        max-height: 100%;
+        display: flex;
+        flex-direction: column;
+        padding-top: 0;
+
+        &.str-chat__thread--full {
+          position: fixed;
+          top: 0;
+          right: 0;
+          height: 100vh;
+          background: var(--white);
+          z-index: 1000;
+          margin: 0;
+          width: 100vw;
+          max-width: 100%;
+        }
+
+        .str-chat__gallery {
+          justify-content: flex-end;
+          border-radius: 0;
+
+          &-image,
+          &-placeholder {
+            width: 100px;
+            height: 100px;
+          }
+        }
+      }
+
+      &__thread-list {
+        padding: var(--sm-p) var(--sm-p) 0 var(--sm-p);
+
+        > .str-chat__list {
+          background: transparent;
+          padding: 0;
+
+          .str-chat__list--thread {
+            padding: 0;
+          }
+        }
+      }
+
+      &__thread-header {
+        border: none;
+        // box-shadow: none;
+        background: var(--white);
+        box-shadow: 0 2px 9px 0 var(--border), 0 1px 0 0 var(--border);
+
+        .str-chat__square-button {
+          cursor: pointer;
+        }
+      }
+
+      &__thread-start {
+        margin-top: var(--md-m);
+      }
+
+      @media screen and (max-width: 960px) {
+        &__thread {
+          position: fixed;
+          top: 0;
+          right: 0;
+          height: 100vh;
+          background: var(--white);
+          z-index: 1000;
+          margin: 0;
+          width: 100vw;
+          max-width: 100%;
+        }
+      }
+    }
+
+    &.dark {
+      .str-chat__thread {
+        background: var(--white5);
+
+        &-header {
+          background: var(--black80);
+          box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
+          color: var(--white);
+        }
+
+        &-start {
+          color: var(--white);
+        }
+      }
+
+      @media screen and (max-width: 960px) {
+        .str-chat__thread {
+          background: var(--dark-grey);
+        }
+      }
+    }
+  }
+}
+
+.team {
+  &.str-chat {
+    .str-chat {
+      &__thread {
+        background: var(--white);
+      }
+
+      @media screen and (max-width: 960px) {
+        &__thread {
+          position: fixed;
+          top: 0;
+          right: 0;
+          height: 100vh;
+          background: var(--white);
+          z-index: 1000;
+          margin: 0;
+          width: 100vw;
+          max-width: 100%;
+        }
+      }
+
+      &__thread-header {
+        height: 80px;
+      }
+    }
+
+    &.dark {
+      .str-chat__thread {
+        background: var(--dt-bg-team);
+      }
+    }
+  }
+}
+
+.livestream.str-chat,
+.str-chat {
+  .str-chat__thread {
+    background: transparent;
+
+    &--full {
+      position: fixed;
+      top: 0;
+      right: 0;
+      height: 100vh;
+      background: var(--white);
+      z-index: 1000;
+      margin: 0;
+      width: 100vw;
+      max-width: 100%;
+    }
+
+    &-header {
+      background: var(--white30);
+    }
+  }
+
+  .str-chat__list--thread {
+    padding: 0 var(--xs-p);
+  }
+
+  &.dark {
+    .str-chat__thread {
+      background: var(--dark-grey);
+
+      &-header {
+        background: var(--white5);
+        box-shadow: 0 1px 1px 0 var(--black30);
+        color: var(--white);
+      }
+
+      &-start {
+        background: var(--black5);
+        border-radius: var(--border-radius-sm);
+        color: var(--white);
+      }
+    }
+  }
+}

package/src/assets/styles/scss/Tooltip.scss

@@ -0,0 +1,38 @@
+.str-chat__tooltip {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 10px);
+  display: flex;
+  background: var(--black);
+  border-radius: var(--border-radius-sm);
+  padding: var(--xxs-p) var(--xs-p);
+  color: var(--white);
+  font-size: var(--xs-font);
+  max-width: 300px;
+
+  button {
+    outline: none;
+    outline: 0;
+    background: none;
+    color: var(--primary-color);
+    font-size: var(--xs-font);
+    font-family: var(--second-font);
+    border: none;
+  }
+
+  a {
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    right: 5px;
+    width: 5px;
+    height: 5px;
+    background: var(--black);
+    transform: rotate(45deg);
+  }
+}

package/src/assets/styles/scss/TypingIndicator.scss

@@ -0,0 +1,75 @@
+.str-chat__typing-indicator {
+  display: flex;
+  visibility: hidden;
+  align-items: center;
+
+  &--typing {
+    visibility: visible;
+  }
+
+  &__avatars {
+    display: flex;
+
+    .str-chat__avatar {
+      margin-right: calc(var(--xs-m) * -1);
+
+      &:last-of-type {
+        margin-right: var(--xs-m);
+      }
+    }
+  }
+
+  &__dots {
+    position: relative;
+    background: var(--white);
+    border: 1px solid var(--black10);
+    padding: var(--xxs-p) var(--xs-m);
+    border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 2px;
+  }
+
+  &__dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: var(--border-radius-round);
+    margin-right: var(--xxs-m);
+    background: var(--primary-color);
+    animation: wave 1.1s linear infinite;
+
+    &:nth-child(2) {
+      animation-delay: -0.9s;
+      opacity: 0.5;
+    }
+
+    &:nth-child(3) {
+      animation-delay: -0.8s;
+      opacity: 0.2;
+    }
+  }
+}
+
+.dark.str-chat {
+  .str-chat__typing-indicator {
+    &__avatars {
+      .str-chat__avatar {
+        border-color: var(--dark-grey);
+      }
+    }
+
+    &__dots {
+      background: var(--white5);
+    }
+  }
+}
+
+@keyframes wave {
+  0%,
+  60%,
+  100% {
+    transform: initial;
+  }
+
+  30% {
+    transform: translateY(-8px);
+  }
+}

package/src/assets/styles/scss/VirtualMessage.scss

@@ -0,0 +1,291 @@
+.str-chat__virtual-list {
+  // this resolves the issue with 1px tall messages (i.e. deleted messages)
+  font-size: 0;
+
+  .str-chat__virtual-list-message-wrapper {
+    padding: 1px var(--xl-p);
+    width: 100%;
+
+    .str-chat__message-simple {
+      padding-bottom: var(--sm-p);
+
+      &.str-chat__virtual-message__wrapper--first {
+        padding-bottom: 0;
+        padding-left: var(--xl-p);
+
+        .str-chat__avatar,
+        .str-chat__message-data.str-chat__message-simple-data {
+          display: none;
+        }
+
+        &.str-chat__message-simple--me {
+          padding-right: var(--xl-p);
+          padding-left: 0;
+
+          &.str-chat__virtual-message__wrapper--end {
+            padding-right: 0;
+          }
+        }
+
+        &.str-chat__virtual-message__wrapper--end {
+          padding-bottom: var(--xs-p);
+
+          .str-chat__message-data.str-chat__message-simple-data {
+            display: block;
+            position: relative;
+            width: 100%;
+          }
+        }
+      }
+
+      &.str-chat__virtual-message__wrapper--group {
+        align-items: center;
+        padding-bottom: 0;
+        padding-left: var(--xl-p);
+
+        &.str-chat__message-simple--me {
+          padding-right: var(--xl-p);
+          padding-left: 0;
+
+          &.str-chat__virtual-message__wrapper--end {
+            padding-right: 0;
+          }
+        }
+
+        .str-chat__message-data.str-chat__message-simple-data {
+          display: block;
+          position: relative;
+          width: 100%;
+        }
+      }
+
+      &.str-chat__virtual-message__wrapper--end {
+        padding-bottom: var(--xs-p);
+        padding-left: 0;
+
+        .str-chat__avatar,
+        .str-chat__message-data.str-chat__message-simple-data {
+          display: block;
+        }
+      }
+
+      .quoted-message {
+        display: flex;
+        align-items: flex-end;
+        margin-bottom: var(--xxs-m);
+
+        &-inner {
+          display: flex;
+          text-align: start;
+          align-items: flex-end;
+          background: var(--grey-whisper);
+          border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
+          max-width: 408px;
+          padding: var(--xxs-p) var(--xs-p);
+
+          .str-chat__message-attachment-card.str-chat__message-attachment-card--image {
+            border: none;
+            border-radius: var(--border-radius-md);
+          }
+
+          .str-chat__message-attachment {
+            &--image:first-of-type {
+              max-height: 48px;
+              max-width: 48px;
+              border-radius: var(--border-radius-md);
+            }
+
+            img {
+              border-radius: var(--border-radius-md);
+            }
+
+            &--file:first-of-type {
+              background: var(--white);
+              border-radius: var(--border-radius-md);
+              border-bottom: 1px solid var(--grey-whisper);
+              min-width: 33%;
+            }
+          }
+
+          :nth-child(2) {
+            margin-left: var(--xs-m);
+          }
+        }
+
+        &.mine {
+          .quoted-message-inner {
+            background: var(--white-snow);
+          }
+        }
+      }
+    }
+  }
+
+  .str-chat__message.str-chat__message--deleted {
+    align-items: initial;
+    margin: 0;
+  }
+
+  .str-chat__typing-indicator {
+    padding: 5px 40px; // important: div height should be big enough to fully contain the avatars
+  }
+}
+
+.giphy-preview-message {
+  background: var(--white-snow);
+  border-top: 2px solid var(--border);
+}
+
+.str-chat__virtual-message__wrapper {
+  display: flex;
+  padding: 10px 40px;
+  flex-direction: row;
+  position: relative;
+
+  &:hover {
+    background: ghostwhite;
+  }
+
+  > .str-chat__avatar {
+    margin: 0;
+  }
+
+  > .str-chat__virtual-message__content {
+    padding-left: 12px;
+  }
+
+  .str-chat__avatar--rounded {
+    border-radius: var(--border-radius);
+  }
+
+  .str-chat__avatar-fallback {
+    background-color: lightslategray;
+  }
+}
+
+.str-chat__virtual-message__meta {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.str-chat__virtual-message__data {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+  min-width: 70px;
+  margin-left: auto;
+}
+
+.str-chat__virtual-message__author {
+  color: var(--primary-color);
+  font-size: 1rem;
+}
+
+.str-chat__virtual-message__date {
+  font-size: 0.7rem;
+  opacity: 0.5;
+  padding-left: 8px;
+  display: block;
+  margin-left: auto;
+}
+
+.str-chat__virtual-message__actions {
+  position: relative;
+  cursor: pointer;
+
+  button {
+    border: none;
+    background: transparent;
+  }
+
+  svg {
+    fill: var(--black);
+    opacity: 0.5;
+  }
+
+  &:hover {
+    svg {
+      opacity: 1;
+    }
+  }
+
+  .str-chat__message-actions-box {
+    bottom: 10px;
+    left: unset;
+    right: 100%;
+    border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
+      var(--border-radius);
+  }
+}
+
+.str-chat__virtual-message__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+
+  .str-chat__message--deleted-inner {
+    padding: 8px 0;
+  }
+}
+
+.str-chat__virtual-message__text {
+  padding-top: 5px;
+  font-size: 0.9rem;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  word-break: break-word;
+
+  p {
+    padding-right: 16px;
+  }
+
+  a {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: var(--font-weight-bold);
+  }
+}
+
+.str-chat__virtual-message__wrapper--group {
+  padding-top: 0;
+
+  > .str-chat__avatar {
+    display: none;
+  }
+
+  .str-chat__virtual-message__author {
+    display: none;
+  }
+
+  .str-chat__virtual-message__content {
+    padding-left: 50px;
+
+    .str-chat__gallery {
+      width: 100%;
+      margin: 0;
+      justify-content: unset;
+    }
+  }
+}
+
+.dark {
+  .str-chat__virtual-message__wrapper {
+    &:hover {
+      background: var(--black20);
+    }
+  }
+
+  .str-chat__virtual-message__text {
+    color: ghostwhite;
+  }
+
+  .str-chat__virtual-message__date {
+    color: var(--white);
+  }
+}