Merge branch 'develop' into psf-963/live-location-labs-flag-screen

Author: Kerry

.github/workflows/element-build-and-test.yaml

@@ -23,14 +23,23 @@ jobs:
           cache: 'yarn'
 
       - name: Fetch layered build
-        run: scripts/ci/layered.sh
+        id: layered_build
+        run: |
+          scripts/ci/layered.sh
+          JSSDK_SHA=$(git -C matrix-js-sdk rev-parse --short=12 HEAD)
+          REACT_SHA=$(git rev-parse --short=12 HEAD)
+          VECTOR_SHA=$(git -C element-web rev-parse --short=12 HEAD)
+          echo "::set-output name=VERSION::$VECTOR_SHA-react-$REACT_SHA-js-$JSSDK_SHA"
 
       - name: Copy config
         run: cp element.io/develop/config.json config.json
         working-directory: ./element-web
 
       - name: Build
-        run: CI_PACKAGE=true yarn build
+        env:
+          CI_PACKAGE: true
+          VERSION: "${{ steps.layered_build.outputs.VERSION }}"
+        run: yarn build
         working-directory: ./element-web
 
       - name: Upload Artifact

.github/workflows/netlify.yaml

@@ -7,26 +7,36 @@ on:
     types:
       - completed
 jobs:
-  build:
+  deploy:
     runs-on: ubuntu-latest
-    if: >
-      ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request' }}
+    if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request'
     steps:
       - name: "🔍 Read PR number"
         id: readctx
-        # we need to find the PR number that corresponds to the branch, which we do by
-        # searching the GH API
+        # We need to find the PR number that corresponds to the branch, which we do by searching the GH API
         # The workflow_run event includes a list of pull requests, but it doesn't get populated for
         # forked PRs: https://docs.github.com/en/rest/reference/checks#create-a-check-run
         run: |
           head_branch='${{github.event.workflow_run.head_repository.owner.login}}:${{github.event.workflow_run.head_branch}}'
-          echo "head branch: $head_branch"
+          echo "Head branch: $head_branch"
           pulls_uri="https://api.github.com/repos/${{ github.repository }}/pulls?head=$(jq -Rr '@uri' <<<$head_branch)"
           pr_number=$(curl -s -H 'Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' "$pulls_uri" |
                jq -r '.[] | .number')
           echo "PR number: $pr_number"
           echo "::set-output name=prnumber::$pr_number"
 
+      - name: Create Deployment ID
+        uses: altinukshini/deployment-action@v1.2.6
+        id: deployment
+        with:
+          token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
+          pr: true
+          pr_id: ${{ steps.readctx.outputs.prnumber }}
+          transient_environment: true
+          environment: Netlify
+          initial_status: in_progress
+          ref: ${{ github.event.workflow_run.head_sha }}
+
       # There's a 'download artifact' action but it hasn't been updated for the
       # workflow_run action (https://github.com/actions/download-artifact/issues/60)
       # so instead we get this mess:
@@ -69,12 +79,25 @@ jobs:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
         timeout-minutes: 1
 
-      - name: Edit PR Description
-        uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Update deployment status (success)
+        if: success()
+        uses: altinukshini/deployment-status@v1.0.1
+        with:
+          token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
+          environment_url: ${{ steps.netlify.outputs.deploy-url }}
+          state: "success"
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+          pr: true
+          pr_id: ${{ steps.readctx.outputs.prnumber }}
+          description: |
+            Do you trust the author of this PR? Maybe this build will steal your keys or give you malware.
+            Exercise caution. Use test accounts.
+      - name: Update deployment status (failure)
+        if: failure()
+        uses: altinukshini/deployment-status@v1.0.1
         with:
-          pull-request-number: ${{ steps.readctx.outputs.prnumber }}
-          description-message: |
-            Preview: ${{ steps.netlify.outputs.deploy-url }}
-            ⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.
+          token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
+          state: "failure"
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+          pr: true
+          pr_id: ${{ steps.readctx.outputs.prnumber }}

res/css/_components.scss

@@ -264,6 +264,7 @@
 @import "./views/rooms/_SearchBar.scss";
 @import "./views/rooms/_SendMessageComposer.scss";
 @import "./views/rooms/_Stickers.scss";
+@import "./views/rooms/_ThreadSummary.scss";
 @import "./views/rooms/_TopUnreadMessagesBar.scss";
 @import "./views/rooms/_VoiceRecordComposerTile.scss";
 @import "./views/rooms/_WhoIsTypingTile.scss";

res/css/views/right_panel/_ThreadPanel.scss

@@ -140,7 +140,7 @@ limitations under the License.
         // Account for scrollbar when hovering
         padding-top: 0;
 
-        .mx_ThreadInfo {
+        .mx_ThreadSummary {
             position: relative;
             padding-right: 11px;
 
@@ -257,28 +257,14 @@ limitations under the License.
 
 .mx_ThreadPanel_replies {
     margin-top: 8px;
-}
+    display: flex;
+    align-items: center;
+    position: relative;
 
-.mx_ThreadPanel_repliesSummary {
-    &::before {
-        content: "";
-        mask-image: url('$(res)/img/element-icons/thread-summary.svg');
-        mask-position: center;
-        display: inline-block;
-        height: 18px;
-        min-width: 18px;
-        background-color: currentColor;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        margin-right: 8px;
-        vertical-align: middle;
+    .mx_ThreadSummary_threads-amount {
+        color: $secondary-content;
+        font-size: $font-12px;
     }
-
-    color: $secondary-content;
-    font-weight: 600;
-    float: left;
-    margin-right: 12px;
-    font-size: $font-12px;
 }
 
 .mx_ThreadPanel_viewInRoom::before {

res/css/views/right_panel/_TimelineCard.scss

@@ -69,7 +69,7 @@ limitations under the License.
             margin-right: 8px;
         }
 
-        .mx_ThreadInfo {
+        .mx_ThreadSummary {
             margin-left: 36px;
             margin-right: 0;
             max-width: min(calc(100% - 36px), 600px);

res/css/views/rooms/_EventBubbleTile.scss

@@ -37,7 +37,7 @@ limitations under the License.
     margin-left: 49px;
     font-size: $font-14px;
 
-    .mx_ThreadInfo {
+    .mx_ThreadSummary {
         clear: both;
         width: fit-content;
     }
@@ -172,7 +172,7 @@ limitations under the License.
             margin-right: 32px;
         }
 
-        .mx_ThreadInfo {
+        .mx_ThreadSummary {
             float: right;
             margin-right: calc(-1 * var(--gutterSize));
         }

res/css/views/rooms/_EventTile.scss

@@ -77,7 +77,7 @@ $left-gutter: 64px;
         background-color: $alert;
     }
 
-    .mx_ThreadInfo,
+    .mx_ThreadSummary,
     .mx_ThreadSummaryIcon {
         margin-left: 64px;
     }
@@ -304,15 +304,15 @@ $left-gutter: 64px;
 .mx_RoomView_timeline_rr_enabled {
     .mx_EventTile[data-layout=group] {
 
-        .mx_ThreadInfo,
+        .mx_ThreadSummary,
         .mx_ThreadSummaryIcon,
         .mx_EventTile_line {
             /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
             margin-right: 110px;
             min-height: $font-14px;
         }
 
-        .mx_ThreadInfo {
+        .mx_ThreadSummary {
             max-width: min(calc(100% - $left-gutter - 110px), 600px); // leave space on both left & right gutters
         }
     }
@@ -680,8 +680,9 @@ $left-gutter: 64px;
     }
 }
 
+.mx_ThreadPanel_replies::before,
 .mx_ThreadSummaryIcon::before,
-.mx_ThreadInfo::before {
+.mx_ThreadSummary::before {
     content: "";
     display: inline-block;
     mask-image: url('$(res)/img/element-icons/thread-summary.svg');
@@ -707,113 +708,12 @@ $left-gutter: 64px;
     }
 }
 
-.mx_ThreadInfo {
-    min-width: 267px;
-    max-width: min(calc(100% - $left-gutter), 600px); // leave space on both left & right gutters
-    width: fit-content;
-    height: 40px;
-    position: relative;
-    background-color: $system;
-    padding-left: 12px;
-    display: flex;
-    align-items: center;
-    border-radius: 8px;
-    padding-right: 16px;
-    margin-top: 8px;
-    font-size: $font-12px;
-    color: $secondary-content;
-    box-sizing: border-box;
-    justify-content: flex-start;
-    clear: both;
-    overflow: hidden;
-    border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout
-
-    .mx_ThreadInfo_chevron {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 60px;
-        box-sizing: border-box;
-        // XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug
-        background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
-
-        opacity: 0;
-        transform: translateX(60px);
-        transition: all .1s ease-in-out;
-
-        &::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            right: 12px;
-            transform: translateY(-50%);
-            width: 12px;
-            height: 12px;
-            mask-image: url('$(res)/img/compound/chevron-right-12px.svg');
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background-color: $secondary-content;
-        }
-    }
-
-    &:hover,
-    &:focus {
-        cursor: pointer;
-        border-color: $quinary-content;
-
-        .mx_ThreadInfo_chevron {
-            opacity: 1;
-            transform: translateX(0);
-        }
-    }
-
-    &::before {
-        align-self: center; // v-align the threads icon
-    }
-}
-
-.mx_MessagePanel_narrow .mx_ThreadInfo {
+.mx_MessagePanel_narrow .mx_ThreadSummary {
     min-width: initial;
     max-width: initial;
     width: initial;
 }
 
-$threadInfoLineHeight: calc(2 * $font-12px);
-
-.mx_ThreadInfo_sender {
-    font-weight: $font-semi-bold;
-    line-height: $threadInfoLineHeight;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.mx_ThreadInfo_content {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    margin-left: 4px;
-    font-size: $font-12px;
-    line-height: $threadInfoLineHeight;
-    color: $secondary-content;
-    flex: 1;
-}
-
-.mx_ThreadInfo_avatar {
-    float: left;
-    margin-right: 8px;
-}
-
-.mx_ThreadInfo_threads-amount {
-    font-weight: $font-semi-bold;
-    position: relative;
-    padding: 0 12px 0 8px;
-    white-space: nowrap;
-    line-height: $threadInfoLineHeight;
-}
-
 .mx_EventTile[data-shape=ThreadsList] {
     --topOffset: 20px;
     --leftOffset: 46px;

res/css/views/rooms/_IRCLayout.scss

@@ -40,7 +40,7 @@ $irc-line-height: $font-18px;
             margin-right: $right-padding;
         }
 
-        .mx_ThreadInfo {
+        .mx_ThreadSummary {
             margin-right: 0;
             margin-left: 0;
         }