This shows the title and shortcode for the hovered reaction at the bottom of the
tooltip. If nothing is hovered, a blank space is shown for now, but will
eventually become a link to a full emoji picker in future work.
Part of https://github.com/vector-im/riot-web/issues/9753
This removes the v1 Reactions UX which only allowed you to choose only one emoji
out of each pair. It is replaced by a different UX inside a tooltip and without
these constraints.
Part of https://github.com/vector-im/riot-web/issues/9753
This reworks the API the `InteractiveTooltip` component so that it's more
natural to use just like other React components. You can now supply the target
component as a child and the tooltip content as a prop.
In addition, this tweaks the interactivity to keep the tooltip on screen until
you move the mouse away from the tooltip and its target.
Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
This adjusts the positioning to work more the way we want:
* Tooltip is position on the top or bottom edge of the target depending on where
space is available
* Tooltip and chevron are centered
In addition, more bits borrowed from `ContextualMenu` are not needed, so they
have been removed for simplicity.
Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
As part of reactions and editing work, we're adding a new style of tooltip that
allows interacting with the content of the tooltip. `ContextualMenu` is closest
out of the things we have today, but it doesn't position in quite the way we
want and it's already quite complex.
To get started, let's first clone that to a new `InteractiveTooltip`.
Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
as the autocomplete is now very eager to appear, this breaks
caret navigation when typing e.g. anything with a colon.
Ideally, we should make the AC less eager to appear,
but this is a quick fix for now.
The cancellation can be because of a background problem, or because the user received another verification request from the same user. The cancel function does get called, however due to the speed of our dialog handling the state ends up being lost forever. Instead of trying to de-layer dialogs, this just fastforwards the whole dialog to "cancelled" on mount if required.
Fixes https://github.com/vector-im/riot-web/issues/10118
My brain can't deal with two different ways to write "Tooltip", so this
converges the naming to match the rest of the code base. Separate commits will
fix up the file names for case-insensitive file systems.
This moves the responsibility of creating a URL to open from the button (and other components) to the integrations manager dialog itself.
By doing this, we also cut down on scalar API calls because we don't pick up on account information until the user opens the dialog.
This aligns the message context menu on either the top or the bottom of the
button that triggers, depending on which side has more space available to fit
the menu.
Fixes https://github.com/vector-im/riot-web/issues/9624
This changes the message context menu to align the right edge of the menu with
the right edge of the button that opens it, which should keep all menu options
inside the viewport, even if they are very wide.
Part of https://github.com/vector-im/riot-web/issues/9624
This changes the message action bar to force an update after an event decrypts,
since it's quite likely that changes the set of available actions.
Fixes https://github.com/vector-im/riot-web/issues/9991
When the user was on an invite page and clicked the sign up/sign in
buttons, remember that invite so we can show it again after they're
done signing up/in.
https://github.com/vector-im/riot-web/issues/9816
Riot was always saying the email address that the invite was sent
to was not associated with your account.
Two fixes here:
1. We mounted RoomPreviewBar with no invitedEmail prop and then
changed the prop later, but RoomPreviewBar only checked for it
on mount. Make sure we re-check when the props change.
2. Pass oobData through RoomPreviewBar because we need to pass it
to the RoomAvatar for 3pid invites.
https://github.com/vector-im/riot-web/issues/9816
This makes the reaction row buttons take the current count as prop as an easy
way of ensuring they always trigger an update when the count changes.
Fixes https://github.com/vector-im/riot-web/issues/9954
This performs liveliness checks on the auth pages to try and show a friendlier error. Earlier checks in the app startup are expected to not block the app from loading on such failures.
See https://github.com/vector-im/riot-web/issues/9828
The RoomTile gets remounted during logout due to the room stores being obliterated, however this causes the render() function to check if it should be showing custom status. If you have custom status enabled, and the person has a status set, the function errors due to no MatrixClient being available.
Fixes https://github.com/vector-im/riot-web/issues/9940
This changes read receipt sending logic to allow it advance further into events
without tiles (such as edits or reactions) that may exist after the last
displayed event.
By allowing the read receipt to advance past such events, this also marks as
read any related notifications. For example, edits trigger notifications by
default since they are `m.room.message` events, and with this change, such edit
notifications can finally be marked read.
Part of https://github.com/vector-im/riot-web/issues/9745
If the debugging mode of showing hidden events in the timeline is enabled, we
should also show replacements using the same view source tile as we do for
reactions. This allows easy debugging of replacement event data and also makes
the edit event look visually distinct from regular messages.
Fixes https://github.com/vector-im/riot-web/issues/9937
Issue described in https://github.com/vector-im/riot-web/issues/9690.
With certain `window.devicePixelRatio` values
(e.g. `1.5789473684210527`), the calculated thumb width/height
would be a non-integer value.
Passing such values to `client.mxcUrlToHttp()` causes it to
generate URLs to the thumbnail API with non-integer values.
As per the spec, non-integer values are forbidden for that API and a
400 HTTP response is returned (`Query parameter b'width' must be an
integer`).
Fixing matrix-js-sdk's `mxcUrlToHttp()` to sanitize such values
would also be a good idea and likely fix more than just matrix-react-sdk
and riot-web. Still, it feels like matrix-react-sdk should play nice
as well, and not request thumbnails for weird widths/heights.
Signed-off-by: Slavi Pantaleev <slavi@devture.com>
The short time is still read out (eg: 15:24), however by ignoring the anchor we prevent the reader from saying the title of the containing span. This prevents readers saying "Wed May 22, 2019 at 15:24 15:24".
See https://github.com/vector-im/riot-web/issues/9747
We previously sent it in componentWillMount of the email token
auth component which definitely gets us on react's naughtly list.
We now pass the js-sdk a callback it can call at the appropriate
time to send the token (https://github.com/matrix-org/matrix-js-sdk/pull/926).
We should make password reset and adding email addresses work the
same way, but currently they don't even use the interactive-auth
helpers(!) so they're unaffected.
https://github.com/vector-im/riot-web/issues/9586
This fixes an error that crashed that notifications panel because it was trying
to read reactions, even though we currently don't aggregate them there. This
change is more explicit about exactly which views should try to show reactions.
Fixes https://github.com/vector-im/riot-web/issues/9713
This limits the number of senders shown in the reaction sender tooltip shown
when hovering a reaction to 6 people followed by "and N others" for the rest.
Fixes https://github.com/vector-im/riot-web/issues/9722
We use a trick with refs to automatically focus the element, also making use of mx_HiddenFocusable to hide the unnecessary outline.
The menu itself has been restructured to hide some elements from screen readers (reduce noise) and to have a single unordered list. Screen readers mention when the user "enters" a list, and each item was previously saying "enter list <action>" when it should have just been "<action>".
By focusing automatically, the keyboard can be used to go up/down the menu as may be expected by keyboard users.
the buttons below the composer are overlayed onto the previous event.
In case of the last event, for now we make them not overflow, but make the
tile grow. The design says it should overlay on the main composer for the last
event tile, postponing that for a bit though as not sure what is the best way
to do that.
This adds a first attempt at tooltip showing who reacted to a message. It
doesn't limit senders or position the tooltip nicely, but the info is there at
least.
Part of https://github.com/vector-im/riot-web/issues/9722
so we can have fallback content in the regular content for clients
that don't support edits. Note that we're not reading m.new_content
yet as it's going to be a bit of a headache to change this.
So for now just sending the edit in both the normal content and
the m.new_content subfield, so all events out there already
are well-formed
In the case of room upgrades, it is possible the client is trying to render the room create event, but the user has never been in the old room. This results in an error because the PermalinkCreator cannot possibly figure out a room ID.
Instead, we'll feed the creator an alternate room ID to try if the room object can't be provided.
Fixes https://github.com/vector-im/riot-web/issues/9636
When displaying a GIF, we always want to thumbnail so that we can properly
respect the user's GIF autoplay setting (which relies on thumbnailing to produce
the static preview image).
Fixes https://github.com/vector-im/riot-web/issues/9658
This changes to "did update" and also calls the reaction change handler to
ensure that we update the state of my reactions (to know which were sent by
you).
This simplifies `ReactionDimension` by using the emoji string everywhere instead
of keeping a separate text string as well. It should improve readability as
well, as the reaction events also have a field `key` which was the emoji
content, which was easy to confuse.
This makes it a bit easier to meet the requirements while still requiring a
fairly strong value. The progress bar displays a score of 3 as reaching 100% for
simplicity.
Fixes https://github.com/vector-im/riot-web/issues/9642
This repairs access to the "Quote" option of the message context menu by passing
down a getter so that we always access the most recent tile and reply thread
instances. This ensures the context menu uses the newest information about the
current event when determining menu options to show.
Fixes https://github.com/vector-im/riot-web/issues/9639
The configuration flag is intentionally long and annoying - the vast majority of people should not need this. The flag is intended to be used in development environments where accounts are often registered with no intention of them sticking around.
Very similar to password resets and registration, the components pass around a server config for usage by other components. Login is a bit more complicated and needs a few more changes to pull the logic out to a more generic layer.
All `Room.timeline*` handlers must currently test for `room` first if they
expect it to exist. It is emitted not only for rooms, but also for timeline sets
without rooms, such as for notifications.
Almost all such handlers were correctly testing as needed, but it was missing
from `RoomBreadcrumbs`.
While that's quite confusing, we can start by testing for `room` when we expect
to have one.
Fixes https://github.com/vector-im/riot-web/issues/9630
This allows you to increment an existing reaction below a message by clicking on
it.
At the moment, this is not linked to the action bar, so they each are using
local state. We'll likely want to add some mechanism so that we can local echo
to both of these UI areas at the same time, but that can be done separately.
Fixes https://github.com/vector-im/riot-web/issues/9486
This displays the existing reactions a message has from all users below the
message.
Since we don't currently have an API to actually get these events yet,
adds a temporary hook that looks for a specific message to inject some sample
data. This helps build out the UI for now and can be removed once it exists.
Fixes https://github.com/vector-im/riot-web/issues/9573
Concludes https://github.com/vector-im/riot-web/issues/8593
We are no longer seeing this error being triggered, and are considering it fixed. As a result, the dialog can be removed to reduce the amount of dead code in the project.
This adds the primary reactions to the action bar. They act as toggles where you
can only select one from each group at a time.
Note that currently we aren't actually sending the reaction at all. That's left
for a separate task.
Fixes https://github.com/vector-im/riot-web/issues/9576
This removes the clickable inviter behaviour, as it was too confusing to reveal
the user info sidebar and also hide the invite. Keeping both on screen would be
okay, but seems a bit too complex to resolve right before RC.
In addition, this adds the full inviter MXID to ensure it's clear who invited
you.
This applies the new design for multiple buttons in the message action bar,
paving the way for more things to appear here.
In addition, this changes the existing options button to use the three vertical
dots icon. Some theme colors are also tweaked to align with what they were meant
to be from the unified palette.
This adds a new action bar component to hold multiple per-message actions. This
existing options button has moved to this new component, and is currently the
only action.
This naming is clearer as it doesn't really edit at all (it shows a context
menu). This should also be less confusing with actual editing when it arrives.
Now that we have a fancier password complexity check, remove the older minimum
length to avoid the feeling of two password style guides fighting each other.
This adds a password complexity rule during registration to require strong
passwords. This is based on the `zxcvbn` module that we already use for key
backup passphrases.
In addition, this also tweaks validation more generally to allow rules to be
async functions.
In addition to migrating password fields, this also removes the remaining
support for old-style validation in registration now that all checks have been
converted.
When submitting a form, we want to validate more strictly to check for empty
values that might be required. A separate mode is used since we want to ignore
this issue when visiting a field one by one to enter data.
As an example, we convert the pre-existing logic for the username requirement
using this new support.
Since we're keeping the input as a ref anyway, let's use that rather than
requiring the value to be passed to `validate`. This allows others to call
`validate` as well.
This adjusts the submission step to focus the first invalid field and redisplay
validation. This also rearranges the older style field error handling on
registration which is slated for removal once we convert all fields to the new
style.
This updates the registration form to include the new-style validation state
when deciding whether the entire form is valid overall.
In addition, this tweaks the validation helper to take functions instead of
strings for translated text. This allows the validation helper to be create once
per component instead of once every render, which improves performance.
Alt-enter is a common macOS shortcut for inserting a new line in an
input that has a separate action tied to the enter key.
Signed-off-by: Ross Brandes <ross.brandes@gmail.com>
This makes the key backup panel much more explicit about the case where an
existing backup does exist, but this device just isn't using it. You can join
the device to the backup and restore from it by going through the restore
workflow.
Fixes https://github.com/vector-im/riot-web/issues/9446
To avoid confusion with other components that also might be named Avatar
Signed-off-by: YaoiFangirl420 <48789208+YaoiFangirl420@users.noreply.github.com>
To reduce the complexity in render(), move the format bar rendering to a
separate method
Signed-off-by: YaoiFangirl420 <48789208+YaoiFangirl420@users.noreply.github.com>
Make the user avatar a separate function component, make the logic for
laying out components a little more concise
Signed-off-by: YaoiFangirl420 <48789208+YaoiFangirl420@users.noreply.github.com>
Make the call/voice-call/hangup buttons separate react components
to reduce the amount of complexity on MessageComposer.
Signed-off-by: YaoiFangirl420 <48789208+YaoiFangirl420@users.noreply.github.com>
We might not have the device in `sig.device`, so we have to check for it's
existence first. This fixes the "Unable to load key backup status" message that
is incorrectly triggering.
Fixes https://github.com/vector-im/riot-web/issues/9442
The `BottomLeftMenu` component is not used in the new design. This removes the
component and also any images and sub-components that were only used by it.
The class name handling for validation inadvertently added `undefined` as a
class when validation is not used. This rearranges the logic to avoid the issue.
Fixes https://github.com/vector-im/riot-web/issues/9345
Rooms which are already upgraded shouldn't be asked to upgrade. Additionally, this fixes a bug where the room upgrade dialog would stay open even after upgrading the room.
Fixes an issue where hovering over the breadcrumbs could cause hundreds of web requests due to updates. This also fixes https://github.com/vector-im/riot-web/issues/9390 as the update is more reliable.
Add i18n entries for rotating images; fix the way `getName` is defined
Signed-off-by: YaoiFangirl420 <48789208+YaoiFangirl420@users.noreply.github.com>
Little bit of a mix of things in this one:
* Support variable-width dialogs. Default is fixed-width as before,
only UploadConformDialog is variable-width. Controlled by a prop
to BaseDialog.
* Fixes to the cancel 'x' - scale the mask image, tweak size & colour
* Colour & boldness of dialog titles
* Align the dialog title & cancel 'x'
* Remove gap between dialog buttons & right hand side of dialog(!)
* Round corners on dialogs
* Add grey border on image preview in upload confirm dialog
* and, squeezing in slightly randomly, finish the partially renamed
ChatInviteDialog to AddressPickerDialog.
This ensures we always include the current power level in the power selector,
even if it's greater than the level you're allowed to set yourself. This ensures
the selector can display the current value correctly when disabled.
Fixes https://github.com/vector-im/riot-web/issues/9340
Fixes https://github.com/vector-im/riot-web/issues/9353
The ContextualMenu now accepts a zIndex parameter which can be used to control its level. Dialogs are at around 4000 in the z-index, and the context menu defaults to 5000 for the things that need tooltips and such in a dialog.
When setting, delete the old one. Because delete checks if it exists first, we can safely call this.
The change in FromWidgetPostMessageApi is just something noticed while debugging.
Fixes https://github.com/vector-im/riot-web/issues/9354https://github.com/matrix-org/matrix-react-sdk/pull/2801 introduced a change which tried to make sure that when the widget URL was changed that the picker would be re-mounted, however it accidentally introduced a regression. While it effectively did the task it wanted to, it failed to keep the previously-mounted sticker picker alive. This is because the Stickerpicker component is remounted when opened, and the _updateWidget function is called. This results in this.state not having the "current" widget, meaning a URL change is always detected when the component is remounted (room changes, open sticker picker).
Instead of remounting always, we'll instead track which sticker picker widget is being used out of band. This therefore means that whenever the Stickerpicker component is mounted it doesn't create a whole new widget, and the existing (background) picker can be used. This also fixes the loading screen that people would see when opening the sticker picker after switching rooms, something which the persistent widget stuff is supposed to solve.
This uses the field component in the bug report dialog, which generally improves
the styling to fit in more naturally with the rest of the app so that it feels
more trustworthy.
Fixes https://github.com/vector-im/riot-web/issues/9343
Also fairly significant refactor of the uploading code: there are
a number of different ways of triggerring a file upload and each
went through a different code path (the media config size limit
worked on one of those paths). Basically take a lot of code out
of the views and put it into ContentMessages.
Sorry about the size of this patch.
https://github.com/vector-im/riot-web/issues/7565
Fixes https://github.com/vector-im/riot-web/issues/8605
The grey screen of sadness comes up when Chrome tries to open the PDF but doesn't have the right CSP headers. To avoid this, we'll just force a download of the PDF through `fetch` and `Blob`.
There are a few cases where the user might still get a grey screen though: namely if they open the URL in a new tab or when the event content is lying about the file type, or the file is too large to blobify.
`fetch` works in Chrome, Firefox, and our packaged Electron version.
If we have account data in local storage but nothing in the crypto store, it
generally means the browser has evicted IndexedDB out from under us. This adds a
modal to explain the situation and offer to completely clear storage to get
things back to normal.
Fixes https://github.com/vector-im/riot-web/issues/9109
Fixes https://github.com/vector-im/riot-web/issues/8714
Fixes https://github.com/vector-im/riot-web/issues/8890
Fixes https://github.com/vector-im/riot-web/issues/9034
Fixes https://github.com/vector-im/riot-web/issues/8954
This turned out to be much more complicated than it needed to be. We use an IndicatorScrollbar to do all the math for us and some minor changes have been made so it can flag left/right overflow. The complicated part is the css changes which make the gradients work: unlike the RoomSubList, we have to calculate the offset of the indicators (gradients) on our own because position:sticky doesn't work horizontally.
The changes to the css (well, mostly pointer-events:none) make it so the gradient doesn't interfere with the room avatars.
9034 and 8954 are fixed by this because they represent an overflow-x:none style breakage where browsers won't let you scroll without a scrollbar. The gradient offset problem is also demonstrated in 8954.
Having the referrer allows widgets to do customisation based on what
riot instance is embedding it. It gets a referrer when we embed it
in the iframe so there's nothing gained by suppressing it here.
This clarifies that the notification settings only apply to the current device.
This also tries to apply the spirit of
https://github.com/matrix-org/matrix-react-sdk/pull/1995 (authored by @aidalgol)
which wanted to remove "web" from the label, since there's also a desktop
client.
