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

package/src/assets/styles/scss/ActionsBox.scss

@@ -0,0 +1,56 @@
+.str-chat__actions-box {
+  background: var(--white);
+  background-image: linear-gradient(-180deg, var(--bg-gradient-start), var(--bg-gradient-end));
+  box-shadow: 0 1px 0 0 var(--border);
+  border-radius: var(--border-radius-md);
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+  position: absolute;
+  min-width: 150px;
+
+  &--right {
+    right: 0;
+    top: calc(100% + 2px);
+  }
+
+  &--left {
+    left: 0;
+    top: calc(100% + 2px);
+  }
+
+  > button {
+    text-align: left;
+    width: 100%;
+    border: none;
+    margin: 0;
+    padding: var(--xs-p);
+    font-size: var(--sm-font);
+    background: none;
+    cursor: pointer;
+
+    &:not(:last-of-type) {
+      box-shadow: 0 1px 0 0 var(--border);
+    }
+
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+}
+
+.dark.str-chat {
+  .str-chat__message-actions-box {
+    background: var(--grey);
+    background-image: linear-gradient(-180deg, var(--bg-gradient-start), var(--bg-gradient-end));
+    box-shadow: 0 0 2px 0 var(--border), 0 1px 0 0 var(--border), 0 1px 8px 0 var(--border);
+
+    button {
+      color: var(--white);
+
+      &:hover {
+        color: var(--primary-color);
+      }
+    }
+  }
+}

package/src/assets/styles/scss/Attachment.scss

@@ -0,0 +1,227 @@
+.str-chat__attachment {
+  max-width: 450px;
+}
+
+.str-chat__player-wrapper {
+  position: relative;
+  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
+  .react-player {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+/* border radius for attachments */
+.str-chat__message .str-chat__player-wrapper .react-player {
+  border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
+  overflow: hidden;
+}
+
+.str-chat__message--me .str-chat__player-wrapper .react-player {
+  border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
+  overflow: hidden;
+}
+
+.str-chat__message {
+  &-attachment {
+    width: 100%;
+    max-width: 375px;
+
+    border-radius: var(--border-radius);
+    margin: var(--xs-m) auto var(--xs-m) 0;
+    padding: 0;
+  }
+
+  /** Let giphies stretch their containers */
+  &-attachment--giphy {
+    max-width: unset;
+  }
+
+  &--me {
+    .str-chat__message-attachment {
+      padding-left: 0;
+      margin: var(--xs-m) 0 var(--xs-m) auto;
+    }
+  }
+}
+
+.str-chat__message-team.thread-list {
+  .str-chat__message-attachment {
+    max-width: 200px;
+  }
+}
+
+.str-chat__message-attachment {
+  overflow: hidden;
+
+  &:hover {
+    background: transparent;
+  }
+
+  &--card {
+    &--no-image {
+      height: 60px;
+    }
+
+    &--actions {
+      height: auto;
+    }
+  }
+
+  &-file {
+    width: 100%;
+
+    &--item {
+      position: relative;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      font-size: var(--md-font);
+      line-height: 22px;
+      border-left: 1px solid var(--border);
+      width: auto;
+      padding-left: var(--xxs-p);
+
+      &:hover {
+        background: var(--white);
+      }
+
+      img,
+      svg {
+        margin-right: var(--xs-m);
+      }
+
+      &-text {
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      a {
+        font-weight: var(--font-weight-bold);
+        color: var(--black);
+        opacity: 0.8;
+
+        text-decoration: none;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        }
+      }
+
+      span {
+        line-height: 14px;
+        font-size: var(--sm-font);
+        font-weight: var(--font-weight-bold);
+        text-transform: uppercase;
+        display: block;
+        color: var(--black);
+        opacity: 0.5;
+      }
+    }
+  }
+
+  &--image {
+    height: auto;
+    max-height: 300px;
+    max-width: 100%;
+    border-radius: 0;
+
+    &:hover {
+      background: transparent;
+    }
+
+    img {
+      height: inherit;
+      width: auto;
+      max-height: inherit;
+      max-width: 100%;
+      display: block;
+      object-fit: cover;
+      overflow: hidden;
+
+      &:hover {
+        background: transparent;
+      }
+    }
+
+    &--actions {
+      height: 320px;
+
+      img {
+        height: calc(320px - 40px);
+      }
+    }
+  }
+
+  &--media {
+    width: 300px;
+  }
+
+  &-card {
+    min-height: 60px;
+  }
+}
+
+.str-chat__message-attachment-card__giphy-logo {
+  height: 20px;
+  width: auto;
+}
+
+.messaging {
+  &.str-chat {
+    .str-chat {
+      &__message-attachment {
+        &.str-chat__message-attachment--image--actions {
+          .str-chat__message-attachment--img {
+            max-height: 254px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.livestream.str-chat {
+  .str-chat {
+    &__message-attachment {
+      &.str-chat__message-attachment--file {
+        max-width: 100%;
+
+        .str-chat__message-attachment-file--item {
+          border-left: none;
+
+          &:hover {
+            background: var(--grey-whisper);
+          }
+        }
+      }
+    }
+  }
+
+  &.dark {
+    .str-chat {
+      &__message-attachment-file--item {
+        a,
+        span {
+          color: var(--white);
+        }
+
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+  }
+}

package/src/assets/styles/scss/AttachmentActions.scss

@@ -0,0 +1,44 @@
+.str-chat__message-attachment-actions {
+  &-form {
+    width: 100%;
+    margin: var(--xs-m) 0;
+    padding: 0;
+    display: flex;
+  }
+
+  &-button {
+    flex: 1;
+    border: none;
+    background: none;
+    margin: 0 var(--xxs-m);
+    padding: var(--xs-p) var(--xs-p);
+    border-radius: var(--border-radius-round);
+    outline: none;
+
+    &:focus {
+      border: 1px solid var(--primary-color);
+      box-shadow: 0 0 0 2px var(--primary-color-faded);
+    }
+
+    &--primary {
+      background-color: var(--primary-color);
+      color: var(--white);
+    }
+
+    &--default {
+      border: 2px solid var(--border);
+    }
+  }
+}
+
+.dark.str-chat {
+  .str-chat__message-attachment-actions {
+    &-button {
+      color: var(--white);
+
+      &--default {
+        border-color: var(--grey-whisper);
+      }
+    }
+  }
+}

package/src/assets/styles/scss/Audio.scss

@@ -0,0 +1,112 @@
+.str-chat__audio {
+  &__wrapper {
+    height: 80px;
+    overflow: hidden;
+    position: relative;
+    border-radius: var(--border-radius-sm);
+    margin: 0;
+    display: flex;
+    background: var(--grey-whisper);
+  }
+
+  &__image {
+    height: 80px;
+    width: 80px;
+    position: relative;
+    z-index: 20;
+
+    &--overlay {
+      width: inherit;
+      height: inherit;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: var(--overlay-dark);
+      z-index: 30;
+      font-size: 3em;
+      color: var(--white-smoke);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+    }
+
+    &--button {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      width: 40px;
+      height: 40px;
+
+      svg {
+        fill: var(--white-smoke);
+      }
+    }
+
+    img {
+      z-index: 20;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: inherit;
+      height: inherit;
+      object-fit: cover;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: var(--xs-p) var(--sm-p);
+    margin-left: var(--sm-m);
+    width: 100%;
+
+    &--title {
+      margin: 0;
+      padding: 0;
+      line-height: 1;
+    }
+
+    &--subtitle {
+      margin: 0;
+      padding: 0;
+      line-height: 1;
+      font-size: var(--sm-font);
+      opacity: 0.49;
+    }
+
+    &--progress {
+      height: 6px;
+      width: 100%;
+      border-radius: var(--border-radius-sm);
+      background: var(--overlay);
+      padding: 1px;
+      margin: calc(var(--xxs-m) / 2) 0; //TODO-CSS
+
+      > div {
+        height: 4px;
+        border-radius: var(--border-radius-sm);
+        width: 0%;
+        background: var(--primary-color);
+        transition: width 0.5s linear;
+      }
+    }
+  }
+}
+
+.str-chat.dark {
+  .str-chat__audio {
+    &__wrapper {
+      background: var(--black);
+      color: var(--white);
+    }
+
+    &__content {
+      &--progress {
+        background: var(--grey);
+      }
+    }
+  }
+}

package/src/assets/styles/scss/Avatar.scss

@@ -0,0 +1,79 @@
+.str-chat__avatar {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+  margin-right: var(--xs-m);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white);
+  text-transform: uppercase;
+  overflow: hidden;
+
+  &--circle {
+    border-radius: var(--border-radius-round);
+  }
+
+  &--rounded {
+    border-radius: var(--border-radius-sm);
+  }
+
+  &--square {
+    border-radius: 0;
+  }
+
+  &-image,
+  &-fallback {
+    display: block;
+    width: inherit;
+    height: inherit;
+    object-fit: cover;
+    text-align: center;
+  }
+
+  &-image--loaded {
+    background-color: none;
+  }
+
+  &-fallback {
+    background-color: var(--primary-color);
+  }
+}
+
+.str-chat__message {
+  &--me {
+    %order {
+      order: 1;
+    }
+
+    %margin {
+      margin: 0;
+      margin-left: var(--xs-m);
+    }
+
+    > .str-chat__avatar {
+      @extend %order;
+      @extend %margin;
+    }
+
+    > .str-chat-angular__avatar-host {
+      @extend %order;
+
+      .str-chat__avatar {
+        @extend %margin;
+      }
+    }
+  }
+}
+
+.str-chat__li {
+  &--top,
+  &--middle {
+    .str-chat__message {
+      > .str-chat__avatar,
+      > .str-chat-angular__avatar-host {
+        visibility: hidden;
+      }
+    }
+  }
+}

package/src/assets/styles/scss/Card.scss

@@ -0,0 +1,100 @@
+.str-chat__message-attachment-card {
+  position: relative;
+  background: var(--white);
+  border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
+  overflow: hidden;
+  font-size: var(--sm-font);
+  border: 10px solid var(--border);
+  margin: var(--lg-m) 0 0 0;
+
+  &--header {
+    width: 100%;
+    height: 175px;
+
+    img {
+      width: inherit;
+      height: inherit;
+      object-fit: cover;
+    }
+  }
+
+  &--title {
+    font-weight: var(--font-weight-bold);
+    flex: 1;
+  }
+
+  &--flex {
+    min-width: 0;
+
+    &,
+    > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &--content {
+    padding: var(--xs-p) var(--sm-p);
+    margin: calc(var(--xs-m) * -1);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    > * {
+      margin: var(--xs-m) 0;
+    }
+  }
+
+  &--url {
+    text-decoration: none;
+    display: block;
+    color: var(--black);
+    text-transform: uppercase;
+    opacity: 0.5;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  &--giphy &--header {
+    height: unset;
+  }
+}
+
+.str-chat.commerce {
+  .str-chat__message-attachment-card {
+    max-width: 375px;
+    width: 100%;
+  }
+}
+
+.str-chat__message--me {
+  .str-chat__message-attachment-card {
+    background: var(--overlay);
+    border: 1px solid transparent;
+    border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
+  }
+}
+
+.dark.str-chat {
+  .str-chat__message-attachment-card__giphy-logo {
+    filter: invert(100%);
+  }
+}
+
+.str-chat__message-attachment-card.str-chat__message-attachment-card--giphy {
+  .str-chat__message-attachment-card--content {
+    background-image: url('#{$assetsPath}/Poweredby_100px-White_VertText.png');
+    background-position: right var(--border-radius) bottom var(--border-radius);
+    background-repeat: no-repeat;
+    /* that was the original sizing of the img in React */
+    background-size: 56px;
+  }
+}