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

package/src/assets/styles/scss/ChannelHeader.scss

@@ -0,0 +1,284 @@
+.str-chat__header {
+  display: flex;
+  padding: var(--xs-p);
+  border-bottom: 1px solid var(--border);
+
+  &-livestream {
+    padding: var(--xs-p) var(--xl-p);
+    min-height: 70px;
+    display: flex;
+    align-items: center;
+    font-family: var(--second-font);
+    background: var(--white);
+    box-shadow: 0 1px 1px 0 var(--border);
+
+    &-left {
+      flex: 1;
+      font-size: var(--md-font);
+
+      &--title {
+        font-weight: var(--font-weight-bold);
+        margin: 0;
+      }
+
+      &--members {
+        font-weight: var(--font-weight-regular);
+        margin: 0;
+      }
+
+      &--livelabel {
+        position: relative;
+        left: 5px;
+        font-size: var(--sm-font);
+        text-transform: uppercase;
+        color: var(--red);
+        display: inline-block;
+        animation: pulse 2s infinite;
+
+        &::before {
+          content: '';
+          position: relative;
+          top: -2px;
+          left: -4px;
+          display: inline-block;
+          width: 5px;
+          height: 5px;
+          border-radius: var(--border-radius-round);
+          background-color: var(--accent_red);
+        }
+
+        @keyframes pulse {
+          0% {
+            opacity: 0.5;
+          }
+
+          50% {
+            opacity: 1;
+          }
+
+          100% {
+            opacity: 0.5;
+          }
+        }
+      }
+    }
+
+    &-right {
+      display: flex;
+      margin: 0 calc(var(--xxs-m) * -1);
+
+      &-button-wrapper {
+        position: relative;
+      }
+    }
+  }
+}
+
+.str-chat__header .str-chat__avatar {
+  margin: 0 var(--sm-m) 0 0;
+}
+
+.str-chat__title {
+  font-weight: var(--font-weight-semi-bold);
+}
+
+.str-chat__meta {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.str-chat__info {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--md-font);
+  color: var(--grey);
+}
+
+.str-chat__square-button {
+  background: var(--grey-whisper);
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius-sm);
+  padding: var(--xs-p);
+  margin: 0 var(--xxs-m);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: var(--black);
+  }
+
+  &:active {
+    background-color: var(--grey-whisper);
+  }
+}
+
+.dark.str-chat {
+  .str-chat__square-button {
+    background: var(--white5);
+    box-shadow: 0 1px 0 0 var(--black70);
+    border-radius: var(--border-radius-sm);
+
+    svg {
+      fill: var(--white70);
+    }
+  }
+}
+
+.messaging {
+  &.str-chat {
+    .str-chat {
+      &__header-livestream {
+        position: relative;
+        z-index: 2;
+        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+        background: var(--white-snow);
+        box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
+      }
+
+      @media screen and (max-width: 960px) {
+        &__header-livestream {
+          padding-left: var(--sm-p);
+          padding-right: var(--sm-p);
+        }
+      }
+    }
+
+    &.dark {
+      .str-chat__header-livestream {
+        background: var(--dark-grey);
+        box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
+        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+        color: var(--white);
+      }
+    }
+  }
+}
+
+.livestream {
+  &.str-chat {
+    .str-chat {
+      &__header-livestream {
+        position: relative;
+        z-index: 1;
+        background: var(--grey-whisper);
+        box-shadow: 0 1px 1px 0 var(--border);
+      }
+    }
+
+    &.dark {
+      .str-chat__header-livestream {
+        background: var(--white5);
+        box-shadow: 0 1px 1px 0 var(--border);
+
+        &-left {
+          &--title,
+          &--members {
+            color: var(--white);
+          }
+
+          &--title {
+            font-size: var(--lg-font);
+          }
+        }
+      }
+    }
+  }
+}
+
+.commerce {
+  &.str-chat {
+    .str-chat {
+      &__header-livestream {
+        background: var(--white80);
+        box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
+        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+        padding: var(--md-p);
+
+        &-left {
+          &--title {
+            font-size: var(--xxl-font);
+            margin: 0;
+            line-height: 1;
+            font-weight: var(--font-weight-regular);
+          }
+
+          &--subtitle {
+            margin: var(--xs-m) 0;
+            font-size: var(--lg-font);
+          }
+
+          &--members {
+            display: none;
+          }
+        }
+
+        &-right {
+          &-button {
+            &--info {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    &.dark {
+      .str-chat__header-livestream {
+        background: var(--grey);
+        box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
+        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+        color: var(--white);
+      }
+    }
+  }
+}
+
+.team {
+  &.str-chat {
+    &.dark {
+      .str-chat__header-livestream {
+        background: var(--dark-grey);
+        box-shadow: 0 1px 1px 0 var(--black30);
+
+        &-left {
+          color: var(--white);
+
+          &--title {
+            font-size: var(--lg-font);
+          }
+
+          &--members {
+            font-size: var(--sm-font);
+          }
+        }
+      }
+    }
+  }
+}
+
+.str-chat__header-hamburger {
+  width: 30px;
+  height: 38px;
+  padding: var(--xxs-p);
+  margin-right: var(--xs-m);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+
+  &:hover {
+    svg path {
+      fill: var(--primary-color);
+    }
+  }
+
+  @media screen and (max-width: 960px) {
+    display: flex;
+  }
+}

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

@@ -0,0 +1,117 @@
+.str-chat__channel-list {
+  flex: 1;
+  overflow-y: auto;
+  max-width: 300px;
+  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);
+  }
+}
+
+.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;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,111 @@
+.str-chat__channel-search {
+  padding: var(--md-p) var(--md-p) 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+  background: var(--grey-gainsboro);
+
+  input {
+    flex: 1;
+    background: var(--grey-whisper);
+    border: 1px solid transparent;
+    outline: none;
+    height: 30px;
+    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 {
+    position: absolute;
+    width: 300px;
+    z-index: 2;
+    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);
+    left: 300px;
+    top: 20px;
+    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 {
+    top: 64px;
+    right: 0;
+    background: var(--grey-gainsboro);
+    height: calc(100vh - 60px);
+
+    .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 {
+    input {
+      background: var(--grey-gainsboro);
+      color: var(--white);
+    }
+  }
+}

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

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

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