* Spike AXE A11Y testing in Cypress
* Fix NewRoomIntro breaking html/aria list rules
* Fix HeaderButtons breaking aria role semantics rules
* missing type
* Switch left panel from aside to nav and include space panel
* Give the page a main heading of the room name when viewing a room
* Use header landmark on RoomHeader
* Improve aria attributes on composer when autocomplete is closed
* Fix aria-owns on RoomHeader
* Give Spinner an aria role
* Give server picker help button an aria label
* Improve auth aria attributes and semantics
* Improve heading semantics in use case selection screen
* Fix autocomplete attribute to be valid
* Fix heading semantics on login page
* Improve Cypress axe testing
* Add axe tests
* Stop synapse after the timeline tests
* Await spinners to fade before percy snapshotting timeline tests
* Improve naming of plugin
* Update snapshots
* Fix accidental heading change
* Fix double synapse stoppage
* Fix Cypress timeline avatar assertions to be DPI agnostic
* Fix aria attributes on date separators
* delint
* Update snapshots
* Revert style change
* Skip redundant call
* 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>
* extract preventDefaultWrapper into utils
* add click handling to beacon list item
* add click handling to dialog sidebar
* focus in on beacons when clicked in list
* stylelint
* fussy import ordering
* test beacon focusing in beaocnviewdialog
* 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>
* Extract room general context menu from roomtile
* Create hook to access and change a room’s notification state
* Extract room notification context menu from roomtile
* Add room context menus to rooms in spotlight
* Make arrow movement apply to the whole dialog, not just the input box
https://github.com/matrix-org/matrix-react-sdk/pull/8747 made it more evident that the host signup dialog was relying on some quirks in how PersistedElement sizes and positions things that it probably shouldn't have been relying on. As far as I can tell, this dialog doesn't *need* to be a PersistedElement at all since it's mounted manually as part of LoggedInView, and so it doesn't look like there's any way for it to unexpectedly disappear on the user.
According to Travis this is supposed to be a bespoke widget in a proper dialog, but this is intended as a more short-term fix.
* 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>
* Include mx_BaseAvatar
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include style blocks of mx_MatrixChat_useCompactLayout
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>
* Set top padding to avatars on group layout only
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a redundant declaration for bubble layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set the same margin value to mx_GenericEventListSummary_avatars on every layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove margin-top from mx_GenericEventListSummary_toggle on IRC layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove block margin from mx_GenericEventListSummary_toggle on both IRC layout and modern layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set spacing to mx_GenericEventListSummary instead of its child elements
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply the margin to every layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move general rules up
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply block margin to mx_GenericEventListSummary_toggle of every layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply top margin to modern layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include mx_MatrixChat_useCompactLayout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set top margin to mx_GenericEventListSummary insted of toggle
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use a spacing variable
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a redundant declaration
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add a comment
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply display flex as a default value
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>
* live location without map POC
* styles
* force map tiles to show no map for test build
* check latestlocationstate exists
* just use loading style map fallback when cant display map
* style map error for tile view
* set pointer cursor when map error is clickable
* test mbeaconbody with map display error, lint
* lint more good
* remove changes for first attempt tile
* make maperror test id more accurate
* fussy import ordering
* PR tweaks
* add role=presentation to backdrop panle image
* replace img icons with svg components in InviteDialog
* replace img icon with svg component
* img icons to svg icons in MImageBody
* remove log
* img icon to svg in SecurityRoomSettingsTab
* use shared error message for media message tiles
* remove nbsp
* dont snapshot test entire rtl render response
* use aria-describedby for uploadconfirm preview
* use aria-labelledby instead
* Apply kind=link to 'Learn more' link on security user settings tab
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove specific margin setting from heading on security user settings tab
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>
* Fix position of 'Show Advanced' on security room settings tab
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use flex to ensure alignment of the warning icon and message
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove an obsolete style block
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>
* 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>
* Set 100% max-width to mx_DisambiguatedProfile on TimelineCard
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Unset the max-width value inside ReplyTile
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.
* Include descedants of mx_SettingsTab_section
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>
* Include descedants of mx_SettingsFlag
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 logical properties and variables
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include a descedant of mx_SettingsTab_heading
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove redundant declarations specified by default with _SettingsFlag.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use not logical properties
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include a in mx_SettingsTab
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* 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>
* Implement searching for public rooms and users in new search experience
* Implement loading indicator for spotlight results
* Moved spotlight dialog into own subfolder
* Extract search result avatar into separate component
* Build generic new dropdown menu component
* Build new network menu based on new network dropdown component
* Switch roomdirectory to use new network dropdown
* Replace old networkdropdown with new networkdropdown
* Added component for public room result details
* Extract hooks and subcomponents from SpotlightDialog
* Create new hook to get profile info based for an mxid
* Add hook to automatically re-request search results
* Add hook to prevent out-of-order search results
* Extract member sort algorithm from InviteDialog
* Keep sorting for non-room results stable
* Sort people suggestions using sort algorithm from InviteDialog
* Add copy/copied tooltip for invite link option in spotlight
* Clamp length of topic for public room results
* Add unit test for useDebouncedSearch
* Add unit test for useProfileInfo
* Create cypress test cases for spotlight dialog
* Add test for useLatestResult to prevent out-of-order results
* 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>
* Crude way of layering the waveform and seek bar
Not intended for production.
* Use a layout prop instead of something less descriptive
* Fix alignment properly, and play with styles
* Convert back to a ball
* Use `transparent` which makes NVDA happy enough
* Allow keyboards in the seek bar
* Try to make the clock behave more correctly with screen readers
MIDNIGHT
* Remove legacy export
* Remove redundant attr
* Appease the linter
* Remove all mentions of Piwik
* Kill off all consumer of the old Piwik Analytics module
* Simplify ModalManager interface
* i18n
* Attempt to fix old e2e tests
* Remove unused component
* Iterate PR
* Set the default margin between the debug button and the subsection texts
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete style rule for AccessibleButton
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove the special block margin setting from the reload button
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete class name - mx_HelpUserSettingsTab_versions
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Replace <br>s for spacing with a margin style declaration
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Replace <br> for spacing with a margin style declaration
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove <br>s for spacing
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply mx_SettingsTab_subsectionText to the credits list
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply spacing-16 instead of spacing-12
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix keyboard shortcuts being wrapped
Setting $spacing-8 gap between the labels and the shortcuts
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add the block margin to the rows, not to the keys
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add the inline margin to the shortcuts, not to the keys
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use flex to stop redundant margin-top from appearing
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove ButtonResetDefault which resets nothing
It should be avoided to use ButtonResetDefault where there is nothing to be reset, in order to prevent resources from being wasted.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Ensure that unexpected regressions will never happen on the buttons and their icons
Rules can be extracted when needed. Until then there is no point of exposing elements to possible regressions, which could easily happen on the current architecture.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use SASS variables and remove a redundant declaration
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set min-width to prevent a flex blowout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use a native spacing property
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set max-width: 100% to display name inside the image reply
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
* Place room tiles with grid
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set padding inside of name stack
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove overflow:hidden (to be cancelled)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Replace text-align with margin
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Style invite failure dialog with display:grid
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge style rules of room tiles and tiles on invitation failure dialog
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Normalize avatar size for multiInviterError
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set text overflow with ellipsis
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use spacing variables
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set narrow gap to nameStack
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Rename mx_InviteDialog_inviterErrorTile_error
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Create mx_InviteDialog_tile
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set padding to room tiles only
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove space between name / userID and time (there is gap by default)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove the margin from the last child
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Refer mx_MessageActionBar on pinned messages card
Normalize mx_MessageActionBar style rules
- Allow the varaible (--MessageActionBar-size-button) to be used
- Remove redundant declarations
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use variables for normalization
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set class name
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Readd the comment
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use Heading size='h4'
- Use size='h4' instead of 'h2' as 15px has been specified as the font-size of the header
- Use logical values following _Heading.scss
- Remove line-height declaration in favor of the default value
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include mx_MessageActionBar_maskButton::after in mx_MessageActionBar_maskButton
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include mx_MessageActionBar_maskButton:hover::after in mx_MessageActionBar_maskButton
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Ensure buttons on message action bar used only with mx_MessageActionBar_maskButton as expected
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>
* Include mx_Indicator in mx_MessageActionBar_threadButton
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>
* Include mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton in mx_MessageActionBar_downloadButton
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>
* 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>
* navigate to live location tile from left panel live warning
Signed-off-by: Kerry Archibald <kerrya@element.io>
* navigate to beacon tile from room live share warning
Signed-off-by: Kerry Archibald <kerrya@element.io>
* add cursor
Signed-off-by: Kerry Archibald <kerrya@element.io>
* Improve the look of the `Message edits` dialog
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Left-align title
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.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>
* test most basic paths in messageactionbar
Signed-off-by: Kerry Archibald <kerrya@element.io>
* tidy
Signed-off-by: Kerry Archibald <kerrya@element.io>
* use rtl for MessageActionBar test
Signed-off-by: Kerry Archibald <kerrya@element.io>
* make beacon_info events semi actionable
Signed-off-by: Kerry Archibald <kerrya@element.io>
* remove log
Signed-off-by: Kerry Archibald <kerrya@element.io>
* test thread exception for beacon
Signed-off-by: Kerry Archibald <kerrya@element.io>
* eat click events in beacon status to stop jumping from reply tile
Signed-off-by: Kerry Archibald <kerrya@element.io>
* set max width on beaconbody for render in thread panel
* fix: replace fixed height based styling with flex for invite and dev dialogs
* feat: create flex wrapper class for dialogs
* feat: make invite dialogs use flex layout
* feat: make devtools dialogs use flex layout
* Specify the button style explicitly removing the dependency on the mixin
The reset mixin can cause style inconsistencies by disrupting cascading arbitrarily, increasing the number of specified declarations more than needed. Though it might be useful for development, it is not necessary to use it, makes it difficult to grasp the style structure, and can be removed to optimize the structure.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove element='button' from AccessibleButton
Since AccessibleButton has role='button' by default, setting the element button property is redundant.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Protect mx_ShareType_option from being regressed structurally
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>
* Wrap buttons with declarations for spacing
box-sizing is not required for the buttons or the wrapper.
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>
* fix eslint errors
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix LocationShareMenu-test.tsx
AccessibleButton is div by default
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Reflect the review
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Revert "Remove element='button' from AccessibleButton"
This reverts commit af78d2713f6b4fca9405498e0090db1e6218ff1b.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Revert "Fix LocationShareMenu-test.tsx"
This reverts commit 7d783a733ec84af6453b2359b2d00443fcece2ef.
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>
* Add padding-right to EventTile_line in EventTile_info on TimelineCard
Also ensure the same padding values are applied to EventTile_line on TimelineCard.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove git diff
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Variable on mx_BaseCard_Header
- Use a variable for margin of buttons on mx_BaseCard_header
- Reduce default margin instead of setting negative left and right values
- Set margin to span in order to ensure spacing between the back button and the span (6px: 30px - 24px)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use the same variable to the mask button
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use spacing variables
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete declarations - mx_ThreadPanel_button
mx_ThreadPanel_button does not seem to be used anywhere.
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>
* Add an option to ignore (block) a user when reporting their events
This is primarily useful if the content being reported really doesn't belong on your screen, and the room moderators are slow to react.
Ideally we'd use the word "block" instead of "ignore", but we call it "ignore user" everywhere else. See https://github.com/vector-im/element-web/issues/19590 for further context on the word choice.
This change includes a minor refactor to the styles of labelled toggles (for reusability).
* Appease the linter
* Use a checkbox instead of toggle in the dialog
* Update classnames handling for toggle switch
* Appease the linter
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>
* Remove an obsolete override against .mx_EventTile_line
- Move &[data-layout=bubble] under mx_ThreadView
- Use variables for .mx_NewRoomIntro
- Move the variable to BaseCard
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use --ThreadView_group_spacing-end variable
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Apply GenericEventListSummary rules to ThreadView only
This commit stops those declarations from being applied to TimelineCard, which is also applied with mx_ThreadPanel class name.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Nesting - mx_GenericEventListSummary:not([data-layout=bubble])
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>
* Include mx_EventTile_edited in mx_EventTile_content
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include mx_EventTile_pendingModeration in mx_EventTile_content
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge style rules of mx_EventTile_edited and mx_EventTile_pendingModeration
Except "cursor: pointer" of mx_EventTile_edited
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include markdown-body in mx_EventTile_content
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include 'pre code' in 'pre'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include 'mx_EventTile_content' in 'mx_EventTile_content'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include 'mx_EventTile_content .markdown-body' header in 'mx_EventTile_content'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include 'mx_EventTile_content .markdown-body' a, blockquote, and em in 'mx_EventTile_content'
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a comment on selector 'code'
There is technically nothing wrong that a declaration for 'code' is inherited to 'pre code'.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix position of the message action bar on data-self=false bubble
- Fix position of the bar on GenericEventListSummary as well
- Override default value `right: 8px` of MessageActionBar
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use variables for MessageActionBar
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set the right property to [data-self=true]
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove space for "React" and "Reply" buttons inside MessageActionBar on the left side bubble inside ThreadView
This commit removes space reserved for those buttons on deleted or "Unable to decrypt" message bubble inside ThreadView.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Show simple file name and size on images/videos
Fixes https://github.com/vector-im/element-web/issues/18197
* i18n
* Fix bad merge
* Add hover state tracking
* Only show on timeline-like objects
* Match new design requirements
* Remove video support (deemed not needed)
* Colouring and sizing from design
* Include file name in lightbox
* Revert changes to videos since we don't need them
* i18n
* Iterate PR
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
* Apply the padding setting of EventTile_line of ThreadView to TimelineCard
Set 2px padding-top and padding-bottom property to EventTile_line on IRC/modern layout of TimelineCard.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
f
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move position property of mx_EventTile_e2eIcon from ThreadPanel to TimelineCard
The E2E icon is available only on TimelineCard.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* yarn run lint:style
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Michael Telatynski