mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-15 16:41:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into spaces-jump-to-room

Browse source
This commit is contained in:
Jaiwanth 2021-06-29 14:31:08 +05:30
commit 746b11b24d
471 changed files with 19932 additions and 8649 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
.eslintrc.js
View file

@ -18,7 +18,7 @@ module.exports = {
}, },
overrides: [{ overrides: [{
"files": ["src/**/*.{ts,tsx}"], "files": ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
"extends": ["matrix-org/ts"], "extends": ["matrix-org/ts"],
"rules": { "rules": {
// We're okay being explicit at the moment // We're okay being explicit at the moment
@ -30,6 +30,24 @@ module.exports = {
"quotes": "off", "quotes": "off",
"no-extra-boolean-cast": "off", "no-extra-boolean-cast": "off",
"no-restricted-properties": [
"error",
...buildRestrictedPropertiesOptions(
["window.innerHeight", "window.innerWidth", "window.visualViewport"],
"Use UIStore to access window dimensions instead",
),
],
}, },
}], }],
}; };
function buildRestrictedPropertiesOptions(properties, message) {
return properties.map(prop => {
const [object, property] = prop.split(".");
return {
object,
property,
message,
};
});
}

3
.github/PULL_REQUEST_TEMPLATE.md vendored Normal file
View file

@ -0,0 +1,3 @@
<!-- Please read https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.rst before submitting your pull request -->
<!-- Include a Sign-Off as described in https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.rst#sign-off -->

41
.github/workflows/develop.yml vendored Normal file
View file

@ -0,0 +1,41 @@
name: Develop
on:
push:
branches: [develop]
pull_request:
branches: [develop]
jobs:
end-to-end:
runs-on: ubuntu-latest
container: vectorim/element-web-ci-e2etests-env:latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Prepare End-to-End tests
run: ./scripts/ci/prepare-end-to-end-tests.sh
- name: Run End-to-End tests
run: ./scripts/ci/run-end-to-end-tests.sh
- name: Archive logs
uses: actions/upload-artifact@v2
if: ${{ always() }}
with:
path: |
test/end-to-end-tests/logs/**/*
test/end-to-end-tests/synapse/installations/consent/homeserver.log
retention-days: 14
- name: Download previous benchmark data
uses: actions/cache@v1
with:
path: ./cache
key: ${{ runner.os }}-benchmark
- name: Store benchmark result
uses: matrix-org/github-action-benchmark@jsperfentry-1
with:
tool: 'jsperformanceentry'
output-file-path: test/end-to-end-tests/performance-entries.json
fail-on-alert: false
comment-on-alert: false
# Only temporary to monitor where failures occur
alert-comment-cc-users: '@gsouquet'
github-token: ${{ secrets.DEPLOY_GH_PAGES }}
auto-push: ${{ github.ref == 'refs/heads/develop' }}

459
CHANGELOG.md
View file

@ -1,3 +1,462 @@
Changes in [3.24.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.24.0) (2021-06-21)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.24.0-rc.1...v3.24.0)
* Upgrade to JS SDK 12.0.0
* [Release] Keep composer reply when scrolling away from a highlighted event
[\#6211](https://github.com/matrix-org/matrix-react-sdk/pull/6211)
* [Release] Remove stray bullet point in reply preview
[\#6210](https://github.com/matrix-org/matrix-react-sdk/pull/6210)
* [Release] Stop requesting null next replies from the server
[\#6209](https://github.com/matrix-org/matrix-react-sdk/pull/6209)
Changes in [3.24.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.24.0-rc.1) (2021-06-15)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.23.0...v3.24.0-rc.1)
* Upgrade to JS SDK 12.0.0-rc.1
* Translations update from Weblate
[\#6192](https://github.com/matrix-org/matrix-react-sdk/pull/6192)
* Disable comment-on-alert for PR coming from a fork
[\#6189](https://github.com/matrix-org/matrix-react-sdk/pull/6189)
* Add JS benchmark tracking in CI
[\#6177](https://github.com/matrix-org/matrix-react-sdk/pull/6177)
* Upgrade matrix-react-test-utils for React 17 peer deps
[\#6187](https://github.com/matrix-org/matrix-react-sdk/pull/6187)
* Fix display name overlaps on the IRC layout
[\#6186](https://github.com/matrix-org/matrix-react-sdk/pull/6186)
* Small fixes to the spaces experience
[\#6184](https://github.com/matrix-org/matrix-react-sdk/pull/6184)
* Add footer and privacy note to the start dm dialog
[\#6111](https://github.com/matrix-org/matrix-react-sdk/pull/6111)
* Format mxids when disambiguation needed
[\#5880](https://github.com/matrix-org/matrix-react-sdk/pull/5880)
* Move various createRoom types to the js-sdk
[\#6183](https://github.com/matrix-org/matrix-react-sdk/pull/6183)
* Fix HTML tag for Event Tile when not rendered in a list
[\#6175](https://github.com/matrix-org/matrix-react-sdk/pull/6175)
* Remove legacy polyfills and unused dependencies
[\#6176](https://github.com/matrix-org/matrix-react-sdk/pull/6176)
* Fix buggy hovering/selecting of event tiles
[\#6173](https://github.com/matrix-org/matrix-react-sdk/pull/6173)
* Add room intro warning when e2ee is not enabled
[\#5929](https://github.com/matrix-org/matrix-react-sdk/pull/5929)
* Migrate end to end tests to GitHub actions
[\#6156](https://github.com/matrix-org/matrix-react-sdk/pull/6156)
* Fix expanding last collapsed sticky session when zoomed in
[\#6171](https://github.com/matrix-org/matrix-react-sdk/pull/6171)
* ⚛️ Upgrade to React@17
[\#6165](https://github.com/matrix-org/matrix-react-sdk/pull/6165)
* Revert refreshStickyHeaders optimisations
[\#6168](https://github.com/matrix-org/matrix-react-sdk/pull/6168)
* Add logging for which rooms calls are in
[\#6170](https://github.com/matrix-org/matrix-react-sdk/pull/6170)
* Restore read receipt animation from event to event
[\#6169](https://github.com/matrix-org/matrix-react-sdk/pull/6169)
* Restore copy button icon when sharing permalink
[\#6166](https://github.com/matrix-org/matrix-react-sdk/pull/6166)
* Restore Page Up/Down key bindings when focusing the composer
[\#6167](https://github.com/matrix-org/matrix-react-sdk/pull/6167)
* Timeline rendering optimizations
[\#6143](https://github.com/matrix-org/matrix-react-sdk/pull/6143)
* Bump css-what from 5.0.0 to 5.0.1
[\#6164](https://github.com/matrix-org/matrix-react-sdk/pull/6164)
* Bump ws from 6.2.1 to 6.2.2 in /test/end-to-end-tests
[\#6145](https://github.com/matrix-org/matrix-react-sdk/pull/6145)
* Bump trim-newlines from 3.0.0 to 3.0.1
[\#6163](https://github.com/matrix-org/matrix-react-sdk/pull/6163)
* Fix upgrade to element home button in top left menu
[\#6162](https://github.com/matrix-org/matrix-react-sdk/pull/6162)
* Fix unpinning of pinned messages and panel empty state
[\#6140](https://github.com/matrix-org/matrix-react-sdk/pull/6140)
* Better handling for widgets that fail to load
[\#6161](https://github.com/matrix-org/matrix-react-sdk/pull/6161)
* Improved forwarding UI
[\#5999](https://github.com/matrix-org/matrix-react-sdk/pull/5999)
* Fixes for sharing room links
[\#6118](https://github.com/matrix-org/matrix-react-sdk/pull/6118)
* Fix setting watchers
[\#6160](https://github.com/matrix-org/matrix-react-sdk/pull/6160)
* Fix Stickerpicker context menu
[\#6152](https://github.com/matrix-org/matrix-react-sdk/pull/6152)
* Add warning to private space creation flow
[\#6155](https://github.com/matrix-org/matrix-react-sdk/pull/6155)
* Add prop to alwaysShowTimestamps on TimelinePanel
[\#6159](https://github.com/matrix-org/matrix-react-sdk/pull/6159)
* Fix notif panel timestamp padding
[\#6157](https://github.com/matrix-org/matrix-react-sdk/pull/6157)
* Fixes and refactoring for the ImageView
[\#6149](https://github.com/matrix-org/matrix-react-sdk/pull/6149)
* Fix timestamps
[\#6148](https://github.com/matrix-org/matrix-react-sdk/pull/6148)
* Make it easier to pan images in the lightbox
[\#6147](https://github.com/matrix-org/matrix-react-sdk/pull/6147)
* Fix scroll token for EventTile and EventListSummary node type
[\#6154](https://github.com/matrix-org/matrix-react-sdk/pull/6154)
* Convert bunch of things to Typescript
[\#6153](https://github.com/matrix-org/matrix-react-sdk/pull/6153)
* Lint the typescript tests
[\#6142](https://github.com/matrix-org/matrix-react-sdk/pull/6142)
* Fix jumping to bottom without a highlighted event
[\#6146](https://github.com/matrix-org/matrix-react-sdk/pull/6146)
* Repair event status position in timeline
[\#6141](https://github.com/matrix-org/matrix-react-sdk/pull/6141)
* Adapt for js-sdk MatrixClient conversion to TS
[\#6132](https://github.com/matrix-org/matrix-react-sdk/pull/6132)
* Improve pinned messages in Labs
[\#6096](https://github.com/matrix-org/matrix-react-sdk/pull/6096)
* Map phone number lookup results to their native rooms
[\#6136](https://github.com/matrix-org/matrix-react-sdk/pull/6136)
* Fix mx_Event containment rules and empty read avatar row
[\#6138](https://github.com/matrix-org/matrix-react-sdk/pull/6138)
* Improve switch room rendering
[\#6079](https://github.com/matrix-org/matrix-react-sdk/pull/6079)
* Add CSS containment rules for shorter reflow operations
[\#6127](https://github.com/matrix-org/matrix-react-sdk/pull/6127)
* ignore hash/fragment when de-duplicating links for url previews
[\#6135](https://github.com/matrix-org/matrix-react-sdk/pull/6135)
* Clicking jump to bottom resets room hash
[\#5823](https://github.com/matrix-org/matrix-react-sdk/pull/5823)
* Use passive option for scroll handlers
[\#6113](https://github.com/matrix-org/matrix-react-sdk/pull/6113)
* Optimise memberSort performance for large list
[\#6130](https://github.com/matrix-org/matrix-react-sdk/pull/6130)
* Tweak event border radius to match action bar
[\#6133](https://github.com/matrix-org/matrix-react-sdk/pull/6133)
* Log when we ignore a second call in a room
[\#6131](https://github.com/matrix-org/matrix-react-sdk/pull/6131)
* Performance monitoring measurements
[\#6041](https://github.com/matrix-org/matrix-react-sdk/pull/6041)
Changes in [3.23.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.23.0) (2021-06-07)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.23.0-rc.1...v3.23.0)
* Upgrade to JS SDK 11.2.0
* [Release] Fix notif panel timestamp padding
[\#6158](https://github.com/matrix-org/matrix-react-sdk/pull/6158)
Changes in [3.23.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.23.0-rc.1) (2021-06-01)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.22.0...v3.23.0-rc.1)
* Upgrade to JS SDK 11.2.0-rc.1
* Translations update from Weblate
[\#6128](https://github.com/matrix-org/matrix-react-sdk/pull/6128)
* Fix all DMs wrongly appearing in room list when `m.direct` is changed
[\#6122](https://github.com/matrix-org/matrix-react-sdk/pull/6122)
* Update way of checking for registration disabled
[\#6123](https://github.com/matrix-org/matrix-react-sdk/pull/6123)
* Fix the ability to remove avatar from a space via settings
[\#6126](https://github.com/matrix-org/matrix-react-sdk/pull/6126)
* Switch to stable endpoint/fields for MSC2858
[\#6125](https://github.com/matrix-org/matrix-react-sdk/pull/6125)
* Clear stored editor state when canceling editing using a shortcut
[\#6117](https://github.com/matrix-org/matrix-react-sdk/pull/6117)
* Respect newlines in space topics
[\#6124](https://github.com/matrix-org/matrix-react-sdk/pull/6124)
* Add url param `defaultUsername` to prefill the login username field
[\#5674](https://github.com/matrix-org/matrix-react-sdk/pull/5674)
* Bump ws from 7.4.2 to 7.4.6
[\#6115](https://github.com/matrix-org/matrix-react-sdk/pull/6115)
* Sticky headers repositioning without layout trashing
[\#6110](https://github.com/matrix-org/matrix-react-sdk/pull/6110)
* Handle user_busy in voip calls
[\#6112](https://github.com/matrix-org/matrix-react-sdk/pull/6112)
* Avoid showing warning modals from the invite dialog after it unmounts
[\#6105](https://github.com/matrix-org/matrix-react-sdk/pull/6105)
* Fix misleading child counts in spaces
[\#6109](https://github.com/matrix-org/matrix-react-sdk/pull/6109)
* Close creation menu when expanding space panel via expand hierarchy
[\#6090](https://github.com/matrix-org/matrix-react-sdk/pull/6090)
* Prevent having duplicates in pending room state
[\#6108](https://github.com/matrix-org/matrix-react-sdk/pull/6108)
* Update reactions row on event decryption
[\#6106](https://github.com/matrix-org/matrix-react-sdk/pull/6106)
* Destroy playback instance on voice message unmount
[\#6101](https://github.com/matrix-org/matrix-react-sdk/pull/6101)
* Fix message preview not up to date
[\#6102](https://github.com/matrix-org/matrix-react-sdk/pull/6102)
* Convert some Flow typed files to TS (round 2)
[\#6076](https://github.com/matrix-org/matrix-react-sdk/pull/6076)
* Remove unused middlePanelResized event listener
[\#6086](https://github.com/matrix-org/matrix-react-sdk/pull/6086)
* Fix accessing currentState on an invalid joinedRoom
[\#6100](https://github.com/matrix-org/matrix-react-sdk/pull/6100)
* Remove Promise allSettled polyfill as js-sdk uses it directly
[\#6097](https://github.com/matrix-org/matrix-react-sdk/pull/6097)
* Prevent DecoratedRoomAvatar to update its state for the same value
[\#6099](https://github.com/matrix-org/matrix-react-sdk/pull/6099)
* Skip generatePreview if event is not part of the live timeline
[\#6098](https://github.com/matrix-org/matrix-react-sdk/pull/6098)
* fix sticky headers when results num get displayed
[\#6095](https://github.com/matrix-org/matrix-react-sdk/pull/6095)
* Improve addEventsToTimeline performance scoping WhoIsTypingTile::setState
[\#6094](https://github.com/matrix-org/matrix-react-sdk/pull/6094)
* Safeguards to prevent layout trashing for window dimensions
[\#6092](https://github.com/matrix-org/matrix-react-sdk/pull/6092)
* Use local room state to render space hierarchy if the room is known
[\#6089](https://github.com/matrix-org/matrix-react-sdk/pull/6089)
* Add spinner in UserMenu to list pending long running actions
[\#6085](https://github.com/matrix-org/matrix-react-sdk/pull/6085)
* Stop overscroll in Firefox Nightly for macOS
[\#6093](https://github.com/matrix-org/matrix-react-sdk/pull/6093)
* Move SettingsStore watchers/monitors over to ES6 maps for performance
[\#6063](https://github.com/matrix-org/matrix-react-sdk/pull/6063)
* Bump libolm version.
[\#6080](https://github.com/matrix-org/matrix-react-sdk/pull/6080)
* Improve styling of the message action bar
[\#6066](https://github.com/matrix-org/matrix-react-sdk/pull/6066)
* Improve explore rooms when no results are found
[\#6070](https://github.com/matrix-org/matrix-react-sdk/pull/6070)
* Remove logo spinner
[\#6078](https://github.com/matrix-org/matrix-react-sdk/pull/6078)
* Fix add reaction prompt showing even when user is not joined to room
[\#6073](https://github.com/matrix-org/matrix-react-sdk/pull/6073)
* Vectorize spinners
[\#5680](https://github.com/matrix-org/matrix-react-sdk/pull/5680)
* Fix handling of via servers for suggested rooms
[\#6077](https://github.com/matrix-org/matrix-react-sdk/pull/6077)
* Upgrade showChatEffects to room-level setting exposure
[\#6075](https://github.com/matrix-org/matrix-react-sdk/pull/6075)
* Delete RoomView dead code
[\#6071](https://github.com/matrix-org/matrix-react-sdk/pull/6071)
* Reduce noise in tests
[\#6074](https://github.com/matrix-org/matrix-react-sdk/pull/6074)
* Fix room name issues in right panel summary card
[\#6069](https://github.com/matrix-org/matrix-react-sdk/pull/6069)
* Cache normalized room name
[\#6072](https://github.com/matrix-org/matrix-react-sdk/pull/6072)
* Update MemberList to reflect changes for invite permission change
[\#6061](https://github.com/matrix-org/matrix-react-sdk/pull/6061)
* Delete RoomView dead code
[\#6065](https://github.com/matrix-org/matrix-react-sdk/pull/6065)
* Show subspace rooms count even if it is 0 for consistency
[\#6067](https://github.com/matrix-org/matrix-react-sdk/pull/6067)
Changes in [3.22.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.22.0) (2021-05-24)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.22.0-rc.1...v3.22.0)
* Upgrade to JS SDK 11.1.0
* [Release] Bump libolm version
[\#6087](https://github.com/matrix-org/matrix-react-sdk/pull/6087)
Changes in [3.22.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.22.0-rc.1) (2021-05-19)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.21.0...v3.22.0-rc.1)
* Upgrade to JS SDK 11.1.0-rc.1
* Translations update from Weblate
[\#6068](https://github.com/matrix-org/matrix-react-sdk/pull/6068)
* Show DMs in space for invited members too, to match Android impl
[\#6062](https://github.com/matrix-org/matrix-react-sdk/pull/6062)
* Support filtering by alias in add existing to space dialog
[\#6057](https://github.com/matrix-org/matrix-react-sdk/pull/6057)
* Fix issue when a room without a name or alias is marked as suggested
[\#6064](https://github.com/matrix-org/matrix-react-sdk/pull/6064)
* Fix space room hierarchy not updating when removing a room
[\#6055](https://github.com/matrix-org/matrix-react-sdk/pull/6055)
* Revert "Try putting room list handling behind a lock"
[\#6060](https://github.com/matrix-org/matrix-react-sdk/pull/6060)
* Stop assuming encrypted messages are decrypted ahead of time
[\#6052](https://github.com/matrix-org/matrix-react-sdk/pull/6052)
* Add error detail when languges fail to load
[\#6059](https://github.com/matrix-org/matrix-react-sdk/pull/6059)
* Add space invaders chat effect
[\#6053](https://github.com/matrix-org/matrix-react-sdk/pull/6053)
* Create SpaceProvider and hide Spaces from the RoomProvider autocompleter
[\#6051](https://github.com/matrix-org/matrix-react-sdk/pull/6051)
* Don't mark a room as unread when redacted event is present
[\#6049](https://github.com/matrix-org/matrix-react-sdk/pull/6049)
* Add support for MSC2873: Client information for Widgets
[\#6023](https://github.com/matrix-org/matrix-react-sdk/pull/6023)
* Support UI for MSC2762: Widgets reading events from rooms
[\#5960](https://github.com/matrix-org/matrix-react-sdk/pull/5960)
* Fix crash on opening notification panel
[\#6047](https://github.com/matrix-org/matrix-react-sdk/pull/6047)
* Remove custom LoggedInView::shouldComponentUpdate logic
[\#6046](https://github.com/matrix-org/matrix-react-sdk/pull/6046)
* Fix edge cases with the new add reactions prompt button
[\#6045](https://github.com/matrix-org/matrix-react-sdk/pull/6045)
* Add ids to homeserver and passphrase fields
[\#6043](https://github.com/matrix-org/matrix-react-sdk/pull/6043)
* Update space order field validity requirements to match msc update
[\#6042](https://github.com/matrix-org/matrix-react-sdk/pull/6042)
* Try putting room list handling behind a lock
[\#6024](https://github.com/matrix-org/matrix-react-sdk/pull/6024)
* Improve progress bar progression for smaller voice messages
[\#6035](https://github.com/matrix-org/matrix-react-sdk/pull/6035)
* Fix share space edge case where space is public but not invitable
[\#6039](https://github.com/matrix-org/matrix-react-sdk/pull/6039)
* Add missing 'rel' to image view download button
[\#6033](https://github.com/matrix-org/matrix-react-sdk/pull/6033)
* Improve visible waveform for voice messages
[\#6034](https://github.com/matrix-org/matrix-react-sdk/pull/6034)
* Fix roving tab index intercepting home/end in space create menu
[\#6040](https://github.com/matrix-org/matrix-react-sdk/pull/6040)
* Decorate room avatars with publicity in add existing to space flow
[\#6030](https://github.com/matrix-org/matrix-react-sdk/pull/6030)
* Improve Spaces "Just Me" wizard
[\#6025](https://github.com/matrix-org/matrix-react-sdk/pull/6025)
* Increase hover feedback on room sub list buttons
[\#6037](https://github.com/matrix-org/matrix-react-sdk/pull/6037)
* Show alternative button during space creation wizard if no rooms
[\#6029](https://github.com/matrix-org/matrix-react-sdk/pull/6029)
* Swap rotation buttons in the image viewer
[\#6032](https://github.com/matrix-org/matrix-react-sdk/pull/6032)
* Typo: initilisation -> initialisation
[\#5915](https://github.com/matrix-org/matrix-react-sdk/pull/5915)
* Save edited state of a message when switching rooms
[\#6001](https://github.com/matrix-org/matrix-react-sdk/pull/6001)
* Fix shield icon in Untrusted Device Dialog
[\#6022](https://github.com/matrix-org/matrix-react-sdk/pull/6022)
* Do not eagerly decrypt breadcrumb rooms
[\#6028](https://github.com/matrix-org/matrix-react-sdk/pull/6028)
* Update spaces.png
[\#6031](https://github.com/matrix-org/matrix-react-sdk/pull/6031)
* Encourage more diverse reactions to content
[\#6027](https://github.com/matrix-org/matrix-react-sdk/pull/6027)
* Wrap decodeURIComponent in try-catch to protect against malformed URIs
[\#6026](https://github.com/matrix-org/matrix-react-sdk/pull/6026)
* Iterate beta feedback dialog
[\#6021](https://github.com/matrix-org/matrix-react-sdk/pull/6021)
* Disable space fields whilst their form is busy
[\#6020](https://github.com/matrix-org/matrix-react-sdk/pull/6020)
* Add missing space on beta feedback dialog
[\#6018](https://github.com/matrix-org/matrix-react-sdk/pull/6018)
* Fix colours used for the back button in space create menu
[\#6017](https://github.com/matrix-org/matrix-react-sdk/pull/6017)
* Prioritise and reduce the amount of events decrypted on application startup
[\#5980](https://github.com/matrix-org/matrix-react-sdk/pull/5980)
* Linkify topics in space room directory results
[\#6015](https://github.com/matrix-org/matrix-react-sdk/pull/6015)
* Persistent space collapsed states
[\#5972](https://github.com/matrix-org/matrix-react-sdk/pull/5972)
* Catch another instance of unlabeled avatars.
[\#6010](https://github.com/matrix-org/matrix-react-sdk/pull/6010)
* Rescale and smooth voice message playback waveform to better match
expectation
[\#5996](https://github.com/matrix-org/matrix-react-sdk/pull/5996)
* Scale voice message clock with user's font size
[\#5993](https://github.com/matrix-org/matrix-react-sdk/pull/5993)
* Remove "in development" flag from voice messages
[\#5995](https://github.com/matrix-org/matrix-react-sdk/pull/5995)
* Support voice messages on Safari
[\#5989](https://github.com/matrix-org/matrix-react-sdk/pull/5989)
* Translations update from Weblate
[\#6011](https://github.com/matrix-org/matrix-react-sdk/pull/6011)
Changes in [3.21.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.21.0) (2021-05-17)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.21.0-rc.1...v3.21.0)
## Security notice
matrix-react-sdk 3.21.0 fixes a low severity issue (GHSA-8796-gc9j-63rv)
related to file upload. When uploading a file, the local file preview can lead
to execution of scripts embedded in the uploaded file, but only after several
user interactions to open the preview in a separate tab. This only impacts the
local user while in the process of uploading. It cannot be exploited remotely
or by other users. Thanks to [Muhammad Zaid Ghifari](https://github.com/MR-ZHEEV)
for responsibly disclosing this via Matrix's Security Disclosure Policy.
## All changes
* Upgrade to JS SDK 11.0.0
* [Release] Add missing space on beta feedback dialog
[\#6019](https://github.com/matrix-org/matrix-react-sdk/pull/6019)
* [Release] Add feedback mechanism for beta features, namely Spaces
[\#6013](https://github.com/matrix-org/matrix-react-sdk/pull/6013)
* Add feedback mechanism for beta features, namely Spaces
[\#6012](https://github.com/matrix-org/matrix-react-sdk/pull/6012)
Changes in [3.21.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.21.0-rc.1) (2021-05-11)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.20.0...v3.21.0-rc.1)
* Upgrade to JS SDK 11.0.0-rc.1
* Add disclaimer about subspaces being experimental in add existing dialog
[\#5978](https://github.com/matrix-org/matrix-react-sdk/pull/5978)
* Spaces Beta release
[\#5933](https://github.com/matrix-org/matrix-react-sdk/pull/5933)
* Improve permissions error when adding new server to room directory
[\#6009](https://github.com/matrix-org/matrix-react-sdk/pull/6009)
* Allow user to progress through space creation & setup using Enter
[\#6006](https://github.com/matrix-org/matrix-react-sdk/pull/6006)
* Upgrade sanitize types
[\#6008](https://github.com/matrix-org/matrix-react-sdk/pull/6008)
* Upgrade `cheerio` and resolve type errors
[\#6007](https://github.com/matrix-org/matrix-react-sdk/pull/6007)
* Add slash commands support to edit message composer
[\#5865](https://github.com/matrix-org/matrix-react-sdk/pull/5865)
* Fix the two todays problem
[\#5940](https://github.com/matrix-org/matrix-react-sdk/pull/5940)
* Switch the Home Space out for an All rooms space
[\#5969](https://github.com/matrix-org/matrix-react-sdk/pull/5969)
* Show device ID in UserInfo when there is no device name
[\#5985](https://github.com/matrix-org/matrix-react-sdk/pull/5985)
* Switch back to release version of `sanitize-html`
[\#6005](https://github.com/matrix-org/matrix-react-sdk/pull/6005)
* Bump hosted-git-info from 2.8.8 to 2.8.9
[\#5998](https://github.com/matrix-org/matrix-react-sdk/pull/5998)
* Don't use the event's metadata to calc the scale of an image
[\#5982](https://github.com/matrix-org/matrix-react-sdk/pull/5982)
* Adjust MIME type of upload confirmation if needed
[\#5981](https://github.com/matrix-org/matrix-react-sdk/pull/5981)
* Forbid redaction of encryption events
[\#5991](https://github.com/matrix-org/matrix-react-sdk/pull/5991)
* Fix voice message playback being squished up against send button
[\#5988](https://github.com/matrix-org/matrix-react-sdk/pull/5988)
* Improve style of notification badges on the space panel
[\#5983](https://github.com/matrix-org/matrix-react-sdk/pull/5983)
* Add dev dependency for parse5 typings
[\#5990](https://github.com/matrix-org/matrix-react-sdk/pull/5990)
* Iterate Spaces admin UX around room management
[\#5977](https://github.com/matrix-org/matrix-react-sdk/pull/5977)
* Guard all isSpaceRoom calls behind the labs flag
[\#5979](https://github.com/matrix-org/matrix-react-sdk/pull/5979)
* Bump lodash from 4.17.20 to 4.17.21
[\#5986](https://github.com/matrix-org/matrix-react-sdk/pull/5986)
* Bump lodash from 4.17.19 to 4.17.21 in /test/end-to-end-tests
[\#5987](https://github.com/matrix-org/matrix-react-sdk/pull/5987)
* Bump ua-parser-js from 0.7.23 to 0.7.28
[\#5984](https://github.com/matrix-org/matrix-react-sdk/pull/5984)
* Update visual style of plain files in the timeline
[\#5971](https://github.com/matrix-org/matrix-react-sdk/pull/5971)
* Support for multiple streams (not MSC3077)
[\#5833](https://github.com/matrix-org/matrix-react-sdk/pull/5833)
* Update space ordering behaviour to match updates in MSC
[\#5963](https://github.com/matrix-org/matrix-react-sdk/pull/5963)
* Improve performance of search all spaces and space switching
[\#5976](https://github.com/matrix-org/matrix-react-sdk/pull/5976)
* Update colours and sizing for voice messages
[\#5970](https://github.com/matrix-org/matrix-react-sdk/pull/5970)
* Update link to Android SDK
[\#5973](https://github.com/matrix-org/matrix-react-sdk/pull/5973)
* Add cleanup functions for image view
[\#5962](https://github.com/matrix-org/matrix-react-sdk/pull/5962)
* Add a note about sharing your IP in P2P calls
[\#5961](https://github.com/matrix-org/matrix-react-sdk/pull/5961)
* Only aggregate DM notifications on the Space Panel in the Home Space
[\#5968](https://github.com/matrix-org/matrix-react-sdk/pull/5968)
* Add retry mechanism and progress bar to add existing to space dialog
[\#5975](https://github.com/matrix-org/matrix-react-sdk/pull/5975)
* Warn on access token reveal
[\#5755](https://github.com/matrix-org/matrix-react-sdk/pull/5755)
* Fix newly joined room appearing under the wrong space
[\#5945](https://github.com/matrix-org/matrix-react-sdk/pull/5945)
* Early rendering for voice messages in the timeline
[\#5955](https://github.com/matrix-org/matrix-react-sdk/pull/5955)
* Calculate the real waveform in the Playback class for voice messages
[\#5956](https://github.com/matrix-org/matrix-react-sdk/pull/5956)
* Don't recurse on arrayFastResample
[\#5957](https://github.com/matrix-org/matrix-react-sdk/pull/5957)
* Support a dark theme for voice messages
[\#5958](https://github.com/matrix-org/matrix-react-sdk/pull/5958)
* Handle no/blocked microphones in voice messages
[\#5959](https://github.com/matrix-org/matrix-react-sdk/pull/5959)
Changes in [3.20.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.20.0) (2021-05-10) Changes in [3.20.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.20.0) (2021-05-10)
===================================================================================================== =====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.20.0-rc.1...v3.20.0) [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.20.0-rc.1...v3.20.0)

2
__mocks__/empty.js Normal file
View file

@ -0,0 +1,2 @@
// Yes, this is empty.
module.exports = {};

43
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "matrix-react-sdk", "name": "matrix-react-sdk",
"version": "3.20.0", "version": "3.24.0",
"description": "SDK for matrix.org using React", "description": "SDK for matrix.org using React",
"author": "matrix.org", "author": "matrix.org",
"repository": { "repository": {
@ -55,10 +55,9 @@
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"await-lock": "^2.1.0", "await-lock": "^2.1.0",
"blueimp-canvas-to-blob": "^3.28.0",
"browser-encrypt-attachment": "^0.3.0", "browser-encrypt-attachment": "^0.3.0",
"browser-request": "^0.3.3", "browser-request": "^0.3.3",
"cheerio": "^1.0.0-rc.5", "cheerio": "^1.0.0-rc.9",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"commonmark": "^0.29.3", "commonmark": "^0.29.3",
"counterpart": "^0.18.6", "counterpart": "^0.18.6",
@ -79,8 +78,8 @@
"katex": "^0.12.0", "katex": "^0.12.0",
"linkifyjs": "^2.1.9", "linkifyjs": "^2.1.9",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", "matrix-js-sdk": "12.0.0",
"matrix-widget-api": "^0.1.0-beta.13", "matrix-widget-api": "^0.1.0-beta.15",
"minimist": "^1.2.5", "minimist": "^1.2.5",
"opus-recorder": "^8.0.3", "opus-recorder": "^8.0.3",
"pako": "^2.0.3", "pako": "^2.0.3",
@ -88,18 +87,16 @@
"png-chunks-extract": "^1.0.0", "png-chunks-extract": "^1.0.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"qrcode": "^1.4.4", "qrcode": "^1.4.4",
"qs": "^6.9.6",
"re-resizable": "^6.9.0", "re-resizable": "^6.9.0",
"react": "^16.14.0", "react": "^17.0.2",
"react-beautiful-dnd": "^4.0.1", "react-beautiful-dnd": "^13.1.0",
"react-dom": "^16.14.0", "react-dom": "^17.0.2",
"react-focus-lock": "^2.5.0", "react-focus-lock": "^2.5.0",
"react-transition-group": "^4.4.1", "react-transition-group": "^4.4.1",
"resize-observer-polyfill": "^1.5.1", "resize-observer-polyfill": "^1.5.1",
"rfc4648": "^1.4.0", "rfc4648": "^1.4.0",
"sanitize-html": "^2.3.2", "sanitize-html": "^2.3.2",
"tar-js": "^0.3.0", "tar-js": "^0.3.0",
"text-encoding-utf-8": "^1.0.2",
"url": "^0.11.0", "url": "^0.11.0",
"what-input": "^5.2.10", "what-input": "^5.2.10",
"zxcvbn": "^4.4.2" "zxcvbn": "^4.4.2"
@ -121,10 +118,12 @@
"@babel/preset-typescript": "^7.12.7", "@babel/preset-typescript": "^7.12.7",
"@babel/register": "^7.12.10", "@babel/register": "^7.12.10",
"@babel/traverse": "^7.12.12", "@babel/traverse": "^7.12.12",
"@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz",
"@peculiar/webcrypto": "^1.1.4", "@peculiar/webcrypto": "^1.1.4",
"@sinonjs/fake-timers": "^7.0.2", "@sinonjs/fake-timers": "^7.0.2",
"@types/classnames": "^2.2.11", "@types/classnames": "^2.2.11",
"@types/counterpart": "^0.18.1", "@types/counterpart": "^0.18.1",
"@types/diff-match-patch": "^1.0.32",
"@types/flux": "^3.1.9", "@types/flux": "^3.1.9",
"@types/jest": "^26.0.20", "@types/jest": "^26.0.20",
"@types/linkifyjs": "^2.1.3", "@types/linkifyjs": "^2.1.3",
@ -134,19 +133,20 @@
"@types/pako": "^1.0.1", "@types/pako": "^1.0.1",
"@types/parse5": "^6.0.0", "@types/parse5": "^6.0.0",
"@types/qrcode": "^1.3.5", "@types/qrcode": "^1.3.5",
"@types/react": "^16.9", "@types/react": "^17.0.2",
"@types/react-dom": "^16.9.10", "@types/react-beautiful-dnd": "^13.0.0",
"@types/react-dom": "^17.0.2",
"@types/react-transition-group": "^4.4.0", "@types/react-transition-group": "^4.4.0",
"@types/sanitize-html": "^1.27.0", "@types/sanitize-html": "^2.3.1",
"@types/zxcvbn": "^4.4.0", "@types/zxcvbn": "^4.4.0",
"@typescript-eslint/eslint-plugin": "^4.14.0", "@typescript-eslint/eslint-plugin": "^4.14.0",
"@typescript-eslint/parser": "^4.14.0", "@typescript-eslint/parser": "^4.14.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3", "babel-jest": "^26.6.3",
"chokidar": "^3.5.1", "chokidar": "^3.5.1",
"concurrently": "^5.3.0", "concurrently": "^5.3.0",
"enzyme": "^3.11.0", "enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint": "7.18.0", "eslint": "7.18.0",
"eslint-config-matrix-org": "^0.2.0", "eslint-config-matrix-org": "^0.2.0",
"eslint-plugin-babel": "^5.3.1", "eslint-plugin-babel": "^5.3.1",
@ -159,10 +159,9 @@
"jest-environment-jsdom-sixteen": "^1.0.3", "jest-environment-jsdom-sixteen": "^1.0.3",
"jest-fetch-mock": "^3.0.3", "jest-fetch-mock": "^3.0.3",
"matrix-mock-request": "^1.2.3", "matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.2.2", "matrix-react-test-utils": "^0.2.3",
"matrix-web-i18n": "github:matrix-org/matrix-web-i18n", "matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
"olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz", "react-test-renderer": "^17.0.2",
"react-test-renderer": "^16.14.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"stylelint": "^13.9.0", "stylelint": "^13.9.0",
"stylelint-config-standard": "^20.0.0", "stylelint-config-standard": "^20.0.0",
@ -170,13 +169,10 @@
"typescript": "^4.1.3", "typescript": "^4.1.3",
"walk": "^2.3.14" "walk": "^2.3.14"
}, },
"resolutions": {
"**/@types/react": "^16.14"
},
"jest": { "jest": {
"testEnvironment": "./__test-utils__/environment.js", "testEnvironment": "./__test-utils__/environment.js",
"testMatch": [ "testMatch": [
"<rootDir>/test/**/*-test.[jt]s" "<rootDir>/test/**/*-test.[jt]s?(x)"
], ],
"setupFiles": [ "setupFiles": [
"jest-canvas-mock" "jest-canvas-mock"
@ -186,7 +182,10 @@
], ],
"moduleNameMapper": { "moduleNameMapper": {
"\\.(gif|png|svg|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js", "\\.(gif|png|svg|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
"\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json" "\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json",
"decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
"decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
"waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js"
}, },
"transformIgnorePatterns": [ "transformIgnorePatterns": [
"/node_modules/(?!matrix-js-sdk).+$" "/node_modules/(?!matrix-js-sdk).+$"

3
res/css/_common.scss
View file

@ -45,6 +45,8 @@ html {
N.B. Breaks things when we have legitimate horizontal overscroll */ N.B. Breaks things when we have legitimate horizontal overscroll */
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
// Stop similar overscroll bounce in Firefox Nightly for macOS
overscroll-behavior: none;
} }
body { body {
@ -289,6 +291,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_staticWrapper .mx_Dialog { .mx_Dialog_staticWrapper .mx_Dialog {
z-index: 4010; z-index: 4010;
contain: content;
} }
.mx_Dialog_background { .mx_Dialog_background {

8
res/css/_components.scss
View file

@ -54,6 +54,7 @@
@import "./views/avatars/_MemberStatusMessageAvatar.scss"; @import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/avatars/_PulsedAvatar.scss"; @import "./views/avatars/_PulsedAvatar.scss";
@import "./views/avatars/_WidgetAvatar.scss"; @import "./views/avatars/_WidgetAvatar.scss";
@import "./views/beta/_BetaCard.scss";
@import "./views/context_menus/_CallContextMenu.scss"; @import "./views/context_menus/_CallContextMenu.scss";
@import "./views/context_menus/_IconizedContextMenu.scss"; @import "./views/context_menus/_IconizedContextMenu.scss";
@import "./views/context_menus/_MessageContextMenu.scss"; @import "./views/context_menus/_MessageContextMenu.scss";
@ -62,6 +63,7 @@
@import "./views/dialogs/_AddExistingToSpaceDialog.scss"; @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
@import "./views/dialogs/_AddressPickerDialog.scss"; @import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss"; @import "./views/dialogs/_Analytics.scss";
@import "./views/dialogs/_BetaFeedbackDialog.scss";
@import "./views/dialogs/_BugReportDialog.scss"; @import "./views/dialogs/_BugReportDialog.scss";
@import "./views/dialogs/_ChangelogDialog.scss"; @import "./views/dialogs/_ChangelogDialog.scss";
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss"; @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@ -74,6 +76,7 @@
@import "./views/dialogs/_DevtoolsDialog.scss"; @import "./views/dialogs/_DevtoolsDialog.scss";
@import "./views/dialogs/_EditCommunityPrototypeDialog.scss"; @import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
@import "./views/dialogs/_FeedbackDialog.scss"; @import "./views/dialogs/_FeedbackDialog.scss";
@import "./views/dialogs/_ForwardDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss"; @import "./views/dialogs/_GroupAddressPicker.scss";
@import "./views/dialogs/_HostSignupDialog.scss"; @import "./views/dialogs/_HostSignupDialog.scss";
@import "./views/dialogs/_IncomingSasDialog.scss"; @import "./views/dialogs/_IncomingSasDialog.scss";
@ -96,6 +99,7 @@
@import "./views/dialogs/_SpaceSettingsDialog.scss"; @import "./views/dialogs/_SpaceSettingsDialog.scss";
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss"; @import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
@import "./views/dialogs/_TermsDialog.scss"; @import "./views/dialogs/_TermsDialog.scss";
@import "./views/dialogs/_UntrustedDeviceDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss"; @import "./views/dialogs/_UploadConfirmDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss"; @import "./views/dialogs/_UserSettingsDialog.scss";
@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss"; @import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss";
@ -119,7 +123,6 @@
@import "./views/elements/_EventListSummary.scss"; @import "./views/elements/_EventListSummary.scss";
@import "./views/elements/_FacePile.scss"; @import "./views/elements/_FacePile.scss";
@import "./views/elements/_Field.scss"; @import "./views/elements/_Field.scss";
@import "./views/elements/_FormButton.scss";
@import "./views/elements/_ImageView.scss"; @import "./views/elements/_ImageView.scss";
@import "./views/elements/_InfoTooltip.scss"; @import "./views/elements/_InfoTooltip.scss";
@import "./views/elements/_InlineSpinner.scss"; @import "./views/elements/_InlineSpinner.scss";
@ -176,6 +179,7 @@
@import "./views/messages/_common_CryptoEvent.scss"; @import "./views/messages/_common_CryptoEvent.scss";
@import "./views/right_panel/_BaseCard.scss"; @import "./views/right_panel/_BaseCard.scss";
@import "./views/right_panel/_EncryptionInfo.scss"; @import "./views/right_panel/_EncryptionInfo.scss";
@import "./views/right_panel/_PinnedMessagesCard.scss";
@import "./views/right_panel/_RoomSummaryCard.scss"; @import "./views/right_panel/_RoomSummaryCard.scss";
@import "./views/right_panel/_UserInfo.scss"; @import "./views/right_panel/_UserInfo.scss";
@import "./views/right_panel/_VerificationPanel.scss"; @import "./views/right_panel/_VerificationPanel.scss";
@ -200,7 +204,6 @@
@import "./views/rooms/_NewRoomIntro.scss"; @import "./views/rooms/_NewRoomIntro.scss";
@import "./views/rooms/_NotificationBadge.scss"; @import "./views/rooms/_NotificationBadge.scss";
@import "./views/rooms/_PinnedEventTile.scss"; @import "./views/rooms/_PinnedEventTile.scss";
@import "./views/rooms/_PinnedEventsPanel.scss";
@import "./views/rooms/_PresenceLabel.scss"; @import "./views/rooms/_PresenceLabel.scss";
@import "./views/rooms/_ReplyPreview.scss"; @import "./views/rooms/_ReplyPreview.scss";
@import "./views/rooms/_RoomBreadcrumbs.scss"; @import "./views/rooms/_RoomBreadcrumbs.scss";
@ -237,6 +240,7 @@
@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss"; @import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss"; @import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss"; @import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
@import "./views/settings/tabs/user/_LabsUserSettingsTab.scss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss"; @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
@import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss"; @import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss";
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss"; @import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";

6
res/css/structures/_ContextualMenu.scss
View file

@ -38,6 +38,7 @@ limitations under the License.
position: absolute; position: absolute;
font-size: $font-14px; font-size: $font-14px;
z-index: 5001; z-index: 5001;
contain: content;
} }
.mx_ContextualMenu_right { .mx_ContextualMenu_right {
@ -115,8 +116,3 @@ limitations under the License.
border-top: 8px solid $menu-bg-color; border-top: 8px solid $menu-bg-color;
border-right: 8px solid transparent; border-right: 8px solid transparent;
} }
.mx_ContextualMenu_spinner {
display: block;
margin: 0 auto;
}

6
res/css/structures/_GroupFilterPanel.scss
View file

@ -56,6 +56,12 @@ limitations under the License.
.mx_GroupFilterPanel .mx_TagTile { .mx_GroupFilterPanel .mx_TagTile {
// opacity: 0.5; // opacity: 0.5;
position: relative; position: relative;
.mx_BetaDot {
position: absolute;
right: -13px;
top: -11px;
}
} }
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype { .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {

31
res/css/structures/_LeftPanel.scss
View file

@ -25,6 +25,7 @@ $roomListCollapsedWidth: 68px;
// Create a row-based flexbox for the GroupFilterPanel and the room list // Create a row-based flexbox for the GroupFilterPanel and the room list
display: flex; display: flex;
contain: content;
.mx_LeftPanel_GroupFilterPanelContainer { .mx_LeftPanel_GroupFilterPanelContainer {
flex-grow: 0; flex-grow: 0;
@ -70,6 +71,7 @@ $roomListCollapsedWidth: 68px;
// aligned correctly. This is also a row-based flexbox. // aligned correctly. This is also a row-based flexbox.
display: flex; display: flex;
align-items: center; align-items: center;
contain: content;
&.mx_IndicatorScrollbar_leftOverflow { &.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 5%); mask-image: linear-gradient(90deg, transparent, black 5%);
@ -109,6 +111,29 @@ $roomListCollapsedWidth: 68px;
} }
} }
.mx_LeftPanel_dialPadButton {
width: 32px;
height: 32px;
border-radius: 8px;
background-color: $roomlist-button-bg-color;
position: relative;
margin-left: 8px;
&::before {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 16px;
height: 16px;
mask-image: url('$(res)/img/element-icons/call/dialpad.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $secondary-fg-color;
}
}
.mx_LeftPanel_exploreButton { .mx_LeftPanel_exploreButton {
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -183,6 +208,12 @@ $roomListCollapsedWidth: 68px;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
.mx_LeftPanel_dialPadButton {
margin-left: 0;
margin-top: 8px;
background-color: transparent;
}
.mx_LeftPanel_exploreButton { .mx_LeftPanel_exploreButton {
margin-left: 0; margin-left: 0;
margin-top: 8px; margin-top: 8px;

7
res/css/structures/_MyGroups.scss
View file

@ -17,6 +17,11 @@ limitations under the License.
.mx_MyGroups { .mx_MyGroups {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.mx_BetaCard {
margin: 0 72px;
max-width: 760px;
}
} }
.mx_MyGroups .mx_RoomHeader_simpleHeader { .mx_MyGroups .mx_RoomHeader_simpleHeader {
@ -30,7 +35,7 @@ limitations under the License.
flex-wrap: wrap; flex-wrap: wrap;
} }
.mx_MyGroups > :not(.mx_RoomHeader) { .mx_MyGroups > :not(.mx_RoomHeader):not(.mx_BetaCard) {
max-width: 960px; max-width: 960px;
margin: 40px; margin: 40px;
} }

2
res/css/structures/_NotificationPanel.scss
View file

@ -82,7 +82,6 @@ limitations under the License.
color: $primary-fg-color; color: $primary-fg-color;
font-size: $font-12px; font-size: $font-12px;
display: inline; display: inline;
padding-left: 0px;
} }
.mx_NotificationPanel .mx_EventTile_senderDetails { .mx_NotificationPanel .mx_EventTile_senderDetails {
@ -103,6 +102,7 @@ limitations under the License.
visibility: visible; visibility: visible;
position: initial; position: initial;
display: inline; display: inline;
padding-left: 5px;
} }
.mx_NotificationPanel .mx_EventTile_line { .mx_NotificationPanel .mx_EventTile_line {

43
res/css/structures/_RightPanel.scss
View file

@ -25,6 +25,7 @@ limitations under the License.
padding: 4px 0; padding: 4px 0;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
contain: strict;
.mx_RoomView_MessageList { .mx_RoomView_MessageList {
padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
@ -98,6 +99,48 @@ limitations under the License.
mask-position: center; mask-position: center;
} }
$dot-size: 8px;
$pulse-color: $pinned-unread-color;
.mx_RightPanel_pinnedMessagesButton {
&::before {
mask-image: url('$(res)/img/element-icons/room/pin.svg');
mask-position: center;
}
.mx_RightPanel_pinnedMessagesButton_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;
}
}
@keyframes mx_RightPanel_indicator_pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba($pulse-color, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0);
}
}
.mx_RightPanel_headerButton_highlight { .mx_RightPanel_headerButton_highlight {
&::before { &::before {
background-color: $accent-color !important; background-color: $accent-color !important;

38
res/css/structures/_RoomDirectory.scss
View file

@ -61,6 +61,39 @@ limitations under the License.
.mx_RoomDirectory_tableWrapper { .mx_RoomDirectory_tableWrapper {
overflow-y: auto; overflow-y: auto;
flex: 1 1 0; flex: 1 1 0;
.mx_RoomDirectory_footer {
margin-top: 24px;
text-align: center;
> h5 {
margin: 0;
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-18px;
color: $primary-fg-color;
}
> p {
margin: 40px auto 60px;
font-size: $font-14px;
line-height: $font-20px;
color: $secondary-fg-color;
max-width: 464px; // easier reading
}
> hr {
margin: 0;
border: none;
height: 1px;
background-color: $header-panel-bg-color;
}
.mx_RoomDirectory_newRoom {
margin: 24px auto 0;
width: max-content;
}
}
} }
.mx_RoomDirectory_table { .mx_RoomDirectory_table {
@ -138,11 +171,6 @@ limitations under the License.
color: $settings-grey-fg-color; color: $settings-grey-fg-color;
} }
.mx_RoomDirectory_table tr {
padding-bottom: 10px;
cursor: pointer;
}
.mx_RoomDirectory .mx_RoomView_MessageList { .mx_RoomDirectory .mx_RoomView_MessageList {
padding: 0; padding: 0;
} }

12
res/css/structures/_RoomStatusBar.scss
View file

@ -112,7 +112,7 @@ limitations under the License.
.mx_AccessibleButton { .mx_AccessibleButton {
padding: 5px 10px; padding: 5px 10px;
padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -128,13 +128,14 @@ limitations under the License.
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
width: 18px;
height: 18px;
top: 50%; // text sizes are dynamic
transform: translateY(-50%);
} }
&.mx_RoomStatusBar_unsentCancelAllBtn::before { &.mx_RoomStatusBar_unsentCancelAllBtn::before {
mask-image: url('$(res)/img/element-icons/trashcan.svg'); mask-image: url('$(res)/img/element-icons/trashcan.svg');
width: 12px;
height: 16px;
top: calc(50% - 8px); // text sizes are dynamic
} }
&.mx_RoomStatusBar_unsentResendAllBtn { &.mx_RoomStatusBar_unsentResendAllBtn {
@ -142,9 +143,6 @@ limitations under the License.
&::before { &::before {
mask-image: url('$(res)/img/element-icons/retry.svg'); mask-image: url('$(res)/img/element-icons/retry.svg');
width: 18px;
height: 18px;
top: calc(50% - 9px); // text sizes are dynamic
} }
} }
} }

2
res/css/structures/_RoomView.scss
View file

@ -152,6 +152,7 @@ limitations under the License.
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
contain: content;
} }
.mx_RoomView_statusArea { .mx_RoomView_statusArea {
@ -237,6 +238,7 @@ hr.mx_RoomView_myReadMarker {
position: relative; position: relative;
top: -1px; top: -1px;
z-index: 1; z-index: 1;
will-change: width;
transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s; transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s;
width: 99%; width: 99%;
opacity: 1; opacity: 1;

3
res/css/structures/_ScrollPanel.scss
View file

@ -21,5 +21,8 @@ limitations under the License.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
content-visibility: auto;
contain-intrinsic-size: 50px;
} }
} }

7
res/css/structures/_SpacePanel.scss
View file

@ -31,7 +31,6 @@ $activeBorderColor: $secondary-fg-color;
// Create another flexbox so the Panel fills the container // Create another flexbox so the Panel fills the container
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto;
.mx_SpacePanel_spaceTreeWrapper { .mx_SpacePanel_spaceTreeWrapper {
flex: 1; flex: 1;
@ -69,6 +68,12 @@ $activeBorderColor: $secondary-fg-color;
cursor: pointer; cursor: pointer;
} }
.mx_SpaceItem_dragging {
.mx_SpaceButton_toggleCollapse {
visibility: hidden;
}
}
.mx_SpaceTreeLevel { .mx_SpaceTreeLevel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

178
res/css/structures/_SpaceRoomView.scss
View file

@ -93,6 +93,10 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
&:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt {
width: $SpaceRoomViewInnerWidth;
}
.mx_SpaceRoomView_buttons { .mx_SpaceRoomView_buttons {
display: block; display: block;
margin-top: 44px; margin-top: 44px;
@ -103,6 +107,10 @@ $SpaceRoomViewInnerWidth: 428px;
padding: 8px 22px; padding: 8px 22px;
margin-left: 16px; margin-left: 16px;
} }
input.mx_AccessibleButton {
border: none; // override default styles
}
} }
.mx_Field { .mx_Field {
@ -133,6 +141,44 @@ $SpaceRoomViewInnerWidth: 428px;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 2px 15px 30px $dialog-shadow-color; box-shadow: 2px 15px 30px $dialog-shadow-color;
border-radius: 8px; border-radius: 8px;
position: relative;
// XXX remove this when spaces leaves Beta
.mx_BetaCard_betaPill {
position: absolute;
right: 24px;
top: 32px;
}
// XXX remove this when spaces leaves Beta
.mx_SpaceRoomView_preview_spaceBetaPrompt {
font-weight: $font-semi-bold;
font-size: $font-14px;
line-height: $font-24px;
color: $primary-fg-color;
margin-top: 24px;
position: relative;
padding-left: 24px;
.mx_AccessibleButton_kind_link {
display: inline;
padding: 0;
font-size: inherit;
line-height: inherit;
}
&::before {
content: "";
position: absolute;
height: $font-24px;
width: 20px;
left: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
background-color: $secondary-fg-color;
}
}
.mx_SpaceRoomView_preview_inviter { .mx_SpaceRoomView_preview_inviter {
display: flex; display: flex;
@ -282,6 +328,8 @@ $SpaceRoomViewInnerWidth: 428px;
font-size: $font-15px; font-size: $font-15px;
margin-top: 12px; margin-top: 12px;
margin-bottom: 16px; margin-bottom: 16px;
white-space: pre-wrap;
word-wrap: break-word;
} }
> hr { > hr {
@ -293,10 +341,19 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SearchBox { .mx_SearchBox {
margin: 0 0 20px; margin: 0 0 20px;
} }
.mx_SpaceFeedbackPrompt {
margin-bottom: 16px;
// hide the HR as we have our own
& + hr {
display: none;
}
}
} }
.mx_SpaceRoomView_privateScope { .mx_SpaceRoomView_privateScope {
.mx_AccessibleButton { > .mx_AccessibleButton {
@mixin SpacePillButton; @mixin SpacePillButton;
} }
@ -309,7 +366,63 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
.mx_SpaceRoomView_betaWarning {
padding: 12px 12px 12px 54px;
position: relative;
font-size: $font-15px;
line-height: $font-24px;
width: 432px;
border-radius: 8px;
background-color: $info-plinth-bg-color;
color: $secondary-fg-color;
box-sizing: border-box;
> h3 {
font-weight: $font-semi-bold;
font-size: inherit;
line-height: inherit;
margin: 0;
}
> p {
font-size: inherit;
line-height: inherit;
margin: 0;
}
&::before {
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
content: '';
width: 20px;
height: 20px;
position: absolute;
top: 14px;
left: 14px;
background-color: $secondary-fg-color;
}
}
.mx_SpaceRoomView_inviteTeammates { .mx_SpaceRoomView_inviteTeammates {
// XXX remove this when spaces leaves Beta
.mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
padding: 58px 16px 16px;
position: relative;
border-radius: 8px;
background-color: $header-panel-bg-color;
max-width: $SpaceRoomViewInnerWidth;
margin: 20px 0 30px;
box-sizing: border-box;
.mx_BetaCard_betaPill {
position: absolute;
left: 16px;
top: 16px;
}
}
.mx_SpaceRoomView_inviteTeammates_buttons { .mx_SpaceRoomView_inviteTeammates_buttons {
color: $secondary-fg-color; color: $secondary-fg-color;
margin-top: 28px; margin-top: 28px;
@ -391,3 +504,66 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
} }
.mx_SpaceFeedbackPrompt {
margin-top: 18px;
margin-bottom: 12px;
> hr {
border: none;
border-top: 1px solid $input-border-color;
margin-bottom: 12px;
}
> div {
display: flex;
flex-direction: row;
font-size: $font-15px;
line-height: $font-24px;
> span {
color: $secondary-fg-color;
position: relative;
padding-left: 32px;
font-size: inherit;
line-height: inherit;
margin-right: auto;
&::before {
content: '';
position: absolute;
left: 0;
top: 2px;
height: 20px;
width: 20px;
background-color: $secondary-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
mask-position: center;
}
}
.mx_AccessibleButton_kind_link {
color: $accent-color;
position: relative;
padding: 0 0 0 24px;
margin-left: 8px;
font-size: inherit;
line-height: inherit;
&::before {
content: '';
position: absolute;
left: 0;
height: 16px;
width: 16px;
background-color: $accent-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
mask-position: center;
}
}
}
}

5
res/css/structures/_ToastContainer.scss
View file

@ -71,7 +71,7 @@ limitations under the License.
&::before { &::before {
background-color: #ffffff; background-color: #ffffff;
mask-image: url('$(res)/img/e2e/normal.svg'); mask-image: url('$(res)/img/e2e/normal.svg');
mask-size: 90%; mask-size: 80%;
} }
&::after { &::after {
@ -134,8 +134,9 @@ limitations under the License.
.mx_Toast_buttons { .mx_Toast_buttons {
float: right; float: right;
display: flex; display: flex;
gap: 5px;
.mx_FormButton { .mx_AccessibleButton {
min-width: 96px; min-width: 96px;
box-sizing: border-box; box-sizing: border-box;
} }

1
res/css/views/avatars/_DecoratedRoomAvatar.scss
View file

@ -16,6 +16,7 @@ limitations under the License.
.mx_DecoratedRoomAvatar, .mx_ExtraTile { .mx_DecoratedRoomAvatar, .mx_ExtraTile {
position: relative; position: relative;
contain: content;
&.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar { &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg'); mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg');

133
res/css/views/beta/_BetaCard.scss Normal file
View file

@ -0,0 +1,133 @@
/*
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_BetaCard {
margin-bottom: 20px;
padding: 24px;
background-color: $settings-profile-placeholder-bg-color;
border-radius: 8px;
box-sizing: border-box;
.mx_BetaCard_columns {
display: flex;
> div {
.mx_BetaCard_title {
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;
color: $primary-fg-color;
margin: 4px 0 14px;
.mx_BetaCard_betaPill {
margin-left: 12px;
}
}
.mx_BetaCard_caption {
font-size: $font-15px;
line-height: $font-20px;
color: $secondary-fg-color;
margin-bottom: 20px;
}
.mx_BetaCard_buttons .mx_AccessibleButton {
display: block;
margin: 12px 0;
padding: 7px 40px;
width: auto;
}
.mx_BetaCard_disclaimer {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
margin-top: 20px;
}
}
> img {
margin: auto 0 auto 20px;
width: 300px;
object-fit: contain;
height: 100%;
}
}
.mx_BetaCard_relatedSettings {
.mx_SettingsFlag {
margin: 16px 0 0;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
.mx_SettingsFlag_microcopy {
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
}
}
}
}
.mx_BetaCard_betaPill {
background-color: $accent-color-alt;
padding: 4px 10px;
border-radius: 8px;
text-transform: uppercase;
font-size: 12px;
line-height: 15px;
color: #FFFFFF;
display: inline-block;
vertical-align: text-bottom;
&.mx_BetaCard_betaPill_clickable {
cursor: pointer;
}
}
$pulse-color: $accent-color-alt;
$dot-size: 12px;
.mx_BetaDot {
border-radius: 50%;
margin: 10px;
height: $dot-size;
width: $dot-size;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_Beta_bluePulse 2s infinite;
animation-iteration-count: 20;
}
@keyframes mx_Beta_bluePulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba($pulse-color, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0);
}
}

74
res/css/views/context_menus/_MessageContextMenu.scss
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2021 Michael Weimann <mail@michael-weimann.eu>
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -15,16 +16,69 @@ limitations under the License.
*/ */
.mx_MessageContextMenu { .mx_MessageContextMenu {
padding: 6px;
}
.mx_MessageContextMenu_field { .mx_IconizedContextMenu_icon {
display: block; width: 16px;
padding: 3px 6px 3px 6px; height: 16px;
cursor: pointer; display: block;
white-space: nowrap;
}
.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet { &::before {
font-weight: bold; content: '';
width: 16px;
height: 16px;
display: block;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
.mx_MessageContextMenu_iconCollapse::before {
mask-image: url('$(res)/img/element-icons/message/chevron-up.svg');
}
.mx_MessageContextMenu_iconReport::before {
mask-image: url('$(res)/img/element-icons/warning-badge.svg');
}
.mx_MessageContextMenu_iconLink::before {
mask-image: url('$(res)/img/element-icons/link.svg');
}
.mx_MessageContextMenu_iconPermalink::before {
mask-image: url('$(res)/img/element-icons/room/share.svg');
}
.mx_MessageContextMenu_iconUnhidePreview::before {
mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
}
.mx_MessageContextMenu_iconForward::before {
mask-image: url('$(res)/img/element-icons/message/fwd.svg');
}
.mx_MessageContextMenu_iconRedact::before {
mask-image: url('$(res)/img/element-icons/trashcan.svg');
}
.mx_MessageContextMenu_iconResend::before {
mask-image: url('$(res)/img/element-icons/retry.svg');
}
.mx_MessageContextMenu_iconSource::before {
mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
}
.mx_MessageContextMenu_iconQuote::before {
mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg');
}
.mx_MessageContextMenu_iconPin::before {
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
}
.mx_MessageContextMenu_iconUnpin::before {
mask-image: url('$(res)/img/element-icons/room/pin.svg');
}
} }

9
res/css/views/context_menus/_TagTileContextMenu.scss
View file

@ -38,6 +38,15 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/view-community.svg'); mask-image: url('$(res)/img/element-icons/view-community.svg');
} }
.mx_TagTileContextMenu_moveUp::before {
transform: rotate(180deg);
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_TagTileContextMenu_moveDown::before {
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_TagTileContextMenu_hideCommunity::before { .mx_TagTileContextMenu_hideCommunity::before {
mask-image: url('$(res)/img/element-icons/hide.svg'); mask-image: url('$(res)/img/element-icons/hide.svg');
} }

201
res/css/views/dialogs/_AddExistingToSpaceDialog.scss
View file

@ -54,7 +54,8 @@ limitations under the License.
display: flex; display: flex;
margin-top: 12px; margin-top: 12px;
.mx_BaseAvatar { // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
.mx_DecoratedRoomAvatar {
margin-right: 12px; margin-right: 12px;
} }
@ -75,10 +76,124 @@ limitations under the License.
} }
.mx_AddExistingToSpace_section_spaces { .mx_AddExistingToSpace_section_spaces {
.mx_BaseAvatar {
margin-right: 12px;
}
.mx_BaseAvatar_image { .mx_BaseAvatar_image {
border-radius: 8px; border-radius: 8px;
} }
} }
.mx_AddExistingToSpace_section_experimental {
position: relative;
border-radius: 8px;
margin: 12px 0;
padding: 8px 8px 8px 42px;
background-color: $header-panel-bg-color;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
&::before {
content: '';
position: absolute;
left: 10px;
top: calc(50% - 8px); // vertical centering
height: 16px;
width: 16px;
background-color: $secondary-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
mask-position: center;
}
}
.mx_AddExistingToSpace_footer {
display: flex;
margin-top: 20px;
> span {
flex-grow: 1;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
.mx_ProgressBar {
height: 8px;
width: 100%;
@mixin ProgressBarBorderRadius 8px;
}
.mx_AddExistingToSpace_progressText {
margin-top: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
}
> * {
vertical-align: middle;
}
}
.mx_AddExistingToSpace_error {
padding-left: 12px;
> img {
align-self: center;
}
.mx_AddExistingToSpace_errorHeading {
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-18px;
color: $notice-primary-color;
}
.mx_AddExistingToSpace_errorCaption {
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $primary-fg-color;
}
}
.mx_AccessibleButton {
display: inline-block;
align-self: center;
}
.mx_AccessibleButton_kind_primary {
padding: 8px 36px;
}
.mx_AddExistingToSpace_retryButton {
margin-left: 12px;
padding-left: 24px;
position: relative;
&::before {
content: '';
position: absolute;
background-color: $primary-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/retry.svg');
width: 18px;
height: 18px;
left: 0;
}
}
.mx_AccessibleButton_kind_link {
padding: 0;
}
}
} }
.mx_AddExistingToSpaceDialog { .mx_AddExistingToSpaceDialog {
@ -163,88 +278,4 @@ limitations under the License.
.mx_AddExistingToSpace { .mx_AddExistingToSpace {
display: contents; display: contents;
} }
.mx_AddExistingToSpaceDialog_footer {
display: flex;
margin-top: 20px;
> span {
flex-grow: 1;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
.mx_ProgressBar {
height: 8px;
width: 100%;
@mixin ProgressBarBorderRadius 8px;
}
.mx_AddExistingToSpaceDialog_progressText {
margin-top: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
}
> * {
vertical-align: middle;
}
}
.mx_AddExistingToSpaceDialog_error {
padding-left: 12px;
> img {
align-self: center;
}
.mx_AddExistingToSpaceDialog_errorHeading {
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-18px;
color: $notice-primary-color;
}
.mx_AddExistingToSpaceDialog_errorCaption {
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $primary-fg-color;
}
}
.mx_AccessibleButton {
display: inline-block;
align-self: center;
}
.mx_AccessibleButton_kind_primary {
padding: 8px 36px;
}
.mx_AddExistingToSpaceDialog_retryButton {
margin-left: 12px;
padding-left: 24px;
position: relative;
&::before {
content: '';
position: absolute;
background-color: $primary-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/retry.svg');
width: 18px;
height: 18px;
left: 0;
}
}
.mx_AccessibleButton_kind_link {
padding: 0;
}
}
} }

24
src/utils/Accessibility.js → res/css/views/dialogs/_BetaFeedbackDialog.scss
View file

@ -1,5 +1,5 @@
/* /*
Copyright 2019 The Matrix.org Foundation C.I.C. Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -14,15 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
/** .mx_BetaFeedbackDialog {
* Automatically focuses the captured reference when receiving a non-null .mx_BetaFeedbackDialog_subheading {
* object. Useful in scenarios where componentDidMount does not have a color: $primary-fg-color;
* useful reference to an element, but one needs to focus the element on font-size: $font-14px;
* first render. Example usage: ref={focusCapturedRef} line-height: $font-20px;
* @param {function} ref The React reference to focus on, if not null margin-bottom: 24px;
*/ }
export function focusCapturedRef(ref) {
if (ref) { .mx_AccessibleButton_kind_link {
ref.focus(); padding: 0;
font-size: inherit;
line-height: inherit;
} }
} }

159
res/css/views/dialogs/_ForwardDialog.scss Normal file
View file

@ -0,0 +1,159 @@
/*
Copyright 2021 Robin Townsend <robin@robin.town>
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_ForwardDialog {
width: 520px;
color: $primary-fg-color;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
min-height: 0;
height: 80vh;
> h3 {
margin: 0 0 6px;
color: $secondary-fg-color;
font-size: $font-12px;
font-weight: $font-semi-bold;
line-height: $font-15px;
}
> .mx_ForwardDialog_preview {
max-height: 30%;
flex-shrink: 0;
overflow-y: auto;
div {
pointer-events: none;
}
.mx_EventTile_msgOption {
display: none;
}
// When forwarding messages from encrypted rooms, EventTile will complain
// that our preview is unencrypted, which doesn't actually matter
.mx_EventTile_e2eIcon_unencrypted {
display: none;
}
// We also hide download links to not encourage users to try interacting
.mx_MFileBody_download {
display: none;
}
}
> hr {
width: 100%;
border: none;
border-top: 1px solid $input-border-color;
margin: 12px 0;
}
> .mx_ForwardList {
display: contents;
.mx_SearchBox {
// To match the space around the title
margin: 0 0 15px 0;
flex-grow: 0;
}
.mx_ForwardList_content {
flex-grow: 1;
}
.mx_ForwardList_noResults {
display: block;
margin-top: 24px;
}
.mx_ForwardList_results {
&:not(:first-child) {
margin-top: 24px;
}
.mx_ForwardList_entry {
display: flex;
justify-content: space-between;
height: 32px;
padding: 6px;
border-radius: 8px;
&:hover {
background-color: $groupFilterPanel-bg-color;
}
.mx_ForwardList_roomButton {
display: flex;
margin-right: 12px;
min-width: 0;
.mx_DecoratedRoomAvatar {
margin-right: 12px;
}
.mx_ForwardList_entry_name {
font-size: $font-15px;
line-height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 12px;
}
}
.mx_ForwardList_sendButton {
position: relative;
&:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
// Hide the "Send" label while preserving button size
visibility: hidden;
}
.mx_ForwardList_sendIcon, .mx_NotificationBadge {
position: absolute;
}
.mx_NotificationBadge {
// Match the failed to send indicator's color with the disabled button
background-color: $button-danger-disabled-fg-color;
}
&.mx_ForwardList_sending .mx_ForwardList_sendIcon {
background-color: $button-primary-bg-color;
mask-image: url('$(res)/img/element-icons/circle-sending.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: 14px;
width: 14px;
height: 14px;
}
&.mx_ForwardList_sent .mx_ForwardList_sendIcon {
background-color: $button-primary-bg-color;
mask-image: url('$(res)/img/element-icons/circle-sent.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: 14px;
width: 14px;
height: 14px;
}
}
}
}
}
}

143
res/css/views/dialogs/_InviteDialog.scss
View file

@ -17,6 +17,9 @@ limitations under the License.
.mx_InviteDialog_addressBar { .mx_InviteDialog_addressBar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
// for the user section gets weird.
margin: 8px 45px 0 0;
.mx_InviteDialog_editor { .mx_InviteDialog_editor {
flex: 1; flex: 1;
@ -73,7 +76,7 @@ limitations under the License.
} }
.mx_InviteDialog_section { .mx_InviteDialog_section {
padding-bottom: 10px; padding-bottom: 4px;
h3 { h3 {
font-size: $font-12px; font-size: $font-12px;
@ -82,6 +85,14 @@ limitations under the License.
text-transform: uppercase; text-transform: uppercase;
} }
> p {
margin: 0;
}
> span {
color: $primary-fg-color;
}
.mx_InviteDialog_subname { .mx_InviteDialog_subname {
margin-bottom: 10px; margin-bottom: 10px;
margin-top: -10px; // HACK: Positioning with margins is bad margin-top: -10px; // HACK: Positioning with margins is bad
@ -90,6 +101,63 @@ limitations under the License.
} }
} }
.mx_InviteDialog_section_hidden_suggestions_disclaimer {
padding: 8px 0 16px 0;
font-size: $font-14px;
> span {
color: $primary-fg-color;
font-weight: 600;
}
> p {
margin: 0;
}
}
.mx_InviteDialog_footer {
border-top: 1px solid $input-border-color;
> h3 {
margin: 12px 0;
font-size: $font-12px;
color: $muted-fg-color;
font-weight: bold;
text-transform: uppercase;
}
.mx_InviteDialog_footer_link {
display: flex;
justify-content: space-between;
border-radius: 4px;
border: solid 1px $light-fg-color;
padding: 8px;
> a {
text-decoration: none;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
}
.mx_InviteDialog_footer_link_copy {
flex-shrink: 0;
cursor: pointer;
margin-left: 20px;
display: inherit;
> div {
mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color;
margin-left: 5px;
width: 20px;
height: 20px;
background-repeat: no-repeat;
}
}
}
.mx_InviteDialog_roomTile { .mx_InviteDialog_roomTile {
cursor: pointer; cursor: pointer;
padding: 5px 10px; padding: 5px 10px;
@ -142,6 +210,7 @@ limitations under the License.
.mx_InviteDialog_roomTile_nameStack { .mx_InviteDialog_roomTile_nameStack {
display: inline-block; display: inline-block;
overflow: hidden;
} }
.mx_InviteDialog_roomTile_name { .mx_InviteDialog_roomTile_name {
@ -157,6 +226,13 @@ limitations under the License.
margin-left: 7px; margin-left: 7px;
} }
.mx_InviteDialog_roomTile_name,
.mx_InviteDialog_roomTile_userId {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_InviteDialog_roomTile_time { .mx_InviteDialog_roomTile_time {
text-align: right; text-align: right;
font-size: $font-12px; font-size: $font-12px;
@ -212,24 +288,71 @@ limitations under the License.
.mx_InviteDialog { .mx_InviteDialog {
// Prevent the dialog from jumping around randomly when elements change. // Prevent the dialog from jumping around randomly when elements change.
height: 590px; height: 600px;
padding-left: 20px; // the design wants some padding on the left padding-left: 20px; // the design wants some padding on the left
display: flex;
flex-direction: column;
.mx_InviteDialog_content {
overflow: hidden;
height: 100%;
}
} }
.mx_InviteDialog_userSections { .mx_InviteDialog_userSections {
margin-top: 10px; margin-top: 4px;
overflow-y: auto; overflow-y: auto;
padding-right: 45px; padding: 0 45px 4px 0;
height: 455px; // mx_InviteDialog's height minus some for the upper elements height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
} }
// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar .mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
// for the user section gets weird. height: calc(100% - 175px);
.mx_InviteDialog_helpText, }
.mx_InviteDialog_addressBar {
margin-right: 45px; .mx_InviteDialog_helpText {
margin: 0;
} }
.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link { .mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
padding: 0; padding: 0;
} }
.mx_InviteDialog_multiInviterError {
> h4 {
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-fg-color;
font-weight: normal;
}
> div {
.mx_InviteDialog_multiInviterError_entry {
margin-bottom: 24px;
.mx_InviteDialog_multiInviterError_entry_userProfile {
.mx_InviteDialog_multiInviterError_entry_name {
margin-left: 6px;
font-size: $font-15px;
line-height: $font-24px;
font-weight: $font-semi-bold;
color: $primary-fg-color;
}
.mx_InviteDialog_multiInviterError_entry_userId {
margin-left: 6px;
font-size: $font-12px;
line-height: $font-15px;
color: $tertiary-fg-color;
}
}
.mx_InviteDialog_multiInviterError_entry_error {
margin-left: 32px;
font-size: $font-15px;
line-height: $font-24px;
color: $notice-primary-color;
}
}
}
}

2
res/css/views/dialogs/_SettingsDialog.scss
View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
// Not actually a component but things shared by settings components // Not actually a component but things shared by settings components
.mx_UserSettingsDialog, .mx_RoomSettingsDialog { .mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog {
width: 90vw; width: 90vw;
max-width: 1000px; max-width: 1000px;
// set the height too since tabbed view scrolls itself. // set the height too since tabbed view scrolls itself.

3
res/css/views/dialogs/_ShareDialog.scss
View file

@ -50,7 +50,8 @@ limitations under the License.
margin-left: 20px; margin-left: 20px;
display: inherit; display: inherit;
} }
.mx_ShareDialog_matrixto_copy > div { .mx_ShareDialog_matrixto_copy::after {
content: "";
mask-image: url($copy-button-url); mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color; background-color: $message-action-bar-fg-color;
margin-left: 5px; margin-left: 5px;

51
res/css/views/dialogs/_SpaceSettingsDialog.scss
View file

@ -15,7 +15,6 @@ limitations under the License.
*/ */
.mx_SpaceSettingsDialog { .mx_SpaceSettingsDialog {
width: 480px;
color: $primary-fg-color; color: $primary-fg-color;
.mx_SpaceSettings_errorText { .mx_SpaceSettings_errorText {
@ -32,8 +31,44 @@ limitations under the License.
margin-left: 16px; margin-left: 16px;
} }
.mx_AccessibleButton_kind_danger { .mx_SettingsTab_section {
margin-top: 28px; .mx_SettingsTab_section_caption {
margin-top: 12px;
margin-bottom: 20px;
}
& + .mx_SettingsTab_subheading {
border-top: 1px solid $message-body-panel-bg-color;
margin-top: 0;
padding-top: 24px;
}
.mx_RadioButton {
margin-top: 8px;
margin-bottom: 4px;
.mx_RadioButton_content {
font-weight: $font-semi-bold;
line-height: $font-18px;
color: $primary-fg-color;
}
& + span {
font-size: $font-15px;
line-height: $font-18px;
color: $secondary-fg-color;
margin-left: 26px;
}
}
.mx_SettingsTab_showAdvanced {
margin: 16px 0;
padding: 0;
}
.mx_SettingsFlag {
margin-top: 24px;
}
} }
.mx_SpaceSettingsDialog_buttons { .mx_SpaceSettingsDialog_buttons {
@ -52,4 +87,14 @@ limitations under the License.
.mx_AccessibleButton_hasKind { .mx_AccessibleButton_hasKind {
padding: 8px 22px; padding: 8px 22px;
} }
.mx_TabbedView_tabLabel {
.mx_SpaceSettingsDialog_generalIcon::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_SpaceSettingsDialog_visibilityIcon::before {
mask-image: url('$(res)/img/element-icons/eye.svg');
}
}
} }

26
res/css/views/dialogs/_UntrustedDeviceDialog.scss Normal file
View file

@ -0,0 +1,26 @@
/*
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_UntrustedDeviceDialog {
.mx_Dialog_title {
display: flex;
align-items: center;
.mx_E2EIcon {
margin-left: 0;
}
}
}

42
res/css/views/elements/_FormButton.scss
View file

@ -1,42 +0,0 @@
/*
Copyright 2019 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_FormButton {
line-height: $font-16px;
padding: 5px 15px;
font-size: $font-12px;
height: min-content;
&:not(:last-child) {
margin-right: 8px;
}
&.mx_AccessibleButton_kind_primary {
color: $accent-color;
background-color: $accent-bg-color;
}
&.mx_AccessibleButton_kind_danger {
color: $notice-primary-color;
background-color: $notice-primary-bg-color;
}
&.mx_AccessibleButton_kind_secondary {
color: $secondary-fg-color;
border: 1px solid $secondary-fg-color;
background-color: unset;
}
}

6
res/css/views/elements/_ImageView.scss
View file

@ -22,6 +22,7 @@ limitations under the License.
} }
.mx_ImageView_image_wrapper { .mx_ImageView_image_wrapper {
pointer-events: initial;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -30,7 +31,6 @@ limitations under the License.
} }
.mx_ImageView_image { .mx_ImageView_image {
pointer-events: all;
flex-shrink: 0; flex-shrink: 0;
} }
@ -43,7 +43,7 @@ limitations under the License.
} }
.mx_ImageView_info_wrapper { .mx_ImageView_info_wrapper {
pointer-events: all; pointer-events: initial;
padding-left: 32px; padding-left: 32px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -63,7 +63,7 @@ limitations under the License.
.mx_ImageView_toolbar { .mx_ImageView_toolbar {
padding-right: 16px; padding-right: 16px;
pointer-events: all; pointer-events: initial;
display: flex; display: flex;
align-items: center; align-items: center;
} }

6
res/css/views/elements/_InlineSpinner.scss
View file

@ -18,7 +18,11 @@ limitations under the License.
display: inline; display: inline;
} }
.mx_InlineSpinner_spin img { .mx_InlineSpinner img, .mx_InlineSpinner_icon {
margin: 0px 6px; margin: 0px 6px;
vertical-align: -3px; vertical-align: -3px;
} }
.mx_InlineSpinner_icon {
display: inline-block;
}

28
res/css/views/elements/_MiniAvatarUploader.scss
View file

@ -28,8 +28,7 @@ limitations under the License.
top: 0; top: 0;
} }
&::before, &::after { .mx_MiniAvatarUploader_indicator {
content: '';
position: absolute; position: absolute;
height: 26px; height: 26px;
@ -37,27 +36,22 @@ limitations under the License.
right: -6px; right: -6px;
bottom: -6px; bottom: -6px;
}
&::before {
background-color: $primary-bg-color; background-color: $primary-bg-color;
border-radius: 50%; border-radius: 50%;
z-index: 1; z-index: 1;
}
&::after { .mx_MiniAvatarUploader_cameraIcon {
background-color: $secondary-fg-color; height: 100%;
mask-position: center; width: 100%;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/camera.svg');
mask-size: 16px;
z-index: 2;
}
&.mx_MiniAvatarUploader_busy::after { background-color: $secondary-fg-color;
background: url("$(res)/img/spinner.gif") no-repeat center; mask-position: center;
background-size: 80%; mask-repeat: no-repeat;
mask: unset; mask-image: url('$(res)/img/element-icons/camera.svg');
mask-size: 16px;
z-index: 2;
}
} }
} }

16
res/css/views/elements/_Spinner.scss
View file

@ -26,3 +26,19 @@ limitations under the License.
.mx_MatrixChat_middlePanel .mx_Spinner { .mx_MatrixChat_middlePanel .mx_Spinner {
height: auto; height: auto;
} }
@keyframes spin {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.mx_Spinner_icon {
background-color: $primary-fg-color;
mask: url('$(res)/img/spinner.svg');
mask-size: contain;
animation: 1.1s steps(12, end) infinite spin;
}

38
res/css/views/messages/_MessageActionBar.scss
View file

@ -20,11 +20,12 @@ limitations under the License.
visibility: hidden; visibility: hidden;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 24px; height: 32px;
line-height: $font-24px; line-height: $font-24px;
border-radius: 4px; border-radius: 8px;
background: $message-action-bar-bg-color; background: $primary-bg-color;
top: -26px; border: 1px solid $input-border-color;
top: -32px;
right: 8px; right: 8px;
user-select: none; user-select: none;
// Ensure the action bar appears above over things, like the read marker. // Ensure the action bar appears above over things, like the read marker.
@ -51,31 +52,19 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
position: relative; position: relative;
border: 1px solid $message-action-bar-border-color; margin: 2px;
margin-left: -1px;
&:hover { &:hover {
border-color: $message-action-bar-hover-border-color; background: $roomlist-button-bg-color;
border-radius: 6px;
z-index: 1; z-index: 1;
} }
&:first-child {
border-radius: 3px 0 0 3px;
}
&:last-child {
border-radius: 0 3px 3px 0;
}
&:only-child {
border-radius: 3px;
}
} }
} }
.mx_MessageActionBar_maskButton { .mx_MessageActionBar_maskButton {
width: 27px; width: 28px;
height: 28px;
} }
.mx_MessageActionBar_maskButton::after { .mx_MessageActionBar_maskButton::after {
@ -85,9 +74,14 @@ limitations under the License.
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
mask-size: 18px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $message-action-bar-fg-color; background-color: $secondary-fg-color;
}
.mx_MessageActionBar_maskButton:hover::after {
background-color: $primary-fg-color;
} }
.mx_MessageActionBar_reactButton::after { .mx_MessageActionBar_reactButton::after {

54
res/css/views/messages/_ReactionsRow.scss
View file

@ -17,18 +17,56 @@ limitations under the License.
.mx_ReactionsRow { .mx_ReactionsRow {
margin: 6px 0; margin: 6px 0;
color: $primary-fg-color; color: $primary-fg-color;
.mx_ReactionsRow_addReactionButton {
position: relative;
display: inline-block;
visibility: hidden; // show on hover of the .mx_EventTile
width: 24px;
height: 24px;
vertical-align: middle;
margin-left: 4px;
&::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
mask-size: 16px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $tertiary-fg-color;
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
}
&.mx_ReactionsRow_addReactionButton_active {
visibility: visible; // keep showing whilst the context menu is shown
}
&:hover, &.mx_ReactionsRow_addReactionButton_active {
&::before {
background-color: $primary-fg-color;
}
}
}
}
.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
visibility: visible;
} }
.mx_ReactionsRow_showAll { .mx_ReactionsRow_showAll {
text-decoration: none; text-decoration: none;
font-size: $font-10px; font-size: $font-12px;
font-weight: 600; line-height: $font-20px;
margin-left: 6px; margin-left: 4px;
vertical-align: top; vertical-align: middle;
&:hover, &:link, &:visited {
&:link, color: $tertiary-fg-color;
&:visited { }
color: $accent-color;
&:hover {
color: $primary-fg-color;
} }
} }

5
res/css/views/messages/_ReactionsRowButton.scss
View file

@ -16,14 +16,15 @@ limitations under the License.
.mx_ReactionsRowButton { .mx_ReactionsRowButton {
display: inline-flex; display: inline-flex;
line-height: $font-21px; line-height: $font-20px;
margin-right: 6px; margin-right: 6px;
padding: 0 6px; padding: 1px 6px;
border: 1px solid $reaction-row-button-border-color; border: 1px solid $reaction-row-button-border-color;
border-radius: 10px; border-radius: 10px;
background-color: $reaction-row-button-bg-color; background-color: $reaction-row-button-bg-color;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
vertical-align: middle;
&:hover { &:hover {
border-color: $reaction-row-button-hover-border-color; border-color: $reaction-row-button-hover-border-color;

8
res/css/views/messages/_SenderProfile.scss
View file

@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_SenderProfile_name { .mx_SenderProfile_displayName {
font-weight: 600; font-weight: 600;
} }
.mx_SenderProfile_mxid {
font-weight: 600;
font-size: 1.1rem;
margin-left: 5px;
opacity: 0.5; // Match mx_TextualEvent
}

5
res/css/views/messages/_TextualEvent.scss
View file

@ -17,4 +17,9 @@ limitations under the License.
.mx_TextualEvent { .mx_TextualEvent {
opacity: 0.5; opacity: 0.5;
overflow-y: hidden; overflow-y: hidden;
a {
color: $accent-color;
cursor: pointer;
}
} }

2
res/css/views/messages/_common_CryptoEvent.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
mask-image: url('$(res)/img/e2e/normal.svg'); mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 90%; mask-size: 80%;
} }
&.mx_cryptoEvent_icon::after { &.mx_cryptoEvent_icon::after {

90
res/css/views/right_panel/_PinnedMessagesCard.scss Normal file
View file

@ -0,0 +1,90 @@
/*
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_PinnedMessagesCard {
padding-top: 0;
.mx_BaseCard_header {
text-align: center;
margin-top: 0;
border-bottom: 1px solid $menu-border-color;
> h2 {
font-weight: $font-semi-bold;
font-size: $font-18px;
margin: 8px 0;
}
.mx_BaseCard_close {
margin-right: 6px;
}
}
.mx_PinnedMessagesCard_empty {
display: flex;
height: 100%;
> div {
height: max-content;
text-align: center;
margin: auto 40px;
.mx_PinnedMessagesCard_MessageActionBar {
pointer-events: none;
display: flex;
height: 32px;
line-height: $font-24px;
border-radius: 8px;
background: $primary-bg-color;
border: 1px solid $input-border-color;
padding: 1px;
width: max-content;
margin: 0 auto;
box-sizing: border-box;
.mx_MessageActionBar_maskButton {
display: inline-block;
position: relative;
}
.mx_MessageActionBar_optionsButton {
background: $roomlist-button-bg-color;
border-radius: 6px;
z-index: 1;
&::after {
background-color: $primary-fg-color;
}
}
}
> h2 {
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
margin-top: 24px;
margin-bottom: 20px;
}
> span {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
}
}
}
}

1
res/css/views/right_panel/_RoomSummaryCard.scss
View file

@ -36,6 +36,7 @@ limitations under the License.
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: pre-wrap;
} }
.mx_RoomSummaryCard_avatar { .mx_RoomSummaryCard_avatar {

10
res/css/views/right_panel/_UserInfo.scss
View file

@ -259,16 +259,6 @@ limitations under the License.
.mx_AccessibleButton.mx_AccessibleButton_hasKind { .mx_AccessibleButton.mx_AccessibleButton_hasKind {
padding: 8px 18px; padding: 8px 18px;
&.mx_AccessibleButton_kind_primary {
color: $accent-color;
background-color: $accent-bg-color;
}
&.mx_AccessibleButton_kind_danger {
color: $notice-primary-color;
background-color: $notice-primary-bg-color;
}
} }
.mx_VerificationShowSas .mx_AccessibleButton, .mx_VerificationShowSas .mx_AccessibleButton,

2
res/css/views/right_panel/_VerificationPanel.scss
View file

@ -58,7 +58,7 @@ limitations under the License.
} }
.mx_VerificationPanel_reciprocate_section { .mx_VerificationPanel_reciprocate_section {
.mx_FormButton { .mx_AccessibleButton {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;

4
res/css/views/rooms/_E2EIcon.scss
View file

@ -45,7 +45,7 @@ limitations under the License.
mask-image: url('$(res)/img/e2e/normal.svg'); mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 90%; mask-size: 80%;
} }
// transparent-looking border surrounding the shield for when overlain over avatars // transparent-looking border surrounding the shield for when overlain over avatars
@ -59,7 +59,7 @@ limitations under the License.
} }
// shrink the infill of the badge // shrink the infill of the badge
&::before { &::before {
mask-size: 65%; mask-size: 60%;
} }
} }

44
res/css/views/rooms/_EventTile.scss
View file

@ -16,6 +16,7 @@ limitations under the License.
*/ */
$left-gutter: 64px; $left-gutter: 64px;
$hover-select-border: 4px;
.mx_EventTile { .mx_EventTile {
max-width: 100%; max-width: 100%;
@ -85,12 +86,11 @@ $left-gutter: 64px;
} }
.mx_EventTile_isEditing .mx_MessageTimestamp { .mx_EventTile_isEditing .mx_MessageTimestamp {
visibility: hidden !important; visibility: hidden;
} }
.mx_EventTile .mx_MessageTimestamp { .mx_EventTile .mx_MessageTimestamp {
display: block; display: block;
visibility: hidden;
white-space: nowrap; white-space: nowrap;
left: 0px; left: 0px;
text-align: center; text-align: center;
@ -104,7 +104,7 @@ $left-gutter: 64px;
.mx_EventTile_line, .mx_EventTile_reply { .mx_EventTile_line, .mx_EventTile_reply {
position: relative; position: relative;
padding-left: $left-gutter; padding-left: $left-gutter;
border-radius: 4px; border-radius: 8px;
} }
.mx_RoomView_timeline_rr_enabled, .mx_RoomView_timeline_rr_enabled,
@ -142,27 +142,8 @@ $left-gutter: 64px;
line-height: 57px !important; line-height: 57px !important;
} }
.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile_selected > div > a > .mx_MessageTimestamp { .mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: 3px; left: calc(-$hover-select-border);
width: auto;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
// The first set is to handle the 'group layout' (default) and the second for the IRC layout
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp {
visibility: visible;
} }
.mx_EventTile:hover .mx_MessageActionBar, .mx_EventTile:hover .mx_MessageActionBar,
@ -177,7 +158,7 @@ $left-gutter: 64px;
*/ */
.mx_EventTile_selected > .mx_EventTile_line { .mx_EventTile_selected > .mx_EventTile_line {
border-left: $accent-color 4px solid; border-left: $accent-color 4px solid;
padding-left: 60px; padding-left: calc($left-gutter - $hover-select-border);
background-color: $event-selected-color; background-color: $event-selected-color;
} }
@ -190,8 +171,12 @@ $left-gutter: 64px;
} }
} }
.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px);
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { .mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px; padding-left: calc($left-gutter + 18px - $hover-select-border);
} }
.mx_EventTile:hover .mx_EventTile_line, .mx_EventTile:hover .mx_EventTile_line,
@ -280,6 +265,7 @@ $left-gutter: 64px;
height: $font-14px; height: $font-14px;
width: $font-14px; width: $font-14px;
will-change: left, top;
transition: transition:
left var(--transition-short) ease-out, left var(--transition-short) ease-out,
top var(--transition-standard) ease-out; top var(--transition-standard) ease-out;
@ -359,7 +345,7 @@ $left-gutter: 64px;
mask-image: url('$(res)/img/e2e/normal.svg'); mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 90%; mask-size: 80%;
} }
} }
@ -426,7 +412,7 @@ $left-gutter: 64px;
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
padding-left: 60px; padding-left: calc($left-gutter - $hover-select-border);
} }
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
@ -444,7 +430,7 @@ $left-gutter: 64px;
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px; padding-left: calc($left-gutter + 18px - $hover-select-border);
} }
/* End to end encryption stuff */ /* End to end encryption stuff */
@ -456,7 +442,7 @@ $left-gutter: 64px;
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
width: $MessageTimestamp_width_hover; left: calc(-$hover-select-border);
} }
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)

8
res/css/views/rooms/_GroupLayout.scss
View file

@ -24,10 +24,6 @@ $left-gutter: 64px;
margin-left: $left-gutter; margin-left: $left-gutter;
} }
> .mx_EventTile_line {
padding-left: $left-gutter;
}
> .mx_EventTile_avatar { > .mx_EventTile_avatar {
position: absolute; position: absolute;
} }
@ -43,10 +39,6 @@ $left-gutter: 64px;
line-height: $font-22px; line-height: $font-22px;
} }
} }
.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px);
}
} }
/* Compact layout overrides */ /* Compact layout overrides */

64
res/css/views/rooms/_IRCLayout.scss
View file

@ -29,6 +29,7 @@ $irc-line-height: $font-18px;
// timestamps are links which shouldn't be underlined // timestamps are links which shouldn't be underlined
> a { > a {
text-decoration: none; text-decoration: none;
min-width: 45px;
} }
display: flex; display: flex;
@ -49,18 +50,6 @@ $irc-line-height: $font-18px;
} }
} }
> .mx_SenderProfile {
order: 2;
flex-shrink: 0;
width: var(--name-width);
text-overflow: ellipsis;
text-align: left;
display: flex;
align-items: center;
overflow: visible;
justify-content: flex-end;
}
.mx_EventTile_line, .mx_EventTile_reply { .mx_EventTile_line, .mx_EventTile_reply {
padding: 0; padding: 0;
display: flex; display: flex;
@ -115,8 +104,7 @@ $irc-line-height: $font-18px;
.mx_EventTile_line { .mx_EventTile_line {
.mx_EventTile_e2eIcon, .mx_EventTile_e2eIcon,
.mx_TextualEvent, .mx_TextualEvent,
.mx_MTextBody, .mx_MTextBody {
.mx_ReplyThread_wrapper_empty {
display: inline-block; display: inline-block;
} }
} }
@ -174,30 +162,37 @@ $irc-line-height: $font-18px;
border-left: 0; border-left: 0;
} }
.mx_SenderProfile_hover { .mx_SenderProfile {
background-color: $primary-bg-color; width: var(--name-width);
overflow: hidden; display: flex;
order: 2;
flex-shrink: 0;
justify-content: flex-start;
align-items: center;
> span { > .mx_SenderProfile_displayName {
display: flex; width: 100%;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
}
> .mx_SenderProfile_name { > .mx_SenderProfile_mxid {
overflow: hidden; visibility: collapse;
text-overflow: ellipsis;
min-width: var(--name-width);
text-align: end;
}
} }
} }
.mx_SenderProfile:hover { .mx_SenderProfile:hover {
justify-content: flex-start;
}
.mx_SenderProfile_hover:hover {
overflow: visible; overflow: visible;
width: max(auto, 100%);
z-index: 10; z-index: 10;
> .mx_SenderProfile_displayName {
overflow: visible;
}
> .mx_SenderProfile_mxid {
visibility: visible;
}
} }
.mx_ReplyThread { .mx_ReplyThread {
@ -205,16 +200,7 @@ $irc-line-height: $font-18px;
.mx_SenderProfile { .mx_SenderProfile {
width: unset; width: unset;
max-width: var(--name-width); max-width: var(--name-width);
}
.mx_SenderProfile_hover {
background: transparent; background: transparent;
> span {
> .mx_SenderProfile_name {
min-width: inherit;
}
}
} }
.mx_EventTile_emote { .mx_EventTile_emote {

1
res/css/views/rooms/_JumpToBottomButton.scss
View file

@ -52,6 +52,7 @@ limitations under the License.
.mx_JumpToBottomButton_scrollDown { .mx_JumpToBottomButton_scrollDown {
position: relative; position: relative;
display: block;
height: 38px; height: 38px;
border-radius: 19px; border-radius: 19px;
box-sizing: border-box; box-sizing: border-box;

4
res/css/views/rooms/_NewRoomIntro.scss
View file

@ -18,8 +18,8 @@ limitations under the License.
margin: 40px 0 48px 64px; margin: 40px 0 48px 64px;
.mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) { .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
&::before, &::after { .mx_MiniAvatarUploader_indicator {
content: unset; display: none;
} }
} }

123
res/css/views/rooms/_PinnedEventTile.scss
View file

@ -16,62 +16,91 @@ limitations under the License.
.mx_PinnedEventTile { .mx_PinnedEventTile {
min-height: 40px; min-height: 40px;
margin-bottom: 5px;
width: 100%; width: 100%;
border-radius: 5px; // for the hover padding: 0 4px 12px;
}
.mx_PinnedEventTile:hover { display: grid;
background-color: $event-selected-color; grid-template-areas:
} "avatar name remove"
"content content content"
"footer footer footer";
grid-template-rows: max-content auto max-content;
grid-template-columns: 24px auto 24px;
grid-row-gap: 12px;
grid-column-gap: 8px;
.mx_PinnedEventTile .mx_PinnedEventTile_sender, & + .mx_PinnedEventTile {
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp { padding: 12px 4px;
color: #868686; border-top: 1px solid $menu-border-color;
font-size: 0.8em; }
vertical-align: top;
display: inline-block;
padding-bottom: 3px;
}
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp { .mx_PinnedEventTile_senderAvatar {
padding-left: 15px; grid-area: avatar;
display: none; }
}
.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar { .mx_PinnedEventTile_sender {
float: left; grid-area: name;
margin-right: 10px; font-weight: $font-semi-bold;
} font-size: $font-15px;
line-height: $font-24px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_PinnedEventTile_actions { .mx_PinnedEventTile_unpinButton {
float: right; visibility: hidden;
margin-right: 10px; grid-area: remove;
display: none; position: relative;
} width: 24px;
height: 24px;
border-radius: 8px;
.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp { &:hover {
display: inline-block; background-color: $roomheader-addroom-bg-color;
} }
.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions { &::before {
display: block; content: "";
} position: absolute;
//top: 0;
//left: 0;
height: inherit;
width: inherit;
background: $secondary-fg-color;
mask-position: center;
mask-size: 8px;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/image-view/close.svg');
}
}
.mx_PinnedEventTile_unpinButton { .mx_PinnedEventTile_message {
display: inline-block; grid-area: content;
cursor: pointer; }
margin-left: 10px;
}
.mx_PinnedEventTile_gotoButton { .mx_PinnedEventTile_footer {
display: inline-block; grid-area: footer;
font-size: 0.7em; // Smaller text to avoid conflicting with the layout font-size: 10px;
} line-height: 12px;
.mx_PinnedEventTile_message { .mx_PinnedEventTile_timestamp {
margin-left: 50px; font-size: inherit;
position: relative; line-height: inherit;
top: 0; color: $secondary-fg-color;
left: 0; }
.mx_AccessibleButton_kind_link {
padding: 0;
margin-left: 12px;
font-size: inherit;
line-height: inherit;
}
}
&:hover {
.mx_PinnedEventTile_unpinButton {
visibility: visible;
}
}
} }

6
res/css/views/rooms/_RoomBreadcrumbs.scss
View file

@ -32,14 +32,14 @@ limitations under the License.
// first triggering the enter state with the newest breadcrumb off screen (-40px) then // first triggering the enter state with the newest breadcrumb off screen (-40px) then
// sliding it into view. // sliding it into view.
&.mx_RoomBreadcrumbs-enter { &.mx_RoomBreadcrumbs-enter {
margin-left: -40px; // 32px for the avatar, 8px for the margin transform: translateX(-40px); // 32px for the avatar, 8px for the margin
} }
&.mx_RoomBreadcrumbs-enter-active { &.mx_RoomBreadcrumbs-enter-active {
margin-left: 0; transform: translateX(0);
// Timing function is as-requested by design. // Timing function is as-requested by design.
// NOTE: The transition time MUST match the value passed to CSSTransition! // NOTE: The transition time MUST match the value passed to CSSTransition!
transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1); transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
} }
.mx_RoomBreadcrumbs_placeholder { .mx_RoomBreadcrumbs_placeholder {

18
res/css/views/rooms/_RoomHeader.scss
View file

@ -277,24 +277,6 @@ limitations under the License.
margin-top: 18px; margin-top: 18px;
} }
.mx_RoomHeader_pinnedButton::before {
mask-image: url('$(res)/img/element-icons/room/pin.svg');
}
.mx_RoomHeader_pinsIndicator {
position: absolute;
right: 0;
bottom: 4px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $pinned-color;
}
.mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color;
}
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
.mx_RoomHeader_wrapper { .mx_RoomHeader_wrapper {
padding: 0; padding: 0;

12
res/css/views/rooms/_RoomSublist.scss
View file

@ -61,8 +61,8 @@ limitations under the License.
&.mx_RoomSublist_headerContainer_sticky { &.mx_RoomSublist_headerContainer_sticky {
position: fixed; position: fixed;
height: 32px; // to match the header container height: 32px; // to match the header container
// width set by JS // width set by JS because of a compat issue between Firefox and Chrome
width: calc(100% - 22px); width: calc(100% - 15px);
} }
// We don't have a top style because the top is dependent on the room list header's // We don't have a top style because the top is dependent on the room list header's
@ -98,7 +98,7 @@ limitations under the License.
position: relative; position: relative;
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 32px; border-radius: 8px;
&::before { &::before {
content: ''; content: '';
@ -114,6 +114,11 @@ limitations under the License.
} }
} }
.mx_RoomSublist_auxButton:hover,
.mx_RoomSublist_menuButton:hover {
background: $roomlist-button-bg-color;
}
// Hide the menu button by default // Hide the menu button by default
.mx_RoomSublist_menuButton { .mx_RoomSublist_menuButton {
visibility: hidden; visibility: hidden;
@ -193,6 +198,7 @@ limitations under the License.
// as the box model should be top aligned. Happens in both FF and Chromium // as the box model should be top aligned. Happens in both FF and Chromium
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-self: stretch;
mask-image: linear-gradient(0deg, transparent, black 4px); mask-image: linear-gradient(0deg, transparent, black 4px);
} }

4
res/css/views/rooms/_RoomTile.scss
View file

@ -19,6 +19,10 @@ limitations under the License.
margin-bottom: 4px; margin-bottom: 4px;
padding: 4px; padding: 4px;
contain: content; // Not strict as it will break when resizing a sublist vertically
height: 40px;
box-sizing: border-box;
// The tile is also a flexbox row itself // The tile is also a flexbox row itself
display: flex; display: flex;

6
res/css/views/rooms/_VoiceRecordComposerTile.scss
View file

@ -36,10 +36,10 @@ limitations under the License.
} }
.mx_VoiceRecordComposerTile_delete { .mx_VoiceRecordComposerTile_delete {
width: 14px; // w&h are size of icon width: 24px;
height: 18px; height: 24px;
vertical-align: middle; vertical-align: middle;
margin-right: 11px; // distance from left edge of waveform container (container has some margin too) margin-right: 8px; // distance from left edge of waveform container (container has some margin too)
background-color: $voice-record-icon-color; background-color: $voice-record-icon-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;

25
res/css/views/settings/tabs/user/_LabsUserSettingsTab.scss Normal file
View file

@ -0,0 +1,25 @@
/*
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_LabsUserSettingsTab {
.mx_SettingsTab_section {
margin-top: 32px;
.mx_SettingsFlag {
margin-right: 0; // remove right margin to align with beta cards
}
}
}

4
res/css/views/spaces/_SpaceBasicSettings.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_SpaceBasicSettings { .mx_SpaceBasicSettings {
.mx_Field { .mx_Field {
margin: 32px 0; margin: 24px 0;
} }
.mx_SpaceBasicSettings_avatarContainer { .mx_SpaceBasicSettings_avatarContainer {
@ -73,7 +73,7 @@ limitations under the License.
} }
} }
.mx_FormButton { .mx_AccessibleButton_hasKind {
padding: 8px 22px; padding: 8px 22px;
margin-left: auto; margin-left: auto;
display: block; display: block;

12
res/css/views/spaces/_SpaceCreateMenu.scss
View file

@ -29,6 +29,7 @@ $spacePanelWidth: 71px;
width: 480px; width: 480px;
box-sizing: border-box; box-sizing: border-box;
background-color: $primary-bg-color; background-color: $primary-bg-color;
position: relative;
> div { > div {
> h2 { > h2 {
@ -44,6 +45,13 @@ $spacePanelWidth: 71px;
} }
} }
// XXX remove this when spaces leaves Beta
.mx_BetaCard_betaPill {
position: absolute;
top: 24px;
right: 24px;
}
.mx_SpaceCreateMenuType { .mx_SpaceCreateMenuType {
@mixin SpacePillButton; @mixin SpacePillButton;
} }
@ -59,7 +67,7 @@ $spacePanelWidth: 71px;
width: 28px; width: 28px;
height: 28px; height: 28px;
position: relative; position: relative;
background-color: $theme-button-bg-color; background-color: $roomlist-button-bg-color;
border-radius: 14px; border-radius: 14px;
margin-bottom: 12px; margin-bottom: 12px;
@ -70,7 +78,7 @@ $spacePanelWidth: 71px;
width: 28px; width: 28px;
top: 0; top: 0;
left: 0; left: 0;
background-color: $muted-fg-color; background-color: $tertiary-fg-color;
transform: rotate(90deg); transform: rotate(90deg);
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: 2px 3px; mask-position: 2px 3px;

7
res/css/views/voice_messages/_PlaybackContainer.scss
View file

@ -33,9 +33,14 @@ limitations under the License.
font-size: $font-14px; font-size: $font-14px;
line-height: $font-24px; line-height: $font-24px;
contain: content;
.mx_Waveform { .mx_Waveform {
.mx_Waveform_bar { .mx_Waveform_bar {
background-color: $voice-record-waveform-incomplete-fg-color; background-color: $voice-record-waveform-incomplete-fg-color;
height: 100%;
/* Variable set by a JS component */
transform: scaleY(max(0.05, var(--barHeight)));
&.mx_Waveform_bar_100pct { &.mx_Waveform_bar_100pct {
// Small animation to remove the mechanical feel of progress // Small animation to remove the mechanical feel of progress
@ -46,7 +51,7 @@ limitations under the License.
} }
.mx_Clock { .mx_Clock {
width: 42px; // we're not using a monospace font, so fake it width: $font-42px; // we're not using a monospace font, so fake it
padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended. padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
padding-left: 8px; // isolate from recording circle / play control padding-left: 8px; // isolate from recording circle / play control
} }

24
res/css/views/voip/_CallContainer.scss
View file

@ -98,5 +98,29 @@ limitations under the License.
line-height: $font-24px; line-height: $font-24px;
} }
} }
.mx_IncomingCallBox_iconButton {
position: absolute;
right: 8px;
&::before {
content: '';
height: 20px;
width: 20px;
background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
}
.mx_IncomingCallBox_silence::before {
mask-image: url('$(res)/img/voip/silence.svg');
}
.mx_IncomingCallBox_unSilence::before {
mask-image: url('$(res)/img/voip/un-silence.svg');
}
} }
} }

2
res/css/views/voip/_DialPad.scss
View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_DialPad_button { .mx_DialPad_button {
width: 40px; width: 40px;
height: 40px; height: 40px;
background-color: $theme-button-bg-color; background-color: $dialpad-button-bg-color;
border-radius: 40px; border-radius: 40px;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;

15
res/css/views/voip/_DialPadContextMenu.scss
View file

@ -27,9 +27,22 @@ limitations under the License.
} }
.mx_DialPadContextMenu_dialled { .mx_DialPadContextMenu_dialled {
height: 1em; height: 1.5em;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
max-width: 150px;
border: none;
margin: 0px;
}
.mx_DialPadContextMenu_dialled input {
font-size: 18px;
font-weight: 600;
overflow: hidden;
max-width: 150px;
text-align: left;
direction: rtl;
padding: 8px 0px;
background-color: rgb(0, 0, 0, 0);
} }
.mx_DialPadContextMenu_dialPad { .mx_DialPadContextMenu_dialPad {

BIN
res/img/betas/spaces.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 380 KiB

3
res/img/element-icons/call/dialpad.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 14.25C5.175 14.25 4.5 14.925 4.5 15.75C4.5 16.575 5.175 17.25 6 17.25C6.825 17.25 7.5 16.575 7.5 15.75C7.5 14.925 6.825 14.25 6 14.25ZM1.5 0.75C0.675 0.75 0 1.425 0 2.25C0 3.075 0.675 3.75 1.5 3.75C2.325 3.75 3 3.075 3 2.25C3 1.425 2.325 0.75 1.5 0.75ZM1.5 5.25C0.675 5.25 0 5.925 0 6.75C0 7.575 0.675 8.25 1.5 8.25C2.325 8.25 3 7.575 3 6.75C3 5.925 2.325 5.25 1.5 5.25ZM1.5 9.75C0.675 9.75 0 10.425 0 11.25C0 12.075 0.675 12.75 1.5 12.75C2.325 12.75 3 12.075 3 11.25C3 10.425 2.325 9.75 1.5 9.75ZM10.5 3.75C11.325 3.75 12 3.075 12 2.25C12 1.425 11.325 0.75 10.5 0.75C9.675 0.75 9 1.425 9 2.25C9 3.075 9.675 3.75 10.5 3.75ZM6 9.75C5.175 9.75 4.5 10.425 4.5 11.25C4.5 12.075 5.175 12.75 6 12.75C6.825 12.75 7.5 12.075 7.5 11.25C7.5 10.425 6.825 9.75 6 9.75ZM10.5 9.75C9.675 9.75 9 10.425 9 11.25C9 12.075 9.675 12.75 10.5 12.75C11.325 12.75 12 12.075 12 11.25C12 10.425 11.325 9.75 10.5 9.75ZM10.5 5.25C9.675 5.25 9 5.925 9 6.75C9 7.575 9.675 8.25 10.5 8.25C11.325 8.25 12 7.575 12 6.75C12 5.925 11.325 5.25 10.5 5.25ZM6 5.25C5.175 5.25 4.5 5.925 4.5 6.75C4.5 7.575 5.175 8.25 6 8.25C6.825 8.25 7.5 7.575 7.5 6.75C7.5 5.925 6.825 5.25 6 5.25ZM6 0.75C5.175 0.75 4.5 1.425 4.5 2.25C4.5 3.075 5.175 3.75 6 3.75C6.825 3.75 7.5 3.075 7.5 2.25C7.5 1.425 6.825 0.75 6 0.75Z" fill="#737D8C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
res/img/element-icons/eye.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3094 5.96587C15.3206 7.15704 15.3417 8.85457 14.3412 10.0548C13.0889 11.5571 10.9822 13.3332 8.02104 13.3332C5.05992 13.3332 2.9532 11.5571 1.70087 10.0548C0.700398 8.85457 0.721506 7.15704 1.7327 5.96587C3.01174 4.45918 5.1391 2.6665 8.02104 2.6665C10.903 2.6665 13.0303 4.45918 14.3094 5.96587ZM11.5556 7.99984C11.5556 9.96352 9.96369 11.5554 8.00001 11.5554C6.03633 11.5554 4.44446 9.96352 4.44446 7.99984C4.44446 6.03616 6.03633 4.44428 8.00001 4.44428C9.96369 4.44428 11.5556 6.03616 11.5556 7.99984ZM8.00001 9.77761C8.98185 9.77761 9.77779 8.98168 9.77779 7.99984C9.77779 7.018 8.98185 6.22206 8.00001 6.22206C7.01817 6.22206 6.22224 7.018 6.22224 7.99984C6.22224 8.98168 7.01817 9.77761 8.00001 9.77761Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 887 B

1
res/img/element-icons/message/chevron-up.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
Side by side

After

Width:  |  Height:  |  Size: 268 B

1
res/img/element-icons/message/corner-up-right.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-right"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 316 B

3
res/img/element-icons/message/fwd.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9454 4.27941C10.653 3.98601 10.6539 3.51114 10.9472 3.21875C11.2406 2.92637 11.7155 2.92719 12.0079 3.22059L15.5312 6.75612C15.8229 7.0488 15.8229 7.52226 15.5312 7.81494L12.0079 11.3505C11.7155 11.6439 11.2407 11.6447 10.9473 11.3523C10.6539 11.06 10.653 10.5851 10.9454 10.2917L13.2292 8H6.36588C4.95064 8 3.75282 9.20272 3.75282 10.75C3.75282 12.2973 4.95064 13.5 6.36588 13.5H7.93524C8.34945 13.5 8.68524 13.8358 8.68524 14.25C8.68524 14.6642 8.34945 15 7.93524 15H6.36588C4.06634 15 2.25282 13.0687 2.25282 10.75C2.25282 8.43128 4.06634 6.5 6.36588 6.5H13.1583L10.9454 4.27941Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 755 B

1
res/img/element-icons/message/link.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 371 B

1
res/img/element-icons/message/repeat.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 392 B

1
res/img/element-icons/message/share.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
Side by side

After

Width:  |  Height:  |  Size: 364 B

10
res/img/element-icons/room/composer/emoji.svg
View file

@ -1,7 +1,7 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1" fill="white"> <mask id="path-1-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.389 11.7659C13.6794 11.3162 14.2793 11.187 14.729 11.4774C15.1788 11.7677 15.308 12.3676 15.0176 12.8174C13.9565 14.461 12.1059 15.5526 9.99965 15.5526C7.89343 15.5526 6.04281 14.461 4.98167 12.8174C4.69133 12.3677 4.82053 11.7677 5.27025 11.4774C5.71997 11.187 6.31991 11.3162 6.61025 11.7659C7.32946 12.88 8.57908 13.6141 9.99965 13.6141C11.4202 13.6141 12.6698 12.88 13.389 11.7659ZM8 8C8 8.82843 7.44036 9.5 6.75 9.5C6.05964 9.5 5.5 8.82843 5.5 8C5.5 7.17157 6.05964 6.5 6.75 6.5C7.44036 6.5 8 7.17157 8 8ZM13.25 9.5C13.9404 9.5 14.5 8.82843 14.5 8C14.5 7.17157 13.9404 6.5 13.25 6.5C12.5596 6.5 12 7.17157 12 8C12 8.82843 12.5596 9.5 13.25 9.5Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM7.99989 7.5C7.99989 8.33 7.32989 9 6.49989 9C5.66989 9 4.99989 8.33 4.99989 7.5C4.99989 6.67 5.66989 6 6.49989 6C7.32989 6 7.99989 6.67 7.99989 7.5ZM14.9999 7.5C14.9999 8.33 14.3299 9 13.4999 9C12.6699 9 11.9999 8.33 11.9999 7.5C11.9999 6.67 12.6699 6 13.4999 6C14.3299 6 14.9999 6.67 14.9999 7.5ZM9.99989 15.5C12.3299 15.5 14.3099 14.04 15.1099 12H4.88989C5.68989 14.04 7.66989 15.5 9.99989 15.5Z"/>
</mask> </mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.389 11.7659C13.6794 11.3162 14.2793 11.187 14.729 11.4774C15.1788 11.7677 15.308 12.3676 15.0176 12.8174C13.9565 14.461 12.1059 15.5526 9.99965 15.5526C7.89343 15.5526 6.04281 14.461 4.98167 12.8174C4.69133 12.3677 4.82053 11.7677 5.27025 11.4774C5.71997 11.187 6.31991 11.3162 6.61025 11.7659C7.32946 12.88 8.57908 13.6141 9.99965 13.6141C11.4202 13.6141 12.6698 12.88 13.389 11.7659ZM8 8C8 8.82843 7.44036 9.5 6.75 9.5C6.05964 9.5 5.5 8.82843 5.5 8C5.5 7.17157 6.05964 6.5 6.75 6.5C7.44036 6.5 8 7.17157 8 8ZM13.25 9.5C13.9404 9.5 14.5 8.82843 14.5 8C14.5 7.17157 13.9404 6.5 13.25 6.5C12.5596 6.5 12 7.17157 12 8C12 8.82843 12.5596 9.5 13.25 9.5Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM7.99989 7.5C7.99989 8.33 7.32989 9 6.49989 9C5.66989 9 4.99989 8.33 4.99989 7.5C4.99989 6.67 5.66989 6 6.49989 6C7.32989 6 7.99989 6.67 7.99989 7.5ZM14.9999 7.5C14.9999 8.33 14.3299 9 13.4999 9C12.6699 9 11.9999 8.33 11.9999 7.5C11.9999 6.67 12.6699 6 13.4999 6C14.3299 6 14.9999 6.67 14.9999 7.5ZM9.99989 15.5C12.3299 15.5 14.3099 14.04 15.1099 12H4.88989C5.68989 14.04 7.66989 15.5 9.99989 15.5Z" fill="#737D8C"/>
<path d="M14.1748 11.4164C14.0254 11.6478 14.0919 11.9565 14.3233 12.1059C14.5546 12.2553 14.8633 12.1888 15.0127 11.9574L14.1748 11.4164ZM15.148 11.7479C15.2974 11.5165 15.2309 11.2078 14.9995 11.0584C14.7681 10.909 14.4595 10.9755 14.3101 11.2069L15.148 11.7479ZM15.0127 11.9574L15.148 11.7479L14.3101 11.2069L14.1748 11.4164L15.0127 11.9574ZM14.729 11.4774L15.27 10.6394L15.27 10.6394L14.729 11.4774ZM13.389 11.7659L12.5511 11.225V11.225L13.389 11.7659ZM15.0176 12.8174L14.1797 12.2764V12.2764L15.0176 12.8174ZM4.98167 12.8174L5.8196 12.2764L5.8196 12.2764L4.98167 12.8174ZM5.27025 11.4774L4.72928 10.6394L4.72928 10.6394L5.27025 11.4774ZM6.61025 11.7659L5.77233 12.3069L6.61025 11.7659ZM19.0026 10C19.0026 14.972 14.972 19.0026 10 19.0026V20.9974C16.0737 20.9974 20.9974 16.0737 20.9974 10H19.0026ZM10 0.997378C14.972 0.997378 19.0026 5.02799 19.0026 10H20.9974C20.9974 3.92632 16.0737 -0.997378 10 -0.997378V0.997378ZM0.997378 10C0.997378 5.02799 5.02799 0.997378 10 0.997378V-0.997378C3.92632 -0.997378 -0.997378 3.92632 -0.997378 10H0.997378ZM10 19.0026C5.02799 19.0026 0.997378 14.972 0.997378 10H-0.997378C-0.997378 16.0737 3.92632 20.9974 10 20.9974V19.0026ZM15.27 10.6394C14.3575 10.0503 13.1402 10.3125 12.5511 11.225L14.227 12.3069C14.2259 12.3086 14.2229 12.312 14.2187 12.315C14.215 12.3174 14.2118 12.3186 14.2092 12.3192C14.2067 12.3197 14.2033 12.32 14.1989 12.3192C14.1939 12.3183 14.1898 12.3164 14.1881 12.3153L15.27 10.6394ZM15.8555 13.3583C16.4447 12.4458 16.1825 11.2286 15.27 10.6394L14.1881 12.3153C14.1863 12.3142 14.1829 12.3113 14.18 12.307C14.1775 12.3033 14.1764 12.3001 14.1758 12.2976C14.1753 12.2951 14.175 12.2917 14.1758 12.2873C14.1767 12.2822 14.1786 12.2781 14.1797 12.2764L15.8555 13.3583ZM9.99965 16.55C12.4589 16.55 14.6186 15.2742 15.8555 13.3583L14.1797 12.2764C13.2943 13.6478 11.7528 14.5552 9.99965 14.5552V16.55ZM4.14375 13.3583C5.38067 15.2742 7.54041 16.55 9.99965 16.55V14.5552C8.24645 14.5552 6.70495 13.6478 5.8196 12.2764L4.14375 13.3583ZM4.72928 10.6394C3.81679 11.2286 3.55464 12.4458 4.14375 13.3583L5.8196 12.2764C5.8207 12.2781 5.82261 12.2822 5.8235 12.2873C5.82426 12.2917 5.824 12.2951 5.82346 12.2976C5.82292 12.3001 5.82175 12.3033 5.81926 12.307C5.81635 12.3113 5.81294 12.3142 5.81122 12.3153L4.72928 10.6394ZM7.44818 11.225C6.85907 10.3125 5.64178 10.0503 4.72928 10.6394L5.81122 12.3153C5.8095 12.3164 5.80542 12.3183 5.80034 12.3192C5.79597 12.32 5.79256 12.3197 5.79004 12.3192C5.78752 12.3186 5.7843 12.3174 5.78064 12.315C5.77637 12.3121 5.77344 12.3086 5.77233 12.3069L7.44818 11.225ZM9.99965 12.6167C8.93153 12.6167 7.99128 12.0662 7.44818 11.225L5.77233 12.3069C6.66764 13.6937 8.22663 14.6115 9.99965 14.6115V12.6167ZM12.5511 11.225C12.008 12.0662 11.0678 12.6167 9.99965 12.6167V14.6115C11.7727 14.6115 13.3316 13.6937 14.227 12.3069L12.5511 11.225ZM6.75 10.4974C8.15374 10.4974 8.99738 9.20127 8.99738 8H7.00262C7.00262 8.19305 6.93691 8.33907 6.86768 8.42215C6.80022 8.50311 6.75428 8.50262 6.75 8.50262V10.4974ZM4.50262 8C4.50262 9.20127 5.34626 10.4974 6.75 10.4974V8.50262C6.74572 8.50262 6.69978 8.50311 6.63232 8.42215C6.56309 8.33907 6.49738 8.19305 6.49738 8H4.50262ZM6.75 5.50262C5.34626 5.50262 4.50262 6.79873 4.50262 8H6.49738C6.49738 7.80695 6.56309 7.66093 6.63232 7.57785C6.69978 7.49689 6.74572 7.49738 6.75 7.49738V5.50262ZM8.99738 8C8.99738 6.79873 8.15374 5.50262 6.75 5.50262V7.49738C6.75428 7.49738 6.80022 7.49689 6.86768 7.57785C6.93691 7.66093 7.00262 7.80695 7.00262 8H8.99738ZM13.5026 8C13.5026 8.19305 13.4369 8.33907 13.3677 8.42215C13.3002 8.50311 13.2543 8.50262 13.25 8.50262V10.4974C14.6537 10.4974 15.4974 9.20127 15.4974 8H13.5026ZM13.25 7.49738C13.2543 7.49738 13.3002 7.49689 13.3677 7.57785C13.4369 7.66093 13.5026 7.80695 13.5026 8H15.4974C15.4974 6.79873 14.6537 5.50262 13.25 5.50262V7.49738ZM12.9974 8C12.9974 7.80695 13.0631 7.66093 13.1323 7.57785C13.1998 7.49689 13.2457 7.49738 13.25 7.49738V5.50262C11.8463 5.50262 11.0026 6.79873 11.0026 8H12.9974ZM13.25 8.50262C13.2457 8.50262 13.1998 8.50311 13.1323 8.42215C13.0631 8.33907 12.9974 8.19305 12.9974 8H11.0026C11.0026 9.20127 11.8463 10.4974 13.25 10.4974V8.50262Z" fill="black" mask="url(#path-1-inside-1)"/> <path d="M15.1099 12L16.0384 12.3641L16.5724 11.0026H15.1099V12ZM4.88989 12V11.0026H3.42744L3.96136 12.3641L4.88989 12ZM19.0026 10C19.0026 14.972 14.972 19.0026 10 19.0026V20.9974C16.0737 20.9974 20.9974 16.0737 20.9974 10H19.0026ZM10 0.997378C14.972 0.997378 19.0026 5.02799 19.0026 10H20.9974C20.9974 3.92632 16.0737 -0.997378 10 -0.997378V0.997378ZM0.997378 10C0.997378 5.02799 5.02799 0.997378 10 0.997378V-0.997378C3.92632 -0.997378 -0.997378 3.92632 -0.997378 10H0.997378ZM10 19.0026C5.02799 19.0026 0.997378 14.972 0.997378 10H-0.997378C-0.997378 16.0737 3.92632 20.9974 10 20.9974V19.0026ZM6.49989 9.99738C7.88073 9.99738 8.99727 8.88084 8.99727 7.5H7.00251C7.00251 7.77916 6.77906 8.00262 6.49989 8.00262V9.99738ZM4.00251 7.5C4.00251 8.88084 5.11906 9.99738 6.49989 9.99738V8.00262C6.22073 8.00262 5.99727 7.77916 5.99727 7.5H4.00251ZM6.49989 5.00262C5.11906 5.00262 4.00251 6.11916 4.00251 7.5H5.99727C5.99727 7.22084 6.22073 6.99738 6.49989 6.99738V5.00262ZM8.99727 7.5C8.99727 6.11916 7.88073 5.00262 6.49989 5.00262V6.99738C6.77906 6.99738 7.00251 7.22084 7.00251 7.5H8.99727ZM13.4999 9.99738C14.8807 9.99738 15.9973 8.88084 15.9973 7.5H14.0025C14.0025 7.77916 13.7791 8.00262 13.4999 8.00262V9.99738ZM11.0025 7.5C11.0025 8.88084 12.1191 9.99738 13.4999 9.99738V8.00262C13.2207 8.00262 12.9973 7.77916 12.9973 7.5H11.0025ZM13.4999 5.00262C12.1191 5.00262 11.0025 6.11916 11.0025 7.5H12.9973C12.9973 7.22084 13.2207 6.99738 13.4999 6.99738V5.00262ZM15.9973 7.5C15.9973 6.11916 14.8807 5.00262 13.4999 5.00262V6.99738C13.7791 6.99738 14.0025 7.22084 14.0025 7.5H15.9973ZM14.1814 11.6359C13.5241 13.3119 11.9006 14.5026 9.99989 14.5026V16.4974C12.7592 16.4974 15.0957 14.7681 16.0384 12.3641L14.1814 11.6359ZM4.88989 12.9974H15.1099V11.0026H4.88989V12.9974ZM9.99989 14.5026C8.09919 14.5026 6.47569 13.3119 5.81842 11.6359L3.96136 12.3641C4.9041 14.7681 7.24059 16.4974 9.99989 16.4974V14.5026Z" fill="#737D8C" mask="url(#path-1-inside-1)"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

6
res/img/element-icons/room/message-bar/emoji.svg
View file

@ -1,5 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="5" cy="5.75" rx="1.5" ry="1.75" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M20 1C19.4477 1 19 1.44772 19 2V4H17C16.4477 4 16 4.44771 16 5C16 5.55228 16.4477 6 17 6H19V8C19 8.55228 19.4477 9 20 9C20.5523 9 21 8.55228 21 8V6H23C23.5523 6 24 5.55228 24 5C24 4.44772 23.5523 4 23 4H21V2C21 1.44772 20.5523 1 20 1ZM7 9.5C7 8.67 7.67 8 8.5 8C9.33 8 10 8.67 10 9.5C10 10.33 9.33 11 8.5 11C7.67 11 7 10.33 7 9.5ZM15.5 11C16.33 11 17 10.33 17 9.5C17 8.67 16.33 8 15.5 8C14.67 8 14 8.67 14 9.5C14 10.33 14.67 11 15.5 11ZM12 17.5C14.33 17.5 16.31 16.04 17.11 14H6.89001C7.69001 16.04 9.67001 17.5 12 17.5ZM4 12C4 7.58172 7.58172 4 12 4C12.6108 4 13.2045 4.06827 13.7742 4.1972C14.3129 4.3191 14.8484 3.98125 14.9703 3.44258C15.0922 2.90392 14.7543 2.36843 14.2156 2.24653C13.502 2.08504 12.7603 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.7878 21.9934 11.5771 21.9803 11.368C21.9459 10.8168 21.4711 10.3978 20.9199 10.4323C20.3687 10.4667 19.9498 10.9414 19.9842 11.4926C19.9947 11.6603 20 11.8295 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#737D8C"/>
<ellipse cx="13" cy="5.75" rx="1.5" ry="1.75" fill="black"/>
<path d="M4.66558 10.6543C4.47466 10.2867 4.0219 10.1435 3.65431 10.3344C3.28672 10.5253 3.1435 10.9781 3.33442 11.3457L4.66558 10.6543ZM14.678 11.3206C14.8551 10.9462 14.6951 10.4991 14.3206 10.322C13.9462 10.1449 13.4991 10.3049 13.322 10.6794L14.678 11.3206ZM4 11C3.33442 11.3457 3.33458 11.346 3.33475 11.3463C3.33481 11.3464 3.33499 11.3468 3.33512 11.347C3.33537 11.3475 3.33565 11.3481 3.33596 11.3486C3.33657 11.3498 3.33729 11.3512 3.3381 11.3527C3.33972 11.3558 3.34175 11.3596 3.34417 11.3641C3.34901 11.3731 3.35546 11.3849 3.36353 11.3993C3.37966 11.4282 3.40229 11.4677 3.43154 11.5162C3.48998 11.6131 3.57517 11.7467 3.68808 11.9048C3.91323 12.2199 4.25254 12.6377 4.71468 13.056C5.64215 13.8956 7.08135 14.75 9.06977 14.75V13.25C7.54656 13.25 6.45087 12.6044 5.72136 11.944C5.35502 11.6123 5.08532 11.2801 4.90858 11.0327C4.82054 10.9095 4.75657 10.8088 4.71608 10.7416C4.69586 10.7081 4.68159 10.6831 4.67318 10.668C4.66898 10.6605 4.66625 10.6555 4.66499 10.6531C4.66435 10.652 4.66409 10.6515 4.66419 10.6516C4.66424 10.6517 4.66438 10.652 4.66461 10.6524C4.66473 10.6527 4.66487 10.6529 4.66503 10.6532C4.66511 10.6534 4.66525 10.6537 4.66529 10.6537C4.66543 10.654 4.66558 10.6543 4 11ZM9.06977 14.75C11.0611 14.75 12.4696 13.893 13.3669 13.0451C13.8129 12.6236 14.1351 12.2027 14.3471 11.8853C14.4535 11.7261 14.5331 11.5914 14.5875 11.4936C14.6148 11.4446 14.6358 11.4047 14.6508 11.3754C14.6583 11.3608 14.6643 11.3488 14.6688 11.3396C14.6711 11.335 14.673 11.3311 14.6745 11.3279C14.6753 11.3263 14.676 11.3249 14.6765 11.3237C14.6768 11.3231 14.6771 11.3225 14.6774 11.322C14.6775 11.3218 14.6776 11.3214 14.6777 11.3213C14.6779 11.3209 14.678 11.3206 14 11C13.322 10.6794 13.3221 10.6791 13.3223 10.6788C13.3223 10.6787 13.3224 10.6784 13.3225 10.6783C13.3227 10.6779 13.3228 10.6776 13.3229 10.6774C13.3232 10.6769 13.3233 10.6766 13.3234 10.6764C13.3235 10.6762 13.3233 10.6766 13.3228 10.6776C13.3217 10.6798 13.3193 10.6846 13.3156 10.6919C13.3081 10.7066 13.2952 10.7312 13.2768 10.7642C13.24 10.8304 13.1813 10.9301 13.0998 11.0522C12.9361 11.2973 12.6842 11.6264 12.3366 11.9549C11.6466 12.607 10.5901 13.25 9.06977 13.25V14.75Z" fill="black"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

10
res/img/element-icons/room/pin.svg
View file

@ -1,7 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5151 20.0831L15.6941 17.2621L17.2621 15.6941L20.0831 18.5151C21.5741 20.0061 22.1529 21.7793 21.9661 21.9661C21.7793 22.1529 20.0061 21.5741 18.5151 20.0831Z" fill="black"/> <path d="M18.5151 20.0831L15.6941 17.2621L17.2621 15.6941L20.0831 18.5151C21.5741 20.0061 22.1529 21.7793 21.9661 21.9661C21.7793 22.1529 20.0061 21.5741 18.5151 20.0831Z" fill="#737D8C"/>
<path d="M7.46196 11.3821C7.07677 11.5059 5.49073 12.0989 3.63366 12.0744C1.77658 12.0499 1.67795 10.8941 2.46811 10.1039L6.28598 6.28602L9.42196 9.42203L7.46196 11.3821Z" fill="black"/> <path d="M7.46196 11.3821C7.07677 11.5059 5.49073 12.0989 3.63366 12.0744C1.77658 12.0499 1.67795 10.8941 2.46811 10.1039L6.28598 6.28602L9.42196 9.42203L7.46196 11.3821Z" fill="#737D8C"/>
<path d="M11.3821 7.46202C11.5059 7.07682 12.0989 5.49077 12.0744 3.63368C12.0499 1.77658 10.8941 1.67795 10.1039 2.46812L6.28598 6.28602L9.42196 9.42203L11.3821 7.46202Z" fill="black"/> <path d="M11.3821 7.46202C11.5059 7.07682 12.0989 5.49077 12.0744 3.63368C12.0499 1.77658 10.8941 1.67795 10.1039 2.46812L6.28598 6.28602L9.42196 9.42203L11.3821 7.46202Z" fill="#737D8C"/>
<path d="M7.40596 11.438L11.4379 7.40602L14.9099 10.206L10.2059 14.9101L7.40596 11.438Z" fill="black"/> <path d="M7.40596 11.438L11.4379 7.40602L14.9099 10.206L10.2059 14.9101L7.40596 11.438Z" fill="#737D8C"/>
<path d="M11.774 11.774C9.31114 14.2369 8.61779 17.7115 9.83827 20.3213C10.3104 21.3308 11.6288 21.3273 12.4169 20.5392L20.5391 12.4169C21.3271 11.6289 21.3307 10.3104 20.3212 9.83829C17.7114 8.61779 14.2369 9.31115 11.774 11.774Z" fill="black"/> <path d="M11.774 11.774C9.31114 14.2369 8.61779 17.7115 9.83827 20.3213C10.3104 21.3308 11.6288 21.3273 12.4169 20.5392L20.5391 12.4169C21.3271 11.6289 21.3307 10.3104 20.3212 9.83829C17.7114 8.61779 14.2369 9.31115 11.774 11.774Z" fill="#737D8C"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1,015 B

After

Width:  |  Height:  |  Size: 1 KiB

4
res/img/element-icons/trashcan.svg
View file

@ -1,3 +1,3 @@
<svg width="12" height="17" viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.857143 14.5C0.857143 15.4491 1.62857 16.5 2.57143 16.5H9.42857C10.3714 16.5 11.1429 15.2542 11.1429 14.3051V5.67692C11.1429 4.72781 10.3714 3.95128 9.42857 3.95128H2.57143C1.62857 3.95128 0.857143 4.72781 0.857143 5.67692V14.5ZM11.1429 1.36282H9L8.39143 0.750218C8.23714 0.59491 8.01429 0.5 7.79143 0.5H4.20857C3.98571 0.5 3.76286 0.59491 3.60857 0.750218L3 1.36282H0.857143C0.385714 1.36282 0 1.75109 0 2.22564C0 2.70019 0.385714 3.08846 0.857143 3.08846H11.1429C11.6143 3.08846 12 2.70019 12 2.22564C12 1.75109 11.6143 1.36282 11.1429 1.36282Z" fill="#737D8C"/> <path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V9C18 7.9 17.1 7 16 7H8C6.9 7 6 7.9 6 9V19ZM18 4H15.5L14.79 3.29C14.61 3.11 14.35 3 14.09 3H9.91C9.65 3 9.39 3.11 9.21 3.29L8.5 4H6C5.45 4 5 4.45 5 5C5 5.55 5.45 6 6 6H18C18.55 6 19 5.55 19 5C19 4.45 18.55 4 18 4Z" fill="#8D99A5"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 679 B

After

Width:  |  Height:  |  Size: 397 B

35
res/img/element-icons/warning-badge.svg
View file

@ -1,5 +1,32 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<circle cx="8" cy="8" r="8" fill="#FF4B55"/> <svg
<rect x="7" y="3" width="2" height="6" rx="1" fill="white"/> xmlns:dc="http://purl.org/dc/elements/1.1/"
<rect x="7" y="11" width="2" height="2" rx="1" fill="white"/> xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg8"
version="1.1"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24">
<metadata
id="metadata14">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs12" />
<path
id="path2"
d="M 12 2 C 6.47715 2 2 6.47715 2 12 C 2 17.5228 6.47715 22 12 22 C 17.5228 22 22 17.5228 22 12 C 22 6.47715 17.5228 2 12 2 z M 11.880859 5.5039062 C 12.720859 5.4439063 13.470547 6.0746875 13.560547 6.9296875 L 13.560547 7.1699219 L 13.080078 13.169922 C 13.035078 13.724922 12.570625 14.144531 12.015625 14.144531 L 11.925781 14.144531 C 11.400781 14.099531 10.996172 13.694922 10.951172 13.169922 L 10.470703 7.1699219 C 10.395703 6.3149219 11.025859 5.5639064 11.880859 5.5039062 z M 12 15.763672 C 12.729 15.763672 13.320312 16.354884 13.320312 17.083984 C 13.320313 17.812984 12.729 18.404297 12 18.404297 C 11.271 18.404297 10.679688 17.812984 10.679688 17.083984 C 10.679688 16.354884 11.271 15.763672 12 15.763672 z "
style="fill:#ff4b55;fill-opacity:1" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 283 B

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
res/img/spinner.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 34 KiB

235
res/img/spinner.svg
View file

@ -1,141 +1,96 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" preserveAspectRatio="none" viewBox="0 0 375 375" style="background-color:#FFFFFF00; overflow:visible"> <svg
<title>start</title> xmlns:dc="http://purl.org/dc/elements/1.1/"
<!-- Layers --> xmlns:cc="http://creativecommons.org/ns#"
<!-- Layer: Icon --> xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
<svg x="188" y="187" width="0.01" height="0.01" style ="overflow:visible" opacity="1"> xmlns:svg="http://www.w3.org/2000/svg"
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 1 1;0 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="188;187.75;187.5"/> xmlns="http://www.w3.org/2000/svg"
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 1 1;0 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="187;187.25;187.5"/> xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
<g transform="scale(1 1)"> xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
<g transform="rotate(0)"> width="128"
<animateTransform attributeName="transform" calcMode="spline" dur="2" fill="freeze" keySplines="0.42 0 1 1;0 0 0.58 1" keyTimes="0;0.5;1" height="128"
repeatCount="indefinite" type="rotate" values="0;180;360"/> viewBox="0 0 33.866666 33.866668"
<svg x="-100" y="-100" width="200" height="200" style ="overflow:visible" opacity="1"> version="1.1"
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 1 1;0 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-100;-117.5;-100"/> id="svg920"
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 1 1;0 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-100;-117.5;-100"/> inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
<animate attributeName="width" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 1 1;0 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="200;235;200"/> sodipodi:docname="spinner.svg">
<animate attributeName="height" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 1 1;0 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="200;235;200"/> <defs
<g clip-path=""> id="defs914" />
<g filter=""> <metadata
<!-- Layer: 1024@2x --> id="metadata917">
<svg x="100" y="100" width="0.01" height="0.01" style ="overflow:visible" opacity="1"> <rdf:RDF>
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="100;117.5;100"/> <cc:Work
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="100;117.5;100"/> rdf:about="">
<g transform="scale(1 1)"> <dc:format>image/svg+xml</dc:format>
<g transform="rotate(0)"> <dc:type
<svg x="-100" y="-100" width="200" height="200" style ="overflow:visible" opacity="1"> rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-100;-117.5;-100"/> <dc:title />
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-100;-117.5;-100"/> </cc:Work>
<animate attributeName="width" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="200;235;200"/> </rdf:RDF>
<animate attributeName="height" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="200;235;200"/> </metadata>
<g clip-path=""> <g
<g filter=""> inkscape:label="Layer 1"
<!-- Layer: Path --> inkscape:groupmode="layer"
<svg x="118" y="46" width="0.01" height="0.01" style ="overflow:visible" opacity="1"> id="layer1">
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="118;138.65;118"/> <path
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="46;54.05;46"/> style="stroke-width:0;fill-opacity:0.30000001"
<g transform="scale(1 1)"> d="M 59,95.605469 V 123 c 0,2.77 2.23,5 5,5 2.77,0 5,-2.23 5,-5 V 95.605469 A 31.999998,31.999998 0 0 1 64,96 31.999998,31.999998 0 0 1 59,95.605469 Z"
<g transform="rotate(0)"> transform="scale(0.26458333)"
<svg x="-46" y="-46" width="92" height="92" style ="overflow:visible" opacity="1"> id="path2350" />
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-46;-54.05;-46"/> <path
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-46;-54.05;-46"/> style="stroke-width:0;fill-opacity:0.7020452"
<animate attributeName="width" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="92;108.1;92"/> d="M 64,0 C 61.23,0 59,2.2300001 59,5 V 32.394531 A 31.999998,31.999998 0 0 1 64,32 31.999998,31.999998 0 0 1 69,32.394531 V 5 C 69,2.2300001 66.77,0 64,0 Z"
<animate attributeName="height" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="92;108.1;92"/> transform="scale(0.26458333)"
<g clip-path=""> id="rect2283" />
<g filter=""> <path
<path d="M0,12c0,-6.627,5.373,-12,12,-12 44.183,0,80,35.817,80,80 0,6.627,-5.373,12,-12,12 -6.627,0,-12,-5.373,-12,-12 0,-30.928,-25.072,-56,-56,-56 -6.627,0,-12,-5.373,-12,-12zM0,12" fill="#0DBD8B" id="path" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="10" stroke-width="0"> style="stroke-width:0;fill-opacity:0.30000001"
<animate attributeName="d" calcMode="spline" dur="2s" fill="freeze" href="#path" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="M0,12c0,-6.627,5.373,-12,12,-12 44.183,0,80,35.817,80,80 0,6.627,-5.373,12,-12,12 -6.627,0,-12,-5.373,-12,-12 0,-30.928,-25.072,-56,-56,-56 -6.627,0,-12,-5.373,-12,-12zM0,12;M0,14.1c0,-7.787,6.313,-14.1,14.1,-14.1 51.915,0,94,42.085,94,94 0,7.787,-6.313,14.1,-14.1,14.1 -7.787,0,-14.1,-6.313,-14.1,-14.1 0,-36.34,-29.46,-65.8,-65.8,-65.8 -7.787,0,-14.1,-6.313,-14.1,-14.1zM0,14.1;M0,12c0,-6.627,5.373,-12,12,-12 44.183,0,80,35.817,80,80 0,6.627,-5.373,12,-12,12 -6.627,0,-12,-5.373,-12,-12 0,-30.928,-25.072,-56,-56,-56 -6.627,0,-12,-5.373,-12,-12zM0,12"/> d="M 43.867188,88.871094 30.169922,112.5957 c -1.385,2.39889 -0.568812,5.44508 1.830078,6.83008 2.39889,1.385 5.445078,0.56881 6.830078,-1.83008 L 52.527344,93.873047 a 31.999998,31.999998 0 0 1 -8.660156,-5.001953 z"
</path> transform="scale(0.26458333)"
id="path2346" />
</g> <path
</g> style="stroke-width:0;fill-opacity:0.80019373"
</svg> d="m 93.150391,7.9121094 c -1.599848,0.111837 -3.114844,0.992881 -3.980469,2.4921876 L 75.472656,34.126953 a 31.999998,31.999998 0 0 1 8.660156,5.001953 L 97.830078,15.404297 C 99.215078,13.005407 98.39889,9.9592187 96,8.5742188 95.100416,8.0548438 94.110299,7.8450072 93.150391,7.9121094 Z"
</g> transform="scale(0.26458333)"
</g> id="rect2285" />
</svg> <path
<!-- Layer: Path --> style="stroke-width:0;fill-opacity:0.30000001"
<svg x="82" y="154" width="0.01" height="0.01" style ="overflow:visible" opacity="1"> d="M 34.126953,75.474609 10.404297,89.169922 C 8.0054066,90.554922 7.1892188,93.60111 8.5742188,96 c 1.3849999,2.39889 4.4311882,3.215078 6.8300782,1.830078 L 39.128906,84.132812 a 31.999998,31.999998 0 0 1 -5.001953,-8.658203 z"
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="82;96.35;82"/> transform="scale(0.26458333)"
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="154;180.95;154"/> id="path2342" />
<g transform="scale(1 1)"> <path
<g transform="rotate(0)"> style="stroke-width:0;fill-opacity:0.90226436"
<svg x="-46" y="-46" width="92" height="92" style ="overflow:visible" opacity="1"> d="m 115.44531,29.507812 c -0.95991,-0.0671 -1.95002,0.142735 -2.84961,0.66211 L 88.871094,43.867188 a 31.999998,31.999998 0 0 1 5.001953,8.658203 L 117.5957,38.830078 c 2.39889,-1.385 3.21508,-4.431188 1.83008,-6.830078 -0.86562,-1.499306 -2.38062,-2.38035 -3.98047,-2.492188 z"
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-46;-54.05;-46"/> transform="scale(0.26458333)"
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-46;-54.05;-46"/> id="rect2287" />
<animate attributeName="width" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="92;108.1;92"/> <path
<animate attributeName="height" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="92;108.1;92"/> style="stroke-width:0;fill-opacity:1"
<g clip-path=""> d="M 95.605469,59 A 31.999998,31.999998 0 0 1 96,64 31.999998,31.999998 0 0 1 95.605469,69 H 123 c 2.77,0 5,-2.23 5,-5 0,-2.77 -2.23,-5 -5,-5 z"
<g filter=""> transform="scale(0.26458333)"
<path d="M92,80c0,6.627,-5.373,12,-12,12 -44.183,0,-80,-35.817,-80,-80 0,-6.627,5.373,-12,12,-12 6.627,0,12,5.373,12,12 0,30.928,25.072,56,56,56 6.627,0,12,5.373,12,12zM92,80" fill="#0DBD8B" id="path_1" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="10" stroke-width="0"> id="path2338" />
<animate attributeName="d" calcMode="spline" dur="2s" fill="freeze" href="#path_1" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="M92,80c0,6.627,-5.373,12,-12,12 -44.183,0,-80,-35.817,-80,-80 0,-6.627,5.373,-12,12,-12 6.627,0,12,5.373,12,12 0,30.928,25.072,56,56,56 6.627,0,12,5.373,12,12zM92,80;M108.1,94c0,7.787,-6.313,14.1,-14.1,14.1 -51.915,0,-94,-42.085,-94,-94 0,-7.787,6.313,-14.1,14.1,-14.1 7.787,0,14.1,6.313,14.1,14.1 0,36.34,29.46,65.8,65.8,65.8 7.787,0,14.1,6.313,14.1,14.1zM108.1,94;M92,80c0,6.627,-5.373,12,-12,12 -44.183,0,-80,-35.817,-80,-80 0,-6.627,5.373,-12,12,-12 6.627,0,12,5.373,12,12 0,30.928,25.072,56,56,56 6.627,0,12,5.373,12,12zM92,80"/> <path
</path> style="stroke-width:0;fill-opacity:0.40288368"
d="m 5,59 c -2.7699999,0 -5,2.23 -5,5 0,2.77 2.2300001,5 5,5 H 32.394531 A 31.999998,31.999998 0 0 1 32,64 31.999998,31.999998 0 0 1 32.394531,59 Z"
</g> transform="scale(0.26458333)"
</g> id="rect2289" />
</svg> <path
</g> style="stroke-width:0;fill-opacity:0.30000001"
</g> d="m 93.873047,75.472656 a 31.999998,31.999998 0 0 1 -5.001953,8.660156 L 112.5957,97.830078 c 2.39889,1.385 5.44508,0.568812 6.83008,-1.830078 1.385,-2.39889 0.56881,-5.445078 -1.83008,-6.830078 z"
</svg> transform="scale(0.26458333)"
<!-- Layer: Path --> id="path2334" />
<svg x="46" y="82" width="0.01" height="0.01" style ="overflow:visible" opacity="1"> <path
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="46;54.05;46"/> style="stroke-width:0;fill-opacity:0.49898377"
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="82;96.35;82"/> d="M 12.554688,29.507812 C 10.95484,29.61965 9.4398437,30.500694 8.5742188,32 c -1.385,2.39889 -0.5688122,5.445078 1.8300782,6.830078 l 23.722656,13.697266 a 31.999998,31.999998 0 0 1 5.001953,-8.660156 L 15.404297,30.169922 c -0.899584,-0.519375 -1.889701,-0.729212 -2.849609,-0.66211 z"
<g transform="scale(1 1)"> transform="scale(0.26458333)"
<g transform="rotate(0)"> id="rect2291" />
<svg x="-46" y="-46" width="92" height="92" style ="overflow:visible" opacity="1"> <path
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-46;-54.05;-46"/> style="stroke-width:0;fill-opacity:0.30000001"
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-46;-54.05;-46"/> d="m 84.132812,88.871094 a 31.999998,31.999998 0 0 1 -8.658203,5.001953 L 89.169922,117.5957 c 1.385,2.39889 4.431188,3.21508 6.830078,1.83008 2.39889,-1.385 3.215078,-4.43119 1.830078,-6.83008 z"
<animate attributeName="width" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="92;108.1;92"/> transform="scale(0.26458333)"
<animate attributeName="height" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="92;108.1;92"/> id="path2330" />
<g clip-path=""> <path
<g filter=""> style="stroke-width:0;fill-opacity:0.5998317"
<path d="M12,92c-6.627,0,-12,-5.373,-12,-12 0,-44.183,35.817,-80,80,-80 6.627,0,12,5.373,12,12 0,6.627,-5.373,12,-12,12 -30.928,0,-56,25.072,-56,56 0,6.627,-5.373,12,-12,12zM12,92" fill="#0DBD8B" id="path_2" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="10" stroke-width="0"> d="M 34.849609,7.9121094 C 33.889701,7.8450072 32.899584,8.0548438 32,8.5742188 29.60111,9.9592187 28.784922,13.005407 30.169922,15.404297 l 13.697266,23.724609 a 31.999998,31.999998 0 0 1 8.658203,-5.001953 L 38.830078,10.404297 C 37.964453,8.9049904 36.449457,8.0239464 34.849609,7.9121094 Z"
<animate attributeName="d" calcMode="spline" dur="2s" fill="freeze" href="#path_2" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="M12,92c-6.627,0,-12,-5.373,-12,-12 0,-44.183,35.817,-80,80,-80 6.627,0,12,5.373,12,12 0,6.627,-5.373,12,-12,12 -30.928,0,-56,25.072,-56,56 0,6.627,-5.373,12,-12,12zM12,92;M14.1,108.1c-7.787,0,-14.1,-6.313,-14.1,-14.1 0,-51.915,42.085,-94,94,-94 7.787,0,14.1,6.313,14.1,14.1 0,7.787,-6.313,14.1,-14.1,14.1 -36.34,0,-65.8,29.46,-65.8,65.8 0,7.787,-6.313,14.1,-14.1,14.1zM14.1,108.1;M12,92c-6.627,0,-12,-5.373,-12,-12 0,-44.183,35.817,-80,80,-80 6.627,0,12,5.373,12,12 0,6.627,-5.373,12,-12,12 -30.928,0,-56,25.072,-56,56 0,6.627,-5.373,12,-12,12zM12,92"/> transform="scale(0.26458333)"
</path> id="rect2293" />
</g>
</g>
</g>
</svg>
</g>
</g>
</svg>
<!-- Layer: Path -->
<svg x="154" y="118" width="0.01" height="0.01" style ="overflow:visible" opacity="1">
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="154;180.95;154"/>
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="118;138.65;118"/>
<g transform="scale(1 1)">
<g transform="rotate(0)">
<svg x="-46" y="-46" width="92" height="92" style ="overflow:visible" opacity="1">
<animate attributeName="x" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-46;-54.05;-46"/>
<animate attributeName="y" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="-46;-54.05;-46"/>
<animate attributeName="width" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="92;108.1;92"/>
<animate attributeName="height" calcMode="spline" dur="2s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="92;108.1;92"/>
<g clip-path="">
<g filter="">
<path d="M80,0c6.627,0,12,5.373,12,12 0,44.183,-35.817,80,-80,80 -6.627,0,-12,-5.373,-12,-12 0,-6.627,5.373,-12,12,-12 30.928,0,56,-25.072,56,-56 0,-6.627,5.373,-12,12,-12zM80,0" fill="#0DBD8B" id="path_3" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="10" stroke-width="0">
<animate attributeName="d" calcMode="spline" dur="2s" fill="freeze" href="#path_3" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.5;1" repeatCount="indefinite" values="M80,0c6.627,0,12,5.373,12,12 0,44.183,-35.817,80,-80,80 -6.627,0,-12,-5.373,-12,-12 0,-6.627,5.373,-12,12,-12 30.928,0,56,-25.072,56,-56 0,-6.627,5.373,-12,12,-12zM80,0;M94,0c7.787,0,14.1,6.313,14.1,14.1 0,51.915,-42.085,94,-94,94 -7.787,0,-14.1,-6.313,-14.1,-14.1 0,-7.787,6.313,-14.1,14.1,-14.1 36.34,0,65.8,-29.46,65.8,-65.8 0,-7.787,6.313,-14.1,14.1,-14.1zM94,0;M80,0c6.627,0,12,5.373,12,12 0,44.183,-35.817,80,-80,80 -6.627,0,-12,-5.373,-12,-12 0,-6.627,5.373,-12,12,-12 30.928,0,56,-25.072,56,-56 0,-6.627,5.373,-12,12,-12zM80,0"/>
</path>
</g>
</g>
</svg>
</g>
</g>
</svg>
</g>
</g>
</svg>
</g>
</g>
</svg>
</g>
</g>
</svg>
</g>
</g>
</svg>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

3
res/img/voip/silence.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.56986 1.82566L4 4.80054L1.5 4.80054C0.671573 4.80054 0 5.47212 0 6.30054V9.70054C0 10.529 0.671573 11.2005 1.5 11.2005L4 11.2005L7.56986 14.1754C8.05836 14.5825 8.8 14.2351 8.8 13.5993L8.8 9.70054V6.30054L8.8 2.40182C8.8 1.76595 8.05836 1.41858 7.56986 1.82566ZM14.1546 2.76877C13.9162 2.46224 13.4745 2.40702 13.1679 2.64543L13.0443 3.6318L13.0446 3.63212L13.0448 3.63238L13.0536 3.64417C13.0623 3.65582 13.0764 3.67498 13.0951 3.7013C13.1325 3.75399 13.1883 3.83518 13.2564 3.94222C13.3929 4.15668 13.5774 4.47271 13.7624 4.86922C14.1345 5.66647 14.4965 6.763 14.4965 8.00044C14.4965 9.23789 14.1345 10.3344 13.7624 11.1317C13.5774 11.5282 13.3929 11.8442 13.2564 12.0587C13.1883 12.1657 13.1325 12.2469 13.0951 12.2996C13.0764 12.3259 13.0623 12.3451 13.0536 12.3567L13.0448 12.3685L13.0446 12.3688L13.0443 12.3691L13.0441 12.3694L13.0438 12.3698L13.0436 12.37C12.8063 12.6765 12.8618 13.1174 13.1679 13.3555C13.4745 13.5939 13.9162 13.5386 14.1546 13.2321L13.5996 12.8004C14.1546 13.2321 14.1548 13.2319 14.1549 13.2317L14.1552 13.2313L14.156 13.2303L14.158 13.2278L14.1636 13.2204L14.1815 13.1966C14.1963 13.1768 14.2166 13.1491 14.2416 13.1138C14.2917 13.0433 14.3609 12.9423 14.4428 12.8136C14.6063 12.5567 14.8218 12.187 15.0368 11.7264C15.4647 10.8093 15.9027 9.50586 15.9027 8.00044C15.9027 6.49503 15.4647 5.19156 15.0368 4.27453C14.8218 3.8139 14.6063 3.44421 14.4428 3.18724C14.3609 3.05857 14.2917 2.95762 14.2416 2.88709C14.2166 2.8518 14.1963 2.82408 14.1815 2.80426L14.1636 2.78048L14.158 2.7731L14.156 2.77055L14.1552 2.76956L14.1549 2.76914C14.1548 2.76895 14.1546 2.76877 13.5996 3.20045L14.1546 2.76877ZM11.7552 5.16879C11.5168 4.86227 11.075 4.80705 10.7685 5.04546C10.4628 5.28321 10.4071 5.72319 10.6432 6.02961L10.6452 6.03231C10.6481 6.03609 10.6535 6.04353 10.6613 6.05445C10.6768 6.07633 10.7014 6.11199 10.732 6.1601C10.7935 6.2567 10.878 6.4013 10.963 6.58353C11.1351 6.95221 11.2971 7.44874 11.2971 8.00047C11.2971 8.5522 11.1351 9.04873 10.963 9.41741C10.878 9.59964 10.7935 9.74424 10.732 9.84084C10.7014 9.88895 10.6768 9.92461 10.6613 9.94648C10.6535 9.95741 10.6481 9.96484 10.6452 9.96863L10.6432 9.97132C10.4071 10.2777 10.4628 10.7177 10.7685 10.9555C11.075 11.1939 11.5168 11.1387 11.7552 10.8321L11.2002 10.4005C11.7552 10.8321 11.7553 10.832 11.7555 10.8318L11.7558 10.8314L11.7564 10.8305L11.758 10.8286L11.7619 10.8234L11.7731 10.8085C11.782 10.7966 11.7937 10.7806 11.8078 10.7607C11.8361 10.721 11.874 10.6656 11.9184 10.5958C12.0069 10.4567 12.1224 10.2584 12.2374 10.0121C12.4653 9.52364 12.7033 8.82017 12.7033 8.00047C12.7033 7.18077 12.4653 6.4773 12.2374 5.98884C12.1224 5.74249 12.0069 5.54424 11.9184 5.40512C11.874 5.33538 11.8361 5.27996 11.8078 5.24023C11.7937 5.22035 11.782 5.20435 11.7731 5.1924L11.7619 5.17752L11.758 5.17238L11.7564 5.17039L11.7558 5.16954L11.7555 5.16916C11.7553 5.16897 11.7552 5.16879 11.2002 5.60047L11.7552 5.16879Z" fill="#8D99A5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

4
res/img/voip/un-silence.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.18262 0.960693L14.3815 14.1596" stroke="#8D99A5" stroke-width="1.61751" stroke-miterlimit="10" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.57061 4.20635L5.19539 4.51904H3.58059L10.2419 11.1804V8.87764L5.57061 4.20635ZM10.2419 6.59013V2.15546C10.2419 1.42405 9.38884 1.0245 8.82695 1.49274L6.81834 3.16658L10.2419 6.59013ZM5.19526 11.2479H2.7146C1.76172 11.2479 0.989258 10.4754 0.989258 9.52254V6.24438C0.989258 5.69051 1.25024 5.1976 1.65595 4.88191L10.2419 13.4679V13.6117C10.2419 14.3431 9.38884 14.7426 8.82695 14.2744L5.19526 11.248V11.2479Z" fill="#8D99A5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 713 B

3
res/themes/dark/css/_dark.scss
View file

@ -118,6 +118,9 @@ $voipcall-plinth-color: #394049;
// ******************** // ********************
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
$dialpad-button-bg-color: #6F7882;
;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: $bg-color; $roomlist-filter-active-bg-color: $bg-color;

2
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -114,6 +114,8 @@ $voipcall-plinth-color: #394049;
// ******************** // ********************
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
$dialpad-button-bg-color: #6F7882;
;
$roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: $roomlist-button-bg-color; $roomlist-filter-active-bg-color: $roomlist-button-bg-color;

2
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -181,6 +181,8 @@ $voipcall-plinth-color: #F4F6FA;
// ******************** // ********************
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
$dialpad-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: $roomlist-button-bg-color; $roomlist-filter-active-bg-color: $roomlist-button-bg-color;

2
res/themes/light/css/_light.scss
View file

@ -173,6 +173,8 @@ $voipcall-plinth-color: #F4F6FA;
// ******************** // ********************
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
$dialpad-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: #ffffff; $roomlist-filter-active-bg-color: #ffffff;

4
scripts/ci/Dockerfile
View file

@ -3,6 +3,6 @@
# docker push vectorim/element-web-ci-e2etests-env:latest # docker push vectorim/element-web-ci-e2etests-env:latest
FROM node:14-buster FROM node:14-buster
RUN apt-get update RUN apt-get update
RUN apt-get -y install build-essential python3-dev libffi-dev python-pip python-setuptools sqlite3 libssl-dev python-virtualenv libjpeg-dev libxslt1-dev uuid-runtime RUN apt-get -y install jq build-essential python3-dev libffi-dev python-pip python-setuptools sqlite3 libssl-dev python-virtualenv libjpeg-dev libxslt1-dev uuid-runtime
# dependencies for chrome (installed by puppeteer) # dependencies for chrome (installed by puppeteer)
RUN apt-get -y install gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget RUN apt-get -y install gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm-dev libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

11
scripts/ci/end-to-end-tests.sh → scripts/ci/prepare-end-to-end-tests.sh
View file

@ -1,8 +1,4 @@
#!/bin/bash #!/bin/bash
#
# script which is run by the CI build (after `yarn test`).
#
# clones element-web develop and runs the tests against our version of react-sdk.
set -ev set -ev
@ -19,7 +15,7 @@ cd element-web
element_web_dir=`pwd` element_web_dir=`pwd`
CI_PACKAGE=true yarn build CI_PACKAGE=true yarn build
cd .. cd ..
# run end to end tests # prepare end to end tests
pushd test/end-to-end-tests pushd test/end-to-end-tests
ln -s $element_web_dir element/element-web ln -s $element_web_dir element/element-web
# PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ./install.sh # PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ./install.sh
@ -28,9 +24,4 @@ echo "--- Install synapse & other dependencies"
./install.sh ./install.sh
# install static webserver to server symlinked local copy of element # install static webserver to server symlinked local copy of element
./element/install-webserver.sh ./element/install-webserver.sh
rm -r logs || true
mkdir logs
echo "+++ Running end-to-end tests"
TESTS_STARTED=1
./run.sh --no-sandbox --log-directory logs/
popd popd

19
scripts/ci/run-end-to-end-tests.sh Executable file
View file

@ -0,0 +1,19 @@
#!/bin/bash
set -ev
handle_error() {
EXIT_CODE=$?
exit $EXIT_CODE
}
trap 'handle_error' ERR
# run end to end tests
pushd test/end-to-end-tests
rm -r logs || true
mkdir logs
echo "--- Running end-to-end tests"
TESTS_STARTED=1
./run.sh --no-sandbox --log-directory logs/
popd

44
scripts/fetchdep.sh
View file

@ -22,29 +22,51 @@ clone() {
} }
# Try the PR author's branch in case it exists on the deps as well. # Try the PR author's branch in case it exists on the deps as well.
# First we check if BUILDKITE_BRANCH is defined, # First we check if GITHUB_HEAD_REF is defined,
# if it isn't we can assume this is a Netlify build # Then we check if BUILDKITE_BRANCH is defined,
if [ -z ${BUILDKITE_BRANCH+x} ]; then # if they aren't we can assume this is a Netlify build
# Netlify doesn't give us info about the fork so we have to get it from GitHub API if [ -n "$GITHUB_HEAD_REF" ]; then
apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/" head=$GITHUB_HEAD_REF
apiEndpoint+=$REVIEW_ID elif [ -n "$BUILDKITE_BRANCH" ]; then
head=$(curl $apiEndpoint | jq -r '.head.label')
else
head=$BUILDKITE_BRANCH head=$BUILDKITE_BRANCH
else
# Netlify doesn't give us info about the fork so we have to get it from GitHub API
apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/"
apiEndpoint+=$REVIEW_ID
head=$(curl $apiEndpoint | jq -r '.head.label')
fi fi
# If head is set, it will contain either: # If head is set, it will contain on Buildkite either:
# * "branch" when the author's branch and target branch are in the same repo # * "branch" when the author's branch and target branch are in the same repo
# * "fork:branch" when the author's branch is in their fork or if this is a Netlify build # * "fork:branch" when the author's branch is in their fork or if this is a Netlify build
# We can split on `:` into an array to check. # We can split on `:` into an array to check.
# For GitHub Actions we need to inspect GITHUB_REPOSITORY and GITHUB_ACTOR
# to determine whether the branch is from a fork or not
BRANCH_ARRAY=(${head//:/ }) BRANCH_ARRAY=(${head//:/ })
if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then
clone $deforg $defrepo $BUILDKITE_BRANCH
if [ -n "$GITHUB_HEAD_REF" ]; then
if [[ "$GITHUB_REPOSITORY" == "$deforg"* ]]; then
clone $deforg $defrepo $GITHUB_HEAD_REF
else
REPO_ARRAY=(${GITHUB_REPOSITORY//\// })
clone $REPO_ARRAY[0] $defrepo $GITHUB_HEAD_REF
fi
else
clone $deforg $defrepo $BUILDKITE_BRANCH
fi
elif [[ "${#BRANCH_ARRAY[@]}" == "2" ]]; then elif [[ "${#BRANCH_ARRAY[@]}" == "2" ]]; then
clone ${BRANCH_ARRAY[0]} $defrepo ${BRANCH_ARRAY[1]} clone ${BRANCH_ARRAY[0]} $defrepo ${BRANCH_ARRAY[1]}
fi fi
# Try the target branch of the push or PR. # Try the target branch of the push or PR.
clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH if [ -n $GITHUB_BASE_REF ]; then
clone $deforg $defrepo $GITHUB_BASE_REF
elif [ -n $BUILDKITE_PULL_REQUEST_BASE_BRANCH ]; then
clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH
fi
# Try HEAD which is the branch name in Netlify (not BRANCH which is pull/xxxx/head for PR builds) # Try HEAD which is the branch name in Netlify (not BRANCH which is pull/xxxx/head for PR builds)
clone $deforg $defrepo $HEAD clone $deforg $defrepo $HEAD
# Use the default branch as the last resort. # Use the default branch as the last resort.

38
src/@types/diff-dom.ts Normal file
View file

@ -0,0 +1,38 @@
/*
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.
*/
declare module "diff-dom" {
export interface IDiff {
action: string;
name: string;
text?: string;
route: number[];
value: string;
element: unknown;
oldValue: string;
newValue: string;
}
interface IOpts {
}
export class DiffDOM {
public constructor(opts?: IOpts);
public apply(tree: unknown, diffs: IDiff[]): unknown;
public undo(tree: unknown, diffs: IDiff[]): unknown;
public diff(a: HTMLElement | string, b: HTMLElement | string): IDiff[];
}
}

23
src/@types/global.d.ts vendored
View file

@ -42,6 +42,9 @@ import {SpaceStoreClass} from "../stores/SpaceStore";
import TypingStore from "../stores/TypingStore"; import TypingStore from "../stores/TypingStore";
import { EventIndexPeg } from "../indexing/EventIndexPeg"; import { EventIndexPeg } from "../indexing/EventIndexPeg";
import {VoiceRecordingStore} from "../stores/VoiceRecordingStore"; import {VoiceRecordingStore} from "../stores/VoiceRecordingStore";
import PerformanceMonitor from "../performance";
import UIStore from "../stores/UIStore";
import { SetupEncryptionStore } from "../stores/SetupEncryptionStore";
declare global { declare global {
interface Window { interface Window {
@ -52,6 +55,9 @@ declare global {
init: () => Promise<void>; init: () => Promise<void>;
}; };
// Needed for Safari, unknown to TypeScript
webkitAudioContext: typeof AudioContext;
mxContentMessages: ContentMessages; mxContentMessages: ContentMessages;
mxToastStore: ToastStore; mxToastStore: ToastStore;
mxDeviceListener: DeviceListener; mxDeviceListener: DeviceListener;
@ -76,6 +82,10 @@ declare global {
mxVoiceRecordingStore: VoiceRecordingStore; mxVoiceRecordingStore: VoiceRecordingStore;
mxTypingStore: TypingStore; mxTypingStore: TypingStore;
mxEventIndexPeg: EventIndexPeg; mxEventIndexPeg: EventIndexPeg;
mxPerformanceMonitor: PerformanceMonitor;
mxPerformanceEntryNames: any;
mxUIStore: UIStore;
mxSetupEncryptionStore?: SetupEncryptionStore;
} }
interface Document { interface Document {
@ -103,19 +113,6 @@ declare global {
usageDetails?: {[key: string]: number}; usageDetails?: {[key: string]: number};
} }
export interface ISettledFulfilled<T> {
status: "fulfilled";
value: T;
}
export interface ISettledRejected {
status: "rejected";
reason: any;
}
interface PromiseConstructor {
allSettled<T>(promises: Promise<T>[]): Promise<Array<ISettledFulfilled<T> | ISettledRejected>>;
}
interface HTMLAudioElement { interface HTMLAudioElement {
type?: string; type?: string;
// sinkId & setSinkId are experimental and typescript doesn't know about them // sinkId & setSinkId are experimental and typescript doesn't know about them

56
src/AsyncWrapper.js → src/AsyncWrapper.tsx
View file

@ -1,6 +1,5 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015-2021 The Matrix.org Foundation C.I.C.
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -15,52 +14,61 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React, { ComponentType } from "react";
import * as sdk from './index'; import * as sdk from './index';
import PropTypes from 'prop-types';
import { _t } from './languageHandler'; import { _t } from './languageHandler';
import { IDialogProps } from "./components/views/dialogs/IDialogProps";
type AsyncImport<T> = { default: T };
interface IProps extends IDialogProps {
// A promise which resolves with the real component
prom: Promise<ComponentType | AsyncImport<ComponentType>>;
}
interface IState {
component?: ComponentType;
error?: Error;
}
/** /**
* Wrap an asynchronous loader function with a react component which shows a * Wrap an asynchronous loader function with a react component which shows a
* spinner until the real component loads. * spinner until the real component loads.
*/ */
export default class AsyncWrapper extends React.Component { export default class AsyncWrapper extends React.Component<IProps, IState> {
static propTypes = { private unmounted = false;
/** A promise which resolves with the real component
*/
prom: PropTypes.object.isRequired,
};
state = { public state = {
component: null, component: null,
error: null, error: null,
}; };
componentDidMount() { componentDidMount() {
this._unmounted = false;
// XXX: temporary logging to try to diagnose // XXX: temporary logging to try to diagnose
// https://github.com/vector-im/element-web/issues/3148 // https://github.com/vector-im/element-web/issues/3148
console.log('Starting load of AsyncWrapper for modal'); console.log('Starting load of AsyncWrapper for modal');
this.props.prom.then((result) => { this.props.prom.then((result) => {
if (this._unmounted) { if (this.unmounted) return;
return;
}
// Take the 'default' member if it's there, then we support // Take the 'default' member if it's there, then we support
// passing in just an import()ed module, since ES6 async import // passing in just an import()ed module, since ES6 async import
// always returns a module *namespace*. // always returns a module *namespace*.
const component = result.default ? result.default : result; const component = (result as AsyncImport<ComponentType>).default
this.setState({component}); ? (result as AsyncImport<ComponentType>).default
: result as ComponentType;
this.setState({ component });
}).catch((e) => { }).catch((e) => {
console.warn('AsyncWrapper promise failed', e); console.warn('AsyncWrapper promise failed', e);
this.setState({error: e}); this.setState({ error: e });
}); });
} }
componentWillUnmount() { componentWillUnmount() {
this._unmounted = true; this.unmounted = true;
} }
_onWrapperCancelClick = () => { private onWrapperCancelClick = () => {
this.props.onFinished(false); this.props.onFinished(false);
}; };
@ -71,12 +79,10 @@ export default class AsyncWrapper extends React.Component {
} else if (this.state.error) { } else if (this.state.error) {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return <BaseDialog onFinished={this.props.onFinished} return <BaseDialog onFinished={this.props.onFinished} title={_t("Error")}>
title={_t("Error")} { _t("Unable to load! Check your network connectivity and try again.") }
>
{_t("Unable to load! Check your network connectivity and try again.")}
<DialogButtons primaryButton={_t("Dismiss")} <DialogButtons primaryButton={_t("Dismiss")}
onPrimaryButtonClick={this._onWrapperCancelClick} onPrimaryButtonClick={this.onWrapperCancelClick}
hasCancel={false} hasCancel={false}
/> />
</BaseDialog>; </BaseDialog>;

25
src/Avatar.ts
View file

@ -14,18 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import {RoomMember} from "matrix-js-sdk/src/models/room-member"; import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import {User} from "matrix-js-sdk/src/models/user"; import { User } from "matrix-js-sdk/src/models/user";
import {Room} from "matrix-js-sdk/src/models/room"; import { Room } from "matrix-js-sdk/src/models/room";
import { ResizeMethod } from "matrix-js-sdk/src/@types/partials";
import DMRoomMap from './utils/DMRoomMap'; import DMRoomMap from './utils/DMRoomMap';
import {mediaFromMxc} from "./customisations/Media"; import { mediaFromMxc } from "./customisations/Media";
import SettingsStore from "./settings/SettingsStore"; import SettingsStore from "./settings/SettingsStore";
export type ResizeMethod = "crop" | "scale";
// Not to be used for BaseAvatar urls as that has similar default avatar fallback already // Not to be used for BaseAvatar urls as that has similar default avatar fallback already
export function avatarUrlForMember(member: RoomMember, width: number, height: number, resizeMethod: ResizeMethod) { export function avatarUrlForMember(
member: RoomMember,
width: number,
height: number,
resizeMethod: ResizeMethod,
): string {
let url: string; let url: string;
if (member?.getMxcAvatarUrl()) { if (member?.getMxcAvatarUrl()) {
url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod); url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod);
@ -39,7 +43,12 @@ export function avatarUrlForMember(member: RoomMember, width: number, height: nu
return url; return url;
} }
export function avatarUrlForUser(user: User, width: number, height: number, resizeMethod?: ResizeMethod) { export function avatarUrlForUser(
user: Pick<User, "avatarUrl">,
width: number,
height: number,
resizeMethod?: ResizeMethod,
): string | null {
if (!user.avatarUrl) return null; if (!user.avatarUrl) return null;
return mediaFromMxc(user.avatarUrl).getThumbnailOfSourceHttp(width, height, resizeMethod); return mediaFromMxc(user.avatarUrl).getThumbnailOfSourceHttp(width, height, resizeMethod);
} }

54
src/CallHandler.tsx
View file

@ -99,7 +99,7 @@ const CHECK_PROTOCOLS_ATTEMPTS = 3;
// (and store the ID of their native room) // (and store the ID of their native room)
export const VIRTUAL_ROOM_EVENT_TYPE = 'im.vector.is_virtual_room'; export const VIRTUAL_ROOM_EVENT_TYPE = 'im.vector.is_virtual_room';
enum AudioID { export enum AudioID {
Ring = 'ringAudio', Ring = 'ringAudio',
Ringback = 'ringbackAudio', Ringback = 'ringbackAudio',
CallEnd = 'callendAudio', CallEnd = 'callendAudio',
@ -264,7 +264,7 @@ export default class CallHandler extends EventEmitter {
} }
public getSupportsVirtualRooms() { public getSupportsVirtualRooms() {
return this.supportsPstnProtocol; return this.supportsSipNativeVirtual;
} }
public pstnLookup(phoneNumber: string): Promise<ThirdpartyLookupResponse[]> { public pstnLookup(phoneNumber: string): Promise<ThirdpartyLookupResponse[]> {
@ -462,6 +462,9 @@ export default class CallHandler extends EventEmitter {
if (call.hangupReason === CallErrorCode.UserHangup) { if (call.hangupReason === CallErrorCode.UserHangup) {
title = _t("Call Declined"); title = _t("Call Declined");
description = _t("The other party declined the call."); description = _t("The other party declined the call.");
} else if (call.hangupReason === CallErrorCode.UserBusy) {
title = _t("User Busy");
description = _t("The user you called is busy.");
} else if (call.hangupReason === CallErrorCode.InviteTimeout) { } else if (call.hangupReason === CallErrorCode.InviteTimeout) {
title = _t("Call Failed"); title = _t("Call Failed");
// XXX: full stop appended as some relic here, but these // XXX: full stop appended as some relic here, but these
@ -518,7 +521,9 @@ export default class CallHandler extends EventEmitter {
let newNativeAssertedIdentity = newAssertedIdentity; let newNativeAssertedIdentity = newAssertedIdentity;
if (newAssertedIdentity) { if (newAssertedIdentity) {
const response = await this.sipNativeLookup(newAssertedIdentity); const response = await this.sipNativeLookup(newAssertedIdentity);
if (response.length) newNativeAssertedIdentity = response[0].userid; if (response.length && response[0].fields.lookup_success) {
newNativeAssertedIdentity = response[0].userid;
}
} }
console.log(`Asserted identity ${newAssertedIdentity} mapped to ${newNativeAssertedIdentity}`); console.log(`Asserted identity ${newAssertedIdentity} mapped to ${newNativeAssertedIdentity}`);
@ -537,6 +542,7 @@ export default class CallHandler extends EventEmitter {
if (newMappedRoomId !== mappedRoomId) { if (newMappedRoomId !== mappedRoomId) {
this.removeCallForRoom(mappedRoomId); this.removeCallForRoom(mappedRoomId);
mappedRoomId = newMappedRoomId; mappedRoomId = newMappedRoomId;
console.log("Moving call to room " + mappedRoomId);
this.calls.set(mappedRoomId, call); this.calls.set(mappedRoomId, call);
this.emit(CallHandlerEvent.CallChangeRoom, call); this.emit(CallHandlerEvent.CallChangeRoom, call);
} }
@ -602,6 +608,7 @@ export default class CallHandler extends EventEmitter {
} }
private removeCallForRoom(roomId: string) { private removeCallForRoom(roomId: string) {
console.log("Removing call for room ", roomId);
this.calls.delete(roomId); this.calls.delete(roomId);
this.emit(CallHandlerEvent.CallsChanged, this.calls); this.emit(CallHandlerEvent.CallsChanged, this.calls);
} }
@ -675,6 +682,7 @@ export default class CallHandler extends EventEmitter {
console.log("Current turn creds expire in " + timeUntilTurnCresExpire + " ms"); console.log("Current turn creds expire in " + timeUntilTurnCresExpire + " ms");
const call = MatrixClientPeg.get().createCall(mappedRoomId); const call = MatrixClientPeg.get().createCall(mappedRoomId);
console.log("Adding call for room ", roomId);
this.calls.set(roomId, call); this.calls.set(roomId, call);
this.emit(CallHandlerEvent.CallsChanged, this.calls); this.emit(CallHandlerEvent.CallsChanged, this.calls);
if (transferee) { if (transferee) {
@ -799,11 +807,15 @@ export default class CallHandler extends EventEmitter {
const mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call); const mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call);
if (this.getCallForRoom(mappedRoomId)) { if (this.getCallForRoom(mappedRoomId)) {
// ignore multiple incoming calls to the same room console.log(
"Got incoming call for room " + mappedRoomId +
" but there's already a call for this room: ignoring",
);
return; return;
} }
Analytics.trackEvent('voip', 'receiveCall', 'type', call.type); Analytics.trackEvent('voip', 'receiveCall', 'type', call.type);
console.log("Adding call for room ", mappedRoomId);
this.calls.set(mappedRoomId, call) this.calls.set(mappedRoomId, call)
this.emit(CallHandlerEvent.CallsChanged, this.calls); this.emit(CallHandlerEvent.CallsChanged, this.calls);
this.setCallListeners(call); this.setCallListeners(call);
@ -856,9 +868,43 @@ export default class CallHandler extends EventEmitter {
}); });
break; break;
} }
case Action.DialNumber:
this.dialNumber(payload.number);
break;
} }
} }
private async dialNumber(number: string) {
const results = await this.pstnLookup(number);
if (!results || results.length === 0 || !results[0].userid) {
Modal.createTrackedDialog('', '', ErrorDialog, {
title: _t("Unable to look up phone number"),
description: _t("There was an error looking up the phone number"),
});
return;
}
const userId = results[0].userid;
// Now check to see if this is a virtual user, in which case we should find the
// native user
let nativeUserId;
if (this.getSupportsVirtualRooms()) {
const nativeLookupResults = await this.sipNativeLookup(userId);
const lookupSuccess = nativeLookupResults.length > 0 && nativeLookupResults[0].fields.lookup_success;
nativeUserId = lookupSuccess ? nativeLookupResults[0].userid : userId;
console.log("Looked up " + number + " to " + userId + " and mapped to native user " + nativeUserId);
} else {
nativeUserId = userId;
}
const roomId = await ensureDMExists(MatrixClientPeg.get(), nativeUserId);
dis.dispatch({
action: 'view_room',
room_id: roomId,
});
}
setActiveCallRoomId(activeCallRoomId: string) { setActiveCallRoomId(activeCallRoomId: string) {
logger.info("Setting call in room " + activeCallRoomId + " active"); logger.info("Setting call in room " + activeCallRoomId + " active");

85
src/CallMediaHandler.js
View file

@ -1,85 +0,0 @@
/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
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.
*/
import SettingsStore from "./settings/SettingsStore";
import {SettingLevel} from "./settings/SettingLevel";
import {setMatrixCallAudioInput, setMatrixCallVideoInput} from "matrix-js-sdk/src/matrix";
export default {
hasAnyLabeledDevices: async function() {
const devices = await navigator.mediaDevices.enumerateDevices();
return devices.some(d => !!d.label);
},
getDevices: function() {
// Only needed for Electron atm, though should work in modern browsers
// once permission has been granted to the webapp
return navigator.mediaDevices.enumerateDevices().then(function(devices) {
const audiooutput = [];
const audioinput = [];
const videoinput = [];
devices.forEach((device) => {
switch (device.kind) {
case 'audiooutput': audiooutput.push(device); break;
case 'audioinput': audioinput.push(device); break;
case 'videoinput': videoinput.push(device); break;
}
});
// console.log("Loaded WebRTC Devices", mediaDevices);
return {
audiooutput,
audioinput,
videoinput,
};
}, (error) => { console.log('Unable to refresh WebRTC Devices: ', error); });
},
loadDevices: function() {
const audioDeviceId = SettingsStore.getValue("webrtc_audioinput");
const videoDeviceId = SettingsStore.getValue("webrtc_videoinput");
setMatrixCallAudioInput(audioDeviceId);
setMatrixCallVideoInput(videoDeviceId);
},
setAudioOutput: function(deviceId) {
SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId);
},
setAudioInput: function(deviceId) {
SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId);
setMatrixCallAudioInput(deviceId);
},
setVideoInput: function(deviceId) {
SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId);
setMatrixCallVideoInput(deviceId);
},
getAudioOutput: function() {
return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audiooutput");
},
getAudioInput: function() {
return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audioinput");
},
getVideoInput: function() {
return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_videoinput");
},
};

28
src/ContentMessages.tsx
View file

@ -28,8 +28,6 @@ import encrypt from "browser-encrypt-attachment";
import extractPngChunks from "png-chunks-extract"; import extractPngChunks from "png-chunks-extract";
import Spinner from "./components/views/elements/Spinner"; import Spinner from "./components/views/elements/Spinner";
// Polyfill for Canvas.toBlob API using Canvas.toDataURL
import "blueimp-canvas-to-blob";
import { Action } from "./dispatcher/actions"; import { Action } from "./dispatcher/actions";
import CountlyAnalytics from "./CountlyAnalytics"; import CountlyAnalytics from "./CountlyAnalytics";
import { import {
@ -40,6 +38,7 @@ import {
UploadStartedPayload, UploadStartedPayload,
} from "./dispatcher/payloads/UploadPayload"; } from "./dispatcher/payloads/UploadPayload";
import {IUpload} from "./models/IUpload"; import {IUpload} from "./models/IUpload";
import { IImageInfo } from "matrix-js-sdk/src/@types/partials";
const MAX_WIDTH = 800; const MAX_WIDTH = 800;
const MAX_HEIGHT = 600; const MAX_HEIGHT = 600;
@ -208,12 +207,12 @@ function infoForImageFile(matrixClient, roomId, imageFile) {
} }
let imageInfo; let imageInfo;
return loadImageElement(imageFile).then(function(r) { return loadImageElement(imageFile).then((r) => {
return createThumbnail(r.img, r.width, r.height, thumbnailType); return createThumbnail(r.img, r.width, r.height, thumbnailType);
}).then(function(result) { }).then((result) => {
imageInfo = result.info; imageInfo = result.info;
return uploadFile(matrixClient, roomId, result.thumbnail); return uploadFile(matrixClient, roomId, result.thumbnail);
}).then(function(result) { }).then((result) => {
imageInfo.thumbnail_url = result.url; imageInfo.thumbnail_url = result.url;
imageInfo.thumbnail_file = result.file; imageInfo.thumbnail_file = result.file;
return imageInfo; return imageInfo;
@ -264,12 +263,12 @@ function infoForVideoFile(matrixClient, roomId, videoFile) {
const thumbnailType = "image/jpeg"; const thumbnailType = "image/jpeg";
let videoInfo; let videoInfo;
return loadVideoElement(videoFile).then(function(video) { return loadVideoElement(videoFile).then((video) => {
return createThumbnail(video, video.videoWidth, video.videoHeight, thumbnailType); return createThumbnail(video, video.videoWidth, video.videoHeight, thumbnailType);
}).then(function(result) { }).then((result) => {
videoInfo = result.info; videoInfo = result.info;
return uploadFile(matrixClient, roomId, result.thumbnail); return uploadFile(matrixClient, roomId, result.thumbnail);
}).then(function(result) { }).then((result) => {
videoInfo.thumbnail_url = result.url; videoInfo.thumbnail_url = result.url;
videoInfo.thumbnail_file = result.file; videoInfo.thumbnail_file = result.file;
return videoInfo; return videoInfo;
@ -308,7 +307,12 @@ function readFileAsArrayBuffer(file: File | Blob): Promise<ArrayBuffer> {
* If the file is unencrypted then the object will have a "url" key. * If the file is unencrypted then the object will have a "url" key.
* If the file is encrypted then the object will have a "file" key. * If the file is encrypted then the object will have a "file" key.
*/ */
function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blob, progressHandler?: any) { export function uploadFile(
matrixClient: MatrixClient,
roomId: string,
file: File | Blob,
progressHandler?: any, // TODO: Types
): Promise<{url?: string, file?: any}> { // TODO: Types
let canceled = false; let canceled = false;
if (matrixClient.isRoomEncrypted(roomId)) { if (matrixClient.isRoomEncrypted(roomId)) {
// If the room is encrypted then encrypt the file before uploading it. // If the room is encrypted then encrypt the file before uploading it.
@ -355,7 +359,7 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
// If the attachment isn't encrypted then include the URL directly. // If the attachment isn't encrypted then include the URL directly.
return {"url": url}; return {"url": url};
}); });
promise1.abort = () => { (promise1 as any).abort = () => {
canceled = true; canceled = true;
MatrixClientPeg.get().cancelUpload(basePromise); MatrixClientPeg.get().cancelUpload(basePromise);
}; };
@ -367,7 +371,7 @@ export default class ContentMessages {
private inprogress: IUpload[] = []; private inprogress: IUpload[] = [];
private mediaConfig: IMediaConfig = null; private mediaConfig: IMediaConfig = null;
sendStickerContentToRoom(url: string, roomId: string, info: string, text: string, matrixClient: MatrixClient) { sendStickerContentToRoom(url: string, roomId: string, info: IImageInfo, text: string, matrixClient: MatrixClient) {
const startTime = CountlyAnalytics.getTimestamp(); const startTime = CountlyAnalytics.getTimestamp();
const prom = MatrixClientPeg.get().sendStickerMessage(roomId, url, info, text).catch((e) => { const prom = MatrixClientPeg.get().sendStickerMessage(roomId, url, info, text).catch((e) => {
console.warn(`Failed to send content with URL ${url} to room ${roomId}`, e); console.warn(`Failed to send content with URL ${url} to room ${roomId}`, e);
@ -441,7 +445,7 @@ export default class ContentMessages {
let uploadAll = false; let uploadAll = false;
// Promise to complete before sending next file into room, used for synchronisation of file-sending // Promise to complete before sending next file into room, used for synchronisation of file-sending
// to match the order the files were specified in // to match the order the files were specified in
let promBefore = Promise.resolve(); let promBefore: Promise<any> = Promise.resolve();
for (let i = 0; i < okFiles.length; ++i) { for (let i = 0; i < okFiles.length; ++i) {
const file = okFiles[i]; const file = okFiles[i];
if (!uploadAll) { if (!uploadAll) {

Some files were not shown because too many files have changed in this diff Show more