PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Specify spacing around EventTileBubble for each layout (#9001)

Browse source 
* Apply margin to EventTileBubble on each layout

Use a variable to ensure alignment of EventTileBubble on IRC layout

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

* Improve style rules

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

* Apply the same block margin to every layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-07 09:24:24 +00:00 committed by GitHub
parent e3fda73b2b
commit b1fb609ab3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
res/css/views/messages/_EventTileBubble.scss
View file

@ -16,51 +16,43 @@ limitations under the License.
.mx_EventTileBubble {
background-color: $dark-panel-bg-color;
padding: 10px;
padding: 10px; // TODO: Use a spacing variable
border-radius: 8px;
margin: 10px auto;
// Reserve space for external timestamps, but also cap the width
max-width: min(calc(100% - 2 * $MessageTimestamp_width), 600px);
box-sizing: border-box;
display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content min-content;
.mx_EventTile[data-layout=bubble] & {
// Timestamps are inside the tile, so the width can be less constrained
max-width: 600px;
}
&::before, &::after {
&::before,
&::after {
position: relative;
grid-column: 1;
grid-row: 1 / 3;
width: 16px;
height: 16px;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
inset: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
margin-top: 4px;
margin-top: $spacing-4;
}
.mx_EventTileBubble_title, .mx_EventTileBubble_subtitle {
.mx_EventTileBubble_title,
.mx_EventTileBubble_subtitle {
grid-column: 2;
overflow-wrap: break-word;
}
.mx_EventTileBubble_title {
font-weight: 600;
font-size: $font-15px;
grid-column: 2;
grid-row: 1;
}
.mx_EventTileBubble_subtitle {
font-size: $font-12px;
grid-column: 2;
grid-row: 2;
}
@ -68,6 +60,6 @@ limitations under the License.
grid-column: 4;
grid-row: 1 / 3;
align-self: center;
margin-left: 16px;
margin-left: $spacing-16;
}
}

27
res/css/views/rooms/_EventTile.scss
View file

@ -73,6 +73,10 @@ $left-gutter: 64px;
}
}
.mx_EventTileBubble {
margin-block: 10px; // TODO: Use a spacing variable
}
.mx_MImageBody {
.mx_MImageBody_thumbnail_container {
display: flex;
@ -217,10 +221,28 @@ $left-gutter: 64px;
}
}
&[data-layout=bubble],
&[data-layout=group] {
.mx_EventTileBubble {
margin-inline: auto;
}
}
&[data-layout=irc] {
--EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
.mx_MessageTimestamp {
text-align: right;
}
.mx_EventTileBubble {
position: relative;
left: var(--EventTile_irc_line_info-inset-inline-start);
}
.mx_ReplyTile .mx_EventTileBubble {
left: unset; // Cancel the value specified above for the tile inside ReplyTile
}
}
&[data-layout=group] {
@ -306,6 +328,11 @@ $left-gutter: 64px;
}
&[data-layout=bubble] {
.mx_EventTileBubble {
// Timestamps are inside the tile, so the width can be less constrained
max-width: 600px;
}
&.mx_EventTile_continuation {
margin-top: 2px;
}

4
res/css/views/rooms/_IRCLayout.scss
View file

@ -163,13 +163,13 @@ $irc-line-height: $font-18px;
.mx_EventTile.mx_EventTile_info {
.mx_EventTile_avatar {
left: calc(var(--name-width) + 10px + var(--icon-width));
left: var(--EventTile_irc_line_info-inset-inline-start);
top: 0;
margin-right: var(--right-padding);
}
.mx_EventTile_line {
left: calc(var(--name-width) + 10px + var(--icon-width));
left: var(--EventTile_irc_line_info-inset-inline-start);
}
.mx_TextualEvent {