* 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
* 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>
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
* Add margin between events on bubble message layout
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use more simplified way
Because the float property prevents the margin from appearing, removing
the property is more straightforward than adding other rules.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Kerry <kerrya@element.io>
* Show a lobby screen in video rooms
* Add connecting state
* Test VideoRoomView
* Test VideoLobby
* Get the local video stream with useAsyncMemo
* Clean up code review nits
* Explicitly state what !important is overriding
* Use spacing variables
* Wait for video channel messaging
* Update join button copy
* Show frame on both the lobby and widget
* Force dark theme for video lobby
* Wait for the widget to be ready
* Make VideoChannelStore constructor private
* Allow video lobby to shrink
* Add invite button to video room header
* Show connected members on lobby screen
* Make avatars in video lobby clickable
* Increase video channel store timeout
* Fix Jitsi Meet getting wedged on startup in Chrome and Safari
* Revert "Fix Jitsi Meet getting wedged on startup in Chrome and Safari"
This reverts commit 9f77b8c227c1a5bffa5d91b0c48bf3bbc44d4cec.
* Disable device buttons while connecting
* Factor RoomFacePile into a separate file
* Fix i18n lint
* Fix switching video channels while connected
* Properly limit number of connected members in face pile
* Fix CSS lint
* Specify the correct padding to the chat panel aka mx_ThreadPanel
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add border to the right chat panel
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fixes button labels being collapsed per a character in CJK languages
Closes https://github.com/vector-im/element-web/issues/21287
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add a comment
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add font-size: inherit to link button
Remove redundant font-size settings
_FeedbackDialog.scss
_GenericFeatureFeedbackDialog.scss
_Login.scss
_NewRoomIntro.scss
_NotificationSettingsTab.scss
_PinnedEventTile.scss
_PreferencesUserSettingsTab.scss
_SpaceCreateMenu.scss
_ToastContainer.scss
_UserMenu.scss
Specify font-size
- _ProfileSettings.scss
- _SpaceBasicSettings.scss
- _SpaceSettingsDialog.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add line-height: inherit to link button
Remove redundant setting
- _GenericFeatureFeedbackDialog.scss
- _PinnedEventTile.scss
- _SpaceCreateMenu.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add font-weight: normal to link button
Remove redundant setting
- _SpotlightDialog.scss
- _UserMenu.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Dedupe _link and _link_inline
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set inline to "link_inline"
Treat the button as its name indicates.
For elements that should not be inlined, "link" should be used.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove radio component
* "Voice room" → "video room"
* Remove interactivity from video room tiles
* Update connection state when joining via widget
* Simplify room header buttons for video rooms
* Split out video room creation into a separate menu option
* Simplify room options for video rooms
* Update video room tile layout
* Tell the Jitsi widget whether it's a video channel
* Update tests
* "Voice" → "video" in more places
* Fix tests
* Re-add frame to immersive Jitsi widgets
* Comment ack
* Make updateDevices more readable
* Type FacePile
