Skip to content

Commit

Permalink
fixed dropdown and styling for macro modal box
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhuang38
jhuang38 committed Jun 8, 2024
1 parent ceb2d04 commit a98774c
Show file tree
Hide file tree
Showing 4 changed files with 155 additions and 72 deletions.
69 changes: 69 additions & 0 deletions dashboard/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions dashboard/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@fortawesome/free-regular-svg-icons": "^6.1.2",
"@fortawesome/free-solid-svg-icons": "^6.1.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui-float/react": "^0.14.0",
"@headlessui/react": "^1.7.0",
"@headlessui/tailwindcss": "^0.1.2",
"@heroicons/react": "^2.0.16",
Expand Down
110 changes: 60 additions & 50 deletions dashboard/src/components/Atoms/Config/SelectBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import clsx from 'clsx';
import { useEffect, useState, Fragment } from 'react';
import BeatLoader from 'react-spinners/BeatLoader';
import { catchAsyncToString } from 'utils/util';
import { Float } from '@headlessui-float/react';

/**
* A self controlled dropdown meant to represent a single value of a config
Expand Down Expand Up @@ -117,12 +118,20 @@ export default function SelectBox({
</div>
)}
</div>
<div className="relative w-5/12 shrink-0">
<div className="relative w-5/12 shrink-0" >
<Listbox
value={value}
onChange={onChange}
disabled={disabled || isLoading}
>
<Float
as="div"
className="relative w-full"
placement="bottom"
floatingAs={Fragment}
portal
adaptiveWidth
>
<Listbox.Button
className={clsx(
'input-outlines input-text-style group min-h-[1em] w-full rounded py-1.5 px-3',
Expand Down Expand Up @@ -150,57 +159,58 @@ export default function SelectBox({
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-1"
>
<Listbox.Options
className={clsx(
'input-outlines input-text-style absolute z-40 mt-2 max-h-[100%] w-full overflow-auto rounded p-0 py-1',
'bg-gray-850 outline-gray-550 drop-shadow-md focus-visible:ring-blue-faded/50'
)}
>
{options.map((option) => (
<Listbox.Option
key={option}
value={option}
className={clsx(
'relative cursor-pointer select-none py-2 pl-3 pr-4 text-gray-300',
'border-t border-gray-faded/30 last:border-b ui-active:z-50 ui-active:mb-[-1px] ui-active:border-y ui-active:border-white/50 ui-active:last:mb-0',
'ui-selected:font-medium ui-not-selected:font-medium',
'ui-selected:ui-active:bg-gray-600 ui-not-selected:ui-active:bg-gray-800',
'ui-selected:ui-not-active:bg-gray-700 ui-not-selected:ui-not-active:bg-gray-850'
)}
>
{({ active }) => (
<div className="flex flex-row justify-between">
<span className="block truncate pr-1">{option}</span>
<div
onClick={actionIconClick}
className="absolute right-3"
>
{active && actionIcon && actionIconClick && (
<FontAwesomeIcon
key="icon"
icon={actionIcon}
className="w-4 cursor-pointer text-gray-faded/30 hover:text-gray-500"
/>
)}
<Listbox.Options
className={clsx(
'input-outlines input-text-style absolute z-40 mt-2 max-h-60 w-full overflow-auto rounded p-0 py-1',
'bg-gray-850 outline-gray-550 drop-shadow-md focus-visible:ring-blue-faded/50'
)}
>
{options.map((option) => (
<Listbox.Option
key={option}
value={option}
className={clsx(
'relative cursor-pointer select-none py-2 pl-3 pr-4 text-gray-300',
'border-t border-gray-faded/30 last:border-b ui-active:z-50 ui-active:mb-[-1px] ui-active:border-y ui-active:border-white/50 ui-active:last:mb-0',
'ui-selected:font-medium ui-not-selected:font-medium',
'ui-selected:ui-active:bg-gray-600 ui-not-selected:ui-active:bg-gray-800',
'ui-selected:ui-not-active:bg-gray-700 ui-not-selected:ui-not-active:bg-gray-850'
)}
>
{({ active }) => (
<div className="flex flex-row justify-between">
<span className="block truncate pr-1">{option}</span>
<div
onClick={actionIconClick}
className="absolute right-3"
>
{active && actionIcon && actionIconClick && (
<FontAwesomeIcon
key="icon"
icon={actionIcon}
className="w-4 cursor-pointer text-gray-faded/30 hover:text-gray-500"
/>
)}
</div>
</div>
</div>
)}
</Listbox.Option>
))}
{(initialValue === undefined || initialValue.length === 0) && (
<Listbox.Option
key={'Select...'}
value={''}
className={`relative cursor-default select-none bg-gray-700 py-2 pl-8 pr-4 text-gray-400`}
disabled
>
<span className={`block truncate font-medium`}>
Select...
</span>
</Listbox.Option>
)}
</Listbox.Options>
)}
</Listbox.Option>
))}
{(initialValue === undefined || initialValue.length === 0) && (
<Listbox.Option
key={'Select...'}
value={''}
className={`relative cursor-default select-none bg-gray-700 py-2 pl-8 pr-4 text-gray-400`}
disabled
>
<span className={`block truncate font-medium`}>
Select...
</span>
</Listbox.Option>
)}
</Listbox.Options>
</Transition>
</Float>
</Listbox>
</div>
</div>
Expand Down
47 changes: 25 additions & 22 deletions dashboard/src/pages/macros.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,36 +36,39 @@ const MacroModalContents = ({
}) => {
const [macroData, _] = useState(data);
return (
<span>
<div className={
clsx('flex flex-col gap-4 @4xl:flex-row', macroData.error? '' : 'mb-2')}>
<span className="w-full min-w-0 rounded-lg border border-gray-faded/30 child:w-full child:border-b child:border-gray-faded/30 first:child:rounded-t-lg last:child:rounded-b-lg last:child:border-b-0">
{
Object.entries(macroData.config).map(([_, manifest], index) => {
return (<>
<SettingField
key = {index}
instance = {selectedInstance}
sectionId={`${selectedInstance.uuid}-${row.name}`}
settingId={manifest.setting_id}
setting={adaptSettingManifest(manifest)}
error = {null}
onSubmit={async (value) => {
const newSettings = macroData.config;
newSettings[`${manifest.name}`].value = value
await storeMacroConfig(
selectedInstance.uuid,
row.name as string,
newSettings
);
macroData.error = null;

}}
/>
<br></br>
<div >
<SettingField
key = {index}
instance = {selectedInstance}
sectionId={`${selectedInstance.uuid}-${row.name}`}
settingId={manifest.setting_id}
setting={adaptSettingManifest(manifest)}
error = {null}
onSubmit={async (value) => {
const newSettings = macroData.config;
newSettings[`${manifest.name}`].value = value
await storeMacroConfig(
selectedInstance.uuid,
row.name as string,
newSettings
);
macroData.error = null;
}}
/>
</div>
</>)
})
}
{macroData.error && <TextCaption text = {macroData.message || ''} className = 'text-small text-red-300 whitespace-pre-wrap'/>}

</span>
{macroData.error && <TextCaption text = {macroData.message || ''} className = 'text-small text-red-300 whitespace-pre-wrap'/>}
</div>
)
}

Expand Down

0 comments on commit a98774c

Please sign in to comment.