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

Improve pinned messages in Labs #6096

Merged
merged 21 commits into from
Jun 3, 2021
Merged

Improve pinned messages in Labs #6096

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
170b11d
Convert RightPanel to Typescript
t3chguy May 25, 2021
152c178
Convert NotificationPanel to Typescript
t3chguy May 25, 2021
13427aa
Add a pulse animation to the pinned messages indicator and move it
t3chguy May 25, 2021
96928e5
Header Buttons switch to a fragment from an array of nodes
t3chguy May 25, 2021
02d11b8
Extend HeaderButton and HeaderButtons to be more generic
t3chguy May 25, 2021
a6ca8f7
Fix useAsyncMemo out-of-order resolutions
t3chguy May 25, 2021
4fa6d35
Convert PinnedEventTile to Typescript
t3chguy May 25, 2021
59f4c72
Initial cut of Pinned event card in the right panel
t3chguy May 25, 2021
c1f397d
delint
t3chguy May 25, 2021
fd74a94
add header
t3chguy May 25, 2021
27ad907
Iterate pinned messages
t3chguy May 26, 2021
54d8953
delint
t3chguy May 26, 2021
0758c09
i18n
t3chguy May 26, 2021
1ff8709
When pinning a message automatically mark it as read
t3chguy May 26, 2021
53fc475
Update src/components/views/rooms/PinnedEventTile.tsx
t3chguy Jun 3, 2021
42a3ace
Iterate PR based on feedback
t3chguy Jun 3, 2021
4765216
Merge branch 't3chguy/fix/6606' of github.com:matrix-org/matrix-react…
t3chguy Jun 3, 2021
83d2234
delint imports
t3chguy Jun 3, 2021
4f50727
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into…
t3chguy Jun 3, 2021
93010d3
Merge branch 'develop' into t3chguy/fix/6606
t3chguy Jun 3, 2021
5d0d81e
not sure how I butchered this merge conflict resolution this much.
t3chguy Jun 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion res/css/_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,7 @@
@import "./views/messages/_common_CryptoEvent.scss";
@import "./views/right_panel/_BaseCard.scss";
@import "./views/right_panel/_EncryptionInfo.scss";
@import "./views/right_panel/_PinnedMessagesCard.scss";
@import "./views/right_panel/_RoomSummaryCard.scss";
@import "./views/right_panel/_UserInfo.scss";
@import "./views/right_panel/_VerificationPanel.scss";
Expand All @@ -203,7 +204,6 @@
@import "./views/rooms/_NewRoomIntro.scss";
@import "./views/rooms/_NotificationBadge.scss";
@import "./views/rooms/_PinnedEventTile.scss";
@import "./views/rooms/_PinnedEventsPanel.scss";
@import "./views/rooms/_PresenceLabel.scss";
@import "./views/rooms/_ReplyPreview.scss";
@import "./views/rooms/_RoomBreadcrumbs.scss";
Expand Down
42 changes: 42 additions & 0 deletions res/css/structures/_RightPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,48 @@ limitations under the License.
mask-position: center;
}

$dot-size: 8px;
$pulse-color: $pinned-unread-color;

.mx_RightPanel_pinnedMessagesButton {
&::before {
mask-image: url('$(res)/img/element-icons/room/pin.svg');
mask-position: center;
}

.mx_RightPanel_pinnedMessagesButton_unreadIndicator {
position: absolute;
right: 0;
top: 0;
margin: 4px;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_RightPanel_indicator_pulse 2s infinite;
animation-iteration-count: 1;
}
}

@keyframes mx_RightPanel_indicator_pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0.7);
}

70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba($pulse-color, 0);
}

100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba($pulse-color, 0);
}
}

.mx_RightPanel_headerButton_highlight {
&::before {
background-color: $accent-color !important;
Expand Down
34 changes: 16 additions & 18 deletions res/css/views/rooms/_PinnedEventsPanel.scss → ...iews/right_panel/_PinnedMessagesCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
Copyright 2017 Travis Ralston
Copyright 2021 The Matrix.org Foundation C.I.C.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

goodbye, self.

(I'm okay with this happening - I don't want any of the old CSS associated with my name)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean, there is no old CSS here. All of it is brand new, I probably renamed the file to save me having to copy-paste the license :)


Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand All @@ -14,24 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_PinnedEventsPanel {
border-top: 1px solid $primary-hairline-color;
}
.mx_PinnedMessagesCard {
padding-top: 0;

.mx_PinnedEventsPanel_body {
max-height: 300px;
overflow-y: auto;
padding-bottom: 15px;
}
.mx_BaseCard_header {
text-align: center;
margin-top: 0;
border-bottom: 1px solid $menu-border-color;

.mx_PinnedEventsPanel_header {
margin: 0;
padding-top: 8px;
padding-bottom: 15px;
}
> h2 {
font-weight: $font-semi-bold;
font-size: $font-18px;
margin: 8px 0;
}

.mx_PinnedEventsPanel_cancel {
margin: 12px;
float: right;
display: inline-block;
.mx_BaseCard_close {
margin-right: 6px;
}
}
}
123 changes: 76 additions & 47 deletions res/css/views/rooms/_PinnedEventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,62 +16,91 @@ limitations under the License.

.mx_PinnedEventTile {
min-height: 40px;
margin-bottom: 5px;
width: 100%;
border-radius: 5px; // for the hover
}
padding: 0 4px 12px;

.mx_PinnedEventTile:hover {
background-color: $event-selected-color;
}
display: grid;
grid-template-areas:
"avatar name remove"
"content content content"
"footer footer footer";
grid-template-rows: max-content auto max-content;
grid-template-columns: 24px auto 24px;
grid-row-gap: 12px;
grid-column-gap: 8px;

.mx_PinnedEventTile .mx_PinnedEventTile_sender,
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
color: #868686;
font-size: 0.8em;
vertical-align: top;
display: inline-block;
padding-bottom: 3px;
}
& + .mx_PinnedEventTile {
padding: 12px 4px;
border-top: 1px solid $menu-border-color;
}

.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
padding-left: 15px;
display: none;
}
.mx_PinnedEventTile_senderAvatar {
grid-area: avatar;
}

.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
float: left;
margin-right: 10px;
}
.mx_PinnedEventTile_sender {
grid-area: name;
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-24px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.mx_PinnedEventTile_actions {
float: right;
margin-right: 10px;
display: none;
}
.mx_PinnedEventTile_unpinButton {
visibility: hidden;
grid-area: remove;
position: relative;
width: 24px;
height: 24px;
border-radius: 8px;

.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
display: inline-block;
}
&:hover {
background-color: $roomheader-addroom-bg-color;
}

.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
display: block;
}
&::before {
content: "";
position: absolute;
//top: 0;
//left: 0;
height: inherit;
width: inherit;
background: $secondary-fg-color;
mask-position: center;
mask-size: 8px;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/image-view/close.svg');
}
}

.mx_PinnedEventTile_unpinButton {
display: inline-block;
cursor: pointer;
margin-left: 10px;
}
.mx_PinnedEventTile_message {
grid-area: content;
}

.mx_PinnedEventTile_gotoButton {
display: inline-block;
font-size: 0.7em; // Smaller text to avoid conflicting with the layout
}
.mx_PinnedEventTile_footer {
grid-area: footer;
font-size: 10px;
line-height: 12px;

.mx_PinnedEventTile_timestamp {
font-size: inherit;
line-height: inherit;
color: $secondary-fg-color;
}

.mx_AccessibleButton_kind_link {
padding: 0;
margin-left: 12px;
font-size: inherit;
line-height: inherit;
}
}

.mx_PinnedEventTile_message {
margin-left: 50px;
position: relative;
top: 0;
left: 0;
&:hover {
.mx_PinnedEventTile_unpinButton {
visibility: visible;
}
}
}
18 changes: 0 additions & 18 deletions res/css/views/rooms/_RoomHeader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,24 +277,6 @@ limitations under the License.
margin-top: 18px;
}

.mx_RoomHeader_pinnedButton::before {
mask-image: url('$(res)/img/element-icons/room/pin.svg');
}

.mx_RoomHeader_pinsIndicator {
position: absolute;
right: 0;
bottom: 4px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $pinned-color;
}

.mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color;
}

@media only screen and (max-width: 480px) {
.mx_RoomHeader_wrapper {
padding: 0;
Expand Down
10 changes: 5 additions & 5 deletions res/img/element-icons/room/pin.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 11 additions & 16 deletions ...omponents/structures/NotificationPanel.js → ...mponents/structures/NotificationPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
/*
Copyright 2016 OpenMarket Ltd
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2016, 2019, 2021 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand All @@ -16,29 +14,25 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React from 'react';
import PropTypes from "prop-types";
import React from "react";

import { _t } from '../../languageHandler';
import {MatrixClientPeg} from "../../MatrixClientPeg";
import * as sdk from "../../index";
import BaseCard from "../views/right_panel/BaseCard";
import {replaceableComponent} from "../../utils/replaceableComponent";
import TimelinePanel from "./TimelinePanel";
import Spinner from "../views/elements/Spinner";

interface IProps {
onClose(): void;
}

/*
* Component which shows the global notification list using a TimelinePanel
*/
@replaceableComponent("structures.NotificationPanel")
class NotificationPanel extends React.Component {
static propTypes = {
onClose: PropTypes.func.isRequired,
};

class NotificationPanel extends React.Component<IProps> {
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
render() {
// wrap a TimelinePanel with the jump-to-event bits turned off.
const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
const Loader = sdk.getComponent("elements.Spinner");

const emptyState = (<div className="mx_RightPanel_empty mx_NotificationPanel_empty">
<h2>{_t('You’re all caught up')}</h2>
<p>{_t('You have no visible notifications.')}</p>
Expand All @@ -47,6 +41,7 @@ class NotificationPanel extends React.Component {
let content;
const timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
if (timelineSet) {
// wrap a TimelinePanel with the jump-to-event bits turned off.
content = (
<TimelinePanel
manageReadReceipts={false}
Expand All @@ -59,7 +54,7 @@ class NotificationPanel extends React.Component {
);
} else {
console.error("No notifTimelineSet available!");
content = <Loader />;
content = <Spinner />;
}

return <BaseCard className="mx_NotificationPanel" onClose={this.props.onClose} withoutScrollContainer>
Expand Down
Loading