OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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>
pull/28217/head
Suguru Hirahara 2022-05-18 13:08:39 +00:00 committed by GitHub
parent 8d59612c74
commit bb46846981
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
res/css/views/right_panel/_BaseCard.scss
View File

@ -16,6 +16,7 @@ limitations under the License.
.mx_BaseCard {
--BaseCard_EventTile_line-padding-block: 2px;
--BaseCard_EventTile-spacing-horizontal: 36px;
padding: 0 8px;
overflow: hidden;

22
res/css/views/right_panel/_ThreadPanel.scss
View File

@ -139,7 +139,16 @@ limitations under the License.
}
}
&.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
&.mx_ThreadView {
// Inside a thread timeline only
.mx_GenericEventListSummary {
&:not([data-layout=bubble]) > .mx_EventTile_line {
padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text
}
}
.mx_ThreadView_timelinePanelWrapper {
position: relative;
min-height: 0; // don't displace the composer
flex-grow: 1;
@ -148,6 +157,7 @@ limitations under the License.
border-radius: 8px;
}
}
}
.mx_RoomView_messagePanel { // To avoid the rule from being applied to .mx_ThreadPanel_empty
.mx_RoomView_messageListWrapper {
@ -191,16 +201,6 @@ limitations under the License.
}
}
.mx_GenericEventListSummary {
&[data-layout=bubble] > .mx_EventTile_line {
padding-left: 30px !important; // Override main timeline styling - align summary text with message text
}
&:not([data-layout=bubble]) > .mx_EventTile_line {
padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
}
}
.mx_MessageComposer {
background-color: $background;
border-radius: 8px;

24
res/css/views/right_panel/_TimelineCard.scss
View File

@ -43,8 +43,8 @@ limitations under the License.
}
.mx_NewRoomIntro {
margin-inline-start: 36px; // TODO: Use a variable
margin-inline-end: 36px; // TODO: Use a variable
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal);
}
.mx_EventTile_content {
@ -52,13 +52,8 @@ limitations under the License.
}
.mx_EventTile:not([data-layout="bubble"]) {
$left-gutter: 36px;
.mx_EventTile_line {
padding-inline-start: $left-gutter;
padding-inline-end: 36px;
padding-top: var(--BaseCard_EventTile_line-padding-block);
padding-bottom: var(--BaseCard_EventTile_line-padding-block);
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-horizontal);
.mx_EventTile_e2eIcon {
inset-inline-start: 8px;
@ -68,7 +63,7 @@ limitations under the License.
.mx_DisambiguatedProfile,
.mx_ReactionsRow,
.mx_ThreadSummary {
margin-inline-start: $left-gutter;
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
}
.mx_ReactionsRow {
@ -101,7 +96,7 @@ limitations under the License.
&.mx_EventTile_info {
.mx_EventTile_line {
padding-left: $left-gutter;
padding-left: var(--BaseCard_EventTile-spacing-horizontal);
}
.mx_EventTile_avatar {
@ -118,9 +113,12 @@ limitations under the License.
}
}
.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line,
.mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-left: 36px;
.mx_GenericEventListSummary:not([data-layout=bubble]) {
.mx_EventTile_line,
> .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
padding-inline-end: var(--BaseCard_EventTile-spacing-horizontal);
}
}
.mx_ReadReceiptGroup {

13
res/css/views/rooms/_EventTile.scss
View File

@ -839,6 +839,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_ThreadView {
--ThreadView_group_spacing-start: 56px; // 56px: 64px - 8px (padding)
--ThreadView_group_spacing-end: 8px; // same as padding
display: flex;
flex-direction: column;
@ -882,11 +883,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
padding-bottom: var(--BaseCard_EventTile_line-padding-block);
}
}
}
.mx_EventTile[data-layout=bubble] {
margin-left: 36px;
margin-right: 36px;
&[data-layout=bubble] {
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal);
.mx_EventTile_line.mx_EventTile_mediaLine {
padding: 0 !important;
@ -905,6 +905,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
}
}
}
.mx_EventTile[data-layout=group] {
width: 100%;
@ -918,7 +919,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_ReplyChain_wrapper,
.mx_ReactionsRow {
margin-inline-start: var(--ThreadView_group_spacing-start);
margin-right: 8px;
margin-inline-end: var(--ThreadView_group_spacing-end);
.mx_EventTile_content,
.mx_HiddenBody,
@ -965,7 +966,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
.mx_EventTile_mediaLine {
padding-left: 36px;
padding-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
padding-right: 50px;
.mx_MImageBody {