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

package/src/assets/styles/scss/MessageList.scss

@@ -0,0 +1,203 @@
+%scrollable {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.str-chat-angular__message-list-host {
+  @extend %scrollable;
+}
+
+.str-chat__list {
+  @extend %scrollable;
+  flex: 1;
+  -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
+  padding: 0;
+
+  .str-chat__reverse-infinite-scroll {
+    padding-top: 72px;
+  }
+
+  &-wrapper {
+    flex: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &--thread {
+    padding: var(--sm-p) 0 0 0;
+    overflow: visible;
+  }
+
+  &__center {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.str-chat__ul {
+  display: block;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.str-chat__custom-notification {
+  border-radius: var(--border-radius-sm);
+  font-size: var(--sm-font);
+  padding: var(--xs-p);
+  font-family: var(--second-font);
+  text-align: center;
+  margin-top: var(--xs-m);
+
+  &.notification-success {
+    background: var(--faded-green);
+    border: 1px solid var(--green);
+    color: var(--green);
+  }
+
+  &.notification-error {
+    background: var(--faded-red);
+    border: 1px solid var(--red);
+    color: var(--red);
+  }
+
+  &.notification-info {
+    background: var(--faded-blue);
+    border: 1px solid var(--blue);
+    color: var(--blue);
+  }
+}
+
+.str-chat__connection-issue {
+  background: var(--faded-red);
+  border: 1px solid var(--red);
+  color: var(--red);
+  border-radius: var(--border-radius-sm);
+  font-size: var(--sm-font);
+  padding: var(--xs-p);
+  font-family: var(--second-font);
+  text-align: center;
+}
+
+.str-chat__list-notifications {
+  padding: 0 var(--xl-p);
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.messaging {
+  &.str-chat {
+    .str-chat {
+      &__list {
+        padding: 0 var(--xl-p) 0;
+        background: var(--white);
+
+        .str-chat__reverse-infinite-scroll {
+          padding-top: 56px;
+        }
+
+        &-notifications {
+          background: var(--white);
+        }
+      }
+    }
+    @media screen and (max-width: 960px) {
+      .str-chat {
+        &__list {
+          padding: 0 var(--xs-p) 0;
+
+          .str-chat__reverse-infinite-scroll {
+            padding-top: 56px;
+          }
+
+          &-notifications {
+            padding: 0 var(--xs-p);
+          }
+        }
+      }
+    }
+
+    &.dark {
+      .str-chat__list {
+        background: var(--white5);
+
+        &-notifications {
+          background: var(--white5);
+        }
+      }
+    }
+  }
+}
+
+.livestream {
+  &.str-chat {
+    .str-chat {
+      &__list {
+        padding: 0 var(--xs-p);
+
+        .str-chat__reverse-infinite-scroll {
+          padding-top: 56px;
+        }
+      }
+    }
+  }
+}
+
+.commerce {
+  &.str-chat {
+    .str-chat {
+      &__list {
+        padding: 0 var(--md-p) 0;
+
+        .str-chat__reverse-infinite-scroll {
+          padding-top: 72px;
+        }
+
+        &-notifications {
+          padding-left: var(--md-p);
+          padding-right: var(--md-p);
+        }
+      }
+    }
+  }
+}
+
+.str-chat__virtual-list {
+  position: relative;
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
+  background: var(--white);
+  margin: 0;
+  width: 100%;
+  height: 100%;
+
+  // conditionally showing the header displaces items when prepending.
+  // a simple workaround is to make the loading indicator an overlay.
+  &__loading {
+    display: flex;
+    padding-top: var(--xs-p);
+    justify-content: center;
+    width: 100%;
+    position: absolute;
+  }
+
+  p {
+    margin: 0 !important; // always use padding, margin mess up the height calculations
+
+    a {
+      white-space: pre-line;
+      overflow: hidden;
+      word-wrap: break-word;
+    }
+  }
+}
+
+.dark .str-chat__virtual-list {
+  background: var(--white5);
+}

package/src/assets/styles/scss/MessageLivestream.scss

@@ -0,0 +1,325 @@
+.str-chat__message-livestream {
+  font-family: var(--second-font);
+  display: flex;
+  width: 100%;
+  margin: 0 0;
+  padding: 10px 10px;
+  border: 1px solid transparent;
+  position: relative;
+
+  &-pin-indicator {
+    padding-left: 10px;
+  }
+
+  &-left {
+    width: 30px;
+    .str-chat__avatar {
+      margin-right: 0;
+    }
+  }
+
+  &-right {
+    flex: 1;
+  }
+
+  &-content {
+    position: relative;
+    padding: 5px 10px;
+    border: 1px solid transparent;
+
+    > * {
+      font-size: var(--sm-font);
+      line-height: 20px;
+      margin: 0;
+    }
+
+    p {
+      margin: 0;
+      white-space: pre-line;
+      &:not(:first-of-type) {
+        margin: 16px 0 0;
+      }
+      /* These are technically the same, but use both */
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+
+      -ms-word-break: break-all;
+
+      /* Instead use this non-standard one: */
+      word-break: break-word;
+
+      /* Adds a hyphen where the word breaks, if supported (No Blink) */
+      -ms-hyphens: auto;
+      -moz-hyphens: auto;
+      -webkit-hyphens: auto;
+      hyphens: auto;
+
+      code {
+        background-color: var(--white20);
+        border: 1px solid var(--primary-color-faded);
+        border-radius: 3px;
+        padding: 2px 4px;
+      }
+
+      a {
+        color: var(--primary-color);
+        font-weight: var(--font-weight-bold);
+        text-decoration: none;
+      }
+    }
+
+    pre,
+    code {
+      font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
+        'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
+        'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+      line-height: inherit;
+      padding: 10px;
+      font-size: var(--sm-font);
+      font-weight: var(--font-weight-bold);
+    }
+
+    pre {
+      margin: 0 5px 0 0;
+      border-radius: 4px;
+      background-color: var(--primary-color-faded);
+      border: 1px solid var(--primary-color);
+    }
+
+    code {
+      width: inherit;
+      word-break: break-all;
+    }
+
+    .livestream-quoted-message {
+      background: var(--light-grey);
+      border: 1px solid var(--black10);
+      padding: 10px;
+      border-radius: 5px;
+      margin-bottom: 5px;
+    }
+  }
+  &:hover {
+    .str-chat__message-livestream-actions {
+      display: flex;
+    }
+  }
+
+  &-actions {
+    background: var(--white60);
+    border: 1px solid var(--black20);
+    box-shadow: 0 2px 1px 0 var(--black5);
+
+    width: 141px;
+    height: 24px;
+    padding: 0 4px;
+    position: absolute;
+    top: -12px;
+    right: 0;
+    border-radius: 24px;
+    display: none; /* FFS display: none */
+    align-items: center;
+    justify-content: space-between;
+
+    > span {
+      position: relative;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      text-align: center;
+
+      &:not(:last-of-type) {
+        border-right: 1px solid var(--light-grey);
+      }
+
+      > span {
+        position: relative;
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        text-align: center;
+      }
+
+      cursor: pointer;
+
+      svg {
+        fill: var(--black);
+        opacity: 0.5;
+      }
+
+      &:hover svg {
+        opacity: 1;
+      }
+    }
+
+    .str-chat__message-actions-box {
+      bottom: initial;
+      left: initial;
+      visibility: hidden;
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-radius: 7px;
+
+      &--open {
+        visibility: visible;
+      }
+    }
+  }
+
+  &-time {
+    font-size: var(--xs-font);
+    line-height: 20px;
+    color: var(--black50);
+    flex: 2;
+    padding: 0 4px;
+  }
+
+  &-text {
+    &--is-emoji {
+      font-size: var(--xxxl-font);
+      line-height: 42px;
+    }
+  }
+
+  &-author {
+    margin-bottom: 8px;
+    text-transform: capitalize;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    strong {
+      margin-right: 8px;
+    }
+  }
+
+  &:hover {
+    background: var(--white5);
+    border: 1px solid var(--black5);
+    box-shadow: 0 0 6px 0 var(--black5);
+    border-radius: 6px;
+  }
+
+  .str-chat__message-attachment--img {
+    border-radius: 0;
+  }
+
+  .str-chat__message-attachment-card {
+    margin: 0;
+    border-radius: 0;
+    background: var(--white20);
+    border: 1px solid var(--black10);
+
+    &--content {
+      background: var(--white20);
+    }
+
+    &--text {
+      display: none;
+    }
+
+    &--url {
+      text-transform: lowercase;
+    }
+  }
+
+  &__thread-banner {
+    text-align: center;
+    font-size: var(--sm-font);
+    padding: 8px;
+    margin: 8px 10px 0 10px;
+    background: var(--primary-color);
+    border-radius: 2px;
+    color: var(--dark-grey);
+  }
+
+  &--error,
+  &--failed {
+    .str-chat__message-livestream {
+      &-content {
+        p {
+          svg {
+            position: relative;
+            top: 2px;
+            margin-right: 4px;
+          }
+          color: var(--red);
+        }
+      }
+    }
+  }
+  &--failed {
+    .str-chat__message-livestream {
+      &-content {
+        p {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  &--initial-message {
+    margin: 20px 10px 0;
+    width: auto;
+  }
+}
+
+.str-chat__list--thread {
+  .str-chat__message-livestream__actions {
+    min-width: 30px;
+  }
+  .str-chat__message-livestream {
+    &-actions {
+      width: 110px;
+      min-width: unset;
+
+      .str-chat__message-actions-box {
+        top: initial;
+        bottom: initial;
+        bottom: -10px;
+      }
+    }
+  }
+}
+
+.livestream.dark.str-chat {
+  .str-chat__message-livestream {
+    color: var(--light-grey);
+
+    &:hover {
+      background: var(--white5);
+      border: 1px solid var(--black5);
+      box-shadow: 0 0 6px 0 var(--black5);
+      border-radius: 6px;
+    }
+    .str-chat__message-attachment-card {
+      background: var(--black10);
+      border: 1px solid var(--white10);
+      &--content {
+        background: var(--black10);
+      }
+      &--url {
+        color: var(--white80);
+      }
+    }
+  }
+
+  .str-chat__message-livestream-actions {
+    background: var(--dark-grey);
+    border: 1px solid var(--white5);
+    box-shadow: 0 2px 1px 0 var(--black5);
+    > span:not(:last-of-type) {
+      border-color: var(--white5);
+    }
+    svg {
+      fill: var(--white);
+    }
+  }
+  .str-chat__message-livestream-time {
+    color: var(--white);
+    opacity: 0.5;
+  }
+}

package/src/assets/styles/scss/MessageNotification.scss

@@ -0,0 +1,49 @@
+.str-chat__message-notification {
+  display: block;
+  position: absolute;
+  align-self: center;
+  background: var(--primary-color);
+  border: none;
+  color: var(--white);
+  border-radius: 50px;
+  padding: var(--xxs-p) var(--xs-p);
+  font-size: var(--sm-font);
+  bottom: 10px;
+  z-index: 101;
+
+  &-right {
+    align-self: flex-end;
+  }
+
+  &-scroll-down {
+    cursor: pointer;
+    display: block;
+    width: 42px;
+    height: 42px;
+    background-size: 14px auto;
+    border-radius: 50%;
+    background: var(--white);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+
+    &::before {
+      position: absolute;
+      top: calc(50% - 8px);
+      left: calc(50% - 6px);
+      transform: rotate(-45deg);
+      display: block;
+      width: 12px;
+      height: 12px;
+      content: '';
+      border: 2px solid var(--primary-color);
+      border-width: 0 0 2px 2px;
+    }
+
+    &-unread-count {
+      font-size: 10px;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 18px;
+    }
+  }
+}

package/src/assets/styles/scss/MessageRepliesCountButton.scss

@@ -0,0 +1,33 @@
+.str-chat__message-replies-count-button {
+  display: block;
+  border: none;
+  background: none;
+  padding: 0;
+  margin-top: var(--xs-m);
+  font-size: var(--sm-font);
+  line-height: 15px;
+  font-weight: var(--font-weight-bold);
+  color: var(--primary-color);
+  cursor: pointer;
+
+  svg {
+    fill: var(--grey-whisper);
+    margin-right: var(--xxs-m);
+  }
+}
+
+.dark.str-chat {
+  .str-chat__message-replies-count-button {
+    svg {
+      fill: var(--white10);
+    }
+  }
+
+  &.team {
+    .str-chat__message-replies-count-button {
+      svg {
+        fill: var(--black40);
+      }
+    }
+  }
+}