discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Share popup update (#350)

Browse Source 
* Share popup update

* Remove shared link

* Cleanup code

* Cleanup code

* Cleanup code

* Cleanup code
This commit is contained in:
Ilya Y 2023-12-29 14:07:48 +03:00 committed by GitHub
parent 11d3a6c274
commit a2b449502a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 198 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/icons/lightning.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.89589 13.4965C6.77089 13.6545 6.63373 13.7326 6.48269 13.7309C6.33339 13.7291 6.21533 13.6684 6.132 13.5468C6.04867 13.4271 6.04172 13.2691 6.11637 13.0712L7.61117 9.19789H4.76915C4.65283 9.19789 4.55561 9.16143 4.47575 9.08504C4.39589 9.01039 4.35596 8.91491 4.35596 8.79859C4.35596 8.68227 4.40283 8.56421 4.49832 8.44442L9.10422 2.50345C9.22922 2.34546 9.36637 2.26733 9.51742 2.26907C9.66672 2.27081 9.78478 2.33157 9.86811 2.4531C9.95144 2.57289 9.95839 2.73088 9.88373 2.92879L8.38894 6.80206H11.231C11.3473 6.80206 11.4445 6.83852 11.5244 6.9149C11.6042 6.98956 11.6442 7.08504 11.6442 7.20136C11.6442 7.31768 11.5973 7.43574 11.5018 7.55553L6.89589 13.4965Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 797 B

1
public/locales/en/translation.json
View File

@ -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",

1
public/locales/ru/translation.json
View File

@ -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": "Спецпроекты",

1
src/components/Article/FullArticle.tsx
View File

@ -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={
<button>
<Icon name="ellipsis" class={clsx(styles.icon)} />

6
src/components/Article/SharePopup.tsx
View File

@ -15,7 +15,7 @@ type SharePopupProps = {
shareUrl?: string
imageUrl: string
description: string
isVisible?: (value: boolean) => void
onVisibilityChange?: (value: boolean) => void
} & Omit<PopupProps, 'children'>
export const getShareUrl = (params: { pathname?: string } = {}) => {
@ -32,8 +32,8 @@ export const SharePopup = (props: SharePopupProps) => {
} = useSnackbar()
createEffect(() => {
if (props.isVisible) {
props.isVisible(isVisible())
if (props.onVisibilityChange) {
props.onVisibilityChange(isVisible())
}
})

3
src/components/Feed/ArticleCard/ArticleCard.tsx
View File

@ -345,7 +345,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
description={description}
imageUrl={props.article.cover}
shareUrl={getShareUrl({ pathname: `/${props.article.slug}` })}
isVisible={(value) => setIsActionPopupActive(value)}
trigger={
<button>
<Icon name="share-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
@ -367,8 +366,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
title={title}
description={description}
imageUrl={props.article.cover}
shareUrl={getShareUrl({ pathname: `/${props.article.slug}` })}
isVisible={(value) => setIsActionPopupActive(value)}
trigger={
<button>
<Icon name="ellipsis" class={clsx(styles.icon, styles.feedControlIcon)} />

25
src/components/Feed/FeedArticlePopup.module.scss
View File

@ -1,25 +0,0 @@
.feedArticlePopup {
box-shadow: none !important;
border: 1px solid rgb(0 0 0 / 15%);
border-radius: 1.6rem;
padding: 1.6rem !important;
text-align: left;
@include media-breakpoint-down(md) {
left: auto !important;
right: 0;
transform: none !important;
}
button {
font-size: inherit;
font-weight: 500;
text-align: left;
white-space: nowrap;
&:hover {
background: #000;
color: #fff !important;
}
}
}

115
src/components/Feed/FeedArticlePopup.tsx
View File

@ -1,115 +0,0 @@
import type { PopupProps } from '../_shared/Popup'
import { createEffect, createSignal, Show } from 'solid-js'
import { useLocalize } from '../../context/localize'
import { Popup } from '../_shared/Popup'
import styles from './FeedArticlePopup.module.scss'
type FeedArticlePopupProps = {
title: string
shareUrl?: string
imageUrl: string
isOwner: boolean
description: string
isVisible?: (value: boolean) => void
} & Omit<PopupProps, 'children'>
export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
const { t } = useLocalize()
const [isVisible, setIsVisible] = createSignal(false)
createEffect(() => {
if (props.isVisible) {
props.isVisible(isVisible())
}
})
return (
<Popup
{...props}
variant="tiny"
onVisibilityChange={(value) => setIsVisible(value)}
popupCssClass={styles.feedArticlePopup}
>
<ul class="nodash">
<li>
<button
role="button"
onClick={() => {
alert('Share')
}}
>
{t('Share')}
</button>
</li>
<Show when={!props.isOwner}>
<li>
<button
role="button"
onClick={() => {
alert('Help to edit')
}}
>
{t('Help to edit')}
</button>
</li>
</Show>
<li>
<button
role="button"
onClick={() => {
alert('Invite experts')
}}
>
{t('Invite experts')}
</button>
</li>
<Show when={!props.isOwner}>
<li>
<button
role="button"
onClick={() => {
alert('Subscribe to comments')
}}
>
{t('Subscribe to comments')}
</button>
</li>
</Show>
<li>
<button
role="button"
onClick={() => {
alert('Add to bookmarks')
}}
>
{t('Add to bookmarks')}
</button>
</li>
<Show when={!props.isOwner}>
<li>
<button
role="button"
onClick={() => {
alert('Report')
}}
>
{t('Report')}
</button>
</li>
</Show>
<li>
<button
role="button"
onClick={() => {
alert('Get notifications')
}}
>
{t('Get notifications')}
</button>
</li>
</ul>
</Popup>
)
}

48
src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss Normal file
View File

@ -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;
}
}
}

92
src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx Normal file
View File

@ -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<PopupProps, 'children'>
export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
const { t } = useLocalize()
return (
<>
<Popup {...props} variant="tiny" popupCssClass={styles.feedArticlePopup}>
<ul class={clsx('nodash', styles.actionList)}>
<Show when={!props.isOwner}>
<li>
<button
class={styles.action}
role="button"
onClick={() => {
alert('Help to edit')
}}
>
{t('Help to edit')}
</button>
</li>
</Show>
<li>
<button
class={styles.action}
role="button"
onClick={() => {
showModal('inviteCoAuthors')
}}
>
{t('Invite experts')}
</button>
</li>
<Show when={!props.isOwner}>
<li>
<button class={clsx(styles.action, styles.soon)} role="button">
{t('Subscribe to comments')} <SoonChip />
</button>
</li>
</Show>
<li>
<button class={clsx(styles.action, styles.soon)} role="button">
{t('Add to bookmarks')} <SoonChip />
</button>
</li>
{/*<Show when={!props.isOwner}>*/}
{/* <li>*/}
{/* <button*/}
{/* class={styles.action}*/}
{/* role="button"*/}
{/* onClick={() => {*/}
{/* alert('Report')*/}
{/* }}*/}
{/* >*/}
{/* {t('Report')}*/}
{/* </button>*/}
{/* </li>*/}
{/*</Show>*/}
{/*<li>*/}
{/* <button*/}
{/* class={styles.action}*/}
{/* role="button"*/}
{/* onClick={() => {*/}
{/* alert('Get notifications')*/}
{/* }}*/}
{/* >*/}
{/* {t('Get notifications')}*/}
{/* </button>*/}
{/*</li>*/}
</ul>
</Popup>
<InviteCoAuthorsModal title={t('Invite experts')} />
</>
)
}

1
src/components/Feed/FeedArticlePopup/index.ts Normal file
View File

@ -0,0 +1 @@
export { FeedArticlePopup } from './FeedArticlePopup'

7
src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx
View File

@ -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 (
<Modal variant="medium" name="inviteCoAuthors">
<h2>{t('Invite collaborators')}</h2>
<h2>{props.title || t('Invite collaborators')}</h2>
<UserSearch placeholder={t('Write your colleagues name or email')} onChange={() => {}} />
</Modal>
)

2
src/components/_shared/Popup/Popup.tsx
View File

@ -36,9 +36,7 @@ export const Popup = (props: PopupProps) => {
setIsVisible(false)
},
})
const toggle = () => setIsVisible((oldVisible) => !oldVisible)
return (
<span class={clsx(styles.container, props.containerCssClass)} ref={(el) => (containerRef.current = el)}>
<span class={styles.trigger} onClick={toggle}>

23
src/components/_shared/SoonChip/SoonChip.module.scss Normal file
View File

@ -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;
}
}

20
src/components/_shared/SoonChip/SoonChip.tsx Normal file
View File

@ -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 (
<div class={clsx(styles.SoonChip, props.class)}>
<Icon name="lightning" class={styles.icon} />
{t('Soon')}
</div>
)
}

1
src/components/_shared/SoonChip/index.ts Normal file
View File

@ -0,0 +1 @@
export { SoonChip } from './SoonChip'