diff --git a/.eslintignore b/.eslintignore index e453170087..b715bcd4f6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,3 +2,4 @@ src/component-index.js test/end-to-end-tests/node_modules/ test/end-to-end-tests/element/ test/end-to-end-tests/synapse/ +test/end-to-end-tests/lib/ diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml index 4f9826391a..456c97d580 100644 --- a/.github/workflows/develop.yml +++ b/.github/workflows/develop.yml @@ -10,7 +10,7 @@ on: jobs: end-to-end: runs-on: ubuntu-latest - env: + env: PR_NUMBER: ${{github.event.number}} container: vectorim/element-web-ci-e2etests-env:latest steps: diff --git a/.github/workflows/layered-build.yaml b/.github/workflows/layered-build.yaml index c8717667d7..b1ecb667bc 100644 --- a/.github/workflows/layered-build.yaml +++ b/.github/workflows/layered-build.yaml @@ -1,7 +1,6 @@ name: Layered Preview Build on: pull_request: - branches: [develop] jobs: build: runs-on: ubuntu-latest diff --git a/.github/workflows/notify-element-web.yml b/.github/workflows/notify-element-web.yml new file mode 100644 index 0000000000..ef463784f3 --- /dev/null +++ b/.github/workflows/notify-element-web.yml @@ -0,0 +1,15 @@ +name: Notify element-web +on: + push: + branches: [develop] +jobs: + notify-element-web: + runs-on: ubuntu-latest + environment: develop + steps: + - name: Notify element-web repo that a new SDK build is on develop + uses: peter-evans/repository-dispatch@v1 + with: + token: ${{ secrets.ELEMENT_WEB_NOTIFY_TOKEN }} + repository: vector-im/element-web + event-type: element-web-notify diff --git a/CHANGELOG.md b/CHANGELOG.md index e6fa6c3c80..0938203e9a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,224 @@ +Changes in [3.36.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.36.0) (2021-12-06) +===================================================================================================== + +## āœØ Features + * Add unread indicator to the timelineCard header icon ([\#7156](https://github.com/matrix-org/matrix-react-sdk/pull/7156)). Fixes vector-im/element-web#19635. + * Only show core navigation elements (call/chat/notification/info) when a widget is maximised ([\#7114](https://github.com/matrix-org/matrix-react-sdk/pull/7114)). Fixes vector-im/element-web#19632. + * Improve ThreadPanel ctx menu accessibility ([\#7217](https://github.com/matrix-org/matrix-react-sdk/pull/7217)). Fixes vector-im/element-web#19885. + * Allow filtering room list during treeview navigation ([\#7219](https://github.com/matrix-org/matrix-react-sdk/pull/7219)). Fixes vector-im/element-web#14702. + * Add right panel chat timeline ([\#7112](https://github.com/matrix-org/matrix-react-sdk/pull/7112)). Fixes vector-im/element-web#19633. + * Hide server options hint when disable_custom_urls is true ([\#7215](https://github.com/matrix-org/matrix-react-sdk/pull/7215)). Fixes vector-im/element-web#19919. + * Improve right panel resize handle usability ([\#7204](https://github.com/matrix-org/matrix-react-sdk/pull/7204)). Fixes vector-im/element-web#15145. Contributed by @weeman1337. + * Spaces quick settings ([\#7196](https://github.com/matrix-org/matrix-react-sdk/pull/7196)). + * Maximised widgets always force a call to be shown in PIP mode ([\#7163](https://github.com/matrix-org/matrix-react-sdk/pull/7163)). Fixes vector-im/element-web#19637. + * Group Labs flags ([\#7190](https://github.com/matrix-org/matrix-react-sdk/pull/7190)). + * Show room context details in forward dialog ([\#7162](https://github.com/matrix-org/matrix-react-sdk/pull/7162)). Fixes vector-im/element-web#19793. + * Remove chevrons from RoomSummaryCard_Button ([\#7137](https://github.com/matrix-org/matrix-react-sdk/pull/7137)). Fixes vector-im/element-web#19644. + * Disable op/deop commands where user has no permissions ([\#7161](https://github.com/matrix-org/matrix-react-sdk/pull/7161)). Fixes vector-im/element-web#15390. + * Add option to change the size of images/videos in the timeline ([\#7017](https://github.com/matrix-org/matrix-react-sdk/pull/7017)). Fixes vector-im/element-meta#49 vector-im/element-web#1520 and vector-im/element-web#19498. + +## šŸ› Bug Fixes + * Fix left panel glow in Safari ([\#7236](https://github.com/matrix-org/matrix-react-sdk/pull/7236)). Fixes vector-im/element-web#19863. + * Fix newline on edit messages with quotes ([\#7227](https://github.com/matrix-org/matrix-react-sdk/pull/7227)). Fixes vector-im/element-web#12535. Contributed by @renancleyson-dev. + * Guard against null refs in findSiblingElement ([\#7228](https://github.com/matrix-org/matrix-react-sdk/pull/7228)). + * Tweak bottom of space panel buttons in expanded state ([\#7213](https://github.com/matrix-org/matrix-react-sdk/pull/7213)). Fixes vector-im/element-web#19921. + * Fix multiline paragraph rendering as single line ([\#7210](https://github.com/matrix-org/matrix-react-sdk/pull/7210)). Fixes vector-im/element-web#8786. Contributed by @renancleyson-dev. + * Improve room list message previews ([\#7224](https://github.com/matrix-org/matrix-react-sdk/pull/7224)). Fixes vector-im/element-web#17101 and vector-im/element-web#16169. + * Fix EmojiPicker lazy loaded rendering bug ([\#7225](https://github.com/matrix-org/matrix-react-sdk/pull/7225)). Fixes vector-im/element-web#15341. + * Prevent default avatar in UserInfo having pointer cursor ([\#7218](https://github.com/matrix-org/matrix-react-sdk/pull/7218)). Fixes vector-im/element-web#13872. + * Prevent duplicate avatars in Event List Summaries ([\#7222](https://github.com/matrix-org/matrix-react-sdk/pull/7222)). Fixes vector-im/element-web#17706. + * Respect the home page as a context for the Home space ([\#7216](https://github.com/matrix-org/matrix-react-sdk/pull/7216)). Fixes vector-im/element-web#19554. + * Fix RoomUpgradeWarningBar exploding ([\#7214](https://github.com/matrix-org/matrix-react-sdk/pull/7214)). Fixes vector-im/element-web#19920. + * Polish threads misalignments and UI diversion ([\#7209](https://github.com/matrix-org/matrix-react-sdk/pull/7209)). Fixes vector-im/element-web#19772, vector-im/element-web#19710 vector-im/element-web#19629 and vector-im/element-web#19711. + * Fix Manage Restricted Join Rule Dialog for Spaces ([\#7208](https://github.com/matrix-org/matrix-react-sdk/pull/7208)). Fixes vector-im/element-web#19610. + * Fix wrongly showing unpin in pinned messages tile with no perms ([\#7197](https://github.com/matrix-org/matrix-react-sdk/pull/7197)). Fixes vector-im/element-web#19886. + * Make image size constrained by height when using the ImageSize.Large option ([\#7171](https://github.com/matrix-org/matrix-react-sdk/pull/7171)). Fixes vector-im/element-web#19788. + * Prevent programmatic scrolling within truncated room sublists ([\#7191](https://github.com/matrix-org/matrix-react-sdk/pull/7191)). + * Remove leading slash from /addwidget Jitsi confs ([\#7175](https://github.com/matrix-org/matrix-react-sdk/pull/7175)). Fixes vector-im/element-web#19839. Contributed by @AndrewFerr. + * Fix automatic composer focus, regressed by threads work ([\#7167](https://github.com/matrix-org/matrix-react-sdk/pull/7167)). Fixes vector-im/element-web#19479. + * Show space members when not invited even if summary didn't fail ([\#7153](https://github.com/matrix-org/matrix-react-sdk/pull/7153)). Fixes vector-im/element-web#19781. + * Prevent custom power levels from breaking roles & permissions tab ([\#7160](https://github.com/matrix-org/matrix-react-sdk/pull/7160)). Fixes vector-im/element-web#19812. + * Room Context Menu should respond to tag changes ([\#7154](https://github.com/matrix-org/matrix-react-sdk/pull/7154)). Fixes vector-im/element-web#19776. + * Fix an edge case when trying to join an upgraded room ([\#7159](https://github.com/matrix-org/matrix-react-sdk/pull/7159)). + +Changes in [3.36.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.36.0-rc.1) (2021-11-30) +=============================================================================================================== + +## āœØ Features + * Add unread indicator to the timelineCard header icon ([\#7156](https://github.com/matrix-org/matrix-react-sdk/pull/7156)). Fixes vector-im/element-web#19635. + * Only show core navigation elements (call/chat/notification/info) when a widget is maximised ([\#7114](https://github.com/matrix-org/matrix-react-sdk/pull/7114)). Fixes vector-im/element-web#19632. + * Improve ThreadPanel ctx menu accessibility ([\#7217](https://github.com/matrix-org/matrix-react-sdk/pull/7217)). Fixes vector-im/element-web#19885. + * Allow filtering room list during treeview navigation ([\#7219](https://github.com/matrix-org/matrix-react-sdk/pull/7219)). Fixes vector-im/element-web#14702. + * Add right panel chat timeline ([\#7112](https://github.com/matrix-org/matrix-react-sdk/pull/7112)). Fixes vector-im/element-web#19633. + * Hide server options hint when disable_custom_urls is true ([\#7215](https://github.com/matrix-org/matrix-react-sdk/pull/7215)). Fixes vector-im/element-web#19919. + * Improve right panel resize handle usability ([\#7204](https://github.com/matrix-org/matrix-react-sdk/pull/7204)). Fixes vector-im/element-web#15145. Contributed by @weeman1337. + * Spaces quick settings ([\#7196](https://github.com/matrix-org/matrix-react-sdk/pull/7196)). + * Maximised widgets always force a call to be shown in PIP mode ([\#7163](https://github.com/matrix-org/matrix-react-sdk/pull/7163)). Fixes vector-im/element-web#19637. + * Group Labs flags ([\#7190](https://github.com/matrix-org/matrix-react-sdk/pull/7190)). + * Show room context details in forward dialog ([\#7162](https://github.com/matrix-org/matrix-react-sdk/pull/7162)). Fixes vector-im/element-web#19793. + * Remove chevrons from RoomSummaryCard_Button ([\#7137](https://github.com/matrix-org/matrix-react-sdk/pull/7137)). Fixes vector-im/element-web#19644. + * Disable op/deop commands where user has no permissions ([\#7161](https://github.com/matrix-org/matrix-react-sdk/pull/7161)). Fixes vector-im/element-web#15390. + * Add option to change the size of images/videos in the timeline ([\#7017](https://github.com/matrix-org/matrix-react-sdk/pull/7017)). Fixes vector-im/element-meta#49 vector-im/element-web#1520 and vector-im/element-web#19498. + +## šŸ› Bug Fixes + * Fix left panel glow in Safari ([\#7236](https://github.com/matrix-org/matrix-react-sdk/pull/7236)). Fixes vector-im/element-web#19863. + * Fix newline on edit messages with quotes ([\#7227](https://github.com/matrix-org/matrix-react-sdk/pull/7227)). Fixes vector-im/element-web#12535. Contributed by @renancleyson-dev. + * Guard against null refs in findSiblingElement ([\#7228](https://github.com/matrix-org/matrix-react-sdk/pull/7228)). + * Tweak bottom of space panel buttons in expanded state ([\#7213](https://github.com/matrix-org/matrix-react-sdk/pull/7213)). Fixes vector-im/element-web#19921. + * Fix multiline paragraph rendering as single line ([\#7210](https://github.com/matrix-org/matrix-react-sdk/pull/7210)). Fixes vector-im/element-web#8786. Contributed by @renancleyson-dev. + * Improve room list message previews ([\#7224](https://github.com/matrix-org/matrix-react-sdk/pull/7224)). Fixes vector-im/element-web#17101 and vector-im/element-web#16169. + * Fix EmojiPicker lazy loaded rendering bug ([\#7225](https://github.com/matrix-org/matrix-react-sdk/pull/7225)). Fixes vector-im/element-web#15341. + * Prevent default avatar in UserInfo having pointer cursor ([\#7218](https://github.com/matrix-org/matrix-react-sdk/pull/7218)). Fixes vector-im/element-web#13872. + * Prevent duplicate avatars in Event List Summaries ([\#7222](https://github.com/matrix-org/matrix-react-sdk/pull/7222)). Fixes vector-im/element-web#17706. + * Respect the home page as a context for the Home space ([\#7216](https://github.com/matrix-org/matrix-react-sdk/pull/7216)). Fixes vector-im/element-web#19554. + * Fix RoomUpgradeWarningBar exploding ([\#7214](https://github.com/matrix-org/matrix-react-sdk/pull/7214)). Fixes vector-im/element-web#19920. + * Polish threads misalignments and UI diversion ([\#7209](https://github.com/matrix-org/matrix-react-sdk/pull/7209)). Fixes vector-im/element-web#19772, vector-im/element-web#19710 vector-im/element-web#19629 and vector-im/element-web#19711. + * Fix Manage Restricted Join Rule Dialog for Spaces ([\#7208](https://github.com/matrix-org/matrix-react-sdk/pull/7208)). Fixes vector-im/element-web#19610. + * Fix wrongly showing unpin in pinned messages tile with no perms ([\#7197](https://github.com/matrix-org/matrix-react-sdk/pull/7197)). Fixes vector-im/element-web#19886. + * Make image size constrained by height when using the ImageSize.Large option ([\#7171](https://github.com/matrix-org/matrix-react-sdk/pull/7171)). Fixes vector-im/element-web#19788. + * Prevent programmatic scrolling within truncated room sublists ([\#7191](https://github.com/matrix-org/matrix-react-sdk/pull/7191)). + * Remove leading slash from /addwidget Jitsi confs ([\#7175](https://github.com/matrix-org/matrix-react-sdk/pull/7175)). Fixes vector-im/element-web#19839. Contributed by @AndrewFerr. + * Fix automatic composer focus, regressed by threads work ([\#7167](https://github.com/matrix-org/matrix-react-sdk/pull/7167)). Fixes vector-im/element-web#19479. + * Show space members when not invited even if summary didn't fail ([\#7153](https://github.com/matrix-org/matrix-react-sdk/pull/7153)). Fixes vector-im/element-web#19781. + * Prevent custom power levels from breaking roles & permissions tab ([\#7160](https://github.com/matrix-org/matrix-react-sdk/pull/7160)). Fixes vector-im/element-web#19812. + * Room Context Menu should respond to tag changes ([\#7154](https://github.com/matrix-org/matrix-react-sdk/pull/7154)). Fixes vector-im/element-web#19776. + * Fix an edge case when trying to join an upgraded room ([\#7159](https://github.com/matrix-org/matrix-react-sdk/pull/7159)). + +Changes in [3.35.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.35.1) (2021-11-22) +===================================================================================================== + + * Fixes the v3.35.0 release which failed to build correctly due to + a missing change updating types following a types update in js-sdk. + +Changes in [3.35.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.35.0) (2021-11-22) +===================================================================================================== + +## āœØ Features + * Make double-clicking the PiP take you to the call room ([\#7142](https://github.com/matrix-org/matrix-react-sdk/pull/7142)). Fixes vector-im/element-web#18421 vector-im/element-web#15920 and vector-im/element-web#18421. Contributed by @SimonBrandner. + * Add maximise widget functionality ([\#7098](https://github.com/matrix-org/matrix-react-sdk/pull/7098)). Fixes vector-im/element-web#19619, vector-im/element-web#19621 vector-im/element-web#19760 and vector-im/element-web#19619. + * Add rainfall effect ([\#7086](https://github.com/matrix-org/matrix-react-sdk/pull/7086)). Contributed by @justjosias. + * Add root folder to zip file created by export chat feature ([\#7097](https://github.com/matrix-org/matrix-react-sdk/pull/7097)). Fixes vector-im/element-web#19653 and vector-im/element-web#19653. Contributed by @aaronraimist. + * Improve VoIP UI/UX ([\#7048](https://github.com/matrix-org/matrix-react-sdk/pull/7048)). Fixes vector-im/element-web#19513 and vector-im/element-web#19513. Contributed by @SimonBrandner. + * Unified room context menus ([\#7072](https://github.com/matrix-org/matrix-react-sdk/pull/7072)). Fixes vector-im/element-web#19527 and vector-im/element-web#19527. + * In forgot password screen, show validation errors inline in the form, instead of in modals ([\#7113](https://github.com/matrix-org/matrix-react-sdk/pull/7113)). Contributed by @psrpinto. + * Implement more meta-spaces ([\#7077](https://github.com/matrix-org/matrix-react-sdk/pull/7077)). Fixes vector-im/element-web#18634 vector-im/element-web#17295 and vector-im/element-web#18634. + * Expose power level control for m.space.child ([\#7120](https://github.com/matrix-org/matrix-react-sdk/pull/7120)). + * Forget member-list query when switching out of a room ([\#7093](https://github.com/matrix-org/matrix-react-sdk/pull/7093)). Fixes vector-im/element-web#19432 and vector-im/element-web#19432. Contributed by @SimonBrandner. + * Do pre-submit availability check on username during registration ([\#6978](https://github.com/matrix-org/matrix-react-sdk/pull/6978)). Fixes vector-im/element-web#9545 and vector-im/element-web#9545. + +## šŸ› Bug Fixes + * Adjust recovery key button sizes depending on text width ([\#7134](https://github.com/matrix-org/matrix-react-sdk/pull/7134)). Fixes vector-im/element-web#19511 and vector-im/element-web#19511. Contributed by @weeman1337. + * Fix bulk invite button getting a negative count ([\#7122](https://github.com/matrix-org/matrix-react-sdk/pull/7122)). Fixes vector-im/element-web#19466 and vector-im/element-web#19466. Contributed by @renancleyson-dev. + * Fix maximised / pinned widget state being loaded correctly ([\#7146](https://github.com/matrix-org/matrix-react-sdk/pull/7146)). Fixes vector-im/element-web#19768 and vector-im/element-web#19768. + * Don't reload the page when user hits enter when entering ban reason ([\#7145](https://github.com/matrix-org/matrix-react-sdk/pull/7145)). Fixes vector-im/element-web#19763 and vector-im/element-web#19763. + * Fix timeline text when sharing room layout ([\#7140](https://github.com/matrix-org/matrix-react-sdk/pull/7140)). Fixes vector-im/element-web#19622 and vector-im/element-web#19622. + * Fix look of emoji verification ([\#7133](https://github.com/matrix-org/matrix-react-sdk/pull/7133)). Fixes vector-im/element-web#19740 and vector-im/element-web#19740. Contributed by @SimonBrandner. + * Fixes element not remembering widget hidden state per room ([\#7136](https://github.com/matrix-org/matrix-react-sdk/pull/7136)). Fixes vector-im/element-web#16672, matrix-org/element-web-rageshakes#4407, vector-im/element-web#15718 vector-im/element-web#15768 and vector-im/element-web#16672. + * Don't keep spinning if joining space child failed ([\#7129](https://github.com/matrix-org/matrix-react-sdk/pull/7129)). Fixes matrix-org/element-web-rageshakes#6813 and matrix-org/element-web-rageshakes#6813. + * Guard around SpaceStore onAccountData handler prevEvent ([\#7123](https://github.com/matrix-org/matrix-react-sdk/pull/7123)). Fixes vector-im/element-web#19705 and vector-im/element-web#19705. + * Fix missing spaces in threads copy ([\#7119](https://github.com/matrix-org/matrix-react-sdk/pull/7119)). Fixes vector-im/element-web#19702 and vector-im/element-web#19702. + * Fix hover tile border ([\#7117](https://github.com/matrix-org/matrix-react-sdk/pull/7117)). Fixes vector-im/element-web#19698 and vector-im/element-web#19698. Contributed by @SimonBrandner. + * Fix quote button ([\#7096](https://github.com/matrix-org/matrix-react-sdk/pull/7096)). Fixes vector-im/element-web#19659 and vector-im/element-web#19659. Contributed by @SimonBrandner. + * Fix space panel layout edge cases ([\#7101](https://github.com/matrix-org/matrix-react-sdk/pull/7101)). Fixes vector-im/element-web#19668 and vector-im/element-web#19668. + * Update powerlevel/role when the user changes in the user info panel ([\#7099](https://github.com/matrix-org/matrix-react-sdk/pull/7099)). Fixes vector-im/element-web#19666 and vector-im/element-web#19666. Contributed by @SimonBrandner. + * Fix avatar disappearing when setting a room topic ([\#7092](https://github.com/matrix-org/matrix-react-sdk/pull/7092)). Fixes vector-im/element-web#19226 and vector-im/element-web#19226. Contributed by @SimonBrandner. + * Fix possible infinite loop on widget start ([\#7071](https://github.com/matrix-org/matrix-react-sdk/pull/7071)). Fixes vector-im/element-web#15494 and vector-im/element-web#15494. + * Use device IDs for nameless devices in device list ([\#7081](https://github.com/matrix-org/matrix-react-sdk/pull/7081)). Fixes vector-im/element-web#19608 and vector-im/element-web#19608. + * Don't re-sort rooms on no-op RoomUpdateCause.PossibleTagChange ([\#7053](https://github.com/matrix-org/matrix-react-sdk/pull/7053)). Contributed by @bradtgmurray. + +Changes in [3.35.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.35.0-rc.1) (2021-11-17) +=============================================================================================================== + +## āœØ Features + * Make double-clicking the PiP take you to the call room ([\#7142](https://github.com/matrix-org/matrix-react-sdk/pull/7142)). Fixes vector-im/element-web#18421 vector-im/element-web#15920 and vector-im/element-web#18421. Contributed by @SimonBrandner. + * Add maximise widget functionality ([\#7098](https://github.com/matrix-org/matrix-react-sdk/pull/7098)). Fixes vector-im/element-web#19619, vector-im/element-web#19621 vector-im/element-web#19760 and vector-im/element-web#19619. + * Add rainfall effect ([\#7086](https://github.com/matrix-org/matrix-react-sdk/pull/7086)). Contributed by @justjosias. + * Add root folder to zip file created by export chat feature ([\#7097](https://github.com/matrix-org/matrix-react-sdk/pull/7097)). Fixes vector-im/element-web#19653 and vector-im/element-web#19653. Contributed by @aaronraimist. + * Improve VoIP UI/UX ([\#7048](https://github.com/matrix-org/matrix-react-sdk/pull/7048)). Fixes vector-im/element-web#19513 and vector-im/element-web#19513. Contributed by @SimonBrandner. + * Unified room context menus ([\#7072](https://github.com/matrix-org/matrix-react-sdk/pull/7072)). Fixes vector-im/element-web#19527 and vector-im/element-web#19527. + * In forgot password screen, show validation errors inline in the form, instead of in modals ([\#7113](https://github.com/matrix-org/matrix-react-sdk/pull/7113)). Contributed by @psrpinto. + * Implement more meta-spaces ([\#7077](https://github.com/matrix-org/matrix-react-sdk/pull/7077)). Fixes vector-im/element-web#18634 vector-im/element-web#17295 and vector-im/element-web#18634. + * Expose power level control for m.space.child ([\#7120](https://github.com/matrix-org/matrix-react-sdk/pull/7120)). + * Forget member-list query when switching out of a room ([\#7093](https://github.com/matrix-org/matrix-react-sdk/pull/7093)). Fixes vector-im/element-web#19432 and vector-im/element-web#19432. Contributed by @SimonBrandner. + * Do pre-submit availability check on username during registration ([\#6978](https://github.com/matrix-org/matrix-react-sdk/pull/6978)). Fixes vector-im/element-web#9545 and vector-im/element-web#9545. + +## šŸ› Bug Fixes + * Adjust recovery key button sizes depending on text width ([\#7134](https://github.com/matrix-org/matrix-react-sdk/pull/7134)). Fixes vector-im/element-web#19511 and vector-im/element-web#19511. Contributed by @weeman1337. + * Fix bulk invite button getting a negative count ([\#7122](https://github.com/matrix-org/matrix-react-sdk/pull/7122)). Fixes vector-im/element-web#19466 and vector-im/element-web#19466. Contributed by @renancleyson-dev. + * Fix maximised / pinned widget state being loaded correctly ([\#7146](https://github.com/matrix-org/matrix-react-sdk/pull/7146)). Fixes vector-im/element-web#19768 and vector-im/element-web#19768. + * Don't reload the page when user hits enter when entering ban reason ([\#7145](https://github.com/matrix-org/matrix-react-sdk/pull/7145)). Fixes vector-im/element-web#19763 and vector-im/element-web#19763. + * Fix timeline text when sharing room layout ([\#7140](https://github.com/matrix-org/matrix-react-sdk/pull/7140)). Fixes vector-im/element-web#19622 and vector-im/element-web#19622. + * Fix look of emoji verification ([\#7133](https://github.com/matrix-org/matrix-react-sdk/pull/7133)). Fixes vector-im/element-web#19740 and vector-im/element-web#19740. Contributed by @SimonBrandner. + * Fixes element not remembering widget hidden state per room ([\#7136](https://github.com/matrix-org/matrix-react-sdk/pull/7136)). Fixes vector-im/element-web#16672, matrix-org/element-web-rageshakes#4407, vector-im/element-web#15718 vector-im/element-web#15768 and vector-im/element-web#16672. + * Don't keep spinning if joining space child failed ([\#7129](https://github.com/matrix-org/matrix-react-sdk/pull/7129)). Fixes matrix-org/element-web-rageshakes#6813 and matrix-org/element-web-rageshakes#6813. + * Guard around SpaceStore onAccountData handler prevEvent ([\#7123](https://github.com/matrix-org/matrix-react-sdk/pull/7123)). Fixes vector-im/element-web#19705 and vector-im/element-web#19705. + * Fix missing spaces in threads copy ([\#7119](https://github.com/matrix-org/matrix-react-sdk/pull/7119)). Fixes vector-im/element-web#19702 and vector-im/element-web#19702. + * Fix hover tile border ([\#7117](https://github.com/matrix-org/matrix-react-sdk/pull/7117)). Fixes vector-im/element-web#19698 and vector-im/element-web#19698. Contributed by @SimonBrandner. + * Fix quote button ([\#7096](https://github.com/matrix-org/matrix-react-sdk/pull/7096)). Fixes vector-im/element-web#19659 and vector-im/element-web#19659. Contributed by @SimonBrandner. + * Fix space panel layout edge cases ([\#7101](https://github.com/matrix-org/matrix-react-sdk/pull/7101)). Fixes vector-im/element-web#19668 and vector-im/element-web#19668. + * Update powerlevel/role when the user changes in the user info panel ([\#7099](https://github.com/matrix-org/matrix-react-sdk/pull/7099)). Fixes vector-im/element-web#19666 and vector-im/element-web#19666. Contributed by @SimonBrandner. + * Fix avatar disappearing when setting a room topic ([\#7092](https://github.com/matrix-org/matrix-react-sdk/pull/7092)). Fixes vector-im/element-web#19226 and vector-im/element-web#19226. Contributed by @SimonBrandner. + * Fix possible infinite loop on widget start ([\#7071](https://github.com/matrix-org/matrix-react-sdk/pull/7071)). Fixes vector-im/element-web#15494 and vector-im/element-web#15494. + * Use device IDs for nameless devices in device list ([\#7081](https://github.com/matrix-org/matrix-react-sdk/pull/7081)). Fixes vector-im/element-web#19608 and vector-im/element-web#19608. + * Don't re-sort rooms on no-op RoomUpdateCause.PossibleTagChange ([\#7053](https://github.com/matrix-org/matrix-react-sdk/pull/7053)). Contributed by @bradtgmurray. + +Changes in [3.34.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.34.0) (2021-11-08) +===================================================================================================== + +## āœØ Features + * Improve the look of tooltips ([\#7049](https://github.com/matrix-org/matrix-react-sdk/pull/7049)). Contributed by @SimonBrandner. + * Improve the look of the spinner ([\#6083](https://github.com/matrix-org/matrix-react-sdk/pull/6083)). Contributed by @SimonBrandner. + * Polls: Creation form & start event ([\#7001](https://github.com/matrix-org/matrix-react-sdk/pull/7001)). + * Show a gray shield when encrypted by deleted session ([\#6119](https://github.com/matrix-org/matrix-react-sdk/pull/6119)). Contributed by @SimonBrandner. + * Silence some widgets for better screen reader presentation. ([\#7057](https://github.com/matrix-org/matrix-react-sdk/pull/7057)). Contributed by @ndarilek. + * Make message separator more accessible. ([\#7056](https://github.com/matrix-org/matrix-react-sdk/pull/7056)). Contributed by @ndarilek. + * Give each room directory entry the `listitem` role to correspond with the containing `list`. ([\#7035](https://github.com/matrix-org/matrix-react-sdk/pull/7035)). Contributed by @ndarilek. + * Implement RequiresClient capability for widgets ([\#7005](https://github.com/matrix-org/matrix-react-sdk/pull/7005)). Fixes vector-im/element-web#15744 and vector-im/element-web#15744. + * Respect the system high contrast setting when using system theme ([\#7043](https://github.com/matrix-org/matrix-react-sdk/pull/7043)). + * Remove redundant duplicate mimetype field which doesn't conform to spec ([\#7045](https://github.com/matrix-org/matrix-react-sdk/pull/7045)). Fixes vector-im/element-web#17145 and vector-im/element-web#17145. + * Make join button on space hierarchy action in the background ([\#7041](https://github.com/matrix-org/matrix-react-sdk/pull/7041)). Fixes vector-im/element-web#17388 and vector-im/element-web#17388. + * Add a high contrast theme (a variant of the light theme) ([\#7036](https://github.com/matrix-org/matrix-react-sdk/pull/7036)). + * Improve timeline message for restricted join rule changes ([\#6984](https://github.com/matrix-org/matrix-react-sdk/pull/6984)). Fixes vector-im/element-web#18980 and vector-im/element-web#18980. + * Improve the appearance of the font size slider ([\#7038](https://github.com/matrix-org/matrix-react-sdk/pull/7038)). + * Improve RovingTabIndex & Room List filtering performance ([\#6987](https://github.com/matrix-org/matrix-react-sdk/pull/6987)). Fixes vector-im/element-web#17864 and vector-im/element-web#17864. + * Remove outdated Spaces restricted rooms warning ([\#6927](https://github.com/matrix-org/matrix-react-sdk/pull/6927)). + * Make /msg param optional for more flexibility ([\#7028](https://github.com/matrix-org/matrix-react-sdk/pull/7028)). Fixes vector-im/element-web#19481 and vector-im/element-web#19481. + * Add decoration to space hierarchy for tiles which have already been jā€¦ ([\#6969](https://github.com/matrix-org/matrix-react-sdk/pull/6969)). Fixes vector-im/element-web#18755 and vector-im/element-web#18755. + * Add insert link button to the format bar ([\#5879](https://github.com/matrix-org/matrix-react-sdk/pull/5879)). Contributed by @SimonBrandner. + * Improve visibility of font size chooser ([\#6988](https://github.com/matrix-org/matrix-react-sdk/pull/6988)). + * Soften border-radius on selected/hovered messages ([\#6525](https://github.com/matrix-org/matrix-react-sdk/pull/6525)). Fixes vector-im/element-web#18108. Contributed by @SimonBrandner. + * Add a developer mode flag and use it for accessing space timelines ([\#6994](https://github.com/matrix-org/matrix-react-sdk/pull/6994)). Fixes vector-im/element-web#19416 and vector-im/element-web#19416. + * Position toggle switch more clearly ([\#6914](https://github.com/matrix-org/matrix-react-sdk/pull/6914)). Contributed by @CicadaCinema. + * Validate email address in forgot password dialog ([\#6983](https://github.com/matrix-org/matrix-react-sdk/pull/6983)). Fixes vector-im/element-web#9978 and vector-im/element-web#9978. Contributed by @psrpinto. + * Handle and i18n M_THREEPID_IN_USE during registration ([\#6986](https://github.com/matrix-org/matrix-react-sdk/pull/6986)). Fixes vector-im/element-web#13767 and vector-im/element-web#13767. + * For space invite previews, use room summary API to get the right member count ([\#6982](https://github.com/matrix-org/matrix-react-sdk/pull/6982)). Fixes vector-im/element-web#19123 and vector-im/element-web#19123. + * Simplify Space Panel notification badge layout ([\#6977](https://github.com/matrix-org/matrix-react-sdk/pull/6977)). Fixes vector-im/element-web#18527 and vector-im/element-web#18527. + * Use prettier hsName during 3pid registration where possible ([\#6980](https://github.com/matrix-org/matrix-react-sdk/pull/6980)). Fixes vector-im/element-web#19162 and vector-im/element-web#19162. + +## šŸ› Bug Fixes + * Add a condition to only activate the resizer which belongs to the clicked handle ([\#7055](https://github.com/matrix-org/matrix-react-sdk/pull/7055)). Fixes vector-im/element-web#19521 and vector-im/element-web#19521. + * Restore composer focus after event edit ([\#7065](https://github.com/matrix-org/matrix-react-sdk/pull/7065)). Fixes vector-im/element-web#19469 and vector-im/element-web#19469. + * Don't apply message bubble visual style to media messages ([\#7040](https://github.com/matrix-org/matrix-react-sdk/pull/7040)). + * Handle no selected screen when screen-sharing ([\#7018](https://github.com/matrix-org/matrix-react-sdk/pull/7018)). Fixes vector-im/element-web#19460 and vector-im/element-web#19460. Contributed by @SimonBrandner. + * Add history entry before completing emoji ([\#7007](https://github.com/matrix-org/matrix-react-sdk/pull/7007)). Fixes vector-im/element-web#19177 and vector-im/element-web#19177. Contributed by @RafaelGoncalves8. + * Add padding between controls on edit form in message bubbles ([\#7039](https://github.com/matrix-org/matrix-react-sdk/pull/7039)). + * Respect the roomState right container request for the Jitsi widget ([\#7033](https://github.com/matrix-org/matrix-react-sdk/pull/7033)). Fixes vector-im/element-web#16552 and vector-im/element-web#16552. + * Fix cannot read length of undefined for room upgrades ([\#7037](https://github.com/matrix-org/matrix-react-sdk/pull/7037)). Fixes vector-im/element-web#19509 and vector-im/element-web#19509. + * Cleanup re-dispatching around timelines and composers ([\#7023](https://github.com/matrix-org/matrix-react-sdk/pull/7023)). Fixes vector-im/element-web#19491 and vector-im/element-web#19491. Contributed by @SimonBrandner. + * Fix removing a room from a Space and interaction with `m.space.parent` ([\#6944](https://github.com/matrix-org/matrix-react-sdk/pull/6944)). Fixes vector-im/element-web#19363 and vector-im/element-web#19363. + * Fix recent css regression ([\#7022](https://github.com/matrix-org/matrix-react-sdk/pull/7022)). Fixes vector-im/element-web#19470 and vector-im/element-web#19470. Contributed by @CicadaCinema. + * Fix ModalManager reRender racing with itself ([\#7027](https://github.com/matrix-org/matrix-react-sdk/pull/7027)). Fixes vector-im/element-web#19489 and vector-im/element-web#19489. + * Fix fullscreening a call while connecting ([\#7019](https://github.com/matrix-org/matrix-react-sdk/pull/7019)). Fixes vector-im/element-web#19309 and vector-im/element-web#19309. Contributed by @SimonBrandner. + * Allow scrolling right in reply-quoted code block ([\#7024](https://github.com/matrix-org/matrix-react-sdk/pull/7024)). Fixes vector-im/element-web#19487 and vector-im/element-web#19487. Contributed by @SimonBrandner. + * Fix dark theme codeblock colors ([\#6384](https://github.com/matrix-org/matrix-react-sdk/pull/6384)). Fixes vector-im/element-web#17998. Contributed by @SimonBrandner. + * Show passphrase input label ([\#6992](https://github.com/matrix-org/matrix-react-sdk/pull/6992)). Fixes vector-im/element-web#19428 and vector-im/element-web#19428. Contributed by @RafaelGoncalves8. + * Always render disabled settings as disabled ([\#7014](https://github.com/matrix-org/matrix-react-sdk/pull/7014)). + * Make "Security Phrase" placeholder look consistent cross-browser ([\#6870](https://github.com/matrix-org/matrix-react-sdk/pull/6870)). Fixes vector-im/element-web#19006 and vector-im/element-web#19006. Contributed by @neer17. + * Fix direction override characters breaking member event text direction ([\#6999](https://github.com/matrix-org/matrix-react-sdk/pull/6999)). + * Remove redundant text in verification dialogs ([\#6993](https://github.com/matrix-org/matrix-react-sdk/pull/6993)). Fixes vector-im/element-web#19290 and vector-im/element-web#19290. Contributed by @RafaelGoncalves8. + * Fix space panel name overflowing ([\#6995](https://github.com/matrix-org/matrix-react-sdk/pull/6995)). Fixes vector-im/element-web#19455 and vector-im/element-web#19455. + * Fix conflicting CSS on syntax highlighted blocks ([\#6991](https://github.com/matrix-org/matrix-react-sdk/pull/6991)). Fixes vector-im/element-web#19445 and vector-im/element-web#19445. + Changes in [3.33.0](https://github.com/vector-im/element-desktop/releases/tag/v3.33.0) (2021-10-25) =================================================================================================== diff --git a/README.md b/README.md index 4588a0586e..9059c5b5b8 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ a 'skin'. A skin provides: * The containing application * Zero or more 'modules' containing non-UI functionality -As of Aug 2018, the only skin that exists is `vector-im/element-web`; it and +As of Aug 2018, the only skin that exists is [`vector-im/element-web`](https://github.com/vector-im/element-web/); it and `matrix-org/matrix-react-sdk` should effectively be considered as a single project (for instance, matrix-react-sdk bugs are currently filed against vector-im/element-web rather than this project). @@ -138,7 +138,7 @@ guide](https://classic.yarnpkg.com/docs/install) if you do not have it already. This project has not yet been migrated to Yarn 2, so please ensure `yarn --version` shows a version from the 1.x series. -`matrix-react-sdk` depends on `matrix-js-sdk`. To make use of changes in the +`matrix-react-sdk` depends on [`matrix-js-sdk`](https://github.com/matrix-org/matrix-js-sdk). To make use of changes in the latter and to ensure tests run against the develop branch of `matrix-js-sdk`, you should set up `matrix-js-sdk`: @@ -158,6 +158,9 @@ cd matrix-react-sdk git checkout develop yarn link matrix-js-sdk yarn install + +# Generate the `component-index.js` file. +yarn reskindex ``` See the [help for `yarn link`](https://classic.yarnpkg.com/docs/cli/link) for @@ -175,4 +178,4 @@ yarn test ## End-to-End tests Make sure you've got your Element development server running (by doing `yarn start` in element-web), and then in this project, run `yarn run e2etests`. -See `test/end-to-end-tests/README.md` for more information. +See [`test/end-to-end-tests/README.md`](https://github.com/matrix-org/matrix-react-sdk/blob/develop/test/end-to-end-tests/README.md) for more information. diff --git a/package.json b/package.json index 2136de8a61..71b91b5840 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.33.0", + "version": "3.36.0", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { @@ -57,6 +57,7 @@ "@babel/runtime": "^7.12.5", "@sentry/browser": "^6.11.0", "@sentry/tracing": "^6.11.0", + "@types/geojson": "^7946.0.8", "await-lock": "^2.1.0", "blurhash": "^1.1.3", "browser-encrypt-attachment": "^0.3.0", @@ -84,8 +85,10 @@ "katex": "^0.12.0", "linkifyjs": "^2.1.9", "lodash": "^4.17.20", + "maplibre-gl": "^1.15.2", + "matrix-analytics-events": "https://github.com/matrix-org/matrix-analytics-events.git#1eab4356548c97722a183912fda1ceabbe8cc7c1", "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", - "matrix-widget-api": "^0.1.0-beta.17", + "matrix-widget-api": "^0.1.0-beta.18", "minimist": "^1.2.5", "opus-recorder": "^8.0.3", "pako": "^2.0.3", @@ -155,7 +158,7 @@ "@typescript-eslint/eslint-plugin": "^4.17.0", "@typescript-eslint/parser": "^4.17.0", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1", - "allchange": "^1.0.4", + "allchange": "^1.0.6", "babel-jest": "^26.6.3", "chokidar": "^3.5.1", "concurrently": "^5.3.0", @@ -196,6 +199,7 @@ "testMatch": [ "/test/**/*-test.[jt]s?(x)" ], + "globalSetup": "/test/globalSetup.js", "setupFiles": [ "jest-canvas-mock" ], diff --git a/res/css/_common.scss b/res/css/_common.scss index 1284a5c499..6cd3792af1 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -1,7 +1,8 @@ /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd -Copyright 2017 New Vector Ltd +Copyright 2017 - 2019 New Vector Ltd +Copyright 2019 - 2021 The Matrix.org Foundation C.I.C Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -19,6 +20,7 @@ limitations under the License. @import "./_font-sizes.scss"; @import "./_font-weights.scss"; @import "./_animations.scss"; +@import url("maplibre-gl/dist/maplibre-gl.css"); $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic @@ -30,6 +32,10 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-mess $slider-dot-size: 1em; $slider-selection-dot-size: 2.4em; +$container-border-width: 8px; +$container-gap-width: 8px; // only even numbers should be used because otherwise we get 0.5px margin values. + +$timeline-image-border-radius: 8px; :root { font-size: 10px; @@ -74,11 +80,11 @@ pre, code { .error, .warning, .text-error, .text-warning { - color: $warning-color; + color: $alert; } .text-success { - color: $accent-color; + color: $accent; } .text-muted { @@ -102,7 +108,7 @@ h2 { a:hover, a:link, a:visited { - color: $accent-color-alt; + color: $accent-alt; } input[type=text], @@ -221,7 +227,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_textinput { - color: $input-lighter-fg-color; + color: $input-darker-fg-color; background-color: $input-lighter-bg-color; border: none; } @@ -238,17 +244,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { // // They are not used for layout!! #mx_theme_accentColor { - color: $accent-color; + color: $accent; } #mx_theme_secondaryAccentColor { color: $secondary-accent-color; } -#mx_theme_tertiaryAccentColor { - color: $tertiary-accent-color; -} - /* Expected z-indexes for dialogs: 4000 - Default wrapper index 4009 - Static dialog background @@ -364,7 +366,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { } .mx_Dialog_title.danger { - color: $warning-color; + color: $alert; } .mx_Dialog_cancelButton { @@ -404,49 +406,68 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { * We should go through and have one consistent set of styles for buttons throughout the app. * For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons. */ -.mx_Dialog button, .mx_Dialog input[type="submit"], .mx_Dialog_buttons button, .mx_Dialog_buttons input[type="submit"] { +.mx_Dialog button:not(.mx_Dialog_nonDialogButton), +.mx_Dialog input[type="submit"], +.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton), +.mx_Dialog_buttons input[type="submit"] { @mixin mx_DialogButton; margin-left: 0px; margin-right: 8px; // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color; - color: $accent-color; + border: 1px solid $accent; + color: $accent; background-color: $button-secondary-bg-color; font-family: inherit; } -.mx_Dialog button:last-child { +.mx_Dialog button:not(.mx_Dialog_nonDialogButton):last-child { margin-right: 0px; } -.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover, .mx_Dialog_buttons button:hover, .mx_Dialog_buttons input[type="submit"]:hover { +.mx_Dialog button:not(.mx_Dialog_nonDialogButton):hover, +.mx_Dialog input[type="submit"]:hover, +.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):hover, +.mx_Dialog_buttons input[type="submit"]:hover { @mixin mx_DialogButton_hover; } -.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus, .mx_Dialog_buttons button:focus, .mx_Dialog_buttons input[type="submit"]:focus { +.mx_Dialog button:not(.mx_Dialog_nonDialogButton):focus, +.mx_Dialog input[type="submit"]:focus, +.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):focus, +.mx_Dialog_buttons input[type="submit"]:focus { filter: brightness($focus-brightness); } -.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary, .mx_Dialog_buttons button.mx_Dialog_primary, .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary { +.mx_Dialog button.mx_Dialog_primary, +.mx_Dialog input[type="submit"].mx_Dialog_primary, +.mx_Dialog_buttons button.mx_Dialog_primary, +.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary { color: $accent-fg-color; - background-color: $accent-color; + background-color: $accent; min-width: 156px; } -.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger, .mx_Dialog_buttons button.danger, .mx_Dialog_buttons input[type="submit"].danger { - background-color: $warning-color; - border: solid 1px $warning-color; +.mx_Dialog button.danger, +.mx_Dialog input[type="submit"].danger, +.mx_Dialog_buttons button.danger, +.mx_Dialog_buttons input[type="submit"].danger { + background-color: $alert; + border: solid 1px $alert; color: $accent-fg-color; } -.mx_Dialog button.warning, .mx_Dialog input[type="submit"].warning { - border: solid 1px $warning-color; - color: $warning-color; +.mx_Dialog button.warning, +.mx_Dialog input[type="submit"].warning { + border: solid 1px $alert; + color: $alert; } -.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled, .mx_Dialog_buttons button:disabled, .mx_Dialog_buttons input[type="submit"]:disabled { +.mx_Dialog button:not(.mx_Dialog_nonDialogButton):disabled, +.mx_Dialog input[type="submit"]:disabled, +.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):disabled, +.mx_Dialog_buttons input[type="submit"]:disabled { background-color: $light-fg-color; border: solid 1px $light-fg-color; opacity: 0.7; @@ -464,6 +485,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { overflow-y: hidden; } +.mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth { + max-width: 636px; // match splash image width + + .mx_AccessibleButton_kind_link { + font-size: inherit; + padding: 0; + } +} + // TODO: Review mx_GeneralButton usage to see if it can use a different class // These classes were brought in from the old UserSettings and are included here to avoid // breaking the app. @@ -480,7 +510,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { .mx_linkButton { cursor: pointer; - color: $accent-color; + color: $accent; } .mx_TextInputDialog_label { diff --git a/res/css/_components.scss b/res/css/_components.scss index 73e25d314f..22f22aef1d 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -22,6 +22,7 @@ @import "./structures/_MyGroups.scss"; @import "./structures/_NonUrgentToastContainer.scss"; @import "./structures/_NotificationPanel.scss"; +@import "./structures/_QuickSettingsButton.scss"; @import "./structures/_RightPanel.scss"; @import "./structures/_RoomDirectory.scss"; @import "./structures/_RoomSearch.scss"; @@ -59,21 +60,21 @@ @import "./views/auth/_Welcome.scss"; @import "./views/avatars/_BaseAvatar.scss"; @import "./views/avatars/_DecoratedRoomAvatar.scss"; -@import "./views/avatars/_MemberStatusMessageAvatar.scss"; @import "./views/avatars/_WidgetAvatar.scss"; @import "./views/beta/_BetaCard.scss"; @import "./views/context_menus/_CallContextMenu.scss"; @import "./views/context_menus/_IconizedContextMenu.scss"; @import "./views/context_menus/_MessageContextMenu.scss"; -@import "./views/context_menus/_StatusMessageContextMenu.scss"; @import "./views/context_menus/_TagTileContextMenu.scss"; @import "./views/dialogs/_AddExistingToSpaceDialog.scss"; @import "./views/dialogs/_AddressPickerDialog.scss"; @import "./views/dialogs/_Analytics.scss"; +@import "./views/dialogs/_AnalyticsLearnMoreDialog.scss"; @import "./views/dialogs/_BugReportDialog.scss"; @import "./views/dialogs/_ChangelogDialog.scss"; @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss"; @import "./views/dialogs/_CommunityPrototypeInviteDialog.scss"; +@import "./views/dialogs/_CompoundDialog.scss"; @import "./views/dialogs/_ConfirmSpaceUserActionDialog.scss"; @import "./views/dialogs/_ConfirmUserActionDialog.scss"; @import "./views/dialogs/_CreateCommunityPrototypeDialog.scss"; @@ -99,6 +100,7 @@ @import "./views/dialogs/_MessageEditHistoryDialog.scss"; @import "./views/dialogs/_ModalWidgetDialog.scss"; @import "./views/dialogs/_NewSessionReviewDialog.scss"; +@import "./views/dialogs/_PollCreateDialog.scss"; @import "./views/dialogs/_RegistrationEmailPromptDialog.scss"; @import "./views/dialogs/_RoomSettingsDialog.scss"; @import "./views/dialogs/_RoomSettingsDialogBridges.scss"; @@ -142,6 +144,7 @@ @import "./views/elements/_ImageView.scss"; @import "./views/elements/_InfoTooltip.scss"; @import "./views/elements/_InlineSpinner.scss"; +@import "./views/elements/_InteractiveTooltip.scss"; @import "./views/elements/_InviteReason.scss"; @import "./views/elements/_ManageIntegsButton.scss"; @import "./views/elements/_MiniAvatarUploader.scss"; @@ -170,6 +173,7 @@ @import "./views/groups/_GroupPublicityToggle.scss"; @import "./views/groups/_GroupRoomList.scss"; @import "./views/groups/_GroupUserSettings.scss"; +@import "./views/location/_LocationPicker.scss"; @import "./views/messages/_CallEvent.scss"; @import "./views/messages/_CreateEvent.scss"; @import "./views/messages/_DateSeparator.scss"; @@ -179,7 +183,9 @@ @import "./views/messages/_MImageBody.scss"; @import "./views/messages/_MImageReplyBody.scss"; @import "./views/messages/_MJitsiWidgetEvent.scss"; +@import "./views/messages/_MLocationBody.scss"; @import "./views/messages/_MNoticeBody.scss"; +@import "./views/messages/_MPollBody.scss"; @import "./views/messages/_MStickerBody.scss"; @import "./views/messages/_MTextBody.scss"; @import "./views/messages/_MVideoBody.scss"; @@ -201,6 +207,7 @@ @import "./views/right_panel/_PinnedMessagesCard.scss"; @import "./views/right_panel/_RoomSummaryCard.scss"; @import "./views/right_panel/_ThreadPanel.scss"; +@import "./views/right_panel/_TimelineCard.scss"; @import "./views/right_panel/_UserInfo.scss"; @import "./views/right_panel/_VerificationPanel.scss"; @import "./views/right_panel/_WidgetCard.scss"; @@ -227,11 +234,13 @@ @import "./views/rooms/_NotificationBadge.scss"; @import "./views/rooms/_PinnedEventTile.scss"; @import "./views/rooms/_PresenceLabel.scss"; +@import "./views/rooms/_RecentlyViewedButton.scss"; @import "./views/rooms/_ReplyPreview.scss"; @import "./views/rooms/_ReplyTile.scss"; @import "./views/rooms/_RoomBreadcrumbs.scss"; @import "./views/rooms/_RoomHeader.scss"; @import "./views/rooms/_RoomList.scss"; +@import "./views/rooms/_RoomListHeader.scss"; @import "./views/rooms/_RoomPreviewBar.scss"; @import "./views/rooms/_RoomSublist.scss"; @import "./views/rooms/_RoomTile.scss"; @@ -249,6 +258,7 @@ @import "./views/settings/_E2eAdvancedPanel.scss"; @import "./views/settings/_EmailAddresses.scss"; @import "./views/settings/_FontScalingPanel.scss"; +@import "./views/settings/_ImageSizePanel.scss"; @import "./views/settings/_IntegrationManager.scss"; @import "./views/settings/_JoinRuleSettings.scss"; @import "./views/settings/_LayoutSwitcher.scss"; @@ -263,6 +273,7 @@ @import "./views/settings/_UpdateCheckButton.scss"; @import "./views/settings/tabs/_SettingsTab.scss"; @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss"; +@import "./views/settings/tabs/room/_NotificationSettingsTab.scss"; @import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss"; @import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss"; @import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss"; @@ -273,6 +284,7 @@ @import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss"; @import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss"; @import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss"; +@import "./views/settings/tabs/user/_SidebarUserSettingsTab.scss"; @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss"; @import "./views/spaces/_SpaceBasicSettings.scss"; @import "./views/spaces/_SpaceChildrenPicker.scss"; diff --git a/res/css/structures/_AutoHideScrollbar.scss b/res/css/structures/_AutoHideScrollbar.scss index 50842c71bc..6eba5aabbe 100644 --- a/res/css/structures/_AutoHideScrollbar.scss +++ b/res/css/structures/_AutoHideScrollbar.scss @@ -16,7 +16,7 @@ limitations under the License. // make any scrollbar grey and thin html { - scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color; + scrollbar-color: $scrollbar-thumb-color transparent; } // scrollbar-width is not inherited (but -color is, why?!), // so declare it on every element @@ -27,7 +27,6 @@ html { ::-webkit-scrollbar { width: 6px; height: 6px; - background-color: $scrollbar-track-color; } ::-webkit-scrollbar-thumb { @@ -37,11 +36,7 @@ html { // make auto-hide scrollbars not transparent again on hover .mx_AutoHideScrollbar:hover { - scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color; - - &::-webkit-scrollbar { - background-color: $scrollbar-track-color; - } + scrollbar-color: $scrollbar-thumb-color transparent; &::-webkit-scrollbar-thumb { background-color: $scrollbar-thumb-color; diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index 9f2b9e24b8..18873978d3 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -27,7 +27,6 @@ limitations under the License. width: 100%; height: 100%; opacity: 1.0; - z-index: 5000; } .mx_ContextualMenu { @@ -38,7 +37,7 @@ limitations under the License. position: absolute; font-size: $font-14px; z-index: 5001; - contain: content; + width: max-content; } .mx_ContextualMenu_right { @@ -116,3 +115,11 @@ limitations under the License. border-top: 8px solid $menu-bg-color; border-right: 8px solid transparent; } + +.mx_ContextualMenu_rightAligned { + transform: translateX(-100%); +} + +.mx_ContextualMenu_bottomAligned { + transform: translateY(-100%); +} diff --git a/res/css/structures/_CustomRoomTagPanel.scss b/res/css/structures/_CustomRoomTagPanel.scss index be1138cf5b..627644f102 100644 --- a/res/css/structures/_CustomRoomTagPanel.scss +++ b/res/css/structures/_CustomRoomTagPanel.scss @@ -44,7 +44,7 @@ limitations under the License. .mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected::before { content: ''; height: 56px; - background-color: $accent-color-alt; + background-color: $accent-alt; width: 5px; position: absolute; left: -9px; diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss index a101aba7e5..bdbd9f7643 100644 --- a/res/css/structures/_GroupFilterPanel.scss +++ b/res/css/structures/_GroupFilterPanel.scss @@ -152,7 +152,7 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected::before { content: ''; height: 100%; - background-color: $accent-color; + background-color: $accent; width: 4px; position: absolute; left: -12px; @@ -203,5 +203,5 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation } .mx_TagTile_badgeHighlight { - background-color: $warning-color; + background-color: $alert; } diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss index 5e224b1f38..8d05135a9a 100644 --- a/res/css/structures/_GroupView.scss +++ b/res/css/structures/_GroupView.scss @@ -56,7 +56,7 @@ limitations under the License. position: absolute; height: 20px; width: 20px; - background-color: $groupheader-button-color; + background-color: $header-panel-text-primary-color; mask-repeat: no-repeat; mask-size: contain; } @@ -81,13 +81,13 @@ limitations under the License. } .mx_GroupView_editable:focus { - border-bottom: 1px solid $accent-color !important; + border-bottom: 1px solid $accent !important; outline: none; box-shadow: none; } .mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) { - color: $accent-color; + color: $accent; cursor: pointer; } @@ -229,7 +229,7 @@ limitations under the License. vertical-align: top; line-height: $font-24px; padding-left: 28px; - color: $accent-color; + color: $accent; } .mx_GroupView_rooms .mx_RoomDetailList { @@ -244,7 +244,7 @@ limitations under the License. } .mx_GroupView_membershipSection { - color: $greyed-fg-color; + color: $info-plinth-fg-color; margin-top: 10px; } diff --git a/res/css/structures/_HeaderButtons.scss b/res/css/structures/_HeaderButtons.scss index 72b663ef0e..2d26e66c1c 100644 --- a/res/css/structures/_HeaderButtons.scss +++ b/res/css/structures/_HeaderButtons.scss @@ -28,7 +28,7 @@ limitations under the License. .mx_HeaderButtons::before { content: ""; - background-color: $header-divider-color; + background-color: $header-panel-text-primary-color; opacity: 0.5; margin: 6px 8px; border-radius: 1px; diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss index b530d994c6..77da167099 100644 --- a/res/css/structures/_HomePage.scss +++ b/res/css/structures/_HomePage.scss @@ -77,7 +77,7 @@ limitations under the License. font-size: $font-15px; line-height: $font-20px; color: #fff; // on all themes - background-color: $accent-color; + background-color: $accent; &::before { top: 20px; diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index a658005821..1113a5d9ef 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -101,8 +101,9 @@ $roomListCollapsedWidth: 68px; } .mx_LeftPanel_filterContainer { - margin-left: 12px; - margin-right: 12px; + margin: 0 12px; + padding: 12px 0 8px; + border-bottom: 1px solid $quinary-content; flex-shrink: 0; // to convince safari's layout engine the flexbox is fine @@ -110,8 +111,34 @@ $roomListCollapsedWidth: 68px; display: flex; align-items: center; + .mx_UserMenu { + // mini-mode for when Space Panel is disabled + margin-right: 12px; + } + + & + .mx_RoomListHeader { + margin-top: 12px; + } + + .mx_RoomSearch_shortcutPrompt { + border-radius: 6px; + background-color: $panel-actions; + padding: 2px 4px; + user-select: none; + font-size: $font-12px; + line-height: $font-15px; + font-weight: $font-semi-bold; + color: $light-fg-color; + margin-right: 6px; + } + .mx_RoomSearch_focused, .mx_RoomSearch_hasQuery { - & + .mx_LeftPanel_exploreButton { + .mx_RoomSearch_shortcutPrompt { + display: none; + } + + & + .mx_LeftPanel_exploreButton, + & + .mx_LeftPanel_recentsButton { // Cheaty way to return the occupied space to the filter input flex-basis: 0; margin: 0; @@ -129,7 +156,7 @@ $roomListCollapsedWidth: 68px; width: 32px; height: 32px; border-radius: 8px; - background-color: $roomlist-button-bg-color; + background-color: $panel-actions; position: relative; margin-left: 8px; @@ -144,15 +171,16 @@ $roomListCollapsedWidth: 68px; mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $secondary-content; + background-color: $secondary-content; } } - .mx_LeftPanel_exploreButton { + .mx_LeftPanel_exploreButton, + .mx_LeftPanel_recentsButton { width: 32px; height: 32px; border-radius: 8px; - background-color: $roomlist-button-bg-color; + background-color: $panel-actions; position: relative; margin-left: 8px; @@ -163,17 +191,28 @@ $roomListCollapsedWidth: 68px; left: 8px; width: 16px; height: 16px; - mask-image: url('$(res)/img/element-icons/roomlist/explore.svg'); mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $secondary-content; + background-color: $secondary-content; } - &.mx_LeftPanel_exploreButton_space::before { - mask-image: url('$(res)/img/element-icons/roomlist/browse.svg'); + &:hover { + background-color: $tertiary-content; + + &::before { + background-color: $background; + } } } + + .mx_LeftPanel_exploreButton::before { + mask-image: url('$(res)/img/element-icons/roomlist/explore.svg'); + } + + .mx_LeftPanel_recentsButton::before { + mask-image: url('$(res)/img/element-icons/clock.svg'); + } } .mx_LeftPanel_roomListFilterCount { @@ -231,10 +270,10 @@ $roomListCollapsedWidth: 68px; background-color: transparent; } - .mx_LeftPanel_exploreButton { + .mx_LeftPanel_exploreButton, + .mx_LeftPanel_recentsButton { margin-left: 0; margin-top: 8px; - background-color: transparent; } } } diff --git a/res/css/structures/_LeftPanelWidget.scss b/res/css/structures/_LeftPanelWidget.scss index bb04b85624..0a01a19b90 100644 --- a/res/css/structures/_LeftPanelWidget.scss +++ b/res/css/structures/_LeftPanelWidget.scss @@ -134,7 +134,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - mask-image: url('$(res)/img/feather-customised/maximise.svg'); + mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); background: $muted-fg-color; } } diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss index 407a1c270c..1a0ad60781 100644 --- a/res/css/structures/_MainSplit.scss +++ b/res/css/structures/_MainSplit.scss @@ -23,20 +23,21 @@ limitations under the License. } .mx_MainSplit > .mx_RightPanel_ResizeWrapper { - padding: 5px; - // margin left to not allow the handle to not encroach on the space for the scrollbar - margin-left: 8px; + padding: $container-gap-width; + padding-left: calc($container-gap-width / 2); // The resizer should be centered: only half of the gap-width is handled by the right panel. The other half by the RoomView. height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel - &:hover .mx_RightPanel_ResizeHandle { - // Need to use important to override element style attributes - // set by re-resizable - top: 50% !important; - transform: translate(0, -50%); + &:hover .mx_ResizeHandle_horizontal::before { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); - height: 64px !important; // to match width of the ones on roomlist - width: 4px !important; - border-radius: 4px !important; + height: 64px; // to match width of the ones on roomlist + width: 4px; + border-radius: 4px; + + content: ''; background-color: $primary-content; opacity: 0.8; diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss index fdf5cb1a03..a95bfa9eb9 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -52,7 +52,7 @@ limitations under the License. .mx_MatrixChat_syncError { color: $accent-fg-color; - background-color: $warning-bg-color; + background-color: #DF2A8B; // Only used here border-radius: 5px; display: table; padding: 30px; @@ -76,14 +76,28 @@ limitations under the License. height: 100%; } +// We'd like to remove this, but this makes matrixchat's resizehandle's +// negative margin greater than its positive padding. If it's the same +// or less, Safari and other WebKit based browsers get confused about overflows somehow and +// https://github.com/vector-im/element-web/issues/19863 happens. +.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal { + margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2); + // The condition to prevent bleeding is: (margin-left + margin-right < -11px) (IF there is NO margin on the leftPanel_wrapper) + // The resizeHandle does not change the gap between the left panel and the room view: + // the resizeHandle width is: 11px = 10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space + // right: -6px left: -6px positions the element exactly on the edge of leftPanel. + // left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap. + // We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2) +} + .mx_MatrixChat > .mx_ResizeHandle_horizontal:hover { position: relative; &::before { position: absolute; - left: 6px; top: 50%; - transform: translate(0, -50%); + left: 50%; + transform: translate(-50%, -50%); height: 64px; // to match width of the ones on roomlist width: 4px; diff --git a/res/css/structures/_QuickSettingsButton.scss b/res/css/structures/_QuickSettingsButton.scss new file mode 100644 index 0000000000..45f7447162 --- /dev/null +++ b/res/css/structures/_QuickSettingsButton.scss @@ -0,0 +1,185 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_QuickSettingsButton { + flex: 0 0 auto; + border-radius: 8px; + position: relative; + margin: 12px auto; + color: $secondary-content; + min-width: 32px; + min-height: 32px; + line-height: 32px; + + &.expanded { + margin-left: 20px; + padding-left: 44px; // align with toggle collapse button text + padding-right: 8px; + } + + &::before { + content: ""; + position: absolute; + width: 32px; + height: 32px; + left: 0; + mask-image: url('$(res)/img/element-icons/settings.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 16px; + background: $secondary-content; + } + + &:not(.expanded):hover { + background-color: $quaternary-content; + + &::before { + background-color: $primary-content; + } + } +} + +.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu { + padding: 16px; + width: max-content; + min-width: 200px; + contain: unset; // let the dropdown paint beyond the context menu + + > div > h2 { + font-weight: $font-semi-bold; + font-size: $font-15px; + line-height: $font-24px; + color: $primary-content; + margin: 0 0 16px; + } + + .mx_AccessibleButton_kind_primary_outline { + display: block; + } + + > div > h4 { + font-weight: $font-semi-bold; + font-size: $font-12px; + line-height: $font-15px; + text-transform: uppercase; + color: $tertiary-content; + margin: 20px 0 12px; + } + + .mx_QuickSettingsButton_pinToSidebarHeading { + padding-left: 24px; + position: relative; + + &::before { + background-color: $secondary-content; + content: ""; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + mask-image: url('$(res)/img/element-icons/room/pin-upright.svg'); + width: 16px; + height: 16px; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + } + } + + .mx_Checkbox { + margin-bottom: 8px; + } + + .mx_QuickSettingsButton_favouritesCheckbox, + .mx_QuickSettingsButton_peopleCheckbox { + .mx_Checkbox_background + div { + padding-left: 22px; + position: relative; + margin-left: 6px; + font-size: $font-15px; + line-height: $font-24px; + color: $secondary-content; + + &::before { + background-color: $secondary-content; + content: ""; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + width: 16px; + height: 16px; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + } + } + } + + .mx_QuickSettingsButton_favouritesCheckbox .mx_Checkbox_background + div::before { + mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg'); + } + + .mx_QuickSettingsButton_peopleCheckbox .mx_Checkbox_background + div::before { + mask-image: url('$(res)/img/element-icons/room/members.svg'); + } + + .mx_QuickSettingsButton_moreOptionsButton { + padding-left: 22px; + margin-left: 22px; + font-size: $font-15px; + line-height: $font-24px; + color: $secondary-content; + position: relative; + margin-bottom: 16px; + + &::before { + background-color: $secondary-content; + content: ""; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + width: 16px; + height: 16px; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); + } + } + + .mx_QuickSettingsButton_themePicker { + display: flex; + align-items: center; + + > h4 { + font-weight: $font-semi-bold; + font-size: $font-12px; + line-height: $font-15px; + color: $secondary-content; + text-transform: uppercase; + display: inline-block; + margin: 0; + } + + .mx_Dropdown { + min-width: 100px; + margin-left: auto; + height: min-content; + } + } +} diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index a96e8a7e76..86628a5d9e 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -22,7 +22,7 @@ limitations under the License. display: flex; flex-direction: column; border-radius: 8px; - padding: 4px 0; + padding: $container-border-width 0; box-sizing: border-box; height: 100%; contain: strict; @@ -71,10 +71,10 @@ limitations under the License. } &:hover { - background: rgba($accent-color, 0.1); + background: rgba($accent, 0.1); &::before { - background-color: $accent-color; + background-color: $accent; } } } @@ -103,44 +103,68 @@ limitations under the License. mask-position: center; } -$dot-size: 8px; -$pulse-color: $pinned-unread-color; +$dot-size: 7px; +$pulse-color: $alert; .mx_RightPanel_pinnedMessagesButton { &::before { mask-image: url('$(res)/img/element-icons/room/pin.svg'); mask-position: center; } +} +.mx_RightPanel_headerButton_unreadIndicator_bg { + position: absolute; + right: 0; + top: 0; + margin: 4px; + width: $dot-size; + height: $dot-size; + border-radius: 50%; + transform: scale(1.6); + transform-origin: center center; + background: rgba($background, 1); +} - .mx_RightPanel_pinnedMessagesButton_unreadIndicator { +.mx_RightPanel_headerButton_unreadIndicator { + position: absolute; + right: 0; + top: 0; + margin: 4px; + width: $dot-size; + height: $dot-size; + border-radius: 50%; + transform: scale(1); + background: rgba($pulse-color, 1); + box-shadow: 0 0 0 0 rgba($pulse-color, 1); + animation: mx_RightPanel_indicator_pulse 2s infinite; + animation-iteration-count: 1; + + &.mx_Indicator_gray { + background: rgba($input-darker-fg-color, 1); + box-shadow: rgba($input-darker-fg-color, 1); + } + + &::after { + content: ""; position: absolute; - right: 0; + width: inherit; + height: inherit; top: 0; - margin: 4px; - width: $dot-size; - height: $dot-size; - border-radius: 50%; + left: 0; transform: scale(1); - background: rgba($pulse-color, 1); - box-shadow: 0 0 0 0 rgba($pulse-color, 1); - animation: mx_RightPanel_indicator_pulse 2s infinite; - animation-iteration-count: 1; + transform-origin: center center; + animation-name: mx_RightPanel_indicator_pulse_shadow; + animation-duration: inherit; + animation-iteration-count: inherit; + border-radius: 50%; + background: inherit; + } +} - &::after { - content: ""; - position: absolute; - width: inherit; - height: inherit; - top: 0; - left: 0; - transform: scale(1); - transform-origin: center center; - animation-name: mx_RightPanel_indicator_pulse_shadow; - animation-duration: inherit; - animation-iteration-count: inherit; - border-radius: 50%; - background: rgba($pulse-color, 1); - } +.mx_RightPanel_timelineCardButton { + &::before { + mask-image: url('$(res)/img/element-icons/feedback.svg'); + mask-position: center; } } @@ -175,7 +199,7 @@ $pulse-color: $pinned-unread-color; .mx_RightPanel_headerButton_highlight { &::before { - background-color: $accent-color !important; + background-color: $accent !important; } } @@ -183,7 +207,7 @@ $pulse-color: $pinned-unread-color; font-size: $font-8px; border-radius: 8px; color: $accent-fg-color; - background-color: $accent-color; + background-color: $accent; font-weight: bold; position: absolute; top: -4px; @@ -229,7 +253,7 @@ $pulse-color: $pinned-unread-color; margin: 11px auto 29px auto; height: 42px; width: 42px; - background-color: $rightpanel-button-color; + background-color: $header-panel-text-primary-color; mask-repeat: no-repeat; mask-size: contain; mask-position: center; diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index b6219da9e4..0137db7ebf 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -121,7 +121,7 @@ limitations under the License. vertical-align: text-top; margin-right: 2px; content: ""; - mask: url('$(res)/img/feather-customised/user.svg'); + mask: url("$(res)/img/feather-customised/user.svg"); mask-repeat: no-repeat; mask-position: center; // scale it down and make the size slightly bigger (16 instead of 14px) @@ -132,7 +132,8 @@ limitations under the License. } } -.mx_RoomDirectory_join, .mx_RoomDirectory_preview { +.mx_RoomDirectory_join, +.mx_RoomDirectory_preview { align-self: center; white-space: nowrap; } @@ -220,3 +221,7 @@ limitations under the License. margin-top: 5px; } } + +.mx_RoomDirectory_listItem { + display: contents; +} diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss index bbd60a5ff3..a35b7e3539 100644 --- a/res/css/structures/_RoomSearch.scss +++ b/res/css/structures/_RoomSearch.scss @@ -18,7 +18,7 @@ limitations under the License. .mx_RoomSearch { flex: 1; border-radius: 8px; - background-color: $roomlist-button-bg-color; + background-color: $panel-actions; // keep border thickness consistent to prevent movement border: 1px solid transparent; height: 28px; @@ -67,12 +67,22 @@ limitations under the License. .mx_RoomSearch_clearButton { width: 16px; height: 16px; - mask-image: url('$(res)/img/element-icons/roomlist/search-clear.svg'); - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background-color: $secondary-content; margin-right: 8px; + background-color: $quinary-content; + border-radius: 50%; + position: relative; + + &::before { + content: ""; + position: absolute; + width: inherit; + height: inherit; + mask-image: url('$(res)/img/feather-customised/x.svg'); + mask-position: center; + mask-size: 12px; + mask-repeat: no-repeat; + background-color: $secondary-content; + } } } @@ -82,13 +92,20 @@ limitations under the License. } &.mx_RoomSearch_minimized { - border-radius: 32px; height: auto; width: auto; - padding: 8px; + padding: 5px; .mx_RoomSearch_icon { margin-left: 0; } + + &:hover { + background-color: $tertiary-content; + + .mx_RoomSearch_icon { + background-color: $background; + } + } } } diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss index bdfbca1afa..a54ceae49e 100644 --- a/res/css/structures/_RoomStatusBar.scss +++ b/res/css/structures/_RoomStatusBar.scss @@ -57,7 +57,7 @@ limitations under the License. .mx_RoomStatusBar_unreadMessagesBar { padding-top: 10px; - color: $warning-color; + color: $alert; cursor: pointer; } @@ -96,7 +96,7 @@ limitations under the License. } .mx_RoomStatusBar_unsentTitle { - color: $warning-color; + color: $alert; font-size: $font-15px; } @@ -167,7 +167,7 @@ limitations under the License. } .mx_RoomStatusBar_connectionLostBar_title { - color: $warning-color; + color: $alert; } .mx_RoomStatusBar_connectionLostBar_desc { diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 50fa304bd6..d47c790a0c 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -103,7 +103,7 @@ limitations under the License. .mx_RoomView_auxPanel_hiddenHighlights { border-bottom: 1px solid $primary-hairline-color; padding: 10px 26px; - color: $warning-color; + color: $alert; cursor: pointer; } @@ -120,6 +120,10 @@ limitations under the License. overflow-y: auto; flex: 1 1 0; overflow-anchor: none; + + &[data-scrollbar=false] { + overflow-y: hidden; + } } .mx_RoomView_messagePanelSearchSpinner { @@ -132,7 +136,7 @@ limitations under the License. } .mx_RoomView_messagePanelSearchSpinner::before { - background-color: $greyed-fg-color; + background-color: $info-plinth-fg-color; mask: url('$(res)/img/feather-customised/search-input.svg'); mask-repeat: no-repeat; mask-position: center; @@ -162,6 +166,7 @@ limitations under the License. flex: 1; display: flex; flex-direction: column; + margin-right: calc($container-gap-width / 2); } .mx_RoomView_statusArea { @@ -241,8 +246,8 @@ li.mx_RoomView_myReadMarker_container { } hr.mx_RoomView_myReadMarker { - border-top: solid 1px $accent-color; - border-bottom: solid 1px $accent-color; + border-top: solid 1px $accent; + border-bottom: solid 1px $accent; margin-top: 0px; position: relative; top: -1px; @@ -299,7 +304,7 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_ongoingConfCallNotification { width: 100%; text-align: center; - background-color: $warning-color; + background-color: $alert; color: $accent-fg-color; font-weight: bold; padding: 6px 0; diff --git a/res/css/structures/_SpaceHierarchy.scss b/res/css/structures/_SpaceHierarchy.scss index 5735ef016d..8ad167528b 100644 --- a/res/css/structures/_SpaceHierarchy.scss +++ b/res/css/structures/_SpaceHierarchy.scss @@ -99,7 +99,7 @@ limitations under the License. .mx_SpaceHierarchy_error { position: relative; font-weight: $font-semi-bold; - color: $notice-primary-color; + color: $alert; font-size: $font-15px; line-height: $font-18px; margin: 20px auto 12px; @@ -238,7 +238,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background-color: $accent-color; + background-color: $accent; mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg'); } } diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index 4be9d49120..781beaa149 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -20,7 +20,7 @@ $gutterSize: 16px; $activeBorderTransparentGap: 1px; $activeBackgroundColor: $panel-actions; -$activeBorderColor: $secondary-content; +$activeBorderColor: $primary-content; .mx_SpacePanel { background-color: $groupFilterPanel-bg-color; @@ -35,28 +35,57 @@ $activeBorderColor: $secondary-content; display: flex; flex-direction: column; - .mx_SpacePanel_spaceTreeWrapper { - flex: 1; - padding: 8px 8px 16px 0; - } - .mx_SpacePanel_toggleCollapse { - flex: 0 0 auto; - width: 40px; - height: 40px; - mask-position: center; - mask-size: 32px; - mask-repeat: no-repeat; - margin-left: $gutterSize; - margin-bottom: 12px; - background-color: $tertiary-content; - mask-image: url('$(res)/img/element-icons/expand-space-panel.svg'); + position: relative; + height: 32px; + width: 32px; + + &::before { + content: ""; + position: absolute; + width: 32px; + height: 32px; + left: 0; + mask-position: center; + mask-size: 24px; + mask-repeat: no-repeat; + background-color: $secondary-content; + mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); + transform: rotate(270deg); + } + + &:not(.expanded) { + position: absolute; + left: 68px; + top: 12px; + border-radius: 0 8px 8px 0; + background-color: $primary-content; + opacity: 0; + + &::before { + background-color: $background; + } + } &.expanded { - transform: scaleX(-1); + margin-left: auto; + margin-right: -8px; // overflow into .mx_UserMenu's margin without butchering its bottom stroke + border-radius: 8px; + + &::before { + transform: rotate(90deg); + } + + &:hover { + background-color: $panel-actions; + } } } + &:hover .mx_SpacePanel_toggleCollapse { + opacity: 100%; + } + ul { margin: 0; list-style: none; @@ -77,13 +106,6 @@ $activeBorderColor: $secondary-content; } } - .mx_SpaceTreeLevel { - display: flex; - flex-direction: column; - max-width: 250px; - flex-grow: 1; - } - .mx_SpaceItem { display: inline-flex; flex-flow: wrap; @@ -144,7 +166,7 @@ $activeBorderColor: $secondary-content; align-items: center; border-radius: 12px; padding: 4px; - width: 100%; + width: calc(100% - 32px); } .mx_SpaceButton_name { @@ -160,6 +182,7 @@ $activeBorderColor: $secondary-content; .mx_SpaceButton_toggleCollapse { width: $gutterSize; + min-width: $gutterSize; height: 20px; mask-position: center; mask-size: 20px; @@ -188,18 +211,36 @@ $activeBorderColor: $secondary-content; } } - &.mx_SpaceButton_home .mx_SpaceButton_icon { - background-color: #ffffff; + &.mx_SpaceButton_home, + &.mx_SpaceButton_favourites, + &.mx_SpaceButton_people, + &.mx_SpaceButton_orphans { + .mx_SpaceButton_icon { + background-color: $panel-actions; - &::before { - background-color: #3f3d3d; - mask-image: url('$(res)/img/element-icons/home.svg'); + &::before { + background-color: $secondary-content; + } } } - &.mx_SpaceButton_new .mx_SpaceButton_icon { - background-color: $roomlist-button-bg-color; + &.mx_SpaceButton_home .mx_SpaceButton_icon::before { + mask-image: url('$(res)/img/element-icons/home.svg'); + } + &.mx_SpaceButton_favourites .mx_SpaceButton_icon::before { + mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg'); + } + + &.mx_SpaceButton_people .mx_SpaceButton_icon::before { + mask-image: url('$(res)/img/element-icons/room/members.svg'); + } + + &.mx_SpaceButton_orphans .mx_SpaceButton_icon::before { + mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg'); + } + + &.mx_SpaceButton_new .mx_SpaceButton_icon { &::before { background-color: $primary-content; mask-image: url('$(res)/img/element-icons/plus.svg'); @@ -221,11 +262,11 @@ $activeBorderColor: $secondary-content; height: 20px; margin-top: auto; margin-bottom: auto; - visibility: hidden; + display: none; position: relative; &::before { - top: 2px; + top: 3px; left: 2px; content: ''; width: 16px; @@ -240,6 +281,26 @@ $activeBorderColor: $secondary-content; } } + .mx_SpaceTreeLevel { + display: flex; + flex-direction: column; + max-width: 250px; + flex-grow: 1; + + .mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial { + color: $secondary-content; + border-radius: 8px; + background-color: $panel-actions; + font-size: $font-15px !important; // override inline style + font-weight: $font-semi-bold; + line-height: $font-18px; + + & + .mx_BaseAvatar_image { + visibility: hidden; + } + } + } + .mx_SpaceButton_avatarWrapper { position: relative; } @@ -270,20 +331,19 @@ $activeBorderColor: $secondary-content; } } - .mx_SpaceButton_narrow .mx_SpaceButton_menuButton { - display: none; - } - .mx_SpaceButton:hover, .mx_SpaceButton:focus-within, .mx_SpaceButton_hasMenuOpen { - &:not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton { - visibility: visible; + &:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton { + display: block; } } /* root space buttons are bigger and not indented */ & > .mx_AutoHideScrollbar { + flex: 1; + padding: 0 8px 16px 0; + & > .mx_SpaceButton { height: $topLevelHeight; @@ -295,6 +355,24 @@ $activeBorderColor: $secondary-content; & > ul { padding-left: 0; } + + &.mx_IndicatorScrollbar_topOverflow { + mask-image: linear-gradient(180deg, transparent, black 5%); + } + + &.mx_IndicatorScrollbar_bottomOverflow { + mask-image: linear-gradient(180deg, black, black 95%, transparent); + } + + &.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow { + mask-image: linear-gradient(180deg, transparent, black 5%, black 95%, transparent); + } + } + + .mx_UserMenu { + padding: 0 2px 8px; + border-bottom: 1px solid $quinary-content; + margin: 12px 14px 4px 18px; } } @@ -306,13 +384,8 @@ $activeBorderColor: $secondary-content; line-height: $font-18px; } - .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton { - color: $accent-color; - - .mx_SpacePanel_iconInvite::before { - background-color: $accent-color; - mask-image: url('$(res)/img/element-icons/room/invite.svg'); - } + .mx_SpacePanel_iconInvite::before { + mask-image: url('$(res)/img/element-icons/room/invite.svg'); } .mx_SpacePanel_iconSettings::before { @@ -328,15 +401,11 @@ $activeBorderColor: $secondary-content; } .mx_SpacePanel_iconPlus::before { - mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg'); - } - - .mx_SpacePanel_iconHash::before { - mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg'); + mask-image: url('$(res)/img/element-icons/plus.svg'); } .mx_SpacePanel_iconExplore::before { - mask-image: url('$(res)/img/element-icons/roomlist/browse.svg'); + mask-image: url('$(res)/img/element-icons/roomlist/search.svg'); } .mx_SpacePanel_noIcon { @@ -346,6 +415,14 @@ $activeBorderColor: $secondary-content; padding-left: 5px !important; // override default iconized label style to align with header } } + + .mx_SpacePanel_contextMenu_separatorLabel { + color: $tertiary-content; + font-size: $font-10px; + line-height: $font-12px; + font-weight: $font-semi-bold; + //margin-left: 8px; + } } .mx_SpacePanel_sharePublicSpace { diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss index 51b5244c5f..0f3470b0b4 100644 --- a/res/css/structures/_SpaceRoomView.scss +++ b/res/css/structures/_SpaceRoomView.scss @@ -49,10 +49,10 @@ $SpaceRoomViewInnerWidth: 428px; } &:hover { - border-color: $accent-color; + border-color: $accent; &::before { - background-color: $accent-color; + background-color: $accent; } > span { @@ -128,7 +128,7 @@ $SpaceRoomViewInnerWidth: 428px; font-weight: $font-semi-bold; font-size: $font-12px; line-height: $font-15px; - color: $notice-primary-color; + color: $alert; margin-bottom: 28px; } @@ -427,11 +427,11 @@ $SpaceRoomViewInnerWidth: 428px; } .mx_SpaceRoomView_inviteTeammates_inviteDialogButton { - color: $accent-color; + color: $accent; &::before { mask-image: url('$(res)/img/element-icons/room/invite.svg'); - background-color: $accent-color; + background-color: $accent; } } } diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index e185197f25..3776f5dc4a 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -44,12 +44,12 @@ limitations under the License. } .mx_TabbedView_tabLabel_active { - background-color: $tab-label-active-bg-color; + background-color: $accent; color: $tab-label-active-fg-color; } .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { - background-color: $tab-label-active-icon-bg-color; + background-color: $tab-label-active-fg-color; } .mx_TabbedView_maskedIcon { @@ -89,14 +89,14 @@ limitations under the License. } .mx_TabbedView_tabLabel_active { - color: $accent-color; + color: $accent; .mx_TabbedView_tabLabel_text { - color: $accent-color; + color: $accent; } } .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { - background-color: $accent-color; + background-color: $accent; } .mx_TabbedView_maskedIcon { diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index 55181a8b53..e4fe3c1e66 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -76,7 +76,7 @@ limitations under the License. &::after { mask-image: url("$(res)/img/e2e/warning.svg"); - background-color: $notice-primary-color; + background-color: $alert; } } @@ -85,6 +85,11 @@ limitations under the License. background-color: $primary-content; } + &.mx_Toast_icon_labs::after { + mask-image: url('$(res)/img/element-icons/flask.svg'); + background-color: $secondary-content; + } + .mx_Toast_title, .mx_Toast_body { grid-column: 2; } diff --git a/res/css/structures/_UploadBar.scss b/res/css/structures/_UploadBar.scss index 7c62516b47..4fe6773930 100644 --- a/res/css/structures/_UploadBar.scss +++ b/res/css/structures/_UploadBar.scss @@ -23,6 +23,12 @@ limitations under the License. } } +.mx_ThreadView { + .mx_UploadBar { + padding-left: 0; + } +} + .mx_UploadBar_filename { margin-top: 5px; color: $muted-fg-color; diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss index c10e7f60df..5e0d4f6f15 100644 --- a/res/css/structures/_UserMenu.scss +++ b/res/css/structures/_UserMenu.scss @@ -15,141 +15,51 @@ limitations under the License. */ .mx_UserMenu { - // to make the menu button sort of aligned with the explore button below - padding-right: 6px; + box-sizing: border-box; + display: flex; + align-items: center; - &.mx_UserMenu_prototype { - // The margin & padding combination between here and the ::after is to - // align the border line with the tag panel. - margin-bottom: 6px; - - padding-right: 0; // make the right edge line up with the explore button - - .mx_UserMenu_headerButtons { - // considering we've eliminated right padding on the menu itself, we need to - // push the chevron in slightly (roughly lining up with the center of the - // plus buttons) - margin-right: 2px; - } - - // we cheat opacity on the theme colour with an after selector here - &::after { - content: ''; - border-bottom: 1px solid $primary-content; - opacity: 0.2; - display: block; - padding-top: 8px; - } + .mx_AccessibleButton { + display: flex; + align-items: center; } - .mx_UserMenu_headerButtons { + .mx_UserMenu_userAvatar { + position: relative; + } + + .mx_UserMenu_name { + font-weight: $font-semi-bold; + font-size: $font-15px; + line-height: $font-24px; + margin-left: 10px; + } + + .mx_UserMenu_cutout .mx_BaseAvatar { + mask-image: url('$(res)/img/element-icons/roomlist/dnd-avatar-mask.svg'); + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + } + + .mx_UserMenu_dndBadge { + position: absolute; + bottom: -2px; + right: -7px; width: 16px; height: 16px; - position: relative; - display: block; + border-radius: 50%; &::before { content: ''; width: 16px; height: 16px; position: absolute; - top: 0; - left: 0; mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $tertiary-content; - mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); - } - } - - .mx_UserMenu_row { - // Create a row-based flexbox to ensure items stay aligned correctly. - display: flex; - align-items: center; - - .mx_UserMenu_userAvatarContainer { - position: relative; // to make default avatars work - margin-right: 8px; - height: 32px; // to remove the unknown 4px gap the browser puts below it - padding: 3px 0; // to align with and without using doubleName - - .mx_UserMenu_userAvatar { - border-radius: 32px; // should match avatar size - object-fit: cover; - } - } - - .mx_UserMenu_doubleName { - flex: 1; - min-width: 0; // make flexbox aware that it can crush this to a tiny width - - .mx_UserMenu_userName, - .mx_UserMenu_subUserName { - display: block; - } - - .mx_UserMenu_subUserName { - color: $muted-fg-color; - font-size: $font-13px; - line-height: $font-18px; - flex: 1; - - // Ellipsize any text overflow - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - - .mx_UserMenu_userName { - font-weight: 600; - font-size: $font-15px; - line-height: $font-20px; - flex: 1; - - // Ellipsize any text overflow - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .mx_UserMenu_headerButtons { - // No special styles: the rest of the layout happens to make it work. - } - - .mx_UserMenu_dnd { - width: 24px; - height: 24px; - margin-right: 8px; - position: relative; - - &::before { - content: ''; - position: absolute; - width: 24px; - height: 24px; - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background: $muted-fg-color; - } - - &.mx_UserMenu_dnd_noisy::before { - mask-image: url('$(res)/img/element-icons/notifications.svg'); - } - - &.mx_UserMenu_dnd_muted::before { - mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg'); - } - } - } - - &.mx_UserMenu_minimized { - padding-right: 0px; - - .mx_UserMenu_userAvatarContainer { - margin-right: 0px; + background-color: $alert; + mask-image: url('$(res)/img/element-icons/roomlist/dnd.svg'); } } } @@ -157,44 +67,6 @@ limitations under the License. .mx_UserMenu_contextMenu { width: 258px; - // These override the styles already present on the user menu rather than try to - // define a new menu. They are specifically for the stacked menu when a community - // is being represented as a prototype. - &.mx_UserMenu_contextMenu_prototype { - padding-bottom: 16px; - - .mx_UserMenu_contextMenu_header { - padding-bottom: 0; - padding-top: 16px; - - &:nth-child(n + 2) { - padding-top: 8px; - } - } - - hr { - width: 85%; - opacity: 0.2; - border: none; - border-bottom: 1px solid $primary-content; - } - - &.mx_IconizedContextMenu { - > .mx_IconizedContextMenu_optionList { - margin-top: 4px; - - &::before { - border: none; - } - - > .mx_AccessibleButton { - padding-top: 2px; - padding-bottom: 2px; - } - } - } - } - &.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red { .mx_AccessibleButton { padding-top: 16px; @@ -299,6 +171,15 @@ limitations under the License. .mx_UserMenu_iconHome::before { mask-image: url('$(res)/img/element-icons/roomlist/home.svg'); } + + .mx_UserMenu_iconDnd::before { + mask-image: url('$(res)/img/element-icons/roomlist/dnd.svg'); + } + + .mx_UserMenu_iconDndOff::before { + mask-image: url('$(res)/img/element-icons/roomlist/dnd-cross.svg'); + } + .mx_UserMenu_iconHosting::before { mask-image: url('$(res)/img/element-icons/brands/element.svg'); } @@ -315,23 +196,37 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/settings.svg'); } - .mx_UserMenu_iconArchive::before { - mask-image: url('$(res)/img/element-icons/roomlist/archived.svg'); - } - .mx_UserMenu_iconMessage::before { - mask-image: url('$(res)/img/element-icons/roomlist/feedback.svg'); + mask-image: url('$(res)/img/element-icons/feedback.svg'); } .mx_UserMenu_iconSignOut::before { mask-image: url('$(res)/img/element-icons/leave.svg'); } +} - .mx_UserMenu_iconMembers::before { - mask-image: url('$(res)/img/element-icons/room/members.svg'); +.mx_UserMenu_CustomStatusSection { + margin: 0 12px 8px; + + .mx_UserMenu_CustomStatusSection_input { + position: relative; + display: flex; + + > input { + border: 1px solid $accent; + border-radius: 8px; + width: 100%; + } } - .mx_UserMenu_iconInvite::before { - mask-image: url('$(res)/img/element-icons/room/invite.svg'); + > p { + font-size: $font-12px; + line-height: $font-15px; + color: $secondary-content; + margin: 4px 0; + } + + .mx_AccessibleButton_kind_primary_outline { + display: block; } } diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss index 2c45069cfe..bf5aeb15f5 100644 --- a/res/css/structures/auth/_CompleteSecurity.scss +++ b/res/css/structures/auth/_CompleteSecurity.scss @@ -63,7 +63,7 @@ limitations under the License. margin-inline-start: 18px; &.warning { - color: $warning-color; + color: $alert; } } } diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss index c4aaaca1d0..2290b6a345 100644 --- a/res/css/structures/auth/_Login.scss +++ b/res/css/structures/auth/_Login.scss @@ -50,7 +50,7 @@ limitations under the License. } .mx_Login_error { - color: $warning-color; + color: $alert; font-weight: bold; text-align: center; margin-top: 12px; @@ -63,7 +63,7 @@ limitations under the License. } .mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal { - color: $orange-warning-color; + color: #ff8d13; // Only used here } .mx_Login_type_container { @@ -82,7 +82,7 @@ limitations under the License. .mx_Login_underlinedServerName { width: max-content; - border-bottom: 1px dashed $accent-color; + border-bottom: 1px dashed $accent; } div.mx_AccessibleButton_kind_link.mx_Login_forgot { diff --git a/res/css/structures/auth/_SetupEncryptionBody.scss b/res/css/structures/auth/_SetupEncryptionBody.scss index 24ee114544..f40e31280b 100644 --- a/res/css/structures/auth/_SetupEncryptionBody.scss +++ b/res/css/structures/auth/_SetupEncryptionBody.scss @@ -19,6 +19,6 @@ limitations under the License. margin-top: $font-14px; a.mx_SetupEncryptionBody_reset_link:is(:link, :hover, :visited) { - color: $warning-color; + color: $alert; } } diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 3c2736459a..8c6b6bdff0 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -19,7 +19,7 @@ limitations under the License. width: 500px; font-size: $font-12px; color: $authpage-secondary-color; - background-color: $authpage-body-bg-color; + background-color: $background; border-radius: 0 4px 4px 0; padding: 25px 60px; box-sizing: border-box; @@ -55,7 +55,7 @@ limitations under the License. .mx_Field input, .mx_Field select { color: $authpage-primary-color; - background-color: $authpage-body-bg-color; + background-color: $background; } .mx_Field_labelAlwaysTopLeft label, @@ -64,11 +64,11 @@ limitations under the License. .mx_Field input:not(:placeholder-shown) + label, .mx_Field textarea:focus + label, .mx_Field textarea:not(:placeholder-shown) + label { - background-color: $authpage-body-bg-color; + background-color: $background; } input.error { - color: $warning-color; + color: $alert; } .mx_Field input { @@ -88,7 +88,7 @@ limitations under the License. } .mx_Dropdown_menu { - background-color: $authpage-body-bg-color; + background-color: $background; .mx_Dropdown_option_highlight { background-color: $authpage-focus-bg-color; diff --git a/res/css/views/auth/_AuthButtons.scss b/res/css/views/auth/_AuthButtons.scss index 3a2ad2adf8..a4a3cac37f 100644 --- a/res/css/views/auth/_AuthButtons.scss +++ b/res/css/views/auth/_AuthButtons.scss @@ -38,7 +38,7 @@ limitations under the License. margin-right: 4px; min-width: 80px; - background-color: $accent-color; + background-color: $accent; color: $background; cursor: pointer; diff --git a/res/css/views/auth/_CompleteSecurityBody.scss b/res/css/views/auth/_CompleteSecurityBody.scss index 46b7abe2cc..c23f53bd21 100644 --- a/res/css/views/auth/_CompleteSecurityBody.scss +++ b/res/css/views/auth/_CompleteSecurityBody.scss @@ -18,7 +18,7 @@ limitations under the License. .mx_CompleteSecurityBody { width: 600px; color: $authpage-primary-color; - background-color: $authpage-body-bg-color; + background-color: $background; border-radius: 4px; padding: 20px; box-sizing: border-box; diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss index ec07b765fd..a37683935a 100644 --- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss +++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss @@ -56,7 +56,7 @@ limitations under the License. } .mx_InteractiveAuthEntryComponents_msisdnEntry:focus { - border: 1px solid $accent-color; + border: 1px solid $accent; } .mx_InteractiveAuthEntryComponents_msisdnSubmit { @@ -78,7 +78,7 @@ limitations under the License. } .mx_InteractiveAuthEntryComponents_termsSubmit:disabled { - background-color: $accent-color-darker; + background-color: #92caad; // Only used here cursor: default; } diff --git a/res/css/views/auth/_PassphraseField.scss b/res/css/views/auth/_PassphraseField.scss index bf8e7f4438..a197ebbe03 100644 --- a/res/css/views/auth/_PassphraseField.scss +++ b/res/css/views/auth/_PassphraseField.scss @@ -14,9 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -$PassphraseStrengthHigh: $accent-color; +$PassphraseStrengthHigh: $accent; $PassphraseStrengthMedium: $username-variant5-color; -$PassphraseStrengthLow: $notice-primary-color; +$PassphraseStrengthLow: $alert; progress.mx_PassphraseField_progress { appearance: none; diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss index cbddd97e18..964e815626 100644 --- a/res/css/views/avatars/_BaseAvatar.scss +++ b/res/css/views/avatars/_BaseAvatar.scss @@ -27,11 +27,17 @@ limitations under the License. // https://bugzilla.mozilla.org/show_bug.cgi?id=255139 display: inline-block; user-select: none; + + &.mx_RoomAvatar_isSpaceRoom { + &.mx_BaseAvatar_image, .mx_BaseAvatar_image { + border-radius: 8px; + } + } } .mx_BaseAvatar_initial { position: absolute; - left: 0px; + left: 0; color: $avatar-initial-color; text-align: center; speak: none; @@ -43,5 +49,5 @@ limitations under the License. object-fit: cover; border-radius: 125px; vertical-align: top; - background-color: $avatar-bg-color; + background-color: $background; } diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss index 4922068462..60cd18520a 100644 --- a/res/css/views/avatars/_DecoratedRoomAvatar.scss +++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss @@ -56,7 +56,7 @@ limitations under the License. } .mx_DecoratedRoomAvatar_icon_online::before { - background-color: $presence-online; + background-color: $accent; } .mx_DecoratedRoomAvatar_icon_away::before { diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss index ae7922e802..268d7304ad 100644 --- a/res/css/views/beta/_BetaCard.scss +++ b/res/css/views/beta/_BetaCard.scss @@ -85,7 +85,7 @@ limitations under the License. } .mx_BetaCard_betaPill { - background-color: $accent-color-alt; + background-color: $accent-alt; padding: 4px 10px; border-radius: 8px; text-transform: uppercase; @@ -100,7 +100,7 @@ limitations under the License. } } -$pulse-color: $accent-color-alt; +$pulse-color: $accent-alt; $dot-size: 12px; .mx_BetaDot { diff --git a/res/css/views/context_menus/_IconizedContextMenu.scss b/res/css/views/context_menus/_IconizedContextMenu.scss index ca40f18cd4..56e98fa50e 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.scss +++ b/res/css/views/context_menus/_IconizedContextMenu.scss @@ -17,6 +17,7 @@ limitations under the License. // A context menu that largely fits the | [icon] [label] | format. .mx_IconizedContextMenu { min-width: 146px; + width: max-content; .mx_IconizedContextMenu_optionList { & > * { @@ -58,6 +59,11 @@ limitations under the License. border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu } + // round all corners of the only button for the hover effect to be bounded + &:first-child:last-child .mx_AccessibleButton:first-child:last-child { + border-radius: 8px; // radius matches .mx_ContextualMenu + } + .mx_AccessibleButton { // pad the inside of the button so that the hover background is padded too padding-top: 12px; @@ -119,27 +125,35 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $primary-content; + background-color: $secondary-content; } } .mx_IconizedContextMenu_optionList_red { .mx_AccessibleButton { - color: $warning-color !important; + color: $alert !important; } .mx_IconizedContextMenu_icon::before { - background-color: $warning-color; + background-color: $alert; + } + } + + .mx_IconizedContextMenu_option_red { + color: $alert !important; + + .mx_IconizedContextMenu_icon::before { + background-color: $alert; } } .mx_IconizedContextMenu_active { &.mx_AccessibleButton, .mx_AccessibleButton { - color: $accent-color !important; + color: $accent !important; } .mx_IconizedContextMenu_icon::before { - background-color: $accent-color; + background-color: $accent; } } @@ -162,4 +176,9 @@ limitations under the License. .mx_IconizedContextMenu_unchecked::before { content: unset; } + + .mx_IconizedContextMenu_sublabel { + margin-left: 20px; + color: $tertiary-content; + } } diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss index 47646c3820..0189384dd9 100644 --- a/res/css/views/context_menus/_MessageContextMenu.scss +++ b/res/css/views/context_menus/_MessageContextMenu.scss @@ -54,6 +54,10 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/settings/appearance.svg'); } + .mx_MessageContextMenu_iconEndPoll::before { + mask-image: url('$(res)/img/element-icons/check-white.svg'); + } + .mx_MessageContextMenu_iconForward::before { mask-image: url('$(res)/img/element-icons/message/fwd.svg'); } diff --git a/res/css/views/context_menus/_StatusMessageContextMenu.scss b/res/css/views/context_menus/_StatusMessageContextMenu.scss deleted file mode 100644 index 1a97fb56c7..0000000000 --- a/res/css/views/context_menus/_StatusMessageContextMenu.scss +++ /dev/null @@ -1,65 +0,0 @@ -/* -Copyright 2018 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.mx_StatusMessageContextMenu { - padding: 10px; -} - -.mx_StatusMessageContextMenu_form { - display: flex; - flex-direction: column; -} - -input.mx_StatusMessageContextMenu_message { - border-radius: 4px; - border: 1px solid $input-border-color; - padding: 6.5px 11px; - background-color: $background; - font-weight: normal; - margin: 0 0 10px; -} - -.mx_StatusMessageContextMenu_message::placeholder { - color: $memberstatus-placeholder-color; -} - -.mx_StatusMessageContextMenu_actionContainer { - display: flex; -} - -.mx_StatusMessageContextMenu_submit, -.mx_StatusMessageContextMenu_clear { - @mixin mx_DialogButton; - align-self: start; - font-size: $font-12px; - padding: 6px 1em; - border: 1px solid transparent; - margin-right: 10px; -} - -.mx_StatusMessageContextMenu_submit[disabled] { - opacity: 0.49; -} - -.mx_StatusMessageContextMenu_clear { - color: $warning-color; - background-color: transparent; - border: 1px solid $warning-color; -} - -.mx_StatusMessageContextMenu_actionContainer .mx_Spinner { - justify-content: flex-start; -} diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss index 8b19f506f5..5d53a99661 100644 --- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss +++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss @@ -98,7 +98,7 @@ limitations under the License. font-weight: $font-semi-bold; font-size: $font-15px; line-height: $font-18px; - color: $notice-primary-color; + color: $alert; } .mx_AddExistingToSpace_errorCaption { @@ -199,7 +199,7 @@ limitations under the License. .mx_Dropdown_menu { .mx_SubspaceSelector_dropdownOptionActive { - color: $accent-color; + color: $accent; padding-right: 32px; position: relative; @@ -213,7 +213,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background-color: $accent-color; + background-color: $accent; mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg'); } } diff --git a/res/css/views/dialogs/_AddressPickerDialog.scss b/res/css/views/dialogs/_AddressPickerDialog.scss index a1147e6fbc..44e9f94c5f 100644 --- a/res/css/views/dialogs/_AddressPickerDialog.scss +++ b/res/css/views/dialogs/_AddressPickerDialog.scss @@ -61,7 +61,7 @@ limitations under the License. .mx_AddressPickerDialog_error { margin-top: 10px; - color: $warning-color; + color: $alert; } .mx_AddressPickerDialog_cancel { diff --git a/res/css/views/dialogs/_Analytics.scss b/res/css/views/dialogs/_Analytics.scss index e403d3b207..b0be14d684 100644 --- a/res/css/views/dialogs/_Analytics.scss +++ b/res/css/views/dialogs/_Analytics.scss @@ -16,4 +16,8 @@ limitations under the License. .mx_AnalyticsModal table { margin: 10px 0px; + + .mx_AnalyticsModal_label { + width: 400px; + } } diff --git a/res/css/views/dialogs/_AnalyticsLearnMoreDialog.scss b/res/css/views/dialogs/_AnalyticsLearnMoreDialog.scss new file mode 100644 index 0000000000..7a3edd5f7d --- /dev/null +++ b/res/css/views/dialogs/_AnalyticsLearnMoreDialog.scss @@ -0,0 +1,64 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_AnalyticsLearnMoreDialog { + max-width: 500px; + .mx_AnalyticsLearnMore_image_holder { + background-image: url('$(res)/img/element-shiny.svg'); + background-repeat: no-repeat; + background-position: center top; + height: 112px; + padding: 20px 0px; + } + + .mx_Dialog_content { + margin-bottom: 0px; + } + + .mx_AnalyticsLearnMore_copy { + border-bottom: 1px solid $menu-border-color; + padding-bottom: 20px; + margin-bottom: 20px; + } + + a { + color: $accent; + text-decoration: none; + } + + .mx_AnalyticsPolicyLink { + display: inline-block; + mask-image: url('$(res)/img/external-link.svg'); + background-color: $accent; + mask-repeat: no-repeat; + mask-size: contain; + width: 12px; + height: 12px; + margin-left: 3px; + vertical-align: middle; + } + + .mx_AnalyticsLearnMore_bullets { + padding-left: 0px; + } + + .mx_AnalyticsLearnMore_bullets li { + background: url('$(res)/img/tick-circle.svg') no-repeat; + list-style-type: none; + padding: 2px 0px 20px 32px; + vertical-align: middle; + } +} diff --git a/res/css/views/dialogs/_CompoundDialog.scss b/res/css/views/dialogs/_CompoundDialog.scss new file mode 100644 index 0000000000..d90c7e0f8e --- /dev/null +++ b/res/css/views/dialogs/_CompoundDialog.scss @@ -0,0 +1,87 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +// -------------------------------------------------------------------------------- +// DEV NOTE: This stylesheet covers dialogs listed by the compound, including +// over multiple React components. The actual inner contents of the dialog should +// be in their respective stylesheets. +// -------------------------------------------------------------------------------- + +// Override legacy/default styles for dialogs +.mx_Dialog_wrapper.mx_CompoundDialog > .mx_Dialog { + padding: 0; // we'll manage it ourselves + color: $primary-content; +} + +.mx_CompoundDialog { + .mx_CompoundDialog_header { + padding: 32px 32px 16px 32px; + + h1 { + display: inline-block; + font-weight: 600; + font-size: $font-24px; + margin: 0; // managed by header class + } + + .mx_CompoundDialog_cancelButton { + mask: url('$(res)/img/feather-customised/cancel.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: cover; + width: 20px; + height: 20px; + background-color: $dialog-close-fg-color; + cursor: pointer; + + // Align with middle of title, 34px from right edge + position: absolute; + top: 34px; + right: 34px; + } + } + + .mx_CompoundDialog_content { + overflow: auto; + padding: 8px 32px; + } + + .mx_CompoundDialog_footer { + padding: 20px 32px; + text-align: right; + position: absolute; + bottom: 0; + left: 0; + right: 0; + + .mx_AccessibleButton { + margin-left: 24px; + } + } +} + +.mx_ScrollableBaseDialog { + width: 544px; // fixed + height: 516px; // fixed + + .mx_CompoundDialog_content { + height: 349px; // dialogHeight - header - footer + } + + .mx_CompoundDialog_footer { + box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); // hardcoded colour for both themes + } +} diff --git a/res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss b/res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss index 81babc4c38..a2378115a8 100644 --- a/res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss +++ b/res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss @@ -39,7 +39,7 @@ limitations under the License. } &.mx_CreateCommunityPrototypeDialog_subtext_error { - color: $warning-color; + color: $alert; } } diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss index 9cfa8ce25a..064b64c24a 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.scss +++ b/res/css/views/dialogs/_CreateRoomDialog.scss @@ -22,7 +22,7 @@ limitations under the License. list-style: none; font-weight: 600; cursor: pointer; - color: $accent-color; + color: $accent; // list-style doesn't do it for webkit &::-webkit-details-marker { diff --git a/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss b/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss index f1af24cc5f..72c2d13ae3 100644 --- a/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss +++ b/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss @@ -106,7 +106,7 @@ limitations under the License. font-weight: $font-semi-bold; font-size: $font-15px; line-height: $font-18px; - color: $notice-primary-color; + color: $alert; } .mx_CreateSpaceFromCommunityDialog_errorCaption { @@ -168,7 +168,7 @@ limitations under the License. .mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog_checkmark { position: relative; border-radius: 50%; - border: 3px solid $accent-color; + border: 3px solid $accent; width: 68px; height: 68px; margin: 12px auto 32px; @@ -178,7 +178,7 @@ limitations under the License. height: inherit; content: ''; position: absolute; - background-color: $accent-color; + background-color: $accent; mask-repeat: no-repeat; mask-position: center; mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg'); diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index 4d35e8d569..738cc9ea22 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -215,7 +215,7 @@ limitations under the License. th { // Colour choice: first one autocomplete gave me. - border-bottom: 1px solid $accent-color; + border-bottom: 1px solid $accent; text-align: left; } @@ -233,16 +233,16 @@ limitations under the License. tr:hover { // Colour choice: first one autocomplete gave me. - background-color: $accent-color-50pct; + background-color: $accent; } } .mx_DevTools_SettingsExplorer_mutable { - background-color: $accent-color; + background-color: $accent; } .mx_DevTools_SettingsExplorer_immutable { - background-color: $warning-color; + background-color: $alert; } .mx_DevTools_SettingsExplorer_edit { @@ -251,7 +251,7 @@ limitations under the License. } .mx_DevTools_SettingsExplorer_warning { - border: 2px solid $warning-color; + border: 2px solid $alert; border-radius: 4px; padding: 4px; margin-bottom: 8px; diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss index d578e72ead..294daba2e8 100644 --- a/res/css/views/dialogs/_ExportDialog.scss +++ b/res/css/views/dialogs/_ExportDialog.scss @@ -34,11 +34,11 @@ limitations under the License. display: none; } - .mx_RadioButton input[type="radio"]:checked + div > div { - background: $greyed-fg-color; + .mx_StyledRadioButton input[type="radio"]:checked + div > div { + background: $info-plinth-fg-color; } - .mx_RadioButton input[type=radio]:checked + div { + .mx_StyledRadioButton input[type=radio]:checked + div { border-color: unset; } @@ -52,8 +52,8 @@ limitations under the License. } .mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background { - background: $greyed-fg-color; - border-color: $greyed-fg-color; + background: $info-plinth-fg-color; + border-color: $info-plinth-fg-color; } } @@ -76,7 +76,7 @@ limitations under the License. align-items: center; } - .mx_RadioButton > .mx_RadioButton_content { + .mx_StyledRadioButton > .mx_StyledRadioButton_content { margin-top: 5px; margin-bottom: 5px; } diff --git a/res/css/views/dialogs/_FeedbackDialog.scss b/res/css/views/dialogs/_FeedbackDialog.scss index 74733f7220..9e4cf5e8aa 100644 --- a/res/css/views/dialogs/_FeedbackDialog.scss +++ b/res/css/views/dialogs/_FeedbackDialog.scss @@ -30,10 +30,32 @@ limitations under the License. .mx_FeedbackDialog_section { position: relative; - padding-left: 52px; + padding: 12px 52px 12px 68px; + border-radius: 8px; + border: 1px solid $quinary-content; + + & + .mx_FeedbackDialog_section { + margin-top: 16px; + } + + > h3 { + margin-top: 0; + margin-bottom: 8px; + font-weight: $font-semi-bold; + font-size: $font-18px; + line-height: $font-22px; + } > p { - color: $tertiary-content; + color: $secondary-content; + font-size: $font-15px; + line-height: $font-24px; + margin: 8px 0 0; + } + + .mx_FeedbackDialog_section_microcopy { + font-size: $font-12px; + line-height: $font-15px; } .mx_AccessibleButton_kind_link { @@ -42,7 +64,7 @@ limitations under the License. } a, .mx_AccessibleButton_kind_link { - color: $accent-color; + color: $accent; text-decoration: underline; } @@ -51,13 +73,13 @@ limitations under the License. position: absolute; width: 40px; height: 40px; - left: 0; - top: 0; + left: 16px; + top: 12px; } &::before { background-color: $icon-button-color; - border-radius: 20px; + border-radius: 8px; } &::after { @@ -75,7 +97,7 @@ limitations under the License. } .mx_FeedbackDialog_rateApp { - .mx_RadioButton { + .mx_StyledRadioButton { display: inline-flex; font-size: 20px; transition: font-size 1s, border .5s; @@ -90,7 +112,7 @@ limitations under the License. display: none; } - .mx_RadioButton_content { + .mx_StyledRadioButton_content { background: $icon-button-color; width: 40px; height: 40px; @@ -100,18 +122,18 @@ limitations under the License. margin: 5px; } - .mx_RadioButton_spacer { + .mx_StyledRadioButton_spacer { display: none; } - & + .mx_RadioButton { + & + .mx_StyledRadioButton { margin-left: 16px; } } - .mx_RadioButton_checked { + .mx_StyledRadioButton_checked { font-size: 24px; - border-color: $accent-color; + border-color: $accent; } &::after { diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss index da8ce3de5b..d36875093d 100644 --- a/res/css/views/dialogs/_ForwardDialog.scss +++ b/res/css/views/dialogs/_ForwardDialog.scss @@ -110,18 +110,28 @@ limitations under the License. margin-right: 12px; } - .mx_ForwardList_entry_name { - font-size: $font-15px; + .mx_ForwardList_entry_name, + .mx_ForwardList_entry_detail { line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - margin-right: 12px; + } + + .mx_ForwardList_entry_name { + font-size: $font-15px; + } + + .mx_ForwardList_entry_detail { + font-size: $font-12px; + margin-left: 8px; + color: $tertiary-content; } } .mx_ForwardList_sendButton { position: relative; + margin-left: 12px; &:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel { // Hide the "Send" label while preserving button size @@ -138,7 +148,7 @@ limitations under the License. } &.mx_ForwardList_sending .mx_ForwardList_sendIcon { - background-color: $button-primary-bg-color; + background-color: $accent; mask-image: url('$(res)/img/element-icons/circle-sending.svg'); mask-position: center; mask-repeat: no-repeat; @@ -148,7 +158,7 @@ limitations under the License. } &.mx_ForwardList_sent .mx_ForwardList_sendIcon { - background-color: $button-primary-bg-color; + background-color: $accent; mask-image: url('$(res)/img/element-icons/circle-sent.svg'); mask-position: center; mask-repeat: no-repeat; diff --git a/res/css/views/dialogs/_HostSignupDialog.scss b/res/css/views/dialogs/_HostSignupDialog.scss index d8a6652a39..56d7103404 100644 --- a/res/css/views/dialogs/_HostSignupDialog.scss +++ b/res/css/views/dialogs/_HostSignupDialog.scss @@ -78,7 +78,7 @@ limitations under the License. } .mx_HostSignup_maximize_button { - mask: url('$(res)/img/feather-customised/maximise.svg'); + mask: url("$(res)/img/element-icons/maximise-expand.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: cover; @@ -92,7 +92,7 @@ limitations under the License. } .mx_HostSignup_minimize_button { - mask: url('$(res)/img/feather-customised/minimise.svg'); + mask: url("$(res)/img/element-icons/minimise-collapse.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: cover; diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index a753115614..cca1789904 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -362,7 +362,7 @@ limitations under the License. } .mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within { - border-color: $accent-color; + border-color: $accent; } .mx_InviteDialog_dialPadField .mx_Field_postfix { @@ -447,7 +447,7 @@ limitations under the License. margin-left: 32px; font-size: $font-15px; line-height: $font-24px; - color: $notice-primary-color; + color: $alert; } } } diff --git a/res/css/views/dialogs/_KeyboardShortcutsDialog.scss b/res/css/views/dialogs/_KeyboardShortcutsDialog.scss index 638cacd41f..c2e299ba79 100644 --- a/res/css/views/dialogs/_KeyboardShortcutsDialog.scss +++ b/res/css/views/dialogs/_KeyboardShortcutsDialog.scss @@ -44,7 +44,7 @@ limitations under the License. kbd { padding: 5px; border-radius: 4px; - background-color: $reaction-row-button-bg-color; + background-color: $header-panel-bg-color; margin-right: 5px; min-width: 20px; text-align: center; diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.scss b/res/css/views/dialogs/_LeaveSpaceDialog.scss index c0f24871c6..baae73a90b 100644 --- a/res/css/views/dialogs/_LeaveSpaceDialog.scss +++ b/res/css/views/dialogs/_LeaveSpaceDialog.scss @@ -69,8 +69,8 @@ limitations under the License. margin-top: 20px; .mx_Dialog_primary { - background-color: $notice-primary-color !important; // override default colour - border-color: $notice-primary-color; + background-color: $alert !important; // override default colour + border-color: $alert; } } } diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss index f60bbc9589..5838939d9b 100644 --- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss @@ -29,7 +29,7 @@ limitations under the License. } .mx_MessageEditHistoryDialog_error { - color: $warning-color; + color: $alert; text-align: center; } diff --git a/res/css/views/dialogs/_PollCreateDialog.scss b/res/css/views/dialogs/_PollCreateDialog.scss new file mode 100644 index 0000000000..358c95a2bf --- /dev/null +++ b/res/css/views/dialogs/_PollCreateDialog.scss @@ -0,0 +1,84 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_PollCreateDialog { + .mx_PollCreateDialog_busy { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + background-color: rgba($background, 0.6); + z-index: 1; + } + + h2 { + font-weight: 600; + font-size: $font-15px; + line-height: $font-24px; + margin-top: 0; + margin-bottom: 8px; + + &:nth-child(n + 2) { + margin-top: 20px; + } + } + + .mx_PollCreateDialog_option { + display: flex; + align-items: center; + margin-top: 11px; + margin-bottom: 16px; // 11px from the top will collapse, so this creates a 16px gap between options + + .mx_Field { + flex: 1; + margin: 0; + } + + .mx_PollCreateDialog_removeOption { + margin-left: 12px; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: $quinary-content; + cursor: pointer; + position: relative; + + &::before { + content: ""; + mask: url('$(res)/img/element-icons/x-8px.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: cover; + width: 8px; + height: 8px; + position: absolute; + top: 6px; + left: 6px; + background-color: $secondary-content; + } + } + } + + .mx_PollCreateDialog_addOption { + padding: 0; + margin-bottom: 40px; // arbitrary to create scrollable area under the poll + } + + .mx_AccessibleButton_disabled { + opacity: 0.4; + } +} diff --git a/res/css/views/dialogs/_ServerPickerDialog.scss b/res/css/views/dialogs/_ServerPickerDialog.scss index 9a05751f91..4dde7cf800 100644 --- a/res/css/views/dialogs/_ServerPickerDialog.scss +++ b/res/css/views/dialogs/_ServerPickerDialog.scss @@ -43,7 +43,7 @@ limitations under the License. } > a { - color: $accent-color; + color: $accent; margin-left: 8px; } } diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss index a39d51dfce..a07f83acdc 100644 --- a/res/css/views/dialogs/_SetEmailDialog.scss +++ b/res/css/views/dialogs/_SetEmailDialog.scss @@ -29,5 +29,5 @@ limitations under the License. .mx_SetEmailDialog_email_input:focus { outline: none; box-shadow: none; - border: 1px solid $accent-color; + border: 1px solid $accent; } diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss index e26e4f8b49..78fbd573bd 100644 --- a/res/css/views/dialogs/_SpaceSettingsDialog.scss +++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss @@ -21,7 +21,7 @@ limitations under the License. font-weight: $font-semi-bold; font-size: $font-12px; line-height: $font-15px; - color: $notice-primary-color; + color: $alert; margin-bottom: 28px; } @@ -43,11 +43,11 @@ limitations under the License. padding-top: 24px; } - .mx_RadioButton { + .mx_StyledRadioButton { margin-top: 8px; margin-bottom: 4px; - .mx_RadioButton_content { + .mx_StyledRadioButton_content { font-weight: $font-semi-bold; line-height: $font-18px; color: $primary-content; diff --git a/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss b/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss index 0ab59c44a7..6385dd76f5 100644 --- a/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss +++ b/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss @@ -35,7 +35,7 @@ limitations under the License. .mx_TabbedIntegrationManagerDialog_currentManager { width: 100%; height: 100%; - border-top: 1px solid $accent-color; + border-top: 1px solid $accent; iframe { background-color: #fff; @@ -48,7 +48,7 @@ limitations under the License. .mx_TabbedIntegrationManagerDialog_tab { display: inline-block; - border: 1px solid $accent-color; + border: 1px solid $accent; border-bottom: 0; border-top-left-radius: 3px; border-top-right-radius: 3px; @@ -57,6 +57,6 @@ limitations under the License. } .mx_TabbedIntegrationManagerDialog_currentTab { - background-color: $accent-color; + background-color: $accent; color: $accent-fg-color; } diff --git a/res/css/views/dialogs/_TermsDialog.scss b/res/css/views/dialogs/_TermsDialog.scss index 939a31dee6..18daf8514d 100644 --- a/res/css/views/dialogs/_TermsDialog.scss +++ b/res/css/views/dialogs/_TermsDialog.scss @@ -42,7 +42,7 @@ limitations under the License. .mx_TermsDialog_link { display: inline-block; mask-image: url('$(res)/img/external-link.svg'); - background-color: $accent-color; + background-color: $accent; width: 10px; height: 10px; } diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss index bd472710ea..f7728eb69b 100644 --- a/res/css/views/dialogs/_UserSettingsDialog.scss +++ b/res/css/views/dialogs/_UserSettingsDialog.scss @@ -37,6 +37,10 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/settings/preference.svg'); } +.mx_UserSettingsDialog_sidebarIcon::before { + mask-image: url('$(res)/img/element-icons/settings/sidebar.svg'); +} + .mx_UserSettingsDialog_securityIcon::before { mask-image: url('$(res)/img/element-icons/security.svg'); } diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss index b239b7356b..e8bde18232 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss @@ -32,7 +32,7 @@ limitations under the License. } .mx_AccessSecretStorageDialog_reset_link { - color: $warning-color; + color: $alert; } } @@ -68,7 +68,7 @@ limitations under the License. .mx_AccessSecretStorageDialog_passPhraseInput { width: 300px; - border: 1px solid $accent-color; + border: 1px solid $accent; border-radius: 5px; } @@ -100,18 +100,18 @@ limitations under the License. } .mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid { - color: $input-valid-border-color; + color: $accent; &::before { mask-image: url('$(res)/img/feather-customised/check.svg'); - background-color: $input-valid-border-color; + background-color: $accent; } } .mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid { - color: $input-invalid-border-color; + color: $alert; &::before { mask-image: url('$(res)/img/feather-customised/x.svg'); - background-color: $input-invalid-border-color; + background-color: $alert; } } diff --git a/res/css/views/dialogs/security/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/security/_CreateKeyBackupDialog.scss index 9be98e25b2..4503e08fad 100644 --- a/res/css/views/dialogs/security/_CreateKeyBackupDialog.scss +++ b/res/css/views/dialogs/security/_CreateKeyBackupDialog.scss @@ -20,7 +20,7 @@ limitations under the License. } .mx_CreateKeyBackupDialog_primaryContainer { - /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ + /* FIXME: plinth colour in new theme(s). background-color: $accent; */ padding: 20px; } @@ -38,7 +38,7 @@ limitations under the License. .mx_CreateKeyBackupDialog_passPhraseInput { flex: none; width: 250px; - border: 1px solid $accent-color; + border: 1px solid $accent; border-radius: 5px; padding: 10px; margin-bottom: 1em; diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss index b14206ff6d..9813162467 100644 --- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss +++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss @@ -72,8 +72,13 @@ limitations under the License. } .mx_CreateSecretStorageDialog_primaryContainer { - /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ + /* FIXME: plinth colour in new theme(s). background-color: $accent; */ padding-top: 20px; + + &.mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer { + display: flex; + justify-content: center; + } } .mx_CreateSecretStorageDialog_primaryContainer::after { @@ -82,7 +87,7 @@ limitations under the License. display: block; } -.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton { +.mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton { margin-bottom: 16px; padding: 11px; } @@ -127,9 +132,7 @@ limitations under the License. } .mx_CreateSecretStorageDialog_recoveryKeyContainer { - width: 380px; - margin-left: auto; - margin-right: auto; + display: inline-block; } .mx_CreateSecretStorageDialog_recoveryKey { @@ -141,18 +144,29 @@ limitations under the License. border-radius: 6px; word-spacing: 1em; margin-bottom: 20px; + + code { + display: inline-block; + width: 30rem; + } } .mx_CreateSecretStorageDialog_recoveryKeyButtons { - display: flex; - justify-content: space-between; align-items: center; + display: flex; + gap: 16px; +} + +.mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn { + flex-direction: column; +} + +.mx_CreateSecretStorageDialog_recoveryKeyCopyButtonText { + overflow-y: hidden; } .mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton { - width: 160px; - padding-left: 0px; - padding-right: 0px; + flex-grow: 1; white-space: nowrap; } diff --git a/res/css/views/dialogs/security/_RestoreKeyBackupDialog.scss b/res/css/views/dialogs/security/_RestoreKeyBackupDialog.scss index 5689d84bc5..b0b8f1d7a5 100644 --- a/res/css/views/dialogs/security/_RestoreKeyBackupDialog.scss +++ b/res/css/views/dialogs/security/_RestoreKeyBackupDialog.scss @@ -20,14 +20,14 @@ limitations under the License. } .mx_RestoreKeyBackupDialog_primaryContainer { - /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ + /* FIXME: plinth colour in new theme(s). background-color: $accent; */ padding: 20px; } .mx_RestoreKeyBackupDialog_passPhraseInput, .mx_RestoreKeyBackupDialog_recoveryKeyInput { width: 300px; - border: 1px solid $accent-color; + border: 1px solid $accent; border-radius: 5px; padding: 10px; } diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index 93cecd8676..eadca7326b 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -73,7 +73,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-image: url('$(res)/img/feather-customised/x.svg'); - background-color: $notice-primary-color; + background-color: $alert; } } } @@ -108,7 +108,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-image: url('$(res)/img/feather-customised/check.svg'); - background-color: $input-valid-border-color; + background-color: $accent; } } } diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index 7bc47a3c98..8559c89e41 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -30,23 +30,25 @@ limitations under the License. align-items: center; justify-content: center; font-size: $font-14px; + border: none; // override default