From 7e49ec210ed706a0ee94b3c2b7b17af719b604e1 Mon Sep 17 00:00:00 2001 From: molvqingtai Date: Mon, 4 Nov 2024 06:01:25 +0800 Subject: [PATCH] fix: sooner style --- package.json | 4 +- pnpm-lock.yaml | 78 +++++++++++------------ src/app/content/index.tsx | 16 +++-- src/app/content/views/AppButton/index.tsx | 4 +- src/app/options/App.tsx | 2 +- src/assets/styles/overlay.css | 17 +++++ src/assets/styles/sonner.css | 39 ++++++------ src/assets/styles/tailwind.css | 1 + src/domain/Room.ts | 4 +- src/hooks/{useDarg.ts => useDraggable.ts} | 4 +- 10 files changed, 93 insertions(+), 76 deletions(-) create mode 100644 src/assets/styles/overlay.css rename src/hooks/{useDarg.ts => useDraggable.ts} (97%) diff --git a/package.json b/package.json index 39288d0..aa3ec70 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ "remesh-logger": "^4.1.0", "remesh-react": "^4.1.2", "rxjs": "^7.8.1", - "sonner": "^1.6.1", + "sonner": "^1.7.0", "tailwind-merge": "^2.5.4", "trystero": "^0.20.0", "type-fest": "^4.26.1", @@ -104,7 +104,7 @@ "@types/eslint": "^9.6.1", "@types/eslint__js": "^8.42.3", "@types/eslint-plugin-tailwindcss": "^3.17.0", - "@types/node": "^22.8.6", + "@types/node": "^22.8.7", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/parser": "^8.12.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9ebfe2b..6ddfd3f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -135,8 +135,8 @@ importers: specifier: ^7.8.1 version: 7.8.1 sonner: - specifier: ^1.6.1 - version: 1.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.7.0 + version: 1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) tailwind-merge: specifier: ^2.5.4 version: 2.5.4 @@ -155,7 +155,7 @@ importers: devDependencies: '@commitlint/cli': specifier: ^19.5.0 - version: 19.5.0(@types/node@22.8.6)(typescript@5.6.3) + version: 19.5.0(@types/node@22.8.7)(typescript@5.6.3) '@commitlint/config-conventional': specifier: ^19.5.0 version: 19.5.0 @@ -184,8 +184,8 @@ importers: specifier: ^8.42.3 version: 8.42.3 '@types/node': - specifier: ^22.8.6 - version: 22.8.6 + specifier: ^22.8.7 + version: 22.8.7 '@types/react': specifier: ^18.3.12 version: 18.3.12 @@ -197,7 +197,7 @@ importers: version: 8.12.2(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3) '@vitejs/plugin-react': specifier: ^4.3.3 - version: 4.3.3(vite@5.4.10(@types/node@22.8.6)) + version: 4.3.3(vite@5.4.10(@types/node@22.8.7)) autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.47) @@ -260,13 +260,13 @@ importers: version: 8.12.2(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3) vite-plugin-svgr: specifier: ^4.3.0 - version: 4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)) + version: 4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.7)) webext-bridge: specifier: ^6.0.1 version: 6.0.1 wxt: specifier: ^0.19.13 - version: 0.19.13(@types/node@22.8.6)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4) + version: 0.19.13(@types/node@22.8.7)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4) packages: @@ -2002,8 +2002,8 @@ packages: '@types/murmurhash3js-revisited@3.0.3': resolution: {integrity: sha512-QvlqvYtGBYIDeO8dFdY4djkRubcrc+yTJtBc7n8VZPlJDUS/00A+PssbvERM8f9bYRmcaSEHPZgZojeQj7kzAA==} - '@types/node@22.8.6': - resolution: {integrity: sha512-tosuJYKrIqjQIlVCM4PEGxOmyg3FCPa/fViuJChnGeEIhjA46oy8FMVoF9su1/v8PNs2a8Q0iFNyOx0uOF91nw==} + '@types/node@22.8.7': + resolution: {integrity: sha512-LidcG+2UeYIWcMuMUpBKOnryBWG/rnmOHQR5apjn8myTQcx3rinFRn7DcIFhMnS0PPFSC6OafdIKEad0lj6U0Q==} '@types/normalize-package-data@2.4.4': resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==} @@ -5844,8 +5844,8 @@ packages: resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==} engines: {node: '>=10.0.0'} - sonner@1.6.1: - resolution: {integrity: sha512-0iD+eDJHyJitl069BC6wVDykQD56FMKk4TD6XkcCcikcDYaGsFKlSU0mZQXYWKPpFof3jlV/u4vGZc2KCqz8OQ==} + sonner@1.7.0: + resolution: {integrity: sha512-W6dH7m5MujEPyug3lpI2l3TC3Pp1+LTgK0Efg+IHDrBbtEjyCmCHHo6yfNBOsf1tFZ6zf+jceWwB38baC8yO9g==} peerDependencies: react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc @@ -6935,11 +6935,11 @@ snapshots: '@colors/colors@1.5.0': optional: true - '@commitlint/cli@19.5.0(@types/node@22.8.6)(typescript@5.6.3)': + '@commitlint/cli@19.5.0(@types/node@22.8.7)(typescript@5.6.3)': dependencies: '@commitlint/format': 19.5.0 '@commitlint/lint': 19.5.0 - '@commitlint/load': 19.5.0(@types/node@22.8.6)(typescript@5.6.3) + '@commitlint/load': 19.5.0(@types/node@22.8.7)(typescript@5.6.3) '@commitlint/read': 19.5.0 '@commitlint/types': 19.5.0 tinyexec: 0.3.0 @@ -6986,7 +6986,7 @@ snapshots: '@commitlint/rules': 19.5.0 '@commitlint/types': 19.5.0 - '@commitlint/load@19.5.0(@types/node@22.8.6)(typescript@5.6.3)': + '@commitlint/load@19.5.0(@types/node@22.8.7)(typescript@5.6.3)': dependencies: '@commitlint/config-validator': 19.5.0 '@commitlint/execute-rule': 19.5.0 @@ -6994,7 +6994,7 @@ snapshots: '@commitlint/types': 19.5.0 chalk: 5.3.0 cosmiconfig: 9.0.0(typescript@5.6.3) - cosmiconfig-typescript-loader: 5.0.0(@types/node@22.8.6)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3) + cosmiconfig-typescript-loader: 5.0.0(@types/node@22.8.7)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3) lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 lodash.uniq: 4.5.0 @@ -7622,7 +7622,7 @@ snapshots: '@grpc/grpc-js@1.9.15': dependencies: '@grpc/proto-loader': 0.7.13 - '@types/node': 22.8.6 + '@types/node': 22.8.7 '@grpc/proto-loader@0.7.13': dependencies: @@ -8840,7 +8840,7 @@ snapshots: '@types/conventional-commits-parser@5.0.0': dependencies: - '@types/node': 22.8.6 + '@types/node': 22.8.7 '@types/debug@4.1.12': dependencies: @@ -8848,7 +8848,7 @@ snapshots: '@types/dns-packet@5.6.5': dependencies: - '@types/node': 22.8.6 + '@types/node': 22.8.7 '@types/eslint-plugin-tailwindcss@3.17.0': dependencies: @@ -8899,7 +8899,7 @@ snapshots: '@types/murmurhash3js-revisited@3.0.3': {} - '@types/node@22.8.6': + '@types/node@22.8.7': dependencies: undici-types: 6.19.8 @@ -8920,7 +8920,7 @@ snapshots: '@types/readable-stream@4.0.15': dependencies: - '@types/node': 22.8.6 + '@types/node': 22.8.7 safe-buffer: 5.1.2 '@types/semver@7.5.8': {} @@ -8935,11 +8935,11 @@ snapshots: '@types/ws@8.5.12': dependencies: - '@types/node': 22.8.6 + '@types/node': 22.8.7 '@types/yauzl@2.10.3': dependencies: - '@types/node': 22.8.6 + '@types/node': 22.8.7 optional: true '@typescript-eslint/eslint-plugin@8.12.2(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3)': @@ -9075,14 +9075,14 @@ snapshots: '@ungap/structured-clone@1.2.0': {} - '@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.8.6))': + '@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.8.7))': dependencies: '@babel/core': 7.25.2 '@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.25.2) '@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.25.2) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 5.4.10(@types/node@22.8.6) + vite: 5.4.10(@types/node@22.8.7) transitivePeerDependencies: - supports-color @@ -9612,7 +9612,7 @@ snapshots: chrome-launcher@1.1.0: dependencies: - '@types/node': 22.8.6 + '@types/node': 22.8.7 escape-string-regexp: 4.0.0 is-wsl: 2.2.0 lighthouse-logger: 2.0.1 @@ -9804,9 +9804,9 @@ snapshots: core-util-is@1.0.3: {} - cosmiconfig-typescript-loader@5.0.0(@types/node@22.8.6)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3): + cosmiconfig-typescript-loader@5.0.0(@types/node@22.8.7)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3): dependencies: - '@types/node': 22.8.6 + '@types/node': 22.8.7 cosmiconfig: 9.0.0(typescript@5.6.3) jiti: 1.21.6 typescript: 5.6.3 @@ -12760,7 +12760,7 @@ snapshots: '@protobufjs/path': 1.1.2 '@protobufjs/pool': 1.1.0 '@protobufjs/utf8': 1.1.0 - '@types/node': 22.8.6 + '@types/node': 22.8.7 long: 5.2.3 protons-runtime@5.5.0: @@ -13346,7 +13346,7 @@ snapshots: transitivePeerDependencies: - supports-color - sonner@1.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + sonner@1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -14035,12 +14035,12 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.2 - vite-node@2.1.3(@types/node@22.8.6): + vite-node@2.1.3(@types/node@22.8.7): dependencies: cac: 6.7.14 debug: 4.3.7 pathe: 1.1.2 - vite: 5.4.10(@types/node@22.8.6) + vite: 5.4.10(@types/node@22.8.7) transitivePeerDependencies: - '@types/node' - less @@ -14052,24 +14052,24 @@ snapshots: - supports-color - terser - vite-plugin-svgr@4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)): + vite-plugin-svgr@4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.7)): dependencies: '@rollup/pluginutils': 5.1.3(rollup@4.21.3) '@svgr/core': 8.1.0(typescript@5.6.3) '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.6.3)) - vite: 5.4.10(@types/node@22.8.6) + vite: 5.4.10(@types/node@22.8.7) transitivePeerDependencies: - rollup - supports-color - typescript - vite@5.4.10(@types/node@22.8.6): + vite@5.4.10(@types/node@22.8.7): dependencies: esbuild: 0.21.5 postcss: 8.4.47 rollup: 4.21.3 optionalDependencies: - '@types/node': 22.8.6 + '@types/node': 22.8.7 fsevents: 2.3.3 watchpack@2.4.1: @@ -14254,7 +14254,7 @@ snapshots: bufferutil: 4.0.8 utf-8-validate: 6.0.4 - wxt@0.19.13(@types/node@22.8.6)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4): + wxt@0.19.13(@types/node@22.8.7)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4): dependencies: '@aklinker1/rollup-plugin-visualizer': 5.12.0(rollup@4.21.3) '@types/chrome': 0.0.269 @@ -14297,8 +14297,8 @@ snapshots: publish-browser-extension: 2.2.2 scule: 1.3.0 unimport: 3.13.1(rollup@4.21.3) - vite: 5.4.10(@types/node@22.8.6) - vite-node: 2.1.3(@types/node@22.8.6) + vite: 5.4.10(@types/node@22.8.7) + vite-node: 2.1.3(@types/node@22.8.7) web-ext-run: 0.2.1(bufferutil@4.0.8)(utf-8-validate@6.0.4) webextension-polyfill: 0.12.0 transitivePeerDependencies: diff --git a/src/app/content/index.tsx b/src/app/content/index.tsx index 20a2d77..153f9c6 100644 --- a/src/app/content/index.tsx +++ b/src/app/content/index.tsx @@ -14,7 +14,9 @@ import { ToastImpl } from '@/domain/impls/Toast' // import { PeerRoomImpl } from '@/domain/impls/PeerRoom' import { PeerRoomImpl } from '@/domain/impls/PeerRoom2' import '@/assets/styles/tailwind.css' +// Remove import after merging: https://github.com/emilkowalski/sonner/pull/508 import '@/assets/styles/sonner.css' +import '@/assets/styles/overlay.css' import NotificationDomain from '@/domain/Notification' import { createElement } from '@/utils' @@ -56,13 +58,13 @@ export default defineContentScript({ container.append(app) const root = createRoot(app) root.render( - // - - - - - - // + + + + + + + ) return root }, diff --git a/src/app/content/views/AppButton/index.tsx b/src/app/content/views/AppButton/index.tsx index b3ba407..0d463c2 100644 --- a/src/app/content/views/AppButton/index.tsx +++ b/src/app/content/views/AppButton/index.tsx @@ -18,7 +18,7 @@ import LogoIcon6 from '@/assets/images/logo-6.svg' import AppStatusDomain from '@/domain/AppStatus' import { getDay } from 'date-fns' import { messenger } from '@/messenger' -import useDarg from '@/hooks/useDarg' +import useDraggable from '@/hooks/useDraggable' import useWindowResize from '@/hooks/useWindowResize' export interface AppButtonProps { @@ -45,7 +45,7 @@ const AppButton: FC = ({ className }) => { x, y, setRef: appButtonRef - } = useDarg({ + } = useDraggable({ initX: appPosition.x, initY: appPosition.y, minX: 50, diff --git a/src/app/options/App.tsx b/src/app/options/App.tsx index 7256647..87d6036 100644 --- a/src/app/options/App.tsx +++ b/src/app/options/App.tsx @@ -16,7 +16,7 @@ function App() {
- +
diff --git a/src/assets/styles/overlay.css b/src/assets/styles/overlay.css new file mode 100644 index 0000000..e87bf00 --- /dev/null +++ b/src/assets/styles/overlay.css @@ -0,0 +1,17 @@ +section[aria-live='polite'] { + display: contents; +} + +:where([data-sonner-toaster]) { + max-width: 300px; + position: absolute; + display: flex; + justify-content: center; +} + +:where([data-sonner-toast][data-styled='true']) { + max-width: 300px; + padding: 6px 12px; + border-radius: 9999px; + width: fit-content; +} diff --git a/src/assets/styles/sonner.css b/src/assets/styles/sonner.css index e8696b3..1be4594 100644 --- a/src/assets/styles/sonner.css +++ b/src/assets/styles/sonner.css @@ -61,6 +61,17 @@ list-style: none; outline: none; z-index: 999999999; + transition: transform 400ms ease; +} + +:where([data-sonner-toaster][data-lifted='true']) { + transform: translateY(-10px); +} + +@media (hover: none) and (pointer: coarse) { + :where([data-sonner-toaster][data-lifted='true']) { + transform: none; + } } :where([data-sonner-toaster][data-x-position='right']) { @@ -234,7 +245,6 @@ justify-content: center; align-items: center; padding: 0; - background: var(--gray1); color: var(--gray12); border: 1px solid var(--gray4); transform: var(--toast-close-button-transform); @@ -247,6 +257,10 @@ border-color 200ms; } +[data-sonner-toast] [data-close-button] { + background: var(--gray1); +} + :where([data-sonner-toast]) :where([data-close-button]):focus-visible { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), @@ -359,6 +373,10 @@ transition: none; } +[data-sonner-toast][data-swiped='true'] { + user-select: none; +} + [data-sonner-toast][data-swipe-out='true'][data-y-position='bottom'], [data-sonner-toast][data-swipe-out='true'][data-y-position='top'] { animation: swipe-out 200ms ease-out forwards; @@ -662,26 +680,7 @@ transform 200ms; } -section:has([data-sonner-toaster]) { - display: contents; -} - .sonner-loader[data-visible='false'] { opacity: 0; transform: scale(0.8) translate(-50%, -50%); } - -/* Custom styles */ -:where([data-sonner-toaster]) { - max-width: 300px; - position: absolute; - display: flex; - justify-content: center; -} - -:where([data-sonner-toast][data-styled='true']) { - max-width: 300px; - padding: 6px 12px; - border-radius: 9999px; - width: fit-content; -} diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css index e253907..b955284 100644 --- a/src/assets/styles/tailwind.css +++ b/src/assets/styles/tailwind.css @@ -73,6 +73,7 @@ * { @apply border-border; } + :host, :root { @apply !bg-background !text-foreground !text-base !visible; diff --git a/src/domain/Room.ts b/src/domain/Room.ts index 6a57d53..5a17d97 100644 --- a/src/domain/Room.ts +++ b/src/domain/Room.ts @@ -506,7 +506,7 @@ const RoomDomain = Remesh.domain({ impl: ({ get }) => { const onLeaveRoom$ = fromEventPattern(peerRoom.onLeaveRoom).pipe( map((peerId) => { - console.log('onLeaveRoom', peerId, get(SelfUserQuery()).peerId) + // console.log('onLeaveRoom', peerId) const user = get(UserListQuery()).find((user) => user.peerId === peerId) if (user) { @@ -550,8 +550,6 @@ const RoomDomain = Remesh.domain({ impl: ({ get }) => { const beforeUnload$ = fromEvent(window, 'beforeunload').pipe( map(() => { - console.log('beforeunload') - return get(JoinStatusModule.query.IsFinishedQuery()) ? LeaveRoomCommand() : null }) ) diff --git a/src/hooks/useDarg.ts b/src/hooks/useDraggable.ts similarity index 97% rename from src/hooks/useDarg.ts rename to src/hooks/useDraggable.ts index eba7a14..6c12161 100644 --- a/src/hooks/useDarg.ts +++ b/src/hooks/useDraggable.ts @@ -10,7 +10,7 @@ export interface DargOptions { minY: number } -const useDarg = (options: DargOptions) => { +const useDraggable = (options: DargOptions) => { const { initX, initY, maxX = 0, minX = 0, maxY = 0, minY = 0 } = options const mousePosition = useRef({ x: 0, y: 0 }) @@ -91,4 +91,4 @@ const useDarg = (options: DargOptions) => { return { setRef, ...position } } -export default useDarg +export default useDraggable