{(triggerRef: (el) => void) => (
+
+
)
}
diff --git a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss
index c983fe14..faf9a96c 100644
--- a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss
+++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss
@@ -5,6 +5,7 @@
padding: 0 !important;
text-align: left;
overflow: hidden;
+ margin-top: -14px;
@include media-breakpoint-down(md) {
left: auto !important;
@@ -30,6 +31,10 @@
&.soon {
color: var(--black-300);
+ display: flex;
+ gap: 0.6rem;
+ width: 100%;
+ justify-content: space-between;
}
&:hover {
diff --git a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx
index 3e237307..74b09880 100644
--- a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx
+++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx
@@ -1,29 +1,34 @@
import type { PopupProps } from '../../_shared/Popup'
import { clsx } from 'clsx'
-import { createEffect, createSignal, Show } from 'solid-js'
+import { 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 { ShareModal } from '../../_shared/ShareModal'
import { SoonChip } from '../../_shared/SoonChip'
import styles from './FeedArticlePopup.module.scss'
type FeedArticlePopupProps = {
- title: string
- imageUrl: string
isOwner: boolean
- description: string
+ onInviteClick: () => void
+ onShareClick: () => void
} & Omit
export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
const { t } = useLocalize()
return (
<>
-
+
+ -
+
+
-
-
-
@@ -86,7 +85,6 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
{/**/}
-
)
}
diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss
index fa98a278..2beb11fa 100644
--- a/src/components/Nav/Modal/Modal.module.scss
+++ b/src/components/Nav/Modal/Modal.module.scss
@@ -1,7 +1,7 @@
.backdrop {
align-items: center;
- background: rgb(20 20 20 / 70%);
display: flex;
+ background: rgba(20, 20, 20, 0.07);
justify-content: center;
height: 100%;
left: 0;
@@ -17,6 +17,7 @@
background: var(--background-color);
max-width: 1000px;
position: relative;
+ z-index: 1;
&:not([class*='col-']) {
width: 100%;
diff --git a/src/components/Nav/Modal/Modal.tsx b/src/components/Nav/Modal/Modal.tsx
index 24f9c887..9069a230 100644
--- a/src/components/Nav/Modal/Modal.tsx
+++ b/src/components/Nav/Modal/Modal.tsx
@@ -4,6 +4,7 @@ import { redirectPage } from '@nanostores/router'
import { clsx } from 'clsx'
import { createEffect, createMemo, createSignal, Show } from 'solid-js'
+import { useLocalize } from '../../../context/localize'
import { useMediaQuery } from '../../../context/mediaQuery'
import { router } from '../../../stores/router'
import { hideModal, useModalStore } from '../../../stores/ui'
@@ -24,6 +25,7 @@ interface Props {
}
export const Modal = (props: Props) => {
+ const { t } = useLocalize()
const { modal } = useModalStore()
const [visible, setVisible] = createSignal(false)
const allowClose = createMemo(() => props.allowClose !== false)
diff --git a/src/components/TableOfContents/TableOfContents.module.scss b/src/components/TableOfContents/TableOfContents.module.scss
index 84785a04..2e5fe4ac 100644
--- a/src/components/TableOfContents/TableOfContents.module.scss
+++ b/src/components/TableOfContents/TableOfContents.module.scss
@@ -1,6 +1,7 @@
.TableOfContentsFixedWrapper {
min-height: 100%;
position: relative;
+ z-index: 1;
top: 0;
@include media-breakpoint-down(xl) {
diff --git a/src/components/_shared/Popup/Popup.module.scss b/src/components/_shared/Popup/Popup.module.scss
index f69995be..1d0c7d80 100644
--- a/src/components/_shared/Popup/Popup.module.scss
+++ b/src/components/_shared/Popup/Popup.module.scss
@@ -15,7 +15,7 @@
position: absolute;
text-align: left;
top: calc(100% + 8px);
- z-index: 100;
+ z-index: 101;
ul {
margin-bottom: 0;
@@ -103,23 +103,6 @@
vertical-align: middle;
}
}
-
- .shareControl {
- text-align: left;
- transition:
- color 0.3s,
- background-color 0.3s;
- white-space: nowrap;
-
- &:hover {
- background: #000;
- color: #fff;
-
- .icon img {
- filter: invert(0);
- }
- }
- }
}
// TODO: animation
diff --git a/src/components/_shared/ShareLinks/ShareLinks.module.scss b/src/components/_shared/ShareLinks/ShareLinks.module.scss
new file mode 100644
index 00000000..d65ee4aa
--- /dev/null
+++ b/src/components/_shared/ShareLinks/ShareLinks.module.scss
@@ -0,0 +1,82 @@
+.ShareLinks {
+ .shareControl {
+ text-align: left;
+ transition:
+ color 0.3s,
+ background-color 0.3s;
+ white-space: nowrap;
+
+ &:hover {
+ background: #000;
+ color: #fff;
+
+ .icon img {
+ filter: invert(0);
+ }
+ }
+
+ .icon {
+ display: inline-block;
+ width: 3.6rem;
+
+ img {
+ display: inline-block;
+ filter: invert(1);
+ max-height: 2rem;
+ max-width: 2rem;
+ transition: filter 0.3s;
+ vertical-align: middle;
+ }
+ }
+ }
+
+ &.inModal {
+ li {
+ margin: 0;
+ }
+
+ .shareControl {
+ font-size: 18px;
+ font-weight: 600;
+ padding: 1rem;
+ margin: 0 -12px;
+ width: calc(100% + 24px);
+ transition: unset;
+ }
+ }
+
+ .linkInput {
+ position: relative;
+ margin-top: 2rem;
+ margin-bottom: -2rem !important;
+
+ input {
+ margin-bottom: 0;
+ padding-right: 40px;
+ box-sizing: border-box;
+ }
+
+ .copyButton {
+ position: absolute;
+ top: 2px;
+ bottom: 2px;
+ right: 2px;
+ width: 40px;
+ padding: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ }
+ }
+
+ .isCopied {
+ @include font-size(1.6rem);
+
+ position: absolute;
+ top: 100%;
+ left: 1.2rem;
+ margin-top: 0.5rem;
+ color: var(--blue-500);
+ }
+}
diff --git a/src/components/_shared/ShareLinks/ShareLinks.tsx b/src/components/_shared/ShareLinks/ShareLinks.tsx
new file mode 100644
index 00000000..89d5fefa
--- /dev/null
+++ b/src/components/_shared/ShareLinks/ShareLinks.tsx
@@ -0,0 +1,104 @@
+import { getPagePath } from '@nanostores/router'
+import { createSocialShare, FACEBOOK, TELEGRAM, TWITTER, VK } from '@solid-primitives/share'
+import { Input } from '@thisbeyond/solid-select'
+import { clsx } from 'clsx'
+import { createSignal, Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
+import { useSnackbar } from '../../../context/snackbar'
+import { router } from '../../../stores/router'
+import { Icon } from '../Icon'
+import { Popover } from '../Popover'
+
+import styles from './ShareLinks.module.scss'
+
+type Props = {
+ title: string
+ description: string
+ shareUrl: string
+ imageUrl?: string
+ class?: string
+ variant: 'inModal' | 'inPopup'
+}
+
+export const ShareLinks = (props: Props) => {
+ const { t } = useLocalize()
+ const [isLinkCopied, setIsLinkCopied] = createSignal(false)
+ const {
+ actions: { showSnackbar },
+ } = useSnackbar()
+
+ const [share] = createSocialShare(() => ({
+ title: props.title,
+ url: props.shareUrl,
+ description: props.description,
+ }))
+ const copyLink = async () => {
+ await navigator.clipboard.writeText(props.shareUrl)
+ if (props.variant === 'inModal') {
+ setIsLinkCopied(true)
+ setTimeout(() => setIsLinkCopied(false), 3000)
+ } else {
+ showSnackbar({ body: t('Link copied') })
+ }
+ }
+
+ return (
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ {t('Copy link')}
+
+ }
+ >
+
+
+
+
+
{t('Share publication')}
+
+
+ )
+}
diff --git a/src/components/_shared/ShareModal/index.ts b/src/components/_shared/ShareModal/index.ts
new file mode 100644
index 00000000..6a586378
--- /dev/null
+++ b/src/components/_shared/ShareModal/index.ts
@@ -0,0 +1 @@
+export { ShareModal } from './ShareModal'
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
index 775dc46d..7fcb4fe5 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -24,6 +24,7 @@ export type ModalType =
| 'followers'
| 'following'
| 'inviteCoAuthors'
+ | 'share'
export const MODALS: Record = {
auth: 'auth',
@@ -40,6 +41,7 @@ export const MODALS: Record = {
followers: 'followers',
following: 'following',
inviteCoAuthors: 'inviteCoAuthors',
+ share: 'share',
}
const [modal, setModal] = createSignal(null)