From 1e46efe89c4d155cb9cf8381cafb2f30443527b1 Mon Sep 17 00:00:00 2001 From: Kerry Date: Mon, 13 Mar 2023 09:22:30 +1300 Subject: [PATCH] Poll history - make poll history independent from dialogs (#10349) * move pollhistory from dialogs to polls directory * rename PollHistoryDialog -> PollHistory * rename references to PollHistoryDialog * move title to PollHistory * add option to collapse empty dialog header --- res/css/_common.pcss | 5 + res/css/_components.pcss | 4 +- .../pollHistory/_PollHistory.pcss} | 6 +- .../pollHistory}/_PollHistoryList.pcss | 0 src/components/views/dialogs/BaseDialog.tsx | 22 ++- .../views/dialogs/PollHistoryDialog.tsx | 49 +++++ .../pollHistory}/PollDetail.tsx | 2 +- .../pollHistory}/PollDetailHeader.tsx | 0 .../pollHistory/PollHistory.tsx} | 49 +++-- .../pollHistory}/PollHistoryList.tsx | 2 +- .../pollHistory}/PollListItem.tsx | 0 .../pollHistory}/PollListItemEnded.tsx | 0 .../pollHistory}/fetchPastPolls.ts | 0 .../polls => polls/pollHistory}/types.ts | 0 .../pollHistory}/usePollHistory.ts | 0 .../views/right_panel/RoomSummaryCard.tsx | 2 +- src/i18n/strings/en_EN.json | 32 +-- .../PollHistoryDialog-test.tsx.snap | 186 ------------------ .../pollHistory/PollHistory-test.tsx} | 18 +- .../pollHistory}/PollListItem-test.tsx | 2 +- .../pollHistory}/PollListItemEnded-test.tsx | 2 +- .../__snapshots__/PollHistory-test.tsx.snap | 158 +++++++++++++++ .../__snapshots__/PollListItem-test.tsx.snap | 0 .../PollListItemEnded-test.tsx.snap | 0 .../right_panel/RoomSummaryCard-test.tsx | 2 +- 25 files changed, 290 insertions(+), 251 deletions(-) rename res/css/views/{dialogs/polls/_PollHistoryDialog.pcss => polls/pollHistory/_PollHistory.pcss} (86%) rename res/css/views/{dialogs/polls => polls/pollHistory}/_PollHistoryList.pcss (100%) create mode 100644 src/components/views/dialogs/PollHistoryDialog.tsx rename src/components/views/{dialogs/polls => polls/pollHistory}/PollDetail.tsx (97%) rename src/components/views/{dialogs/polls => polls/pollHistory}/PollDetailHeader.tsx (100%) rename src/components/views/{dialogs/polls/PollHistoryDialog.tsx => polls/pollHistory/PollHistory.tsx} (71%) rename src/components/views/{dialogs/polls => polls/pollHistory}/PollHistoryList.tsx (99%) rename src/components/views/{dialogs/polls => polls/pollHistory}/PollListItem.tsx (100%) rename src/components/views/{dialogs/polls => polls/pollHistory}/PollListItemEnded.tsx (100%) rename src/components/views/{dialogs/polls => polls/pollHistory}/fetchPastPolls.ts (100%) rename src/components/views/{dialogs/polls => polls/pollHistory}/types.ts (100%) rename src/components/views/{dialogs/polls => polls/pollHistory}/usePollHistory.ts (100%) delete mode 100644 test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap rename test/components/views/{dialogs/polls/PollHistoryDialog-test.tsx => polls/pollHistory/PollHistory-test.tsx} (95%) rename test/components/views/{dialogs/polls => polls/pollHistory}/PollListItem-test.tsx (98%) rename test/components/views/{dialogs/polls => polls/pollHistory}/PollListItemEnded-test.tsx (99%) create mode 100644 test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap rename test/components/views/{dialogs/polls => polls/pollHistory}/__snapshots__/PollListItem-test.tsx.snap (100%) rename test/components/views/{dialogs/polls => polls/pollHistory}/__snapshots__/PollListItemEnded-test.tsx.snap (100%) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index bf7b1c14de..7b0d4c8d87 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -460,6 +460,11 @@ legend { padding-right: 20px; /* leave space for the 'X' cancel button */ } +.mx_Dialog_header.mx_Dialog_headerWithCancelOnly { + padding: 0 20px 0 0; + margin: 0; +} + .mx_Dialog_title.danger { color: $alert; } diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 6a7bbd197f..a7c7a54cfd 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -166,8 +166,6 @@ @import "./views/dialogs/_UserSettingsDialog.pcss"; @import "./views/dialogs/_VerifyEMailDialog.pcss"; @import "./views/dialogs/_WidgetCapabilitiesPromptDialog.pcss"; -@import "./views/dialogs/polls/_PollHistoryDialog.pcss"; -@import "./views/dialogs/polls/_PollHistoryList.pcss"; @import "./views/dialogs/security/_AccessSecretStorageDialog.pcss"; @import "./views/dialogs/security/_CreateCrossSigningDialog.pcss"; @import "./views/dialogs/security/_CreateKeyBackupDialog.pcss"; @@ -256,6 +254,8 @@ @import "./views/messages/_UnknownBody.pcss"; @import "./views/messages/_ViewSourceEvent.pcss"; @import "./views/messages/_common_CryptoEvent.pcss"; +@import "./views/polls/pollHistory/_PollHistory.pcss"; +@import "./views/polls/pollHistory/_PollHistoryList.pcss"; @import "./views/right_panel/_BaseCard.pcss"; @import "./views/right_panel/_EncryptionInfo.pcss"; @import "./views/right_panel/_PinnedMessagesCard.pcss"; diff --git a/res/css/views/dialogs/polls/_PollHistoryDialog.pcss b/res/css/views/polls/pollHistory/_PollHistory.pcss similarity index 86% rename from res/css/views/dialogs/polls/_PollHistoryDialog.pcss rename to res/css/views/polls/pollHistory/_PollHistory.pcss index 39a53344ed..ee7860dd60 100644 --- a/res/css/views/dialogs/polls/_PollHistoryDialog.pcss +++ b/res/css/views/polls/pollHistory/_PollHistory.pcss @@ -14,10 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_PollHistoryDialog_content { +.mx_PollHistory_content { height: 600px; width: 100%; display: flex; flex-direction: column; } + +.mx_PollHistory_header.mx_Heading_h2 { + margin-bottom: $spacing-16; +} diff --git a/res/css/views/dialogs/polls/_PollHistoryList.pcss b/res/css/views/polls/pollHistory/_PollHistoryList.pcss similarity index 100% rename from res/css/views/dialogs/polls/_PollHistoryList.pcss rename to res/css/views/polls/pollHistory/_PollHistoryList.pcss diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx index 5068ef075d..22ba1d2611 100644 --- a/src/components/views/dialogs/BaseDialog.tsx +++ b/src/components/views/dialogs/BaseDialog.tsx @@ -151,6 +151,9 @@ export default class BaseDialog extends React.Component { lockProps["aria-labelledby"] = "mx_BaseDialog_title"; } + const isHeaderWithCancelOnly = + !!cancelButton && !this.props.title && !this.props.headerButton && !this.props.headerImage; + return ( {this.props.screenName && } @@ -166,16 +169,19 @@ export default class BaseDialog extends React.Component { className={classNames("mx_Dialog_header", { mx_Dialog_headerWithButton: !!this.props.headerButton, mx_Dialog_headerWithCancel: !!cancelButton, + mx_Dialog_headerWithCancelOnly: isHeaderWithCancelOnly, })} > - - {headerImage} - {this.props.title} - + {!!(this.props.title || headerImage) && ( + + {headerImage} + {this.props.title} + + )} {this.props.headerButton} {cancelButton} diff --git a/src/components/views/dialogs/PollHistoryDialog.tsx b/src/components/views/dialogs/PollHistoryDialog.tsx new file mode 100644 index 0000000000..5ee88bbd39 --- /dev/null +++ b/src/components/views/dialogs/PollHistoryDialog.tsx @@ -0,0 +1,49 @@ +/* +Copyright 2023 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. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { MatrixClient } from "matrix-js-sdk/src/client"; +import { Room } from "matrix-js-sdk/src/matrix"; + +import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; +import { PollHistory } from "../polls/pollHistory/PollHistory"; +import BaseDialog from "./BaseDialog"; + +type PollHistoryDialogProps = { + room: Room; + matrixClient: MatrixClient; + permalinkCreator: RoomPermalinkCreator; + onFinished(): void; +}; + +export const PollHistoryDialog: React.FC = ({ + room, + matrixClient, + permalinkCreator, + onFinished, +}) => { + // @TODO hide dialog title somehow + return ( + + + + ); +}; diff --git a/src/components/views/dialogs/polls/PollDetail.tsx b/src/components/views/polls/pollHistory/PollDetail.tsx similarity index 97% rename from src/components/views/dialogs/polls/PollDetail.tsx rename to src/components/views/polls/pollHistory/PollDetail.tsx index 068687a7fd..76e9581fb2 100644 --- a/src/components/views/dialogs/polls/PollDetail.tsx +++ b/src/components/views/polls/pollHistory/PollDetail.tsx @@ -35,7 +35,7 @@ interface Props { const NOOP = (): void => {}; /** - * Content of the PollHistoryDialog when a specific poll is selected + * Content of PollHistory when a specific poll is selected */ export const PollDetail: React.FC = ({ poll, permalinkCreator, requestModalClose }) => { // link to end event for ended polls diff --git a/src/components/views/dialogs/polls/PollDetailHeader.tsx b/src/components/views/polls/pollHistory/PollDetailHeader.tsx similarity index 100% rename from src/components/views/dialogs/polls/PollDetailHeader.tsx rename to src/components/views/polls/pollHistory/PollDetailHeader.tsx diff --git a/src/components/views/dialogs/polls/PollHistoryDialog.tsx b/src/components/views/polls/pollHistory/PollHistory.tsx similarity index 71% rename from src/components/views/dialogs/polls/PollHistoryDialog.tsx rename to src/components/views/polls/pollHistory/PollHistory.tsx index 879ca8f4da..15fbba13bc 100644 --- a/src/components/views/dialogs/polls/PollHistoryDialog.tsx +++ b/src/components/views/polls/pollHistory/PollHistory.tsx @@ -19,7 +19,6 @@ import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixEvent, Poll, Room } from "matrix-js-sdk/src/matrix"; import { _t } from "../../../../languageHandler"; -import BaseDialog from "../BaseDialog"; import { PollHistoryList } from "./PollHistoryList"; import { PollHistoryFilter } from "./types"; import { PollDetailHeader } from "./PollDetailHeader"; @@ -27,8 +26,9 @@ import { PollDetail } from "./PollDetail"; import { RoomPermalinkCreator } from "../../../../utils/permalinks/Permalinks"; import { usePollsWithRelations } from "./usePollHistory"; import { useFetchPastPolls } from "./fetchPastPolls"; +import Heading from "../../typography/Heading"; -type PollHistoryDialogProps = { +type PollHistoryProps = { room: Room; matrixClient: MatrixClient; permalinkCreator: RoomPermalinkCreator; @@ -50,12 +50,7 @@ const filterAndSortPolls = (polls: Map, filter: PollHistoryFilter) .sort(sortEventsByLatest); }; -export const PollHistoryDialog: React.FC = ({ - room, - matrixClient, - permalinkCreator, - onFinished, -}) => { +export const PollHistory: React.FC = ({ room, matrixClient, permalinkCreator, onFinished }) => { const { polls } = usePollsWithRelations(room.roomId, matrixClient); const { isLoading, loadMorePolls, oldestEventTimestamp } = useFetchPastPolls(room, matrixClient); const [filter, setFilter] = useState("ACTIVE"); @@ -72,23 +67,25 @@ export const PollHistoryDialog: React.FC = ({ ); return ( - -
- {focusedPoll ? ( - - ) : ( - - )} -
- +
+ {/* @TODO this probably needs some style */} + + {title} + + {focusedPoll ? ( + + ) : ( + + )} +
); }; diff --git a/src/components/views/dialogs/polls/PollHistoryList.tsx b/src/components/views/polls/pollHistory/PollHistoryList.tsx similarity index 99% rename from src/components/views/dialogs/polls/PollHistoryList.tsx rename to src/components/views/polls/pollHistory/PollHistoryList.tsx index c3f2f2fcf4..010b3a520b 100644 --- a/src/components/views/dialogs/polls/PollHistoryList.tsx +++ b/src/components/views/polls/pollHistory/PollHistoryList.tsx @@ -129,7 +129,7 @@ export const PollHistoryList: React.FC = ({ return (
- name="PollHistoryDialog_filter" + name="PollHistory_filter" value={filter} onFilterChange={onFilterChange} tabs={[ diff --git a/src/components/views/dialogs/polls/PollListItem.tsx b/src/components/views/polls/pollHistory/PollListItem.tsx similarity index 100% rename from src/components/views/dialogs/polls/PollListItem.tsx rename to src/components/views/polls/pollHistory/PollListItem.tsx diff --git a/src/components/views/dialogs/polls/PollListItemEnded.tsx b/src/components/views/polls/pollHistory/PollListItemEnded.tsx similarity index 100% rename from src/components/views/dialogs/polls/PollListItemEnded.tsx rename to src/components/views/polls/pollHistory/PollListItemEnded.tsx diff --git a/src/components/views/dialogs/polls/fetchPastPolls.ts b/src/components/views/polls/pollHistory/fetchPastPolls.ts similarity index 100% rename from src/components/views/dialogs/polls/fetchPastPolls.ts rename to src/components/views/polls/pollHistory/fetchPastPolls.ts diff --git a/src/components/views/dialogs/polls/types.ts b/src/components/views/polls/pollHistory/types.ts similarity index 100% rename from src/components/views/dialogs/polls/types.ts rename to src/components/views/polls/pollHistory/types.ts diff --git a/src/components/views/dialogs/polls/usePollHistory.ts b/src/components/views/polls/pollHistory/usePollHistory.ts similarity index 100% rename from src/components/views/dialogs/polls/usePollHistory.ts rename to src/components/views/polls/pollHistory/usePollHistory.ts diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index c8ffc35e09..84df7891d5 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -52,7 +52,7 @@ import ExportDialog from "../dialogs/ExportDialog"; import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import PosthogTrackers from "../../../PosthogTrackers"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; -import { PollHistoryDialog } from "../dialogs/polls/PollHistoryDialog"; +import { PollHistoryDialog } from "../dialogs/PollHistoryDialog"; interface IProps { room: Room; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f73c89a780..7fd40936e9 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2319,6 +2319,22 @@ "Verification cancelled": "Verification cancelled", "%(count)s votes|other": "%(count)s votes", "%(count)s votes|one": "%(count)s vote", + "View poll in timeline": "View poll in timeline", + "Active polls": "Active polls", + "Past polls": "Past polls", + "Loading polls": "Loading polls", + "Load more polls": "Load more polls", + "There are no active polls in this room": "There are no active polls in this room", + "There are no past polls in this room": "There are no past polls in this room", + "There are no active polls. Load more polls to view polls for previous months": "There are no active polls. Load more polls to view polls for previous months", + "There are no past polls. Load more polls to view polls for previous months": "There are no past polls. Load more polls to view polls for previous months", + "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months|other": "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months", + "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months|one": "There are no active polls for the past day. Load more polls to view polls for previous months", + "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months|other": "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months", + "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months|one": "There are no past polls for the past day. Load more polls to view polls for previous months", + "View poll": "View poll", + "Final result based on %(count)s votes|other": "Final result based on %(count)s votes", + "Final result based on %(count)s votes|one": "Final result based on %(count)s vote", "%(name)s started a video call": "%(name)s started a video call", "Video call ended": "Video call ended", "Sunday": "Sunday", @@ -2412,8 +2428,6 @@ "Vote not registered": "Vote not registered", "Sorry, your vote was not registered. Please try again.": "Sorry, your vote was not registered. Please try again.", "Due to decryption errors, some votes may not be counted": "Due to decryption errors, some votes may not be counted", - "Final result based on %(count)s votes|other": "Final result based on %(count)s votes", - "Final result based on %(count)s votes|one": "Final result based on %(count)s vote", "Results will be visible when the poll is ended": "Results will be visible when the poll is ended", "No votes cast": "No votes cast", "%(count)s votes cast. Vote to see the results|other": "%(count)s votes cast. Vote to see the results", @@ -3129,20 +3143,6 @@ "Not a valid Security Key": "Not a valid Security Key", "Access your secure message history and set up secure messaging by entering your Security Key.": "Access your secure message history and set up secure messaging by entering your Security Key.", "If you've forgotten your Security Key you can ": "If you've forgotten your Security Key you can ", - "View poll in timeline": "View poll in timeline", - "Active polls": "Active polls", - "Past polls": "Past polls", - "Loading polls": "Loading polls", - "Load more polls": "Load more polls", - "There are no active polls in this room": "There are no active polls in this room", - "There are no past polls in this room": "There are no past polls in this room", - "There are no active polls. Load more polls to view polls for previous months": "There are no active polls. Load more polls to view polls for previous months", - "There are no past polls. Load more polls to view polls for previous months": "There are no past polls. Load more polls to view polls for previous months", - "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months|other": "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months", - "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months|one": "There are no active polls for the past day. Load more polls to view polls for previous months", - "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months|other": "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months", - "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months|one": "There are no past polls for the past day. Load more polls to view polls for previous months", - "View poll": "View poll", "Send custom account data event": "Send custom account data event", "Send custom room account data event": "Send custom room account data event", "Event Type": "Event Type", diff --git a/test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap b/test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap deleted file mode 100644 index 0877123925..0000000000 --- a/test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap +++ /dev/null @@ -1,186 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` Poll detail displays poll detail on active poll list item click 1`] = ` -

- Question? -

-`; - -exports[` Poll detail displays poll detail on past poll list item click 1`] = ` -

- What? -

-`; - -exports[` Poll detail navigates back to poll list from detail view on header click 1`] = ` -
-
- Active polls -
-`; - -exports[` renders a list of active polls when there are polls in the room 1`] = ` -
-
-