Message Actions (static)

This commit is contained in:
ilya-bkv 2022-12-15 13:58:54 +03:00
parent 7f6d2b99f2
commit 9e5af06761
5 changed files with 26 additions and 18 deletions

View File

@ -6,10 +6,10 @@
font-size: 14px; font-size: 14px;
padding: 12px; padding: 12px;
transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out;
cursor: pointer;
width: 100%; width: 100%;
&.hovered:hover { &.hovered:hover {
cursor: pointer;
background: #f7f7f7; background: #f7f7f7;
} }

View File

@ -51,10 +51,14 @@ $actionsWidth: 32px * 2;
z-index: -1; z-index: -1;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
&.popupVisible {
position: relative;
z-index: 100;
}
&.popupVisible,
&:hover { &:hover {
.actions { .actions {
z-index: 100; z-index: 10000;
opacity: 1; opacity: 1;
right: -$actionsWidth; right: -$actionsWidth;
} }
@ -102,8 +106,11 @@ $actionsWidth: 32px * 2;
} }
} }
&:hover .actions { &.popupVisible,
left: -$actionsWidth; &:hover {
.actions {
left: -$actionsWidth;
}
} }
} }

View File

@ -29,10 +29,6 @@ const Message = (props: Props) => {
const [isPopupVisible, setIsPopupVisible] = createSignal<boolean>(false) const [isPopupVisible, setIsPopupVisible] = createSignal<boolean>(false)
const [selectedAction, setSelectedAction] = createSignal<string>() const [selectedAction, setSelectedAction] = createSignal<string>()
const handleMouseLeave = () => {
if (isPopupVisible()) setIsPopupVisible(false)
}
return ( return (
<div class={clsx(styles.Message, isOwn && styles.own)}> <div class={clsx(styles.Message, isOwn && styles.own)}>
<Show when={!isOwn}> <Show when={!isOwn}>
@ -41,14 +37,13 @@ const Message = (props: Props) => {
<div class={styles.name}>{user.name}</div> <div class={styles.name}>{user.name}</div>
</div> </div>
</Show> </Show>
<div class={styles.body} onMouseLeave={handleMouseLeave}> <div class={clsx(styles.body, { [styles.popupVisible]: isPopupVisible() })}>
<div class={styles.text}> <div class={styles.text}>
<div class={styles.actions}> <div class={styles.actions}>
<div onClick={props.replyClick}> <div onClick={props.replyClick}>
<Icon name="chat-reply" class={styles.reply} /> <Icon name="chat-reply" class={styles.reply} />
</div> </div>
<MessageActionsPopup <MessageActionsPopup
forceHide={!isPopupVisible()}
actionSelect={(selectedAction) => setSelectedAction(selectedAction)} actionSelect={(selectedAction) => setSelectedAction(selectedAction)}
onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)} onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)}
trigger={<Icon name="menu" />} trigger={<Icon name="menu" />}

View File

@ -3,11 +3,13 @@ import type { PopupProps } from '../_shared/Popup'
import { Popup } from '../_shared/Popup' import { Popup } from '../_shared/Popup'
import { t } from '../../utils/intl' import { t } from '../../utils/intl'
export type MessageActionType = 'reply' | 'copy' | 'pin' | 'forward' | 'select' | 'delete'
type MessageActionsPopup = { type MessageActionsPopup = {
actionSelect?: (selectedAction) => void actionSelect?: (selectedAction) => void
} & Omit<PopupProps, 'children'> } & Omit<PopupProps, 'children'>
const actions = [ const actions: { name: string; action: MessageActionType }[] = [
{ name: t('Reply'), action: 'reply' }, { name: t('Reply'), action: 'reply' },
{ name: t('Copy'), action: 'copy' }, { name: t('Copy'), action: 'copy' },
{ name: t('Pin'), action: 'pin' }, { name: t('Pin'), action: 'pin' },
@ -17,7 +19,8 @@ const actions = [
] ]
export const MessageActionsPopup = (props: MessageActionsPopup) => { export const MessageActionsPopup = (props: MessageActionsPopup) => {
const [selectedAction, setSelectedAction] = createSignal<string>() const [selectedAction, setSelectedAction] = createSignal<MessageActionType | null>(null)
createEffect(() => { createEffect(() => {
if (props.actionSelect) props.actionSelect(selectedAction()) if (props.actionSelect) props.actionSelect(selectedAction())
}) })
@ -25,7 +28,14 @@ export const MessageActionsPopup = (props: MessageActionsPopup) => {
<Popup {...props} variant="tiny"> <Popup {...props} variant="tiny">
<ul class="nodash"> <ul class="nodash">
<For each={actions}> <For each={actions}>
{(item) => <li onClick={() => setSelectedAction(item.action)}>{item.name}</li>} {(item) => (
<li
style={item.action === 'delete' && { color: 'red' }}
onClick={() => setSelectedAction(item.action)}
>
{item.name}
</li>
)}
</For> </For>
</ul> </ul>
</Popup> </Popup>

View File

@ -13,7 +13,6 @@ export type PopupProps = {
onVisibilityChange?: (isVisible) => void onVisibilityChange?: (isVisible) => void
horizontalAnchor?: HorizontalAnchor horizontalAnchor?: HorizontalAnchor
variant?: 'bordered' | 'tiny' variant?: 'bordered' | 'tiny'
forceHide?: boolean
} }
export const Popup = (props: PopupProps) => { export const Popup = (props: PopupProps) => {
@ -34,9 +33,6 @@ export const Popup = (props: PopupProps) => {
handler: () => setIsVisible(false) handler: () => setIsVisible(false)
}) })
createEffect(() => {
if (props.forceHide) setIsVisible(false)
})
const toggle = () => setIsVisible((oldVisible) => !oldVisible) const toggle = () => setIsVisible((oldVisible) => !oldVisible)
return ( return (