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

package/src/assets/styles/scss/EditMessageForm.scss

@@ -0,0 +1,112 @@
+.str-chat__edit-message-form {
+  width: 100%;
+
+  form {
+    position: relative;
+    width: 100%;
+  }
+
+  textarea {
+    padding: 8px;
+    background: var(--white);
+    box-shadow: inset 0 0 0 1px var(--primary-color);
+    border: 1px solid transparent;
+    resize: none;
+    border-radius: var(--border-radius-sm);
+    width: 100%;
+    font-size: var(--lg-font);
+    line-height: 22px;
+    color: var(--black);
+
+    &:focus {
+      box-shadow: inset 0 0 0 1px var(--primary-color), 0 0 0 2px var(--primary-color-faded);
+      outline: 0;
+    }
+  }
+
+  .str-chat__message-team-form-footer {
+    button {
+      background: none;
+      border: none;
+      font-weight: var(--font-weight-bold);
+      color: var(--grey);
+
+      &[type='submit'] {
+        color: var(--primary-color);
+      }
+    }
+  }
+
+  .rfu-dropzone {
+    width: 100%;
+  }
+
+  .rfu-file-upload-button,
+  .str-chat__input-emojiselect,
+  .str-chat__input-fileupload {
+    display: flex;
+    position: unset;
+    top: unset;
+    right: unset;
+    left: unset;
+
+    svg {
+      fill: var(--black);
+      opacity: 0.5;
+    }
+
+    &:hover {
+      svg {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.str-chat__edit-message-form-options {
+  display: flex;
+  align-items: baseline;
+}
+
+.str-chat__edit-message-form-options .str-chat__fileupload-wrapper:hover .str-chat__tooltip {
+  display: none;
+}
+
+.str-chat.dark {
+  .str-chat__edit-message-form {
+    .rfu-file-upload-button,
+    .str-chat__input-emojiselect {
+      svg {
+        fill: var(--grey-gainsboro);
+      }
+    }
+
+    .str-chat__message-team-form-footer {
+      button {
+        color: var(--grey-gainsboro);
+
+        &[type='submit'] {
+          color: var(--primary-color);
+        }
+      }
+    }
+
+    textarea {
+      background: var(--white5);
+      box-shadow: 0 0 0 1px var(--black20);
+      border: 2px solid transparent;
+      border-radius: var(--border-radius-sm);
+      color: var(--white);
+
+      &:focus {
+        box-shadow: inset 0 0 0 1px var(--primary-color);
+        border: 2px solid var(--primary-color-faded);
+        border-radius: var(--border-radius-sm);
+      }
+    }
+  }
+}
+
+.str-chat__edit-message-form {
+  position: relative;
+}

package/src/assets/styles/scss/EventComponent.scss

@@ -0,0 +1,48 @@
+.str-chat.messaging {
+  .str-chat__event-component__channel-event {
+    display: flex;
+    margin-top: var(--md-m);
+
+    &__content {
+      margin-right: var(--xs-m);
+      color: var(--overlay-dark);
+      font-size: var(--lg-font);
+    }
+
+    &__date {
+      font-size: var(--xs-font);
+      margin-top: var(--xxs-m);
+    }
+  }
+}
+
+.str-chat.team {
+  .str-chat__event-component__channel-event {
+    display: flex;
+    margin: var(--md-m) var(--xl-m);
+
+    &__content {
+      margin-right: var(--xs-m);
+      color: var(--overlay-dark);
+      font-size: var(--lg-font);
+    }
+
+    &__sentence {
+      margin-right: var(--xs-m);
+      color: var(--overlay-dark);
+      font-size: var(--lg-font);
+    }
+
+    &__date {
+      font-size: var(--xs-font);
+      margin-top: var(--xxs-m);
+    }
+  }
+}
+
+.str-chat.commerce,
+.str-chat.livestream {
+  .str-chat__event-component__channel-event {
+    display: none;
+  }
+}

package/src/assets/styles/scss/Gallery.scss

@@ -0,0 +1,135 @@
+.str-chat__gallery {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  overflow: hidden;
+
+  &-image {
+    /* flex: 1; x */
+    width: 150px;
+    height: 150px;
+    background: var(--white);
+    margin-bottom: 1px;
+    margin-right: 1px;
+    border: none;
+    padding: 0;
+    display: flex;
+
+    &:hover {
+      cursor: -moz-zoom-in;
+      cursor: -webkit-zoom-in;
+      cursor: zoom-in;
+    }
+
+    img {
+      width: inherit;
+      height: inherit;
+      object-fit: cover;
+    }
+  }
+
+  &--square {
+    max-width: 301px; // 300px + 1px margin between images
+  }
+
+  &--square &-image:nth-child(even) {
+    margin-right: 0;
+  }
+}
+
+.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,
+.team.str-chat {
+  .str-chat {
+    &__gallery {
+      margin: 4px 0;
+
+      &-image {
+        width: 150px;
+        height: 150px;
+      }
+
+      &-placeholder {
+        position: relative;
+        width: 150px;
+        height: 150px;
+        color: var(--white);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-size: cover;
+        background-position: top left;
+        background-repeat: no-repeat;
+        cursor: -moz-zoom-in;
+        cursor: -webkit-zoom-in;
+        cursor: zoom-in;
+        cursor: pointer;
+        border: none;
+
+        p {
+          position: relative;
+          z-index: 1;
+          font-size: 16px;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: var(--overlay-dark);
+          z-index: 0;
+        }
+      }
+    }
+  }
+}
+
+.commerce.str-chat {
+  .str-chat__gallery {
+    width: calc(100% - 30px);
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: 100px;
+
+    &-image,
+    &-placeholder {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .str-chat__message-commerce {
+    .str-chat__gallery {
+      border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 2px;
+    }
+
+    &--right {
+      .str-chat__gallery {
+        border-radius: var(--border-radius) var(--border-radius) 2px var(--border-radius);
+      }
+    }
+  }
+}

package/src/assets/styles/scss/InfiniteScrollPaginator.scss

@@ -0,0 +1,6 @@
+.str-chat__infinite-scroll-paginator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--xs-p);
+}

package/src/assets/styles/scss/LoadMoreButton.scss

@@ -0,0 +1,44 @@
+.str-chat {
+  &.messaging {
+    .str-chat__load-more-button {
+      &__button {
+        border: 0;
+        width: 100%;
+        height: 40px;
+        border-radius: var(--border-radius-md);
+        background: var(--grey-whisper);
+        box-shadow: 0 1px 5px 0 var(--border);
+        color: var(--grey);
+        padding: var(--xs-p);
+        font-size: var(--md-font);
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  &.team {
+    .str-chat__load-more-button {
+      &__button {
+        border: 0;
+        background: transparent;
+        width: 100%;
+        height: 40px;
+        padding: var(--xs-p);
+        font-size: var(--md-font);
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+
+.str-chat__load-more-button__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/assets/styles/scss/LoadingChannels.scss

@@ -0,0 +1,70 @@
+.str-chat__loading-channels {
+  width: 300px;
+  height: 100%;
+  padding: var(--md-p);
+  background: var(--grey-gainsboro);
+
+  &-meta {
+    flex: 1;
+  }
+
+  &-avatar,
+  &-username,
+  &-status {
+    background-image: linear-gradient(
+      -90deg,
+      var(--bg-gradient-start) 0%,
+      var(--bg-gradient-end) 100%
+    );
+  }
+
+  &-username,
+  &-status {
+    border-radius: var(--border-radius);
+    height: 14px;
+  }
+
+  &-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--border-radius-round);
+    margin-right: var(--xs-m);
+  }
+
+  &-username {
+    width: 40%;
+    margin-bottom: var(--xs-m);
+  }
+
+  &-status {
+    width: 80%;
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    border-radius: var(--border-radius-sm);
+    margin-bottom: var(--sm-m);
+    animation: pulsate 1s linear 0s infinite alternate;
+
+    &:nth-of-type(2) {
+      animation: pulsate 1s linear 0.3334 infinite alternate;
+    }
+
+    &:last-of-type {
+      animation: pulsate 1s linear 0.6667s infinite alternate;
+    }
+  }
+}
+
+@keyframes pulsate {
+  from {
+    opacity: 0.5;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/assets/styles/scss/LoadingIndicator.scss

@@ -0,0 +1,38 @@
+.str-chat__loading-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: rotate 1s linear infinite;
+
+  @-webkit-keyframes rotate {
+    from {
+      -webkit-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+
+    to {
+      -webkit-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes rotate {
+    from {
+      -ms-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -webkit-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+
+    to {
+      -ms-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -webkit-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+}