Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-07 05:33:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

add light-theme context menu

Browse source
This commit is contained in:
maxichrome 2022-05-27 21:10:47 -05:00
parent aed3fa8fac
commit 8f04cbe4e1
No known key found for this signature in database
GPG key ID: DDC459310E98B6AB
5 changed files with 35 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/ui/.storybook/main.js
View file

@ -12,7 +12,8 @@ module.exports = {
implementation: require('postcss')
}
}
}
},
'storybook-tailwind-dark-mode'
],
webpackFinal: async (config) => {
config.module.rules.push({

1
packages/ui/package.json
View file

@ -46,6 +46,7 @@
"postcss-loader": "^7.0.0",
"sass": "^1.50.0",
"sass-loader": "^13.0.0",
"storybook-tailwind-dark-mode": "^1.0.12",
"style-loader": "^3.3.1",
"typescript": "^4.6.3"
}

6
packages/ui/src/ContextMenu.stories.tsx
View file

@ -22,7 +22,7 @@ Default.args = {
{
label: 'New Item',
icon: Plus,
onClick: () => alert('Item clicked')
onClick: () => {}
}
]
},
@ -31,13 +31,13 @@ Default.args = {
{
label: 'View Info',
icon: FileText,
onClick: () => alert('Info!!!')
onClick: () => {}
},
{
label: 'Delete',
icon: Trash,
danger: true,
onClick: () => alert('Delete item clicked')
onClick: () => {}
}
]
}

10
packages/ui/src/ContextMenu.tsx
View file

@ -25,14 +25,16 @@ export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
<div
role="menu"
className={clsx(
'flex flex-col select-none cursor-default bg-gray-600 text-gray-100 text-left text-sm font-semibold rounded p-1.5 gap-1.5 border-2 border-gray-500',
'shadow-box shadow-gray-300 dark:shadow-gray-700 flex flex-col select-none cursor-default bg-gray-50 text-gray-800 border-gray-200 dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500 text-left text-sm font-semibold rounded p-1.5 gap-1.5 border-2',
className
)}
{...rest}
>
{sections.map((sec, i) => (
<>
{i !== 0 && <hr className="border-0 border-b border-b-gray-500 mx-2" />}
{i !== 0 && (
<hr className="border-0 border-b border-b-gray-300 dark:border-b-gray-500 mx-2" />
)}
<section key={i} className="flex items-stretch flex-col gap-0.5">
{sec.heading && (
@ -48,9 +50,9 @@ export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
textAlign: 'inherit'
}}
className={clsx(
'flex flex-row gap-1.5 items-center cursor-default rounded-sm flex-1 px-1.5 py-1 focus:bg-gray-500 hover:bg-gray-500',
'flex flex-row gap-1.5 items-center cursor-default rounded-sm flex-1 px-1.5 py-1 focus-visible:bg-gray-150 hover:bg-gray-150 dark:focus-visible:bg-gray-500 dark:hover:bg-gray-500',
{
'text-red-400': item.danger
'text-red-600 dark:text-red-400': item.danger
}
)}
onClick={item.onClick}

24
pnpm-lock.yaml
View file

@ -389,6 +389,7 @@ importers:
react-dom: ^18.0.0
sass: ^1.50.0
sass-loader: ^13.0.0
storybook-tailwind-dark-mode: ^1.0.12
style-loader: ^3.3.1
tailwindcss: ^3.0.23
typescript: ^4.6.3
@ -421,6 +422,7 @@ importers:
postcss-loader: 7.0.0_postcss@8.4.12
sass: 1.50.0
sass-loader: 13.0.0_sass@1.50.0
storybook-tailwind-dark-mode: 1.0.12_zpnidt7m3osuk7shl3s4oenomq
style-loader: 3.3.1
typescript: 4.6.3
@ -7992,7 +7994,7 @@ packages:
dev: true
/default-browser-id/1.0.4:
resolution: {integrity: sha1-5Z0JpdFXuCi4dsJoFuYcPSosIDo=}
resolution: {integrity: sha512-qPy925qewwul9Hifs+3sx1ZYn14obHxpkX+mPD369w4Rzg+YkJBgi3SOvwUq81nWSjqGUegIgEPwD8u+HUnxlw==}
engines: {node: '>=0.10.0'}
hasBin: true
requiresBuild: true
@ -15351,6 +15353,26 @@ packages:
resolution: {integrity: sha512-CMtO2Uneg3SAz/d6fZ/6qbqqQHi2ynq6/KzMD/26gTkiEShCcpqFfTHgOxsE0egAq6SX3FmN4CeSqn8BzXQkJg==}
dev: true
/storybook-tailwind-dark-mode/1.0.12_zpnidt7m3osuk7shl3s4oenomq:
resolution: {integrity: sha512-0/JryZmq43dT0zYawjtQAZeYdm2ejlj0yV5P7ITgNPZ75Bv0r5voI6M4h2rpSK79Snw3qmmmfxiS5OpvsLluAw==}
peerDependencies:
'@storybook/addons': ^6.2.9
'@storybook/api': ^6.2.9
'@storybook/components': ^6.2.9
'@storybook/core-events': ^6.2.9
'@storybook/theming': ^6.2.9
react: ^16.8.0 || ^17.0.0
react-dom: ^16.8.0 || ^17.0.0
peerDependenciesMeta:
react:
optional: true
react-dom:
optional: true
dependencies:
react: 18.0.0
react-dom: 18.0.0_react@18.0.0
dev: true
/stream-browserify/2.0.2:
resolution: {integrity: sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==}
dependencies: