Replace all Menu to Menu2

Need the default unmountOnClose so don't need the :has() hack
This commit is contained in:
Lim Chee Aun 2023-11-18 21:11:07 +08:00
parent d0e0248dd6
commit 85bdaace58
9 changed files with 26 additions and 28 deletions

View file

@ -1577,7 +1577,7 @@ body > .szh-menu-container {
position: fixed !important;
z-index: 10;
}
.szh-menu-container:has(.szh-menu--state-open) {
.szh-menu-container:not(:empty) {
inset: 0;
inset: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);

View file

@ -29,6 +29,7 @@ import Icon from './icon';
import Link from './link';
import ListAddEdit from './list-add-edit';
import Loader from './loader';
import Menu2 from './menu2';
import MenuConfirm from './menu-confirm';
import Modal from './modal';
import TranslationBlock from './translation-block';
@ -906,7 +907,6 @@ function RelatedActions({
}, [info, isSelf]);
const loading = relationshipUIState === 'loading';
const menuInstanceRef = useRef(null);
const [showTranslatedBio, setShowTranslatedBio] = useState(false);
const [showAddRemoveLists, setShowAddRemoveLists] = useState(false);
@ -947,8 +947,7 @@ function RelatedActions({
<span>{privateNote}</span>
</button>
)}
<Menu
instanceRef={menuInstanceRef}
<Menu2
portal={{
target: document.body,
}}
@ -957,16 +956,10 @@ function RelatedActions({
// Higher than the backdrop
zIndex: 1001,
},
onClick: (e) => {
if (e.target === e.currentTarget) {
menuInstanceRef.current?.closeMenu?.();
}
},
}}
align="center"
position="anchor"
overflow="auto"
boundingBoxPadding="8 8 8 8"
menuButton={
<button
type="button"
@ -1215,7 +1208,7 @@ function RelatedActions({
</MenuItem> */}
</>
)}
</Menu>
</Menu2>
{!relationship && relationshipUIState === 'loading' && (
<Loader abrupt />
)}

View file

@ -7,6 +7,7 @@ import localeMatch from '../utils/locale-match';
import states from '../utils/states';
import Icon from './icon';
import Menu2 from './menu2';
import TranslationBlock from './translation-block';
export default function MediaAltModal({ alt, lang, onClose }) {
@ -33,7 +34,7 @@ export default function MediaAltModal({ alt, lang, onClose }) {
<header class="header-grid">
<h2>Media description</h2>
<div class="header-side">
<Menu
<Menu2
align="end"
menuButton={
<button type="button" class="plain4">
@ -50,7 +51,7 @@ export default function MediaAltModal({ alt, lang, onClose }) {
<Icon icon="translate" />
<span>Translate</span>
</MenuItem>
</Menu>
</Menu2>
</div>
</header>
<main lang={lang} dir="auto">

View file

@ -15,6 +15,7 @@ import states from '../utils/states';
import Icon from './icon';
import Link from './link';
import Media from './media';
import Menu2 from './menu2';
import MenuLink from './menu-link';
function MediaModal({
@ -259,11 +260,10 @@ function MediaModal({
<span />
)}
<span>
<Menu
<Menu2
overflow="auto"
align="end"
position="anchor"
boundingBoxPadding="8 8 8 8"
gap={4}
menuClassName="glass-menu"
menuButton={
@ -284,7 +284,7 @@ function MediaModal({
<Icon icon="popout" />
<span>Open original media</span>
</MenuLink>
</Menu>{' '}
</Menu2>{' '}
<Link
to={`${instance ? `/${instance}` : ''}/s/${statusID}${
window.matchMedia('(min-width: calc(40em + 350px))').matches

View file

@ -6,13 +6,15 @@ import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
// It's like Menu but with sensible defaults, bug fixes and improvements.
function Menu2(props) {
const { containerProps } = props;
const { containerProps, instanceRef: _instanceRef } = props;
const size = useWindowSize();
const instanceRef = useRef();
const instanceRef = _instanceRef?.current ? _instanceRef : useRef();
return (
<Menu
boundingBoxPadding={safeBoundingBoxPadding()}
repositionFlag={`${size.width}x${size.height}`}
unmountOnClose
{...props}
instanceRef={instanceRef}
containerProps={{

View file

@ -14,6 +14,7 @@ import states from '../utils/states';
import AsyncText from './AsyncText';
import Icon from './icon';
import Link from './link';
import Menu2 from './menu2';
import MenuLink from './menu-link';
function Shortcuts() {
@ -139,11 +140,10 @@ function Shortcuts() {
</ul>
</nav>
) : (
<Menu
<Menu2
instanceRef={menuRef}
overflow="auto"
viewScroll="close"
boundingBoxPadding="8 8 8 8"
menuClassName="glass-menu shortcuts-menu"
gap={8}
position="anchor"
@ -195,7 +195,7 @@ function Shortcuts() {
</MenuLink>
);
})}
</Menu>
</Menu2>
)}
</div>
);

View file

@ -28,6 +28,7 @@ import { snapshot } from 'valtio/vanilla';
import AccountBlock from '../components/account-block';
import EmojiText from '../components/emoji-text';
import Loader from '../components/loader';
import Menu2 from '../components/menu2';
import MenuConfirm from '../components/menu-confirm';
import Modal from '../components/modal';
import NameText from '../components/name-text';
@ -1629,7 +1630,7 @@ function Status({
onClick={bookmarkStatus}
/>
</div>
<Menu
<Menu2
portal={{
target:
document.querySelector('.status-deck') || document.body,
@ -1638,7 +1639,6 @@ function Status({
gap={4}
overflow="auto"
viewScroll="close"
boundingBoxPadding="8 8 8 8"
menuButton={
<div class="action">
<button
@ -1652,7 +1652,7 @@ function Status({
}
>
{StatusMenuItems}
</Menu>
</Menu2>
</div>
</>
)}

View file

@ -7,6 +7,7 @@ import { useReducer } from 'preact/hooks';
import Avatar from '../components/avatar';
import Icon from '../components/icon';
import Link from '../components/link';
import Menu2 from '../components/menu2';
import MenuConfirm from '../components/menu-confirm';
import NameText from '../components/name-text';
import { api } from '../utils/api';
@ -92,7 +93,7 @@ function Accounts({ onClose }) {
<span class="tag">Default</span>{' '}
</>
)}
<Menu
<Menu2
align="end"
menuButton={
<button
@ -150,7 +151,7 @@ function Accounts({ onClose }) {
<Icon icon="exit" />
<span>Log out</span>
</MenuConfirm>
</Menu>
</Menu2>
</div>
</li>
);

View file

@ -23,6 +23,7 @@ import Icon from '../components/icon';
import Link from '../components/link';
import Loader from '../components/loader';
import MediaModal from '../components/media-modal';
import Menu2 from '../components/menu2';
import NameText from '../components/name-text';
import RelativeTime from '../components/relative-time';
import Status from '../components/status';
@ -1034,7 +1035,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
>
<Icon icon="layout4" size="l" />
</button>
<Menu
<Menu2
align="end"
portal={{
// Need this, else the menu click will cause scroll jump
@ -1114,7 +1115,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
Switch to post's instance (<b>{postInstance}</b>)
</small>
</MenuItem>
</Menu>
</Menu2>
<Link class="button plain deck-close" to={closeLink}>
<Icon icon="x" size="xl" />
</Link>