From de7d5e7c7e0e33a7815661007f52c5df10e3b8c6 Mon Sep 17 00:00:00 2001 From: Kerry Date: Thu, 28 Apr 2022 18:03:58 +0200 Subject: [PATCH 01/13] handle safari cocoa core data timestamps (#8440) --- src/utils/beacon/geolocation.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/utils/beacon/geolocation.ts b/src/utils/beacon/geolocation.ts index 330651b520d..e8923afbf2f 100644 --- a/src/utils/beacon/geolocation.ts +++ b/src/utils/beacon/geolocation.ts @@ -86,8 +86,13 @@ export const genericPositionFromGeolocation = (geoPosition: GeolocationPosition) const { latitude, longitude, altitude, accuracy, } = geoPosition.coords; + return { - timestamp: geoPosition.timestamp, + // safari reports geolocation timestamps as Apple Cocoa Core Data timestamp + // or ms since 1/1/2001 instead of the regular epoch + // they also use local time, not utc + // to simplify, just use Date.now() + timestamp: Date.now(), latitude, longitude, altitude, accuracy, }; }; From 7208953e5f2d22e87774d29aa0d16674554c51ff Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 28 Apr 2022 16:06:56 +0000 Subject: [PATCH 02/13] Disable the message action bar when hovering over the 1px border between threads in the threads list (#8429) Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 112e7454313..dce0c580736 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -738,6 +738,7 @@ $left-gutter: 64px; height: 1px; bottom: calc(-1 * var(--topOffset)); background-color: $quinary-content; + pointer-events: none; // disable the message action bar on hover } &::before { From 7a0b3079bef667803d92c79727a8e4cec34c19c3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 28 Apr 2022 16:33:54 +0000 Subject: [PATCH 03/13] Fix event text overflow on bubble message layout (#8391) Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 1b0c40a839a..4104ae42733 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -562,6 +562,17 @@ limitations under the License. padding-top: 0; } + .mx_EventTile { + &.mx_EventTile_info { + .mx_EventTile_line { + // Avoid overflow of event info by cancelling width settings + width: 100%; + min-width: 0; + max-width: 100%; + } + } + } + &::after { content: ""; clear: both; @@ -585,7 +596,7 @@ limitations under the License. margin-right: 0; .mx_MessageActionBar { - right: 127px; // align with that of right-column bubbles + right: 48px; // align with that of right-column bubbles } .mx_ReadReceiptGroup { From 565488a10a15344c97ae882ce37b708d2a48ed07 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 29 Apr 2022 08:29:18 +0000 Subject: [PATCH 04/13] Add margin to the location map inside ThreadView (#8442) * Add margin to the location map inside ThreadView Signed-off-by: Suguru Hirahara * Remove margin from location map inside a reply Signed-off-by: Suguru Hirahara * Add margin to the location map error message inside ThreadView Signed-off-by: Suguru Hirahara * Add margin-top to the map inside a reply Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index dce0c580736..343c823be1a 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -844,6 +844,12 @@ $left-gutter: 64px; padding-left: 0; padding-right: 0; } + + .mx_ReplyChain { + .mx_MLocationBody { + margin-top: 6px; // See: https://github.com/matrix-org/matrix-react-sdk/pull/8442 + } + } } .mx_EventTile:not([data-layout=bubble]) { @@ -883,10 +889,12 @@ $left-gutter: 64px; width: 100%; .mx_EventTile_content, + .mx_EventTile_body, .mx_HiddenBody, .mx_RedactedBody, .mx_UnknownBody, .mx_MPollBody, + .mx_MLocationBody, .mx_ReplyChain_wrapper, .mx_ReactionsRow { margin-left: $spacing-start; @@ -900,6 +908,13 @@ $left-gutter: 64px; } } + .mx_ReplyChain_wrapper { + .mx_MLocationBody { + margin-inline-start: 0; + margin-inline-end: 0; + } + } + .mx_MessageTimestamp { top: 2px !important; width: auto; From fddbc429a9de1ec37aba72e57980688702664d54 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Apr 2022 09:48:57 +0100 Subject: [PATCH 05/13] Fix issue with thread notification state ignoring initial events (#8417) --- src/components/views/rooms/EventTile.tsx | 4 +--- src/stores/notifications/ThreadNotificationState.ts | 4 ++++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 6c0bf4635e4..c822b925152 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -991,9 +991,7 @@ export class UnwrappedEventTile extends React.Component { mx_EventTile_12hr: this.props.isTwelveHour, // Note: we keep the `sending` state class for tests, not for our styles mx_EventTile_sending: !isEditing && isSending, - mx_EventTile_highlight: (this.context.timelineRenderingType === TimelineRenderingType.Notification - ? false - : this.shouldHighlight()), + mx_EventTile_highlight: this.shouldHighlight(), mx_EventTile_selected: this.props.isSelectedEvent || this.state.contextMenu, mx_EventTile_continuation: isContinuation || eventType === EventType.CallInvite, mx_EventTile_last: this.props.last, diff --git a/src/stores/notifications/ThreadNotificationState.ts b/src/stores/notifications/ThreadNotificationState.ts index 70209d398d7..2b2bcf175ce 100644 --- a/src/stores/notifications/ThreadNotificationState.ts +++ b/src/stores/notifications/ThreadNotificationState.ts @@ -31,6 +31,10 @@ export class ThreadNotificationState extends NotificationState implements IDestr super(); this.thread.on(ThreadEvent.NewReply, this.handleNewThreadReply); this.thread.on(ThreadEvent.ViewThread, this.resetThreadNotification); + if (this.thread.replyToEvent) { + // Process the current tip event + this.handleNewThreadReply(this.thread, this.thread.replyToEvent); + } } public destroy(): void { From e233cf506136baea0ff9ceddee4c6c56bb9181cd Mon Sep 17 00:00:00 2001 From: Kerry Date: Fri, 29 Apr 2022 11:12:28 +0200 Subject: [PATCH 06/13] Live location sharing: fix safari timestamps pt 2 (#8443) * handle safari cocoa core data timestamps Signed-off-by: Kerry Archibald * actually fix safari timestamp issue properly Signed-off-by: Kerry Archibald * actually fix safari timestamp issue properly Signed-off-by: Kerry Archibald --- src/utils/beacon/geolocation.ts | 3 ++- test/stores/OwnBeaconStore-test.ts | 8 +++----- test/utils/beacon/geolocation-test.ts | 7 ++++++- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/utils/beacon/geolocation.ts b/src/utils/beacon/geolocation.ts index e8923afbf2f..efc3a9b44c3 100644 --- a/src/utils/beacon/geolocation.ts +++ b/src/utils/beacon/geolocation.ts @@ -114,7 +114,8 @@ export const getGeoUri = (position: GenericPosition): string => { }; export const mapGeolocationPositionToTimedGeo = (position: GeolocationPosition): TimedGeoUri => { - return { timestamp: position.timestamp, geoUri: getGeoUri(genericPositionFromGeolocation(position)) }; + const genericPosition = genericPositionFromGeolocation(position); + return { timestamp: genericPosition.timestamp, geoUri: getGeoUri(genericPosition) }; }; /** diff --git a/test/stores/OwnBeaconStore-test.ts b/test/stores/OwnBeaconStore-test.ts index d44c12620c7..66204580fc1 100644 --- a/test/stores/OwnBeaconStore-test.ts +++ b/test/stores/OwnBeaconStore-test.ts @@ -37,7 +37,6 @@ import { } from "../test-utils"; import { makeBeaconInfoEvent, - makeGeolocationPosition, mockGeolocation, watchPositionMockImplementation, } from "../test-utils/beacon"; @@ -70,7 +69,6 @@ describe('OwnBeaconStore', () => { const room2Id = '$room2:server.org'; // returned by default geolocation mocks - const defaultLocation = makeGeolocationPosition({}); const defaultLocationUri = 'geo:54.001927,-8.253491;u=1'; // beacon_info events @@ -245,7 +243,7 @@ describe('OwnBeaconStore', () => { expect(mockClient.sendEvent).not.toHaveBeenCalled(); }); - it('does geolocation and sends location immediatley when user has live beacons', async () => { + it('does geolocation and sends location immediately when user has live beacons', async () => { localStorageGetSpy.mockReturnValue(JSON.stringify([ alicesRoom1BeaconInfo.getId(), alicesRoom2BeaconInfo.getId(), @@ -261,12 +259,12 @@ describe('OwnBeaconStore', () => { expect(mockClient.sendEvent).toHaveBeenCalledWith( room1Id, M_BEACON.name, - makeBeaconContent(defaultLocationUri, defaultLocation.timestamp, alicesRoom1BeaconInfo.getId()), + makeBeaconContent(defaultLocationUri, now, alicesRoom1BeaconInfo.getId()), ); expect(mockClient.sendEvent).toHaveBeenCalledWith( room2Id, M_BEACON.name, - makeBeaconContent(defaultLocationUri, defaultLocation.timestamp, alicesRoom2BeaconInfo.getId()), + makeBeaconContent(defaultLocationUri, now, alicesRoom2BeaconInfo.getId()), ); }); }); diff --git a/test/utils/beacon/geolocation-test.ts b/test/utils/beacon/geolocation-test.ts index f28c3748383..9b64105e622 100644 --- a/test/utils/beacon/geolocation-test.ts +++ b/test/utils/beacon/geolocation-test.ts @@ -34,11 +34,16 @@ describe('geolocation utilities', () => { let geolocation; const defaultPosition = makeGeolocationPosition({}); + // 14.03.2022 16:15 + const now = 1647270879403; + beforeEach(() => { geolocation = mockGeolocation(); + jest.spyOn(Date, 'now').mockReturnValue(now); }); afterEach(() => { + jest.spyOn(Date, 'now').mockRestore(); jest.spyOn(logger, 'error').mockRestore(); }); @@ -136,7 +141,7 @@ describe('geolocation utilities', () => { describe('mapGeolocationPositionToTimedGeo()', () => { it('maps geolocation position correctly', () => { expect(mapGeolocationPositionToTimedGeo(defaultPosition)).toEqual({ - timestamp: 1647256791840, geoUri: 'geo:54.001927,-8.253491;u=1', + timestamp: now, geoUri: 'geo:54.001927,-8.253491;u=1', }); }); }); From 6cb29f2b8da323c4066f0132dfea402e03de2a8f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Apr 2022 10:38:24 +0100 Subject: [PATCH 07/13] Try SonarCloud (#8441) --- .github/workflows/static_analysis.yaml | 13 +++++++++++++ sonar-project.properties | 16 ++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 sonar-project.properties diff --git a/.github/workflows/static_analysis.yaml b/.github/workflows/static_analysis.yaml index 8e320d99920..8f568efc9c6 100644 --- a/.github/workflows/static_analysis.yaml +++ b/.github/workflows/static_analysis.yaml @@ -86,3 +86,16 @@ jobs: - name: Run Linter run: "yarn run lint:style" + + sonarqube: + name: "SonarQube" + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + with: + fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis + - name: SonarCloud Scan + uses: SonarSource/sonarcloud-github-action@master + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} diff --git a/sonar-project.properties b/sonar-project.properties new file mode 100644 index 00000000000..afeecf737be --- /dev/null +++ b/sonar-project.properties @@ -0,0 +1,16 @@ +sonar.projectKey=matrix-react-sdk +sonar.organization=matrix-org + +# This is the name and version displayed in the SonarCloud UI. +#sonar.projectName=matrix-react-sdk +#sonar.projectVersion=1.0 + +# Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows. +#sonar.sources=. + +# Encoding of the source code. Default is default system encoding +#sonar.sourceEncoding=UTF-8 + +sonar.sources=src,res +sonar.tests=test,cypress +sonar.exclusions=__mocks__,docs From b4da870af17db1e4983c9a9ab948007eedd60026 Mon Sep 17 00:00:00 2001 From: Yaya Usman <38439166+yaya-usman@users.noreply.github.com> Date: Fri, 29 Apr 2022 12:42:40 +0300 Subject: [PATCH 08/13] Patch: "Reloading the registration page should warn about data loss" (#8377) --- src/components/structures/auth/Registration.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index c5abe526f61..ff7e41b9d58 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -139,8 +139,21 @@ export default class Registration extends React.Component { componentDidMount() { this.replaceClient(this.props.serverConfig); + //triggers a confirmation dialog for data loss before page unloads/refreshes + window.addEventListener("beforeunload", this.unloadCallback); } + componentWillUnmount() { + window.removeEventListener("beforeunload", this.unloadCallback); + } + + private unloadCallback = (event: BeforeUnloadEvent) => { + if (this.state.doingUIAuth) { + event.preventDefault(); + event.returnValue = ""; + return ""; + } + }; // TODO: [REACT-WARNING] Replace with appropriate lifecycle event // eslint-disable-next-line UNSAFE_componentWillReceiveProps(newProps) { From 92f440d9de89d416491cbfeaba139b2e5ebbc021 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Apr 2022 11:07:42 +0100 Subject: [PATCH 09/13] Consolidate deployment management into more maintained action (#8430) --- .github/workflows/element-build-and-test.yaml | 10 ++- .github/workflows/end-to-end-tests.yaml | 7 +- .github/workflows/netlify.yaml | 69 ++++++++----------- .github/workflows/static_analysis.yaml | 7 +- .github/workflows/tests.yml | 7 +- scripts/fetchdep.sh | 6 +- 6 files changed, 49 insertions(+), 57 deletions(-) diff --git a/.github/workflows/element-build-and-test.yaml b/.github/workflows/element-build-and-test.yaml index 1b736d28383..9b3d0f373a0 100644 --- a/.github/workflows/element-build-and-test.yaml +++ b/.github/workflows/element-build-and-test.yaml @@ -8,13 +8,14 @@ on: branches: [ develop, master ] repository_dispatch: types: [ upstream-sdk-notify ] +env: + # These must be set for fetchdep.sh to get the right branch + REPOSITORY: ${{ github.repository }} + PR_NUMBER: ${{ github.event.pull_request.number }} jobs: build: name: "Build Element-Web" runs-on: ubuntu-latest - env: - # This must be set for fetchdep.sh to get the right branch - PR_NUMBER: ${{github.event.number}} steps: - uses: actions/checkout@v2 @@ -90,9 +91,6 @@ jobs: app-tests: name: Element Web Integration Tests runs-on: ubuntu-latest - env: - # This must be set for fetchdep.sh to get the right branch - PR_NUMBER: ${{github.event.number}} steps: - uses: actions/checkout@v2 diff --git a/.github/workflows/end-to-end-tests.yaml b/.github/workflows/end-to-end-tests.yaml index 1feaf266e36..6c663a0e018 100644 --- a/.github/workflows/end-to-end-tests.yaml +++ b/.github/workflows/end-to-end-tests.yaml @@ -9,12 +9,13 @@ on: branches: [ develop ] repository_dispatch: types: [ upstream-sdk-notify ] +env: + # These must be set for fetchdep.sh to get the right branch + REPOSITORY: ${{ github.repository }} + PR_NUMBER: ${{ github.event.pull_request.number }} jobs: end-to-end: runs-on: ubuntu-latest - env: - # This must be set for fetchdep.sh to get the right branch - PR_NUMBER: ${{github.event.number}} container: vectorim/element-web-ci-e2etests-env:latest steps: - name: Checkout code diff --git a/.github/workflows/netlify.yaml b/.github/workflows/netlify.yaml index ac869121cda..260f8f130c5 100644 --- a/.github/workflows/netlify.yaml +++ b/.github/workflows/netlify.yaml @@ -25,40 +25,40 @@ jobs: echo "PR number: $pr_number" echo "::set-output name=prnumber::$pr_number" - - name: Create Deployment ID - uses: altinukshini/deployment-action@v1.2.6 + - name: Create Deployment + uses: bobheadxi/deployments@v1 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 + step: start + token: ${{ secrets.GITHUB_TOKEN }} + env: Netlify ref: ${{ github.event.workflow_run.head_sha }} + desc: | + Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. + Exercise caution. Use test accounts. - # There's a 'download artifact' action but it hasn't been updated for the + # 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: - name: 'Download artifact' uses: actions/github-script@v3.1.0 with: script: | - var artifacts = await github.actions.listWorkflowRunArtifacts({ - owner: context.repo.owner, - repo: context.repo.repo, - run_id: ${{github.event.workflow_run.id }}, + const artifacts = await github.actions.listWorkflowRunArtifacts({ + owner: context.repo.owner, + repo: context.repo.repo, + run_id: ${{ github.event.workflow_run.id }}, }); - var matchArtifact = artifacts.data.artifacts.filter((artifact) => { - return artifact.name == "previewbuild" + const matchArtifact = artifacts.data.artifacts.filter((artifact) => { + return artifact.name == "previewbuild" })[0]; - var download = await github.actions.downloadArtifact({ - owner: context.repo.owner, - repo: context.repo.repo, - artifact_id: matchArtifact.id, - archive_format: 'zip', + const download = await github.actions.downloadArtifact({ + owner: context.repo.owner, + repo: context.repo.repo, + artifact_id: matchArtifact.id, + archive_format: 'zip', }); - var fs = require('fs'); + const fs = require('fs'); fs.writeFileSync('${{github.workspace}}/previewbuild.zip', Buffer.from(download.data)); - name: Extract Artifacts @@ -79,25 +79,16 @@ jobs: NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} timeout-minutes: 1 - - name: Update deployment status (success) - if: success() - uses: altinukshini/deployment-status@v1.0.1 + - name: Update deployment status + uses: bobheadxi/deployments@v1 + if: always() with: - token: "${{ secrets.ELEMENT_BOT_TOKEN }}" - environment_url: ${{ steps.netlify.outputs.deploy-url }} - state: "success" + step: finish + token: ${{ secrets.GITHUB_TOKEN }} + status: ${{ job.status }} + env: ${{ steps.deployment.outputs.env }} deployment_id: ${{ steps.deployment.outputs.deployment_id }} - pr: true - pr_id: ${{ steps.readctx.outputs.prnumber }} - description: | + env_url: ${{ steps.netlify.outputs.deploy-url }} + desc: | 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: - token: "${{ secrets.ELEMENT_BOT_TOKEN }}" - state: "failure" - deployment_id: ${{ steps.deployment.outputs.deployment_id }} - pr: true - pr_id: ${{ steps.readctx.outputs.prnumber }} diff --git a/.github/workflows/static_analysis.yaml b/.github/workflows/static_analysis.yaml index 8f568efc9c6..63e939f7f9a 100644 --- a/.github/workflows/static_analysis.yaml +++ b/.github/workflows/static_analysis.yaml @@ -5,13 +5,14 @@ on: branches: [ develop, master ] repository_dispatch: types: [ upstream-sdk-notify ] +env: + # These must be set for fetchdep.sh to get the right branch + REPOSITORY: ${{ github.repository }} + PR_NUMBER: ${{ github.event.pull_request.number }} jobs: ts_lint: name: "Typescript Syntax Check" runs-on: ubuntu-latest - env: - # This must be set for fetchdep.sh to get the right branch - PR_NUMBER: ${{github.event.number}} steps: - uses: actions/checkout@v2 diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index dc11981b7cf..f160e42844d 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -5,13 +5,14 @@ on: branches: [ develop, master ] repository_dispatch: types: [ upstream-sdk-notify ] +env: + # These must be set for fetchdep.sh to get the right branch + REPOSITORY: ${{ github.repository }} + PR_NUMBER: ${{ github.event.pull_request.number }} jobs: jest: name: Jest with Codecov runs-on: ubuntu-latest - env: - # This must be set for fetchdep.sh to get the right branch - PR_NUMBER: ${{github.event.number}} steps: - name: Checkout code uses: actions/checkout@v2 diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh index 5d2e65c2844..737e87844f5 100755 --- a/scripts/fetchdep.sh +++ b/scripts/fetchdep.sh @@ -29,7 +29,7 @@ getPRInfo() { if [ -n "$number" ]; then echo "Getting info about a PR with number $number" - apiEndpoint="https://github.com/gitapi/repos/matrix-org/matrix-react-sdk/pulls/" + apiEndpoint="https://github.com/gitapi/repos/${REPOSITORY:-"matrix-org/matrix-react-sdk"}/pulls/" apiEndpoint+=$number head=$(curl $apiEndpoint | jq -r '.head.label') @@ -66,9 +66,9 @@ fi clone ${TRY_ORG} $defrepo ${TRY_BRANCH} # Try the target branch of the push or PR. -if [ -n $GITHUB_BASE_REF ]; then +if [ -n "$GITHUB_BASE_REF" ]; then clone $deforg $defrepo $GITHUB_BASE_REF -elif [ -n $BUILDKITE_PULL_REQUEST_BASE_BRANCH ]; then +elif [ -n "$BUILDKITE_PULL_REQUEST_BASE_BRANCH" ]; then clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH fi From 12e8534c2b0ac1bd363a20f074ce133417709a31 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 29 Apr 2022 11:03:39 +0000 Subject: [PATCH 10/13] Implement improved spacing for the thread list and timeline (#8337) Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_common.scss | 23 ++++++ res/css/views/right_panel/_ThreadPanel.scss | 57 +++++++++----- res/css/views/right_panel/_TimelineCard.scss | 5 -- res/css/views/rooms/_EventTile.scss | 78 +++++++++++--------- res/css/views/rooms/_ThreadSummary.scss | 10 +-- src/components/views/rooms/EventTile.tsx | 8 +- src/components/views/rooms/ThreadSummary.tsx | 2 +- 7 files changed, 114 insertions(+), 69 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 6854b485ed9..94ec5ea0115 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -692,6 +692,29 @@ legend { } } +@define-mixin ThreadsAmount { + $threadInfoLineHeight: calc(2 * $font-12px); + + color: $secondary-content; + font-weight: $font-semi-bold; + line-height: $threadInfoLineHeight; + white-space: nowrap; + position: relative; + padding: 0 $spacing-12 0 $spacing-8; +} + +@define-mixin ThreadInfoIcon { + content: ""; + display: inline-block; + mask-image: url('$(res)/img/element-icons/thread-summary.svg'); + mask-position: center; + height: 18px; + min-width: 18px; + background-color: $secondary-content !important; + mask-repeat: no-repeat; + mask-size: contain; +} + @define-mixin ListResetDefault { list-style: none; padding: 0; diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 87542cb6678..9e9c59d2cbb 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -20,10 +20,6 @@ limitations under the License. height: 100px; overflow: visible; - &:not(.mx_ThreadView).mx_BaseCard { - padding-right: 2px; - } - .mx_BaseCard_header { margin-bottom: 12px; @@ -111,15 +107,37 @@ limitations under the License. .mx_AutoHideScrollbar { background-color: $background; border-radius: 8px; - width: calc(100% - 24px); - padding-right: 18px; + padding-inline-end: 0; + overflow-y: scroll; // set gap between the thread tile and the right border + } + + // Override _GroupLayout.scss for the thread panel + .mx_GroupLayout { + .mx_EventTile { + .mx_MessageActionBar { + right: 0; + top: -36px; // 2px above EventTile + z-index: 10; // See _EventTile.scss + } + + &[data-shape=ThreadsList] { + > .mx_DisambiguatedProfile { + margin-inline-start: 0; + } + + .mx_MessageTimestamp { + position: initial; + width: auto; + } + + .mx_EventTile_line { + padding-bottom: 0; // Override mx_EventTile_line on _GroupLayout.scss + } + } + } } &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper { - /* the scrollbar is 8px wide, and we want a 12px gap with the side of the - panel. Hence the magic number, 8+4=12 */ - width: calc(100% + 6px); - padding-right: 4px; position: relative; min-height: 0; // don't displace the composer flex-grow: 1; @@ -129,9 +147,15 @@ limitations under the License. } } + .mx_RoomView_messagePanel { // To avoid the rule from being applied to .mx_ThreadPanel_empty + .mx_RoomView_messageListWrapper { + width: calc(100% + 6px); // 8px - 2px + } + } + .mx_RoomView_MessageList { - padding-left: 12px; - padding-right: 0; + padding-inline-start: $spacing-8; + padding-inline-end: $spacing-8; content-visibility: visible; } @@ -256,14 +280,14 @@ limitations under the License. } .mx_ThreadPanel_replies { - margin-top: 8px; + margin-top: $spacing-8; display: flex; align-items: center; position: relative; - .mx_ThreadSummary_threads-amount { - color: $secondary-content; - font-size: $font-12px; + .mx_ThreadPanel_ThreadsAmount { + @mixin ThreadsAmount; + font-size: $font-12px; // Same font size as the counter on the main panel } } @@ -286,7 +310,6 @@ limitations under the License. top: 0; bottom: 0; left: 0; - right: 6px; padding: 20px; h2 { diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 029c5f224a5..5a121a8f61c 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -42,11 +42,6 @@ limitations under the License. border-radius: 8px; } - .mx_AutoHideScrollbar { - padding-right: 10px; - width: calc(100% - 10px); - } - .mx_NewRoomIntro { margin-left: 36px; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 343c823be1a..a849c5fedb1 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -16,6 +16,7 @@ limitations under the License. */ $left-gutter: 64px; +$threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_EventTile { flex-shrink: 0; @@ -683,15 +684,8 @@ $left-gutter: 64px; .mx_ThreadPanel_replies::before, .mx_ThreadSummaryIcon::before, .mx_ThreadSummary::before { - content: ""; - display: inline-block; - mask-image: url('$(res)/img/element-icons/thread-summary.svg'); - mask-position: center; - height: 18px; - min-width: 18px; + @mixin ThreadInfoIcon; background-color: $secondary-content !important; - mask-repeat: no-repeat; - mask-size: contain; } .mx_ThreadSummaryIcon { @@ -715,28 +709,33 @@ $left-gutter: 64px; } .mx_EventTile[data-shape=ThreadsList] { - --topOffset: 20px; - --leftOffset: 46px; + --topOffset: $spacing-12; + --leftOffset: 48px; $borderRadius: 8px; + $padding: $spacing-8; + $hrHeight: 1px; - margin: var(--topOffset) 16px var(--topOffset) 0; + margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); // include the height of horizontal line + padding: $padding $spacing-24 $padding $padding; border-radius: $borderRadius; display: flex; flex-flow: wrap; align-items: center; - &:hover { + &:hover, + // To cancel "&.mx_EventTile:hover .mx_EventTile_line" + &:not([data-layout=bubble]):hover .mx_EventTile_line { background-color: $system; } &::after { content: ""; position: absolute; - left: var(--leftOffset); - right: 0; - height: 1px; - bottom: calc(-1 * var(--topOffset)); + left: calc(var(--leftOffset) + $padding); + right: $spacing-24; // 24px: 32px - 8px (right padding) + height: $hrHeight; + bottom: calc(-1 * var(--topOffset) - $hrHeight); // exclude the height of horizontal line background-color: $quinary-content; pointer-events: none; // disable the message action bar on hover } @@ -764,22 +763,15 @@ $left-gutter: 64px; margin-top: 0; } - padding-top: 0; - .mx_EventTile_avatar { - top: 0; - left: 0; + top: $padding; + left: $padding; } .mx_DisambiguatedProfile { - margin-left: var(--leftOffset) !important; - flex: 1; margin-right: 12px; - display: inline-flex; - // not a fan of the magic number here, but I just tweaked - // the hardcoded value of the current implementation - max-width: calc(100% - 96px); + flex: 1; } .mx_DisambiguatedProfile_displayName, @@ -801,14 +793,17 @@ $left-gutter: 64px; .mx_EventTile_line { width: 100%; box-sizing: border-box; - padding-left: var(--leftOffset) !important; border-radius: $borderRadius !important; // override 4px } + .mx_DisambiguatedProfile, + .mx_EventTile_line { + padding-inline-start: var(--leftOffset); + } + .mx_MessageTimestamp { - position: initial !important; max-width: 80px; - width: auto !important; + width: auto; } } @@ -831,6 +826,8 @@ $left-gutter: 64px; flex-direction: column; .mx_EventTile_line { + padding-top: 2px; + padding-bottom: 2px; padding-left: 0; order: 10 !important; } @@ -850,10 +847,10 @@ $left-gutter: 64px; margin-top: 6px; // See: https://github.com/matrix-org/matrix-react-sdk/pull/8442 } } - } - .mx_EventTile:not([data-layout=bubble]) { - padding-top: 14px; // due to layout differences, this odd number matches the 18px padding-top of main tl events + &:not([data-layout=bubble]) { + padding-top: $spacing-16; + } } .mx_EventTile[data-layout=bubble] { @@ -885,7 +882,7 @@ $left-gutter: 64px; } .mx_EventTile[data-layout=group] { - $spacing-start: 48px; + $spacing-start: 56px; // 56px: 64px - 8px (padding) width: 100%; .mx_EventTile_content, @@ -916,14 +913,14 @@ $left-gutter: 64px; } .mx_MessageTimestamp { - top: 2px !important; - width: auto; + top: 2px; // Align with mx_EventTile_content } .mx_EventTile_senderDetails { display: flex; align-items: center; - gap: calc(14px + $selected-message-border-width); + gap: $spacing-16; // gap between the avatar and the sender ID + padding-inline-start: $spacing-8; a { flex: 1; @@ -966,4 +963,13 @@ $left-gutter: 64px; padding-right: 11px; // align with right edge of input margin-right: 0; // align with right edge of background } + + .mx_GroupLayout { + .mx_EventTile { + .mx_EventTile_line { + padding-top: 2px; + padding-bottom: 2px; + } + } + } } diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.scss index cf26dda6898..11ff6cdbbe3 100644 --- a/res/css/views/rooms/_ThreadSummary.scss +++ b/res/css/views/rooms/_ThreadSummary.scss @@ -85,12 +85,8 @@ $threadSummaryLineHeight: calc(2 * $font-12px); } // XXX: these classes are re-used outside of the component -.mx_ThreadSummary_threads-amount { - font-weight: $font-semi-bold; - position: relative; - padding: 0 $spacing-12 0 $spacing-8; - white-space: nowrap; - line-height: $threadSummaryLineHeight; +.mx_ThreadSummary_ThreadsAmount { + @mixin ThreadsAmount; } .mx_ThreadSummary_sender { @@ -113,5 +109,5 @@ $threadSummaryLineHeight: calc(2 * $font-12px); } .mx_ThreadSummary_avatar { - margin-right: $spacing-8; + margin-inline-end: $spacing-8; } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index c822b925152..b74556ad5f0 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -517,7 +517,7 @@ export class UnwrappedEventTile extends React.Component { } return
- + { this.state.thread.length } @@ -1030,8 +1030,10 @@ export class UnwrappedEventTile extends React.Component { if (this.context.timelineRenderingType === TimelineRenderingType.Notification) { avatarSize = 24; needsSenderProfile = true; - } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) { - avatarSize = 36; + } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList || + (this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation) + ) { + avatarSize = 32; needsSenderProfile = true; } else if (eventType === EventType.RoomCreate || isBubbleMessage) { avatarSize = 0; diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx index b03b200f5c8..3cf3b03f9ac 100644 --- a/src/components/views/rooms/ThreadSummary.tsx +++ b/src/components/views/rooms/ThreadSummary.tsx @@ -58,7 +58,7 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => { }} aria-label={_t("Open thread")} > - + { countSection } From 36fd9cb0d4a77e11e3f49228fdeaa417fedb5396 Mon Sep 17 00:00:00 2001 From: Kerry Date: Fri, 29 Apr 2022 16:12:10 +0200 Subject: [PATCH 11/13] display beacon tiles in timeline regardless of labs flag (#8423) Signed-off-by: Kerry Archibald --- src/events/EventTileFactory.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/events/EventTileFactory.tsx b/src/events/EventTileFactory.tsx index f122329ee5a..17713108233 100644 --- a/src/events/EventTileFactory.tsx +++ b/src/events/EventTileFactory.tsx @@ -41,7 +41,6 @@ import MJitsiWidgetEvent from "../components/views/messages/MJitsiWidgetEvent"; import { hasText } from "../TextForEvent"; import { getMessageModerationState, MessageModerationState } from "../utils/EventUtils"; import HiddenBody from "../components/views/messages/HiddenBody"; -import SettingsStore from "../settings/SettingsStore"; import ViewSourceEvent from "../components/views/messages/ViewSourceEvent"; import { shouldDisplayAsBeaconTile } from "../utils/beacon/timeline"; @@ -218,12 +217,7 @@ export function pickFactory( // Try and pick a state event factory, if we can. if (mxEvent.isState()) { - if ( - shouldDisplayAsBeaconTile(mxEvent) && - // settings store access here temporarily during labs - // only hit when a beacon_info event is hit - SettingsStore.getValue("feature_location_share_live") - ) { + if (shouldDisplayAsBeaconTile(mxEvent)) { return MessageEventFactory; } From 2c0806392538b928e911068ce4d4199d9c3ba418 Mon Sep 17 00:00:00 2001 From: Alexander <57069715+Odyssey346@users.noreply.github.com> Date: Sat, 30 Apr 2022 17:15:20 +0200 Subject: [PATCH 12/13] Add pointer if you hover over location map (#8451) --- res/css/views/messages/_MLocationBody.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/messages/_MLocationBody.scss b/res/css/views/messages/_MLocationBody.scss index 9c7e2767d74..72202ca6e1b 100644 --- a/res/css/views/messages/_MLocationBody.scss +++ b/res/css/views/messages/_MLocationBody.scss @@ -21,6 +21,7 @@ limitations under the License. z-index: 0; // keeps the entire map under the message action bar border-radius: $timeline-image-border-radius; + cursor: pointer; } } From ad2d3a36831c01e6b33fc78a78ccb3a3a50c7e6f Mon Sep 17 00:00:00 2001 From: Yaya Usman <38439166+yaya-usman@users.noreply.github.com> Date: Sat, 30 Apr 2022 18:36:03 +0300 Subject: [PATCH 13/13] Fixes "space panel kebab menu is rendered out of view on sub spaces" (#8350) * fixes space kebab menu out of view * update-eslint: space kebab menu out of view * update: space kebap menu * update: space panel collapse behavior and kebap menu fix * update: space panel collapse behavior and kebap menu fix * updated fix --- res/css/structures/_SpacePanel.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index 1cbc7cd7352..9d23dd5fc93 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -155,6 +155,7 @@ $activeBorderColor: $primary-content; border-radius: 12px; padding: 4px; width: calc(100% - 32px); + min-width: 0; } .mx_SpaceButton_name { @@ -274,6 +275,7 @@ $activeBorderColor: $primary-content; display: flex; flex-direction: column; max-width: 250px; + min-width: 0; flex-grow: 1; .mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {