Merge style rules related to EventTile on IRC layout (#10700)

* Manage rules related to EventTile on `_EventTile.pcss`

The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss.

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

* Merge - `--EventTile_irc_line_info-margin-inline-start`

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

* Merge - `mx_EventTile_msgOption`

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

* Merge - `mx_MessageTimestamp`

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

* Merge - `mx_EventTileBubble`

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

* Merge - `mx_ReplyChain`

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

* Merge - `mx_ReplyTile .mx_EventTileBubble`

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

* Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line`

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

* Merge - `&.mx_EventTile_info`

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

* Convert the variable with a custom property

To fix the syntax error "Undefined variable $irc-line-height" because of cascading order.

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

* Merge - '.mx_EventTile_emote'

The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted.

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2023-05-03 11:06:51 +00:00 committed by GitHub
parent 5162cefa78
commit 23174904ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 154 additions and 158 deletions

View file

@ -207,7 +207,7 @@ describe("Timeline", () => {
cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_spacer").should( cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_spacer").should(
"have.css", "have.css",
"line-height", "line-height",
"18px", // $irc-line-height: $font-18px (See: _IRCLayout.pcss) "18px", // var(--irc-line-height): $font-18px (See: _IRCLayout.pcss)
); );
cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on IRC layout", { percyCSS }); cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on IRC layout", { percyCSS });

View file

@ -281,22 +281,156 @@ $left-gutter: 64px;
} }
&[data-layout="irc"] { &[data-layout="irc"] {
--EventTile_irc_line-padding-block: 1px;
/* add --right-padding value of MessageTimestamp only */ /* add --right-padding value of MessageTimestamp only */
/* stylelint-disable-next-line declaration-colon-space-after */ /* stylelint-disable-next-line declaration-colon-space-after */
--EventTile_irc_line_info-margin-inline-start: calc( --EventTile_irc_line_info-margin-inline-start: calc(
var(--name-width) + var(--icon-width) + 1 * var(--right-padding) var(--name-width) + var(--icon-width) + 1 * var(--right-padding)
); );
display: flex;
align-items: flex-start;
padding-top: 0;
> a {
text-decoration: none; /* timestamps are links which shouldn't be underlined */
min-width: $MessageTimestamp_width; /* ensure space for EventTile without timestamp */
}
> * {
margin-right: var(--right-padding);
}
.mx_EventTile_avatar,
.mx_EventTile_e2eIcon {
height: var(--irc-line-height);
}
.mx_EventTile_avatar,
.mx_DisambiguatedProfile,
.mx_EventTile_e2eIcon,
.mx_EventTile_msgOption { .mx_EventTile_msgOption {
.mx_ReadReceiptGroup { flex-shrink: 0;
inset-block-start: -0.3rem; /* ($irc-line-height - avatar height) / 2 */ }
.mx_EventTile_avatar {
order: 1;
position: relative;
display: flex;
align-items: center;
/* Need to use important to override the js provided height and width values. */
> .mx_BaseAvatar,
> .mx_BaseAvatar > * {
height: $font-14px !important;
width: $font-14px !important;
font-size: $font-10px !important;
line-height: $font-15px !important;
} }
} }
.mx_DisambiguatedProfile {
order: 2;
width: var(--name-width);
margin-inline-end: 0; /* override mx_EventTile > * */
> .mx_DisambiguatedProfile_displayName {
width: 100%;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
}
> .mx_DisambiguatedProfile_mxid {
visibility: collapse;
margin-left: 0; /* Override the inherited margin. */
padding: 0 5px; /* TODO: Use a spacing variable */
}
&:hover {
overflow: visible;
z-index: 10;
> .mx_DisambiguatedProfile_displayName {
overflow: visible;
display: inline;
background-color: $event-selected-color;
border-radius: 8px 0 0 8px;
padding-right: $spacing-8;
}
> .mx_DisambiguatedProfile_mxid {
visibility: visible;
opacity: 1;
background-color: $event-selected-color;
}
}
}
.mx_EventTile_e2eIcon {
padding: 0;
flex-grow: 0;
background-position: center;
}
.mx_EventTile_line {
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_ViewSourceEvent,
.mx_MTextBody {
/* add a 1px padding top and bottom because our larger
emoji font otherwise gets cropped by anti-zalgo */
padding: var(--EventTile_irc_line-padding-block) 0;
}
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_MTextBody {
display: inline-block;
}
.mx_ReplyTile {
.mx_MTextBody {
display: -webkit-box; /* Enable -webkit-line-clamp */
}
}
}
.mx_EventTile_line,
.mx_EventTile_reply {
order: 3;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
.mx_EventTile_reply {
order: 4;
}
.mx_EventTile_msgOption {
order: 5;
.mx_ReadReceiptGroup {
inset-block-start: -0.3rem; /* (var(--irc-line-height) - avatar height) / 2 */
}
}
.mx_ReplyChain {
margin: 0;
}
.mx_MessageTimestamp { .mx_MessageTimestamp {
text-align: right; text-align: right;
} }
.mx_EditMessageComposer_buttons {
position: relative;
}
.mx_EventTileBubble { .mx_EventTileBubble {
position: relative; position: relative;
left: var(--EventTile_irc_line_info-margin-inline-start); left: var(--EventTile_irc_line_info-margin-inline-start);
@ -306,10 +440,6 @@ $left-gutter: 64px;
} }
} }
.mx_ReplyChain {
margin: 0;
}
.mx_ReplyTile .mx_EventTileBubble { .mx_ReplyTile .mx_EventTileBubble {
left: unset; /* Cancel the value specified above for the tile inside ReplyTile */ left: unset; /* Cancel the value specified above for the tile inside ReplyTile */
} }
@ -332,6 +462,18 @@ $left-gutter: 64px;
.mx_EventTile_line { .mx_EventTile_line {
margin-inline-start: var(--EventTile_irc_line_info-margin-inline-start); margin-inline-start: var(--EventTile_irc_line_info-margin-inline-start);
} }
.mx_ViewSourceEvent, /* For hidden events */
.mx_TextualEvent {
line-height: var(--irc-line-height);
}
}
&.mx_EventTile_emote {
.mx_EventTile_avatar {
/* add --right-padding value of MessageTimestamp only */
margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding));
}
} }
} }

View file

@ -14,12 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$irc-line-height: $font-18px; :root {
--irc-line-height: $font-18px;
}
.mx_IRCLayout { .mx_IRCLayout {
--name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */ --name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */
--icon-width: 14px; --icon-width: 14px;
--line-height: $irc-line-height; --line-height: var(--irc-line-height);
--right-padding: 5px; /* TODO: Use a spacing variable */ --right-padding: 5px; /* TODO: Use a spacing variable */
line-height: var(--line-height) !important; line-height: var(--line-height) !important;
@ -30,155 +32,7 @@ $irc-line-height: $font-18px;
.mx_NewRoomIntro { .mx_NewRoomIntro {
> h2 { > h2 {
line-height: initial; /* Cancel $irc-line-height */ line-height: initial; /* Cancel var(--irc-line-height) */
}
}
.mx_EventTile[data-layout="irc"] {
--EventTile_irc_line-padding-block: 1px;
display: flex;
align-items: flex-start;
padding-top: 0;
> a {
text-decoration: none; /* timestamps are links which shouldn't be underlined */
min-width: $MessageTimestamp_width; /* ensure space for EventTile without timestamp */
}
> * {
margin-right: var(--right-padding);
}
.mx_EventTile_avatar,
.mx_EventTile_e2eIcon {
height: $irc-line-height;
}
.mx_EventTile_avatar,
.mx_DisambiguatedProfile,
.mx_EventTile_e2eIcon,
.mx_EventTile_msgOption {
flex-shrink: 0;
}
.mx_EventTile_avatar {
order: 1;
position: relative;
display: flex;
align-items: center;
/* Need to use important to override the js provided height and width values. */
> .mx_BaseAvatar,
> .mx_BaseAvatar > * {
height: $font-14px !important;
width: $font-14px !important;
font-size: $font-10px !important;
line-height: $font-15px !important;
}
}
.mx_DisambiguatedProfile {
order: 2;
width: var(--name-width);
margin-inline-end: 0; /* override mx_EventTile > * */
> .mx_DisambiguatedProfile_displayName {
width: 100%;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
}
> .mx_DisambiguatedProfile_mxid {
visibility: collapse;
margin-left: 0; /* Override the inherited margin. */
padding: 0 5px; /* TODO: Use a spacing variable */
}
&:hover {
overflow: visible;
z-index: 10;
> .mx_DisambiguatedProfile_displayName {
overflow: visible;
display: inline;
background-color: $event-selected-color;
border-radius: 8px 0 0 8px;
padding-right: $spacing-8;
}
> .mx_DisambiguatedProfile_mxid {
visibility: visible;
opacity: 1;
background-color: $event-selected-color;
}
}
}
.mx_EventTile_e2eIcon {
padding: 0;
flex-grow: 0;
background-position: center;
}
.mx_EventTile_line {
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_ViewSourceEvent,
.mx_MTextBody {
/* add a 1px padding top and bottom because our larger
emoji font otherwise gets cropped by anti-zalgo */
padding: var(--EventTile_irc_line-padding-block) 0;
}
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_MTextBody {
display: inline-block;
}
.mx_ReplyTile {
.mx_MTextBody {
display: -webkit-box; /* Enable -webkit-line-clamp */
}
}
}
.mx_EventTile_line,
.mx_EventTile_reply {
order: 3;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
.mx_EventTile_reply {
order: 4;
}
.mx_EventTile_msgOption {
order: 5;
}
.mx_EditMessageComposer_buttons {
position: relative;
}
&.mx_EventTile_info {
.mx_ViewSourceEvent, /* For hidden events */
.mx_TextualEvent {
line-height: $irc-line-height;
}
}
}
.mx_EventTile_emote {
.mx_EventTile_avatar {
/* add --right-padding value of MessageTimestamp only */
margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding));
} }
} }