From 0d0494a83a6b8251bc9e60a09f0e2911b4791197 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 7 Feb 2023 00:35:08 +0300
Subject: [PATCH] Feed article actions popup

---
 src/components/Feed/Card.module.scss          | 15 ++++-
 src/components/Feed/Card.tsx                  | 16 ++++-
 .../Feed/FeedArticlePopup.module.scss         | 21 +++++++
 src/components/Feed/FeedArticlePopup.tsx      | 60 +++++++++++++++++++
 src/components/_shared/Popup/Popup.tsx        |  3 +-
 5 files changed, 108 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Feed/FeedArticlePopup.module.scss
 create mode 100644 src/components/Feed/FeedArticlePopup.tsx

diff --git a/src/components/Feed/Card.module.scss b/src/components/Feed/Card.module.scss
index 1040119a..4b88965d 100644
--- a/src/components/Feed/Card.module.scss
+++ b/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;
+      }
     }
   }
 }
diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx
index 44d9d88a..8de609db 100644
--- a/src/components/Feed/Card.tsx
+++ b/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>
-                  <Icon name="ellipsis" class={clsx(styles.icon, styles.feedControlIcon)} />
-                </button>
+                <FeedArticlePopup
+                  containerCssClass={stylesHeader.control}
+                  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>
diff --git a/src/components/Feed/FeedArticlePopup.module.scss b/src/components/Feed/FeedArticlePopup.module.scss
new file mode 100644
index 00000000..829ac58b
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/components/Feed/FeedArticlePopup.tsx b/src/components/Feed/FeedArticlePopup.tsx
new file mode 100644
index 00000000..133ab3fe
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/_shared/Popup/Popup.tsx b/src/components/_shared/Popup/Popup.tsx
index 3b32d760..8a1e6935 100644
--- a/src/components/_shared/Popup/Popup.tsx
+++ b/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',