Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix reactions row overflow and gap between reactions #8813

Merged
merged 11 commits into from
Jun 16, 2022
Merged

Fix reactions row overflow and gap between reactions #8813

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8d6176c
Use the inherited value of padding for ReactionsRow of EventTile on T…
luixxiul May 18, 2022
7f5e75e
Replace padding around reactions row with margin
luixxiul May 18, 2022
1336ab8
Align reactions row with event tile bubble
luixxiul May 18, 2022
13cd581
Apply a flexbox to ReactionsRow of data-self=false as well
luixxiul May 20, 2022
0ea563d
Extract common declarations for ReactionsRow from _EventBubbleTile.scss
luixxiul May 20, 2022
d372fa2
Remove redundant margin declarations
luixxiul Jun 11, 2022
e8a0913
Remove a redundant declaration - cursor value can be inherited from A…
luixxiul Jun 11, 2022
cfa0b15
Remove a declaration not working
luixxiul Jun 11, 2022
b43a0ca
Merge branch 'develop' into TimelineCard_ReactionsRow
luixxiul Jun 12, 2022
f0403fa
Merge branch 'develop' into TimelineCard_ReactionsRow
luixxiul Jun 15, 2022
a270169
Merge branch 'develop' of https://github.com/luixxiul/matrix-react-sd…
luixxiul Jun 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions res/css/views/messages/_ReactionsRowButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,11 @@ limitations under the License.
.mx_ReactionsRowButton {
display: inline-flex;
line-height: $font-20px;
margin-right: 6px;
kerryarchibald marked this conversation as resolved.
Show resolved Hide resolved
padding: 1px 6px;
border: 1px solid $message-action-bar-border-color;
border-radius: 10px;
background-color: $header-panel-bg-color;
cursor: pointer;
user-select: none;
vertical-align: middle;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vertical-align property only applies to inline-level elements.


&:hover {
border-color: $reaction-row-button-hover-border-color;
Expand Down
5 changes: 1 addition & 4 deletions res/css/views/right_panel/_TimelineCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,7 @@ limitations under the License.
}

.mx_ReactionsRow {
padding: 0;

// See margin setting of ReactionsRow on _EventTile.scss
margin-right: 8px;
margin-inline-end: $spacing-8; // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.scss
}

.mx_ThreadSummary {
Expand Down
27 changes: 14 additions & 13 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ limitations under the License.
.mx_EventTile[data-layout=bubble] {
--EventTile_bubble-margin-inline-start: 49px;
--EventTile_bubble-margin-inline-end: 60px;
--EventTile_bubble_line-margin-inline-start: -9px;
--EventTile_bubble_line-margin-inline-end: -12px;

position: relative;
margin-top: var(--gutterSize);
Expand Down Expand Up @@ -176,6 +178,10 @@ limitations under the License.
border-color: $quinary-content;
}

.mx_ReactionsRow {
margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
}

&[data-self=false] {
.mx_EventTile_line {
border-bottom-right-radius: var(--cornerRadius);
Expand Down Expand Up @@ -204,6 +210,10 @@ limitations under the License.
margin-inline-end: auto;
}

.mx_ReactionsRow {
justify-content: flex-start;
}

--backgroundColor: $eventbubble-others-bg;
}

Expand Down Expand Up @@ -241,13 +251,10 @@ limitations under the License.
}

.mx_ReactionsRow {
float: right;
clear: right;
display: flex;
justify-content: flex-end;

/* Moving the "add reaction button" before the reactions */
> :last-child {
order: -1;
order: -1; // Moving the "add reaction button" before the reactions
kerryarchibald marked this conversation as resolved.
Show resolved Hide resolved
}
}

Expand All @@ -268,12 +275,11 @@ limitations under the License.
}

.mx_EventTile_line {
--EventBubbleTile_line-margin-inline-end: -12px;

position: relative;
display: flex;
gap: 5px;
margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 -9px;
margin-block: 0;
margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
border-top-left-radius: var(--cornerRadius);
border-top-right-radius: var(--cornerRadius);

Expand Down Expand Up @@ -480,11 +486,6 @@ limitations under the License.
}
}

.mx_ReactionsRow {
margin-right: -18px;
margin-left: -9px;
}

&.mx_EventTile_bad {
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
.mx_EventTile_line {
Expand Down
12 changes: 9 additions & 3 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
}

.mx_ReactionsRow {
display: flex;
flex-flow: wrap;
align-items: center;
gap: $spacing-4;
kerryarchibald marked this conversation as resolved.
Show resolved Hide resolved
}

&[data-layout=group] {
.mx_EventTile_line {
line-height: var(--GroupLayout-EventTile-line-height);
Expand Down Expand Up @@ -270,8 +277,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}

.mx_ReactionsRow {
margin: 0;
padding: 4px 64px;
margin: $spacing-4 64px;
}
}

Expand Down Expand Up @@ -963,7 +969,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
align-items: flex-end;

.mx_EventTile_line.mx_EventTile_mediaLine {
margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 0; // align with normal messages
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages
}
}
}
Expand Down