Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

make dropzone for available items bigger

This commit is contained in:
Nate Kelley 2025-04-11 14:00:47 -06:00
parent 1efc0653d4
commit f32d88a206
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
8 changed files with 39 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/StylingLabel.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import { Text } from '@/components/ui/typography';
import { cn } from '@/lib/classMerge';
interface StylingLabelProps {
label: string;
@ -12,7 +13,7 @@ interface StylingLabelProps {
export const StylingLabel = React.forwardRef<HTMLDivElement, StylingLabelProps>(
({ label, labelExtra, children, className = '', id }, ref) => {
return (
<div className={`flex flex-col space-y-2.5 ${className}`} ref={ref} id={id}>
<div className={cn('flex flex-col space-y-2.5', className)} ref={ref} id={id}>
<div className="flex h-6 items-center justify-between">
<Text size="sm" variant="secondary">
{label}

6
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx
View File

@ -96,8 +96,10 @@ export const MetricStylingApp: React.FC<{
setSegment={setSegment}
selectedChartType={selectedChartType}
/>
<ScrollArea className="">
{
//this crazy css selector is so that the available section has a large dropzone
}
<ScrollArea className="h-full [&>div>div]:h-full!">
{segment === MetricStylingAppSegments.VISUALIZE && (
<StylingAppVisualize
className="px-4 pt-3"

2
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxis.tsx
View File

@ -59,7 +59,6 @@ export const SelectAxis: React.FC<
}
return (
<div id="select-axis-container">
<SelectAxisProvider
{...props}
selectedAxis={selectedAxis}
@ -67,7 +66,6 @@ export const SelectAxis: React.FC<
columnMetadata={columnMetadata}>
<SelectAxisDropzones items={items} dropZones={dropZones} onChange={onChange} />
</SelectAxisProvider>
</div>
);
});
SelectAxis.displayName = 'SelectAxis';

4
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/SelectAxisDropdownContent.tsx
View File

@ -257,7 +257,7 @@ const ColumnSettingComponent: React.FC<{
return (
<>
<div className={`${className} flex w-full flex-col space-y-3 overflow-hidden p-3`}>
<div className={`${className} swag2 flex w-full flex-col space-y-3 overflow-hidden p-3`}>
{EnabledComponentsLoop.map(({ enabled, key, Component }) => {
return <React.Fragment key={key}>{Component}</React.Fragment>;
})}
@ -429,7 +429,7 @@ const LabelSettings: React.FC<{
return (
<ErrorBoundary>
<div className={`${className} flex w-full flex-col space-y-3 overflow-hidden p-3`}>
<div className={`${className} swag flex w-full flex-col space-y-3 overflow-hidden p-3`}>
{ComponentsLoop.map(({ key, Component }) => {
return <React.Fragment key={key}>{Component}</React.Fragment>;
})}

8
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisAvailableItemsList.tsx
View File

@ -28,8 +28,11 @@ export const AvailableItemsList: React.FC<AvailableItemsListProps> = ({
(isOver || isActive) && activeZone !== SelectAxisContainerId.Available;
return (
<div ref={setNodeRef}>
<StylingLabel id="available-items-list" label="Available">
<StylingLabel
id="available-items-list"
label="Available"
className="mb-4 h-full"
ref={setNodeRef}>
<div
className={cn(
'mb-1',
@ -44,6 +47,5 @@ export const AvailableItemsList: React.FC<AvailableItemsListProps> = ({
))}
</div>
</StylingLabel>
</div>
);
};

2
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisDropzones.tsx
View File

@ -53,7 +53,7 @@ export const SelectAxisDropzones: React.FC<{
onDragStart={handleDragStart}
onDragOver={handleDragOver}
onDragEnd={handleDragEnd}>
<div className="flex flex-col gap-4">
<div className="mb-2 flex h-full flex-col gap-4">
{dropZones.map((zone) => (
<SelectAxisDropZone
key={zone.id}

5
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingAppVisualize.tsx
View File

@ -14,6 +14,7 @@ import {
import { ISelectAxisContext } from './SelectAxis/useSelectAxisContext';
import { StylingMetric } from './StylingMetric';
import { useMount, useUnmount } from '@/hooks';
import { cn } from '@/lib/classMerge';
export const StylingAppVisualize: React.FC<
{
@ -47,7 +48,7 @@ export const StylingAppVisualize: React.FC<
const isMetricChart = selectedChartType === ChartType.Metric;
return (
<div className={`flex w-full flex-col space-y-3`}>
<div className={`flex h-full w-full flex-col space-y-3`}>
<div className={className}>
<StylingLabel label="Chart type">
<SelectChartType
@ -64,7 +65,7 @@ export const StylingAppVisualize: React.FC<
</div>
{!isMetricChart && (
<div className={className}>
<div className={cn(className, 'h-full')}>
<SelectAxis {...props} />
</div>
)}