mirror of https://github.com/vector-im/riot-web
Merge branch 'develop' into DialPad
Ayush PS
commit
8660ab000e
|
|
@ -1,7 +1,7 @@
|
|||
# autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
|
||||
|
||||
src/Markdown.js
|
||||
src/Velociraptor.js
|
||||
src/NodeAnimator.js
|
||||
src/components/structures/RoomDirectory.js
|
||||
src/components/views/rooms/MemberList.js
|
||||
src/ratelimitedfunc.js
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ module.exports = {
|
|||
"stylelint-scss",
|
||||
],
|
||||
"rules": {
|
||||
"color-hex-case": null,
|
||||
"indentation": 4,
|
||||
"comment-empty-line-before": null,
|
||||
"declaration-empty-line-before": null,
|
||||
|
|
|
|||
196
CHANGELOG.md
196
CHANGELOG.md
|
|
@ -1,3 +1,188 @@
|
|||
Changes in [3.18.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.18.0) (2021-04-12)
|
||||
=====================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.18.0-rc.1...v3.18.0)
|
||||
|
||||
* Upgrade to JS SDK 9.11.0
|
||||
* [Release] Tweak appearance of invite reason
|
||||
[\#5848](https://github.com/matrix-org/matrix-react-sdk/pull/5848)
|
||||
|
||||
Changes in [3.18.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.18.0-rc.1) (2021-04-07)
|
||||
===============================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.17.0...v3.18.0-rc.1)
|
||||
|
||||
* Upgrade to JS SDK 9.11.0-rc.1
|
||||
* Translations update from Weblate
|
||||
[\#5832](https://github.com/matrix-org/matrix-react-sdk/pull/5832)
|
||||
* Add fake fallback thumbnail URL for encrypted videos
|
||||
[\#5826](https://github.com/matrix-org/matrix-react-sdk/pull/5826)
|
||||
* Fix broken "Go to Home View" shortcut on macOS
|
||||
[\#5818](https://github.com/matrix-org/matrix-react-sdk/pull/5818)
|
||||
* Remove status area UI defects when in-call
|
||||
[\#5828](https://github.com/matrix-org/matrix-react-sdk/pull/5828)
|
||||
* Fix viewing invitations when the inviter has no avatar set
|
||||
[\#5829](https://github.com/matrix-org/matrix-react-sdk/pull/5829)
|
||||
* Restabilize room list ordering with prefiltering on spaces/communities
|
||||
[\#5825](https://github.com/matrix-org/matrix-react-sdk/pull/5825)
|
||||
* Show invite reasons
|
||||
[\#5694](https://github.com/matrix-org/matrix-react-sdk/pull/5694)
|
||||
* Require strong password in forgot password form
|
||||
[\#5744](https://github.com/matrix-org/matrix-react-sdk/pull/5744)
|
||||
* Attended transfer
|
||||
[\#5798](https://github.com/matrix-org/matrix-react-sdk/pull/5798)
|
||||
* Make user autocomplete query search beyond prefix
|
||||
[\#5822](https://github.com/matrix-org/matrix-react-sdk/pull/5822)
|
||||
* Add reset option for corrupted event index store
|
||||
[\#5806](https://github.com/matrix-org/matrix-react-sdk/pull/5806)
|
||||
* Prevent Re-request encryption keys from appearing under redacted messages
|
||||
[\#5816](https://github.com/matrix-org/matrix-react-sdk/pull/5816)
|
||||
* Keybindings follow up
|
||||
[\#5815](https://github.com/matrix-org/matrix-react-sdk/pull/5815)
|
||||
* Increase default visible tiles for room sublists
|
||||
[\#5821](https://github.com/matrix-org/matrix-react-sdk/pull/5821)
|
||||
* Change copy to point to native node modules docs in element desktop
|
||||
[\#5817](https://github.com/matrix-org/matrix-react-sdk/pull/5817)
|
||||
* Show waveform and timer in voice messages
|
||||
[\#5801](https://github.com/matrix-org/matrix-react-sdk/pull/5801)
|
||||
* Label unlabeled avatar button in event panel
|
||||
[\#5585](https://github.com/matrix-org/matrix-react-sdk/pull/5585)
|
||||
* Fix the theme engine breaking with some web theming extensions
|
||||
[\#5810](https://github.com/matrix-org/matrix-react-sdk/pull/5810)
|
||||
* Add /spoiler command
|
||||
[\#5696](https://github.com/matrix-org/matrix-react-sdk/pull/5696)
|
||||
* Don't specify sample rates for voice messages
|
||||
[\#5802](https://github.com/matrix-org/matrix-react-sdk/pull/5802)
|
||||
* Tweak security key error handling
|
||||
[\#5812](https://github.com/matrix-org/matrix-react-sdk/pull/5812)
|
||||
* Add user settings for warn before exit
|
||||
[\#5793](https://github.com/matrix-org/matrix-react-sdk/pull/5793)
|
||||
* Decouple key bindings from event handling
|
||||
[\#5720](https://github.com/matrix-org/matrix-react-sdk/pull/5720)
|
||||
* Fixing spaces papercuts
|
||||
[\#5792](https://github.com/matrix-org/matrix-react-sdk/pull/5792)
|
||||
* Share keys for historical messages when inviting users to encrypted rooms
|
||||
[\#5763](https://github.com/matrix-org/matrix-react-sdk/pull/5763)
|
||||
* Fix upload bar not populating when starting uploads
|
||||
[\#5804](https://github.com/matrix-org/matrix-react-sdk/pull/5804)
|
||||
* Fix crash on login when using social login
|
||||
[\#5803](https://github.com/matrix-org/matrix-react-sdk/pull/5803)
|
||||
* Convert AccessSecretStorageDialog to TypeScript
|
||||
[\#5805](https://github.com/matrix-org/matrix-react-sdk/pull/5805)
|
||||
* Tweak cross-signing copy
|
||||
[\#5807](https://github.com/matrix-org/matrix-react-sdk/pull/5807)
|
||||
* Fix password change popup message
|
||||
[\#5791](https://github.com/matrix-org/matrix-react-sdk/pull/5791)
|
||||
* View Source: make Event ID go below Event ID
|
||||
[\#5790](https://github.com/matrix-org/matrix-react-sdk/pull/5790)
|
||||
* Fix line numbers when missing trailing newline
|
||||
[\#5800](https://github.com/matrix-org/matrix-react-sdk/pull/5800)
|
||||
* Remember reply when switching rooms
|
||||
[\#5796](https://github.com/matrix-org/matrix-react-sdk/pull/5796)
|
||||
* Fix edge case with redaction grouper messing up continuations
|
||||
[\#5797](https://github.com/matrix-org/matrix-react-sdk/pull/5797)
|
||||
* Only show the ask anyway modal for explicit user lookup failures
|
||||
[\#5785](https://github.com/matrix-org/matrix-react-sdk/pull/5785)
|
||||
* Improve error reporting when EventIndex fails on a supported environment
|
||||
[\#5787](https://github.com/matrix-org/matrix-react-sdk/pull/5787)
|
||||
* Tweak and fix some space features
|
||||
[\#5789](https://github.com/matrix-org/matrix-react-sdk/pull/5789)
|
||||
* Support replying with a message command
|
||||
[\#5686](https://github.com/matrix-org/matrix-react-sdk/pull/5686)
|
||||
* Labs feature: Early implementation of voice messages
|
||||
[\#5769](https://github.com/matrix-org/matrix-react-sdk/pull/5769)
|
||||
|
||||
Changes in [3.17.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.17.0) (2021-03-29)
|
||||
=====================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.17.0-rc.1...v3.17.0)
|
||||
|
||||
* Upgrade to JS SDK 9.10.0
|
||||
* [Release] Tweak cross-signing copy
|
||||
[\#5808](https://github.com/matrix-org/matrix-react-sdk/pull/5808)
|
||||
* [Release] Fix crash on login when using social login
|
||||
[\#5809](https://github.com/matrix-org/matrix-react-sdk/pull/5809)
|
||||
* [Release] Fix edge case with redaction grouper messing up continuations
|
||||
[\#5799](https://github.com/matrix-org/matrix-react-sdk/pull/5799)
|
||||
|
||||
Changes in [3.17.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.17.0-rc.1) (2021-03-25)
|
||||
===============================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.16.0...v3.17.0-rc.1)
|
||||
|
||||
* Upgrade to JS SDK 9.10.0-rc.1
|
||||
* Translations update from Weblate
|
||||
[\#5788](https://github.com/matrix-org/matrix-react-sdk/pull/5788)
|
||||
* Track next event [tile] over group boundaries
|
||||
[\#5784](https://github.com/matrix-org/matrix-react-sdk/pull/5784)
|
||||
* Fixing the minor UI issues in the email discovery
|
||||
[\#5780](https://github.com/matrix-org/matrix-react-sdk/pull/5780)
|
||||
* Don't overwrite callback with undefined if no customization provided
|
||||
[\#5783](https://github.com/matrix-org/matrix-react-sdk/pull/5783)
|
||||
* Fix redaction event list summaries breaking sender profiles
|
||||
[\#5781](https://github.com/matrix-org/matrix-react-sdk/pull/5781)
|
||||
* Fix CIDER formatting buttons on Safari
|
||||
[\#5782](https://github.com/matrix-org/matrix-react-sdk/pull/5782)
|
||||
* Improve discovery of rooms in a space
|
||||
[\#5776](https://github.com/matrix-org/matrix-react-sdk/pull/5776)
|
||||
* Spaces improve creation journeys
|
||||
[\#5777](https://github.com/matrix-org/matrix-react-sdk/pull/5777)
|
||||
* Make buttons in verify dialog respect the system font
|
||||
[\#5778](https://github.com/matrix-org/matrix-react-sdk/pull/5778)
|
||||
* Collapse redactions into an event list summary
|
||||
[\#5728](https://github.com/matrix-org/matrix-react-sdk/pull/5728)
|
||||
* Added invite option to room's context menu
|
||||
[\#5648](https://github.com/matrix-org/matrix-react-sdk/pull/5648)
|
||||
* Add an optional config option to make the welcome page the login page
|
||||
[\#5658](https://github.com/matrix-org/matrix-react-sdk/pull/5658)
|
||||
* Fix username showing instead of display name in Jitsi widgets
|
||||
[\#5770](https://github.com/matrix-org/matrix-react-sdk/pull/5770)
|
||||
* Convert a bunch more js-sdk imports to absolute paths
|
||||
[\#5774](https://github.com/matrix-org/matrix-react-sdk/pull/5774)
|
||||
* Remove forgotten rooms from the room list once forgotten
|
||||
[\#5775](https://github.com/matrix-org/matrix-react-sdk/pull/5775)
|
||||
* Log error when failing to list usermedia devices
|
||||
[\#5771](https://github.com/matrix-org/matrix-react-sdk/pull/5771)
|
||||
* Fix weird timeline jumps
|
||||
[\#5772](https://github.com/matrix-org/matrix-react-sdk/pull/5772)
|
||||
* Replace type declaration in Registration.tsx
|
||||
[\#5773](https://github.com/matrix-org/matrix-react-sdk/pull/5773)
|
||||
* Add possibility to delay rageshake persistence in app startup
|
||||
[\#5767](https://github.com/matrix-org/matrix-react-sdk/pull/5767)
|
||||
* Fix left panel resizing and lower min-width improving flexibility
|
||||
[\#5764](https://github.com/matrix-org/matrix-react-sdk/pull/5764)
|
||||
* Work around more cases where a rageshake server might not be present
|
||||
[\#5766](https://github.com/matrix-org/matrix-react-sdk/pull/5766)
|
||||
* Iterate space panel visually and functionally
|
||||
[\#5761](https://github.com/matrix-org/matrix-react-sdk/pull/5761)
|
||||
* Make some dispatches async
|
||||
[\#5765](https://github.com/matrix-org/matrix-react-sdk/pull/5765)
|
||||
* fix: make room directory correct when using a homeserver with explicit port
|
||||
[\#5762](https://github.com/matrix-org/matrix-react-sdk/pull/5762)
|
||||
* Hangup all calls on logout
|
||||
[\#5756](https://github.com/matrix-org/matrix-react-sdk/pull/5756)
|
||||
* Remove now-unused assets and CSS from CompleteSecurity step
|
||||
[\#5757](https://github.com/matrix-org/matrix-react-sdk/pull/5757)
|
||||
* Add details and summary to allowed HTML tags
|
||||
[\#5760](https://github.com/matrix-org/matrix-react-sdk/pull/5760)
|
||||
* Support a media handling customisation endpoint
|
||||
[\#5714](https://github.com/matrix-org/matrix-react-sdk/pull/5714)
|
||||
* Edit button on View Source dialog that takes you to devtools ->
|
||||
SendCustomEvent
|
||||
[\#5718](https://github.com/matrix-org/matrix-react-sdk/pull/5718)
|
||||
* Show room alias in plain/formatted body
|
||||
[\#5748](https://github.com/matrix-org/matrix-react-sdk/pull/5748)
|
||||
* Allow pills on the beginning of a part string
|
||||
[\#5754](https://github.com/matrix-org/matrix-react-sdk/pull/5754)
|
||||
* [SK-3] Decorate easy components with replaceableComponent
|
||||
[\#5734](https://github.com/matrix-org/matrix-react-sdk/pull/5734)
|
||||
* Use fsync in reskindex to ensure file is written to disk
|
||||
[\#5753](https://github.com/matrix-org/matrix-react-sdk/pull/5753)
|
||||
* Remove unused common CSS classes
|
||||
[\#5752](https://github.com/matrix-org/matrix-react-sdk/pull/5752)
|
||||
* Rebuild space previews with new designs
|
||||
[\#5751](https://github.com/matrix-org/matrix-react-sdk/pull/5751)
|
||||
* Rework cross-signing login flow
|
||||
[\#5727](https://github.com/matrix-org/matrix-react-sdk/pull/5727)
|
||||
* Change read receipt drift to be non-fractional
|
||||
[\#5745](https://github.com/matrix-org/matrix-react-sdk/pull/5745)
|
||||
|
||||
Changes in [3.16.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.16.0) (2021-03-15)
|
||||
=====================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.16.0-rc.2...v3.16.0)
|
||||
|
|
@ -127,11 +312,12 @@ Changes in [3.15.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/
|
|||
|
||||
## Security notice
|
||||
|
||||
matrix-react-sdk 3.15.0 fixes a low severity issue (CVE-2021-21320) where the
|
||||
user content sandbox can be abused to trick users into opening unexpected
|
||||
documents. The content is opened with a `blob` origin that cannot access Matrix
|
||||
user data, so messages and secrets are not at risk. Thanks to @keerok for
|
||||
responsibly disclosing this via Matrix's Security Disclosure Policy.
|
||||
matrix-react-sdk 3.15.0 fixes a moderate severity issue (CVE-2021-21320) where
|
||||
the user content sandbox can be abused to trick users into opening unexpected
|
||||
documents after several user interactions. The content can be opened with a
|
||||
`blob` origin from the Matrix client, so it is possible for a malicious document
|
||||
to access user messages and secrets. Thanks to @keerok for responsibly
|
||||
disclosing this via Matrix's Security Disclosure Policy.
|
||||
|
||||
## All changes
|
||||
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@ caret nodes (more on that later).
|
|||
For these reasons it doesn't use `innerText`, `textContent` or anything similar.
|
||||
The model addresses any content in the editor within as an offset within this string.
|
||||
The caret position is thus also converted from a position in the DOM tree
|
||||
to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.js`.
|
||||
to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.ts`.
|
||||
|
||||
Once the content string and caret offset is calculated, it is passed to the `update()`
|
||||
method of the model. The model first calculates the same content string of its current parts,
|
||||
basically just concatenating their text. It then looks for differences between
|
||||
the current and the new content string. The diffing algorithm is very basic,
|
||||
and assumes there is only one change around the caret offset,
|
||||
so this should be very inexpensive. See `diff.js` for details.
|
||||
so this should be very inexpensive. See `diff.ts` for details.
|
||||
|
||||
The result of the diffing is the strings that were added and/or removed from
|
||||
the current content. These differences are then applied to the parts,
|
||||
|
|
@ -51,7 +51,7 @@ which relate poorly to text input or changes, and don't need the `beforeinput` e
|
|||
which isn't broadly supported yet.
|
||||
|
||||
Once the parts of the model are updated, the DOM of the editor is then reconciled
|
||||
with the new model state, see `renderModel` in `render.js` for this.
|
||||
with the new model state, see `renderModel` in `render.ts` for this.
|
||||
If the model didn't reject the input and didn't make any additional changes,
|
||||
this won't make any changes to the DOM at all, and should thus be fairly efficient.
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ It's so complicated it needs its own README.
|
|||
|
||||
Legend:
|
||||
* Orange = External event.
|
||||
* Purple = Deterministic flow.
|
||||
* Purple = Deterministic flow.
|
||||
* Green = Algorithm definition.
|
||||
* Red = Exit condition/point.
|
||||
* Blue = Process definition.
|
||||
|
|
@ -24,8 +24,8 @@ algorithm to call, instead of having all the logic in the room list store itself
|
|||
|
||||
|
||||
Tag sorting is effectively the comparator supplied to the list algorithm. This gives the list algorithm
|
||||
the power to decide when and how to apply the tag sorting, if at all. For example, the importance algorithm,
|
||||
later described in this document, heavily uses the list ordering behaviour to break the tag into categories.
|
||||
the power to decide when and how to apply the tag sorting, if at all. For example, the importance algorithm,
|
||||
later described in this document, heavily uses the list ordering behaviour to break the tag into categories.
|
||||
Each category then gets sorted by the appropriate tag sorting algorithm.
|
||||
|
||||
### Tag sorting algorithm: Alphabetical
|
||||
|
|
@ -36,7 +36,7 @@ useful.
|
|||
|
||||
### Tag sorting algorithm: Manual
|
||||
|
||||
Manual sorting makes use of the `order` property present on all tags for a room, per the
|
||||
Manual sorting makes use of the `order` property present on all tags for a room, per the
|
||||
[Matrix specification](https://matrix.org/docs/spec/client_server/r0.6.0#room-tagging). Smaller values
|
||||
of `order` cause rooms to appear closer to the top of the list.
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ relative (perceived) importance to the user:
|
|||
set to 'All Messages'.
|
||||
* **Bold**: The room has unread messages waiting for the user. Essentially this is a grey room without
|
||||
a badge/notification count (or 'Mentions Only'/'Muted').
|
||||
* **Idle**: No useful (see definition of useful above) activity has occurred in the room since the user
|
||||
* **Idle**: No useful (see definition of useful above) activity has occurred in the room since the user
|
||||
last read it.
|
||||
|
||||
Conveniently, each tag gets ordered by those categories as presented: red rooms appear above grey, grey
|
||||
|
|
@ -82,7 +82,7 @@ above bold, etc.
|
|||
|
||||
Once the algorithm has determined which rooms belong in which categories, the tag sorting algorithm
|
||||
gets applied to each category in a sub-list fashion. This should result in the red rooms (for example)
|
||||
being sorted alphabetically amongst each other as well as the grey rooms sorted amongst each other, but
|
||||
being sorted alphabetically amongst each other as well as the grey rooms sorted amongst each other, but
|
||||
collectively the tag will be sorted into categories with red being at the top.
|
||||
|
||||
## Sticky rooms
|
||||
|
|
@ -103,48 +103,62 @@ receive another notification which causes the room to move into the topmost posi
|
|||
above the sticky room will move underneath to allow for the new room to take the top slot, maintaining
|
||||
the sticky room's position.
|
||||
|
||||
Though only applicable to the importance algorithm, the sticky room is not aware of category boundaries
|
||||
and thus the user can see a shift in what kinds of rooms move around their selection. An example would
|
||||
be the user having 4 red rooms, the user selecting the third room (leaving 2 above it), and then having
|
||||
the rooms above it read on another device. This would result in 1 red room and 1 other kind of room
|
||||
Though only applicable to the importance algorithm, the sticky room is not aware of category boundaries
|
||||
and thus the user can see a shift in what kinds of rooms move around their selection. An example would
|
||||
be the user having 4 red rooms, the user selecting the third room (leaving 2 above it), and then having
|
||||
the rooms above it read on another device. This would result in 1 red room and 1 other kind of room
|
||||
above the sticky room as it will try to maintain 2 rooms above the sticky room.
|
||||
|
||||
An exception for the sticky room placement is when there's suddenly not enough rooms to maintain the placement
|
||||
exactly. This typically happens if the user selects a room and leaves enough rooms where it cannot maintain
|
||||
the N required rooms above the sticky room. In this case, the sticky room will simply decrease N as needed.
|
||||
The N value will never increase while selection remains unchanged: adding a bunch of rooms after having
|
||||
The N value will never increase while selection remains unchanged: adding a bunch of rooms after having
|
||||
put the sticky room in a position where it's had to decrease N will not increase N.
|
||||
|
||||
## Responsibilities of the store
|
||||
|
||||
The store is responsible for the ordering, upkeep, and tracking of all rooms. The room list component simply gets
|
||||
an object containing the tags it needs to worry about and the rooms within. The room list component will
|
||||
decide which tags need rendering (as it commonly filters out empty tags in most cases), and will deal with
|
||||
The store is responsible for the ordering, upkeep, and tracking of all rooms. The room list component simply gets
|
||||
an object containing the tags it needs to worry about and the rooms within. The room list component will
|
||||
decide which tags need rendering (as it commonly filters out empty tags in most cases), and will deal with
|
||||
all kinds of filtering.
|
||||
|
||||
## Filtering
|
||||
|
||||
Filters are provided to the store as condition classes, which are then passed along to the algorithm
|
||||
implementations. The implementations then get to decide how to actually filter the rooms, however in
|
||||
practice the base `Algorithm` class deals with the filtering in a more optimized/generic way.
|
||||
Filters are provided to the store as condition classes and have two major kinds: Prefilters and Runtime.
|
||||
|
||||
The results of filters get cached to avoid needlessly iterating over potentially thousands of rooms,
|
||||
as the old room list store does. When a filter condition changes, it emits an update which (in this
|
||||
case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a
|
||||
Prefilters flush out rooms which shouldn't appear to the algorithm implementations. Typically this is
|
||||
due to some higher order room list filtering (such as spaces or tags) deliberately exposing a subset of
|
||||
rooms to the user. The algorithm implementations will not see a room being prefiltered out.
|
||||
|
||||
Runtime filters are used for more dynamic filtering, such as the user filtering by room name. These
|
||||
filters are passed along to the algorithm implementations where those implementations decide how and
|
||||
when to apply the filter. In practice, the base `Algorithm` class ends up doing the heavy lifting for
|
||||
optimization reasons.
|
||||
|
||||
The results of runtime filters get cached to avoid needlessly iterating over potentially thousands of
|
||||
rooms, as the old room list store does. When a filter condition changes, it emits an update which (in this
|
||||
case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a
|
||||
minor subset where possible to avoid over-iterating rooms.
|
||||
|
||||
All filter conditions are considered "stable" by the consumers, meaning that the consumer does not
|
||||
expect a change in the condition unless the condition says it has changed. This is intentional to
|
||||
maintain the caching behaviour described above.
|
||||
|
||||
One might ask why we don't just use prefilter conditions for everything, and the answer is one of slight
|
||||
subtlety: in the cases of prefilters we are knowingly exposing the user to a workspace-style UX where
|
||||
room notifications are self-contained within that workspace. Runtime filters tend to not want to affect
|
||||
visible notification counts (as it doesn't want the room header to suddenly be confusing to the user as
|
||||
they type), and occasionally UX like "found 2/12 rooms" is desirable. If prefiltering were used instead,
|
||||
the notification counts would vary while the user was typing and "found 2/12" UX would not be possible.
|
||||
|
||||
## Class breakdowns
|
||||
|
||||
The `RoomListStore` is the major coordinator of various algorithm implementations, which take care
|
||||
of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` class is responsible
|
||||
for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: tags get
|
||||
defined on rooms and are not defined as a collection of rooms (unlike how they are presented to the
|
||||
user). Various list-specific utilities are also included, though they are expected to move somewhere
|
||||
more general when needed. For example, the `membership` utilities could easily be moved elsewhere
|
||||
The `RoomListStore` is the major coordinator of various algorithm implementations, which take care
|
||||
of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` class is responsible
|
||||
for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: tags get
|
||||
defined on rooms and are not defined as a collection of rooms (unlike how they are presented to the
|
||||
user). Various list-specific utilities are also included, though they are expected to move somewhere
|
||||
more general when needed. For example, the `membership` utilities could easily be moved elsewhere
|
||||
as needed.
|
||||
|
||||
The various bits throughout the room list store should also have jsdoc of some kind to help describe
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "matrix-react-sdk",
|
||||
"version": "3.16.0",
|
||||
"version": "3.18.0",
|
||||
"description": "SDK for matrix.org using React",
|
||||
"author": "matrix.org",
|
||||
"repository": {
|
||||
|
|
@ -83,6 +83,7 @@
|
|||
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
|
||||
"matrix-widget-api": "^0.1.0-beta.13",
|
||||
"minimist": "^1.2.5",
|
||||
"opus-recorder": "^8.0.3",
|
||||
"pako": "^2.0.3",
|
||||
"parse5": "^6.0.1",
|
||||
"png-chunks-extract": "^1.0.0",
|
||||
|
|
@ -101,7 +102,6 @@
|
|||
"tar-js": "^0.3.0",
|
||||
"text-encoding-utf-8": "^1.0.2",
|
||||
"url": "^0.11.0",
|
||||
"velocity-animate": "^2.0.6",
|
||||
"what-input": "^5.2.10",
|
||||
"zxcvbn": "^4.4.2"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -28,6 +28,16 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e
|
|||
|
||||
:root {
|
||||
font-size: 10px;
|
||||
|
||||
--transition-short: .1s;
|
||||
--transition-standard: .3s;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
:root {
|
||||
--transition-short: 0;
|
||||
--transition-standard: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -303,7 +313,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
}
|
||||
|
||||
.mx_Dialog_lightbox .mx_Dialog_background {
|
||||
opacity: 0.85;
|
||||
opacity: $lightbox-background-bg-opacity;
|
||||
background-color: $lightbox-background-bg-color;
|
||||
}
|
||||
|
||||
|
|
@ -315,6 +325,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
pointer-events: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_Dialog_header {
|
||||
|
|
|
|||
|
|
@ -111,17 +111,19 @@
|
|||
@import "./views/elements/_AddressSelector.scss";
|
||||
@import "./views/elements/_AddressTile.scss";
|
||||
@import "./views/elements/_DesktopBuildsNotice.scss";
|
||||
@import "./views/elements/_DirectorySearchBox.scss";
|
||||
@import "./views/elements/_DesktopCapturerSourcePicker.scss";
|
||||
@import "./views/elements/_DirectorySearchBox.scss";
|
||||
@import "./views/elements/_Dropdown.scss";
|
||||
@import "./views/elements/_EditableItemList.scss";
|
||||
@import "./views/elements/_ErrorBoundary.scss";
|
||||
@import "./views/elements/_EventListSummary.scss";
|
||||
@import "./views/elements/_FacePile.scss";
|
||||
@import "./views/elements/_Field.scss";
|
||||
@import "./views/elements/_FormButton.scss";
|
||||
@import "./views/elements/_ImageView.scss";
|
||||
@import "./views/elements/_InfoTooltip.scss";
|
||||
@import "./views/elements/_InlineSpinner.scss";
|
||||
@import "./views/elements/_InviteReason.scss";
|
||||
@import "./views/elements/_ManageIntegsButton.scss";
|
||||
@import "./views/elements/_MiniAvatarUploader.scss";
|
||||
@import "./views/elements/_PowerSelector.scss";
|
||||
|
|
@ -211,13 +213,13 @@
|
|||
@import "./views/rooms/_SendMessageComposer.scss";
|
||||
@import "./views/rooms/_Stickers.scss";
|
||||
@import "./views/rooms/_TopUnreadMessagesBar.scss";
|
||||
@import "./views/rooms/_VoiceRecordComposerTile.scss";
|
||||
@import "./views/rooms/_WhoIsTypingTile.scss";
|
||||
@import "./views/settings/_AvatarSetting.scss";
|
||||
@import "./views/settings/_CrossSigningPanel.scss";
|
||||
@import "./views/settings/_DevicesPanel.scss";
|
||||
@import "./views/settings/_E2eAdvancedPanel.scss";
|
||||
@import "./views/settings/_EmailAddresses.scss";
|
||||
@import "./views/settings/_SpellCheckLanguages.scss";
|
||||
@import "./views/settings/_IntegrationManager.scss";
|
||||
@import "./views/settings/_Notifications.scss";
|
||||
@import "./views/settings/_PhoneNumbers.scss";
|
||||
|
|
@ -225,6 +227,7 @@
|
|||
@import "./views/settings/_SecureBackupPanel.scss";
|
||||
@import "./views/settings/_SetIdServer.scss";
|
||||
@import "./views/settings/_SetIntegrationManager.scss";
|
||||
@import "./views/settings/_SpellCheckLanguages.scss";
|
||||
@import "./views/settings/_UpdateCheckButton.scss";
|
||||
@import "./views/settings/tabs/_SettingsTab.scss";
|
||||
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
|
||||
|
|
@ -245,8 +248,10 @@
|
|||
@import "./views/toasts/_AnalyticsToast.scss";
|
||||
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
|
||||
@import "./views/verification/_VerificationShowSas.scss";
|
||||
@import "./views/voice_messages/_Waveform.scss";
|
||||
@import "./views/voip/_CallContainer.scss";
|
||||
@import "./views/voip/_CallView.scss";
|
||||
@import "./views/voip/_CallViewForRoom.scss";
|
||||
@import "./views/voip/_DialPad.scss";
|
||||
@import "./views/voip/_DialPadContextMenu.scss";
|
||||
@import "./views/voip/_DialPadModal.scss";
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_FilePanel .mx_RoomView_messageListWrapper {
|
||||
margin-right: 20px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -130,6 +130,10 @@ $roomListCollapsedWidth: 68px;
|
|||
mask-repeat: no-repeat;
|
||||
background: $secondary-fg-color;
|
||||
}
|
||||
|
||||
&.mx_LeftPanel_exploreButton_space::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ limitations under the License.
|
|||
// keep border thickness consistent to prevent movement
|
||||
border: 1px solid transparent;
|
||||
height: 28px;
|
||||
padding: 2px;
|
||||
padding: 1px;
|
||||
|
||||
// Create a flexbox for the icons (easier to manage)
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -262,12 +262,6 @@ hr.mx_RoomView_myReadMarker {
|
|||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.mx_RoomView_inCall .mx_RoomView_statusAreaBox {
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_RoomView_voipChevron {
|
||||
position: absolute;
|
||||
bottom: -11px;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,5 @@ limitations under the License.
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ $activeBorderColor: $secondary-fg-color;
|
|||
|
||||
.mx_SpacePanel_spaceTreeWrapper {
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
padding: 8px 8px 16px 0;
|
||||
}
|
||||
|
||||
.mx_SpacePanel_toggleCollapse {
|
||||
|
|
@ -59,11 +59,10 @@ $activeBorderColor: $secondary-fg-color;
|
|||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.mx_AutoHideScrollbar {
|
||||
padding: 16px 0;
|
||||
> .mx_SpaceItem {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceButton_toggleCollapse {
|
||||
|
|
@ -99,7 +98,6 @@ $activeBorderColor: $secondary-fg-color;
|
|||
|
||||
.mx_SpaceButton {
|
||||
border-radius: 8px;
|
||||
margin-bottom: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 4px 4px 0;
|
||||
|
|
@ -147,9 +145,6 @@ $activeBorderColor: $secondary-fg-color;
|
|||
|
||||
.mx_SpaceButton_toggleCollapse {
|
||||
width: $gutterSize;
|
||||
// negative margin to place it correctly even with the complex
|
||||
// 4px selection border each space button has when active
|
||||
margin-right: -4px;
|
||||
height: 20px;
|
||||
mask-position: center;
|
||||
mask-size: 20px;
|
||||
|
|
@ -280,15 +275,17 @@ $activeBorderColor: $secondary-fg-color;
|
|||
.mx_SpaceButton:hover,
|
||||
.mx_SpaceButton:focus-within,
|
||||
.mx_SpaceButton_hasMenuOpen {
|
||||
// Hide the badge container on hover because it'll be a menu button
|
||||
.mx_SpacePanel_badgeContainer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
&:not(.mx_SpaceButton_home) {
|
||||
// Hide the badge container on hover because it'll be a menu button
|
||||
.mx_SpacePanel_badgeContainer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_SpaceButton_menuButton {
|
||||
display: block;
|
||||
.mx_SpaceButton_menuButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -334,20 +331,20 @@ $activeBorderColor: $secondary-fg-color;
|
|||
mask-image: url('$(res)/img/element-icons/leave.svg');
|
||||
}
|
||||
|
||||
.mx_SpacePanel_iconHome::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
|
||||
}
|
||||
|
||||
.mx_SpacePanel_iconMembers::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/members.svg');
|
||||
}
|
||||
|
||||
.mx_SpacePanel_iconPlus::before {
|
||||
mask-image: url('$(res)/img/element-icons/plus.svg');
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
|
||||
}
|
||||
|
||||
.mx_SpacePanel_iconHash::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
|
||||
}
|
||||
|
||||
.mx_SpacePanel_iconExplore::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@ limitations under the License.
|
|||
display: flex;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
margin-right: 16px;
|
||||
margin-right: 12px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
|
|
@ -47,6 +48,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
> div {
|
||||
font-weight: 400;
|
||||
color: $secondary-fg-color;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
|
@ -55,38 +57,71 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Dialog_content {
|
||||
// TODO fix scrollbar
|
||||
//display: flex;
|
||||
//flex-direction: column;
|
||||
//height: calc(100% - 80px);
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_SearchBox {
|
||||
margin: 24px 0 28px;
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_noResults {
|
||||
text-align: center;
|
||||
|
||||
> div {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $secondary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_listHeader {
|
||||
display: flex;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
min-height: 32px;
|
||||
align-items: center;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $primary-fg-color;
|
||||
|
||||
.mx_FormButton {
|
||||
margin-bottom: 8px;
|
||||
.mx_AccessibleButton {
|
||||
padding: 2px 8px;
|
||||
font-weight: normal;
|
||||
|
||||
& + .mx_AccessibleButton {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
margin: auto 0 0 auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_error {
|
||||
position: relative;
|
||||
font-weight: $font-semi-bold;
|
||||
color: $notice-primary-color;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
margin: 20px auto 12px;
|
||||
padding-left: 24px;
|
||||
width: max-content;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 0;
|
||||
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_list {
|
||||
margin-top: 8px;
|
||||
margin-top: 16px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
.mx_SpaceRoomDirectory_roomCount {
|
||||
> h3 {
|
||||
|
|
@ -106,115 +141,141 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_subspace {
|
||||
margin-top: 8px;
|
||||
|
||||
.mx_SpaceRoomDirectory_subspace_info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
color: $secondary-fg-color;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
margin-right: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_actions {
|
||||
text-align: right;
|
||||
height: min-content;
|
||||
margin-left: auto;
|
||||
margin-right: 16px;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_subspace_children {
|
||||
margin-left: 12px;
|
||||
border-left: 2px solid $space-button-outline-color;
|
||||
padding-left: 24px;
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $space-button-outline-color;
|
||||
margin: 8px 0 16px;
|
||||
display: flex;
|
||||
min-height: 76px;
|
||||
box-sizing: border-box;
|
||||
.mx_SpaceRoomDirectory_subspace_toggle {
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 10px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 4px;
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
&.mx_AccessibleButton:hover {
|
||||
background-color: rgba(141, 151, 165, 0.1);
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $tertiary-fg-color;
|
||||
mask-size: 16px;
|
||||
transform: rotate(270deg);
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
}
|
||||
|
||||
&.mx_SpaceRoomDirectory_subspace_toggle_shown::before {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_subspace_children {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile {
|
||||
position: relative;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
min-height: 56px;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 20px auto max-content;
|
||||
grid-column-gap: 8px;
|
||||
grid-row-gap: 6px;
|
||||
align-items: center;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
margin-right: 16px;
|
||||
margin-top: 6px;
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile_name {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
|
||||
.mx_InfoTooltip {
|
||||
display: inline;
|
||||
margin-left: 12px;
|
||||
color: $tertiary-fg-color;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
|
||||
.mx_InfoTooltip_icon {
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
vertical-align: text-top;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile_info {
|
||||
display: inline-block;
|
||||
font-size: $font-15px;
|
||||
flex-grow: 1;
|
||||
height: min-content;
|
||||
margin: auto 0;
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile_name {
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-18px;
|
||||
}
|
||||
.mx_SpaceRoomDirectory_roomTile_topic {
|
||||
line-height: $font-24px;
|
||||
color: $secondary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile_memberCount {
|
||||
position: relative;
|
||||
margin: auto 0 auto 24px;
|
||||
padding: 0 0 0 28px;
|
||||
line-height: $font-24px;
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
background-color: $secondary-fg-color;
|
||||
mask-image: url('$(res)/img/element-icons/community-members.svg');
|
||||
}
|
||||
font-size: $font-14px;
|
||||
line-height: $font-18px;
|
||||
color: $secondary-fg-color;
|
||||
grid-row: 2;
|
||||
grid-column: 1/3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_actions {
|
||||
width: 180px;
|
||||
text-align: right;
|
||||
margin-left: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 20px;
|
||||
grid-column: 3;
|
||||
grid-row: 1/3;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
vertical-align: middle;
|
||||
|
||||
& + .mx_AccessibleButton {
|
||||
margin-left: 24px;
|
||||
}
|
||||
padding: 8px 18px;
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile,
|
||||
.mx_SpaceRoomDirectory_subspace_children {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
left: 6px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -226,4 +287,17 @@ limitations under the License.
|
|||
color: $secondary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
> hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: rgba(141, 151, 165, 0.2);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_createRoom {
|
||||
display: block;
|
||||
margin: 16px auto 0;
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,51 @@ limitations under the License.
|
|||
|
||||
$SpaceRoomViewInnerWidth: 428px;
|
||||
|
||||
@define-mixin SpacePillButton {
|
||||
position: relative;
|
||||
padding: 16px 32px 16px 72px;
|
||||
width: 432px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $input-border-color;
|
||||
font-size: $font-15px;
|
||||
margin: 20px 0;
|
||||
|
||||
> h3 {
|
||||
font-weight: $font-semi-bold;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: $secondary-fg-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 24px;
|
||||
left: 20px;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 24px;
|
||||
background-color: $tertiary-fg-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $accent-color;
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView {
|
||||
.mx_MainSplit > div:first-child {
|
||||
padding: 80px 60px;
|
||||
|
|
@ -44,7 +89,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
width: $SpaceRoomViewInnerWidth;
|
||||
text-align: right; // button alignment right
|
||||
|
||||
.mx_FormButton {
|
||||
.mx_AccessibleButton_hasKind {
|
||||
padding: 8px 22px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
|
@ -77,7 +122,6 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
max-width: 480px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 2px 15px 30px $dialog-shadow-color;
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: 8px;
|
||||
|
||||
.mx_SpaceRoomView_preview_inviter {
|
||||
|
|
@ -109,53 +153,6 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
margin: 20px 0 !important; // override default margin from above
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_preview_info {
|
||||
color: $tertiary-fg-color;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
margin: 20px 0;
|
||||
|
||||
.mx_SpaceRoomView_preview_info_public,
|
||||
.mx_SpaceRoomView_preview_info_private {
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $tertiary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_preview_info_public::before {
|
||||
mask-size: 12px;
|
||||
mask-image: url("$(res)/img/globe.svg");
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_preview_info_private::before {
|
||||
mask-size: 14px;
|
||||
mask-image: url("$(res)/img/element-icons/lock.svg");
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
color: inherit;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
|
||||
&::before {
|
||||
content: "·"; // visual separator
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_preview_topic {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-22px;
|
||||
|
|
@ -209,36 +206,60 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_landing_memberCount {
|
||||
.mx_SpaceRoomView_landing_info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_SpaceRoomView_info {
|
||||
display: inline-block;
|
||||
margin: 0 auto 0 0;
|
||||
}
|
||||
|
||||
.mx_FacePile {
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
|
||||
.mx_FacePile_faces {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_landing_inviteButton {
|
||||
position: relative;
|
||||
margin-left: 24px;
|
||||
padding: 0 0 0 28px;
|
||||
line-height: $font-24px;
|
||||
vertical-align: text-bottom;
|
||||
padding-left: 40px;
|
||||
height: min-content;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
left: 8px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #ffffff; // white icon fill
|
||||
mask-position: center;
|
||||
mask-size: 16px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
background-color: $accent-color;
|
||||
mask-image: url('$(res)/img/element-icons/community-members.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_landing_topic {
|
||||
font-size: $font-15px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
> hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_landing_adminButtons {
|
||||
margin-top: 32px;
|
||||
margin-top: 24px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
position: relative;
|
||||
|
|
@ -247,9 +268,9 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
box-sizing: border-box;
|
||||
padding: 72px 16px 0;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $space-button-outline-color;
|
||||
border: 1px solid $input-border-color;
|
||||
margin-right: 28px;
|
||||
margin-bottom: 28px;
|
||||
margin-bottom: 20px;
|
||||
font-size: $font-14px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
|
|
@ -279,16 +300,6 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
background: #ffffff; // white icon fill
|
||||
}
|
||||
|
||||
&.mx_SpaceRoomView_landing_inviteButton {
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_SpaceRoomView_landing_addButton {
|
||||
&::before {
|
||||
background-color: #ac3ba8;
|
||||
|
|
@ -321,74 +332,14 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_list {
|
||||
max-width: 600px;
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile_actions {
|
||||
display: none;
|
||||
}
|
||||
.mx_SearchBox {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_privateScope {
|
||||
.mx_RadioButton {
|
||||
width: $SpaceRoomViewInnerWidth;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $space-button-outline-color;
|
||||
padding: 16px 16px 16px 72px;
|
||||
margin-top: 36px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
> div:first-of-type {
|
||||
// hide radio dot
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RadioButton_content {
|
||||
margin: 0;
|
||||
|
||||
> h3 {
|
||||
margin: 0 0 4px;
|
||||
font-size: $font-15px;
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-18px;
|
||||
}
|
||||
|
||||
> div {
|
||||
color: $secondary-fg-color;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
top: 24px;
|
||||
left: 20px;
|
||||
background-color: $secondary-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton_checked {
|
||||
border-color: $accent-color;
|
||||
|
||||
.mx_RadioButton_content {
|
||||
> div {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
.mx_AccessibleButton {
|
||||
@mixin SpacePillButton;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_privateScope_justMeButton::before {
|
||||
|
|
@ -435,3 +386,50 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_info {
|
||||
color: $secondary-fg-color;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
margin: 20px 0;
|
||||
|
||||
.mx_SpaceRoomView_info_public,
|
||||
.mx_SpaceRoomView_info_private {
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $tertiary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_info_public::before {
|
||||
mask-size: 12px;
|
||||
mask-image: url("$(res)/img/globe.svg");
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_info_private::before {
|
||||
mask-size: 14px;
|
||||
mask-image: url("$(res)/img/element-icons/lock.svg");
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
color: inherit;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
|
||||
&::before {
|
||||
content: "·"; // visual separator
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2019-2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -158,6 +158,10 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_Toast_detail {
|
||||
color: $secondary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Toast_deviceID {
|
||||
font-size: $font-10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,6 +117,32 @@ limitations under the License.
|
|||
.mx_UserMenu_headerButtons {
|
||||
// No special styles: the rest of the layout happens to make it work.
|
||||
}
|
||||
|
||||
.mx_UserMenu_dnd {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $muted-fg-color;
|
||||
}
|
||||
|
||||
&.mx_UserMenu_dnd_noisy::before {
|
||||
mask-image: url('$(res)/img/element-icons/notifications.svg');
|
||||
}
|
||||
|
||||
&.mx_UserMenu_dnd_muted::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_UserMenu_minimized {
|
||||
|
|
|
|||
|
|
@ -14,14 +14,6 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_ViewSource_label_left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mx_ViewSource_label_right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mx_ViewSource_separator {
|
||||
clear: both;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
|
|
|||
|
|
@ -28,22 +28,23 @@ limitations under the License.
|
|||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
min-height: 0;
|
||||
height: 80vh;
|
||||
|
||||
.mx_Dialog_title {
|
||||
display: flex;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
display: inline-flex;
|
||||
margin: 5px 16px 5px 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 8px;
|
||||
margin: 0;
|
||||
vertical-align: unset;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar {
|
||||
display: inline-flex;
|
||||
margin: 5px 16px 5px 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> div {
|
||||
> h1 {
|
||||
font-weight: $font-semi-bold;
|
||||
|
|
@ -100,7 +101,9 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_SearchBox {
|
||||
margin: 0;
|
||||
// To match the space around the title
|
||||
margin: 0 0 15px 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog_errorText {
|
||||
|
|
@ -112,13 +115,18 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog_content {
|
||||
flex-grow: 1;
|
||||
|
||||
.mx_AddExistingToSpaceDialog_noResults {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog_section {
|
||||
margin-top: 24px;
|
||||
&:not(:first-child) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
margin: 0;
|
||||
|
|
@ -140,12 +148,14 @@ limitations under the License.
|
|||
font-size: $font-15px;
|
||||
line-height: 30px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_FormButton {
|
||||
min-width: 92px;
|
||||
font-weight: normal;
|
||||
box-sizing: border-box;
|
||||
.mx_Checkbox {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -162,8 +172,14 @@ limitations under the License.
|
|||
|
||||
> span {
|
||||
flex-grow: 1;
|
||||
font-size: $font-12px;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-15px;
|
||||
font-weight: $font-semi-bold;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
font-size: inherit;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> * {
|
||||
vertical-align: middle;
|
||||
|
|
@ -178,8 +194,4 @@ limitations under the License.
|
|||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FormButton {
|
||||
padding: 8px 22px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_FormButton {
|
||||
.mx_AccessibleButton_hasKind {
|
||||
padding: 8px 22px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/*
|
||||
Copyright 2018 New Vector Ltd
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2018, 2019, 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -15,6 +14,27 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_AccessSecretStorageDialog_reset {
|
||||
position: relative;
|
||||
padding-left: 24px; // 16px icon + 8px padding
|
||||
margin-top: 7px; // vertical alignment to buttons
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 0;
|
||||
top: 2px; // alignment
|
||||
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_reset_link {
|
||||
color: $warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_titleWithIcon::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
|
|
@ -26,6 +46,13 @@ limitations under the License.
|
|||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_resetBadge::before {
|
||||
// The image isn't capable of masking, so we use a background instead.
|
||||
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
||||
background-size: 24px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_secureBackupTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
/*
|
||||
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_FacePile {
|
||||
.mx_FacePile_faces {
|
||||
display: inline-flex;
|
||||
flex-direction: row-reverse;
|
||||
vertical-align: middle;
|
||||
|
||||
> .mx_FacePile_face + .mx_FacePile_face {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border: 1px solid $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_initial {
|
||||
margin: 1px; // to offset the border on the image
|
||||
}
|
||||
|
||||
.mx_FacePile_more {
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
background: $tertiary-fg-color;
|
||||
mask-position: center;
|
||||
mask-size: 20px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FacePile_summary {
|
||||
margin-left: 12px;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-24px;
|
||||
color: $tertiary-fg-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,139 +14,108 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
/* This has got to be the most fragile piece of CSS ever written.
|
||||
But empirically it works on Chrome/FF/Safari
|
||||
*/
|
||||
|
||||
.mx_ImageView {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_ImageView_lhs {
|
||||
order: 1;
|
||||
flex: 1 1 10%;
|
||||
min-width: 60px;
|
||||
// background-color: #080;
|
||||
// height: 20px;
|
||||
}
|
||||
|
||||
.mx_ImageView_content {
|
||||
order: 2;
|
||||
/* min-width hack needed for FF */
|
||||
min-width: 0px;
|
||||
height: 90%;
|
||||
flex: 15 15 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_ImageView_content img {
|
||||
max-width: 100%;
|
||||
/* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
|
||||
max-height: 100%;
|
||||
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
|
||||
object-fit: contain;
|
||||
/* background-image: url('$(res)/img/trans.png'); */
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.mx_ImageView_labelWrapper {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.mx_ImageView_label {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
min-height: 100%;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.mx_ImageView_image_wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_ImageView_image {
|
||||
pointer-events: all;
|
||||
max-width: 95%;
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.mx_ImageView_panel {
|
||||
width: 100%;
|
||||
height: 68px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_ImageView_info_wrapper {
|
||||
pointer-events: all;
|
||||
padding-left: 32px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: $lightbox-fg-color;
|
||||
}
|
||||
|
||||
.mx_ImageView_cancel {
|
||||
position: absolute;
|
||||
// hack for mx_Dialog having a top padding of 40px
|
||||
top: 40px;
|
||||
right: 0px;
|
||||
padding-top: 35px;
|
||||
padding-right: 35px;
|
||||
cursor: pointer;
|
||||
.mx_ImageView_info {
|
||||
padding-left: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_ImageView_rotateClockwise {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 70px;
|
||||
padding-top: 35px;
|
||||
cursor: pointer;
|
||||
.mx_ImageView_info_sender {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_ImageView_rotateCounterClockwise {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 105px;
|
||||
padding-top: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_ImageView_name {
|
||||
font-size: $font-18px;
|
||||
margin-bottom: 6px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.mx_ImageView_metadata {
|
||||
font-size: $font-15px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_ImageView_download {
|
||||
display: table;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 5px;
|
||||
background-color: $lightbox-bg-color;
|
||||
font-size: $font-14px;
|
||||
padding: 9px;
|
||||
border: 1px solid $lightbox-border-color;
|
||||
}
|
||||
|
||||
.mx_ImageView_size {
|
||||
font-size: $font-11px;
|
||||
}
|
||||
|
||||
.mx_ImageView_link {
|
||||
color: $lightbox-fg-color !important;
|
||||
text-decoration: none !important;
|
||||
.mx_ImageView_toolbar {
|
||||
padding-right: 16px;
|
||||
pointer-events: all;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_ImageView_button {
|
||||
font-size: $font-15px;
|
||||
opacity: 0.5;
|
||||
margin-top: 18px;
|
||||
cursor: pointer;
|
||||
margin-left: 24px;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
display: block;
|
||||
background-color: $icon-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ImageView_shim {
|
||||
height: 30px;
|
||||
.mx_ImageView_button_rotateCW::before {
|
||||
mask-image: url('$(res)/img/image-view/rotate-cw.svg');
|
||||
}
|
||||
|
||||
.mx_ImageView_rhs {
|
||||
order: 3;
|
||||
flex: 1 1 10%;
|
||||
min-width: 300px;
|
||||
// background-color: #800;
|
||||
// height: 20px;
|
||||
.mx_ImageView_button_rotateCCW::before {
|
||||
mask-image: url('$(res)/img/image-view/rotate-ccw.svg');
|
||||
}
|
||||
|
||||
.mx_ImageView_button_zoomOut::before {
|
||||
mask-image: url('$(res)/img/image-view/zoom-out.svg');
|
||||
}
|
||||
|
||||
.mx_ImageView_button_zoomIn::before {
|
||||
mask-image: url('$(res)/img/image-view/zoom-in.svg');
|
||||
}
|
||||
|
||||
.mx_ImageView_button_download::before {
|
||||
mask-image: url('$(res)/img/image-view/download.svg');
|
||||
}
|
||||
|
||||
.mx_ImageView_button_more::before {
|
||||
mask-image: url('$(res)/img/image-view/more.svg');
|
||||
}
|
||||
|
||||
.mx_ImageView_button_close {
|
||||
border-radius: 100%;
|
||||
background: #21262c; // same on all themes
|
||||
&::before {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
mask-image: url('$(res)/img/image-view/close.svg');
|
||||
mask-size: 40%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
/*
|
||||
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_InviteReason {
|
||||
position: relative;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.mx_InviteReason_reason {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_InviteReason_view {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: $secondary-fg-color;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
margin-right: 8px;
|
||||
background-color: $secondary-fg-color;
|
||||
mask-image: url('$(res)/img/feather-customised/eye.svg');
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteReason_hidden {
|
||||
.mx_InviteReason_reason {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mx_InviteReason_view {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
@ -66,6 +66,11 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_BasicMessageComposer_input_disabled {
|
||||
// Ignore all user input to avoid accidentally triggering the composer
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_BasicMessageComposer_AutoCompleteWrapper {
|
||||
|
|
|
|||
|
|
@ -159,6 +159,7 @@ $left-gutter: 64px;
|
|||
.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;
|
||||
|
|
@ -282,6 +283,10 @@ $left-gutter: 64px;
|
|||
display: inline-block;
|
||||
height: $font-14px;
|
||||
width: $font-14px;
|
||||
|
||||
transition:
|
||||
left var(--transition-short) ease-out,
|
||||
top var(--transition-standard) ease-out;
|
||||
}
|
||||
|
||||
.mx_EventTile_readAvatarRemainder {
|
||||
|
|
|
|||
|
|
@ -216,6 +216,25 @@ $irc-line-height: $font-18px;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_emote {
|
||||
> .mx_EventTile_avatar {
|
||||
margin-left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
/**
|
||||
* adding the icon back in the document flow
|
||||
* if it's not present, there's no unwanted wasted space
|
||||
*/
|
||||
.mx_EventTile_e2eIcon {
|
||||
position: relative;
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ProfileResizer {
|
||||
|
|
|
|||
|
|
@ -227,6 +227,10 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_voiceMessage::before {
|
||||
mask-image: url('$(res)/img/voip/mic-on-mask.svg');
|
||||
}
|
||||
|
||||
.mx_MessageComposer_emoji::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@ limitations under the License.
|
|||
width: 27px;
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_button::after {
|
||||
|
|
|
|||
|
|
@ -33,8 +33,13 @@ limitations under the License.
|
|||
|
||||
.mx_AccessibleButton {
|
||||
line-height: $font-24px;
|
||||
display: inline-block;
|
||||
|
||||
&::before {
|
||||
& + .mx_AccessibleButton {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
&:not(.mx_AccessibleButton_kind_primary_outline)::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background-color: $button-fg-color;
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@ limitations under the License.
|
|||
.mx_RoomList_iconExplore::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
|
||||
}
|
||||
.mx_RoomList_iconBrowse::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
|
||||
}
|
||||
.mx_RoomList_iconDialpad::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/dialpad.svg');
|
||||
}
|
||||
|
|
@ -34,29 +37,33 @@ limitations under the License.
|
|||
.mx_RoomList_explorePrompt {
|
||||
margin: 4px 12px 4px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid $tertiary-fg-color;
|
||||
font-size: $font-13px;
|
||||
border-top: 1px solid $input-border-color;
|
||||
font-size: $font-14px;
|
||||
|
||||
div:first-child {
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-18px;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
color: $secondary-fg-color;
|
||||
color: $primary-fg-color;
|
||||
position: relative;
|
||||
padding: 0 0 0 24px;
|
||||
padding: 8px 8px 8px 32px;
|
||||
font-size: inherit;
|
||||
margin-top: 8px;
|
||||
margin-top: 12px;
|
||||
display: block;
|
||||
text-align: start;
|
||||
background-color: $roomlist-button-bg-color;
|
||||
border-radius: 4px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
background: $secondary-fg-color;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
|
|
@ -70,5 +77,13 @@ limitations under the License.
|
|||
&.mx_RoomList_explorePrompt_explore::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
|
||||
}
|
||||
|
||||
&.mx_RoomList_explorePrompt_spaceInvite::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
}
|
||||
|
||||
&.mx_RoomList_explorePrompt_spaceExplore::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@ limitations under the License.
|
|||
margin-left: 8px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&.mx_RoomSublist_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_headerContainer {
|
||||
// Create a flexbox to make alignment easy
|
||||
display: flex;
|
||||
|
|
@ -37,7 +41,9 @@ limitations under the License.
|
|||
// The combined height must be set in the LeftPanel component for sticky headers
|
||||
// to work correctly.
|
||||
padding-bottom: 8px;
|
||||
height: 24px;
|
||||
// Allow the container to collapse on itself if its children
|
||||
// are not in the normal document flow
|
||||
max-height: 24px;
|
||||
color: $roomlist-header-color;
|
||||
|
||||
.mx_RoomSublist_stickable {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
/*
|
||||
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_VoiceRecordComposerTile_stop {
|
||||
// 28px plus a 2px border makes this a 32px square (as intended)
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 2px solid $voice-record-stop-border-color;
|
||||
border-radius: 32px;
|
||||
margin-right: 16px; // between us and the send button
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
border-radius: 2px;
|
||||
background-color: $voice-record-stop-symbol-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_VoiceRecordComposerTile_waveformContainer {
|
||||
padding: 5px;
|
||||
padding-right: 4px; // there's 1px from the waveform itself, so account for that
|
||||
padding-left: 15px; // +10px for the live circle, +5px for regular padding
|
||||
background-color: $voice-record-waveform-bg-color;
|
||||
border-radius: 12px;
|
||||
margin-right: 12px; // isolate from stop button
|
||||
|
||||
// Cheat at alignment a bit
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
position: relative; // important for the live circle
|
||||
|
||||
color: $voice-record-waveform-fg-color;
|
||||
font-size: $font-14px;
|
||||
|
||||
&::before {
|
||||
animation: recording-pulse 2s infinite;
|
||||
|
||||
content: '';
|
||||
background-color: $voice-record-live-circle-color;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 16px; // vertically center
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mx_Waveform_bar {
|
||||
background-color: $voice-record-waveform-fg-color;
|
||||
}
|
||||
|
||||
.mx_Clock {
|
||||
padding-right: 8px; // isolate from waveform
|
||||
padding-left: 10px; // isolate from live circle
|
||||
width: 42px; // we're not using a monospace font, so fake it
|
||||
}
|
||||
}
|
||||
|
||||
// The keyframes are slightly weird here to help make a ramping/punch effect
|
||||
// for the recording dot. We start and end at 100% opacity to help make the
|
||||
// dot feel a bit like a real lamp that is blinking: the animation ends up
|
||||
// spending a lot of its time showing a steady state without a fade effect.
|
||||
// This lamp effect extends into why the 0% opacity keyframe is not in the
|
||||
// midpoint: lamps take longer to turn off than they do to turn on, and the
|
||||
// extra frames give it a bit of a realistic punch for when the animation is
|
||||
// ramping back up to 100% opacity.
|
||||
//
|
||||
// Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s
|
||||
// (intended to be used in a loop for 2s animation speed)
|
||||
@keyframes recording-pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
35% {
|
||||
opacity: 0;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,10 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// TODO: the space panel currently does not have a fixed width,
|
||||
// just the headers at each level have a max-width of 150px
|
||||
// so this will look slightly off for now. We should probably use css grid for the whole main layout...
|
||||
$spacePanelWidth: 200px;
|
||||
$spacePanelWidth: 71px;
|
||||
|
||||
.mx_SpaceCreateMenu_wrapper {
|
||||
// background blur everything except SpacePanel
|
||||
|
|
@ -48,53 +45,11 @@ $spacePanelWidth: 200px;
|
|||
}
|
||||
|
||||
.mx_SpaceCreateMenuType {
|
||||
position: relative;
|
||||
padding: 16px 32px 16px 72px;
|
||||
width: 432px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $input-darker-bg-color;
|
||||
font-size: $font-15px;
|
||||
margin: 20px 0;
|
||||
|
||||
> h3 {
|
||||
font-weight: $font-semi-bold;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: $secondary-fg-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 24px;
|
||||
left: 20px;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 32px;
|
||||
background-color: $tertiary-fg-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $accent-color;
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
@mixin SpacePillButton;
|
||||
}
|
||||
|
||||
.mx_SpaceCreateMenuType_public::before {
|
||||
mask-image: url('$(res)/img/globe.svg');
|
||||
mask-size: 26px;
|
||||
}
|
||||
.mx_SpaceCreateMenuType_private::before {
|
||||
mask-image: url('$(res)/img/element-icons/lock.svg');
|
||||
|
|
@ -124,7 +79,7 @@ $spacePanelWidth: 200px;
|
|||
}
|
||||
}
|
||||
|
||||
.mx_FormButton {
|
||||
.mx_AccessibleButton_kind_primary {
|
||||
padding: 8px 22px;
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -16,38 +16,7 @@ limitations under the License.
|
|||
|
||||
.mx_SpacePublicShare {
|
||||
.mx_AccessibleButton {
|
||||
border: 1px solid $space-button-outline-color;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
padding: 12px 24px 12px 52px;
|
||||
margin-top: 16px;
|
||||
width: $SpaceRoomViewInnerWidth;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
> span {
|
||||
color: #368bd6;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(141, 151, 165, 0.1);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
background: $muted-fg-color;
|
||||
left: 12px;
|
||||
top: 9px;
|
||||
}
|
||||
@mixin SpacePillButton;
|
||||
|
||||
&.mx_SpacePublicShare_shareButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/link.svg');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
/*
|
||||
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_Waveform {
|
||||
position: relative;
|
||||
height: 30px; // tallest bar can only be 30px
|
||||
top: 1px; // because of our border trick (see below), we're off by 1px of aligntment
|
||||
|
||||
display: flex;
|
||||
align-items: center; // so the bars grow from the middle
|
||||
|
||||
overflow: hidden; // this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS.
|
||||
|
||||
// A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line
|
||||
// with rounded caps.
|
||||
.mx_Waveform_bar {
|
||||
width: 0; // 0px width means we'll end up using the border as our width
|
||||
border: 1px solid transparent; // transparent means we'll use the background colour
|
||||
border-radius: 2px; // rounded end caps, based on the border
|
||||
min-height: 0; // like the width, we'll rely on the border to give us height
|
||||
max-height: 100%; // this makes the `height: 42%` work on the element
|
||||
margin-left: 1px; // we want 2px between each bar, so 1px on either side for balance
|
||||
margin-right: 1px;
|
||||
|
||||
// background color is handled by the parent components
|
||||
}
|
||||
}
|
||||
|
|
@ -27,9 +27,12 @@ limitations under the License.
|
|||
.mx_CallView_large {
|
||||
padding-bottom: 10px;
|
||||
margin: 5px 5px 5px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
.mx_CallView_voice {
|
||||
height: 360px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,7 +58,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_CallView_voice_holdText {
|
||||
.mx_CallView_holdTransferContent {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
|
@ -82,7 +85,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_CallView_voice_hold {
|
||||
.mx_CallView_voice .mx_CallView_holdTransferContent {
|
||||
// This masks the avatar image so when it's blurred, the edge is still crisp
|
||||
.mx_CallView_voice_avatarContainer {
|
||||
border-radius: 2000px;
|
||||
|
|
@ -91,7 +94,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_CallView_voice_holdText {
|
||||
.mx_CallView_holdTransferContent {
|
||||
height: 20px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 15px;
|
||||
|
|
@ -104,6 +107,7 @@ limitations under the License.
|
|||
|
||||
.mx_CallView_video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
border-radius: 8px;
|
||||
|
|
@ -142,7 +146,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_CallView_video_holdContent {
|
||||
.mx_CallView_video .mx_CallView_holdTransferContent {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -177,6 +181,7 @@ limitations under the License.
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mx_CallView_header_callType {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
/*
|
||||
Copyright 2021 Šimon Brandner <simon.bra.ag@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.
|
||||
*/
|
||||
|
||||
.mx_CallViewForRoom {
|
||||
overflow: hidden;
|
||||
|
||||
.mx_CallViewForRoom_ResizeWrapper {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:hover .mx_CallViewForRoom_ResizeHandle {
|
||||
// Need to use important to override element style attributes
|
||||
// set by re-resizable
|
||||
width: 100% !important;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
margin-top: 3px;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
max-width: 64px;
|
||||
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@ limitations under the License.
|
|||
|
||||
.mx_VideoFeed_remote {
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
z-index: 50;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,10 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Slice 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#ffffff" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00262 5.60945C7.02444 6.31867 7.18204 6.99371 7.45029 7.60945H5.83106L5.49798 11.0235H8.60274L8.757 9.44233C9.29964 9.94168 9.94406 10.3321 10.6556 10.579L10.6122 11.0235H12.7966C13.3489 11.0235 13.7966 11.4712 13.7966 12.0235C13.7966 12.5758 13.3489 13.0235 12.7966 13.0235H10.4171L10.1823 15.4305C10.1287 15.9802 9.63959 16.3823 9.08991 16.3287C8.54024 16.2751 8.13811 15.786 8.19174 15.2363L8.40762 13.0235H5.30286L5.06803 15.4305C5.0144 15.9802 4.52533 16.3823 3.97565 16.3287C3.42598 16.2751 3.02385 15.786 3.07748 15.2363L3.29336 13.0235H1.6665C1.11422 13.0235 0.666504 12.5758 0.666504 12.0235C0.666504 11.4712 1.11422 11.0235 1.6665 11.0235H3.48848L3.82156 7.60945H2.26807C1.71578 7.60945 1.26807 7.16173 1.26807 6.60945C1.26807 6.05716 1.71578 5.60945 2.26807 5.60945H4.01668L4.28073 2.90297C4.33436 2.3533 4.82343 1.95117 5.37311 2.0048C5.92278 2.05842 6.32491 2.5475 6.27128 3.09717L6.02618 5.60945H7.00262Z" fill="#8D99A5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4224 5.37843C14.4224 6.50754 13.5071 7.42287 12.3779 7.42287C11.2488 7.42287 10.3335 6.50754 10.3335 5.37843C10.3335 4.24931 11.2488 3.33398 12.3779 3.33398C13.5071 3.33398 14.4224 4.24931 14.4224 5.37843ZM15.8496 7.45454C16.2133 6.84764 16.4224 6.13745 16.4224 5.37843C16.4224 3.14474 14.6116 1.33398 12.3779 1.33398C10.1443 1.33398 8.3335 3.14474 8.3335 5.37843C8.3335 7.61211 10.1443 9.42287 12.3779 9.42287C13.1369 9.42287 13.8471 9.21381 14.454 8.85013C14.4853 8.89368 14.5205 8.93528 14.5597 8.97444L16.293 10.7078C16.6835 11.0983 17.3167 11.0983 17.7072 10.7078C18.0977 10.3172 18.0977 9.68408 17.7072 9.29356L15.9739 7.56023C15.9347 7.52107 15.8931 7.48584 15.8496 7.45454Z" fill="#8D99A5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="8" cy="8" r="8" fill="#737D8C" style="mix-blend-mode:multiply"/>
|
||||
<rect x="7" y="3" width="2" height="6" rx="1" fill="white"/>
|
||||
<rect x="7" y="11" width="2" height="2" rx="1" fill="white"/>
|
||||
<circle cx="8" cy="8" r="8" fill="#FF4B55"/>
|
||||
<rect x="7" y="3" width="2" height="6" rx="1" fill="white"/>
|
||||
<rect x="7" y="11" width="2" height="2" rx="1" fill="white"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 303 B After Width: | Height: | Size: 283 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4684 2.04056C11.8589 1.65003 11.8589 1.01687 11.4684 0.626342C11.0779 0.235818 10.4447 0.235818 10.0542 0.626342L6.04718 4.63333L1.81137 0.397522C1.42084 0.00699783 0.78768 0.00699781 0.397156 0.397522C0.0066314 0.788046 0.00663096 1.42121 0.397155 1.81174L4.63297 6.04755L0.62608 10.0544C0.235557 10.445 0.235556 11.0781 0.626081 11.4686C1.0166 11.8592 1.64977 11.8592 2.04029 11.4686L6.04718 7.46176L9.82525 11.2398C10.2158 11.6303 10.8489 11.6303 11.2395 11.2398C11.63 10.8493 11.63 10.2161 11.2395 9.82561L7.46139 6.04755L11.4684 2.04056Z" fill="#A9B2BC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 717 B |
|
|
@ -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="M9 1C9 0.447715 8.55229 0 8 0C7.44772 0 7 0.447715 7 1L7 12.5858L2.20711 7.79289C1.81658 7.40237 1.18342 7.40237 0.792893 7.79289C0.402369 8.18342 0.402369 8.81658 0.792893 9.20711L7.29289 15.7071C7.68342 16.0976 8.31658 16.0976 8.70711 15.7071L15.2071 9.20711C15.5976 8.81658 15.5976 8.18342 15.2071 7.79289C14.8166 7.40237 14.1834 7.40237 13.7929 7.79289L9 12.5858L9 1Z" fill="#8E99A4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 542 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66699 12C6.66699 13.1046 5.77156 14 4.66699 14C3.56242 14 2.66699 13.1046 2.66699 12C2.66699 10.8954 3.56242 10 4.66699 10C5.77156 10 6.66699 10.8954 6.66699 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM19.333 14C20.4376 14 21.333 13.1046 21.333 12C21.333 10.8954 20.4376 10 19.333 10C18.2284 10 17.333 10.8954 17.333 12C17.333 13.1046 18.2284 14 19.333 14Z" fill="#8E99A4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 609 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0.25C14.2811 0.25 16.3824 1.03493 18.0435 2.34854L18.0645 2.36549C19.294 3.38165 21.75 6.28172 21.75 10C21.75 15.3848 17.3848 19.75 12 19.75C11.3096 19.75 10.75 19.1904 10.75 18.5C10.75 17.8096 11.3096 17.25 12 17.25C16.0041 17.25 19.25 14.0041 19.25 10C19.25 7.32797 17.4103 5.07339 16.4819 4.30089C15.2482 3.32907 13.6934 2.75 12 2.75C8.33522 2.75 5.30553 5.46916 4.8184 9H6.50851C6.9004 9 7.13415 9.43723 6.91677 9.76366L3.90826 14.2813C3.71404 14.5729 3.28596 14.5729 3.09174 14.2813L0.083231 9.76366C-0.134151 9.43723 0.0995979 9 0.491489 9H2.30066C2.80139 4.085 6.95284 0.25 12 0.25Z" fill="#8E99A4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 764 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0.25C7.71886 0.25 5.61758 1.03493 3.95646 2.34854L3.93549 2.36549C2.70597 3.38165 0.25 6.28172 0.25 10C0.25 15.3848 4.61522 19.75 10 19.75C10.6904 19.75 11.25 19.1904 11.25 18.5C11.25 17.8096 10.6904 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 7.32797 4.58973 5.07339 5.51806 4.30089C6.7518 3.32907 8.30655 2.75 10 2.75C13.6648 2.75 16.6945 5.46916 17.1816 9H15.4915C15.0996 9 14.8658 9.43723 15.0832 9.76366L18.0917 14.2813C18.286 14.5729 18.714 14.5729 18.9083 14.2813L21.9168 9.76366C22.1342 9.43723 21.9004 9 21.5085 9H19.6993C19.1986 4.085 15.0472 0.25 10 0.25Z" fill="#8E99A4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 752 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3293 13.5616C16.379 12.1476 17 10.3963 17 8.5C17 3.80558 13.1944 0 8.5 0C3.80558 0 0 3.80558 0 8.5C0 13.1944 3.80558 17 8.5 17C10.3963 17 12.1476 16.379 13.5616 15.3293L18.1161 19.8839C18.6043 20.372 19.3957 20.372 19.8839 19.8839C20.372 19.3957 20.372 18.6043 19.8839 18.1161L15.3293 13.5616ZM9.5 4C9.5 3.44772 9.05228 3 8.5 3C7.94772 3 7.5 3.44772 7.5 4V7.5H4C3.44772 7.5 3 7.94772 3 8.5C3 9.05228 3.44772 9.5 4 9.5H7.5V13C7.5 13.5523 7.94771 14 8.5 14C9.05228 14 9.5 13.5523 9.5 13V9.5H13C13.5523 9.5 14 9.05228 14 8.5C14 7.94772 13.5523 7.5 13 7.5H9.5V4Z" fill="#8E99A4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 733 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3293 13.5616C16.379 12.1476 17 10.3963 17 8.5C17 3.80558 13.1944 0 8.5 0C3.80558 0 0 3.80558 0 8.5C0 13.1944 3.80558 17 8.5 17C10.3963 17 12.1476 16.379 13.5616 15.3293L18.1161 19.8839C18.6043 20.372 19.3957 20.372 19.8839 19.8839C20.372 19.3957 20.372 18.6043 19.8839 18.1161L15.3293 13.5616ZM3 8.5C3 7.94772 3.44772 7.5 4 7.5H13C13.5523 7.5 14 7.94772 14 8.5C14 9.05229 13.5523 9.5 13 9.5H4C3.44772 9.5 3 9.05229 3 8.5Z" fill="#8E99A4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 596 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
|
||||
|
Before Width: | Height: | Size: 311 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-cw"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
|
||||
|
Before Width: | Height: | Size: 315 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09999 4.15C6.09999 1.99609 7.84608 0.25 9.99999 0.25C12.1539 0.25 13.9 1.99609 13.9 4.15V9.98254C13.9 12.1365 12.1539 13.8825 9.99999 13.8825C7.84608 13.8825 6.09999 12.1365 6.09999 9.98254V4.15ZM3.1748 8.73755C3.86516 8.73755 4.4248 9.29719 4.4248 9.98755C4.4248 13.0574 6.91483 15.5493 9.9915 15.5538C9.99433 15.5538 9.99717 15.5538 10 15.5538C10.0028 15.5538 10.0056 15.5538 10.0084 15.5538C13.085 15.5492 15.5748 13.0573 15.5748 9.98755C15.5748 9.29719 16.1344 8.73755 16.8248 8.73755C17.5152 8.73755 18.0748 9.29719 18.0748 9.98755C18.0748 14.0189 15.115 17.3576 11.25 17.9577V18.7513C11.25 19.4416 10.6904 20.0013 10 20.0013C9.30964 20.0013 8.75 19.4416 8.75 18.7513V17.9578C4.88483 17.3578 1.9248 14.0191 1.9248 9.98755C1.9248 9.29719 2.48445 8.73755 3.1748 8.73755Z" fill="#C1C6CD"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 951 B |
|
|
@ -85,6 +85,7 @@ $dialog-close-fg-color: #9fa9ba;
|
|||
|
||||
$dialog-background-bg-color: $header-panel-bg-color;
|
||||
$lightbox-background-bg-color: #000;
|
||||
$lightbox-background-bg-opacity: 0.85;
|
||||
|
||||
$settings-grey-fg-color: #a2a2a2;
|
||||
$settings-profile-placeholder-bg-color: #21262c;
|
||||
|
|
@ -126,7 +127,6 @@ $roomsublist-divider-color: $primary-fg-color;
|
|||
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
|
||||
|
||||
$groupFilterPanel-divider-color: $roomlist-header-color;
|
||||
$space-button-outline-color: rgba(141, 151, 165, 0.2);
|
||||
|
||||
$roomtile-preview-color: $secondary-fg-color;
|
||||
$roomtile-default-badge-bg-color: #61708b;
|
||||
|
|
@ -246,7 +246,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
|
|||
@define-mixin mx_DialogButton_secondary {
|
||||
// flip colours for the secondary ones
|
||||
font-weight: 600;
|
||||
border: 1px solid $accent-color ! important;
|
||||
border: 1px solid $accent-color !important;
|
||||
color: $accent-color;
|
||||
background-color: $button-secondary-bg-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@ $dialog-close-fg-color: #9fa9ba;
|
|||
|
||||
$dialog-background-bg-color: $header-panel-bg-color;
|
||||
$lightbox-background-bg-color: #000;
|
||||
$lightbox-background-bg-opacity: 0.85;
|
||||
|
||||
$settings-grey-fg-color: #a2a2a2;
|
||||
$settings-profile-placeholder-bg-color: #e7e7e7;
|
||||
|
|
@ -122,7 +123,6 @@ $roomsublist-divider-color: $primary-fg-color;
|
|||
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
|
||||
|
||||
$groupFilterPanel-divider-color: $roomlist-header-color;
|
||||
$space-button-outline-color: rgba(141, 151, 165, 0.2);
|
||||
|
||||
$roomtile-preview-color: #9e9e9e;
|
||||
$roomtile-default-badge-bg-color: #61708b;
|
||||
|
|
|
|||
|
|
@ -127,6 +127,7 @@ $dialog-close-fg-color: #c1c1c1;
|
|||
|
||||
$dialog-background-bg-color: #e9e9e9;
|
||||
$lightbox-background-bg-color: #000;
|
||||
$lightbox-background-bg-opacity: 0.95;
|
||||
|
||||
$imagebody-giflabel: rgba(0, 0, 0, 0.7);
|
||||
$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -189,7 +190,13 @@ $roomsublist-divider-color: $primary-fg-color;
|
|||
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
|
||||
|
||||
$groupFilterPanel-divider-color: $roomlist-header-color;
|
||||
$space-button-outline-color: #E3E8F0;
|
||||
|
||||
// See non-legacy _light for variable information
|
||||
$voice-record-stop-border-color: #E3E8F0;
|
||||
$voice-record-stop-symbol-color: #ff4b55;
|
||||
$voice-record-waveform-bg-color: #E3E8F0;
|
||||
$voice-record-waveform-fg-color: $muted-fg-color;
|
||||
$voice-record-live-circle-color: #ff4b55;
|
||||
|
||||
$roomtile-preview-color: #9e9e9e;
|
||||
$roomtile-default-badge-bg-color: #61708b;
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266
|
|||
font-weight: 400;
|
||||
font-display: swap;
|
||||
unicode-range: $inter-unicode-range;
|
||||
src: url("$(res)/fonts/Inter/Inter-Regular.woff2?v=3.13") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-Regular.woff?v=3.13") format("woff");
|
||||
src: url("$(res)/fonts/Inter/Inter-Regular.woff2?v=3.18") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-Regular.woff?v=3.18") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
|
|
@ -24,8 +24,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266
|
|||
font-weight: 400;
|
||||
font-display: swap;
|
||||
unicode-range: $inter-unicode-range;
|
||||
src: url("$(res)/fonts/Inter/Inter-Italic.woff2?v=3.13") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-Italic.woff?v=3.13") format("woff");
|
||||
src: url("$(res)/fonts/Inter/Inter-Italic.woff2?v=3.18") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-Italic.woff?v=3.18") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -34,8 +34,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266
|
|||
font-weight: 500;
|
||||
font-display: swap;
|
||||
unicode-range: $inter-unicode-range;
|
||||
src: url("$(res)/fonts/Inter/Inter-Medium.woff2?v=3.13") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-Medium.woff?v=3.13") format("woff");
|
||||
src: url("$(res)/fonts/Inter/Inter-Medium.woff2?v=3.18") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-Medium.woff?v=3.18") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
|
|
@ -43,8 +43,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266
|
|||
font-weight: 500;
|
||||
font-display: swap;
|
||||
unicode-range: $inter-unicode-range;
|
||||
src: url("$(res)/fonts/Inter/Inter-MediumItalic.woff2?v=3.13") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-MediumItalic.woff?v=3.13") format("woff");
|
||||
src: url("$(res)/fonts/Inter/Inter-MediumItalic.woff2?v=3.18") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-MediumItalic.woff?v=3.18") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -53,8 +53,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266
|
|||
font-weight: 600;
|
||||
font-display: swap;
|
||||
unicode-range: $inter-unicode-range;
|
||||
src: url("$(res)/fonts/Inter/Inter-SemiBold.woff2?v=3.13") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-SemiBold.woff?v=3.13") format("woff");
|
||||
src: url("$(res)/fonts/Inter/Inter-SemiBold.woff2?v=3.18") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-SemiBold.woff?v=3.18") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
|
|
@ -62,8 +62,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266
|
|||
font-weight: 600;
|
||||
font-display: swap;
|
||||
unicode-range: $inter-unicode-range;
|
||||
src: url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff2?v=3.13") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff?v=3.13") format("woff");
|
||||
src: url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff2?v=3.18") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-SemiBoldItalic.woff?v=3.18") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -72,8 +72,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266
|
|||
font-weight: 700;
|
||||
font-display: swap;
|
||||
unicode-range: $inter-unicode-range;
|
||||
src: url("$(res)/fonts/Inter/Inter-Bold.woff2?v=3.13") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-Bold.woff?v=3.13") format("woff");
|
||||
src: url("$(res)/fonts/Inter/Inter-Bold.woff2?v=3.18") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-Bold.woff?v=3.18") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
|
|
@ -81,8 +81,8 @@ $inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-266
|
|||
font-weight: 700;
|
||||
font-display: swap;
|
||||
unicode-range: $inter-unicode-range;
|
||||
src: url("$(res)/fonts/Inter/Inter-BoldItalic.woff2?v=3.13") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-BoldItalic.woff?v=3.13") format("woff");
|
||||
src: url("$(res)/fonts/Inter/Inter-BoldItalic.woff2?v=3.18") format("woff2"),
|
||||
url("$(res)/fonts/Inter/Inter-BoldItalic.woff?v=3.18") format("woff");
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
|
|
|
|||
|
|
@ -118,6 +118,7 @@ $dialog-close-fg-color: #c1c1c1;
|
|||
|
||||
$dialog-background-bg-color: #e9e9e9;
|
||||
$lightbox-background-bg-color: #000;
|
||||
$lightbox-background-bg-opacity: 0.95;
|
||||
|
||||
$imagebody-giflabel: rgba(0, 0, 0, 0.7);
|
||||
$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -180,7 +181,12 @@ $roomsublist-divider-color: $primary-fg-color;
|
|||
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
|
||||
|
||||
$groupFilterPanel-divider-color: $roomlist-header-color;
|
||||
$space-button-outline-color: #E3E8F0;
|
||||
|
||||
$voice-record-stop-border-color: #E3E8F0;
|
||||
$voice-record-stop-symbol-color: #ff4b55; // $warning-color, but without letting people change it in themes
|
||||
$voice-record-waveform-bg-color: #E3E8F0;
|
||||
$voice-record-waveform-fg-color: $muted-fg-color;
|
||||
$voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes
|
||||
|
||||
$roomtile-preview-color: $secondary-fg-color;
|
||||
$roomtile-default-badge-bg-color: #61708b;
|
||||
|
|
|
|||
|
|
@ -22,15 +22,26 @@ clone() {
|
|||
}
|
||||
|
||||
# Try the PR author's branch in case it exists on the deps as well.
|
||||
# If BUILDKITE_BRANCH is set, it will contain either:
|
||||
# First we check if BUILDKITE_BRANCH is defined,
|
||||
# if it isn't we can assume this is a Netlify build
|
||||
if [ -z ${BUILDKITE_BRANCH+x} ]; then
|
||||
# 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')
|
||||
else
|
||||
head=$BUILDKITE_BRANCH
|
||||
fi
|
||||
|
||||
# If head is set, it will contain either:
|
||||
# * "branch" when the author's branch and target branch are in the same repo
|
||||
# * "author:branch" when the author's branch is in their fork
|
||||
# * "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.
|
||||
BUILDKITE_BRANCH_ARRAY=(${BUILDKITE_BRANCH//:/ })
|
||||
if [[ "${#BUILDKITE_BRANCH_ARRAY[@]}" == "1" ]]; then
|
||||
BRANCH_ARRAY=(${head//:/ })
|
||||
if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then
|
||||
clone $deforg $defrepo $BUILDKITE_BRANCH
|
||||
elif [[ "${#BUILDKITE_BRANCH_ARRAY[@]}" == "2" ]]; then
|
||||
clone ${BUILDKITE_BRANCH_ARRAY[0]} $defrepo ${BUILDKITE_BRANCH_ARRAY[1]}
|
||||
elif [[ "${#BRANCH_ARRAY[@]}" == "2" ]]; then
|
||||
clone ${BRANCH_ARRAY[0]} $defrepo ${BRANCH_ARRAY[1]}
|
||||
fi
|
||||
# Try the target branch of the push or PR.
|
||||
clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ import {ModalWidgetStore} from "../stores/ModalWidgetStore";
|
|||
import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
|
||||
import VoipUserMapper from "../VoipUserMapper";
|
||||
import {SpaceStoreClass} from "../stores/SpaceStore";
|
||||
import {VoiceRecording} from "../voice/VoiceRecording";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
|
|
@ -70,6 +71,7 @@ declare global {
|
|||
mxModalWidgetStore: ModalWidgetStore;
|
||||
mxVoipUserMapper: VoipUserMapper;
|
||||
mxSpaceStore: SpaceStoreClass;
|
||||
mxVoiceRecorder: typeof VoiceRecording;
|
||||
}
|
||||
|
||||
interface Document {
|
||||
|
|
@ -127,4 +129,30 @@ declare global {
|
|||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/columnNumber
|
||||
columnNumber?: number;
|
||||
}
|
||||
|
||||
// https://github.com/microsoft/TypeScript/issues/28308#issuecomment-650802278
|
||||
interface AudioWorkletProcessor {
|
||||
readonly port: MessagePort;
|
||||
process(
|
||||
inputs: Float32Array[][],
|
||||
outputs: Float32Array[][],
|
||||
parameters: Record<string, Float32Array>
|
||||
): boolean;
|
||||
}
|
||||
|
||||
// https://github.com/microsoft/TypeScript/issues/28308#issuecomment-650802278
|
||||
const AudioWorkletProcessor: {
|
||||
prototype: AudioWorkletProcessor;
|
||||
new (options?: AudioWorkletNodeOptions): AudioWorkletProcessor;
|
||||
};
|
||||
|
||||
// https://github.com/microsoft/TypeScript/issues/28308#issuecomment-650802278
|
||||
function registerProcessor(
|
||||
name: string,
|
||||
processorCtor: (new (
|
||||
options?: AudioWorkletNodeOptions
|
||||
) => AudioWorkletProcessor) & {
|
||||
parameterDescriptors?: AudioParamDescriptor[];
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -212,6 +212,18 @@ export default abstract class BasePlatform {
|
|||
throw new Error("Unimplemented");
|
||||
}
|
||||
|
||||
supportsWarnBeforeExit(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
async shouldWarnBeforeExit(): Promise<boolean> {
|
||||
return false;
|
||||
}
|
||||
|
||||
async setWarnBeforeExit(enabled: boolean): Promise<void> {
|
||||
throw new Error("Unimplemented");
|
||||
}
|
||||
|
||||
supportsAutoHideMenuBar(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -154,6 +154,9 @@ function getRemoteAudioElement(): HTMLAudioElement {
|
|||
|
||||
export default class CallHandler {
|
||||
private calls = new Map<string, MatrixCall>(); // roomId -> call
|
||||
// Calls started as an attended transfer, ie. with the intention of transferring another
|
||||
// call with a different party to this one.
|
||||
private transferees = new Map<string, MatrixCall>(); // callId (target) -> call (transferee)
|
||||
private audioPromises = new Map<AudioID, Promise<void>>();
|
||||
private dispatcherRef: string = null;
|
||||
private supportsPstnProtocol = null;
|
||||
|
|
@ -325,6 +328,10 @@ export default class CallHandler {
|
|||
return callsNotInThatRoom;
|
||||
}
|
||||
|
||||
getTransfereeForCallId(callId: string): MatrixCall {
|
||||
return this.transferees[callId];
|
||||
}
|
||||
|
||||
play(audioId: AudioID) {
|
||||
// TODO: Attach an invisible element for this instead
|
||||
// which listens?
|
||||
|
|
@ -622,6 +629,7 @@ export default class CallHandler {
|
|||
private async placeCall(
|
||||
roomId: string, type: PlaceCallType,
|
||||
localElement: HTMLVideoElement, remoteElement: HTMLVideoElement,
|
||||
transferee: MatrixCall,
|
||||
) {
|
||||
Analytics.trackEvent('voip', 'placeCall', 'type', type);
|
||||
CountlyAnalytics.instance.trackStartCall(roomId, type === PlaceCallType.Video, false);
|
||||
|
|
@ -634,6 +642,9 @@ export default class CallHandler {
|
|||
const call = createNewMatrixCall(MatrixClientPeg.get(), mappedRoomId);
|
||||
|
||||
this.calls.set(roomId, call);
|
||||
if (transferee) {
|
||||
this.transferees[call.callId] = transferee;
|
||||
}
|
||||
|
||||
this.setCallListeners(call);
|
||||
this.setCallAudioElement(call);
|
||||
|
|
@ -723,7 +734,10 @@ export default class CallHandler {
|
|||
} else if (members.length === 2) {
|
||||
console.info(`Place ${payload.type} call in ${payload.room_id}`);
|
||||
|
||||
this.placeCall(payload.room_id, payload.type, payload.local_element, payload.remote_element);
|
||||
this.placeCall(
|
||||
payload.room_id, payload.type, payload.local_element, payload.remote_element,
|
||||
payload.transferee,
|
||||
);
|
||||
} else { // > 2
|
||||
dis.dispatch({
|
||||
action: "place_conference_call",
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ export function formatFullDateNoTime(date: Date): string {
|
|||
});
|
||||
}
|
||||
|
||||
export function formatFullDate(date: Date, showTwelveHour = false): string {
|
||||
export function formatFullDate(date: Date, showTwelveHour = false, showSeconds = true): string {
|
||||
const days = getDaysArray();
|
||||
const months = getMonthsArray();
|
||||
return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s', {
|
||||
|
|
@ -105,7 +105,7 @@ export function formatFullDate(date: Date, showTwelveHour = false): string {
|
|||
monthName: months[date.getMonth()],
|
||||
day: date.getDate(),
|
||||
fullYear: date.getFullYear(),
|
||||
time: formatFullTime(date, showTwelveHour),
|
||||
time: showSeconds ? formatFullTime(date, showTwelveHour) : formatTime(date, showTwelveHour),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -130,11 +130,14 @@ export function sanitizedHtmlNode(insaneHtml: string) {
|
|||
return <div dangerouslySetInnerHTML={{ __html: saneHtml }} dir="auto" />;
|
||||
}
|
||||
|
||||
export function sanitizedHtmlNodeInnerText(insaneHtml: string) {
|
||||
const saneHtml = sanitizeHtml(insaneHtml, sanitizeHtmlParams);
|
||||
const contentDiv = document.createElement("div");
|
||||
contentDiv.innerHTML = saneHtml;
|
||||
return contentDiv.innerText;
|
||||
export function getHtmlText(insaneHtml: string) {
|
||||
return sanitizeHtml(insaneHtml, {
|
||||
allowedTags: [],
|
||||
allowedAttributes: {},
|
||||
selfClosing: [],
|
||||
allowedSchemes: [],
|
||||
disallowedTagsMode: 'discard',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -0,0 +1,407 @@
|
|||
/*
|
||||
Copyright 2021 Clemens Zeidler
|
||||
|
||||
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 { AutocompleteAction, IKeyBindingsProvider, KeyBinding, MessageComposerAction, NavigationAction, RoomAction,
|
||||
RoomListAction } from "./KeyBindingsManager";
|
||||
import { isMac, Key } from "./Keyboard";
|
||||
import SettingsStore from "./settings/SettingsStore";
|
||||
|
||||
const messageComposerBindings = (): KeyBinding<MessageComposerAction>[] => {
|
||||
const bindings: KeyBinding<MessageComposerAction>[] = [
|
||||
{
|
||||
action: MessageComposerAction.SelectPrevSendHistory,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_UP,
|
||||
altKey: true,
|
||||
ctrlKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: MessageComposerAction.SelectNextSendHistory,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_DOWN,
|
||||
altKey: true,
|
||||
ctrlKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: MessageComposerAction.EditPrevMessage,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_UP,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: MessageComposerAction.EditNextMessage,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_DOWN,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: MessageComposerAction.CancelEditing,
|
||||
keyCombo: {
|
||||
key: Key.ESCAPE,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: MessageComposerAction.FormatBold,
|
||||
keyCombo: {
|
||||
key: Key.B,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: MessageComposerAction.FormatItalics,
|
||||
keyCombo: {
|
||||
key: Key.I,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: MessageComposerAction.FormatQuote,
|
||||
keyCombo: {
|
||||
key: Key.GREATER_THAN,
|
||||
ctrlOrCmd: true,
|
||||
shiftKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: MessageComposerAction.EditUndo,
|
||||
keyCombo: {
|
||||
key: Key.Z,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: MessageComposerAction.MoveCursorToStart,
|
||||
keyCombo: {
|
||||
key: Key.HOME,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: MessageComposerAction.MoveCursorToEnd,
|
||||
keyCombo: {
|
||||
key: Key.END,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
if (isMac) {
|
||||
bindings.push({
|
||||
action: MessageComposerAction.EditRedo,
|
||||
keyCombo: {
|
||||
key: Key.Z,
|
||||
ctrlOrCmd: true,
|
||||
shiftKey: true,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
bindings.push({
|
||||
action: MessageComposerAction.EditRedo,
|
||||
keyCombo: {
|
||||
key: Key.Y,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
if (SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend')) {
|
||||
bindings.push({
|
||||
action: MessageComposerAction.Send,
|
||||
keyCombo: {
|
||||
key: Key.ENTER,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
});
|
||||
bindings.push({
|
||||
action: MessageComposerAction.NewLine,
|
||||
keyCombo: {
|
||||
key: Key.ENTER,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
bindings.push({
|
||||
action: MessageComposerAction.Send,
|
||||
keyCombo: {
|
||||
key: Key.ENTER,
|
||||
},
|
||||
});
|
||||
bindings.push({
|
||||
action: MessageComposerAction.NewLine,
|
||||
keyCombo: {
|
||||
key: Key.ENTER,
|
||||
shiftKey: true,
|
||||
},
|
||||
});
|
||||
if (isMac) {
|
||||
bindings.push({
|
||||
action: MessageComposerAction.NewLine,
|
||||
keyCombo: {
|
||||
key: Key.ENTER,
|
||||
altKey: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return bindings;
|
||||
}
|
||||
|
||||
const autocompleteBindings = (): KeyBinding<AutocompleteAction>[] => {
|
||||
return [
|
||||
{
|
||||
action: AutocompleteAction.CompleteOrNextSelection,
|
||||
keyCombo: {
|
||||
key: Key.TAB,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: AutocompleteAction.CompleteOrNextSelection,
|
||||
keyCombo: {
|
||||
key: Key.TAB,
|
||||
ctrlKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: AutocompleteAction.CompleteOrPrevSelection,
|
||||
keyCombo: {
|
||||
key: Key.TAB,
|
||||
shiftKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: AutocompleteAction.CompleteOrPrevSelection,
|
||||
keyCombo: {
|
||||
key: Key.TAB,
|
||||
ctrlKey: true,
|
||||
shiftKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: AutocompleteAction.Cancel,
|
||||
keyCombo: {
|
||||
key: Key.ESCAPE,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: AutocompleteAction.PrevSelection,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_UP,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: AutocompleteAction.NextSelection,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_DOWN,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const roomListBindings = (): KeyBinding<RoomListAction>[] => {
|
||||
return [
|
||||
{
|
||||
action: RoomListAction.ClearSearch,
|
||||
keyCombo: {
|
||||
key: Key.ESCAPE,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: RoomListAction.PrevRoom,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_UP,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: RoomListAction.NextRoom,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_DOWN,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: RoomListAction.SelectRoom,
|
||||
keyCombo: {
|
||||
key: Key.ENTER,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: RoomListAction.CollapseSection,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_LEFT,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: RoomListAction.ExpandSection,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_RIGHT,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const roomBindings = (): KeyBinding<RoomAction>[] => {
|
||||
const bindings: KeyBinding<RoomAction>[] = [
|
||||
{
|
||||
action: RoomAction.ScrollUp,
|
||||
keyCombo: {
|
||||
key: Key.PAGE_UP,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: RoomAction.RoomScrollDown,
|
||||
keyCombo: {
|
||||
key: Key.PAGE_DOWN,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: RoomAction.DismissReadMarker,
|
||||
keyCombo: {
|
||||
key: Key.ESCAPE,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: RoomAction.JumpToOldestUnread,
|
||||
keyCombo: {
|
||||
key: Key.PAGE_UP,
|
||||
shiftKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: RoomAction.UploadFile,
|
||||
keyCombo: {
|
||||
key: Key.U,
|
||||
ctrlOrCmd: true,
|
||||
shiftKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: RoomAction.JumpToFirstMessage,
|
||||
keyCombo: {
|
||||
key: Key.HOME,
|
||||
ctrlKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: RoomAction.JumpToLatestMessage,
|
||||
keyCombo: {
|
||||
key: Key.END,
|
||||
ctrlKey: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
if (SettingsStore.getValue('ctrlFForSearch')) {
|
||||
bindings.push({
|
||||
action: RoomAction.FocusSearch,
|
||||
keyCombo: {
|
||||
key: Key.F,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return bindings;
|
||||
}
|
||||
|
||||
const navigationBindings = (): KeyBinding<NavigationAction>[] => {
|
||||
return [
|
||||
{
|
||||
action: NavigationAction.FocusRoomSearch,
|
||||
keyCombo: {
|
||||
key: Key.K,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: NavigationAction.ToggleRoomSidePanel,
|
||||
keyCombo: {
|
||||
key: Key.PERIOD,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: NavigationAction.ToggleUserMenu,
|
||||
// Ideally this would be CTRL+P for "Profile", but that's
|
||||
// taken by the print dialog. CTRL+I for "Information"
|
||||
// was previously chosen but conflicted with italics in
|
||||
// composer, so CTRL+` it is
|
||||
keyCombo: {
|
||||
key: Key.BACKTICK,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: NavigationAction.ToggleShortCutDialog,
|
||||
keyCombo: {
|
||||
key: Key.SLASH,
|
||||
ctrlOrCmd: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: NavigationAction.ToggleShortCutDialog,
|
||||
keyCombo: {
|
||||
key: Key.SLASH,
|
||||
ctrlOrCmd: true,
|
||||
shiftKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: NavigationAction.GoToHome,
|
||||
keyCombo: {
|
||||
key: Key.H,
|
||||
ctrlKey: true,
|
||||
altKey: !isMac,
|
||||
shiftKey: isMac,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: NavigationAction.SelectPrevRoom,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_UP,
|
||||
altKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: NavigationAction.SelectNextRoom,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_DOWN,
|
||||
altKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: NavigationAction.SelectPrevUnreadRoom,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_UP,
|
||||
altKey: true,
|
||||
shiftKey: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
action: NavigationAction.SelectNextUnreadRoom,
|
||||
keyCombo: {
|
||||
key: Key.ARROW_DOWN,
|
||||
altKey: true,
|
||||
shiftKey: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export const defaultBindingsProvider: IKeyBindingsProvider = {
|
||||
getMessageComposerBindings: messageComposerBindings,
|
||||
getAutocompleteBindings: autocompleteBindings,
|
||||
getRoomListBindings: roomListBindings,
|
||||
getRoomBindings: roomBindings,
|
||||
getNavigationBindings: navigationBindings,
|
||||
}
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
/*
|
||||
Copyright 2021 Clemens Zeidler
|
||||
|
||||
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 { defaultBindingsProvider } from './KeyBindingsDefaults';
|
||||
import { isMac } from './Keyboard';
|
||||
|
||||
/** Actions for the chat message composer component */
|
||||
export enum MessageComposerAction {
|
||||
/** Send a message */
|
||||
Send = 'Send',
|
||||
/** Go backwards through the send history and use the message in composer view */
|
||||
SelectPrevSendHistory = 'SelectPrevSendHistory',
|
||||
/** Go forwards through the send history */
|
||||
SelectNextSendHistory = 'SelectNextSendHistory',
|
||||
/** Start editing the user's last sent message */
|
||||
EditPrevMessage = 'EditPrevMessage',
|
||||
/** Start editing the user's next sent message */
|
||||
EditNextMessage = 'EditNextMessage',
|
||||
/** Cancel editing a message or cancel replying to a message */
|
||||
CancelEditing = 'CancelEditing',
|
||||
|
||||
/** Set bold format the current selection */
|
||||
FormatBold = 'FormatBold',
|
||||
/** Set italics format the current selection */
|
||||
FormatItalics = 'FormatItalics',
|
||||
/** Format the current selection as quote */
|
||||
FormatQuote = 'FormatQuote',
|
||||
/** Undo the last editing */
|
||||
EditUndo = 'EditUndo',
|
||||
/** Redo editing */
|
||||
EditRedo = 'EditRedo',
|
||||
/** Insert new line */
|
||||
NewLine = 'NewLine',
|
||||
/** Move the cursor to the start of the message */
|
||||
MoveCursorToStart = 'MoveCursorToStart',
|
||||
/** Move the cursor to the end of the message */
|
||||
MoveCursorToEnd = 'MoveCursorToEnd',
|
||||
}
|
||||
|
||||
/** Actions for text editing autocompletion */
|
||||
export enum AutocompleteAction {
|
||||
/**
|
||||
* Select previous selection or, if the autocompletion window is not shown, open the window and select the first
|
||||
* selection.
|
||||
*/
|
||||
CompleteOrPrevSelection = 'ApplySelection',
|
||||
/** Select next selection or, if the autocompletion window is not shown, open it and select the first selection */
|
||||
CompleteOrNextSelection = 'CompleteOrNextSelection',
|
||||
/** Move to the previous autocomplete selection */
|
||||
PrevSelection = 'PrevSelection',
|
||||
/** Move to the next autocomplete selection */
|
||||
NextSelection = 'NextSelection',
|
||||
/** Close the autocompletion window */
|
||||
Cancel = 'Cancel',
|
||||
}
|
||||
|
||||
/** Actions for the room list sidebar */
|
||||
export enum RoomListAction {
|
||||
/** Clear room list filter field */
|
||||
ClearSearch = 'ClearSearch',
|
||||
/** Navigate up/down in the room list */
|
||||
PrevRoom = 'PrevRoom',
|
||||
/** Navigate down in the room list */
|
||||
NextRoom = 'NextRoom',
|
||||
/** Select room from the room list */
|
||||
SelectRoom = 'SelectRoom',
|
||||
/** Collapse room list section */
|
||||
CollapseSection = 'CollapseSection',
|
||||
/** Expand room list section, if already expanded, jump to first room in the selection */
|
||||
ExpandSection = 'ExpandSection',
|
||||
}
|
||||
|
||||
/** Actions for the current room view */
|
||||
export enum RoomAction {
|
||||
/** Scroll up in the timeline */
|
||||
ScrollUp = 'ScrollUp',
|
||||
/** Scroll down in the timeline */
|
||||
RoomScrollDown = 'RoomScrollDown',
|
||||
/** Dismiss read marker and jump to bottom */
|
||||
DismissReadMarker = 'DismissReadMarker',
|
||||
/** Jump to oldest unread message */
|
||||
JumpToOldestUnread = 'JumpToOldestUnread',
|
||||
/** Upload a file */
|
||||
UploadFile = 'UploadFile',
|
||||
/** Focus search message in a room (must be enabled) */
|
||||
FocusSearch = 'FocusSearch',
|
||||
/** Jump to the first (downloaded) message in the room */
|
||||
JumpToFirstMessage = 'JumpToFirstMessage',
|
||||
/** Jump to the latest message in the room */
|
||||
JumpToLatestMessage = 'JumpToLatestMessage',
|
||||
}
|
||||
|
||||
/** Actions for navigating do various menus, dialogs or screens */
|
||||
export enum NavigationAction {
|
||||
/** Jump to room search (search for a room) */
|
||||
FocusRoomSearch = 'FocusRoomSearch',
|
||||
/** Toggle the room side panel */
|
||||
ToggleRoomSidePanel = 'ToggleRoomSidePanel',
|
||||
/** Toggle the user menu */
|
||||
ToggleUserMenu = 'ToggleUserMenu',
|
||||
/** Toggle the short cut help dialog */
|
||||
ToggleShortCutDialog = 'ToggleShortCutDialog',
|
||||
/** Got to the Element home screen */
|
||||
GoToHome = 'GoToHome',
|
||||
/** Select prev room */
|
||||
SelectPrevRoom = 'SelectPrevRoom',
|
||||
/** Select next room */
|
||||
SelectNextRoom = 'SelectNextRoom',
|
||||
/** Select prev room with unread messages */
|
||||
SelectPrevUnreadRoom = 'SelectPrevUnreadRoom',
|
||||
/** Select next room with unread messages */
|
||||
SelectNextUnreadRoom = 'SelectNextUnreadRoom',
|
||||
}
|
||||
|
||||
/**
|
||||
* Represent a key combination.
|
||||
*
|
||||
* The combo is evaluated strictly, i.e. the KeyboardEvent must match exactly what is specified in the KeyCombo.
|
||||
*/
|
||||
export type KeyCombo = {
|
||||
key?: string;
|
||||
|
||||
/** On PC: ctrl is pressed; on Mac: meta is pressed */
|
||||
ctrlOrCmd?: boolean;
|
||||
|
||||
altKey?: boolean;
|
||||
ctrlKey?: boolean;
|
||||
metaKey?: boolean;
|
||||
shiftKey?: boolean;
|
||||
}
|
||||
|
||||
export type KeyBinding<T extends string> = {
|
||||
action: T;
|
||||
keyCombo: KeyCombo;
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper method to check if a KeyboardEvent matches a KeyCombo
|
||||
*
|
||||
* Note, this method is only exported for testing.
|
||||
*/
|
||||
export function isKeyComboMatch(ev: KeyboardEvent | React.KeyboardEvent, combo: KeyCombo, onMac: boolean): boolean {
|
||||
if (combo.key !== undefined) {
|
||||
// When shift is pressed, letters are returned as upper case chars. In this case do a lower case comparison.
|
||||
// This works for letter combos such as shift + U as well for none letter combos such as shift + Escape.
|
||||
// If shift is not pressed, the toLowerCase conversion can be avoided.
|
||||
if (ev.shiftKey) {
|
||||
if (ev.key.toLowerCase() !== combo.key.toLowerCase()) {
|
||||
return false;
|
||||
}
|
||||
} else if (ev.key !== combo.key) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const comboCtrl = combo.ctrlKey ?? false;
|
||||
const comboAlt = combo.altKey ?? false;
|
||||
const comboShift = combo.shiftKey ?? false;
|
||||
const comboMeta = combo.metaKey ?? false;
|
||||
// Tests mock events may keep the modifiers undefined; convert them to booleans
|
||||
const evCtrl = ev.ctrlKey ?? false;
|
||||
const evAlt = ev.altKey ?? false;
|
||||
const evShift = ev.shiftKey ?? false;
|
||||
const evMeta = ev.metaKey ?? false;
|
||||
// When ctrlOrCmd is set, the keys need do evaluated differently on PC and Mac
|
||||
if (combo.ctrlOrCmd) {
|
||||
if (onMac) {
|
||||
if (!evMeta
|
||||
|| evCtrl !== comboCtrl
|
||||
|| evAlt !== comboAlt
|
||||
|| evShift !== comboShift) {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
if (!evCtrl
|
||||
|| evMeta !== comboMeta
|
||||
|| evAlt !== comboAlt
|
||||
|| evShift !== comboShift) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
if (evMeta !== comboMeta
|
||||
|| evCtrl !== comboCtrl
|
||||
|| evAlt !== comboAlt
|
||||
|| evShift !== comboShift) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export type KeyBindingGetter<T extends string> = () => KeyBinding<T>[];
|
||||
|
||||
export interface IKeyBindingsProvider {
|
||||
getMessageComposerBindings: KeyBindingGetter<MessageComposerAction>;
|
||||
getAutocompleteBindings: KeyBindingGetter<AutocompleteAction>;
|
||||
getRoomListBindings: KeyBindingGetter<RoomListAction>;
|
||||
getRoomBindings: KeyBindingGetter<RoomAction>;
|
||||
getNavigationBindings: KeyBindingGetter<NavigationAction>;
|
||||
}
|
||||
|
||||
export class KeyBindingsManager {
|
||||
/**
|
||||
* List of key bindings providers.
|
||||
*
|
||||
* Key bindings from the first provider(s) in the list will have precedence over key bindings from later providers.
|
||||
*
|
||||
* To overwrite the default key bindings add a new providers before the default provider, e.g. a provider for
|
||||
* customized key bindings.
|
||||
*/
|
||||
bindingsProviders: IKeyBindingsProvider[] = [
|
||||
defaultBindingsProvider,
|
||||
];
|
||||
|
||||
/**
|
||||
* Finds a matching KeyAction for a given KeyboardEvent
|
||||
*/
|
||||
private getAction<T extends string>(getters: KeyBindingGetter<T>[], ev: KeyboardEvent | React.KeyboardEvent)
|
||||
: T | undefined {
|
||||
for (const getter of getters) {
|
||||
const bindings = getter();
|
||||
const binding = bindings.find(it => isKeyComboMatch(ev, it.keyCombo, isMac));
|
||||
if (binding) {
|
||||
return binding.action;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
getMessageComposerAction(ev: KeyboardEvent | React.KeyboardEvent): MessageComposerAction | undefined {
|
||||
return this.getAction(this.bindingsProviders.map(it => it.getMessageComposerBindings), ev);
|
||||
}
|
||||
|
||||
getAutocompleteAction(ev: KeyboardEvent | React.KeyboardEvent): AutocompleteAction | undefined {
|
||||
return this.getAction(this.bindingsProviders.map(it => it.getAutocompleteBindings), ev);
|
||||
}
|
||||
|
||||
getRoomListAction(ev: KeyboardEvent | React.KeyboardEvent): RoomListAction | undefined {
|
||||
return this.getAction(this.bindingsProviders.map(it => it.getRoomListBindings), ev);
|
||||
}
|
||||
|
||||
getRoomAction(ev: KeyboardEvent | React.KeyboardEvent): RoomAction | undefined {
|
||||
return this.getAction(this.bindingsProviders.map(it => it.getRoomBindings), ev);
|
||||
}
|
||||
|
||||
getNavigationAction(ev: KeyboardEvent | React.KeyboardEvent): NavigationAction | undefined {
|
||||
return this.getAction(this.bindingsProviders.map(it => it.getNavigationBindings), ev);
|
||||
}
|
||||
}
|
||||
|
||||
const manager = new KeyBindingsManager();
|
||||
|
||||
export function getKeyBindingsManager(): KeyBindingsManager {
|
||||
return manager;
|
||||
}
|
||||
|
|
@ -296,10 +296,11 @@ class _MatrixClientPeg implements IMatrixClientPeg {
|
|||
// These are always installed regardless of the labs flag so that
|
||||
// cross-signing features can toggle on without reloading and also be
|
||||
// accessed immediately after login.
|
||||
const customisedCallbacks = {
|
||||
getDehydrationKey: SecurityCustomisations.getDehydrationKey,
|
||||
};
|
||||
Object.assign(opts.cryptoCallbacks, crossSigningCallbacks, customisedCallbacks);
|
||||
Object.assign(opts.cryptoCallbacks, crossSigningCallbacks);
|
||||
if (SecurityCustomisations.getDehydrationKey) {
|
||||
opts.cryptoCallbacks.getDehydrationKey =
|
||||
SecurityCustomisations.getDehydrationKey;
|
||||
}
|
||||
|
||||
this.matrixClient = createMatrixClient(opts);
|
||||
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ export interface IModal<T extends any[]> {
|
|||
onBeforeClose?(reason?: string): Promise<boolean>;
|
||||
onFinished(...args: T): void;
|
||||
close(...args: T): void;
|
||||
hidden?: boolean;
|
||||
}
|
||||
|
||||
export interface IHandle<T extends any[]> {
|
||||
|
|
@ -93,6 +94,12 @@ export class ModalManager {
|
|||
return container;
|
||||
}
|
||||
|
||||
public toggleCurrentDialogVisibility() {
|
||||
const modal = this.getCurrentModal();
|
||||
if (!modal) return;
|
||||
modal.hidden = !modal.hidden;
|
||||
}
|
||||
|
||||
public hasDialogs() {
|
||||
return this.priorityModal || this.staticModal || this.modals.length > 0;
|
||||
}
|
||||
|
|
@ -364,7 +371,7 @@ export class ModalManager {
|
|||
}
|
||||
|
||||
const modal = this.getCurrentModal();
|
||||
if (modal !== this.staticModal) {
|
||||
if (modal !== this.staticModal && !modal.hidden) {
|
||||
const classes = classNames("mx_Dialog_wrapper", modal.className, {
|
||||
mx_Dialog_wrapperWithStaticUnder: this.staticModal,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
import React from "react";
|
||||
import ReactDom from "react-dom";
|
||||
import Velocity from "velocity-animate";
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* The Velociraptor contains components and animates transitions with velocity.
|
||||
* The NodeAnimator contains components and animates transitions.
|
||||
* It will only pick up direct changes to properties ('left', currently), and so
|
||||
* will not work for animating positional changes where the position is implicit
|
||||
* from DOM order. This makes it a lot simpler and lighter: if you need fully
|
||||
* automatic positional animation, look at react-shuffle or similar libraries.
|
||||
*/
|
||||
export default class Velociraptor extends React.Component {
|
||||
export default class NodeAnimator extends React.Component {
|
||||
static propTypes = {
|
||||
// either a list of child nodes, or a single child.
|
||||
children: PropTypes.any,
|
||||
|
|
@ -20,14 +19,10 @@ export default class Velociraptor extends React.Component {
|
|||
|
||||
// a list of state objects to apply to each child node in turn
|
||||
startStyles: PropTypes.array,
|
||||
|
||||
// a list of transition options from the corresponding startStyle
|
||||
enterTransitionOpts: PropTypes.array,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
startStyles: [],
|
||||
enterTransitionOpts: [],
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
|
|
@ -41,6 +36,18 @@ export default class Velociraptor extends React.Component {
|
|||
this._updateChildren(this.props.children);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {HTMLElement} node element to apply styles to
|
||||
* @param {object} styles a key/value pair of CSS properties
|
||||
* @returns {void}
|
||||
*/
|
||||
_applyStyles(node, styles) {
|
||||
Object.entries(styles).forEach(([property, value]) => {
|
||||
node.style[property] = value;
|
||||
});
|
||||
}
|
||||
|
||||
_updateChildren(newChildren) {
|
||||
const oldChildren = this.children || {};
|
||||
this.children = {};
|
||||
|
|
@ -50,17 +57,8 @@ export default class Velociraptor extends React.Component {
|
|||
const oldNode = ReactDom.findDOMNode(this.nodes[old.key]);
|
||||
|
||||
if (oldNode && oldNode.style.left !== c.props.style.left) {
|
||||
Velocity(oldNode, { left: c.props.style.left }, this.props.transition).then(() => {
|
||||
// special case visibility because it's nonsensical to animate an invisible element
|
||||
// so we always hidden->visible pre-transition and visible->hidden after
|
||||
if (oldNode.style.visibility === 'visible' && c.props.style.visibility === 'hidden') {
|
||||
oldNode.style.visibility = c.props.style.visibility;
|
||||
}
|
||||
});
|
||||
//console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
|
||||
}
|
||||
if (oldNode && oldNode.style.visibility === 'hidden' && c.props.style.visibility === 'visible') {
|
||||
oldNode.style.visibility = c.props.style.visibility;
|
||||
this._applyStyles(oldNode, { left: c.props.style.left });
|
||||
// console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
|
||||
}
|
||||
// clone the old element with the props (and children) of the new element
|
||||
// so prop updates are still received by the children.
|
||||
|
|
@ -94,33 +92,22 @@ export default class Velociraptor extends React.Component {
|
|||
this.props.startStyles.length > 0
|
||||
) {
|
||||
const startStyles = this.props.startStyles;
|
||||
const transitionOpts = this.props.enterTransitionOpts;
|
||||
const domNode = ReactDom.findDOMNode(node);
|
||||
// start from startStyle 1: 0 is the one we gave it
|
||||
// to start with, so now we animate 1 etc.
|
||||
for (var i = 1; i < startStyles.length; ++i) {
|
||||
Velocity(domNode, startStyles[i], transitionOpts[i-1]);
|
||||
/*
|
||||
console.log("start:",
|
||||
JSON.stringify(transitionOpts[i-1]),
|
||||
"->",
|
||||
JSON.stringify(startStyles[i]),
|
||||
);
|
||||
*/
|
||||
for (let i = 1; i < startStyles.length; ++i) {
|
||||
this._applyStyles(domNode, startStyles[i]);
|
||||
// console.log("start:"
|
||||
// JSON.stringify(startStyles[i]),
|
||||
// );
|
||||
}
|
||||
|
||||
// and then we animate to the resting state
|
||||
Velocity(domNode, restingStyle,
|
||||
transitionOpts[i-1])
|
||||
.then(() => {
|
||||
// once we've reached the resting state, hide the element if
|
||||
// appropriate
|
||||
domNode.style.visibility = restingStyle.visibility;
|
||||
});
|
||||
setTimeout(() => {
|
||||
this._applyStyles(domNode, restingStyle);
|
||||
}, 0);
|
||||
|
||||
// console.log("enter:",
|
||||
// JSON.stringify(transitionOpts[i-1]),
|
||||
// "->",
|
||||
// JSON.stringify(restingStyle));
|
||||
}
|
||||
this.nodes[k] = node;
|
||||
|
|
@ -128,9 +115,7 @@ export default class Velociraptor extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<span>
|
||||
{ Object.values(this.children) }
|
||||
</span>
|
||||
<>{ Object.values(this.children) }</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -383,6 +383,10 @@ export const Notifier = {
|
|||
// don't bother notifying as user was recently active in this room
|
||||
return;
|
||||
}
|
||||
if (SettingsStore.getValue("doNotDisturb")) {
|
||||
// Don't bother the user if they didn't ask to be bothered
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isEnabled()) {
|
||||
this._displayPopupNotification(ev, room);
|
||||
|
|
|
|||
|
|
@ -49,11 +49,12 @@ export function showStartChatInviteDialog(initialText) {
|
|||
);
|
||||
}
|
||||
|
||||
export function showRoomInviteDialog(roomId) {
|
||||
export function showRoomInviteDialog(roomId, initialText = "") {
|
||||
// This dialog handles the room creation internally - we don't need to worry about it.
|
||||
Modal.createTrackedDialog(
|
||||
"Invite Users", "", InviteDialog, {
|
||||
kind: KIND_INVITE,
|
||||
initialText,
|
||||
roomId,
|
||||
},
|
||||
/*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
|
||||
|
|
|
|||
|
|
@ -395,6 +395,8 @@ export async function accessSecretStorage(func = async () => { }, forceReset = f
|
|||
} catch (e) {
|
||||
SecurityCustomisations.catchAccessSecretStorageError?.(e);
|
||||
console.error(e);
|
||||
// Re-throw so that higher level logic can abort as needed
|
||||
throw e;
|
||||
} finally {
|
||||
// Clear secret storage key cache now that work is complete
|
||||
secretStorageBeingAccessed = false;
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ limitations under the License.
|
|||
|
||||
import * as React from 'react';
|
||||
|
||||
import * as ContentHelpers from 'matrix-js-sdk/src/content-helpers';
|
||||
import {MatrixClientPeg} from './MatrixClientPeg';
|
||||
import dis from './dispatcher/dispatcher';
|
||||
import * as sdk from './index';
|
||||
|
|
@ -126,10 +127,10 @@ export class Command {
|
|||
return this.getCommand() + " " + this.args;
|
||||
}
|
||||
|
||||
run(roomId: string, args: string, cmd: string) {
|
||||
run(roomId: string, args: string) {
|
||||
// if it has no runFn then its an ignored/nop command (autocomplete only) e.g `/me`
|
||||
if (!this.runFn) return reject(_t("Command error"));
|
||||
return this.runFn.bind(this)(roomId, args, cmd);
|
||||
return this.runFn.bind(this)(roomId, args);
|
||||
}
|
||||
|
||||
getUsage() {
|
||||
|
|
@ -154,6 +155,18 @@ function success(promise?: Promise<any>) {
|
|||
*/
|
||||
|
||||
export const Commands = [
|
||||
new Command({
|
||||
command: 'spoiler',
|
||||
args: '<message>',
|
||||
description: _td('Sends the given message as a spoiler'),
|
||||
runFn: function(roomId, message) {
|
||||
return success(ContentHelpers.makeHtmlMessage(
|
||||
message,
|
||||
`<span data-mx-spoiler>${message}</span>`,
|
||||
));
|
||||
},
|
||||
category: CommandCategories.messages,
|
||||
}),
|
||||
new Command({
|
||||
command: 'shrug',
|
||||
args: '<message>',
|
||||
|
|
@ -163,7 +176,7 @@ export const Commands = [
|
|||
if (args) {
|
||||
message = message + ' ' + args;
|
||||
}
|
||||
return success(MatrixClientPeg.get().sendTextMessage(roomId, message));
|
||||
return success(ContentHelpers.makeTextMessage(message));
|
||||
},
|
||||
category: CommandCategories.messages,
|
||||
}),
|
||||
|
|
@ -176,7 +189,7 @@ export const Commands = [
|
|||
if (args) {
|
||||
message = message + ' ' + args;
|
||||
}
|
||||
return success(MatrixClientPeg.get().sendTextMessage(roomId, message));
|
||||
return success(ContentHelpers.makeTextMessage(message));
|
||||
},
|
||||
category: CommandCategories.messages,
|
||||
}),
|
||||
|
|
@ -189,7 +202,7 @@ export const Commands = [
|
|||
if (args) {
|
||||
message = message + ' ' + args;
|
||||
}
|
||||
return success(MatrixClientPeg.get().sendTextMessage(roomId, message));
|
||||
return success(ContentHelpers.makeTextMessage(message));
|
||||
},
|
||||
category: CommandCategories.messages,
|
||||
}),
|
||||
|
|
@ -202,7 +215,7 @@ export const Commands = [
|
|||
if (args) {
|
||||
message = message + ' ' + args;
|
||||
}
|
||||
return success(MatrixClientPeg.get().sendTextMessage(roomId, message));
|
||||
return success(ContentHelpers.makeTextMessage(message));
|
||||
},
|
||||
category: CommandCategories.messages,
|
||||
}),
|
||||
|
|
@ -211,7 +224,7 @@ export const Commands = [
|
|||
args: '<message>',
|
||||
description: _td('Sends a message as plain text, without interpreting it as markdown'),
|
||||
runFn: function(roomId, messages) {
|
||||
return success(MatrixClientPeg.get().sendTextMessage(roomId, messages));
|
||||
return success(ContentHelpers.makeTextMessage(messages));
|
||||
},
|
||||
category: CommandCategories.messages,
|
||||
}),
|
||||
|
|
@ -220,7 +233,7 @@ export const Commands = [
|
|||
args: '<message>',
|
||||
description: _td('Sends a message as html, without interpreting it as markdown'),
|
||||
runFn: function(roomId, messages) {
|
||||
return success(MatrixClientPeg.get().sendHtmlMessage(roomId, messages, messages));
|
||||
return success(ContentHelpers.makeHtmlMessage(messages, messages));
|
||||
},
|
||||
category: CommandCategories.messages,
|
||||
}),
|
||||
|
|
@ -965,7 +978,7 @@ export const Commands = [
|
|||
args: '<message>',
|
||||
runFn: function(roomId, args) {
|
||||
if (!args) return reject(this.getUserId());
|
||||
return success(MatrixClientPeg.get().sendHtmlMessage(roomId, args, textToHtmlRainbow(args)));
|
||||
return success(ContentHelpers.makeHtmlMessage(args, textToHtmlRainbow(args)));
|
||||
},
|
||||
category: CommandCategories.messages,
|
||||
}),
|
||||
|
|
@ -975,7 +988,7 @@ export const Commands = [
|
|||
args: '<message>',
|
||||
runFn: function(roomId, args) {
|
||||
if (!args) return reject(this.getUserId());
|
||||
return success(MatrixClientPeg.get().sendHtmlEmote(roomId, args, textToHtmlRainbow(args)));
|
||||
return success(ContentHelpers.makeHtmlEmote(args, textToHtmlRainbow(args)));
|
||||
},
|
||||
category: CommandCategories.messages,
|
||||
}),
|
||||
|
|
@ -1200,10 +1213,14 @@ export function parseCommandString(input: string) {
|
|||
* processing the command, or 'promise' if a request was sent out.
|
||||
* Returns null if the input didn't match a command.
|
||||
*/
|
||||
export function getCommand(roomId: string, input: string) {
|
||||
export function getCommand(input: string) {
|
||||
const {cmd, args} = parseCommandString(input);
|
||||
|
||||
if (CommandMap.has(cmd) && CommandMap.get(cmd).isEnabled()) {
|
||||
return () => CommandMap.get(cmd).run(roomId, args, cmd);
|
||||
return {
|
||||
cmd: CommandMap.get(cmd),
|
||||
args,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,9 +95,10 @@ function textForMemberEvent(ev) {
|
|||
senderName,
|
||||
targetName,
|
||||
}) + ' ' + reason;
|
||||
} else {
|
||||
// sender is not target and made the target leave, if not from invite/ban then this is a kick
|
||||
} else if (prevContent.membership === "join") {
|
||||
return _t('%(senderName)s kicked %(targetName)s.', {senderName, targetName}) + ' ' + reason;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
import Velocity from "velocity-animate";
|
||||
|
||||
// courtesy of https://github.com/julianshapiro/velocity/issues/283
|
||||
// We only use easeOutBounce (easeInBounce is just sort of nonsensical)
|
||||
function bounce( p ) {
|
||||
let pow2;
|
||||
let bounce = 4;
|
||||
|
||||
while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {
|
||||
// just sets pow2
|
||||
}
|
||||
return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
|
||||
}
|
||||
|
||||
Velocity.Easings.easeOutBounce = function(p) {
|
||||
return 1 - bounce(1 - p);
|
||||
};
|
||||
|
|
@ -265,7 +265,7 @@ const shortcuts: Record<Categories, IShortcut[]> = {
|
|||
description: _td("Toggle this dialog"),
|
||||
}, {
|
||||
keybinds: [{
|
||||
modifiers: [CMD_OR_CTRL, Modifiers.ALT],
|
||||
modifiers: [Modifiers.CONTROL, isMac ? Modifiers.SHIFT : Modifiers.ALT],
|
||||
key: Key.H,
|
||||
}],
|
||||
description: _td("Go to Home View"),
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ interface IOptions<T extends {}> {
|
|||
keys: Array<string | keyof T>;
|
||||
funcs?: Array<(T) => string>;
|
||||
shouldMatchWordsOnly?: boolean;
|
||||
shouldMatchPrefix?: boolean;
|
||||
// whether to apply unhomoglyph and strip diacritics to fuzz up the search. Defaults to true
|
||||
fuzzy?: boolean;
|
||||
}
|
||||
|
|
@ -56,12 +55,6 @@ export default class QueryMatcher<T extends Object> {
|
|||
if (this._options.shouldMatchWordsOnly === undefined) {
|
||||
this._options.shouldMatchWordsOnly = true;
|
||||
}
|
||||
|
||||
// By default, match anywhere in the string being searched. If enabled, only return
|
||||
// matches that are prefixed with the query.
|
||||
if (this._options.shouldMatchPrefix === undefined) {
|
||||
this._options.shouldMatchPrefix = false;
|
||||
}
|
||||
}
|
||||
|
||||
setObjects(objects: T[]) {
|
||||
|
|
@ -112,7 +105,7 @@ export default class QueryMatcher<T extends Object> {
|
|||
resultKey = resultKey.replace(/[^\w]/g, '');
|
||||
}
|
||||
const index = resultKey.indexOf(query);
|
||||
if (index !== -1 && (!this._options.shouldMatchPrefix || index === 0)) {
|
||||
if (index !== -1) {
|
||||
matches.push(
|
||||
...candidates.map((candidate) => ({index, ...candidate})),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -56,7 +56,6 @@ export default class UserProvider extends AutocompleteProvider {
|
|||
this.matcher = new QueryMatcher([], {
|
||||
keys: ['name'],
|
||||
funcs: [obj => obj.userId.slice(1)], // index by user id minus the leading '@'
|
||||
shouldMatchPrefix: true,
|
||||
shouldMatchWordsOnly: false,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -981,7 +981,7 @@ export default class GroupView extends React.Component {
|
|||
<Spinner />
|
||||
</div>;
|
||||
}
|
||||
const httpInviterAvatar = this.state.inviterProfile
|
||||
const httpInviterAvatar = this.state.inviterProfile && this.state.inviterProfile.avatarUrl
|
||||
? mediaFromMxc(this.state.inviterProfile.avatarUrl).getSquareThumbnailHttp(36)
|
||||
: null;
|
||||
|
||||
|
|
|
|||
|
|
@ -16,9 +16,11 @@ limitations under the License.
|
|||
|
||||
import * as React from "react";
|
||||
import { createRef } from "react";
|
||||
import classNames from "classnames";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
|
||||
import GroupFilterPanel from "./GroupFilterPanel";
|
||||
import CustomRoomTagPanel from "./CustomRoomTagPanel";
|
||||
import classNames from "classnames";
|
||||
import dis from "../../dispatcher/dispatcher";
|
||||
import { _t } from "../../languageHandler";
|
||||
import RoomList from "../views/rooms/RoomList";
|
||||
|
|
@ -32,7 +34,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
|
|||
import ResizeNotifier from "../../utils/ResizeNotifier";
|
||||
import SettingsStore from "../../settings/SettingsStore";
|
||||
import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
|
||||
import {Key} from "../../Keyboard";
|
||||
import IndicatorScrollbar from "../structures/IndicatorScrollbar";
|
||||
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
|
||||
import { OwnProfileStore } from "../../stores/OwnProfileStore";
|
||||
|
|
@ -40,6 +41,8 @@ import RoomListNumResults from "../views/rooms/RoomListNumResults";
|
|||
import LeftPanelWidget from "./LeftPanelWidget";
|
||||
import {replaceableComponent} from "../../utils/replaceableComponent";
|
||||
import {mediaFromMxc} from "../../customisations/Media";
|
||||
import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
|
||||
import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
|
||||
|
||||
interface IProps {
|
||||
isMinimized: boolean;
|
||||
|
|
@ -49,6 +52,7 @@ interface IProps {
|
|||
interface IState {
|
||||
showBreadcrumbs: boolean;
|
||||
showGroupFilterPanel: boolean;
|
||||
activeSpace?: Room;
|
||||
}
|
||||
|
||||
// List of CSS classes which should be included in keyboard navigation within the room list
|
||||
|
|
@ -74,11 +78,13 @@ export default class LeftPanel extends React.Component<IProps, IState> {
|
|||
this.state = {
|
||||
showBreadcrumbs: BreadcrumbsStore.instance.visible,
|
||||
showGroupFilterPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
|
||||
activeSpace: SpaceStore.instance.activeSpace,
|
||||
};
|
||||
|
||||
BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
|
||||
RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
|
||||
OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate);
|
||||
SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
|
||||
this.bgImageWatcherRef = SettingsStore.watchSetting(
|
||||
"RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
|
||||
this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
|
||||
|
|
@ -96,9 +102,14 @@ export default class LeftPanel extends React.Component<IProps, IState> {
|
|||
BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
|
||||
RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
|
||||
OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate);
|
||||
SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
|
||||
this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
|
||||
}
|
||||
|
||||
private updateActiveSpace = (activeSpace: Room) => {
|
||||
this.setState({ activeSpace });
|
||||
};
|
||||
|
||||
private onExplore = () => {
|
||||
dis.fire(Action.ViewRoomDirectory);
|
||||
};
|
||||
|
|
@ -143,7 +154,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
|
|||
private doStickyHeaders(list: HTMLDivElement) {
|
||||
const topEdge = list.scrollTop;
|
||||
const bottomEdge = list.offsetHeight + list.scrollTop;
|
||||
const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist");
|
||||
const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist:not(.mx_RoomSublist_hidden)");
|
||||
|
||||
const headerRightMargin = 15; // calculated from margins and widths to align with non-sticky tiles
|
||||
const headerStickyWidth = list.clientWidth - headerRightMargin;
|
||||
|
|
@ -286,17 +297,18 @@ export default class LeftPanel extends React.Component<IProps, IState> {
|
|||
private onKeyDown = (ev: React.KeyboardEvent) => {
|
||||
if (!this.focusedElement) return;
|
||||
|
||||
switch (ev.key) {
|
||||
case Key.ARROW_UP:
|
||||
case Key.ARROW_DOWN:
|
||||
const action = getKeyBindingsManager().getRoomListAction(ev);
|
||||
switch (action) {
|
||||
case RoomListAction.NextRoom:
|
||||
case RoomListAction.PrevRoom:
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
this.onMoveFocus(ev.key === Key.ARROW_UP);
|
||||
this.onMoveFocus(action === RoomListAction.PrevRoom);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
private onEnter = () => {
|
||||
private selectRoom = () => {
|
||||
const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile");
|
||||
if (firstRoom) {
|
||||
firstRoom.click();
|
||||
|
|
@ -377,11 +389,13 @@ export default class LeftPanel extends React.Component<IProps, IState> {
|
|||
>
|
||||
<RoomSearch
|
||||
isMinimized={this.props.isMinimized}
|
||||
onVerticalArrow={this.onKeyDown}
|
||||
onEnter={this.onEnter}
|
||||
onKeyDown={this.onKeyDown}
|
||||
onSelectRoom={this.selectRoom}
|
||||
/>
|
||||
<AccessibleTooltipButton
|
||||
className="mx_LeftPanel_exploreButton"
|
||||
className={classNames("mx_LeftPanel_exploreButton", {
|
||||
mx_LeftPanel_exploreButton_space: !!this.state.activeSpace,
|
||||
})}
|
||||
onClick={this.onExplore}
|
||||
title={_t("Explore rooms")}
|
||||
/>
|
||||
|
|
@ -407,6 +421,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
|
|||
onBlur={this.onBlur}
|
||||
isMinimized={this.props.isMinimized}
|
||||
onResize={this.onResize}
|
||||
activeSpace={this.state.activeSpace}
|
||||
/>;
|
||||
|
||||
const containerClasses = classNames({
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import * as PropTypes from 'prop-types';
|
|||
import { MatrixClient } from 'matrix-js-sdk/src/client';
|
||||
import { DragDropContext } from 'react-beautiful-dnd';
|
||||
|
||||
import {Key, isOnlyCtrlOrCmdKeyEvent, isOnlyCtrlOrCmdIgnoreShiftKeyEvent, isMac} from '../../Keyboard';
|
||||
import {Key} from '../../Keyboard';
|
||||
import PageTypes from '../../PageTypes';
|
||||
import CallMediaHandler from '../../CallMediaHandler';
|
||||
import { fixupColorFonts } from '../../utils/FontManager';
|
||||
|
|
@ -55,6 +55,7 @@ import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
|
|||
import Modal from "../../Modal";
|
||||
import { ICollapseConfig } from "../../resizer/distributors/collapse";
|
||||
import HostSignupContainer from '../views/host_signup/HostSignupContainer';
|
||||
import { getKeyBindingsManager, NavigationAction, RoomAction } from '../../KeyBindingsManager';
|
||||
import { IOpts } from "../../createRoom";
|
||||
import SpacePanel from "../views/spaces/SpacePanel";
|
||||
import {replaceableComponent} from "../../utils/replaceableComponent";
|
||||
|
|
@ -74,7 +75,6 @@ function canElementReceiveInput(el) {
|
|||
interface IProps {
|
||||
matrixClient: MatrixClient;
|
||||
onRegistered: (credentials: IMatrixClientCreds) => Promise<MatrixClient>;
|
||||
viaServers?: string[];
|
||||
hideToSRUsers: boolean;
|
||||
resizeNotifier: ResizeNotifier;
|
||||
// eslint-disable-next-line camelcase
|
||||
|
|
@ -143,9 +143,6 @@ class LoggedInView extends React.Component<IProps, IState> {
|
|||
// transitioned to PWLU)
|
||||
onRegistered: PropTypes.func,
|
||||
|
||||
// Used by the RoomView to handle joining rooms
|
||||
viaServers: PropTypes.arrayOf(PropTypes.string),
|
||||
|
||||
// and lots and lots of other stuff.
|
||||
};
|
||||
|
||||
|
|
@ -440,86 +437,55 @@ class LoggedInView extends React.Component<IProps, IState> {
|
|||
|
||||
_onKeyDown = (ev) => {
|
||||
let handled = false;
|
||||
const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
|
||||
const hasModifier = ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey;
|
||||
const isModifier = ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT;
|
||||
const modKey = isMac ? ev.metaKey : ev.ctrlKey;
|
||||
|
||||
switch (ev.key) {
|
||||
case Key.PAGE_UP:
|
||||
case Key.PAGE_DOWN:
|
||||
if (!hasModifier && !isModifier) {
|
||||
this._onScrollKeyPressed(ev);
|
||||
handled = true;
|
||||
}
|
||||
const roomAction = getKeyBindingsManager().getRoomAction(ev);
|
||||
switch (roomAction) {
|
||||
case RoomAction.ScrollUp:
|
||||
case RoomAction.RoomScrollDown:
|
||||
case RoomAction.JumpToFirstMessage:
|
||||
case RoomAction.JumpToLatestMessage:
|
||||
// pass the event down to the scroll panel
|
||||
this._onScrollKeyPressed(ev);
|
||||
handled = true;
|
||||
break;
|
||||
case RoomAction.FocusSearch:
|
||||
dis.dispatch({
|
||||
action: 'focus_search',
|
||||
});
|
||||
handled = true;
|
||||
break;
|
||||
}
|
||||
if (handled) {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
case Key.HOME:
|
||||
case Key.END:
|
||||
if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
|
||||
this._onScrollKeyPressed(ev);
|
||||
handled = true;
|
||||
}
|
||||
const navAction = getKeyBindingsManager().getNavigationAction(ev);
|
||||
switch (navAction) {
|
||||
case NavigationAction.FocusRoomSearch:
|
||||
dis.dispatch({
|
||||
action: 'focus_room_filter',
|
||||
});
|
||||
handled = true;
|
||||
break;
|
||||
case Key.K:
|
||||
if (ctrlCmdOnly) {
|
||||
dis.dispatch({
|
||||
action: 'focus_room_filter',
|
||||
});
|
||||
handled = true;
|
||||
}
|
||||
case NavigationAction.ToggleUserMenu:
|
||||
dis.fire(Action.ToggleUserMenu);
|
||||
handled = true;
|
||||
break;
|
||||
case Key.F:
|
||||
if (ctrlCmdOnly && SettingsStore.getValue("ctrlFForSearch")) {
|
||||
dis.dispatch({
|
||||
action: 'focus_search',
|
||||
});
|
||||
handled = true;
|
||||
}
|
||||
case NavigationAction.ToggleShortCutDialog:
|
||||
KeyboardShortcuts.toggleDialog();
|
||||
handled = true;
|
||||
break;
|
||||
case Key.BACKTICK:
|
||||
// Ideally this would be CTRL+P for "Profile", but that's
|
||||
// taken by the print dialog. CTRL+I for "Information"
|
||||
// was previously chosen but conflicted with italics in
|
||||
// composer, so CTRL+` it is
|
||||
|
||||
if (ctrlCmdOnly) {
|
||||
dis.fire(Action.ToggleUserMenu);
|
||||
handled = true;
|
||||
}
|
||||
case NavigationAction.GoToHome:
|
||||
dis.dispatch({
|
||||
action: 'view_home_page',
|
||||
});
|
||||
Modal.closeCurrentModal("homeKeyboardShortcut");
|
||||
handled = true;
|
||||
break;
|
||||
|
||||
case Key.SLASH:
|
||||
if (isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev)) {
|
||||
KeyboardShortcuts.toggleDialog();
|
||||
handled = true;
|
||||
}
|
||||
break;
|
||||
|
||||
case Key.H:
|
||||
if (ev.altKey && modKey) {
|
||||
dis.dispatch({
|
||||
action: 'view_home_page',
|
||||
});
|
||||
Modal.closeCurrentModal("homeKeyboardShortcut");
|
||||
handled = true;
|
||||
}
|
||||
break;
|
||||
|
||||
case Key.ARROW_UP:
|
||||
case Key.ARROW_DOWN:
|
||||
if (ev.altKey && !ev.ctrlKey && !ev.metaKey) {
|
||||
dis.dispatch<ViewRoomDeltaPayload>({
|
||||
action: Action.ViewRoomDelta,
|
||||
delta: ev.key === Key.ARROW_UP ? -1 : 1,
|
||||
unread: ev.shiftKey,
|
||||
});
|
||||
handled = true;
|
||||
}
|
||||
break;
|
||||
|
||||
case Key.PERIOD:
|
||||
if (ctrlCmdOnly && (this.props.page_type === "room_view" || this.props.page_type === "group_view")) {
|
||||
case NavigationAction.ToggleRoomSidePanel:
|
||||
if (this.props.page_type === "room_view" || this.props.page_type === "group_view") {
|
||||
dis.dispatch<ToggleRightPanelPayload>({
|
||||
action: Action.ToggleRightPanel,
|
||||
type: this.props.page_type === "room_view" ? "room" : "group",
|
||||
|
|
@ -527,16 +493,48 @@ class LoggedInView extends React.Component<IProps, IState> {
|
|||
handled = true;
|
||||
}
|
||||
break;
|
||||
|
||||
case NavigationAction.SelectPrevRoom:
|
||||
dis.dispatch<ViewRoomDeltaPayload>({
|
||||
action: Action.ViewRoomDelta,
|
||||
delta: -1,
|
||||
unread: false,
|
||||
});
|
||||
handled = true;
|
||||
break;
|
||||
case NavigationAction.SelectNextRoom:
|
||||
dis.dispatch<ViewRoomDeltaPayload>({
|
||||
action: Action.ViewRoomDelta,
|
||||
delta: 1,
|
||||
unread: false,
|
||||
});
|
||||
handled = true;
|
||||
break;
|
||||
case NavigationAction.SelectPrevUnreadRoom:
|
||||
dis.dispatch<ViewRoomDeltaPayload>({
|
||||
action: Action.ViewRoomDelta,
|
||||
delta: -1,
|
||||
unread: true,
|
||||
});
|
||||
break;
|
||||
case NavigationAction.SelectNextUnreadRoom:
|
||||
dis.dispatch<ViewRoomDeltaPayload>({
|
||||
action: Action.ViewRoomDelta,
|
||||
delta: 1,
|
||||
unread: true,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
// if we do not have a handler for it, pass it to the platform which might
|
||||
handled = PlatformPeg.get().onKeyDown(ev);
|
||||
}
|
||||
|
||||
if (handled) {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
} else if (!isModifier && !ev.altKey && !ev.ctrlKey && !ev.metaKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isModifier = ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT;
|
||||
if (!isModifier && !ev.altKey && !ev.ctrlKey && !ev.metaKey) {
|
||||
// The above condition is crafted to _allow_ characters with Shift
|
||||
// already pressed (but not the Shift key down itself).
|
||||
|
||||
|
|
@ -625,11 +623,9 @@ class LoggedInView extends React.Component<IProps, IState> {
|
|||
case PageTypes.RoomView:
|
||||
pageElement = <RoomView
|
||||
ref={this._roomView}
|
||||
autoJoin={this.props.autoJoin}
|
||||
onRegistered={this.props.onRegistered}
|
||||
threepidInvite={this.props.threepidInvite}
|
||||
oobData={this.props.roomOobData}
|
||||
viaServers={this.props.viaServers}
|
||||
key={this.props.currentRoomId || 'roomview'}
|
||||
resizeNotifier={this.props.resizeNotifier}
|
||||
justCreatedOpts={this.props.roomJustCreatedOpts}
|
||||
|
|
|
|||
|
|
@ -80,10 +80,11 @@ import DialPadModal from "../views/voip/DialPadModal";
|
|||
import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast';
|
||||
import { shouldUseLoginForWelcome } from "../../utils/pages";
|
||||
import SpaceStore from "../../stores/SpaceStore";
|
||||
import SpaceRoomDirectory from "./SpaceRoomDirectory";
|
||||
import {replaceableComponent} from "../../utils/replaceableComponent";
|
||||
import RoomListStore from "../../stores/room-list/RoomListStore";
|
||||
import {RoomUpdateCause} from "../../stores/room-list/models";
|
||||
import defaultDispatcher from "../../dispatcher/dispatcher";
|
||||
import SecurityCustomisations from "../../customisations/Security";
|
||||
|
||||
/** constants for MatrixChat.state.view */
|
||||
export enum Views {
|
||||
|
|
@ -202,7 +203,6 @@ interface IState {
|
|||
ready: boolean;
|
||||
threepidInvite?: IThreepidInvite,
|
||||
roomOobData?: object;
|
||||
viaServers?: string[];
|
||||
pendingInitialSync?: boolean;
|
||||
justRegistered?: boolean;
|
||||
roomJustCreatedOpts?: IOpts;
|
||||
|
|
@ -396,7 +396,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
|
|||
|
||||
const crossSigningIsSetUp = cli.getStoredCrossSigningForUser(cli.getUserId());
|
||||
if (crossSigningIsSetUp) {
|
||||
this.setStateForNewView({ view: Views.COMPLETE_SECURITY });
|
||||
if (SecurityCustomisations.SHOW_ENCRYPTION_SETUP_UI === false) {
|
||||
this.onLoggedIn();
|
||||
} else {
|
||||
this.setStateForNewView({view: Views.COMPLETE_SECURITY});
|
||||
}
|
||||
} else if (await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) {
|
||||
this.setStateForNewView({ view: Views.E2E_SETUP });
|
||||
} else {
|
||||
|
|
@ -691,10 +695,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
|
|||
}
|
||||
case Action.ViewRoomDirectory: {
|
||||
if (SpaceStore.instance.activeSpace) {
|
||||
Modal.createTrackedDialog("Space room directory", "", SpaceRoomDirectory, {
|
||||
space: SpaceStore.instance.activeSpace,
|
||||
initialText: payload.initialText,
|
||||
}, "mx_SpaceRoomDirectory_dialogWrapper", false, true);
|
||||
defaultDispatcher.dispatch({
|
||||
action: "view_room",
|
||||
room_id: SpaceStore.instance.activeSpace.roomId,
|
||||
});
|
||||
} else {
|
||||
const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
|
||||
Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
|
||||
|
|
@ -929,7 +933,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
|
|||
page_type: PageTypes.RoomView,
|
||||
threepidInvite: roomInfo.threepid_invite,
|
||||
roomOobData: roomInfo.oob_data,
|
||||
viaServers: roomInfo.via_servers,
|
||||
ready: true,
|
||||
roomJustCreatedOpts: roomInfo.justCreatedOpts,
|
||||
}, () => {
|
||||
|
|
@ -1093,8 +1096,22 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
|
|||
const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
|
||||
const isSpace = roomToLeave?.isSpaceRoom();
|
||||
// Show a warning if there are additional complications.
|
||||
const joinRules = roomToLeave.currentState.getStateEvents('m.room.join_rules', '');
|
||||
const warnings = [];
|
||||
|
||||
const memberCount = roomToLeave.currentState.getJoinedMemberCount();
|
||||
if (memberCount === 1) {
|
||||
warnings.push((
|
||||
<span className="warning" key="only_member_warning">
|
||||
{' '/* Whitespace, otherwise the sentences get smashed together */ }
|
||||
{ _t("You are the only person here. " +
|
||||
"If you leave, no one will be able to join in the future, including you.") }
|
||||
</span>
|
||||
));
|
||||
|
||||
return warnings;
|
||||
}
|
||||
|
||||
const joinRules = roomToLeave.currentState.getStateEvents('m.room.join_rules', '');
|
||||
if (joinRules) {
|
||||
const rule = joinRules.getContent().join_rule;
|
||||
if (rule !== "public") {
|
||||
|
|
@ -1556,7 +1573,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
|
|||
} else if (request.pending) {
|
||||
ToastStore.sharedInstance().addOrReplaceToast({
|
||||
key: 'verifreq_' + request.channel.transactionId,
|
||||
title: request.isSelfVerification ? _t("Self-verification request") : _t("Verification Request"),
|
||||
title: _t("Verification requested"),
|
||||
icon: "verification",
|
||||
props: {request},
|
||||
component: sdk.getComponent("toasts.VerificationRequestToast"),
|
||||
|
|
|
|||
|
|
@ -46,6 +46,9 @@ function shouldFormContinuation(prevEvent, mxEvent) {
|
|||
// check if within the max continuation period
|
||||
if (mxEvent.getTs() - prevEvent.getTs() > CONTINUATION_MAX_INTERVAL) return false;
|
||||
|
||||
// As we summarise redactions, do not continue a redacted event onto a non-redacted one and vice-versa
|
||||
if (mxEvent.isRedacted() !== prevEvent.isRedacted()) return false;
|
||||
|
||||
// Some events should appear as continuations from previous events of different types.
|
||||
if (mxEvent.getType() !== prevEvent.getType() &&
|
||||
(!continuedTypes.includes(mxEvent.getType()) ||
|
||||
|
|
@ -452,6 +455,20 @@ export default class MessagePanel extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
_getNextEventInfo(arr, i) {
|
||||
const nextEvent = i < arr.length - 1
|
||||
? arr[i + 1]
|
||||
: null;
|
||||
|
||||
// The next event with tile is used to to determine the 'last successful' flag
|
||||
// when rendering the tile. The shouldShowEvent function is pretty quick at what
|
||||
// it does, so this should have no significant cost even when a room is used for
|
||||
// not-chat purposes.
|
||||
const nextTile = arr.slice(i + 1).find(e => this._shouldShowEvent(e));
|
||||
|
||||
return {nextEvent, nextTile};
|
||||
}
|
||||
|
||||
_getEventTiles() {
|
||||
this.eventNodes = {};
|
||||
|
||||
|
|
@ -503,6 +520,7 @@ export default class MessagePanel extends React.Component {
|
|||
const mxEv = this.props.events[i];
|
||||
const eventId = mxEv.getId();
|
||||
const last = (mxEv === lastShownEvent);
|
||||
const {nextEvent, nextTile} = this._getNextEventInfo(this.props.events, i);
|
||||
|
||||
if (grouper) {
|
||||
if (grouper.shouldGroup(mxEv)) {
|
||||
|
|
@ -519,22 +537,12 @@ export default class MessagePanel extends React.Component {
|
|||
|
||||
for (const Grouper of groupers) {
|
||||
if (Grouper.canStartGroup(this, mxEv)) {
|
||||
grouper = new Grouper(this, mxEv, prevEvent, lastShownEvent);
|
||||
grouper = new Grouper(this, mxEv, prevEvent, lastShownEvent, nextEvent, nextTile);
|
||||
}
|
||||
}
|
||||
if (!grouper) {
|
||||
const wantTile = this._shouldShowEvent(mxEv);
|
||||
if (wantTile) {
|
||||
const nextEvent = i < this.props.events.length - 1
|
||||
? this.props.events[i + 1]
|
||||
: null;
|
||||
|
||||
// The next event with tile is used to to determine the 'last successful' flag
|
||||
// when rendering the tile. The shouldShowEvent function is pretty quick at what
|
||||
// it does, so this should have no significant cost even when a room is used for
|
||||
// not-chat purposes.
|
||||
const nextTile = this.props.events.slice(i + 1).find(e => this._shouldShowEvent(e));
|
||||
|
||||
// make sure we unpack the array returned by _getTilesForEvent,
|
||||
// otherwise react will auto-generate keys and we will end up
|
||||
// replacing all of the DOM elements every time we paginate.
|
||||
|
|
@ -651,6 +659,7 @@ export default class MessagePanel extends React.Component {
|
|||
showReactions={this.props.showReactions}
|
||||
layout={this.props.layout}
|
||||
enableFlair={this.props.enableFlair}
|
||||
showReadReceipts={this.props.showReadReceipts}
|
||||
/>
|
||||
</TileErrorBoundary>
|
||||
</li>,
|
||||
|
|
@ -1032,7 +1041,7 @@ class RedactionGrouper {
|
|||
return panel._shouldShowEvent(ev) && ev.isRedacted();
|
||||
}
|
||||
|
||||
constructor(panel, ev, prevEvent, lastShownEvent) {
|
||||
constructor(panel, ev, prevEvent, lastShownEvent, nextEvent, nextEventTile) {
|
||||
this.panel = panel;
|
||||
this.readMarker = panel._readMarkerForEvent(
|
||||
ev.getId(),
|
||||
|
|
@ -1041,9 +1050,15 @@ class RedactionGrouper {
|
|||
this.events = [ev];
|
||||
this.prevEvent = prevEvent;
|
||||
this.lastShownEvent = lastShownEvent;
|
||||
this.nextEvent = nextEvent;
|
||||
this.nextEventTile = nextEventTile;
|
||||
}
|
||||
|
||||
shouldGroup(ev) {
|
||||
// absorb hidden events so that they do not break up streams of messages & redaction events being grouped
|
||||
if (!this.panel._shouldShowEvent(ev)) {
|
||||
return true;
|
||||
}
|
||||
if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -1055,6 +1070,9 @@ class RedactionGrouper {
|
|||
ev.getId(),
|
||||
ev === this.lastShownEvent,
|
||||
);
|
||||
if (!this.panel._shouldShowEvent(ev)) {
|
||||
return;
|
||||
}
|
||||
this.events.push(ev);
|
||||
}
|
||||
|
||||
|
|
@ -1080,13 +1098,10 @@ class RedactionGrouper {
|
|||
);
|
||||
|
||||
const senders = new Set();
|
||||
let eventTiles = this.events.map((e) => {
|
||||
let eventTiles = this.events.map((e, i) => {
|
||||
senders.add(e.sender);
|
||||
// In order to prevent DateSeparators from appearing in the expanded form,
|
||||
// render each member event as if the previous one was itself.
|
||||
// This way, the timestamp of the previous event === the
|
||||
// timestamp of the current event, and no DateSeparator is inserted.
|
||||
return panel._getTilesForEvent(e, e, e === lastShownEvent);
|
||||
const prevEvent = i === 0 ? this.prevEvent : this.events[i - 1];
|
||||
return panel._getTilesForEvent(prevEvent, e, e === lastShownEvent, this.nextEvent, this.nextEventTile);
|
||||
}).reduce((a, b) => a.concat(b), []);
|
||||
|
||||
if (eventTiles.length === 0) {
|
||||
|
|
@ -1114,7 +1129,7 @@ class RedactionGrouper {
|
|||
}
|
||||
|
||||
getNewPrevEvent() {
|
||||
return this.events[0];
|
||||
return this.events[this.events.length - 1];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2020, 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.
|
||||
|
|
@ -20,17 +20,21 @@ import classNames from "classnames";
|
|||
import defaultDispatcher from "../../dispatcher/dispatcher";
|
||||
import { _t } from "../../languageHandler";
|
||||
import { ActionPayload } from "../../dispatcher/payloads";
|
||||
import { Key } from "../../Keyboard";
|
||||
import AccessibleButton from "../views/elements/AccessibleButton";
|
||||
import { Action } from "../../dispatcher/actions";
|
||||
import RoomListStore from "../../stores/room-list/RoomListStore";
|
||||
import { NameFilterCondition } from "../../stores/room-list/filters/NameFilterCondition";
|
||||
import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
|
||||
import {replaceableComponent} from "../../utils/replaceableComponent";
|
||||
import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
|
||||
|
||||
interface IProps {
|
||||
isMinimized: boolean;
|
||||
onVerticalArrow(ev: React.KeyboardEvent): void;
|
||||
onEnter(ev: React.KeyboardEvent): boolean;
|
||||
onKeyDown(ev: React.KeyboardEvent): void;
|
||||
/**
|
||||
* @returns true if a room has been selected and the search field should be cleared
|
||||
*/
|
||||
onSelectRoom(): boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
|
@ -53,6 +57,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
|
|||
};
|
||||
|
||||
this.dispatcherRef = defaultDispatcher.register(this.onAction);
|
||||
// clear filter when changing spaces, in future we may wish to maintain a filter per-space
|
||||
SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.clearInput);
|
||||
}
|
||||
|
||||
public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>): void {
|
||||
|
|
@ -72,6 +78,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
|
|||
|
||||
public componentWillUnmount() {
|
||||
defaultDispatcher.unregister(this.dispatcherRef);
|
||||
SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.clearInput);
|
||||
}
|
||||
|
||||
private onAction = (payload: ActionPayload) => {
|
||||
|
|
@ -108,18 +115,26 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
|
|||
};
|
||||
|
||||
private onKeyDown = (ev: React.KeyboardEvent) => {
|
||||
if (ev.key === Key.ESCAPE) {
|
||||
this.clearInput();
|
||||
defaultDispatcher.fire(Action.FocusComposer);
|
||||
} else if (ev.key === Key.ARROW_UP || ev.key === Key.ARROW_DOWN) {
|
||||
this.props.onVerticalArrow(ev);
|
||||
} else if (ev.key === Key.ENTER) {
|
||||
const shouldClear = this.props.onEnter(ev);
|
||||
if (shouldClear) {
|
||||
// wrap in set immediate to delay it so that we don't clear the filter & then change room
|
||||
setImmediate(() => {
|
||||
this.clearInput();
|
||||
});
|
||||
const action = getKeyBindingsManager().getRoomListAction(ev);
|
||||
switch (action) {
|
||||
case RoomListAction.ClearSearch:
|
||||
this.clearInput();
|
||||
defaultDispatcher.fire(Action.FocusComposer);
|
||||
break;
|
||||
case RoomListAction.NextRoom:
|
||||
case RoomListAction.PrevRoom:
|
||||
// we don't handle these actions here put pass the event on to the interested party (LeftPanel)
|
||||
this.props.onKeyDown(ev);
|
||||
break;
|
||||
case RoomListAction.SelectRoom: {
|
||||
const shouldClear = this.props.onSelectRoom();
|
||||
if (shouldClear) {
|
||||
// wrap in set immediate to delay it so that we don't clear the filter & then change room
|
||||
setImmediate(() => {
|
||||
this.clearInput();
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue