Context popup

src/components/Article/SharePopup.tsx

@@ -9,7 +9,7 @@ type SharePopupProps = Omit<PopupProps, 'children'>
 
 export const SharePopup = (props: SharePopupProps) => {
   return (
-    <Popup {...props}>
+    <Popup {...props} variant="bordered">
       <ul class="nodash">
         <li>
           <a href="#">

src/components/Inbox/DialogCard.tsx

@@ -29,7 +29,6 @@ const DialogCard = (props: DialogProps) => {
       .join(', ')
   )
 
-  console.log('!!! companions:', companions())
   return (
     <Show when={props.members}>
       <div
@@ -42,7 +41,7 @@ const DialogCard = (props: DialogProps) => {
       >
         <div class={styles.avatar}>
           <Switch fallback={<DialogAvatar name={props.members[0].name} url={props.members[0].userpic} />}>
-            <Match when={props.members.length >= 2}>
+            <Match when={props.members.length >= 3}>
               <GroupDialogAvatar users={props.members} />
             </Match>
           </Switch>

src/components/Inbox/Message.tsx

@@ -1,4 +1,4 @@
-import { Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, Show } from 'solid-js'
 import MarkdownIt from 'markdown-it'
 import { clsx } from 'clsx'
 import styles from './Message.module.scss'
@@ -25,6 +25,12 @@ const md = new MarkdownIt({
 const Message = (props: Props) => {
   const isOwn = props.ownId === Number(props.content.author)
   const user = props.members?.find((m) => m.id === Number(props.content.author))
+  const [isPopupVisible, setIsPopupVisible] = createSignal<boolean>(false)
+
+  const handleMouseLeave = () => {
+    if (isPopupVisible()) setIsPopupVisible(false)
+  }
+
   return (
     <div class={clsx(styles.Message, isOwn && styles.own)}>
       <Show when={!isOwn}>
@@ -33,13 +39,17 @@ const Message = (props: Props) => {
           <div class={styles.name}>{user.name}</div>
         </div>
       </Show>
-      <div class={styles.body}>
+      <div class={styles.body} onMouseLeave={handleMouseLeave}>
         <div class={styles.text}>
           <div class={styles.actions}>
             <div onClick={props.replyClick}>
               <Icon name="chat-reply" class={styles.reply} />
             </div>
-            <MessageActionsPopup trigger={<Icon name="menu" />} />
+            <MessageActionsPopup
+              forceHide={!isPopupVisible()}
+              onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)}
+              trigger={<Icon name="menu" />}
+            />
           </div>
           <Show when={props.replyBody}>
             <QuotedMessage body={props.replyBody} variant="inline" />

src/components/Inbox/MessageActionsPopup.tsx

@@ -5,14 +5,14 @@ type MessageActionsPopup = Omit<PopupProps, 'children'>
 
 export const MessageActionsPopup = (props: MessageActionsPopup) => {
   return (
-    <Popup {...props}>
+    <Popup {...props} variant="tiny">
       <ul class="nodash">
         <li>Ответить</li>
         <li>Скопировать</li>
         <li>Закрепить</li>
         <li>Переслать</li>
         <li>Выбрать</li>
-        <li>Удалить</li>
+        <li style={{ color: 'red' }}>Удалить</li>
       </ul>
     </Popup>
   )

src/components/Inbox/QuotedMessage.module.scss

@@ -10,6 +10,7 @@
   .icon {
     width: 40px;
     height: 40px;
+    flex-basis: 40px;
 
     &.cancel {
       cursor: pointer;

src/components/Nav/ProfilePopup.tsx

@@ -14,7 +14,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
   } = useSession()
 
   return (
-    <Popup {...props} horizontalAnchor="right">
+    <Popup {...props} horizontalAnchor="right" variant="bordered">
       {/*TODO: l10n*/}
       <ul class="nodash">
         <li>

src/components/Views/Inbox.tsx

@@ -255,7 +255,7 @@ export const InboxView = () => {
                     value={postMessageText()}
                     rows={1}
                     onInput={(event) => handleChangeMessage(event)}
-                    placeholder="Написать сообщение"
+                    placeholder={t('Write message')}
                   />
                 </div>
                 <button type="submit" disabled={postMessageText().length === 0} onClick={handleSubmit}>

src/components/_shared/Popup/Popup.module.scss

@@ -4,9 +4,49 @@
 
 .popup {
   background: #fff;
-  border: 2px solid #000;
   top: calc(100% + 8px);
   opacity: 1;
+  color: #000;
+  position: absolute;
+  z-index: 10;
+  min-width: 144px;
+
+  ul {
+    margin-bottom: 0;
+
+    li {
+      position: relative;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &.bordered {
+    @include font-size(1.6rem);
+
+    border: 2px solid #000;
+    padding: 2.4rem;
+    ul li {
+      margin-bottom: 1.6rem;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &.tiny {
+    @include font-size(1.4rem);
+
+    box-shadow: 0 4px 60px rgba(0, 0, 0, 0.1);
+    padding: 1rem;
+    ul li {
+      margin-bottom: 1rem;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 
   &.horizontalAnchorCenter {
     left: 50%;
@@ -17,25 +57,6 @@
     right: 0;
   }
 
-  @include font-size(1.6rem);
-
-  padding: 2.4rem;
-  position: absolute;
-  z-index: 10;
-
-  ul {
-    margin-bottom: 0;
-  }
-
-  li {
-    margin-bottom: 1.6rem;
-    position: relative;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
   .topBorderItem {
     border-top: 2px solid;
     padding-top: 1em;

src/components/_shared/Popup/Popup.tsx

@@ -2,6 +2,7 @@ import { createEffect, createSignal, JSX, Show } from 'solid-js'
 import styles from './Popup.module.scss'
 import { clsx } from 'clsx'
 import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
+import { set } from 'husky'
 
 type HorizontalAnchor = 'center' | 'right'
 
@@ -11,6 +12,8 @@ export type PopupProps = {
   children: JSX.Element
   onVisibilityChange?: (isVisible) => void
   horizontalAnchor?: HorizontalAnchor
+  variant?: 'bordered' | 'tiny'
+  forceHide?: boolean
 }
 
 export const Popup = (props: PopupProps) => {
@@ -31,6 +34,9 @@ export const Popup = (props: PopupProps) => {
     handler: () => setIsVisible(false)
   })
 
+  createEffect(() => {
+    if (props.forceHide) setIsVisible(false)
+  })
   const toggle = () => setIsVisible((oldVisible) => !oldVisible)
 
   return (
@@ -40,7 +46,9 @@ export const Popup = (props: PopupProps) => {
         <div
           class={clsx(styles.popup, {
             [styles.horizontalAnchorCenter]: horizontalAnchor === 'center',
-            [styles.horizontalAnchorRight]: horizontalAnchor === 'right'
+            [styles.horizontalAnchorRight]: horizontalAnchor === 'right',
+            [styles.bordered]: props.variant === 'bordered',
+            [styles.tiny]: props.variant === 'tiny'
           })}
         >
           {props.children}

src/locales/ru.json

@@ -204,5 +204,6 @@
   "Where": "Откуда",
   "Date of Birth": "Дата рождения",
   "Social networks": "Социальные сети",
-  "Save settings": "Сохранить настройки"
+  "Save settings": "Сохранить настройки",
+  "Write message": "Написать сообщение"
 }