From a2b449502ac11e23a5092ece782c080ba7f612b4 Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Fri, 29 Dec 2023 14:07:48 +0300 Subject: [PATCH] Share popup update (#350) * Share popup update * Remove shared link * Cleanup code * Cleanup code * Cleanup code * Cleanup code --- public/icons/lightning.svg | 3 + public/locales/en/translation.json | 1 + public/locales/ru/translation.json | 1 + src/components/Article/FullArticle.tsx | 1 - src/components/Article/SharePopup.tsx | 6 +- .../Feed/ArticleCard/ArticleCard.tsx | 3 - .../Feed/FeedArticlePopup.module.scss | 25 ---- src/components/Feed/FeedArticlePopup.tsx | 115 ------------------ .../FeedArticlePopup.module.scss | 48 ++++++++ .../FeedArticlePopup/FeedArticlePopup.tsx | 92 ++++++++++++++ src/components/Feed/FeedArticlePopup/index.ts | 1 + .../InviteCoAuthorsModal.tsx | 7 +- src/components/_shared/Popup/Popup.tsx | 2 - .../_shared/SoonChip/SoonChip.module.scss | 23 ++++ src/components/_shared/SoonChip/SoonChip.tsx | 20 +++ src/components/_shared/SoonChip/index.ts | 1 + 16 files changed, 198 insertions(+), 151 deletions(-) create mode 100644 public/icons/lightning.svg delete mode 100644 src/components/Feed/FeedArticlePopup.module.scss delete mode 100644 src/components/Feed/FeedArticlePopup.tsx create mode 100644 src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss create mode 100644 src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx create mode 100644 src/components/Feed/FeedArticlePopup/index.ts create mode 100644 src/components/_shared/SoonChip/SoonChip.module.scss create mode 100644 src/components/_shared/SoonChip/SoonChip.tsx create mode 100644 src/components/_shared/SoonChip/index.ts diff --git a/public/icons/lightning.svg b/public/icons/lightning.svg new file mode 100644 index 00000000..11ddae16 --- /dev/null +++ b/public/icons/lightning.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index e21cda3a..18ee20fa 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -336,6 +336,7 @@ "Something went wrong, please try again": "Something went wrong, please try again", "Song lyrics": "Song lyrics...", "Song title": "Song title", + "Soon": "Скоро", "Sorry, this address is already taken, please choose another one.": "Sorry, this address is already taken, please choose another one", "Special Projects": "Special Projects", "Special projects": "Special projects", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 38acbca2..50714efd 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -355,6 +355,7 @@ "Something went wrong, please try again": "Что-то пошло не так, попробуйте еще раз", "Song lyrics": "Текст песни...", "Song title": "Название песни", + "Soon": "Скоро", "Sorry, this address is already taken, please choose another one.": "Увы, этот адрес уже занят, выберите другой", "Special Projects": "Спецпроекты", "Special projects": "Спецпроекты", diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 2fc420ce..79a6ea20 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -495,7 +495,6 @@ export const FullArticle = (props: Props) => { title={props.article.title} description={description} imageUrl={props.article.cover} - shareUrl={getShareUrl({ pathname: `/${props.article.slug}` })} trigger={ - - -
  • - -
    • -     -
  • - -
    • - -
  • - -
    • -     -
  • - -
    • - -
  • - -
    • -     -
  • - -
    • - - - ) -} diff --git a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss new file mode 100644 index 00000000..c983fe14 --- /dev/null +++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss @@ -0,0 +1,48 @@ +.feedArticlePopup { + box-shadow: none !important; + border: 1px solid rgb(0 0 0 / 15%); + border-radius: 1.6rem; + padding: 0 !important; + text-align: left; + overflow: hidden; + + @include media-breakpoint-down(md) { + left: auto !important; + right: 0; + transform: none !important; + } + + .actionList { + & > li { + margin-bottom: 0 !important; + } + + .action { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + padding: 8px 16px; + font-size: inherit; + font-weight: 500; + text-align: left; + white-space: nowrap; + + &.soon { + color: var(--black-300); + } + + &:hover { + background: var(--black-500); + color: var(--black-50) !important; + } + } + + li:first-child .action { + padding-top: 16px; + } + li:last-child .action { + padding-bottom: 16px; + } + } +} diff --git a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx new file mode 100644 index 00000000..3e237307 --- /dev/null +++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx @@ -0,0 +1,92 @@ +import type { PopupProps } from '../../_shared/Popup' + +import { clsx } from 'clsx' +import { createEffect, createSignal, Show } from 'solid-js' + +import { useLocalize } from '../../../context/localize' +import { showModal } from '../../../stores/ui' +import { InviteCoAuthorsModal } from '../../_shared/InviteCoAuthorsModal' +import { Popup } from '../../_shared/Popup' +import { SoonChip } from '../../_shared/SoonChip' + +import styles from './FeedArticlePopup.module.scss' + +type FeedArticlePopupProps = { + title: string + imageUrl: string + isOwner: boolean + description: string +} & Omit + +export const FeedArticlePopup = (props: FeedArticlePopupProps) => { + const { t } = useLocalize() + return ( + <> + + + + + + ) +} diff --git a/src/components/Feed/FeedArticlePopup/index.ts b/src/components/Feed/FeedArticlePopup/index.ts new file mode 100644 index 00000000..35792480 --- /dev/null +++ b/src/components/Feed/FeedArticlePopup/index.ts @@ -0,0 +1 @@ +export { FeedArticlePopup } from './FeedArticlePopup' diff --git a/src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx b/src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx index 39ca4eb8..859c295b 100644 --- a/src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx +++ b/src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx @@ -2,12 +2,15 @@ import { useLocalize } from '../../../context/localize' import { Modal } from '../../Nav/Modal' import { UserSearch } from '../UserSearch' -export const InviteCoAuthorsModal = () => { +type Props = { + title?: string +} +export const InviteCoAuthorsModal = (props: Props) => { const { t } = useLocalize() return ( -

    {t('Invite collaborators')}

    +

    {props.title || t('Invite collaborators')}

    {}} />     ) diff --git a/src/components/_shared/Popup/Popup.tsx b/src/components/_shared/Popup/Popup.tsx index f9cb0902..c0b04aec 100644 --- a/src/components/_shared/Popup/Popup.tsx +++ b/src/components/_shared/Popup/Popup.tsx @@ -36,9 +36,7 @@ export const Popup = (props: PopupProps) => { setIsVisible(false) }, }) - const toggle = () => setIsVisible((oldVisible) => !oldVisible) - return ( (containerRef.current = el)}> diff --git a/src/components/_shared/SoonChip/SoonChip.module.scss b/src/components/_shared/SoonChip/SoonChip.module.scss new file mode 100644 index 00000000..7a96f725 --- /dev/null +++ b/src/components/_shared/SoonChip/SoonChip.module.scss @@ -0,0 +1,23 @@ +.SoonChip { + @include font-size(1.2rem); + + display: inline-flex; + align-items: center; + justify-content: center; + flex-wrap: nowrap; + height: 22px; + padding: 2px 7px 2px 3px; + gap: -1px; + margin-left: 0.5rem; + border-radius: 8px; + background: var(--black-500); + color: var(--black-50); + font-weight: 700; + letter-spacing: 0.036px; + line-height: 1; + + .icon { + width: 16px; + height: 16px; + } +} diff --git a/src/components/_shared/SoonChip/SoonChip.tsx b/src/components/_shared/SoonChip/SoonChip.tsx new file mode 100644 index 00000000..a0acc2f7 --- /dev/null +++ b/src/components/_shared/SoonChip/SoonChip.tsx @@ -0,0 +1,20 @@ +import { clsx } from 'clsx' + +import { useLocalize } from '../../../context/localize' +import { Icon } from '../Icon' + +import styles from './SoonChip.module.scss' + +type Props = { + class?: string +} + +export const SoonChip = (props: Props) => { + const { t } = useLocalize() + return ( +
    + + {t('Soon')} +
    + ) +} diff --git a/src/components/_shared/SoonChip/index.ts b/src/components/_shared/SoonChip/index.ts new file mode 100644 index 00000000..ac55e9fa --- /dev/null +++ b/src/components/_shared/SoonChip/index.ts @@ -0,0 +1 @@ +export { SoonChip } from './SoonChip'