Merge branch 'feed-article-popup' into 'dev'

Feed article actions popup

See merge request discoursio/discoursio-webapp!10

src/components/Article/Comment.module.scss

@@ -37,6 +37,7 @@
       display: none;
     }
   }
+
   .shout-body {
     @include font-size(1.5rem);
     margin-bottom: 1em;
@@ -44,11 +45,13 @@
       margin-bottom: 0;
     }
   }
+
   .author {
     align-items: center;
     margin-bottom: 1.4rem;
   }
 }
+
 .commentContent {
   &:hover {
     .commentControlReply,
@@ -60,11 +63,13 @@
     }
   }
 }
+
 .commentControls {
   @include font-size(1.2rem);
 
   margin-bottom: 0.5em;
 }
+
 .commentControlReply,
 .commentControlShare,
 .commentControlDelete,
@@ -75,6 +80,7 @@
     transition: opacity 0.3s;
   }
 }
+
 .commentControlReply,
 .commentControlShare,
 .commentControlDelete,
@@ -84,6 +90,7 @@
     width: 1.2rem;
   }
 }
+
 .commentControl {
   border: none;
   color: #696969;
@@ -94,6 +101,7 @@
   padding: 0.2em 0.3em;
   transition: opacity 0.2s, color 0.3s, background-color 0.3s;
   vertical-align: top;
+
   &:hover {
     background: #000;
     color: #fff;
@@ -102,6 +110,7 @@
       opacity: 1;
     }
   }
+
   .icon {
     filter: invert(0);
     margin-right: 0.3em;
@@ -112,12 +121,14 @@
     }
   }
 }
+
 .commentControlReply {
   .icon {
     height: 1.2em;
     width: 1.2em;
   }
 }
+
 .commentBody {
   @include font-size(1.5rem);
 
@@ -137,10 +148,12 @@
     }
   }
 }
+
 .commentAuthor,
 .commentRating {
   @include font-size(1.2rem);
 }
+
 .articleAuthor {
   color: #2638d9;
   font-size: 12px;
@@ -173,33 +186,41 @@
     }
   }
 }
+
 .commentDetails {
   display: flex;
   margin-bottom: 1.2rem;
 }
+
 .commentRating {
   align-items: center;
   display: flex;
   font-weight: bold;
 }
+
 .commentRatingValue {
   padding: 0 0.3em;
 }
+
 .commentRatingPositive {
   color: #2bb452;
 }
+
 .commentRatingNegative {
   color: #d00820;
 }
+
 .commentRatingControl {
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   height: 0;
   width: 0;
 }
+
 .commentRatingControlUp {
   border-bottom: 8px solid rgb(0 0 0 / 40%);
 }
+
 .commentRatingControlDown {
   border-top: 8px solid rgb(0 0 0 / 40%);
 }

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

@@ -1,5 +1,5 @@
 import { t } from '../../utils/intl'
-import { createMemo, createSignal, For, onMount, Show } from 'solid-js'
+import { createMemo, For, Show } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
 import { capitalize } from '../../utils'
 import { translit } from '../../utils/ru2en'
@@ -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?: {
@@ -71,7 +72,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
   const { title, subtitle } = getTitleAndSubtitle(props.article)
 
-  const { cover, layout, slug, authors, stat } = props.article
+  const { cover, layout, slug, authors, stat, body } = props.article
 
   return (
     <section
@@ -194,9 +195,9 @@ export const ArticleCard = (props: ArticleCardProps) => {
               <div class={styles.shoutCardDetailsItem}>
                 <SharePopup
                   containerCssClass={stylesHeader.control}
-                  title={props.article['title']}
+                  title={title}
-                  description={getDescription(props.article['body'])}
+                  description={getDescription(body)}
-                  imageUrl={props.article['cover']}
+                  imageUrl={cover}
                   shareUrl={getShareUrl({ pathname: `/${slug}` })}
                   trigger={
                     <button>
@@ -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={title}
+                  description={getDescription(body)}
+                  imageUrl={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,96 @@
+import styles from './FeedArticlePopup.module.scss'
+import type { PopupProps } from '../_shared/Popup'
+import { Popup } from '../_shared/Popup'
+import { t } from '../../utils/intl'
+
+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={() => {
+              alert('Share')
+            }}
+          >
+            {t('Share')}
+          </button>
+        </li>
+        <li>
+          <button
+            role="button"
+            onClick={() => {
+              alert('Help to edit')
+            }}
+          >
+            {t('Help to edit')}
+          </button>
+        </li>
+        <li>
+          <button
+            role="button"
+            onClick={() => {
+              alert('Invite experts')
+            }}
+          >
+            {t('Invite experts')}
+          </button>
+        </li>
+        <li>
+          <button
+            role="button"
+            onClick={() => {
+              alert('Subscribe to comments')
+            }}
+          >
+            {t('Subscribe to comments')}
+          </button>
+        </li>
+        <li>
+          <button
+            role="button"
+            onClick={() => {
+              alert('Add to bookmarks')
+            }}
+          >
+            {t('Add to bookmarks')}
+          </button>
+        </li>
+        <li>
+          <button
+            role="button"
+            onClick={() => {
+              alert('Report')
+            }}
+          >
+            {t('Report')}
+          </button>
+        </li>
+        <li>
+          <button
+            role="button"
+            onClick={() => {
+              alert('Get notifications')
+            }}
+          >
+            {t('Get notifications')}
+          </button>
+        </li>
+      </ul>
+    </Popup>
+  )
+}

src/components/_shared/Button/Button.module.scss

@@ -8,9 +8,11 @@
   &.primary {
     background: #000;
     color: #fff;
+
     &:hover {
       color: #ccc;
     }
+
     &:active {
       color: #9fa1a7;
     }
@@ -19,9 +21,11 @@
   &.secondary {
     background: #f7f7f7;
     color: #141414;
+
     &:hover {
       background: #e8e8e8;
     }
+
     &:active {
       background: #ccc;
     }
@@ -46,6 +50,7 @@
     color: #9fa1a7;
     background: #f6f6f6;
   }
+
   &.loading,
   &.loading:hover {
     background: #f6f6f6;

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',

src/locales/ru.json

@@ -224,5 +224,10 @@
   "Add comment": "Комментировать",
   "My subscriptions": "Подписки",
   "Nothing here yet": "Здесь пока ничего нет",
-  "Edited": "Отредактирован"
+  "Edited": "Отредактирован",
+  "Nothing here yet": "Здесь пока ничего нет",
+  "Invite experts": "Пригласить экспертов",
+  "Subscribe to comments": "Подписаться на комментарии",
+  "Add to bookmarks": "Добавить в закладки",
+  "Get notifications": "Получать уведомления"
 }