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

Merge pull request #457 from Discours/fix/popups

Browse Source 
Unified popups style
This commit is contained in:
Tony 2024-05-07 01:37:31 +03:00 committed by GitHub
commit 73b42dbf09
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 147 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/icons/logout.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.1785 3.05371C15.1421 3.05371 14.3035 3.89486 14.3035 4.92871C14.3035 5.96256 15.1421 6.80371 16.1785 6.80371C17.215 6.80371 18.0535 5.96256 18.0535 4.92871C18.0535 3.89486 17.215 3.05371 16.1785 3.05371ZM14.6785 7.55371C14.4051 7.55371 14.1473 7.61621 13.9129 7.72038L10.9181 9.12923C10.7723 9.19694 10.6577 9.31413 10.5926 9.45736L9.12124 12.7308C9.07957 12.8089 9.05353 12.8975 9.05353 12.9912C9.05353 13.3011 9.30613 13.5537 9.61603 13.5537C9.8478 13.5537 10.0483 13.4131 10.1343 13.2126V13.21L11.702 10.5303L12.4858 10.249L11.7462 12.6761L11.7541 12.6787C11.7098 12.8376 11.6785 13.0042 11.6785 13.1787C11.6785 13.8923 12.0822 14.5068 12.6707 14.8245L12.6655 14.8298L15.5848 16.9626L16.5874 20.5225H16.59C16.6837 20.8298 16.965 21.0537 17.3035 21.0537C17.7176 21.0537 18.0535 20.7178 18.0535 20.3037C18.0535 20.2282 18.0379 20.1553 18.0171 20.085H18.0197L17.2671 16.3454C17.2436 16.223 17.1968 16.1058 17.1317 15.999L15.4806 13.2881L16.4806 9.99902L16.4572 9.99121C16.5145 9.81152 16.5535 9.62663 16.5535 9.42871C16.5535 8.39486 15.715 7.55371 14.6785 7.55371ZM17.1681 10.5355L16.603 12.0771L17.0353 12.4001C17.0718 12.4261 17.1108 12.4469 17.1525 12.4626L19.8869 13.5042C19.8973 13.5094 19.9103 13.512 19.9207 13.5173L19.9363 13.5225C19.9936 13.5407 20.0535 13.5537 20.116 13.5537C20.4259 13.5537 20.6785 13.3011 20.6785 12.9912C20.6785 12.7699 20.5483 12.5771 20.3608 12.486L17.9233 11.21L17.1681 10.5355ZM8.91551 13.9313C8.69676 13.9105 8.47801 14.0225 8.36863 14.2282L7.43895 15.9886L6.11343 15.2829C5.74884 15.0876 5.29572 15.2256 5.1004 15.5928L3.33738 18.9053C3.14468 19.2673 3.2853 19.723 3.64988 19.9183L4.48582 20.3636C4.47801 20.1058 4.5379 19.8454 4.66551 19.611C4.92593 19.1188 5.43374 18.8115 5.99103 18.8115C6.23322 18.8115 6.47801 18.874 6.69155 18.9886C6.80353 19.0485 6.9077 19.1188 6.99884 19.21L7.98843 17.348C7.99103 17.3454 7.99103 17.3454 7.99363 17.3428L8.2254 16.9027L8.43113 16.5173V16.5146L9.36343 14.7542C9.50926 14.4782 9.40249 14.1396 9.12905 13.9938C9.06134 13.9574 8.98843 13.9365 8.91551 13.9313ZM11.8608 15.3532L11.4988 17.0225L9.93113 19.8844L9.89988 19.9417C9.83999 20.0485 9.80353 20.1709 9.80353 20.3037C9.80353 20.7178 10.1395 21.0537 10.5535 21.0537C10.8244 21.0537 11.0613 20.9079 11.1916 20.6917L13.7332 16.7334L11.8608 15.3532ZM6.05613 19.5641C5.76447 19.5407 5.4728 19.6865 5.32697 19.96C5.13165 20.3271 5.27228 20.7803 5.63686 20.9756C6.00145 21.1683 6.45718 21.0303 6.65249 20.6657C6.8452 20.2985 6.70718 19.8454 6.33999 19.6501C6.24884 19.6006 6.15249 19.5745 6.05613 19.5641Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

4
public/icons/profile.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.4285 3.05347C11.392 3.05347 10.5535 3.89461 10.5535 4.92847C10.5535 5.96232 11.392 6.80347 12.4285 6.80347C13.4649 6.80347 14.3035 5.96232 14.3035 4.92847C14.3035 3.89461 13.4649 3.05347 12.4285 3.05347ZM12.4285 7.55347C10.3113 7.55347 9.05347 9.05347 9.05347 10.1785V14.6785C9.05347 15.0925 9.3894 15.4285 9.80347 15.4285H10.1785V21.7852C10.1785 22.2097 10.5222 22.5535 10.9467 22.5535C11.3582 22.5535 11.6941 22.2332 11.7149 21.8243L12.017 15.4285H12.8399L13.142 21.8243C13.1628 22.2332 13.4988 22.5535 13.9102 22.5535C14.3347 22.5535 14.6785 22.2097 14.6785 21.7852V15.4285H15.0535C15.4675 15.4285 15.8035 15.0925 15.8035 14.6785V10.1785C15.8035 9.05347 14.5457 7.55347 12.4285 7.55347Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 831 B

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

@ -28,7 +28,7 @@ export const SharePopup = (props: SharePopupProps) => {
})
return (
<Popup {...props} variant="bordered" onVisibilityChange={(value) => setIsVisible(value)}>
<Popup {...props} onVisibilityChange={(value) => setIsVisible(value)}>
<ShareLinks
variant="inPopup"
title={props.title}

1
src/components/Feed/ArticleCard/ArticleCard.module.scss
View File

@ -603,6 +603,7 @@
.shoutCardDetailsItem {
align-items: center;
display: flex;
font-size: 1.4rem;
margin-right: 1.2rem;
white-space: nowrap;

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

@ -1,7 +1,4 @@
.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;

1
src/components/Nav/HeaderAuth.tsx
View File

@ -146,7 +146,6 @@ export const HeaderAuth = (props: Props) => {
{editorMode()}
</span>
}
variant="bordered"
popupCssClass={styles.editorPopup}
>
<ul class={clsx('nodash', styles.editorModesList)}>

41
src/components/Nav/ProfilePopup.tsx
View File

@ -5,8 +5,10 @@ import { getPagePath } from '@nanostores/router'
import { useLocalize } from '../../context/localize'
import { useSession } from '../../context/session'
import { router } from '../../stores/router'
import { Icon } from '../_shared/Icon'
import { Popup } from '../_shared/Popup'
import { clsx } from 'clsx'
import styles from '../_shared/Popup/Popup.module.scss'
type ProfilePopupProps = Omit<PopupProps, 'children'>
@ -16,30 +18,53 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
const { t } = useLocalize()
return (
<Popup {...props} horizontalAnchor="right" variant="bordered">
<Popup {...props} horizontalAnchor="right">
<ul class="nodash">
<li>
<a href={getPagePath(router, 'author', { slug: author().slug })}>{t('Profile')}</a>
<a class={styles.action} href={getPagePath(router, 'author', { slug: author().slug })}>
<Icon name="profile" class={styles.icon} />
{t('Profile')}
</a>
</li>
<li>
<a href={getPagePath(router, 'drafts')}>{t('Drafts')}</a>
<a class={styles.action} href={getPagePath(router, 'drafts')}>
<Icon name="pencil-outline" class={styles.icon} />
{t('Drafts')}
</a>
</li>
<li>
<a href={`${getPagePath(router, 'author', { slug: author().slug })}?m=following`}>
<a
class={styles.action}
href={`${getPagePath(router, 'author', { slug: author().slug })}?m=following`}
>
<Icon name="feed-all" class={styles.icon} />
{t('Subscriptions')}
</a>
</li>
<li>
<a href={`${getPagePath(router, 'authorComments', { slug: author().slug })}`}>{t('Comments')}</a>
<a
class={styles.action}
href={`${getPagePath(router, 'authorComments', { slug: author().slug })}`}
>
<Icon name="comment" class={styles.icon} />
{t('Comments')}
</a>
</li>
<li>
<a href="#">{t('Bookmarks')}</a>
<a class={styles.action} href="#">
<Icon name="bookmark" class={styles.icon} />
{t('Bookmarks')}
</a>
</li>
<li>
<a href={getPagePath(router, 'profileSettings')}>{t('Settings')}</a>
<a class={styles.action} href={getPagePath(router, 'profileSettings')}>
<Icon name="settings" class={styles.icon} />
{t('Settings')}
</a>
</li>
<li class={styles.topBorderItem}>
<span class="link" onClick={() => signOut()}>
<span class={clsx(styles.action, 'link')} onClick={() => signOut()}>
<Icon name="logout" class={styles.icon} />
{t('Logout')}
</span>
</li>

27
src/components/_shared/DropDown/DropDown.tsx
View File

@ -5,6 +5,7 @@ import { For, Show, createSignal } from 'solid-js'
import { Popup } from '../Popup'
import popupStyles from '../Popup/Popup.module.scss'
import styles from './DropDown.module.scss'
export type Option = {
@ -56,16 +57,22 @@ export const DropDown = <TOption extends Option = Option>(props: Props<TOption>)
onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)}
{...props.popupProps}
>
<For each={props.options}>
{(option) => (
<div
class={clsx('link', { [styles.active]: props.currentOption.value === option.value })}
onClick={() => props.onChange(option)}
>
{option.title}
</div>
)}
</For>
<ul class="nodash">
<For each={props.options}>
{(option) => (
<li>
<button
class={clsx(popupStyles.action, {
[styles.active]: props.currentOption.value === option.value,
})}
onClick={() => props.onChange(option)}
>
{option.title}
</button>
</li>
)}
</For>
</ul>
</Popup>
</Show>
)

84
src/components/_shared/Popup/Popup.module.scss
View File

@ -8,10 +8,14 @@
.popup {
background: var(--background-color);
border: 1px solid rgb(0 0 0 / 15%);
border-radius: 1.6rem;
box-shadow: 0 8px 16px 0 rgb(0 0 0 / 5%);
color: var(--default-color);
cursor: default;
min-width: 144px;
opacity: 1;
overflow: hidden;
position: absolute;
text-align: left;
top: calc(100% + 11px);
@ -21,6 +25,7 @@
margin-bottom: 0;
li {
margin: 0;
position: relative;
&:last-child {
@ -29,33 +34,19 @@
}
}
&.bordered {
@include font-size(1.6rem);
border: 2px solid #000;
padding: 2.4rem;
ul li {
margin-bottom: 1.6rem;
&:last-child {
margin-bottom: 0;
}
}
}
&.tiny {
@include font-size(1.4rem);
box-shadow: 0 4px 60px rgb(0 0 0 / 10%);
padding: 1rem;
.action {
padding: 0.5rem 1rem;
}
ul li {
margin-bottom: 1rem;
li:first-child .action {
padding-top: 1rem;
}
&:last-child {
margin-bottom: 0;
}
li:last-child .action {
padding-bottom: 1rem;
}
}
@ -75,7 +66,6 @@
.topBorderItem {
border-top: 2px solid;
padding-top: 1em;
}
a:link,
@ -83,26 +73,58 @@
border: none;
white-space: nowrap;
&:hover {
.icon img {
filter: invert(0);
}
&:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
.icon {
display: inline-block;
width: 3.6rem;
margin-right: 1rem;
width: 2.4rem;
img {
display: inline-block;
filter: invert(1);
max-height: 2rem;
max-width: 2rem;
max-height: 2.4rem;
max-width: 2.4rem;
transition: filter 0.3s;
vertical-align: middle;
}
}
.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;
&:hover {
background: var(--black-500);
color: var(--black-50) !important;
.icon img {
filter: invert(1);
}
}
}
li:first-child .action {
padding-top: 16px;
}
li:last-child .action {
padding-bottom: 16px;
}
}
// TODO: animation

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

@ -14,7 +14,7 @@ export type PopupProps = {
children: JSX.Element
onVisibilityChange?: (isVisible: boolean) => void
horizontalAnchor?: HorizontalAnchor
variant?: 'bordered' | 'tiny'
variant?: 'tiny'
closePopup?: boolean
}
@ -54,7 +54,6 @@ export const Popup = (props: PopupProps) => {
class={clsx(styles.popup, props.popupCssClass, {
[styles.horizontalAnchorCenter]: horizontalAnchor === 'center',
[styles.horizontalAnchorRight]: horizontalAnchor === 'right',
[styles.bordered]: props.variant === 'bordered',
[styles.tiny]: props.variant === 'tiny',
})}
>

5
src/components/_shared/ShareLinks/ShareLinks.module.scss
View File

@ -7,9 +7,6 @@
white-space: nowrap;
&:hover {
background: #000;
color: #fff;
.icon img {
filter: invert(0);
}
@ -17,7 +14,7 @@
.icon {
display: inline-block;
width: 3.6rem;
width: 2rem;
img {
display: inline-block;

43
src/components/_shared/ShareLinks/ShareLinks.tsx
View File

@ -7,6 +7,7 @@ import { useSnackbar } from '../../../context/snackbar'
import { Icon } from '../Icon'
import { Popover } from '../Popover'
import popupStyles from '../Popup/Popup.module.scss'
import styles from './ShareLinks.module.scss'
type Props = {
@ -53,26 +54,42 @@ export const ShareLinks = (props: Props) => {
<div class={clsx(styles.ShareLinks, props.class, { [styles.inModal]: props.variant === 'inModal' })}>
<ul class="nodash">
<li>
<button role="button" class={styles.shareControl} onClick={() => handleShare(FACEBOOK)}>
<Icon name="facebook-white" class={styles.icon} />
<button
role="button"
class={clsx(styles.shareControl, popupStyles.action)}
onClick={() => handleShare(FACEBOOK)}
>
<Icon name="facebook-white" class={clsx(styles.icon, popupStyles.icon)} />
Facebook
</button>
</li>
<li>
<button role="button" class={styles.shareControl} onClick={() => handleShare(TWITTER)}>
<Icon name="twitter-white" class={styles.icon} />
<button
role="button"
class={clsx(styles.shareControl, popupStyles.action)}
onClick={() => handleShare(TWITTER)}
>
<Icon name="twitter-white" class={clsx(styles.icon, popupStyles.icon)} />
Twitter
</button>
</li>
<li>
<button role="button" class={styles.shareControl} onClick={() => handleShare(TELEGRAM)}>
<Icon name="telegram-white" class={styles.icon} />
<button
role="button"
class={clsx(styles.shareControl, popupStyles.action)}
onClick={() => handleShare(TELEGRAM)}
>
<Icon name="telegram-white" class={clsx(styles.icon, popupStyles.icon)} />
Telegram
</button>
</li>
<li>
<button role="button" class={styles.shareControl} onClick={() => handleShare(VK)}>
<Icon name="vk-white" class={styles.icon} />
<button
role="button"
class={clsx(styles.shareControl, popupStyles.action)}
onClick={() => handleShare(VK)}
>
<Icon name="vk-white" class={clsx(styles.icon, popupStyles.icon)} />
VK
</button>
</li>
@ -80,8 +97,12 @@ export const ShareLinks = (props: Props) => {
<Show
when={props.variant === 'inModal'}
fallback={
<button role="button" class={styles.shareControl} onClick={copyLink}>
<Icon name="link-white" class={styles.icon} />
<button
role="button"
class={clsx(styles.shareControl, popupStyles.action)}
onClick={copyLink}
>
<Icon name="link-white" class={clsx(styles.icon, popupStyles.icon)} />
{t('Copy link')}
</button>
}
@ -93,7 +114,7 @@ export const ShareLinks = (props: Props) => {
<Popover content={t('Copy link')}>
{(triggerRef: (el) => void) => (
<div class={styles.copyButton} onClick={copyLink} ref={triggerRef}>
<Icon name="copy" class={styles.icon} />
<Icon name="copy" class={clsx(styles.icon, popupStyles.icon)} />
</div>
)}
</Popover>