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

Commit

Permalink
Unify notifications panel event design (#9754)
Browse files Browse the repository at this point in the history
  • Loading branch information
Germain authored Dec 21, 2022
1 parent 6585fb1 commit bef8e07
Show file tree
Hide file tree
Showing 9 changed files with 191 additions and 219 deletions.
1 change: 0 additions & 1 deletion res/css/_components.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@
@import "./structures/_MainSplit.pcss";
@import "./structures/_MatrixChat.pcss";
@import "./structures/_NonUrgentToastContainer.pcss";
@import "./structures/_NotificationPanel.pcss";
@import "./structures/_QuickSettingsButton.pcss";
@import "./structures/_RightPanel.pcss";
@import "./structures/_RoomSearch.pcss";
Expand Down
113 changes: 0 additions & 113 deletions res/css/structures/_NotificationPanel.pcss

This file was deleted.

1 change: 0 additions & 1 deletion res/css/views/right_panel/_BaseCard.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,6 @@ limitations under the License.

.mx_FilePanel,
.mx_UserInfo,
.mx_NotificationPanel,
.mx_MemberList {
&.mx_BaseCard {
padding: $spacing-32 0 0;
Expand Down
26 changes: 18 additions & 8 deletions res/css/views/rooms/_EventTile.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -836,7 +836,8 @@ $left-gutter: 64px;
}
}

.mx_EventTile[data-shape="ThreadsList"] {
.mx_EventTile[data-shape="ThreadsList"],
.mx_EventTile[data-shape="Notification"] {
--topOffset: $spacing-12;
--leftOffset: 48px;
$borderRadius: 8px;
Expand Down Expand Up @@ -916,9 +917,7 @@ $left-gutter: 64px;
}

.mx_DisambiguatedProfile {
margin-inline: 0 $spacing-12;
display: inline-flex;
flex: 1;

.mx_DisambiguatedProfile_displayName,
.mx_DisambiguatedProfile_mxid {
Expand All @@ -941,6 +940,7 @@ $left-gutter: 64px;
width: 100%;
box-sizing: border-box;
padding-bottom: 0;
padding-inline-start: var(--leftOffset);

.mx_ThreadPanel_replies {
margin-top: $spacing-8;
Expand All @@ -966,11 +966,6 @@ $left-gutter: 64px;
}
}

.mx_DisambiguatedProfile,
.mx_EventTile_line {
padding-inline-start: var(--leftOffset);
}

.mx_MessageTimestamp {
font-size: $font-12px;
max-width: var(--MessageTimestamp-max-width);
Expand Down Expand Up @@ -1300,6 +1295,21 @@ $left-gutter: 64px;
}
}

.mx_EventTile_details {
display: flex;
width: -webkit-fill-available;
align-items: center;
justify-content: space-between;
gap: $spacing-8;
margin-left: var(--leftOffset);
.mx_EventTile_truncated {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}

/* Media query for mobile UI */
@media only screen and (max-width: 480px) {
.mx_EventTile_content {
Expand Down
18 changes: 16 additions & 2 deletions src/components/structures/NotificationPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import Spinner from "../views/elements/Spinner";
import { Layout } from "../../settings/enums/Layout";
import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
import Measured from "../views/elements/Measured";
import Heading from "../views/typography/Heading";

interface IProps {
onClose(): void;
Expand Down Expand Up @@ -90,8 +91,21 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
narrow: this.state.narrow,
}}
>
<BaseCard className="mx_NotificationPanel" onClose={this.props.onClose} withoutScrollContainer>
<Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />
<BaseCard
header={
<Heading size="h4" className="mx_BaseCard_header_title_heading">
{_t("Notifications")}
</Heading>
}
/**
* Need to rename this CSS class to something more generic
* Will be done once all the panels are using a similar layout
*/
className="mx_ThreadPanel"
onClose={this.props.onClose}
withoutScrollContainer={true}
>
{this.card.current && <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />}
{content}
</BaseCard>
</RoomContext.Provider>
Expand Down
Loading

0 comments on commit bef8e07

Please sign in to comment.