nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #166 from cheeaun/main

Browse source 
Update from main
This commit is contained in:
Chee Aun 2023-06-16 18:21:45 +08:00 committed by GitHub
parent 2dc1343f54 4007c9b2d6
commit 482a64cfac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 70 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -39,7 +39,7 @@
property="og:description"
content="Minimalistic opinionated Mastodon web client"
/>
<meta property="og:image" content="%VITE_WEBSITE%/og-image-2.png" />
<meta property="og:image" content="%VITE_WEBSITE%/og-image-2.jpg" />
</head>
<body>
<div id="app"></div>

74
package-lock.json generated
View file

@ -9,7 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@formatjs/intl-localematcher": "~0.4.0",
"@github/text-expander-element": "~2.3.0",
"@github/text-expander-element": "~2.5.0",
"@iconify-icons/mingcute": "~1.2.5",
"@justinribeiro/lite-youtube": "~1.5.0",
"@szhsin/react-menu": "~4.0.0",
@ -43,7 +43,7 @@
"@trivago/prettier-plugin-sort-imports": "~4.1.1",
"postcss": "~8.4.24",
"postcss-dark-theme-class": "~0.7.3",
"postcss-preset-env": "~8.4.2",
"postcss-preset-env": "~8.5.0",
"twitter-text": "~3.1.0",
"vite": "~4.3.9",
"vite-plugin-generate-file": "~0.0.4",
@ -2366,9 +2366,9 @@
}
},
"node_modules/@csstools/postcss-relative-color-syntax": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.1.tgz",
"integrity": "sha512-IskxdQqAkx/pyyOEW3Lhn3nvOu5zlaZ8wQljFl5zc3ABl+gEFf2G42yWK3+wX+J0F4jm7OikOigXo9fAISFEmg==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.2.tgz",
"integrity": "sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==",
"dev": true,
"funding": [
{
@ -2879,9 +2879,9 @@
"integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w=="
},
"node_modules/@github/text-expander-element": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.3.0.tgz",
"integrity": "sha512-E1KCxTOA/7Y4dP5g7vXbfRDFU6/SjU0TuJxx6JMwvxzI/NlBrXyXsx/fjFskD2T/un6i6CNKnXu1ZwExDLjcqw==",
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.5.0.tgz",
"integrity": "sha512-BjCxTshkUCgNXo/8iXUSK1sJ7kMJqhVsw6LAzIFtgaYrm4q2068WnPKjngfR+/QPhxN1nSvgd7CozblEIYjUZA==",
"dependencies": {
"@github/combobox-nav": "^2.0.2"
}
@ -5911,10 +5911,20 @@
}
},
"node_modules/postcss-nesting": {
"version": "11.2.2",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.2.2.tgz",
"integrity": "sha512-aOTiUniAB1bcPE6GGiynWRa6PZFPhOTAm5q3q5cem6QeSijIHHkWr6gs65ukCZMXeak8yXeZVbBJET3VM+HlhA==",
"version": "11.3.0",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.3.0.tgz",
"integrity": "sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"dependencies": {
"@csstools/selector-specificity": "^2.0.0",
"postcss-selector-parser": "^6.0.10"
@ -5922,10 +5932,6 @@
"engines": {
"node": "^14 || ^16 || >=18"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/csstools"
},
"peerDependencies": {
"postcss": "^8.4"
}
@ -6000,9 +6006,9 @@
}
},
"node_modules/postcss-preset-env": {
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.4.2.tgz",
"integrity": "sha512-Bihxo+FsyVNjsRADiYYnj9Ez0WBSWSSHAe8WvxoMlqrw8H8m6gK9E0MkDd7P6ForoikRIF3I8grGg/pFM6ECRQ==",
"version": "8.5.0",
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.5.0.tgz",
"integrity": "sha512-aqAbT5dXqYX5ZvicGKQpaW/eDEZFRfnhV6Hn1Jn2bCKEB9L2MgsTdnIsXsZyFUQflIV2wIs9HTEQgkH5duMCNg==",
"dev": true,
"funding": [
{
@ -6032,7 +6038,7 @@
"@csstools/postcss-normalize-display-values": "^2.0.1",
"@csstools/postcss-oklab-function": "^2.2.3",
"@csstools/postcss-progressive-custom-properties": "^2.3.0",
"@csstools/postcss-relative-color-syntax": "^1.0.1",
"@csstools/postcss-relative-color-syntax": "^1.0.2",
"@csstools/postcss-scope-pseudo-class": "^2.0.2",
"@csstools/postcss-stepped-value-functions": "^2.1.1",
"@csstools/postcss-text-decoration-shorthand": "^2.2.4",
@ -6062,7 +6068,7 @@
"postcss-initial": "^4.0.1",
"postcss-lab-function": "^5.2.3",
"postcss-logical": "^6.2.0",
"postcss-nesting": "^11.2.1",
"postcss-nesting": "^11.3.0",
"postcss-opacity-percentage": "^2.0.0",
"postcss-overflow-shorthand": "^4.0.1",
"postcss-page-break": "^3.0.4",
@ -9188,9 +9194,9 @@
}
},
"@csstools/postcss-relative-color-syntax": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.1.tgz",
"integrity": "sha512-IskxdQqAkx/pyyOEW3Lhn3nvOu5zlaZ8wQljFl5zc3ABl+gEFf2G42yWK3+wX+J0F4jm7OikOigXo9fAISFEmg==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.2.tgz",
"integrity": "sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==",
"dev": true,
"requires": {
"@csstools/css-color-parser": "^1.2.0",
@ -9422,9 +9428,9 @@
"integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w=="
},
"@github/text-expander-element": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.3.0.tgz",
"integrity": "sha512-E1KCxTOA/7Y4dP5g7vXbfRDFU6/SjU0TuJxx6JMwvxzI/NlBrXyXsx/fjFskD2T/un6i6CNKnXu1ZwExDLjcqw==",
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.5.0.tgz",
"integrity": "sha512-BjCxTshkUCgNXo/8iXUSK1sJ7kMJqhVsw6LAzIFtgaYrm4q2068WnPKjngfR+/QPhxN1nSvgd7CozblEIYjUZA==",
"requires": {
"@github/combobox-nav": "^2.0.2"
}
@ -11581,9 +11587,9 @@
}
},
"postcss-nesting": {
"version": "11.2.2",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.2.2.tgz",
"integrity": "sha512-aOTiUniAB1bcPE6GGiynWRa6PZFPhOTAm5q3q5cem6QeSijIHHkWr6gs65ukCZMXeak8yXeZVbBJET3VM+HlhA==",
"version": "11.3.0",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.3.0.tgz",
"integrity": "sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==",
"dev": true,
"requires": {
"@csstools/selector-specificity": "^2.0.0",
@ -11623,9 +11629,9 @@
}
},
"postcss-preset-env": {
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.4.2.tgz",
"integrity": "sha512-Bihxo+FsyVNjsRADiYYnj9Ez0WBSWSSHAe8WvxoMlqrw8H8m6gK9E0MkDd7P6ForoikRIF3I8grGg/pFM6ECRQ==",
"version": "8.5.0",
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.5.0.tgz",
"integrity": "sha512-aqAbT5dXqYX5ZvicGKQpaW/eDEZFRfnhV6Hn1Jn2bCKEB9L2MgsTdnIsXsZyFUQflIV2wIs9HTEQgkH5duMCNg==",
"dev": true,
"requires": {
"@csstools/postcss-cascade-layers": "^3.0.1",
@ -11645,7 +11651,7 @@
"@csstools/postcss-normalize-display-values": "^2.0.1",
"@csstools/postcss-oklab-function": "^2.2.3",
"@csstools/postcss-progressive-custom-properties": "^2.3.0",
"@csstools/postcss-relative-color-syntax": "^1.0.1",
"@csstools/postcss-relative-color-syntax": "^1.0.2",
"@csstools/postcss-scope-pseudo-class": "^2.0.2",
"@csstools/postcss-stepped-value-functions": "^2.1.1",
"@csstools/postcss-text-decoration-shorthand": "^2.2.4",
@ -11675,7 +11681,7 @@
"postcss-initial": "^4.0.1",
"postcss-lab-function": "^5.2.3",
"postcss-logical": "^6.2.0",
"postcss-nesting": "^11.2.1",
"postcss-nesting": "^11.3.0",
"postcss-opacity-percentage": "^2.0.0",
"postcss-overflow-shorthand": "^4.0.1",
"postcss-page-break": "^3.0.4",

4
package.json
View file

@ -11,7 +11,7 @@
},
"dependencies": {
"@formatjs/intl-localematcher": "~0.4.0",
"@github/text-expander-element": "~2.3.0",
"@github/text-expander-element": "~2.5.0",
"@iconify-icons/mingcute": "~1.2.5",
"@justinribeiro/lite-youtube": "~1.5.0",
"@szhsin/react-menu": "~4.0.0",
@ -45,7 +45,7 @@
"@trivago/prettier-plugin-sort-imports": "~4.1.1",
"postcss": "~8.4.24",
"postcss-dark-theme-class": "~0.7.3",
"postcss-preset-env": "~8.4.2",
"postcss-preset-env": "~8.5.0",
"twitter-text": "~3.1.0",
"vite": "~4.3.9",
"vite-plugin-generate-file": "~0.0.4",

3
src/components/nav-menu.css
View file

@ -1,9 +1,8 @@
@media (min-width: 23em) {
.nav-menu {
display: flex;
width: auto;
padding: 0;
min-width: 22em;
width: 22em;
}
.nav-menu section {
padding: 8px 0;

10
src/components/nav-menu.jsx
View file

@ -6,6 +6,7 @@ import { useLongPress } from 'use-long-press';
import { useSnapshot } from 'valtio';
import { api } from '../utils/api';
import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
import states from '../utils/states';
import store from '../utils/store';
@ -52,6 +53,13 @@ function NavMenu(props) {
const buttonRef = useRef();
const [menuState, setMenuState] = useState(undefined);
const boundingBoxPadding = safeBoundingBoxPadding([
0,
0,
snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? 50 : 0,
0,
]);
return (
<>
<button
@ -104,7 +112,7 @@ function NavMenu(props) {
viewScroll="close"
position="anchor"
align="center"
boundingBoxPadding="8 8 8 8"
boundingBoxPadding={boundingBoxPadding}
unmountOnClose
>
<section>

17
src/components/status.jsx
View file

@ -693,9 +693,13 @@ function Status({
x: 0,
y: 0,
});
const bindLongPress = useLongPress(
const bindLongPressContext = useLongPress(
(e) => {
const { clientX, clientY } = e.touches?.[0] || e;
// link detection copied from onContextMenu because here it works
const link = e.target.closest('a');
if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
e.preventDefault();
setContextMenuAnchorPoint({
x: clientX,
y: clientY,
@ -706,7 +710,7 @@ function Status({
threshold: 600,
captureEvent: true,
detect: 'touch',
cancelOnMovement: true,
cancelOnMovement: 4, // true allows movement of up to 25 pixels
},
);
@ -727,6 +731,7 @@ function Status({
} ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''}`}
onMouseEnter={debugHover}
onContextMenu={(e) => {
// FIXME: this code isn't getting called on Chrome at all?
if (!showContextMenu) return;
if (e.metaKey) return;
// console.log('context menu', e);
@ -739,7 +744,7 @@ function Status({
});
setIsContextMenuOpen(true);
}}
{...(showContextMenu ? bindLongPress() : {})}
{...(showContextMenu ? bindLongPressContext() : {})}
>
{showContextMenu && (
<ControlledMenu
@ -1839,7 +1844,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
const statusPeekText = statusPeek(status.reblog || status);
const [showPeek, setShowPeek] = useState(false);
const bindLongPress = useLongPress(
const bindLongPressPeek = useLongPress(
() => {
setShowPeek(true);
},
@ -1847,7 +1852,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
threshold: 600,
captureEvent: true,
detect: 'touch',
cancelOnMovement: true,
cancelOnMovement: 4, // true allows movement of up to 25 pixels
},
);
@ -1860,7 +1865,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
e.preventDefault();
setShowPeek(true);
}}
{...bindLongPress()}
{...bindLongPressPeek()}
>
<article class="status filtered" tabindex="-1">
<b

8
src/utils/safe-bounding-box-padding.jsx → src/utils/safe-bounding-box-padding.js
View file

@ -3,7 +3,8 @@ import mem from 'mem';
const root = document.documentElement;
const style = getComputedStyle(root);
const defaultBoundingBoxPadding = 8;
function _safeBoundingBoxPadding() {
function _safeBoundingBoxPadding(paddings = []) {
// paddings = [top, right, bottom, left]
// Get safe area inset variables from root
const safeAreaInsetTop = style.getPropertyValue('--sai-top');
const safeAreaInsetRight = style.getPropertyValue('--sai-right');
@ -15,7 +16,10 @@ function _safeBoundingBoxPadding() {
safeAreaInsetBottom,
safeAreaInsetLeft,
]
.map((v) => parseInt(v, 10) || defaultBoundingBoxPadding)
.map(
(v, i) =>
(parseInt(v, 10) || defaultBoundingBoxPadding) + (paddings[i] || 0),
)
.join(' ');
// console.log(str);
return str;