Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit56ee5d8

Browse files
authored
fix: update dynamic params styles (#17489)
1. increase form width and adjust form field width#17471 2. Move slider value display as its currently broken for long parametertitles and descriptions3. increase the height of the slider4. automatically increase the height of the textarea as the user types#17472
1 parent823d3ea commit56ee5d8

File tree

3 files changed

+34
-26
lines changed

3 files changed

+34
-26
lines changed

‎site/src/components/Slider/Slider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const Slider = React.forwardRef<
2020
)}
2121
{...props}
2222
>
23-
<SliderPrimitive.TrackclassName="relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">
23+
<SliderPrimitive.TrackclassName="relative h-2 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">
2424
<SliderPrimitive.RangeclassName="absolute h-full bg-content-primary"/>
2525
</SliderPrimitive.Track>
2626
<SliderPrimitive.Thumb

‎site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,14 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
5757
data-testid={`parameter-field-${parameter.name}`}
5858
>
5959
<ParameterLabelparameter={parameter}isPreset={isPreset}/>
60-
<ParameterField
61-
parameter={parameter}
62-
onChange={onChange}
63-
disabled={disabled}
64-
id={id}
65-
/>
60+
<divclassName="max-w-lg">
61+
<ParameterField
62+
parameter={parameter}
63+
onChange={onChange}
64+
disabled={disabled}
65+
id={id}
66+
/>
67+
</div>
6668
{parameter.diagnostics.length>0&&(
6769
<ParameterDiagnosticsdiagnostics={parameter.diagnostics}/>
6870
)}
@@ -93,7 +95,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
9395
</span>
9496
)}
9597

96-
<divclassName="flex flex-col w-full">
98+
<divclassName="flex flex-col w-full gap-1">
9799
<LabelclassName="flex gap-2 flex-wrap text-sm font-medium">
98100
{displayName}
99101

@@ -132,11 +134,6 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
132134
</Tooltip>
133135
</TooltipProvider>
134136
)}
135-
{parameter.form_type==="slider"&&(
136-
<outputclassName="ml-auto font-semibold">
137-
{parameter.value.value}
138-
</output>
139-
)}
140137
</Label>
141138

142139
{hasDescription&&(
@@ -296,25 +293,36 @@ const ParameterField: FC<ParameterFieldProps> = ({
296293

297294
case"slider":
298295
return(
299-
<Slider
300-
className="mt-2"
301-
defaultValue={[
302-
Number(
303-
parameter.default_value.valid ?parameter.default_value.value :0,
304-
),
305-
]}
306-
onValueChange={([value])=>onChange(value.toString())}
307-
min={parameter.validations[0]?.validation_min??0}
308-
max={parameter.validations[0]?.validation_max??100}
309-
disabled={disabled}
310-
/>
296+
<divclassName="flex flex-row items-baseline gap-3">
297+
<Slider
298+
className="mt-2"
299+
defaultValue={[
300+
Number(
301+
parameter.default_value.valid
302+
?parameter.default_value.value
303+
:0,
304+
),
305+
]}
306+
onValueChange={([value])=>onChange(value.toString())}
307+
min={parameter.validations[0]?.validation_min??0}
308+
max={parameter.validations[0]?.validation_max??100}
309+
disabled={disabled}
310+
/>
311+
<spanclassName="w-4 font-medium">{parameter.value.value}</span>
312+
</div>
311313
);
312314

313315
case"textarea":
314316
return(
315317
<Textarea
318+
className="max-w-2xl"
316319
defaultValue={defaultValue}
317320
onChange={(e)=>onChange(e.target.value)}
321+
onInput={(e)=>{
322+
consttarget=e.currentTarget;
323+
target.style.maxHeight="700px";
324+
target.style.height=`${target.scrollHeight}px`;
325+
}}
318326
disabled={disabled}
319327
placeholder={
320328
(parameter.stylingas{placeholder?:string})?.placeholder

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ export const CreateWorkspacePageViewExperimental: FC<
259259
Go back
260260
</button>
261261
</div>
262-
<divclassName="flex flex-col gap-6 max-w-screen-sm mx-auto">
262+
<divclassName="flex flex-col gap-6 max-w-screen-md mx-auto">
263263
<headerclassName="flex flex-col items-start gap-2 mt-10">
264264
<divclassName="flex items-center gap-2">
265265
<Avatar

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp