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

Commit

Permalink
Consolidate RedactionGrouper and HiddenEventGrouper into MELS (#7739)
Browse files Browse the repository at this point in the history
  • Loading branch information
t3chguy authored Feb 9, 2022
1 parent 59cdd3e commit 714136d
Show file tree
Hide file tree
Showing 13 changed files with 749 additions and 886 deletions.
2 changes: 1 addition & 1 deletion res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_ErrorBoundary.scss";
@import "./views/elements/_EventListSummary.scss";
@import "./views/elements/_GenericEventListSummary.scss";
@import "./views/elements/_EventTilePreview.scss";
@import "./views/elements/_ExternalLink.scss";
@import "./views/elements/_FacePile.scss";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,58 +14,58 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_EventListSummary {
.mx_GenericEventListSummary {
position: relative;
}

.mx_TextualEvent.mx_EventListSummary_summary {
.mx_TextualEvent.mx_GenericEventListSummary_summary {
font-size: $font-14px;
display: inline-flex;
}

.mx_EventListSummary_avatars {
.mx_GenericEventListSummary_avatars {
display: inline-block;
margin-right: 8px;
padding-top: 8px;
line-height: $font-12px;
}

.mx_EventListSummary_avatars .mx_BaseAvatar {
.mx_GenericEventListSummary_avatars .mx_BaseAvatar {
margin-right: -4px;
cursor: pointer;
}

.mx_EventListSummary_toggle {
.mx_GenericEventListSummary_toggle {
color: $accent;
cursor: pointer;
float: right;
margin-right: 10px;
margin-top: 8px;
}

.mx_EventListSummary_line {
.mx_GenericEventListSummary_line {
border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px;
line-height: $font-30px;
}

.mx_MatrixChat_useCompactLayout {
.mx_EventListSummary {
.mx_GenericEventListSummary {
font-size: $font-13px;
.mx_EventTile_line {
line-height: $font-20px;
}
}

.mx_EventListSummary_line {
.mx_GenericEventListSummary_line {
line-height: $font-22px;
}

.mx_EventListSummary_toggle {
.mx_GenericEventListSummary_toggle {
margin-top: 3px;
}

.mx_TextualEvent.mx_EventListSummary_summary {
.mx_TextualEvent.mx_GenericEventListSummary_summary {
font-size: $font-13px;
}
}
2 changes: 1 addition & 1 deletion res/css/views/right_panel/_ThreadPanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ limitations under the License.
padding-right: 0;
}

.mx_EventTile, .mx_EventListSummary {
.mx_EventTile, .mx_GenericEventListSummary {
// Account for scrollbar when hovering
padding-top: 0;

Expand Down
20 changes: 10 additions & 10 deletions res/css/views/rooms/_EventBubbleTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ limitations under the License.
}

.mx_EventTile[data-layout=bubble],
.mx_EventListSummary[data-layout=bubble] {
.mx_GenericEventListSummary[data-layout=bubble] {
--avatarSize: 32px;
--gutterSize: 11px;
--cornerRadius: 12px;
Expand Down Expand Up @@ -477,7 +477,7 @@ limitations under the License.
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
.mx_EventTile.mx_EventTile_info[data-layout=bubble],
.mx_EventListSummary[data-layout=bubble][data-expanded=false] {
.mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] {
--backgroundColor: transparent;
--gutterSize: 0;

Expand Down Expand Up @@ -518,11 +518,11 @@ limitations under the License.
}
}

.mx_EventListSummary[data-layout=bubble] {
.mx_GenericEventListSummary[data-layout=bubble] {
--maxWidth: 70%;
margin-left: calc(var(--avatarSize) + var(--gutterSize));

.mx_EventListSummary_toggle {
.mx_GenericEventListSummary_toggle {
margin: 0 55px 0 5px;
float: none;

Expand All @@ -534,11 +534,11 @@ limitations under the License.
}
}

.mx_EventListSummary_line {
.mx_GenericEventListSummary_line {
display: none;
}

.mx_EventListSummary_avatars {
.mx_GenericEventListSummary_avatars {
padding-top: 0;
}

Expand All @@ -548,14 +548,14 @@ limitations under the License.
}
}

.mx_EventListSummary[data-expanded=false][data-layout=bubble] {
.mx_GenericEventListSummary[data-expanded=false][data-layout=bubble] {
// Align with left edge of bubble tiles
padding: 0 49px;
}

// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
// that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
.mx_EventListSummary[data-expanded=true][data-layout=bubble] {
.mx_GenericEventListSummary[data-expanded=true][data-layout=bubble] {
display: flex;
flex-direction: column;
margin: 0;
Expand All @@ -579,12 +579,12 @@ limitations under the License.
}

// increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
.mx_EventListSummary[data-layout=bubble][data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
.mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
margin-top: 20px;
}

/* events that do not require bubble layout */
.mx_EventListSummary[data-layout=bubble],
.mx_GenericEventListSummary[data-layout=bubble],
.mx_EventTile.mx_EventTile_bad[data-layout=bubble] {
.mx_EventTile_line {
background: transparent;
Expand Down
4 changes: 2 additions & 2 deletions res/css/views/rooms/_EventTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -281,11 +281,11 @@ $left-gutter: 64px;
}

.mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,
.mx_EventListSummary:not([data-layout=bubble]) > :not(.mx_EventTile) .mx_EventTile_avatar ~ .mx_EventTile_line {
.mx_GenericEventListSummary:not([data-layout=bubble]) > :not(.mx_EventTile) .mx_EventTile_avatar ~ .mx_EventTile_line {
padding-left: calc($left-gutter + 18px);
}

.mx_EventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
padding-left: $left-gutter;
}

Expand Down
4 changes: 2 additions & 2 deletions res/css/views/rooms/_IRCLayout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -139,12 +139,12 @@ $irc-line-height: $font-18px;
margin: 0;
}

.mx_EventListSummary {
.mx_GenericEventListSummary {
> .mx_EventTile_line {
padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
}

.mx_EventListSummary_avatars {
.mx_GenericEventListSummary_avatars {
padding: 0;
margin: 0 9px 0 0;
}
Expand Down
Loading

0 comments on commit 714136d

Please sign in to comment.