Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed/improved multiple components #299

Merged
merged 5 commits into from
Sep 11, 2023
Merged

Fixed/improved multiple components #299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6a84c5f
Fixed/improved multiple components
rubenthoms Sep 11, 2023
b86b42c
Removed deprecated `overflow: overlay`
rubenthoms Sep 11, 2023
675d483
Added closing cross button
rubenthoms Sep 11, 2023
176e294
Changed view when no syncable settings available
rubenthoms Sep 11, 2023
c9b9684
Removed unnecessary deps and added scroll capturing to bounding rect
rubenthoms Sep 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
</Button>
</div>
}
showCloseCross
>
<div className="flex gap-4 max-w-full">
<div className="flex flex-col gap-4 p-4 border-r bg-slate-100 h-full">
Expand Down
27 changes: 15 additions & 12 deletions frontend/src/framework/internal/components/Settings/private-components/setting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { ErrorBoundary } from "@framework/internal/components/ErrorBoundary";
import { useImportState } from "@framework/internal/hooks/moduleHooks";
import { Cog6ToothIcon } from "@heroicons/react/20/solid";
import { CircularProgress } from "@lib/components/CircularProgress";
import { resolveClassNames } from "@lib/utils/resolveClassNames";

type SettingProps = {
moduleInstance: ModuleInstance<any>;
Expand Down Expand Up @@ -71,10 +72,10 @@ export const Setting: React.FC<SettingProps> = (props) => {
return (
<div
key={props.moduleInstance.getId()}
style={{
display: props.activeModuleId === props.moduleInstance.getId() ? "flex" : "none",
}}
className="flex-col"
className={resolveClassNames(
props.activeModuleId === props.moduleInstance.getId() ? "flex" : "hidden",
"flex-col h-full w-full"
)}
>
<ErrorBoundary moduleInstance={props.moduleInstance}>
<div className="flex justify-center items-center p-2 bg-slate-100 h-10">
Expand All @@ -86,14 +87,16 @@ export const Setting: React.FC<SettingProps> = (props) => {
{props.moduleInstance.getTitle()}
</span>
</div>
<div className="p-2 flex flex-col gap-4">
<Settings
moduleContext={props.moduleInstance.getContext()}
workbenchSession={props.workbench.getWorkbenchSession()}
workbenchServices={props.workbench.getWorkbenchServices()}
workbenchSettings={props.workbench.getWorkbenchSettings()}
initialSettings={props.moduleInstance.getInitialSettings() || undefined}
/>
<div className="flex flex-col gap-4 overflow-auto">
<div className="p-2">
<Settings
moduleContext={props.moduleInstance.getContext()}
workbenchSession={props.workbench.getWorkbenchSession()}
workbenchServices={props.workbench.getWorkbenchServices()}
workbenchSettings={props.workbench.getWorkbenchSettings()}
initialSettings={props.moduleInstance.getInitialSettings() || undefined}
/>
</div>
</div>
</ErrorBoundary>
</div>
Expand Down
97 changes: 51 additions & 46 deletions frontend/src/framework/internal/components/Settings/private-components/syncSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,54 +69,59 @@ export const SyncSettings: React.FC<ModulesListProps> = (props) => {
return true;
}

function makeContent() {
const syncableSettingKeys = activeModuleInstance?.getModule().getSyncableSettingKeys() ?? [];

if (activeModuleId === "" || activeModuleInstance === undefined) {
return <div className="text-gray-500">No module selected</div>;
}

if (syncableSettingKeys.length === 0) {
return <div className="text-gray-500">No syncable settings</div>;
}

return (
<table className="w-full">
<thead>
<tr className="border-b">
<th className="border-r p-2 w-6">
<GlobeAltIcon className="w-4 h-4" title="Sync for all module instances" />
</th>
<th className="border-r p-2 w-6">
<MapPinIcon className="w-4 h-4" title="Sync for active module instance" />
</th>
<th></th>
</tr>
</thead>
<tbody>
{syncableSettingKeys.map((setting) => {
const globallySynced = isGlobalSyncSetting(setting);
return (
<tr key={setting} className="hover:bg-blue-50">
<td className="border-r p-2">
<Checkbox
checked={globallySynced}
onChange={(e) => handleGlobalSyncSettingChange(setting, e.target.checked)}
/>
</td>
<td className="border-r p-2">
<Checkbox
checked={globallySynced || activeModuleInstance.isSyncedSetting(setting)}
onChange={(e) => handleSyncSettingChange(setting, e.target.checked)}
/>
</td>
<td className="p-2">{SyncSettingsMeta[setting].name}</td>
</tr>
);
})}
</tbody>
</table>
);
}

return (
<Drawer title="Sync settings" icon={<LinkIcon />} visible={drawerContent === DrawerContent.SyncSettings}>
{activeModuleId === "" || activeModuleInstance === undefined ? (
<div className="text-gray-500">No module selected</div>
) : (
<table className="w-full">
<thead>
<tr className="border-b">
<th className="border-r p-2 w-6">
<GlobeAltIcon className="w-4 h-4" title="Sync for all module instances" />
</th>
<th className="border-r p-2 w-6">
<MapPinIcon className="w-4 h-4" title="Sync for active module instance" />
</th>
<th></th>
</tr>
</thead>
<tbody>
{activeModuleInstance
.getModule()
.getSyncableSettingKeys()
.map((setting) => {
const globallySynced = isGlobalSyncSetting(setting);
return (
<tr key={setting} className="hover:bg-blue-50">
<td className="border-r p-2">
<Checkbox
checked={globallySynced}
onChange={(e) =>
handleGlobalSyncSettingChange(setting, e.target.checked)
}
/>
</td>
<td className="border-r p-2">
<Checkbox
checked={
globallySynced || activeModuleInstance.isSyncedSetting(setting)
}
onChange={(e) => handleSyncSettingChange(setting, e.target.checked)}
/>
</td>
<td className="p-2">{SyncSettingsMeta[setting].name}</td>
</tr>
);
})}
</tbody>
</table>
)}
{makeContent()}
</Drawer>
);
};
2 changes: 1 addition & 1 deletion frontend/src/lib/components/Checkbox/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const Checkbox: React.FC<CheckboxProps> = (props) => {
{props.label && (
<label
htmlFor={props.id ?? id.current}
className={resolveClassNames("block", "text-sm", "text-gray-900", "cursor-pointer")}
className={resolveClassNames("block", "text-gray-900", "cursor-pointer")}
>
{props.label}
</label>
Expand Down
9 changes: 1 addition & 8 deletions frontend/src/lib/components/Dropdown/dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,14 +166,7 @@ export const Dropdown = withDefaults<DropdownProps>()(defaultProps, (props) => {
setOptionIndexWithFocusToCurrentSelection();
}
}
}, [
inputBoundingRect,
dropdownVisible,
filteredOptions,
selection,
setOptionIndexWithFocusToCurrentSelection,
setStartIndex,
]);
}, [inputBoundingRect, dropdownVisible, filteredOptions, selection]);

const handleOptionClick = React.useCallback(
(value: string) => {
Expand Down
16 changes: 8 additions & 8 deletions frontend/src/lib/components/RadioGroup/radioGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,32 +35,32 @@ type RadioProps = {
const Radio: React.FC<RadioProps> = (props) => {
return (
<BaseComponent disabled={props.disabled}>
<label className={resolveClassNames("relative", "cursor-pointer", "inline-flex", "align-middle", "gap-2")}>
<label className="relative inline-flex align-middle gap-2 items-center group">
<span
className={resolveClassNames(
"rounded-full",
"w-5",
"h-5",
"w-4 max-w-4 min-w-[1rem]",
"h-4 max-h-4 min-h-[1rem]",
"border-2",
"border-solid",
"flex",
"items-center",
"justify-center",
props.checked ? "border-blue-500" : "border-gray-400"
props.checked ? "border-blue-500" : "border-gray-400 group-hover:border-blue-500"
)}
>
<span
className={resolveClassNames(
"rounded-full",
props.checked ? "w-3" : "w-0",
props.checked ? "h-3" : "h-0",
props.checked ? "w-2" : "w-0",
props.checked ? "h-2" : "h-0",
"bg-blue-500",
"block",
"transition-all"
)}
/>
<input
className="opacity-0 absolute w-full h-full cursor-inherit top-0 left-0 m-0 p-0 z-1"
className="opacity-0 absolute w-full h-full cursor-inherit top-0 left-0 m-0 p-0 z-1 cursor-pointer"
type="radio"
name={props.name}
value={props.value}
Expand All @@ -86,7 +86,7 @@ export const RadioGroup = withDefaults<RadioGroupProps>()(defaultProps, (props)
>
<span>{props.name}</span>
<div
className={resolveClassNames("flex", "radio-group", "gap-4", "m-1", {
className={resolveClassNames("flex", "radio-group", "gap-1", {
"flex-col": props.direction === "vertical",
})}
>
Expand Down
14 changes: 10 additions & 4 deletions frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,10 +155,13 @@ export class Tag extends React.Component<TagProps> {
position = 0;
}
return (
<div key={"TagBrowseButton_" + index} className="w-4 mr-1 relative h-full">
<div key={"TagBrowseButton_" + index} className="w-4 mr-1 h-full flex flex-col">
<button
key={"TagPreviousButton_" + index}
className="appearance-none bg-cyan-600 border-0 cursor-pointer inline-block outline-none p-0 h-1/2 absolute w-4 disabled:opacity-30 disabled:cursor-default hover:bg-cyan-500"
className={resolveClassNames(
"appearance-none bg-cyan-600 border-0 cursor-pointer inline-block outline-none p-0 m-0 h-1/2 w-4 disabled:opacity-30 disabled:cursor-default",
{ "hover:bg-cyan-500": position !== 0 }
)}
disabled={position === 0}
title="Previous option"
onMouseDown={(e): void => this.shiftOption(e, nodeSelection, false)}
Expand All @@ -175,8 +178,11 @@ export class Tag extends React.Component<TagProps> {
</button>
<button
key={"TagNextButton_" + index}
className="appearance-none bg-cyan-600 border-0 cursor-pointer inline-block outline-none p-0 h-1/2 absolute top-1/2 w-4 disabled:opacity-30 disabled:cursor-default hover:bg-cyan-500"
disabled={position == subgroups.length - 1}
className={resolveClassNames(
"appearance-none bg-cyan-600 border-0 cursor-pointer inline-block outline-none p-0 m-0 h-1/2 w-4 disabled:opacity-30 disabled:cursor-default",
{ "hover:bg-cyan-500": position !== subgroups.length - 1 }
)}
disabled={position === subgroups.length - 1}
title="Next option"
onMouseDown={(e): void => this.shiftOption(e, nodeSelection, true)}
onMouseUp={(e): void => {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1672,7 +1672,7 @@ export class SmartNodeSelectorComponent extends React.Component<SmartNodeSelecto
</ul>
<div className="absolute right-2 top-1/2 -mt-3">
<button
className="appearance-none bg-cyan-600 rounded-full w-6 h-6 flex items-center justify-center hover:bg-cyan-500 text-white cursor-pointer"
className="appearance-none bg-cyan-600 rounded-full w-6 h-6 flex items-center justify-center hover:bg-cyan-500 text-white cursor-pointer disabled:hidden"
type="button"
title="Clear all"
onClick={this.clearAllTags}
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/lib/hooks/useElementBoundingRect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export function useElementBoundingRect(ref: React.RefObject<HTMLElement>): DOMRe

const resizeObserver = new ResizeObserver(handleResize);
window.addEventListener("resize", handleResize);
window.addEventListener("scroll", handleResize, true);

if (ref.current) {
handleResize();
Expand All @@ -22,6 +23,7 @@ export function useElementBoundingRect(ref: React.RefObject<HTMLElement>): DOMRe
return () => {
resizeObserver.disconnect();
window.removeEventListener("resize", handleResize);
window.removeEventListener("scroll", handleResize, true);
};
}, [ref]);

Expand Down