* improve invite tile color
* change checkmark color for consistency
* switch to cpd-color-text-info-primary
* fix misaligned "x"
* use --cpd-color-bg-success-subtle instead
* #25614 Updated mx_Field select
* making the changes reset
* #25614 Updated mx_Field select
* Changes made in the grid and Select tag
* Adding test for mx_Field overflow
* Adding test for mx_Field overflow for long address
* Adding test for mx_Field overflow after formatting
---------
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
* Fix: Clicking on pile opens members list
* onClick used on Accessible Component
* Updated snapshots for testing
* Snapshots updated after merging
---------
Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
* Theme selector radio button aligned in center with the text
* fixed alignment, align-items at correct position now
---------
Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
* Use new crypto-api for cross user verification
* update verification flow with new APIs
* Replace some calls to `checkUserTrust`
A start on https://github.com/vector-im/crypto-internal/issues/147
* Enable cypress tests
* update tests
* Delegate decisions on event shields to the js-sdk
* rerender after editing events
This is required because a transition from "valid event" to "unencrypted event"
no longer triggers a state change, so the component does not render
itself. Previously, this would be a transition from `verified:
E2EState.Normal` to `verified: null`.
* Update tests
* prettier
* Test coverage
---------
Co-authored-by: Florian Duros <florianduros@element.io>
* Add support for rendering custom emojis in reactions
Signed-off-by: Sumner Evans <sumner@beeper.com>
* Include custom reaction short names in tooltips
Signed-off-by: Sumner Evans <sumner@beeper.com>
* Use custom reaction shortcode for accessibility
This uses the shortcode in the following places:
* The aria-label of the reaction buttons
* The alt text for the reaction image
Signed-off-by: Sumner Evans <sumner@beeper.com>
* Remove explicit instantiation of `customReactionName` variable and add types
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Put custom reaction images behind a labs flag
Signed-off-by: Sumner Evans <sumner@beeper.com>
* Use UnstableValue for finding the shortcode
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Sumner Evans <sumner@beeper.com>
* Move calculation of whether to render custom reaction images up to ReactionRow
Signed-off-by: Sumner Evans <sumner@beeper.com>
* Make alt text more friendly when custom reaction doesn't have shortcode
Signed-off-by: Sumner Evans <sumner@beeper.com>
* Add test for ReactionsRowButton
Signed-off-by: Sumner Evans <sumner@beeper.com>
* Apply suggestions from code review
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Don't use Optional
Signed-off-by: Sumner Evans <sumner@beeper.com>
* Fix ReactionsRowButton test
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Sumner Evans <sumner@beeper.com>
---------
Signed-off-by: Sumner Evans <sumner@beeper.com>
Co-authored-by: Tulir Asokan <tulir@maunium.net>
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix performance issues with useRoomMembers
With the current implementation it would create a new function, with leading: true, rendering the whole throttling useless
* Add public room indicator
* Format room members count better
* Add public room test
* Add search to room summary card
* Update settings UI
* Update snapshot
* Remove default title attribute
There is a little-known feature where, if you have verified a user (eg, via the
emoji game), then when you mouse-over a message that they sent, it gets a green
highlight.
We also show a brown bar sometimes, and according to the CSS there may be a
yellow bar too?
Very few people seem to know this exists, and even if you do know it exists
nobody seems to understand what exactly the various colours are supposed to be.
So, rather than porting this magic mystery feature to Rust Crypto, let's rip it
out.
* Add E2E status in room header
* Clearer logic for dmRoomList
Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
* Add test for E2E shield
* Remove dead code
---------
Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
* Add face pile to rooms
* Migrate FacePile to use Compound
* Fix CI
* Use FacePile component in room header
* Add facepile tests
* Make dead code CI happy
* Lint
* Fix tests
* Fix CSS selectors
* Update room face pile snapshot
* Use useMemo instead of useState and useEffect
* Remove unused imports
* Update snapshot
* Update snapshot
* Use consistent colouring of username with avatar
* Upgrade Compound to fix Firefox issue
* Use the approapriate color shade for usernames
* Use the approapriate color shade for usernames
* Upgrade Compound
* Fix tests
* Move avatar to new compound implementation
* Make space avatars square
* Remove reference to the avatar initial CSS class
* remove references to mx_BaseAvatar_image
* Fixe test suites
* Fix accessbility violations
* Add ConfirmUserActionDialog test
* Fix tests
* Add FacePile test
* Fix items clipping in members list
* Fix user info avatar sizing
* Fix tests
* Add Voice and Video call in room header
* Add thread icon in room header
* Add room notification icon to room header
* Fix linting
* Add tests for buttons in room header
* Add JSDoc
* micro optimisations
* Fix call disabled when hanging up
* Fix disabled state change on members count update
* Exclude functional members from members count optionally
* i18n
* Use Intl for names of languages
* Tweak Intl language style from "American English" -> "US English"
* Update tests
* Fix tests
* Consolidate languageHandler-test files
* Improve coverage
* Consistent casing for languages in dropdown
* Update LanguageDropdown.tsx
* Delint & update snapshot
* Fix tests
* Improve coverage
`of` will fallback to the given code with fallback=code (default)
* Use Intl to generate better internationalised date formats
* Get `Yesterday` and `Today` from Intl also
* Correct capitalisation blunder
* Fix formatTime include weekday
* Iterate
* Fix tests
* use jest setSystemTime
* Discard changes to cypress/e2e/settings/general-user-settings-tab.spec.ts
* Discard changes to res/css/_components.pcss
* Discard changes to res/css/views/elements/_LanguageDropdown.pcss
* Discard changes to src/components/views/elements/LanguageDropdown.tsx
* Add docs & tests for getDaysArray & getMonthsArray
* Discard changes to test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
* Consolidate consts
* Improve testing & documentation
* Update snapshot
* Apply suggestions from code review
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Iterate
* Clarify comments
* Update src/DateUtils.ts
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Specify hourCycle
* Discard changes to test/components/views/settings/devices/DeviceDetails-test.tsx
* Update comments
---------
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Iterate search public spaces UX
* Tweak iconography in spotlight
* Delabs `Exploring public spaces`
* Tweak msc3827 v1.4 support discovery
* i18n
* Delete stale test
* Fix tests
* Iterate
* Iterate PR based on review
* Improve types
* Add shortcut to search for public spaces to create space menu
* Update import
* Add org.matrix.msc3827.stable filtering
* Fix tests
* silence some errors
* Let scrollable dialogs shrink to the size of the content
Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net>
* Pin the action buttons to the bottom of the scrollable dialogs
Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net>
---------
Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net>
* Create useRoomName hook
Mark RoomName component as deprecated
* Pass out-of-band data to relevant RoomHeader component
* Mark LegacyRoomHeader as deprecated
* Fix incorrect search&replace in _RoomHeader.pcss
* lintfix
* Mark room as optional in room topic hook
* Fix i18n
* Discard use of useCallback
* Change export of useRoomName
* fix ts issue
* lints
* Add room topic to room header
* lintfix
* lintfix & clamp to one line
* Revert optimisations to DecoratedRoomAvatar
* Add test for opening the room summary
* Make transition honour prefer-reduced-motion
* Integrate @vector-im/compound-web
* Use compound type styles
* Use latest version of @vector-im/compound-web
* Change component name
* Fallback when room is undefined
* fix snapshot
* Create useRoomName hook
Mark RoomName component as deprecated
* Pass out-of-band data to relevant RoomHeader component
* Mark LegacyRoomHeader as deprecated
* Fix incorrect search&replace in _RoomHeader.pcss
* lintfix
* Mark room as optional in room topic hook
* Fix i18n
* Discard use of useCallback
* Change export of useRoomName
* fix ts issue
* lints
* Add room topic to room header
* lintfix
* lintfix & clamp to one line
* Revert optimisations to DecoratedRoomAvatar
* Add test for opening the room summary
* Make transition honour prefer-reduced-motion
* Fallback when room is undefined
* fix snapshot
* Create useRoomName hook
Mark RoomName component as deprecated
* Pass out-of-band data to relevant RoomHeader component
* Mark LegacyRoomHeader as deprecated
* Fix incorrect search&replace in _RoomHeader.pcss
* lintfix
* Fix i18n
* Discard use of useCallback
* Change export of useRoomName
* fix ts issue
* lints
* Remove display of Key backup signatures
This is *fiddly* to support in Element-R, and we don't really think it's
offering any value.
* update snapshot
* clean up i18n
* Integrate compound design tokens
The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here
* Pareto color pass on the light theme
* bugfixes in the light color pass
* Compound color pass dark theme
* Compound color pass high contrast
* Fix typo
* fix tooltip
* Fix PR feedback
* fix composer button mixin
* Normalise some of the auth page colors
* Update based on figma feedback
* lintfix
* regenerate theme index
* Fix cypress tests
Removed the CSS assertions in the room header as it overlaps with the Percy snapshot
* fix more e2e tests
* update colors based on feedback
* fix color pass
* Fix theme overrides
* Restore -transparent
* fix color mapping
* Final colour pass update
* Do not consume compound colors directly
* rethemedex
* Update pass
* Final tweaks
* a11y pass
* scope opacity to checkbox and not label
* Add missing customisations var for theming
* lintfix
* remove unwanted test
* Integrate compound design tokens
The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here
* Delete unused or incorrect - sass variables
* Typography pass
* Deprecate _font-weights.pcss and use Compound instead
* lint fix
* Fix snapshot
* Fix typography pass feedback
* Remove unwanted e2e test
cypress tests should test functionality not visual output. And we should not test visual output by inspecting CSS properties
* lintfix
* Migration script for baseFontSize
* Updates after design review
* Update font scaling panel to use min/max size
* Fix custom font
* Fix font slider e2e test
* Update custom font
* Update new baseFontSizeV2
* Disambiguate heading props
* Fix appearance test
* change max font size
* fix e2ee test
* fix tests
* test baseFontSize migration code
* typescript strict
* Migrate baseFontSize account setting
* Change assertion for font size
* Fix font size controller test
* add delegatedauthentication to validated server config
* dynamic client registration functions
* test OP registration functions
* add stubbed nativeOidc flow setup in Login
* cover more error cases in Login
* tidy
* test dynamic client registration in Login
* comment oidc_static_clients
* register oidc inside Login.getFlows
* strict fixes
* remove unused code
* and imports
* comments
* comments 2
* util functions to get static client id
* check static client ids in login flow
* remove dead code
* OidcRegistrationClientMetadata type
* navigate to oidc authorize url
* navigate to oidc authorize url
* test
* adjust for js-sdk code
* update test for response_mode query
* use new types
* strict
* tidy
* Rename classes of appTileBodyClass
Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default
* Apply a common CSS declaration to mx_AppTileBody
* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*
* Run prettier
* Change --normal to --large
* Edit and add comments
When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.
* Rename classes of appTileBodyClass
Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default
* Apply a common CSS declaration to mx_AppTileBody
* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*
* Run prettier
* Change --normal to --large
* Edit and add comments
When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.
* Update a Jest snapshot
* Update a Jest snapshot
Because the style rules do not belong to AppsDrawer.tsx and are used by other multiple components, it is sensible to manage the rules on _common.pcss rather than _AppsDrapwer.pcss to improve maintainability.
The values are the same values that Signal Desktop uses for their notification sounds and currently the sounds are 5-10 LUFS too loud, which makes them incredibly loud in many instances (especially ring.mp3)
Co-authored-by: Janne Mareike Koschinski <janne@kuschku.de>
* Integrate compound design tokens
The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here
* lintfix
* Use correct SpyInstance import
* Using npm build of design tokens
* Add a Jest snapshot of AppPermission
* Move the test inside 'for a pinned widget' category
* Make only spinner message bold
* Set font size specified with "mx_AppPermission_smallText" by default
- Add "mx_AppPermission_largeText" for elements whose size has not been specified with mx_AppPermission_smallText
- Create _AppWarning.pcss for AppWarning
* Make AppPermission panel scrollable, keeping the content at the center
* Run prettier
* Use Heading component
* Use Icon component
* Fix the test
* Add a snapshot to track AppTile in AppsDrawer
* Conform to the naming policy - AppsContainer resizer
* Nest 'mx_AppsContainer_resizer_container_handle' to enforce the style
- mx_AppsContainer_resizer
- mx_AppsContainer_resizer_container
- mx_AppsContainer_resizer_container_handle
* Rename "mx_AppsContainer_resizer" to "mx_AppsDrawer_resizer"
PersistentVResizer is defined by mx_AppsDrawer (see const "classes")
* Use CSS custom properties on _LeftPanel.pcss
* Use CSS custom properties on _SpacePanel.pcss
* Use CSS custom properties on _SpaceRoomView.pcss
* Use CSS custom properties on _ImageView.pcss
* Use CSS custom properties on _EventTile.pcss
* Remove a CSS custom properties on _SpaceCreateMenu.pcss
Used only on one instance
* Revert "Use CSS custom properties on _ImageView.pcss"
This reverts commit 0210659f94fcf1107adabecf1bce443fc970a31b.
* Revert "Use CSS custom properties on _EventTile.pcss"
This reverts commit 83cf824a57b174e62935bb9a4433aadcd8f8164f.
* Run prettier
* Remove STIXGeneral from the font stack
STIXGeneral was originally added to our font stack to work around a bug in Chrome (https://bugs.chromium.org/p/chromium/issues/detail?id=591346) which caused some obscure combining marks to render as tofu. However, because STIXGeneral unexpectedly has glyphs for a handful of common Japanese characters, it's ended up making Japanese text in Element look patchy. I previously attempted to fix this by prioritizing sans-serif over STIXGeneral, but as is evident from our screenshot tests and user reports, this is still not enough on some systems to get Chrome to pick a consistent font for Japanese. On the basis that i18n is more important than supporting a few mathematical diacritics, I propose we remove the font. STIXGeneral is deprecated anyways, so if we want to get these diacritics back there's always the option of looking at its successor, STIXTwo.
* Remove STIXGeneral installation from Cypress workflow
* account password section
* account email and phone numbers
* update cypress selectors
* use settingsection for General section
* use semantic headings for profile settings
* fix show advanced spacing
* udpate snapshot
* use semantic headings in mjolnir settings
* remove debug
* unit test UI changes for mjolnir settings
* account password section
* account email and phone numbers
* update cypress selectors
* use settingsection for General section
* use semantic headings for profile settings
* fix show advanced spacing
* udpate snapshot
* Nest - .mx_Dialog .markdown-body
* Nest - .mx_Dialog .markdown-body *
* Run prettier
* Nest
* Nest - * .mx_Dialog_background
* Run prettier
* Nest - * .mx_Dialog
* Nest - mx_Dialog_title.danger
* Use a variable for z-index: default wrapper index
* Use a variable for z-index: static dialog background
* Use a variable for z-index: static dialog itself
* Use a variable for z-index: standard dialog background
* Use a variable for z-index: standard dialog
* Merge :root selector blocks
* Calculate z-index values to fix the order
* Rename the variables
* Include mx_Dialog_buttons_row in mx_Dialog_buttons
mx_Dialog_buttons_row is used on DialogButtons.tsx only inside mx_Dialog_buttons under {additive}
* Run prettier
* Nest `pre code` in `pre`
* Remove obsolete style rules
These have been obsolete since 3c5c2bef6d.
* Remove _RoleButton.pcss
mx_RoleButton_tooltip style rules are used only on NotificationBadge.tsx.
* Rename the class
* Remove mx_MemberInfo_profileField
* Merge mx_MemberInfo_profile with mx_MemberInfo_container
* Remove redundant div elements
* Update a Jest snapshot
* allow testids in settings sections
* use semantic headings in LabsUserSettingsTab
* put back margin var
* use SettingsTab wrapper
* use semantic headings for deactivate acc section
* use semantic heading in manage integratios
* i18n
* use currentColor in warning-triangle svg, update use in RoomStatusBar
* use semantic headings for discovery section
* test manage integration settings
* test deactivate account section display
* remove SettingsFieldset margins
* threepids styles
* remove debug
* test discovery email and phone
* Use icon component for buttons on mx_AppTileMenuBar_widgets
* Remove redundant declarations
* Add a Percy snapshot test
* Set color value to mx_Icon, fill and stroke with currentColor
* Iterate
* split SettingsSection out of SettingsTab, replace usage
* correct copyright
* use semantic headings in GeneralRoomSettingsTab
* use SettingsTab and SettingsSubsection in room settings
* fix VoipRoomSettingsTab
* use SettingsSection components in space settings
* settingssubsection text component
* use semantic headings in HelpUserSetttings tab
* use ExternalLink components for external links
* test
* strict
* lint
* semantic heading in labs settings
* semantic headings in keyboard settings tab
* semantic heading in preferencesusersettingstab
* tidying
* use new settings components in eventindexpanel
* findByTestId
* prettier
* semantic headings and style refresh for crypto settings
* e2e panel
* use semantic headings in User settings appearance tab
* update selectors in tests
* tidy
* split SettingsSection out of SettingsTab, replace usage
* correct copyright
* use semantic headings in GeneralRoomSettingsTab
* use SettingsTab and SettingsSubsection in room settings
* fix VoipRoomSettingsTab
* use SettingsSection components in space settings
* settingssubsection text component
* use semantic headings in HelpUserSetttings tab
* use ExternalLink components for external links
* test
* strict
* lint
* semantic heading in labs settings
* semantic headings in keyboard settings tab
* semantic heading in preferencesusersettingstab
* tidying
* use new settings components in eventindexpanel
* findByTestId
* prettier
* semantic headings and style refresh for crypto settings
* e2e panel
* semantic headings and cleanup in Sidebar user settings
* semantic heading in voice user settings
* sonarcloud bug and test
* split SettingsSection out of SettingsTab, replace usage
* correct copyright
* use semantic headings in GeneralRoomSettingsTab
* use SettingsTab and SettingsSubsection in room settings
* fix VoipRoomSettingsTab
* use SettingsSection components in space settings
* settingssubsection text component
* use semantic headings in HelpUserSetttings tab
* use ExternalLink components for external links
* test
* strict
* lint
* semantic heading in labs settings
* semantic headings in keyboard settings tab
* semantic heading in preferencesusersettingstab
* tidying
* use new settings components in eventindexpanel
* findByTestId
* prettier
* semantic headings and style refresh for crypto settings
* e2e panel
* test cross signing panel
* strict
* more strict
* tweak
* test eventindexpanel
* strict fixes
* Fix class names - from m_ to mx_
* Move mx_RoomView_auxPanel from _RoomView.pcss to _AuxPanel.pcss
The class name 'mx_RoomView_auxPanel' belongs to AuxPanel, not RoomView
* Correct naming
* Strictify: mx_RoomView_auxPanel *
* Nest mx_AuxPanel_stateViews_span
* Sort
* Run prettier
* Use custom properties
* Revert "Use custom properties"
This reverts commit fe720d05f4572e74e71887203d43c491f0723a92.
* allow testids in settings sections
* use semantic headings in LabsUserSettingsTab
* put back margin var
* use SettingsTab wrapper
* use semantic headings for deactivate acc section
* use semantic heading in manage integratios
* i18n
* explicit cast to boolean
* Update src/components/views/settings/shared/SettingsSubsection.tsx
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* test manage integration settings
* test deactivate account section display
* remove debug
* fix cypress test
---------
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* settingssubsection text component
* use semantic headings in HelpUserSetttings tab
* test
* strict
* lint
* semantic heading in labs settings
* semantic headings in keyboard settings tab
* semantic heading in preferencesusersettingstab
* tidying
* findByTestId
* prettier
* allow testids in settings sections
* use semantic headings in LabsUserSettingsTab
* use semantic headings in usersettingspreferences
* rethemendex
* put back margin var
* allow testids in settings sections
* use semantic headings in LabsUserSettingsTab
* use semantic headings in usersettingspreferences
* rethemendex
* put back margin var
* Replace: %s/mx_RightPanel_headerButton/mx_RoomHeader_button/g
* Conform the selectors to our naming policy: with flag (--)
- %s/mx_RoomHeader_button_highlight/mx_RoomHeader_button--highlight/g
- %s/mx_RoomHeader_button_unread/mx_RoomHeader_button--unread/g
* Update a Jest snapshot
* Move the declarations and Sass variables
- Move Sass variables to the place where they are used
* Separate mx_AppWarning and mx_AppPermission
* Remove mx_AppPermission_row for a type selector
* Nest: mx_AppPermission
* Run prettier
* Create a CSS file for AppPermission
* allow testids in settings sections
* use semantic headings in LabsUserSettingsTab
* put back margin var
* explicit cast to boolean
* Update src/components/views/settings/shared/SettingsSubsection.tsx
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
---------
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Set zero min-width to prevent input area blowout
* Set min-width values to mx_SearchBar_input and mx_SearchBar_button
* Prevent the input area and cancel button from being overlapped by BaseCard
* Use custom properties: --size-button-search
* Take Percy snapshot of mx_SearchBar
* Apply suggestions from code review
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Edit a comment
* Feedback
* Edit a comment
* Update cypress/e2e/timeline/timeline.spec.ts
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
---------
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This fixes a visual regression introduced in 73007d6dd6: AppTiles with the class mx_AppTile_mini don't get an mx_AppsDrawer as their parent, so the --AppTile_mini-height variable needs a broader scope.
* Optimize mx_RoomView_myReadMarker
- Replace the compound selector with a type selector
- Nest the type selector in "mx_RoomView_myReadMarker_container"
* Conform the style rules to the naming policy
Including "container" in a class name is redundant as our naming policy tells that a string followed by an underscore (_) represents a container if it contains an element.
* Run prettier
* Replace `mx_RoomView_myReadMarker hr` with `mx_RoomView_myReadMarker`
- Remove a unit
- Hide hr's parent (mx_RoomView_myReadMarker) on Percy snapshots
* Change the class name from `mx_RoomView_myReadMarker` to `mx_MessagePanel_myReadMarker`
The read marker is specified on MessagePanel.tsx, and should be named so to avoid confusion.
- Create _MessagePanel.pcss for the style rules of MessagePanel
* Update permalinks.spec.ts
* Nesting: `mx_GeneralUserSettingsTab_changePassword`
* Nesting: `mx_Spinner`
* Conform the style rules to the naming policy
For elements inside "mx_GeneralUserSettingsTab_accountSection" and "mx_GeneralUserSettingsTab_discovery"
* Conform `mx_GeneralUserSettingsTab_discovery_existing*` to the naming policy
* Nesting
* Run prettier
* Common style rules for `mx_AppTileBody` and `mx_AppTileBody_mini`
* Common style rules for iframe
* Use a custom property for height
* Replace with a custom property - $MiniAppTileHeight
* Replace with a custom property - $MinWidth
* Group common declarations
* Sorting
* Use CSS custom property: --timeline-image-border-radius
Remove the same variable from _MImageBody.pcss
* Rename the property
The property is neither limited to a timeline nor image, but applied to M.*?Body components as well, such as MLocationBody and MVideoBody.
* Remove obsolete style blocks from _MemberInfo.pcss
Deprecated by 2b432b0d82
* Remove obsolete style blocks from _MemberInfo.pcss
Deprecated by fce36ec826
* Nesting: mx_AppLoading
* Conform class and animation name to the naming policy
* Nesting for maintainability, preventing the rule from becoming an orphan
* Rename the class: mx_AppLoading to mx_AppTile_loading
* Remove a mixin - mx_Tooltip_dark
The mixin has been used on `_AppsDrawer.pcss` only.
* Rename mx_Tooltip_dark based on the naming policy
'mx_Tooltip_dark' has been used on `AppPermission.tsx` only.
* Remove `_HeaderButtons.pcss`
Now that mx_HeaderButtons class is no longer necessary as ARIA "tabpanel" role has been removed from it, it is possible to remove both the class and the style rule for it.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Tests: add `room-header.spec.ts` and edit the existing tests
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Edit snapshot widths settings
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix typo
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Edit a comment
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Optimize a test to check default buttons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check highlighted buttons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Loop
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Nesting: `mx_ResizeHandle`
* Nesting: `> div`
* Run prettier
* Use a custom property
* Remove a redundant declaration: `cursor: row-resize`
The resizer is either vertical or horizontal, and since `cursor: row-resize` is applied by default, it does not need to be repeated here.
* Conform the class names to the naming policy
* Revert "Use a custom property"
This reverts commit 6116939eec7d9e4220b89a638623e5876e143adf.
* Remove an obsolete variable - `$MessageTimestamp_width_hover`
Added by 9b54aba4c0
Deprecated 5343be7814
* Replace a variable with a custom property - $MessageTimestamp_width
* Merge with an existing property in :root
rename
* Manage the variable on _MessageTimestamp.pcss
* split SettingsSection out of SettingsTab, replace usage
* correct copyright
* use semantic headings in GeneralRoomSettingsTab
* use SettingsTab and SettingsSubsection in room settings
* fix VoipRoomSettingsTab
* use SettingsSection components in space settings
* settingssubsection text component
* use semantic headings in HelpUserSetttings tab
* use ExternalLink components for external links
* test
* strict
* lint
* Rename: `mx_ExistingPhoneNumber_*` to `mx_PhoneNumber--existing_*`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Rename: `mx_ExistingEmailAddress_*` to `mx_EmailAddress--existing_*`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge styles for maitainability: `mx_GeneralUserSettingsTab_discovery_existing_*`
`mx_EmailAddress--existing_*` and `mx_PhoneNumber--existing_*` adopt the same declarations, so maintaining them with common selectors should improve the maintainability.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com
* Rename: `mx_EmailAddress--existing_*` and `mx_PhoneNumber--existing_*` to `mx_GeneralUserSettingsTab_discovery_existing_*`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove empty selectors
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a duplicate selector: `.mx_GeneralUserSettingsTab_discovery--existing`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Rename the button
The button with the class name 'mx_GeneralUserSettingsTab_discovery_existing_button' is used for various types of action, so 'confirm' seems to be a bit misleading.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include: `mx_GeneralUserSettingsTab_discovery_existing_*`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Run prettier
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* lint
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Review
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com
* 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
* split SettingsSection out of SettingsTab, replace usage
* correct copyright
* use semantic headings in GeneralRoomSettingsTab
* use SettingsTab and SettingsSubsection in room settings
* fix VoipRoomSettingsTab
* use SettingsSection components in space settings
* split SettingsSection out of SettingsTab, replace usage
* correct copyright
* use semantic headings in GeneralRoomSettingsTab
* use SettingsTab and SettingsSubsection in room settings
* fix VoipRoomSettingsTab
* Remove - mx_RoomView_callStatusBar
The style blocks were added by 39c628d4a1 and the element to be styled with them was removed by 50965e41eb.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove - mx_RoomView_voipButton
The element to be styled with the rules was removed with 50965e41eb.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove - mx_RoomView_voipChevron
The element to be styled with the rules was removed with 571bd30898.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove - mx_RoomView_ongoingConfCallNotification
The element these rules styled was removed by 8962f7ae9e
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove - mx_RoomView_auxPanel_fullHeight
The element these rules styled was added by 887defda9c and removed by 54cd385e6d.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove - mx_RoomView_auxPanel_apps
The style rule has become obsolete already at 79d3cca6e9. It is no longer clear which commit deprecated it.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* 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>
The style rules have been obsolete since IA 1.1 feedback toast was removed by 5d89230271.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete style rules - `mx_linkButton`
The block was added with fbab8ceeef for CreateKeyBackupDialog.js. It has been replaced with AccessibleButton element (see: onSkipPassPhraseClick on L283 and changeText on L314-316). The last function which had used mx_linkButton (_onOptOutClick) has been removed.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete style rules - `mx_textButton`
mx_textButton has been replaced with AccessibleButton (with kind="link"). There is also not an element which uses the class.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add missing aria-expanded attributes
* Improve autoComplete for phone numbers & email addresses
* Fix room summary card heading order
* Fix missing label on timeline search field
* Use appropriate semantic elements for dropdown listbox
* Use semantic list elements in keyboard settings tab
* Use semantic list elements in spotlight
* Fix types and i18n
* Improve types
* Update tests
* Add snapshot test
* 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 class name: `mx_EmailAddresses_new`
The class name was added by aa7afe819f for an initial implementation and became obsolete thanks to 1090b7d912.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete declarations: `mx_ExistingPhoneNumber_delete`
The declarations have been obsolete since 11f2b4320d.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete declarations: `mx_ExistingEmailAddress_delete`
The declarations have also been deprecated by 11f2b4320d.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use AccessibleButton for "Accept" on AuthPage
- Use AccessibleButton
- Remove mx_InteractiveAuthEntryComponents_termsSubmit:disabled as disabled state is handled by AccessibleButton
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Empty commit
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix spacing of headings of integration manager on General settings tab
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* lint
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check the column gap
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Iterate
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Scroll to 'mx_SetIntegrationManager' and take a snapshot of the dialog
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Revert "Scroll to 'mx_SetIntegrationManager' and take a snapshot of the dialog"
This reverts commit 9151d6a34de109c0dffa95046397c13f4b61f5a4.
* Specify actual width of mx_SetIntegrationManager
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>
* add poll history tab to room settings
* test poll history in room settings
* remove posthog tracking for poll his
* use consistent label for polls history
* basic sync setup
* formatting
* get loudest value for synced rules
* more types
* test synced rules in notifications settings
* type fixes
* noimplicitany fixes
* remove debug
* tidying
* extract updatePushRuleActions fn to utils
* extract update synced rules
* just synchronise in one place?
* monitor account data changes AND trigger changes sync in notifications form
* lint
* setup LoggedInView test with enough mocks
* test rule syncing in LoggedInView
* strict fixes
* more comments
* one more comment
* add error variant for caption component
* tests for new error message
* tweak styles
* noImplicitAny
* revert out of date prettier changes to unrelated files
* limit inline message to radios only, tests
* strict fix
* 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>
* Reduce height of toggle on expanded view source event
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add a test to check size and position of toggle on expanded view source event
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
