sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Set common horizontal spacing rules for EventTile on the right panel (#8528)

Browse Source 
* 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>
This commit is contained in:
Suguru Hirahara
2022-05-18 14:08:39 +01:00
committed by GitHub
parent 8d59612c74
commit bb46846981
4 changed files with 48 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/right_panel/_BaseCard.scss
+1
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;
res/css/views/right_panel/_ThreadPanel.scss
+16 -16
View File
@@ -139,13 +139,23 @@ limitations under the License.
}
}
&.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
position: relative;
min-height: 0; // don't displace the composer
flex-grow: 1;
&.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_FileDropTarget {
border-radius: 8px;
.mx_ThreadView_timelinePanelWrapper {
position: relative;
min-height: 0; // don't displace the composer
flex-grow: 1;
.mx_FileDropTarget {
border-radius: 8px;
}
}
}
@@ -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;
res/css/views/right_panel/_TimelineCard.scss
+11 -13
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 {