Channel list and preview

.github/workflows/release.yml → .github/workflows/workflow.yml

@@ -1,9 +1,14 @@
-name: Release
+name: Workflow
 
 on:
   push:
     branches:
       - main
+  pull_request:
+    branches:
+      - main
+      - develop
+      - theming2
 
 jobs:
   publish-release:

.stylelintignore

@@ -1,6 +1,7 @@
 node_modules
 build
 dist
+dist-v2
 /src/styles/vendor/
 /src/styles/MessageCommerce.scss
 /src/styles/MessageLivestream.scss

package.json

@@ -11,12 +11,12 @@
   "scripts": {
     "build": "yarn build-v1 && yarn build-v2",
     "build-v1": "rm -rf dist && mkdir -p dist && yarn bundle-sass && yarn copy-assets && yarn copy-styles",
-    "build-v2": "rm -rf dist-v2 && mkdir -p dist-v2 && yarn transform && yarn compile-to-css",
+    "build-v2": "rm -rf dist-v2 && mkdir -p dist-v2/scss && yarn transform && yarn compile-to-css",
     "transform": "postcss --dir dist-v2/scss --base src-v2/styles src-v2/styles",
     "compile-to-css": "sass dist-v2/scss/index.scss dist-v2/css/index.css --style compressed && sass dist-v2/scss/index.layout.scss dist-v2/css/index.layout.css --style compressed",
     "bundle-sass": "echo '\u001b[34mℹ\u001b[0m Compiling scss files to css bundle' && sass src/styles/index.scss dist/css/index.css --style compressed && echo '\u001b[32m✓\u001b[0m Finished bundling css'",
     "copy-assets": "echo '\u001b[34mℹ\u001b[0m Copying assets to distributed directory' && cp -R src/assets dist/assets && echo '\u001b[32m✓\u001b[0m Finished copying assets'",
-    "copy-styles": "echo '\u001b[34mℹ\u001b[0m Copying scss files to distributed directory' && cp -R src/styles dist/scss && cp -R src-v2/styles dist-v2/scss  && echo '\u001b[32m✓\u001b[0m Finished copying styles'",
+    "copy-styles": "echo '\u001b[34mℹ\u001b[0m Copying scss files to distributed directory' && cp -R src/styles dist/scss && echo '\u001b[32m✓\u001b[0m Finished copying styles'",
     "lint": "stylelint '**/*.scss' --max-warnings 0",
     "build:ci": "yarn && yarn lint && yarn build",
     "start": "yarn build && sass --watch src/styles/index.scss dist/css/index.css"
@@ -51,7 +51,6 @@
   },
   "devDependencies": {
     "@semantic-release/git": "^10.0.1",
-    "flex-gap-polyfill": "^4.1.0",
     "postcss": "^8.4.13",
     "postcss-cli": "^9.1.0",
     "postcss-dir-pseudo-class": "^6.0.4",

postcss.config.js

@@ -1,8 +1,7 @@
 const postcssLogical = require('postcss-logical');
 const postcssDirPseudoClass = require('postcss-dir-pseudo-class');
-const postcssFlexGapPolyfill = require('flex-gap-polyfill');
 
 module.exports = {
   syntax: 'postcss-scss',
-  plugins: [postcssLogical({ preserve: true }), postcssDirPseudoClass(), postcssFlexGapPolyfill()],
+  plugins: [postcssLogical({ preserve: true }), postcssDirPseudoClass()],
 };

src-v2/styles/Avatar/Avatar-layout.scss

@@ -3,3 +3,9 @@
     text-align: center;
   }
 }
+
+.str-chat__loading-channels-avatar {
+  flex-shrink: 0;
+  width: calc(var(--str-chat__spacing-px) * 49);
+  height: calc(var(--str-chat__spacing-px) * 49);
+}

src-v2/styles/Avatar/Avatar-theme.scss

@@ -22,3 +22,7 @@
     text-transform: uppercase;
   }
 }
+
+.str-chat__loading-channels-avatar {
+  border-radius: var(--str-chat__avatar-border-radius);
+}

src-v2/styles/ChannelList/ChannelList-layout.scss

@@ -1,4 +1,42 @@
-.str-chat-channel-list {
+.str-chat__channel-list {
   height: 100%;
   overflow-y: auto;
+
+  .str-chat__channel-list-messenger {
+    height: 100%;
+
+    .str-chat__channel-list-messenger__main {
+      height: 100%;
+
+      .str-chat__channel-list-empty {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: var(--str-chat__spacing-4);
+
+        svg {
+          width: calc(var(--str-chat__spacing-px) * 136);
+          height: calc(var(--str-chat__spacing-px) * 136);
+        }
+      }
+
+      // Empty channel list for theme-v1
+      .str-chat__channel-list-empty-v1 {
+        display: none;
+      }
+    }
+  }
+
+  .str-chat__load-more-button {
+    display: flex;
+    justify-content: center;
+    margin: var(--str-chat__spacing-2) 0;
+  }
+
+  // This is displayed only in theme-v1
+  .str-chat__down-main {
+    display: none;
+  }
 }

src-v2/styles/ChannelList/ChannelList-theme.scss

@@ -10,8 +10,48 @@
   --str-chat__channel-list-border-block-end: none;
   --str-chat__channel-list-border-inline-start: none;
   --str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color);
+
+  --str-chat__channel-list-load-more-font-family: var(--str-chat__cta-button-font-family);
+  --str-chat__channel-list-load-more-border-radius: var(--str-chat__cta-button-border-radius);
+  --str-chat__channel-list-load-more-color: var(--str-chat__cta-button-color);
+  --str-chat__channel-list-load-more-background-color: var(--str-chat__cta-button-background-color);
+  --str-chat__channel-list-load-more-box-shadow: var(--str-chat__cta-button-box-shadow);
+  --str-chat__channel-list-load-more-border-block-start: var(
+    --str-chat__cta-button-border-block-start
+  );
+  --str-chat__channel-list-load-more-border-block-end: var(--str-chat__cta-button-border-block-end);
+  --str-chat__channel-list-load-more-border-inline-start: var(
+    --str-chat__cta-button-border-inline-start
+  );
+  --str-chat__channel-list-load-more-border-inline-end: var(
+    --str-chat__cta-button-border-inline-end
+  );
+  --str-chat__channel-list-load-more-pressed-background-color: var(
+    --str-chat__cta-button-pressed-background-color
+  );
+  --str-chat__channel-list-load-more-disabled-background-color: var(
+    --str-chat__cta-button-disabled-background-color
+  );
+  --str-chat__channel-list-load-more-disabled-color: var(--str-chat__cta-button-disabled-color);
+  --str-chat__channel-list-empty-indicator-color: var(--str-chat__disabled-color);
 }
 
-.str-chat-channel-list {
+.str-chat__channel-list {
   @include utils.component-layer-overrides('channel-list');
+
+  .str-chat__load-more-button__button {
+    @include utils.component-layer-overrides('channel-list-load-more');
+    @include utils.cta-button-overrides('channel-list-load-more');
+    width: 80%;
+  }
+
+  .str-chat__channel-list-empty {
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+    text-align: center;
+
+    svg path {
+      fill: var(--str-chat__channel-list-empty-indicator-color);
+    }
+  }
 }

src-v2/styles/ChannelPreview/ChannelPreview-layout.scss

@@ -1,24 +1,90 @@
 @use '../utils';
 
+@mixin channel-preview-layout {
+  // & selector is required for the postcss-logical plugin to properly transform the logical properties
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+  & {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
+    margin: 0;
+    text-align: start;
+
+    :not(:last-child) {
+      margin-inline-end: var(--str-chat__spacing-2);
+    }
+  }
+}
+
+@mixin channel-preview-end-layout {
+  // & selector is required for the postcss-logical plugin to properly transform the logical properties
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+  & {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    :not(:last-child) {
+      margin-block-end: var(--str-chat__spacing-0_5);
+    }
+  }
+}
+
+// Unread badge will be bigger than channel name -> this would cause a layout shift when the unread badge appears -> this trick won't let the unread badge to increase the height of the container avoiding the layout shift
+@mixin unread-badge-layout-fix {
+  overflow-y: visible;
+
+  .str-chat__channel-preview-end-first-row {
+    overflow-y: visible;
+    height: var(--channel-name-height);
+  }
+}
+
 .str-chat__channel-preview {
-  display: flex;
-  column-gap: var(--str-chat__spacing-2);
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
+  @include channel-preview-layout;
   cursor: pointer;
-  padding: var(--str-chat__spacing-2);
-  text-align: start;
 
   .str-chat__channel-preview-end {
-    overflow: hidden; // need this for ellipsis text to work
-    display: flex;
-    flex-direction: column;
-    gap: var(--str-chat__spacing-0_5);
+    @include channel-preview-end-layout;
+    @include unread-badge-layout-fix;
+    overflow-x: hidden; // need this for ellipsis text to work
+
+    .str-chat__channel-preview-end-first-row {
+      display: flex;
+      align-items: center;
+
+      .str-chat__channel-preview-unread-badge {
+        padding: var(--str-chat__spacing-2);
+      }
+
+      .str-chat__channel-preview-messenger--name {
+        width: 100%;
+      }
+    }
 
     .str-chat__channel-preview-messenger--name,
     .str-chat__channel-preview-messenger--last-message {
       @include utils.ellipsis-text;
     }
   }
 }
+
+.str-chat__channel-preview-loading {
+  @include channel-preview-layout;
+
+  .str-chat__channel-preview-end-loading {
+    @include channel-preview-end-layout;
+  }
+
+  .str-chat__loading-channels-username {
+    height: calc(var(--str-chat__spacing-px) * 16);
+    width: calc(var(--str-chat__spacing-px) * 66);
+  }
+
+  .str-chat__loading-channels-status {
+    height: calc(var(--str-chat__spacing-px) * 16);
+    width: 100%;
+  }
+}

src-v2/styles/ChannelPreview/ChannelPreview-theme.scss

@@ -15,9 +15,16 @@
   --str-chat__channel-preview-latest-message-secondary-color: var(
     --str-chat__text-low-emphasis-color
   );
+  --str-chat__channel-preview-loading-state-color: var(--str-chat__disabled-color);
+  --str-chat__channel-preview-unread-badge-border-radius: var(--str-chat__border-radius-circle);
+  --str-chat__channel-preview-unread-badge-border-block-start: none;
+  --str-chat__channel-preview-unread-badge-border-block-end: none;
+  --str-chat__channel-preview-unread-badge-border-inline-start: none;
+  --str-chat__channel-preview-unread-badge-border-inline-end: none;
 }
 
 .str-chat__channel-preview {
+  --channel-name-height: 1.25rem;
   @include utils.component-layer-overrides('channel-preview');
 
   &--active {
@@ -28,16 +35,29 @@
     background-color: var(--str-chat__channel-preview-hover-background-color);
   }
 
+  .str-chat__channel-preview-unread-badge {
+    font-size: 0.75rem;
+    line-height: 0.44rem;
+    border-radius: var(--str-chat__channel-preview-unread-badge-border-radius);
+    border-block-start: var(--str-chat__channel-preview-unread-badge-border-block-start);
+    border-block-end: var(--str-chat__channel-preview-unread-badge-border-block-end);
+    border-inline-start: var(--str-chat__channel-preview-unread-badge-border-inline-start);
+    border-inline-end: var(--str-chat__channel-preview-unread-badge-border-inline-end);
+    color: var(--str-chat__on-unread-badge-color);
+    background-color: var(--str-chat__unread-badge-color);
+    font-weight: 700;
+  }
+
   .str-chat__channel-preview-messenger--name {
     font-size: 1rem;
-    line-height: 1.25rem;
+    line-height: var(--channel-name-height);
     font-weight: 500;
   }
 
   .str-chat__channel-preview-messenger--last-message {
     font-size: 0.875rem;
     line-height: 1rem;
-    color: var(--str-chat__channel-preview-latest-message-inactive-color);
+    color: var(--str-chat__channel-preview-latest-message-secondary-color);
     font-weight: 400;
   }
 
@@ -48,3 +68,40 @@
     }
   }
 }
+
+.str-chat__channel-preview-loading {
+  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;
+    }
+  }
+
+  .str-chat__loading-channels-avatar,
+  .str-chat__loading-channels-username,
+  .str-chat__loading-channels-status {
+    background-image: linear-gradient(
+      -90deg,
+      var(--str-chat__channel-preview-loading-state-color) 0%,
+      var(--str-chat__channel-preview-loading-state-color) 100%
+    );
+  }
+
+  .str-chat__loading-channels-username,
+  .str-chat__loading-channels-status {
+    border-radius: var(--str-chat__border-radius-xs);
+  }
+}

src-v2/styles/_common.scss

@@ -0,0 +1,7 @@
+.str-chat {
+  box-sizing: border-box;
+
+  * {
+    box-sizing: border-box;
+  }
+}