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

Fix reactions row overflow and gap between reactions (#8813)

t3chguy/dedup-icons-17oct
Suguru Hirahara 2022-06-16 17:47:37 +00:00 committed by GitHub
parent 3b28b1100f
commit 43f2ee4283
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
res/css/views/messages/_ReactionsRowButton.scss
View File

@ -17,14 +17,11 @@ limitations under the License.
.mx_ReactionsRowButton {
display: inline-flex;
line-height: $font-20px;
margin-right: 6px;
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;
&:hover {
border-color: $reaction-row-button-hover-border-color;

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

@ -60,10 +60,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 {

27
res/css/views/rooms/_EventBubbleTile.scss
View File

@ -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;
--EventTile_bubble_gap-inline: 5px;
position: relative;
@ -177,6 +179,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);
@ -205,6 +211,10 @@ limitations under the License.
margin-inline-end: auto;
}
.mx_ReactionsRow {
justify-content: flex-start;
}
--backgroundColor: $eventbubble-others-bg;
}
@ -242,13 +252,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
}
}
@ -269,12 +276,11 @@ limitations under the License.
}
.mx_EventTile_line {
--EventTile_bubble_line-margin-inline-end: -12px;
position: relative;
display: flex;
gap: 5px var(--EventTile_bubble_gap-inline);
margin: 0 var(--EventTile_bubble_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);
@ -481,11 +487,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 {

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

@ -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;
}
&[data-layout=group] {
> .mx_DisambiguatedProfile {
line-height: $font-20px;
@ -286,8 +293,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
.mx_ReactionsRow {
margin: 0;
padding: 4px 64px;
margin: $spacing-4 64px;
}
}
@ -981,7 +987,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
}
}
}