Feed article actions popup

src/components/Feed/Card.module.scss

@@ -411,20 +411,25 @@
 }
 
 .shoutCardDetails {
-  border-top: 3px solid #141414;
+  align-items: flex-start;
+  border-top: 2px solid #141414;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   @include font-size(1.5rem);
   margin-top: 1em;
-  padding: 1em 0 1.5em;
+  padding: 1em 0 0;
   position: relative;
   width: 100%;
-  z-index: 2;
+  z-index: 3;
 }
 
 .shoutCardDetailsContent {
   display: flex;
+
+  &:first-child {
+    padding: 0 1em 1em 0;
+  }
 }
 
 .shoutCardDetailsItem {
@@ -465,6 +470,10 @@
     &:hover {
       background: none;
       color: rgb(0 0 0 / 60%);
+
+      img {
+        filter: none;
+      }
     }
   }
 }

src/components/Feed/Card.tsx

@@ -12,6 +12,7 @@ import { RatingControl } from '../Article/RatingControl'
 import { getShareUrl, SharePopup } from '../Article/SharePopup'
 import stylesHeader from '../Nav/Header.module.scss'
 import { getDescription } from '../../utils/meta'
+import { FeedArticlePopup } from './FeedArticlePopup'
 
 interface ArticleCardProps {
   settings?: {
@@ -207,9 +208,18 @@ export const ArticleCard = (props: ArticleCardProps) => {
               </div>
 
               <div class={styles.shoutCardDetailsItem}>
-                <button>
+                <FeedArticlePopup
-                  <Icon name="ellipsis" class={clsx(styles.icon, styles.feedControlIcon)} />
+                  containerCssClass={stylesHeader.control}
-                </button>
+                  title={props.article['title']}
+                  description={getDescription(props.article['body'])}
+                  imageUrl={props.article['cover']}
+                  shareUrl={getShareUrl({ pathname: `/${slug}` })}
+                  trigger={
+                    <button>
+                      <Icon name="ellipsis" class={clsx(styles.icon, styles.feedControlIcon)} />
+                    </button>
+                  }
+                />
               </div>
             </div>
           </section>

src/components/Feed/FeedArticlePopup.module.scss

@@ -0,0 +1,21 @@
+.feedArticlePopup {
+  box-shadow: none !important;
+  border: 1px solid rgb(0 0 0 / 0.15);
+  border-radius: 1.6rem;
+  padding: 1.6rem !important;
+
+  @include media-breakpoint-between(sm, md) {
+    left: auto !important;
+    right: 0;
+    transform: none !important;
+  }
+
+  button {
+    color: #696969;
+
+    &:hover {
+      background: #000;
+      color: #fff;
+    }
+  }
+}

src/components/Feed/FeedArticlePopup.tsx

@@ -0,0 +1,60 @@
+import styles from './FeedArticlePopup.module.scss'
+import type { PopupProps } from '../_shared/Popup'
+import { Popup } from '../_shared/Popup'
+
+type FeedArticlePopupProps = {
+  title: string
+  shareUrl?: string
+  imageUrl: string
+  description: string
+} & Omit<PopupProps, 'children'>
+
+export const getShareUrl = (params: { pathname?: string } = {}) => {
+  if (typeof location === 'undefined') return ''
+  const pathname = params.pathname ?? location.pathname
+  return location.origin + pathname
+}
+
+export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
+  return (
+    <Popup {...props} variant="tiny" popupCssClass={styles.feedArticlePopup}>
+      <ul class="nodash">
+        <li>
+          <button role="button" onClick={() => {}}>
+            Поделиться
+          </button>
+        </li>
+        <li>
+          <button role="button" onClick={() => {}}>
+            Помочь редактировать
+          </button>
+        </li>
+        <li>
+          <button role="button" onClick={() => {}}>
+            Пригласить экспертов
+          </button>
+        </li>
+        <li>
+          <button role="button" onClick={() => {}}>
+            Подписаться на комментарии
+          </button>
+        </li>
+        <li>
+          <button role="button" onClick={() => {}}>
+            Добавить в закладки
+          </button>
+        </li>
+        <li>
+          <button role="button" onClick={() => {}}>
+            Пожаловаться
+          </button>
+        </li>
+        <li>
+          <button role="button" onClick={() => {}}>
+            Получать уведомления
+          </button>
+        </li>
+      </ul>
+    </Popup>
+  )
+}

src/components/_shared/Popup/Popup.tsx

@@ -8,6 +8,7 @@ type HorizontalAnchor = 'center' | 'right'
 
 export type PopupProps = {
   containerCssClass?: string
+  popupCssClass?: string
   trigger: JSX.Element
   children: JSX.Element
   onVisibilityChange?: (isVisible) => void
@@ -40,7 +41,7 @@ export const Popup = (props: PopupProps) => {
       <span onClick={toggle}>{props.trigger}</span>
       <Show when={isVisible()}>
         <div
-          class={clsx(styles.popup, {
+          class={clsx(styles.popup, props.popupCssClass, {
             [styles.horizontalAnchorCenter]: horizontalAnchor === 'center',
             [styles.horizontalAnchorRight]: horizontalAnchor === 'right',
             [styles.bordered]: props.variant === 'bordered',