* Manage rules related to EventTile on `_EventTile.pcss`
The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `--EventTile_irc_line_info-margin-inline-start`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_EventTile_msgOption`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_MessageTimestamp`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_EventTileBubble`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_ReplyChain`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_ReplyTile .mx_EventTileBubble`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `&.mx_EventTile_info`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Convert the variable with a custom property
To fix the syntax error "Undefined variable $irc-line-height" because of cascading order.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - '.mx_EventTile_emote'
The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Replace a Sass variable with a CSS custom property - $container-gap-width
* Replace a Sass variable with a CSS custom property - $container-border-width
* Move declarations out of `mx_EventTile:not([data-layout=bubble])`
merging style rules on _EventBubbleTile.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove an obsolete `!important` flag from `&.mx_EventTile_continuation`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove `clear: unset` declaration from EventTile on bubble layout
While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss.
Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here.
Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove `:not()` pseudo class from `_FilePanel.pcss`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove `!important` flag from `_MessageEditHistoryDialog.pcss`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a comment about overriding
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Run prettier
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Remove obsolete mx_RoomHeader_textButton and mx_RoomHeader_cancelButton
These declarations have been obsolete since GroupView.js was deleted by fce36ec826.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete mx_RoomHeader_spinner
As of 79d3cca6 it was used as follows:
````
if (this.props.saving) {
const Spinner = sdk.getComponent("elements.Spinner");
spinner = <div className="mx_RoomHeader_spinner"><Spinner /></div>;
}
````
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete mx_RoomHeader_info
This was deprecated by 18fedb23ec
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* 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>
* Give reply tile an avatar
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Improve `in reply to`
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Drop `In reply to` for `Expand thread`
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Fix avatar alignment
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Fix default avatar alignment
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Simplifie code
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Simplifie some more code
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Make replies lighter
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Give replies a hover effect
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Revert changes to sender profile in replies
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Improve padding
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Increase line height of replies
to keep descenders from being cut off, and generally give them more room
to breathe.
Signed-off-by: Robin Townsend <robin@robin.town>
* Replace reply hover effect with a color change
Signed-off-by: Robin Townsend <robin@robin.town>
* Replace expand thread hover effect with an opacity change
Signed-off-by: Robin Townsend <robin@robin.town>
* Simplify image and sticker reply designs
Signed-off-by: Robin Townsend <robin@robin.town>
* Revise file and deleted message padding to match new reply layout
Signed-off-by: Robin Townsend <robin@robin.town>
* Remove unneeded CSS
Since the download button for files got moved out of the timeline and
into the message action bar, hiding it manually is no longer necessary.
Signed-off-by: Robin Townsend <robin@robin.town>
* Hide edited indicator from replies
There are a few reasons for this: it adds visual noise to what is meant
to be a brief preview, it can sometimes add an extra line to the reply
preview, and clicking on it inside a reply was broken due to the
stacking of event listeners.
Signed-off-by: Robin Townsend <robin@robin.town>
* Fix i18n
Signed-off-by: Robin Townsend <robin@robin.town>
* "Expand thread" -> "Expand replies"
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Add a missing import
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Remove unused import
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Remove unused import
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Use `this.state`
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Fix sender profile confusion
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Implement suggested changes
* Make "In reply to" the same color as reply previews
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
Signed-off-by: Robin Townsend <robin@robin.town>
Co-authored-by: Robin Townsend <robin@robin.town>
* Update our cancel icon
The cancel icon we're using in the app has drifted out of sync with the ones used in our designs. We also had two identical-looking icons, so this consolidates them into one.
I've simultaneously updated our chevron icons, since in the case of the 'jump to unread' timeline button, it became clear that the weight of the new close icon did not match the thinner chevron.
* Don't squish bottom/top-aligned tooltips near the edge of the screen
* Close the timeline panel when returning to the fullscreen timeline view
* Add layout switching capabilities to ElementCall
* Bring the room header in line with the group call designs
* Bring the PiP header in line with the group call designs
* Fix lints
* Clarify tooltip CSS calculations
* Test PipView
* Expand RoomHeader test coverage
* Test PipView more
It gives an empty room topic a height of 1px and does not seem to accomplish much else.
Signed-off-by: Arne Wilken arnepokemon@yahoo.de
Signed-off-by: Arne Wilken arnepokemon@yahoo.de
* Add an element_call_url config option
* Add a labs flag for Element Call video rooms
* Add Element Call as another video rooms backend
* Consolidate event power level defaults
* Remember to clean up participantsExpirationTimer
* Fix a code smell
* Test the clean method
* Fix some strict mode errors
* Test that clean still works when there are no state events
* Test auto-approval of Element Call widget capabilities
* Deduplicate some code to placate SonarCloud
* Fix more strict mode errors
* Test that calls disconnect when leaving the room
* Test the get methods of JitsiCall and ElementCall more
* Test Call.ts even more
* Test creation of Element video rooms
* Test that createRoom works for non-video-rooms
* Test Call's get method rather than the methods of derived classes
* Ensure that the clean method is able to preserve devices
* Remove duplicate clean method
* Fix lints
* Fix some strict mode errors in RoomPreviewCard
* Test RoomPreviewCard changes
* Quick and dirty hotfix for the community testing session
* Revert "Quick and dirty hotfix for the community testing session"
This reverts commit 37056514fbc040aaf1bff2539da770a1c8ba72a2.
* Fix the event schema for org.matrix.msc3401.call.member devices
* Remove org.matrix.call_duplicate_session from Element Call capabilities
It's no longer used by Element Call when running as a widget.
* Replace element_call_url with a map
* Make PiPs work for virtual widgets
* Auto-approve room timeline capability
Because Element Call uses this now
* Create a reusable isVideoRoom util
* Add Voice Broadcast labs setting and composer button
* Implement strict typing
* Extend MessageComposer-test
* Extend tests
* Revert some strict type fixex
* Convert FEATURES to enum; change case
* Use fake timers in MessageComposer-test
* remove the grey gradient on images in the timeline
given we now show timestamps with a nice lozenge overlay,
so the gradient is unnecessary and just screws up the image.
fixes https://github.com/vector-im/element-web/issues/21651
* put a lozenge on the timestamp rather than evil gradient
* Improve accessibility and testability of Tooltip
Adding a role to Tooltip was motivated by React Testing Library's
reliance on accessibility-related attributes to locate elements.
* Make the ReadyWatchingStore constructor safer
The ReadyWatchingStore constructor previously had a chance to
immediately call onReady, which was dangerous because it was potentially
calling the derived class's onReady at a point when the derived class
hadn't even finished construction yet. In normal usage, I guess this
never was a problem, but it was causing some of the tests I was writing
to crash. This is solved by separating out the onReady call into a start
method.
* Rename 1:1 call components to 'LegacyCall'
to reflect the fact that they're slated for removal, and to not clash
with the new Call code.
* Refactor VideoChannelStore into Call and CallStore
Call is an abstract class that currently only has a Jitsi
implementation, but this will make it easy to later add an Element Call
implementation.
* Remove WidgetReady, ClientReady, and ForceHangupCall hacks
These are no longer used by the new Jitsi call implementation, and can
be removed.
* yarn i18n
* Delete call map entries instead of inserting nulls
* Allow multiple active calls and consolidate call listeners
* Fix a race condition when creating a video room
* Un-hardcode the media device fallback labels
* Apply misc code review fixes
* yarn i18n
* Disconnect from calls more politely on logout
* Fix some strict mode errors
* Fix another updateRoom race condition
* Apply inline start margin to info event tile line to align the right edge with normal event tile lines
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Rename the variable
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add a test to check inline start margin
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Rerun CI
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Improve tests a little bit
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move &.mx_EventTile_isEditing and &.mx_EventTile_selected out of mx_EventTile:not([data-layout=bubble])
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use common variables for selected lines and hovered lines
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge style blocks for mx_EventTile_line
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Specify positon of RR on IRC layout on _EventTile.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Manage a declaration for position of RR on modern/group layout on _EventTile.scss, instead of applying it as a default one
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use logical properties
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include mx_ReadReceiptGroup in mx_EventTile_msgOption to prevent a regression
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Manage style blocks of mx_ReadReceiptGroup for every layout on one file
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use logical properties
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include mx_ReadReceiptGroup in mx_EventTile_msgOption for bubble layout same as the other layouts
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include mx_ReadReceiptGroup in mx_EventTile_msgOption on TimelineCard
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group]
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group]
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use variables
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply avatar position settings to modern/group layout only
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete style block
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove inline padding setting from mx_EventTile_line
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use a correct variable
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix misalignment of avatars and textual events on IRC layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Align avatars and hidden events on IRC layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete opacity value for E2E icons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* The opacity declaration is not required after all
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move mx_EventTile_searchHighlight out of mx_EventTile:not([data-layout=bubble]) to enable it on bubble layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use a logical property
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move mx_EventTile out of mx_EventTile:not([data-layout=bubble]) in mx_ThreadView
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use a logical property
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a redundant declaration
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply zero inline start padding to group layout only
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Reorder style blocks; irc/group before bubble
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move styles for mx_EventTile_avatar of info event lines on ThreadView out of :not() pseudo class
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move styles in mx_GenericEventListSummary on ThreadView out of :not() pseudo class
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Shorthand for inline margin
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* yarn run lint:style --fix
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Re-add margin to HistoryTile, which is based on EventTileBubble
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Readd margin to the other tiles based on EventTileBubble
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Default margin is not required for mx_MJitsiWidgetEvent as it appears inside EventTile
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Cancel left value for cryptoEvent on IRC layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply margin to EventTileBubble on each layout
Use a variable to ensure alignment of EventTileBubble on IRC layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Improve style rules
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply the same block margin to every layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move ':hover.mx_EventTile_verified .mx_EventTile_line' etc out of mx_EventTile:not([data-layout=bubble])
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use variables
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge mx_EventTile_line on hover
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply inline start padding effect on hovering info tile text line to modern/group layout only
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Stop using :not() pseudo class for mx_GenericEventListSummary
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble])
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move common style rules up
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout
There should not be spacing between avatars and info tile line on IRC Layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply the rule to group/modern layout only
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply the inline start padding to modern/group layout only
Overriding $left-gutter is not necessary for IRC layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge the style block for mx_EventTile_info .mx_EventTile_line
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add spacing between avatar and a single info event tile line on IRC layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix padding of line with redacted body text
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move mx_EventTile_highlight etc. out of mx_EventTile:not([data-layout=bubble])
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set highlight text color globally
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Revert "Prevent new composer from overflowing from non-breakable text (#8829)"
This reverts commit 57dff8131c.
* Revert "Fix scroll jump issue with the composer (#8791)"
This reverts commit 5167521ea4.
* Revert "Fix scroll jump issue with the composer (#8788)"
This reverts commit f568a76dc6.
* Revert "Revert link color change in composer (#8784)"
This reverts commit aedbeb2995.
* Revert "Improve composer visiblity (#8578)"
This reverts commit f14374a51c.
* Remove margin from warning E2E icon between an avatar and a hidden event
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use a variable to ensure the same spacing around the E2E icon
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply the style to E2E icon
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Rename variables
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply style declarations for mobile UI to modern layout, which breaks the current layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove the style declarations to restore the current layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Readd zero margin for event tile content
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a comment
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove blank header from video room view frame
* Add a beta card for video rooms
* Rename the 'disclaimer' on beta cards to 'FAQ'
Because that's what the section actually gets used as
* Add beta pills to video room creation buttons
* Remove duplicate tooltips from face piles
* Add beta pill to headers of video rooms
* Factor RoomInfoLine out of SpaceRoomView
* Factor RoomPreviewCard out of SpaceRoomView
* Adapt RoomPreviewCard for video rooms
* "New video room" → "Video room"
* Add comment about unused cases in RoomPreviewCard
* Add types
* Clarify !important comments
* Add a reload warning
* Fix the reload warning being the wrong way around
* Fix lints
* Make widgets in video rooms mutable again to de-risk future upgrades
* Ensure that the video channel exists when mounting VideoRoomView
* Fix lint
* Iterate beta reload warning
* Add support for MD / HTML in room topics
Setting MD / HTML supported:
- /topic command
- Room settings overlay
- Space settings overlay
Display of MD / HTML supported:
- /topic command
- Room header
- Space home
Based on extensible events as defined in [MSC1767]
Fixes: vector-im/element-web#5180
Signed-off-by: Johannes Marbach <johannesm@element.io>
[MSC1767]: matrix-org/matrix-spec-proposals#1767
* Fix build error
* Add comment to explain origin of styles
Co-authored-by: Travis Ralston <travpc@gmail.com>
* Empty commit to retrigger build
* Fix import grouping
* Fix useTopic test
* Add tests for HtmlUtils
* Add slash command test
* Add further serialize test
* Fix ternary formatting
Co-authored-by: Travis Ralston <travpc@gmail.com>
* Add blank line
Co-authored-by: Travis Ralston <travpc@gmail.com>
* Properly mock SettingsStore access
* Remove trailing space
* Assert on HTML content and add test for plain text in HTML parameter
* Appease the linter
* Fix JSDoc comment
* Fix toEqual call formatting
* Repurpose test for literal HTML case
* Empty commit to fix CI
Co-authored-by: Travis Ralston <travpc@gmail.com>
Co-authored-by: Travis Ralston <travisr@matrix.org>
* Remove obsolete declarations - border-radius of EventTile_line
The border-radius is specified with .mx_EventTile[data-shape="ThreadsList"]
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move declarations for ThreadSummary on Threadslist from _ThreadsPanel.scss to _EventTile.scss
To .mx_EventTile[data-shape=ThreadsList]
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* mx_ThreadPanel_replies block is used only on threads list after all
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* &::after and &::before
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set shorthand property and use variables
- Shorthand for inset property of border between threads
- Use variables
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Change 'ThreadPanel_ThreadsAmount' class name to 'ThreadPanel_replies_amount'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* specific to prevent regressions
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Improve widet buttons behaviour and layout
Relates to vector-im/element-web#20506
See PSC-79
Signed-off-by: Michael Weimann <michaelw@matrix.org>
* Add AppTile tests
* Move mx_RoomView_MessageList h2 block from _GroupLayout.scss to _RoomView.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move mx_MatrixChat_useCompactLayout block from _GroupLayout.scss to _EventTile.scss
This block is not related to the group layout.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include EventTile_continuation block in EventTile_emote
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use logical properties for the padding values
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Sort declarations for maintainability
- EventTile_avatar
- EventTile_line
- EventTile_reply
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* yarn run lint:style --fix
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Separate selectors of .markdown-body
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix RR overflow on the right chat panel
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Align with RR outside of info tile
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use inset-inline property
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Change dot size from 10px to 8px
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set inset 8px to the dot
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use shorthand properties for inset
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move blocks from '.mx_EventTile:not([data-layout=bubble])' to '.mx_EventTile[data-shape=ThreadsList]'
For a notification dot it does not matter whether the layout of the event tile is bubble or not. Instead what matters is that the dot is expected to be displayed on the threads list.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove redundant declarations
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove an obsolete z-index declaration
The declaration was added with ed34952 to fix a clickability issue. Now the event tile is clickable everywhere, it is no longer required.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
To respect the concept of cascading. Also using a mixin to unset the declarations can easily cause a style inconsistency.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix file button and audio player overflowing from message bubble
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move '.mx_EventTile_image' to '.mx_EventTile_mediaLine'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* yarn run lint:style --fix
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use class names for now, adding a TODO comment
Remove unset as it is no longer required.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal'
- Include '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal'
- Merge '.mx_EventTile_e2eIcon_warning' and '.mx_EventTile_e2eIcon_normal'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* mx_EventTile_spoiler
- Group 'mx_EventTile_spoiler'
- mx_EventTile_spoiler.visible
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Group 'mx_EventTile_button'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Group '.mx_EventTile_collapseButton' and '.mx_EventTile_expandButton'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Group '.mx_EventTile_body .mx_EventTile_pre_container'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Group '.mx_EventTile_copyButton'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Group '.mx_EventTile_collapseButton'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Group '.mx_EventTile_expandButton'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Group '.mx_EventTile_copyButton' and '.mx_EventTile_collapseButton'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Group '.mx_EventTile_collapseButton'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include '.mx_EventTile_collapsedCodeBlock' in '.mx_EventTile_pre_container'
Collapsed code block is displayed only in mx_EventTile_pre_container
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* .mx_EventTile_keyRequestInfo
- Include '.mx_EventTile_keyRequestInfo_text' in '.mx_EventTile_keyRequestInfo'
- Include '.mx_AccessibleButton' in '.mx_EventTile_keyRequestInfo_text'
- Include '.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child' and 'p:last-child' in '.mx_EventTile_keyRequestInfo_tooltip_contents p'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Separate properties of mx_EventTile_button
The properties which should only be applied to buttons inside mx_EventTile_pre_container should not be applied to the top level.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply mask-size of collapse button and expand button to ones in mx_EventTile_pre_container only
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move declarations of buttons from mx_EventTile_button to mx_EventTile_pre_container
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move buttons declarations below mx_EventTile_button
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include '.mx_EventTile_pre_container' in '.mx_EventTile_body .mx_EventTile_pre_container'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* yarn run lint:style --fix
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Specify width and height to only buttons in mx_EventTile_pre_container
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Dedupe 'mx_EventTile_e2eIcon' ::before
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Hide buttons in mx_EventTile_pre_container and show them on hover by default
Setting "visibility: hidden" to mx_EventTile_button can easily cause a regression. The declaration should be exclusively applied to buttons inside mx_EventTile_pre_container, and "visibility: visible" should be set to those buttons only.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove redundant nestings for E2E icons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Edit properties and values of EventTile on ThreadView
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete order properties of EventTile on ThreadView
These values are no longer required as the reactions row is displayed under the message by default.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move declarations related to position from _MImageBody.scss to _EventTile.scss
These declarations should not be defined as default values as position depends on other factors such as layout, etc.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move min-height and min-width declarations from _MImageBody.scss to _EventTile.scss
Since min-height and min-width have been specified for bubble layout, the declarations have been expected to be applied to the other layouts.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply 'justify-content: center' to bubble layout only
'justify-content: center' was added for the bubble layout with 1436f23. It should not be applied to the other layouts.
In order to prevent an issue related to cascading from happening, 'justify-content: flex-start' is explicitly specified.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* yarn run lint:style --fix
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Those declarations are no longer necessary to align the buttons with the right edge of the input area and background.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
