* 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>
* PSFD-455: Iterate on search results for message bubbles
Though not perfect, this is a bit better than it was before. Specifically, we ensure our matching for `isOwnEvent` correctly identifies the user and that the results don't look *awful*.
There's still room for improvement, but this should be a measurable improvement itself. Most notably, this doesn't fix a couple obvious bugs due to complexity:
* Message bubbles have the wrong corners for the display format (pre-existing).
* The sender's own messages are missing avatars/names. This is just way too complex to fix.
**Requires https://github.com/matrix-org/matrix-js-sdk/pull/2004**
* Tweak opacity
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix button width and align 絵文字 (emoji) on the user panel
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* mx_UserInfo_container:not(.mx_UserInfo_separator)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move the spinner to the center
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add indent to 'Unable to load session list' paragraph
Because the indent style has been specified with ':not(h3)', wrapping
with something is required for the indent.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Align the spinner to the center
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove margin of paragraph inside div on verification panel
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove duplicate mx_Dialog_buttons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Group buttons on mx_Dialog with span
- Cancel default styling for elements inside .mx_AccessSecretStorageDialog_primaryContainer
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move common rules of mx_Dialog_buttons_row to _common.scss
- Set 16px gap between buttons per https://github.com/vector-im/element-web/issues/19426#issuecomment-949778515
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Spacing variables
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Nesting - .mx_AccessSecretStorageDialog_reset
- Fix the reset link color
- Set $spacingStart variable
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove unnecessary rule
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove the hardcoded width of the clock on the AudioPlayer
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use text-align: justify
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
* Hide the verification left stroke only in the thread panel (ie. let it shown in a chat panel with a maximized widget)
Respect the original comment that the stroke should be hidden in the thread list (and in a thread as well).
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Display the left stroke inside a thread
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix the look of pills
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Fix comment
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: Robin <robin@robin.town>
* include Inter natively on legacy & custom themes
* fix theming of beta button
* fix beta pill skinning properly
* switch back to accent-alt for beta pills
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Remove the box-shadow from the preview on the (right) panel for threads and a chat with a maximized widget.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Move line-height of .mx_EventTile_line from _GroupLayout.scss to _EventTile.scss
Specifying mx_EventTile_line's line-height in mx_GroupLayout is too strong for mx_GenericEventListSummary.
- Set line-height:1 to mx_RedactedBody inside mx_GenericEventListSummary on IRC/modern layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use a variable to remove the comment
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Readability
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Germain