Improve the styling of search initialization errors.

Signed-off-by: Kalle Struik <kalle@kallestruik.nl>
This commit is contained in:
Kalle Struik 2021-10-03 17:38:49 +02:00
parent c86040b77a
commit 7c07ad155c
6 changed files with 34 additions and 32 deletions

View file

@ -27,7 +27,7 @@ import { logger } from "matrix-js-sdk/src/logger";
import { MatrixClientPeg } from '../../MatrixClientPeg';
import EventIndexPeg from "../../indexing/EventIndexPeg";
import { _t } from '../../languageHandler';
import DesktopBuildsNotice, { WarningKind } from "../views/elements/DesktopBuildsNotice";
import SearchWarning, { WarningKind } from "../views/elements/SearchWarning";
import BaseCard from "../views/right_panel/BaseCard";
import ResizeNotifier from '../../utils/ResizeNotifier';
import TimelinePanel from "./TimelinePanel";
@ -275,7 +275,7 @@ class FilePanel extends React.Component<IProps, IState> {
sensor={this.card.current}
onMeasurement={this.onMeasurement}
/>
<DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
<SearchWarning isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
<TimelinePanel
manageReadReceipts={false}
manageReadMarkers={false}

View file

@ -35,28 +35,30 @@ interface IProps {
kind: WarningKind;
}
export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
export default function SearchWarning({ isRoomEncrypted, kind }: IProps) {
if (!isRoomEncrypted) return null;
if (EventIndexPeg.get()) return null;
if (EventIndexPeg.error) {
return <>
{ _t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
a: sub => (
<AccessibleButton
kind="link_inline"
onClick={(evt) => {
evt.preventDefault();
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Security,
});
}}
>
{ sub }
</AccessibleButton>),
}) }
</>;
return (
<div className="mx_SearchWarning">
{ _t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
a: sub => (
<AccessibleButton
kind="link_inline"
onClick={(evt) => {
evt.preventDefault();
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Security,
});
}}
>
{ sub }
</AccessibleButton>),
}) }
</div>
);
}
const brand = SdkConfig.get("brand");
@ -97,7 +99,7 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
}
return (
<div className="mx_DesktopBuildsNotice">
<div className="mx_SearchWarning">
{ logo }
<span>{ text }</span>
</div>

View file

@ -20,10 +20,10 @@ import classNames from "classnames";
import AccessibleButton from "../elements/AccessibleButton";
import { _t } from '../../../languageHandler';
import DesktopBuildsNotice, { WarningKind } from "../elements/DesktopBuildsNotice";
import { PosthogScreenTracker } from '../../../PosthogTrackers';
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import SearchWarning, { WarningKind } from "../elements/SearchWarning";
interface IProps {
onCancelClick: () => void;
@ -127,7 +127,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
</div>
<AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />
</div>
<DesktopBuildsNotice isRoomEncrypted={this.props.isRoomEncrypted} kind={WarningKind.Search} />
<SearchWarning isRoomEncrypted={this.props.isRoomEncrypted} kind={WarningKind.Search} />
</>
);
}