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>
Fix avatar's position on the chat panel with a maximized widget in IRC layout
Fix timestamp's position on Message Edits history modal window
Also:
- Align DisambiguatedProfile with reactions row and thread summary with a variable
- Add width property as default
- Use the global variable on _IRCLayout.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
- Use AccessibleButton for cancel button, following other cases on UI
- Use flexbox for RTL layout to remove clear: both
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove blank header from video room view frame
* Add video room option to space context menu
* Remove duplicate tooltips from face piles
* 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
* Make widgets in video rooms mutable again to de-risk future upgrades
* Ensure that the video channel exists when mounting VideoRoomView
* feat: introduce new alignment types for tooltip
* feat: introduce new hook for tooltips
* feat: allow using onFocus callback for RovingAccessibleButton
* feat: allow using custom class for ContextMenu
* feat: allow setting tab index for avatar
* refactor: move read receipts out of event tile
* feat: implement new read receipt design
* feat: update SentReceipt to match new read receipts as well
Suguru Hirahara