Merge remote-tracking branch 'origin/next' into next-colors
This commit is contained in:
Alex Gleason
commit
12617bf7de
70 changed files with 83 additions and 43 deletions
|
|
@ -9,33 +9,6 @@
|
||||||
<link href="/manifest.json" rel="manifest">
|
<link href="/manifest.json" rel="manifest">
|
||||||
<!--server-generated-meta-->
|
<!--server-generated-meta-->
|
||||||
<link rel="icon" type="image/png" href="/favicon.png">
|
<link rel="icon" type="image/png" href="/favicon.png">
|
||||||
<link href='/icons/icon-57x57.png' rel='apple-touch-icon' sizes='57x57'>
|
|
||||||
<link href='/icons/icon-64x64.png' rel='apple-touch-icon' sizes='64x64'>
|
|
||||||
<link href='/icons/icon-72x72.png' rel='apple-touch-icon' sizes='72x72'>
|
|
||||||
<link href='/icons/icon-114x114.png' rel='apple-touch-icon' sizes='114x114'>
|
|
||||||
<link href='/icons/icon-120x120.png' rel='apple-touch-icon' sizes='120x120'>
|
|
||||||
<link href='/icons/icon-180x180.png' rel='apple-touch-icon' sizes='180x180'>
|
|
||||||
<link href='/icons/icon-192x192.png' rel='apple-touch-icon' sizes='192x192'>
|
|
||||||
<link href='/icons/icon-512x512.png' rel='apple-touch-icon' sizes='512x512'>
|
|
||||||
<script>
|
|
||||||
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.didBeginLoadingSoapbox) {
|
|
||||||
window.webkit.messageHandlers.didBeginLoadingSoapbox.postMessage("started");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<!-- Matomo -->
|
|
||||||
<script>
|
|
||||||
var _paq = window._paq = window._paq || [];
|
|
||||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
||||||
_paq.push(['trackPageView']);
|
|
||||||
_paq.push(['enableLinkTracking']);
|
|
||||||
(function() {
|
|
||||||
var u="//trk.bonsa.net/";
|
|
||||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
|
||||||
_paq.push(['setSiteId', '23231245']);
|
|
||||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
||||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-mode-light no-reduce-motion">
|
<body class="theme-mode-light no-reduce-motion">
|
||||||
<div id="soapbox">
|
<div id="soapbox">
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
|
||||||
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
|
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
|
||||||
import VerificationBadge from 'soapbox/components/verification_badge';
|
import VerificationBadge from 'soapbox/components/verification_badge';
|
||||||
import ActionButton from 'soapbox/features/ui/components/action_button';
|
import ActionButton from 'soapbox/features/ui/components/action_button';
|
||||||
import { useAppSelector } from 'soapbox/hooks';
|
import { useAppSelector, useOnScreen } from 'soapbox/hooks';
|
||||||
import { getAcct } from 'soapbox/utils/accounts';
|
import { getAcct } from 'soapbox/utils/accounts';
|
||||||
import { displayFqn } from 'soapbox/utils/state';
|
import { displayFqn } from 'soapbox/utils/state';
|
||||||
|
|
||||||
|
|
@ -52,8 +52,9 @@ const Account = ({
|
||||||
timestampUrl,
|
timestampUrl,
|
||||||
withRelationship = true,
|
withRelationship = true,
|
||||||
}: IAccount) => {
|
}: IAccount) => {
|
||||||
const overflowRef = React.useRef(null);
|
const overflowRef = React.useRef<HTMLDivElement>(null);
|
||||||
const actionRef = React.useRef(null);
|
const actionRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
const isOnScreen = useOnScreen(overflowRef);
|
||||||
|
|
||||||
const [style, setStyle] = React.useState<React.CSSProperties>({ visibility: 'hidden' });
|
const [style, setStyle] = React.useState<React.CSSProperties>({ visibility: 'hidden' });
|
||||||
|
|
||||||
|
|
@ -93,18 +94,19 @@ const Account = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
const style: React.CSSProperties = {};
|
if (isOnScreen) {
|
||||||
|
const style: React.CSSProperties = {};
|
||||||
|
const actionWidth = actionRef.current?.clientWidth;
|
||||||
|
|
||||||
const actionWidth = actionRef.current?.clientWidth;
|
if (overflowRef.current) {
|
||||||
|
style.maxWidth = overflowRef.current.clientWidth - 30 - avatarSize - actionWidth;
|
||||||
|
} else {
|
||||||
|
style.visibility = 'hidden';
|
||||||
|
}
|
||||||
|
|
||||||
if (overflowRef.current) {
|
setStyle(style);
|
||||||
style.maxWidth = overflowRef.current.clientWidth - 30 - avatarSize - actionWidth;
|
|
||||||
} else {
|
|
||||||
style.visibility = 'hidden';
|
|
||||||
}
|
}
|
||||||
|
}, [isOnScreen, overflowRef, actionRef]);
|
||||||
setStyle(style);
|
|
||||||
}, [overflowRef, actionRef]);
|
|
||||||
|
|
||||||
if (!account) {
|
if (!account) {
|
||||||
return null;
|
return null;
|
||||||
|
|
@ -161,8 +163,8 @@ const Account = ({
|
||||||
</LinkEl>
|
</LinkEl>
|
||||||
</ProfilePopper>
|
</ProfilePopper>
|
||||||
|
|
||||||
<HStack alignItems='center' space={1}>
|
<HStack alignItems='center' space={1} style={style}>
|
||||||
<Text theme='muted' size='sm'>@{username}</Text>
|
<Text theme='muted' size='sm' truncate>@{username}</Text>
|
||||||
|
|
||||||
{(timestamp) ? (
|
{(timestamp) ? (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
37
app/soapbox/components/permalink.tsx
Normal file
37
app/soapbox/components/permalink.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
|
|
||||||
|
interface IPermaLink extends Pick<React.HTMLAttributes<HTMLAnchorElement>, 'dangerouslySetInnerHTML'> {
|
||||||
|
className?: string,
|
||||||
|
href: string,
|
||||||
|
title?: string,
|
||||||
|
to: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
const Permalink: React.FC<IPermaLink> = (props) => {
|
||||||
|
const history = useHistory();
|
||||||
|
|
||||||
|
const { className, href, title, to, children, ...filteredProps } = props;
|
||||||
|
|
||||||
|
const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
|
||||||
|
if (event.button === 0 && !(event.ctrlKey || event.metaKey)) {
|
||||||
|
event.preventDefault();
|
||||||
|
history.push(to);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
target='_blank'
|
||||||
|
href={href}
|
||||||
|
onClick={handleClick}
|
||||||
|
title={title}
|
||||||
|
className={`permalink${className ? ' ' + className : ''}`}
|
||||||
|
{...filteredProps}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Permalink;
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -29,6 +29,7 @@ interface IHStack {
|
||||||
justifyContent?: 'between' | 'center',
|
justifyContent?: 'between' | 'center',
|
||||||
space?: 0.5 | 1 | 1.5 | 2 | 3 | 4 | 6,
|
space?: 0.5 | 1 | 1.5 | 2 | 3 | 4 | 6,
|
||||||
grow?: boolean,
|
grow?: boolean,
|
||||||
|
style?: React.CSSProperties
|
||||||
}
|
}
|
||||||
|
|
||||||
const HStack: React.FC<IHStack> = (props) => {
|
const HStack: React.FC<IHStack> = (props) => {
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -116,7 +116,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
|
||||||
const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link };
|
const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Comp key={idx} {...itemProps}>
|
<Comp key={idx} {...itemProps} className='truncate'>
|
||||||
{menuItem.text}
|
{menuItem.text}
|
||||||
</Comp>
|
</Comp>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1 +1,2 @@
|
||||||
export { useAppSelector } from './useAppSelector';
|
export { useAppSelector } from './useAppSelector';
|
||||||
|
export { useOnScreen } from './useOnScreen';
|
||||||
|
|
|
||||||
19
app/soapbox/hooks/useOnScreen.ts
Normal file
19
app/soapbox/hooks/useOnScreen.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export const useOnScreen = (ref: React.MutableRefObject<HTMLElement>) => {
|
||||||
|
const [isIntersecting, setIntersecting] = React.useState(false);
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
([entry]) => setIntersecting(entry.isIntersecting),
|
||||||
|
);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
observer.observe(ref.current);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
observer.disconnect();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return isIntersecting;
|
||||||
|
};
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -40,7 +40,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-bar-wrapper {
|
.notification-bar-wrapper {
|
||||||
@apply p-4 flex items-start;
|
@apply p-4 flex items-center justify-between w-full space-x-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-bar-title {
|
.notification-bar-title {
|
||||||
|
|
@ -50,3 +50,10 @@
|
||||||
.notification-bar-message {
|
.notification-bar-message {
|
||||||
@apply text-sm text-gray-700;
|
@apply text-sm text-gray-700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.notification-bar-action a {
|
||||||
|
@apply inline-flex items-center px-2.5 py-1 border border-solid border-gray-300
|
||||||
|
shadow-sm text-xs font-medium rounded-full text-gray-700 bg-white
|
||||||
|
hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2
|
||||||
|
focus:ring-primary-500;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue