imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use Compound Tooltips in StatelessNotificationBadge, VerifyEmailModal, CheckEmail (#12084)

Browse source 
* Switch StatelessNotificationBadge to using Compound Tooltips

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Migrate CheckEmail & VerifyEmailModal to Compound tooltips

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix CSS stacking contexts for Dialogs & PersistedElement

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to PersistedElement sharing a CSS stacking context for z-index to continue functioning

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix Widget PIP overlay being under the widget and dragging being broken

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix border-radius on widget pip

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix majority of tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix jest retryTimes applying outside of CI

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix remaining tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix React unique key warnings

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix sticker picker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* id not class

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix widget pip button colour in light theme

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-01-09 11:46:27 +00:00 • committed by GitHub
parent 82840a19f9
commit 061c269f36
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 71 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/views/rooms/NotificationBadge.tsx
View file

@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { MouseEvent, ReactNode } from "react";
import React, { ReactNode } from "react";
import { Tooltip } from "@vector-im/compound-web";
import SettingsStore from "../../../settings/SettingsStore";
import { XOR } from "../../../@types/common";
import { NotificationState, NotificationStateEvents } from "../../../stores/notifications/NotificationState";
import Tooltip from "../elements/Tooltip";
import { _t } from "../../../languageHandler";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { StatelessNotificationBadge } from "./NotificationBadge/StatelessNotificationBadge";
@ -48,8 +48,7 @@ interface IClickableProps extends IProps, React.InputHTMLAttributes<Element> {
}
interface IState {
showCounts: boolean; // whether or not to show counts. Independent of props.forceCount
showTooltip: boolean;
showCounts: boolean; // whether to show counts. Independent of props.forceCount
}
export default class NotificationBadge extends React.PureComponent<XOR<IProps, IClickableProps>, IState> {
@ -61,7 +60,6 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
this.state = {
showCounts: SettingsStore.getValue("Notifications.alwaysShowBadgeCounts", this.roomId),
showTooltip: false,
};
this.countWatcherRef = SettingsStore.watchSetting(
@ -97,19 +95,6 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
this.forceUpdate(); // notification state changed - update
};
private onMouseOver = (e: MouseEvent): void => {
e.stopPropagation();
this.setState({
showTooltip: true,
});
};
private onMouseLeave = (): void => {
this.setState({
showTooltip: false,
});
};
public render(): ReactNode {
/* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
const { notification, showUnsentTooltip, forceCount, onClick, tabIndex } = this.props;
@ -119,31 +104,28 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
if (!notification.hasUnreadCount) return null; // Can't render a badge
}
let label: string | undefined;
let tooltip: JSX.Element | undefined;
if (showUnsentTooltip && this.state.showTooltip && notification.color === NotificationColor.Unsent) {
label = _t("notifications|message_didnt_send");
tooltip = <Tooltip className="mx_NotificationBadge_tooltip" label={label} />;
}
const commonProps: React.ComponentProps<typeof StatelessNotificationBadge> = {
label,
symbol: notification.symbol,
count: notification.count,
color: notification.color,
knocked: notification.knocked,
onMouseOver: this.onMouseOver,
onMouseLeave: this.onMouseLeave,
};
let badge: JSX.Element;
if (onClick) {
badge = <StatelessNotificationBadge {...commonProps} onClick={onClick} tabIndex={tabIndex} />;
} else {
badge = <StatelessNotificationBadge {...commonProps} />;
}
if (showUnsentTooltip && notification.color === NotificationColor.Unsent) {
return (
<StatelessNotificationBadge {...commonProps} onClick={onClick} tabIndex={tabIndex}>
{tooltip}
</StatelessNotificationBadge>
<Tooltip label={_t("notifications|message_didnt_send")} side="right">
{badge}
</Tooltip>
);
}
return <StatelessNotificationBadge {...commonProps}>{tooltip}</StatelessNotificationBadge>;
return badge;
}
}