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

feat: Allow Dropdown component to have alignment (#303)

Browse source 
* feat: Allow Dropdown component to have alignment

* fix: Align quick actions dropdown

* fix: content width of dropdown items

Co-authored-by: kaj <40004347+KAJdev@users.noreply.github.com>
Co-authored-by: kajdev <zekewotring@gmail.com>
This commit is contained in:
matt 2022-06-24 08:01:25 -05:00 committed by GitHub
parent 020ee02a7f
commit 7cb6e4f574
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/interface/src/components/layout/TopBar.tsx
View file

@ -117,6 +117,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
<div className="flex mr-3 space-x-2">
<Dropdown
// className="absolute block h-6 w-44 top-2 right-4"
align="right"
items={[
[
{

9
packages/ui/src/Dropdown.tsx
View file

@ -21,6 +21,7 @@ export interface DropdownProps {
className?: string;
itemsClassName?: string;
itemButtonClassName?: string;
align?: 'left' | 'right';
}
export const Dropdown: React.FC<DropdownProps> = (props) => {
@ -49,8 +50,10 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
<Menu.Items
className={clsx(
'absolute z-50 min-w-[100px] w-full bg-white border divide-y divide-gray-100 rounded-md shadow-xl top-full dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none',
props.itemsClassName
'absolute z-50 min-w-fit w-full bg-white border divide-y divide-gray-100 rounded shadow-xl top-full dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none',
props.itemsClassName,
{ 'left-0': props.align === 'left' },
{ 'right-0': props.align === 'right' }
)}
>
{props.items.map((item, index) => (
@ -61,7 +64,7 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
<button
onClick={button.onPress}
className={clsx(
'text-sm group flex rounded items-center w-full px-2 py-1 dark:hover:bg-gray-500',
'text-sm group flex grow shrink-0 rounded items-center w-full whitespace-nowrap px-2 py-1 mb-[2px] dark:hover:bg-gray-500',
{
'bg-gray-300 dark:!bg-gray-500 dark:hover:bg-gray-500': button.selected
// 'text-gray-900 dark:text-gray-200': !active