sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Move PinnedMessageBadge To Shared Components (#32768)

Browse Source 
* refactor: move pinned message badge into shared-components

* Update lint errors

* Fix for Vitest issue with CI on shared components

* Update related to the pr comments and requests

* Prettier Fix

* Update, remove view since it was just moved and not actually MVVMed

* Removed view suffix since it was only moved and not mvvmed

* Update snapshots

* Removal of unused screenshots

* Added Image that we need
This commit is contained in:
Zack
2026-03-12 13:34:45 +00:00
committed by GitHub
parent a1939f69ee
commit 9fa8b34ebe
15 changed files with 100 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/_components.pcss
-1
View File
@@ -236,7 +236,6 @@
@import "./views/messages/_MediaBody.pcss";
@import "./views/messages/_MessageActionBar.pcss";
@import "./views/messages/_MjolnirBody.pcss";
@import "./views/messages/_PinnedMessageBadge.pcss";
@import "./views/messages/_ReactionsRow.pcss";
@import "./views/messages/_RedactedBody.pcss";
@import "./views/messages/_RoomAvatarEvent.pcss";
apps/web/res/css/views/messages/_PinnedMessageBadge.pcss
-25
View File
@@ -1,25 +0,0 @@
/*
* Copyright 2024 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
.mx_PinnedMessageBadge {
position: relative;
display: flex;
align-items: center;
gap: var(--cpd-space-1x);
padding: var(--cpd-space-1x) var(--cpd-space-3x) var(--cpd-space-1x) var(--cpd-space-1x);
font: var(--cpd-font-body-xs-medium);
background-color: var(--cpd-color-bg-subtle-secondary);
color: var(--cpd-color-text-secondary);
border-radius: 99px;
border: 1px solid var(--cpd-color-alpha-gray-400);
svg {
fill: var(--cpd-color-icon-secondary);
}
}
apps/web/src/components/views/messages/PinnedMessageBadge.tsx
-23
View File
@@ -1,23 +0,0 @@
/*
* Copyright 2024 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import React, { type HTMLProps, type JSX } from "react";
import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
import { _t } from "../../../languageHandler";
/**
* A badge to indicate that a message is pinned.
*/
export function PinnedMessageBadge(props: Readonly<HTMLProps<HTMLDivElement>>): JSX.Element {
return (
<div {...props} className="mx_PinnedMessageBadge">
<PinIcon width="16px" height="16px" />
{_t("room|pinned_message_badge")}
</div>
);
}
apps/web/src/components/views/rooms/EventTile.tsx
+1 -1
View File
@@ -52,6 +52,7 @@ import {
useCreateAutoDisposedViewModel,
DecryptionFailureBodyView,
MessageTimestampView,
PinnedMessageBadge,
ReactionsRowButtonView,
ReactionsRowView,
useViewModel,
@@ -102,7 +103,6 @@ import { EventTileThreadToolbar } from "./EventTile/EventTileThreadToolbar";
import { getLateEventInfo } from "../../structures/grouper/LateEventGrouper";
import { Icon as LateIcon } from "../../../../res/img/sensor.svg";
import PinningUtils from "../../../utils/PinningUtils";
import { PinnedMessageBadge } from "../messages/PinnedMessageBadge";
import { EventPreview } from "./EventPreview";
import { ElementCallEventType } from "../../../call-types";
import { DecryptionFailureBodyViewModel } from "../../../viewmodels/message-body/DecryptionFailureBodyViewModel";
apps/web/src/i18n/strings/en_EN.json
-1
View File
@@ -2088,7 +2088,6 @@
"not_found_title": "This room or space does not exist.",
"not_found_title_name": "%(roomName)s does not exist.",
"peek_join_prompt": "You're previewing %(roomName)s. Want to join it?",
"pinned_message_badge": "Pinned message",
"pinned_message_banner": {
"button_close_list": "Close list",
"button_view_all": "View all",
apps/web/test/unit-tests/components/views/messages/PinnedMessageBadge-test.tsx
-18
View File
@@ -1,18 +0,0 @@
/*
* Copyright 2024 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render } from "jest-matrix-react";
import { PinnedMessageBadge } from "../../../../../src/components/views/messages/PinnedMessageBadge.tsx";
describe("PinnedMessageBadge", () => {
it("should render", () => {
const { asFragment } = render(<PinnedMessageBadge />);
expect(asFragment()).toMatchSnapshot();
});
});
apps/web/test/unit-tests/components/views/messages/__snapshots__/PinnedMessageBadge-test.tsx.snap
-22
View File
@@ -1,22 +0,0 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`PinnedMessageBadge should render 1`] = `
<DocumentFragment>
<div
class="mx_PinnedMessageBadge"
>
<svg
fill="currentColor"
height="16px"
viewBox="0 0 24 24"
width="16px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357z"
/>
</svg>
Pinned message
</div>
</DocumentFragment>
`;