stream-chat-angular 4.66.2 → 5.0.0-v5.10

package/src/assets/styles/scss/ChannelList.scss

@@ -1,141 +0,0 @@
-.str-chat__channel-list {
-  flex: 1;
-  overflow-y: auto;
-  background: var(--blue-alice);
-  box-shadow: 1px 0 0 0 var(--black5);
-  display: flex;
-  flex-direction: column;
-
-  &--channels {
-    flex: 1;
-  }
-
-  .channel_preview {
-    padding: var(--xs-p) var(--sm-p);
-    border-bottom: 1px solid var(--black10);
-  }
-
-  // Empty channel list for theme-v2
-  .str-chat__channel-list-empty {
-    display: none;
-  }
-}
-
-.dark.str-chat {
-  .str-chat__channel-list-messenger {
-    background: var(--dark-grey);
-  }
-}
-
-.str-chat__button {
-  background: var(--white);
-  box-shadow: 0 1px 1px 0 var(--black10), 0 1px 4px 0 var(--black10);
-  font-size: var(--md-font);
-  padding: var(--sm-p) var(--xxl-p); //TODO-CSS 72px
-  color: var(--primary-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(100% - 10px);
-  margin: var(--xxs-m);
-  border: 1px solid transparent;
-
-  &:active,
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 1px 0 var(--border), 0 1px 4px 0 var(--border),
-      0 0 0 2px var(--primary-color-faded);
-    border: 1px solid var(--primary-color);
-  }
-
-  > * {
-    margin: 0 var(--xxs-m);
-  }
-
-  &--round {
-    border-radius: var(--border-radius-round);
-  }
-}
-
-.str-chat-channel-checkbox {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 100001;
-}
-
-.str-chat-channel-list-burger {
-  width: 10px;
-  height: 50px;
-  background: var(--white);
-  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
-  padding: var(--xxs-p);
-  box-shadow: 0 4px 6px var(--border);
-  position: fixed;
-  top: 10px;
-  left: 0;
-  z-index: 10000;
-  justify-content: center;
-  cursor: pointer;
-
-  div {
-    width: 4px;
-    height: 100%;
-    border-radius: var(--border-radius-sm);
-    background: var(--border);
-  }
-}
-
-@media screen and (max-width: 960px) {
-  .str-chat-channel-list-burger {
-    display: flex;
-  }
-
-  .str-chat-channel-list {
-    &.messaging,
-    &.team,
-    &.commerce {
-      position: fixed;
-      left: -380px;
-      top: 0;
-      z-index: 1001;
-      min-height: 100vh;
-      overflow-y: auto;
-      box-shadow: 7px 0 9px 0 var(--black5), 1px 0 0 0 var(--black5);
-      transition: left 200ms ease-in-out;
-    }
-  }
-
-  .str-chat-channel-list--open {
-    &.messaging,
-    &.team,
-    &.commerce {
-      left: 0;
-    }
-  }
-}
-
-.str-chat-channel-list {
-  .str-chat__channel-list-messenger {
-    padding: 0;
-
-    &__main {
-      padding: var(--sm-p) var(--sm-p) 0 var(--sm-p);
-      overflow-y: auto;
-    }
-  }
-}
-
-.str-chat__channel-list.str-chat__channel-list-react {
-  overflow: hidden;
-
-  .str-chat__channel-list-messenger-react {
-    overflow: hidden;
-    padding-bottom: var(--sm-p);
-
-    .str-chat__channel-list-messenger-react__main {
-      overflow-y: auto;
-      height: 100%;
-    }
-  }
-}

package/src/assets/styles/scss/ChannelListMessenger.scss

@@ -1,9 +0,0 @@
-.str-chat__channel-list-messenger {
-  padding: var(--sm-p) var(--sm-p) 0 var(--sm-p);
-  min-width: 300px;
-  background: var(--grey-gainsboro);
-}
-
-.str-chat-channel-list .str-chat__channel-list-messenger__main {
-  padding-bottom: 4px;
-}

package/src/assets/styles/scss/ChannelPreview.scss

@@ -1,133 +0,0 @@
-.str-chat__channel-preview-messenger {
-  display: flex;
-  width: 100%;
-  border: none;
-  padding: var(--xs-p);
-  align-items: center;
-  background: transparent;
-  box-shadow: 0 1px 0 0 var(--border);
-  text-align: left;
-  margin: var(--xs-m) 0;
-  color: var(--black);
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &--active {
-    border: none;
-    border-radius: var(--border-radius-md);
-    background: var(--white-snow);
-    box-shadow: 0 1px 5px 0 var(--border);
-  }
-
-  .str-chat__channel-preview-messenger--right {
-    width: 100%;
-    overflow: hidden;
-
-    .str-chat__channel-preview-end-first-row {
-      display: flex;
-      align-items: center;
-      width: 100%;
-
-      .str-chat__channel-preview-messenger--name {
-        width: 100%;
-      }
-
-      .str-chat__channel-preview-unread-badge {
-        padding: 8px;
-        font-size: 0.75rem;
-        line-height: 0.44rem;
-        border-radius: var(--border-radius-round);
-        color: var(--unread-badge-color);
-        background-color: var(--accent_red);
-        font-weight: 700;
-      }
-    }
-  }
-
-  &--last-message p {
-    font-size: var(--sm-font);
-    margin: 0;
-    line-height: 14px;
-    max-width: 150px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  &--last-message {
-    font-size: var(--sm-font);
-    line-height: 14px;
-    opacity: 0.5;
-    max-width: 150px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  &--name {
-    font-size: var(--md-font);
-    line-height: 17px;
-    font-weight: var(--font-weight-semi-bold);
-    margin-bottom: calc(var(--xxs-m) / 2);
-    max-width: 250px;
-
-    span {
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &--unread {
-    .str-chat__channel-preview-messenger--last-message p {
-      opacity: 1;
-      font-weight: var(--font-weight-semi-bold);
-      max-width: 150px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .str-chat__channel-preview-messenger--last-message {
-      opacity: 1;
-      font-weight: var(--font-weight-semi-bold);
-      max-width: 150px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-}
-
-.dark.str-chat {
-  .str-chat__channel-preview-messenger {
-    &--active {
-      background: var(--white5);
-      box-shadow: 0 1px 5px 0 var(--black10);
-    }
-
-    &--last-message p {
-      color: var(--white);
-      margin: 0;
-      max-width: 150px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    &--last-message {
-      color: var(--white);
-      max-width: 150px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    &--name {
-      color: var(--white);
-    }
-  }
-}

package/src/assets/styles/scss/ChannelSearch.scss

@@ -1,124 +0,0 @@
-.str-chat__channel-search {
-  --channel-search-input-height: 30px;
-
-  padding: var(--md-p);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  background: var(--grey-gainsboro);
-
-  input {
-    width: 100%;
-    background: var(--grey-whisper);
-    border: 1px solid transparent;
-    outline: none;
-    height: var(--channel-search-input-height);
-    border-radius: var(--border-radius);
-    color: var(--black);
-    font-size: var(--md-font);
-    padding: var(--sm-p);
-
-    &::placeholder {
-      color: var(--grey);
-    }
-
-    &:focus {
-      background: var(--white);
-      border: 1px solid var(--primary-color);
-      box-shadow: 0 0 0 2px var(--primary-color-faded);
-      transition: all 0.2s ease-in-out;
-    }
-  }
-
-  &-container {
-
-    padding: 8px;
-
-    &-searching {
-      padding-left: 8px;
-    }
-
-    &-empty {
-      padding-left: 8px;
-    }
-
-    .str-chat__channel-search-result {
-      display: flex;
-      align-items: center;
-      border-radius: var(--border-radius-md);
-      height: 40px;
-      cursor: pointer;
-      padding-left: 8px;
-      width: 100%;
-      border: none;
-      background: transparent;
-
-      &:hover {
-        font-weight: var(--font-weight-bold);
-        transition: all 0.2s ease-in-out;
-      }
-    }
-  }
-
-  &-result.focused {
-    font-weight: var(--font-weight-bold);
-  }
-
-  &-container.popup {
-    border-radius: var(--border-radius-md);
-    background: var(--white-smoke);
-    position: absolute;
-    z-index: 2;
-    left: 0;
-    right: 0;
-    top: calc(var(--channel-search-input-height) + 40px);
-    box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
-    border: 1px solid var(--border);
-
-    .str-chat__channel-search-result {
-      &:hover {
-        background: var(--light-grey);
-      }
-    }
-
-    .str-chat__channel-search-result.focused {
-      background: var(--light-grey);
-    }
-  }
-
-  &-container.inline {
-    width: 100%;
-    background: var(--grey-gainsboro);
-
-    .str-chat__channel-search-result {
-      &:hover {
-        background: var(--white);
-      }
-    }
-
-    .str-chat__channel-search-result.focused {
-      background: var(--white);
-    }
-  }
-}
-
-.dark.str-chat {
-  .str-chat__channel-search,
-  .str-chat__channel-search-container.inline {
-    background: var(--dark-grey);
-    color: var(--white);
-
-    input {
-      background: var(--grey-gainsboro);
-    }
-
-    .str-chat__channel-search-result {
-      color: var(--white);
-
-      &:hover {
-        background: var(--white5);
-      }
-    }
-  }
-}

package/src/assets/styles/scss/ChatDown.scss

@@ -1,15 +0,0 @@
-.str-chat__down {
-  display: flex;
-  height: 100%;
-
-  &-main {
-    flex: 1;
-    padding: var(--lg-p);
-  }
-}
-
-.dark.str-chat {
-  .str-chat__down {
-    color: var(--white);
-  }
-}

package/src/assets/styles/scss/DateSeparator.scss

@@ -1,51 +0,0 @@
-.str-chat__date-separator {
-  display: flex;
-  padding: var(--xl-p);
-  align-items: center;
-
-  &-date {
-    font-size: var(--md-font);
-    font-weight: var(--font-weight-bold);
-    color: var(--overlay-dark);
-    font-family: var(--second-font);
-  }
-
-  &-line {
-    flex: 1;
-    background-color: var(--overlay);
-    height: 1px;
-    border: none;
-  }
-
-  > * {
-    &:not(:last-child) {
-      margin-right: var(--sm-m);
-    }
-  }
-}
-
-.commerce.str-chat {
-  .str-chat__date-separator {
-    padding: var(--xl-p) 0;
-  }
-}
-
-.dark.str-chat {
-  .str-chat__date-separator {
-    &-line {
-      background-color: var(--grey-gainsboro);
-    }
-
-    &-date {
-      color: var(--grey-whisper);
-    }
-  }
-
-  &.team {
-    .str-chat__date-separator {
-      &-line {
-        background-color: var(--overlay);
-      }
-    }
-  }
-}

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

@@ -1,112 +0,0 @@
-.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

@@ -1,48 +0,0 @@
-.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;
-  }
-}