* Remove an obsolete style block related to highlighting from _IRCLayout.pcss
Initially it has been added with this commit 67249e1e9c for the implementation of IRC layout, but the border declarations for highlighting were removed with this commit 3a2aa9d96c to replace the 'border-left' declaration with the 'box-shadow' declaration.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use grid layout instead
- BEM naming style
- Increase block gap from 4px to 8px
- Use flexbox inside 'header' grid-area to let the buttons wrapped
- Use variables
- Remove 4px gap when one of the buttons is not rendered
- Change 'body' to 'message'
- Set 'align-self: start' to the icon and spinner
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Unset height of spinner
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Break lines at newline characters with white-space: pre-line
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Edit tests to check decryption failure bars on narrow timeline
- checkTimelineNarrow() looks for buttons by default
- Test indicator as well
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a line
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Edit the test to have it check mx_EventTile_last only inside mx_RoomView_body
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix double underscores
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix double underscores - pcss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Iterate - buttons at the bottom
- Set common spacing to buttons with variables
- Remove line breaks, yarn run i18n
- Set data-testid for headlines and buttons in case the tested strings would be displayed elsewhere simultaneously
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check waiting headline as well
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Increase spacing between the message and the buttons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* lint
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Increase block gap between wrapped buttons for clickability
Apply 8px between wrapped buttons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Revert bottom margin of buttons which are not expected to be wrapped
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check visibility instead of existence
This commit removes data-testid from headlines and data-testid-button and checks whether the elements are really visible, not overflowing the viewport.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove redundant gap between 'mx_DecryptionFailureBar_start' and the bottom edge
This commit adds '.mx_DecryptionFailureBar--withEnd' class name to have it applied to the bar only if it has button(s). This way the bar is rendered with a flexbox and the row-gap declaration is respected only if there is a 'mx_DecryptionFailureBar--withEnd' element. The element currently includes the button(s) only.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* lint - prettier
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Have Percy take a snapshot of the bar loading spinner before checkTimelineNarrow()
The loading spinner is likely to disappear while checking the bar on the narrow timeline.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Kerry <kerrya@element.io>
* Fix flaky Percy tests of ReplyChain
- Add media query for percy on _ReplyChain.pcss to apply the same color to vertical strokes (border-left)of ReplyChain
- Use CSS variables for visibility
- Manage those variables on _common.pcss for maintainability
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check receptSent as well for consistency
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add a comment
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Specify zero spacing and remove list-style
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* bumps the RTE dependency to introduce user/room mention handling
* adds autocomplete behaviour to allow users to insert user and room mentions as links
* sets up tests for the autocomplete behaviour
* Set expected line height to an expanded GELS line on IRC layout, add a test
* Add a test for compact modern/group layout
* Create a new test category on timeline.spec.ts
* Rename the class name as 'spacer'
* Add a test for GELS' spacer on bubble layout
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Germain <germain@souquet.com>
* Prevent long name blowout from Replytile on IRC layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add a test to check long strings do not overflow
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Sort declarations based on .mx_IRCLayout .mx_EventTile .mx_DisambiguatedProfile
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This PR adds the flex declaration to mx_RoomHeader_button to prevent the buttons from being compressed due to a long room name, copying the whole declarations from mx_RightPanel_headerButton for reference.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Revert "Apply more general fix for base avatar regressions (#10045)"
This reverts commit 371a3c0d36.
* Revert "Fix layout and visual regressions around default avatars (#10031)"
This reverts commit 0d1fce37b2.
* Revert "Member avatars without canvas (#9990)"
This reverts commit a8aa4de4b4.
* Update snapshots
* Strict typechecking fixes for Base/Member/Avatar
Update the core avatar files to pass `--strict --noImplicitAny` typechecks.
Signed-off-by: Clark Fischer <clark.fischer@gmail.com>
* Add tests for Base/Member/Avatar
More thoroughly test the core avatar files. Not necessarily the most thorough,
but an improvement.
Signed-off-by: Clark Fischer <clark.fischer@gmail.com>
* Extract TextAvatar from BaseAvatar
Extracted the fallback/textual avatar into its own component.
Signed-off-by: Clark Fischer <clark.fischer@gmail.com>
* Use standard HTML for non-image avatars
Firefox users with `resistFingerprinting` enabled were seeing random noise
for rooms and users without avatars. There's no real reason to use data
URLs to present flat colors.
This converts non-image avatars to inline blocks with background colors.
See https://github.com/vector-im/element-web/issues/23936
Signed-off-by: Clark Fischer <clark.fischer@gmail.com>
* Have pills use solid backgrounds rather than colored images
Similar to room and member avatars, pills now use colored pseudo-elements
rather than background images.
Signed-off-by: Clark Fischer <clark.fischer@gmail.com>
---------
Signed-off-by: Clark Fischer <clark.fischer@gmail.com>
Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
* Applies small changes to code block display in timeline
* Makes the composer code block look like the timeline display, but without line numbers
* Adds a button to allow code blocks to be implemented
* Adds tests for the new button
* Add option to show full identifier as tooltip on sender profiles
* Show full user id as tooltip on threads list entries
* Fix broken threads list timestamp layout
Previously, thread list timestamps would overflow
into the unread messages bubble on the right.
This is fixed by resetting the width of the
timestamp and ensuring both the timestamp and the
display name can shrink if necessary.
Both now also use ellipses if necessary.
* adds buttons to toggle bulleted and numbered lists on and off
* adds icons for those buttons
* css changes to timeline display
* adds tests for the new buttons, refactors existing tests
* Remove unnecessary PipContainer component
* Redesign the picture-in-picture window
* Add a hover effect to the controls
* Clarify that WidgetPip has call-specific behavior
* Improve decryption error UI by consolidating error messages and providing instructions when possible
* Fix TS strict errors
* Rename .scss to .pcss
* Avoid accessing clipboard, Cypress doesn't like it
* Display DecryptionFailureBar alongside other AuxPanel bars
* Add comments
* Add small margin off-screen for visible decryption failures
* Fix some more TS strict errors
* Add unit tests for DecryptionFailureBar
* Add button to resend key requests manually
* Remove references to matrix-js-sdk crypto internals
* Add hysteresis to visible decryption failures
* Add comment
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Add comment
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Don't create empty div if we're not showing resend requests button
* cancel updateSessions on unmount
* Update unit tests
* Fix lint and implicit any
* Simplify visible event bounds checking
* Adjust cypress test descriptions
* Add percy snapshots
* Update src/components/structures/TimelinePanel.tsx
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Add comments on TimelinePanel IState
* comment
* Add names to percy snapshots
* Show Resend Key Requests button when there are sessions that haven't already been requested via this bar
* We no longer request keys from senders
* update i18n
* update expected text in cypress test
* don't download keys ourselves, update device info in response to updates from client
* fix ts strict errors
* visibledecryptionfailures undefined handling
* Fix implicitAny errors
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Michael Telatynski