UserVoiceShow: Improve icon in User Profile Modal V2
This commit is contained in:
parent
d0869c41cd
commit
cdda1224ff
3 changed files with 13 additions and 4 deletions
|
|
@ -27,6 +27,7 @@ const ActionButtonClasses = findByPropsLazy("actionButton", "highlight");
|
|||
|
||||
interface IconProps extends React.ComponentPropsWithoutRef<"div"> {
|
||||
size?: number;
|
||||
iconClassName?: string;
|
||||
}
|
||||
|
||||
function SpeakerIcon(props: IconProps) {
|
||||
|
|
@ -39,6 +40,7 @@ function SpeakerIcon(props: IconProps) {
|
|||
className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined, props.className)}
|
||||
>
|
||||
<svg
|
||||
className={props.iconClassName}
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -129,13 +131,14 @@ function VoiceChannelTooltip({ channel, isLocked }: VoiceChannelTooltipProps) {
|
|||
|
||||
export interface VoiceChannelIndicatorProps {
|
||||
userId: string;
|
||||
isProfile?: boolean;
|
||||
isActionButton?: boolean;
|
||||
shouldHighlight?: boolean;
|
||||
}
|
||||
|
||||
const clickTimers = {} as Record<string, any>;
|
||||
|
||||
export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isActionButton, shouldHighlight }: VoiceChannelIndicatorProps) => {
|
||||
export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isProfile, isActionButton, shouldHighlight }: VoiceChannelIndicatorProps) => {
|
||||
const channelId = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStateForUser(userId)?.channelId as string | undefined);
|
||||
|
||||
const channel = channelId == null ? undefined : ChannelStore.getChannel(channelId);
|
||||
|
|
@ -179,8 +182,9 @@ export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isActionButto
|
|||
{props => {
|
||||
const iconProps: IconProps = {
|
||||
...props,
|
||||
className: classes(isActionButton && ActionButtonClasses.actionButton, shouldHighlight && ActionButtonClasses.highlight),
|
||||
size: isActionButton ? 20 : undefined,
|
||||
className: classes(isActionButton && ActionButtonClasses.actionButton, isActionButton && shouldHighlight && ActionButtonClasses.highlight),
|
||||
iconClassName: classes(isProfile && cl("profile-speaker")),
|
||||
size: isActionButton ? 20 : 16,
|
||||
onClick
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default definePlugin({
|
|||
find: "#{intl::USER_PROFILE_LOAD_ERROR}",
|
||||
replacement: {
|
||||
match: /(\.fetchError.+?\?)null/,
|
||||
replace: (_, rest) => `${rest}$self.VoiceChannelIndicator({userId:arguments[0]?.userId})`
|
||||
replace: (_, rest) => `${rest}$self.VoiceChannelIndicator({userId:arguments[0]?.userId,isProfile:true})`
|
||||
},
|
||||
predicate: () => settings.store.showInUserProfileModal
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,6 +13,11 @@
|
|||
color: var(--interactive-hover);
|
||||
}
|
||||
|
||||
.vc-uvs-profile-speaker {
|
||||
width: var(--custom-nickname-icon-size);
|
||||
height: var(--custom-nickname-icon-size);
|
||||
}
|
||||
|
||||
.vc-uvs-tooltip-container {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue