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

package/src/assets/styles/scss/ReactionList.scss

@@ -0,0 +1,183 @@
+%background-reaction-list {
+  background: url('#{$assetsPath}/str-chat__reaction-list-sprite@1x.png') no-repeat;
+  background-size: 59px 101px;
+
+  @media only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 2dppx) {
+    background-image: url('#{$assetsPath}/str-chat__reaction-list-sprite@2x.png');
+  }
+
+  @media only screen and (-webkit-min-device-pixel-ratio: 3),
+    only screen and (min-resolution: 3dppx) {
+    background-image: url('#{$assetsPath}/str-chat__reaction-list-sprite@3x.png');
+  }
+}
+
+.str-chat__message,
+.str-chat__message-commerce {
+  .str-chat__reaction-list {
+    @extend %background-reaction-list;
+
+    position: absolute;
+    right: 15px;
+    top: -28px;
+    z-index: 1;
+    height: 33px;
+    width: initial;
+    background-position: 0 -66px;
+    background-repeat: repeat-x;
+
+    ul {
+      position: relative;
+      list-style-type: none;
+      padding: 0;
+      font-size: var(--lg-font);
+      line-height: 26px;
+      display: flex;
+      justify-content: center;
+      margin: -1px -16px 0 0;
+      z-index: 888;
+
+      button {
+        cursor: pointer;
+        background-color: transparent;
+        border: none;
+        display: flex;
+      }
+    }
+
+    .emoji-mart-emoji,
+    .str-chat__emoji {
+      display: flex;
+    }
+
+    &::after,
+    &::before {
+      @extend %background-reaction-list;
+
+      position: absolute;
+      content: '';
+      top: 0;
+      height: 33px;
+    }
+
+    &::after {
+      right: -26px;
+      width: 26px;
+      background-position: -33px -33px;
+    }
+
+    &::before {
+      left: -13px;
+      width: 13px;
+      background-position: -0 -33px;
+    }
+
+    &--reverse {
+      right: initial;
+      left: 15px;
+      position: absolute;
+
+      ul {
+        margin: -1px -4px 0 -16px;
+      }
+
+      &::after {
+        right: -13px;
+        width: 13px;
+        background-position: -46px 0;
+      }
+
+      &::before {
+        left: -26px;
+        width: 26px;
+        background-position: -0 0;
+      }
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+
+      button {
+        padding: 0;
+      }
+    }
+
+    &--counter {
+      color: var(--button-background);
+      font-size: var(--sm-font);
+    }
+  }
+
+  &--me,
+  &--right {
+    .str-chat__message-commerce-inner {
+      > .str-chat__reaction-list {
+        left: 46px;
+      }
+    }
+
+    .str-chat__reaction-list {
+      right: initial;
+      left: 16px;
+
+      ul {
+        margin: -1px 0 0 -16px;
+      }
+
+      &::after {
+        right: -13px;
+        width: 13px;
+        background-position: -46px 0;
+      }
+
+      &::before {
+        left: -26px;
+        width: 26px;
+        background-position: -0 0;
+      }
+
+      &--reverse {
+        right: 15px;
+        left: initial;
+
+        ul {
+          margin: -1px -16px 0 0;
+        }
+
+        &::after {
+          right: -26px;
+          width: 26px;
+          background-position: -33px -33px;
+        }
+
+        &::before {
+          left: -13px;
+          width: 13px;
+          background-position: -0 -33px;
+        }
+      }
+    }
+  }
+}
+
+.str-chat__message-commerce {
+  &-inner {
+    > .str-chat__reaction-list {
+      left: unset;
+      right: 46px;
+    }
+  }
+
+  &--right {
+    .str-chat__message-commerce {
+      &-inner {
+        > .str-chat__reaction-list {
+          right: unset;
+          left: 46px;
+        }
+      }
+    }
+  }
+}

package/src/assets/styles/scss/ReactionSelector.scss

@@ -0,0 +1,212 @@
+.str-chat__message-reactions-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.str-chat__message-reactions-list-item {
+  font-size: var(--xl-font);
+  margin: 0 var(--xxs-m);
+  position: relative;
+  line-height: 0;
+
+  button {
+    padding: 0;
+  }
+
+  span[role='img'] {
+    position: relative;
+    display: block;
+    top: -2px;
+    transition: transform 100ms ease;
+
+    &:hover {
+      transform: scale(1.4);
+    }
+  }
+
+  &__count {
+    position: absolute;
+    top: 28px;
+    font-size: var(--xs-font);
+    color: var(--white);
+    font-weight: var(--font-weight-bold);
+    left: 6px;
+  }
+
+  .latest-user {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: -24px;
+    left: 0;
+
+    &-tooltip {
+      display: none;
+      text-align: center;
+      position: absolute;
+      bottom: calc(100% + 5px);
+      left: 50%;
+      transform: translate(-50%, 0);
+      background: var(--black80);
+      border-radius: var(--border-radius-sm);
+      background-image: linear-gradient(-180deg, transparent, var(--black50));
+      max-width: 237px;
+      padding: var(--xxs-p) var(--xs-p);
+      font-size: var(--sm-font);
+      color: var(--white);
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: calc(100% - 4px);
+        left: 50%;
+        transform: translate(-50%, 0) rotate(45deg);
+        width: 7px;
+        height: 7px;
+        background-color: var(--dark-grey);
+      }
+    }
+
+    &-not-found {
+      border: 1.5px solid var(--white);
+      border-radius: var(--border-radius-round);
+      background-color: var(--secondary-color);
+      width: inherit;
+      height: inherit;
+    }
+
+    img {
+      border: 1.5px solid var(--white);
+      border-radius: var(--border-radius-round);
+      object-fit: cover;
+      width: inherit;
+      height: inherit;
+    }
+
+    &:hover {
+      .latest-user-tooltip {
+        display: block;
+      }
+    }
+  }
+}
+
+button.str-chat__message-reactions-list-item {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  display: flex;
+}
+
+.str-chat__reaction-selector {
+  z-index: 999;
+  height: 60px;
+  position: absolute;
+  width: initial;
+  background: var(--black);
+  background-image: linear-gradient(-180deg, transparent, var(--border));
+  border: 1px solid var(--white5);
+  box-shadow: 0 3px 1px 0 var(--border), 0 11px 8px 0 var(--border);
+  border-radius: var(--border-radius-round);
+  display: flex;
+  align-items: center;
+
+  ul {
+    position: relative;
+    z-index: 1000;
+    margin: 0 var(--sm-m);
+  }
+
+  &-tooltip {
+    position: absolute;
+    bottom: calc(100% + 15px);
+    background: var(--black);
+    border-radius: var(--border-radius-sm);
+    min-width: 85px;
+    min-height: 24px;
+    max-width: 100%;
+    padding: var(--xxs-p) var(--xs-p);
+    font-size: var(--sm-font);
+    color: var(--white);
+    text-align: center;
+
+    .arrow {
+      position: absolute;
+      top: calc(100% - 4px);
+      left: 50%;
+      transform: translate(-50%, 0) rotate(45deg);
+      width: 7px;
+      height: 7px;
+      background-color: var(--black);
+    }
+  }
+
+  .emoji-mart-emoji:hover,
+  .str-chat__emoji:hover {
+    transition: 0.1s;
+    transform: scale(1.2);
+    cursor: pointer;
+  }
+}
+
+.str-chat__message,
+.str-chat__message-team,
+.str-chat__message-simple,
+.str-chat__message-commerce,
+.str-chat__message-livestream {
+  .str-chat__reaction-selector {
+    top: -65px;
+    left: 0;
+  }
+}
+
+.str-chat__message-commerce {
+  &--right {
+    .str-chat__reaction-selector {
+      left: unset;
+      right: 0;
+    }
+  }
+}
+
+.str-chat__message-livestream {
+  .str-chat__reaction-selector {
+    left: unset;
+    top: -70px;
+    right: 0;
+  }
+}
+
+.str-chat__message-team {
+  .str-chat__reaction-selector {
+    left: unset;
+    top: -60px;
+    right: 0;
+  }
+}
+
+.str-chat__message-simple {
+  .str-chat__reaction-selector {
+    right: unset;
+    left: 0;
+
+    &--reverse {
+      right: 0;
+      left: unset;
+    }
+  }
+
+  &--me {
+    .str-chat__reaction-selector {
+      left: unset;
+      right: 0;
+
+      &--reverse {
+        right: unset;
+        left: 0;
+      }
+    }
+  }
+}

package/src/assets/styles/scss/SendButton.scss

@@ -0,0 +1,14 @@
+.str-chat__send-button {
+  margin-left: var(--xs-m);
+  border: 0;
+  background: 0;
+  outline: 0;
+
+  &:focus {
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
+  @media screen and (min-width: 768px) {
+    display: none;
+  }
+}

package/src/assets/styles/scss/SimpleReactionsList.scss

@@ -0,0 +1,76 @@
+.str-chat__simple-reactions-list {
+  list-style-type: none;
+  padding: var(--xxs-p) var(--xxs-p) calc(var(--xxs-p) / 2) var(--xxs-p);
+  display: inline-flex;
+  margin: var(--xs-m) 0 0 0;
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius-sm);
+  line-height: 1;
+  position: relative;
+
+  &-tooltip {
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    transform: translate(-50%, 0);
+    background: var(--overlay-dark);
+    border-radius: var(--border-radius-sm);
+    background-image: linear-gradient(-180deg, transparent, var(--black50));
+    min-height: 24px;
+    width: auto;
+    max-width: 275px;
+    padding: var(--xxs-p) var(--xs-p);
+    font-size: var(--sm-font);
+    color: var(--white);
+    text-align: center;
+
+    > .arrow {
+      position: absolute;
+      top: calc(100%);
+      left: 50%;
+      transform: translate(-50%, 0);
+      width: 0;
+      height: 0;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 4px solid var(--overlay-dark);
+    }
+  }
+
+  &-item {
+    margin: 0;
+    cursor: pointer;
+
+    > span {
+      line-height: 1;
+    }
+
+    .emoji-mart-emoji,
+    .str-chat__emoji {
+      &:hover {
+        transition: transform 0.2s ease-in-out;
+        transform: scale(1.2);
+      }
+    }
+
+    &--last-number {
+      font-size: var(--xs-font);
+      display: flex;
+      align-items: center;
+      color: black;
+    }
+  }
+}
+
+.dark.str-chat {
+  .str-chat__simple-reactions-list {
+    border: 1px solid var(--white10);
+    border-radius: var(--border-radius-sm);
+
+    &-item {
+      &--last-number {
+        color: var(--white);
+      }
+    }
+  }
+}

package/src/assets/styles/scss/SmallMessageInput.scss

@@ -0,0 +1,172 @@
+.str-chat__small-message-input {
+  display: flex;
+  flex-wrap: wrap;
+  margin: var(--xs-m);
+  padding: var(--xs-m);
+  position: relative;
+  z-index: 1000;
+
+  .rfu-file-previewer {
+    flex: 1 1 100%;
+  }
+
+  .rfu-image-previewer {
+    flex: 1 1 100%;
+  }
+
+  &__wrapper {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+  }
+
+  &-fileupload {
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+  }
+
+  &-emojiselect {
+    bottom: 10px;
+    right: 6px;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+  }
+
+  .str-chat-angular__emojiselect {
+    width: auto;
+    height: auto;
+    left: 15px;
+    max-width: 20px;
+  }
+
+  .str-chat-angular__cooldown {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 15px;
+  }
+
+  .rfu-file-upload-button {
+    bottom: 9px;
+    right: 26px;
+  }
+
+  &--textarea-wrapper {
+    flex-wrap: wrap;
+    flex: 1 0;
+    position: relative;
+  }
+
+  &-emojiselect,
+  .rfu-file-upload-button {
+    position: absolute;
+    cursor: pointer;
+    width: 22px;
+    height: 22px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-size: 44px 44px;
+    fill: var(--grey);
+
+    &:hover {
+      fill: var(--black);
+    }
+  }
+
+  &-emojipicker {
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    transform: scale(0.8);
+    transform-origin: 100% 100%;
+  }
+
+  &-has-attachments {
+    .str-chat__send-button {
+      display: block;
+    }
+  }
+
+  &--send-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    flex: 0 1;
+    outline: 0;
+
+    &:hover {
+      opacity: 0.69;
+    }
+
+    @media screen and (min-width: 768px) {
+      display: none;
+    }
+  }
+
+  textarea {
+    background: var(--grey-whisper);
+    color: var(--black);
+    min-height: 36px;
+    font-size: var(--sm-font);
+    padding: 10px 44px 8px 8px;
+
+    &.str-chat__angular-textarea {
+      padding: 10px 35px 8px;
+    }
+
+    &:focus {
+      height: 36px;
+    }
+  }
+
+  .str-chat-angular__textarea {
+    position: relative;
+
+    + .str-chat__fileupload-wrapper {
+      .rfu-file-upload-button {
+        right: 15px;
+      }
+    }
+  }
+
+  .str-chat__emojisearch {
+    bottom: 100%;
+  }
+
+  .str-chat__user-item {
+    font-size: var(--md-font);
+  }
+
+  .rfu-file-upload-button {
+    position: absolute;
+    cursor: pointer;
+    right: 28px;
+  }
+
+  .rfu-dropzone .rfu-dropzone__notifier {
+    z-index: 1000;
+  }
+}
+
+.dark.str-chat {
+  .str-chat__small-message-input {
+    textarea {
+      background: var(--white5);
+      border: 1px solid var(--black20);
+      border-radius: var(--border-radius-sm);
+      color: var(--white);
+    }
+
+    .rfu-file-upload-button,
+    .str-chat__small-message-input-emojiselect {
+      svg {
+        fill: var(--white);
+      }
+    }
+  }
+}