Commit graph

1421 commits

Author SHA1 Message Date
Suguru Hirahara
14a8b1e69e
Set 100% max-width to display name on reply tiles (#8867) 2022-06-20 16:26:34 +02:00
Suguru Hirahara
98dffebfef
Fix alignment of pill letter (#8874) 2022-06-20 06:11:13 +02:00
Suguru Hirahara
769efa3074
Move the beta pill to the right side and display the pill on video room only (#8873) 2022-06-19 14:52:58 +00:00
Suguru Hirahara
cfbe1cb066
Stop using absolute property to place beta pill on RoomPreviewCard (#8872) 2022-06-19 14:35:04 +02:00
Suguru Hirahara
b1e07e8ef0
Make the pill text single line (#8744) 2022-06-19 11:56:37 +02:00
Suguru Hirahara
c4460d8add
Move EventTile style rules of compact modern layout, enabling it on the right panel as well (#8766) 2022-06-18 15:43:23 +02:00
Suguru Hirahara
c5bc91291d
Fix grid blowout on pinned event tiles (#8816)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-06-17 08:34:33 +02:00
Suguru Hirahara
43f2ee4283
Fix reactions row overflow and gap between reactions (#8813) 2022-06-16 17:47:37 +00:00
Suguru Hirahara
81c894f2d9
Stop using mx_GroupLayout for styling (#8711) 2022-06-15 17:26:24 +00:00
Suguru Hirahara
1188f1a508
Remove margin from E2E icon between avatar and hidden event (#8584)
* Remove margin from warning E2E icon between an avatar and a hidden event

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use a variable to ensure the same spacing around the E2E icon

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply the style to E2E icon

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Rename variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-06-15 09:50:35 -06:00
Suguru Hirahara
37298d7b1b
Remove Riot-era media query declarations of event tile on mobile UI (#8814)
* Apply style declarations for mobile UI to modern layout, which breaks the current layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove the style declarations to restore the current layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Readd zero margin for event tile content

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove a comment

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-06-15 08:44:39 +02:00
Janne Mareike Koschinski
57dff8131c
Prevent new composer from overflowing from non-breakable text (#8829) 2022-06-13 13:05:41 +02:00
Suguru Hirahara
68ce7bf35e
Remove an obsolete style declaration of .mx_ReplyChain_show (#8743)
It was added with https://github.com/matrix-org/matrix-react-sdk/pull/6291/files#diff-11808ff6468e6efa5982f414119fcc8a3a3eea4090b1a4ebda8ed6eae732418aR163

It has not been effective for unknown period, and since the layout of the area has changed, it should be able to be safely removed.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-06-13 09:17:48 +02:00
Suguru Hirahara
0d3fe300aa
Enable background color on hover for chat panel and thread panel (#8644)
* Enable background color on hover for chat panel and thread panel

- Display reactions row on hover
- Use variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace --BaseCard_EventTile-spacing-horizontal with --BaseCard_EventTile-spacing-inline

- horizontal: inline
- vertical: block

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* mx_EventTile.mx_EventTile_bad[data-layout=bubble] seems to require bubble layout

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>
2022-06-10 10:21:22 +02:00
Robin
8e9f7407e9
Allow AppTiles to shrink as much as necessary (#8805) 2022-06-09 13:30:58 -04:00
Robin
30460943b2
Release video rooms as a beta feature (#8431)
* Remove blank header from video room view frame

* Add a beta card for video rooms

* Rename the 'disclaimer' on beta cards to 'FAQ'

Because that's what the section actually gets used as

* Add beta pills to video room creation buttons

* Remove duplicate tooltips from face piles

* Add beta pill to headers of video rooms

* Factor RoomInfoLine out of SpaceRoomView

* Factor RoomPreviewCard out of SpaceRoomView

* Adapt RoomPreviewCard for video rooms

* "New video room" → "Video room"

* Add comment about unused cases in RoomPreviewCard

* Add types

* Clarify !important comments

* Add a reload warning

* Fix the reload warning being the wrong way around

* Fix lints

* Make widgets in video rooms mutable again to de-risk future upgrades

* Ensure that the video channel exists when mounting VideoRoomView

* Fix lint

* Iterate beta reload warning
2022-06-09 13:07:59 -04:00
Robin
d9396b0b54
Expire video member events after 1 hour (#8776)
* Expire video member events after 1 hour

* Iterate based on feedback

* Validate the types of video member events better

* Even more parentheses
2022-06-09 13:19:52 +00:00
Suguru Hirahara
67cace7de7
Move style rules for EventTile on ThreadView from _ThreadPanel.scss to _EventTile.scss (#8689) 2022-06-09 13:31:38 +01:00
Germain
5167521ea4
Fix scroll jump issue with the composer (#8791) 2022-06-08 15:02:15 +01:00
Germain
f568a76dc6
Fix scroll jump issue with the composer (#8788) 2022-06-08 13:29:16 +01:00
Germain
aedbeb2995
Revert link color change in composer (#8784) 2022-06-08 09:11:14 +00:00
Johannes Marbach
abd39c61b1
Add support for MD / HTML in room topics (#8215)
* Add support for MD / HTML in room topics

Setting MD / HTML supported:
- /topic command
- Room settings overlay
- Space settings overlay

Display of MD / HTML supported:
- /topic command
- Room header
- Space home

Based on extensible events as defined in [MSC1767]

Fixes: vector-im/element-web#5180
Signed-off-by: Johannes Marbach <johannesm@element.io>

[MSC1767]: matrix-org/matrix-spec-proposals#1767

* Fix build error

* Add comment to explain origin of styles

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Empty commit to retrigger build

* Fix import grouping

* Fix useTopic test

* Add tests for HtmlUtils

* Add slash command test

* Add further serialize test

* Fix ternary formatting

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Add blank line

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Properly mock SettingsStore access

* Remove trailing space

* Assert on HTML content and add test for plain text in HTML parameter

* Appease the linter

* Fix JSDoc comment

* Fix toEqual call formatting

* Repurpose test for literal HTML case

* Empty commit to fix CI

Co-authored-by: Travis Ralston <travpc@gmail.com>
Co-authored-by: Travis Ralston <travisr@matrix.org>
2022-06-07 14:20:32 -06:00
Suguru Hirahara
3a20cb1703
Improve style rules of threads list (#8706)
* Remove obsolete declarations - border-radius of EventTile_line

The border-radius is specified with .mx_EventTile[data-shape="ThreadsList"]

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move declarations for ThreadSummary on Threadslist from _ThreadsPanel.scss to _EventTile.scss

To .mx_EventTile[data-shape=ThreadsList]

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* mx_ThreadPanel_replies block is used only on threads list after all

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* &::after and &::before

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set shorthand property and use variables

- Shorthand for inset property of border between threads
- Use variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Change 'ThreadPanel_ThreadsAmount' class name to 'ThreadPanel_replies_amount'

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* specific to prevent regressions

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-06-07 14:55:11 +01:00
Germain
f14374a51c
Improve composer visiblity (#8578)
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2022-06-07 07:28:29 +00:00
Germain
d388ef0e96
Reduce gutter with the new read receipt UI (#8736) 2022-06-06 10:14:38 +01:00
Suguru Hirahara
4b5816f5c1
Make the pill on the basic message composer compatible with display name in RTL languages (#8758) 2022-06-05 15:22:44 +02:00
Suguru Hirahara
ef6bd3540d
Revert "Move style rules of MatrixChat_useCompactLayout from _GroupLayout.scss to _EventTile.scss and _RoomView.scss (#8725)" (#8751)
This reverts commit 228abb6f07.
2022-06-03 12:22:13 +02:00
Michael Weimann
3174cf2606
Improve widget buttons behaviour and layout (#8734)
* 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
2022-06-03 12:00:16 +02:00
Suguru Hirahara
228abb6f07
Move style rules of MatrixChat_useCompactLayout from _GroupLayout.scss to _EventTile.scss and _RoomView.scss (#8725)
* 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>
2022-06-03 08:45:10 +02:00
Suguru Hirahara
7c57680b93
Fix read avatars overflow from the right chat panel with a maximized widget on bubble message layout (#8470)
* 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>
2022-06-02 02:43:07 +00:00
Suguru Hirahara
bae8854c13
Remove inline margin from UTD error message inside a reply tile on ThreadView (#8708)
* Remove inline margin from UTD error message inside a reply tile on ThreadView

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge 'mx_ReplyChain_wrapper' blocks

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-30 08:55:12 +02:00
Suguru Hirahara
12abbf4042
Prevent overflow of grid items on a bubble with UTD generally (#8697) 2022-05-27 10:41:53 +01:00
Suguru Hirahara
aef080ac80
Create 'Unable To Decrypt' grid layout for hidden events on a bubble layout (#8704) 2022-05-27 09:23:34 +01:00
Suguru Hirahara
f3b762c1a8
Move unread notification dots of the threads list to the expected position (#8700)
* 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>
2022-05-25 23:33:35 +01:00
Suguru Hirahara
dbd9911fe7
Align EventTile_line with display name on message bubble (#8692) 2022-05-25 14:08:43 +00:00
Suguru Hirahara
90dfb8d61f
Move style rules related to ThreadPanel from EventTile (#8683)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-25 09:36:12 +02:00
Suguru Hirahara
03c2bdbde1
Remove ButtonResetDefault from mx_AccessibleButton of EventTile_keyRequestInfo_text (#8678)
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>
2022-05-25 08:45:18 +02:00
Suguru Hirahara
8afb1abd36
Fix a grid blowout due to nowrap displayName on a bubble with UTD (#8688) 2022-05-25 06:50:36 +02:00
Suguru Hirahara
412c207b23
Apply the same max-width to image tile on the thread timeline as message bubble (#8669) 2022-05-25 06:31:39 +02:00
Suguru Hirahara
9f1bffcd34
Fix file button and audio player overflowing from message bubble (#8666)
* 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>
2022-05-24 09:06:04 +02:00
Suguru Hirahara
ef977146c3
Prevent possible regressions of EventTile structurally (#8647)
* '.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>
2022-05-23 21:16:50 +01:00
Suguru Hirahara
764b307e63
Edit properties and values of EventTile on ThreadView (#8638)
* 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>
2022-05-23 11:11:55 +01:00
Suguru Hirahara
5446d5d6ba
Fix position of wide images on IRC / modern layout (#8667)
* 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>
2022-05-23 09:02:13 +02:00
Suguru Hirahara
11cb48176e
Fix other user's displayName being wrapped on the bubble message layout (#8456) 2022-05-22 09:07:29 +02:00
Suguru Hirahara
6825b43f42
Set spacing declarations to elements in mx_EventTile_mediaLine (#8665) 2022-05-22 08:19:45 +02:00
Suguru Hirahara
23babbb8ab
Normalize inline spacing of image and file button on ThreadView (#8664) 2022-05-21 22:19:56 +02:00
Suguru Hirahara
30b03776b8
Align input area with event body's first letter in a thread on IRC/modern layout (#8636)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-20 10:14:37 +01:00
Suguru Hirahara
c715f72745
Remove obsolete declarations for buttons on EditMessageComposer on ThreadView (#8632)
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>
2022-05-18 14:22:42 +01:00
Suguru Hirahara
9b92eca73d
Organize rules of GenericEventListSummary on bubble layout (#8599)
* Organize - data-expanded=false

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Organize - data-expanded=true

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Organize - EventTile

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Dedupe mx_GenericEventListSummary[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>
2022-05-18 14:10:02 +01:00
Suguru Hirahara
bb46846981
Set common horizontal spacing rules for EventTile on the right panel (#8528)
* 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>
2022-05-18 14:08:39 +01:00