Skip to content

Commit 5d311cb

Browse files
tnagorratnagorra
committed
Add sticky position on mobile preview
- Change current tab on scenario on input change - Fix styling for info screen
1 parent 6ff2bca commit 5d311cb

File tree

6 files changed

+120
-98
lines changed

6 files changed

+120
-98
lines changed

‎manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function CustomOptionPreview(props: Props) {
2222

2323
return (
2424
<MobilePreview
25-
className={styles.optionPreview}
25+
className={styles.customOptionPreview}
2626
contentClassName={styles.content}
2727
heading={lookFor || '{look for}'}
2828
headingLabel="You are looking for:"

‎manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
.option-preview {
1+
.custom-option-preview {
2+
position: sticky;
3+
top: 0;
4+
25
.content {
36
display: flex;
47
flex-direction: column;

‎manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.information-preview {
2+
position: sticky;
3+
top: 0;
24
overflow: auto;
35

46
.content {

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,30 @@ export default function ScenarioPageInput(props: Props) {
126126
{},
127127
);
128128

129+
const handleInstructionFieldChange = React.useCallback<typeof onInstructionFieldChange>(
130+
(...args) => {
131+
setActiveInput('instructions');
132+
onInstructionFieldChange(...args);
133+
},
134+
[onInstructionFieldChange],
135+
);
136+
137+
const handleHintFieldChange = React.useCallback<typeof onHintFieldChange>(
138+
(...args) => {
139+
setActiveInput('hint');
140+
onHintFieldChange(...args);
141+
},
142+
[onHintFieldChange],
143+
);
144+
145+
const handleSuccessFieldChange = React.useCallback<typeof onSuccessFieldChange>(
146+
(...args) => {
147+
setActiveInput('success');
148+
onSuccessFieldChange(...args);
149+
},
150+
[onSuccessFieldChange],
151+
);
152+
129153
const error = getErrorObject(riskyError);
130154
const instructionsError = getErrorObject(error?.instructions);
131155
const hintError = getErrorObject(error?.hint);
@@ -160,15 +184,15 @@ export default function ScenarioPageInput(props: Props) {
160184
name={'title' as const}
161185
value={value.instructions?.title}
162186
label="Title"
163-
onChange={onInstructionFieldChange}
187+
onChange={handleInstructionFieldChange}
164188
error={instructionsError?.title}
165189
disabled={disabled}
166190
/>
167191
<TextInput
168192
name={'description' as const}
169193
value={value.instructions?.description}
170194
label="Description"
171-
onChange={onInstructionFieldChange}
195+
onChange={handleInstructionFieldChange}
172196
error={instructionsError?.description}
173197
disabled={disabled}
174198
/>
@@ -180,7 +204,7 @@ export default function ScenarioPageInput(props: Props) {
180204
options={iconList}
181205
keySelector={keySelector}
182206
labelSelector={labelSelector}
183-
onChange={onInstructionFieldChange}
207+
onChange={handleInstructionFieldChange}
184208
error={instructionsError?.icon}
185209
disabled={disabled}
186210
/>
@@ -194,15 +218,15 @@ export default function ScenarioPageInput(props: Props) {
194218
name={'title' as const}
195219
value={value.hint?.title}
196220
label="Title"
197-
onChange={onHintFieldChange}
221+
onChange={handleHintFieldChange}
198222
error={hintError?.title}
199223
disabled={disabled}
200224
/>
201225
<TextInput
202226
name={'description' as const}
203227
value={value.hint?.description}
204228
label="Description"
205-
onChange={onHintFieldChange}
229+
onChange={handleHintFieldChange}
206230
error={hintError?.description}
207231
disabled={disabled}
208232
/>
@@ -214,7 +238,7 @@ export default function ScenarioPageInput(props: Props) {
214238
options={iconList}
215239
keySelector={keySelector}
216240
labelSelector={labelSelector}
217-
onChange={onHintFieldChange}
241+
onChange={handleHintFieldChange}
218242
error={hintError?.icon}
219243
disabled={disabled}
220244
/>
@@ -228,15 +252,15 @@ export default function ScenarioPageInput(props: Props) {
228252
name={'title' as const}
229253
value={value.success?.title}
230254
label="Title"
231-
onChange={onSuccessFieldChange}
255+
onChange={handleSuccessFieldChange}
232256
error={successError?.title}
233257
disabled={disabled}
234258
/>
235259
<TextInput
236260
name={'description' as const}
237261
value={value.success?.description}
238262
label="Description"
239-
onChange={onSuccessFieldChange}
263+
onChange={handleSuccessFieldChange}
240264
error={successError?.description}
241265
disabled={disabled}
242266
/>
@@ -248,7 +272,7 @@ export default function ScenarioPageInput(props: Props) {
248272
options={iconList}
249273
keySelector={keySelector}
250274
labelSelector={labelSelector}
251-
onChange={onSuccessFieldChange}
275+
onChange={handleSuccessFieldChange}
252276
error={successError?.icon}
253277
disabled={disabled}
254278
/>

‎manager-dashboard/app/views/NewTutorial/index.tsx‎

Lines changed: 57 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -507,72 +507,70 @@ function NewTutorial(props: Props) {
507507
</Button>
508508
)}
509509
>
510+
<AlertBanner>
511+
<div className={styles.bannerContent}>
512+
<div className={styles.bannerText}>
513+
While creating options,
514+
please use the values as listed
515+
below for HOT Tasking Manager Geometries
516+
</div>
517+
<div className={styles.indicatorList}>
518+
<div className={styles.indicator}>
519+
0 = No
520+
</div>
521+
<div className={styles.indicator}>
522+
1 = Yes
523+
</div>
524+
<div className={styles.indicator}>
525+
2 = Maybe
526+
</div>
527+
<div className={styles.indicator}>
528+
3 = Bad Imagery
529+
</div>
530+
</div>
531+
</div>
532+
</AlertBanner>
510533
<NonFieldError
511534
error={optionsError}
512535
/>
513536
{(customOptions && customOptions.length > 0) ? (
514537
<div className={styles.customOptionContainer}>
515-
<AlertBanner>
516-
<div className={styles.bannerContent}>
517-
<div className={styles.bannerText}>
518-
While creating options,
519-
please use the values as listed
520-
below for HOT Tasking Manager Geometries
521-
</div>
522-
<div className={styles.indicatorList}>
523-
<div className={styles.indicator}>
524-
0 = No
525-
</div>
526-
<div className={styles.indicator}>
527-
1 = Yes
528-
</div>
529-
<div className={styles.indicator}>
530-
2 = Maybe
531-
</div>
532-
<div className={styles.indicator}>
533-
3 = bad
534-
</div>
535-
</div>
536-
</div>
537-
</AlertBanner>
538-
<div className={styles.customOptionContent}>
539-
<div className={styles.customOptionList}>
540-
{customOptions.map((option, index) => (
541-
<ExpandableContainer
538+
<div className={styles.customOptionList}>
539+
{customOptions.map((option, index) => (
540+
<ExpandableContainer
541+
key={option.optionId}
542+
header={option.title || `Option ${index + 1}`}
543+
openByDefault={index === customOptions.length - 1}
544+
actions={(
545+
<Button
546+
name={index}
547+
onClick={onOptionRemove}
548+
variant="action"
549+
title="Delete Option"
550+
disabled={
551+
submissionPending
552+
|| projectTypeEmpty
553+
}
554+
>
555+
<IoIosTrash />
556+
</Button>
557+
)}
558+
>
559+
<CustomOptionInput
542560
key={option.optionId}
543-
header={option.title || `Option ${index + 1}`}
544-
openByDefault={index === customOptions.length - 1}
545-
actions={(
546-
<Button
547-
name={index}
548-
onClick={onOptionRemove}
549-
variant="action"
550-
title="Delete Option"
551-
disabled={
552-
submissionPending
553-
|| projectTypeEmpty
554-
}
555-
>
556-
<IoIosTrash />
557-
</Button>
558-
)}
559-
>
560-
<CustomOptionInput
561-
key={option.optionId}
562-
value={option}
563-
index={index}
564-
onChange={setOptionValue}
565-
error={optionsError?.[option.optionId]}
566-
disabled={submissionPending || projectTypeEmpty}
567-
/>
568-
</ExpandableContainer>
569-
))}
570-
</div>
571-
<CustomOptionPreview
572-
value={customOptions}
573-
lookFor={value.lookFor}
574-
/>
561+
value={option}
562+
index={index}
563+
onChange={setOptionValue}
564+
error={optionsError?.[option.optionId]}
565+
disabled={submissionPending || projectTypeEmpty}
566+
/>
567+
</ExpandableContainer>
568+
))}
575569
</div>
570+
<CustomOptionPreview
571+
value={customOptions}
572+
lookFor={value.lookFor}
573+
/>
576574
</div>
577575
) : (
578576
<div>No options</div>

‎manager-dashboard/app/views/NewTutorial/styles.css‎

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,43 +20,38 @@
2020
gap: var(--spacing-medium);
2121
}
2222

23-
.custom-option-container {
23+
.banner-content {
2424
display: flex;
2525
flex-direction: column;
26-
gap: var(--spacing-large);
26+
gap: var(--spacing-medium);
27+
28+
.banner-text {
29+
color: var(--color-banner-text);
30+
font-size: var(--spacing-medium);
31+
}
2732

28-
.banner-content {
33+
.indicator-list {
2934
display: flex;
30-
flex-direction: column;
3135
gap: var(--spacing-medium);
32-
33-
.banner-text {
34-
color: var(--color-banner-text);
36+
37+
.indicator {
38+
border-radius: var(--radius-badge-border);
39+
background-color: var(--color-backdrop-light);
40+
padding: var(--spacing-small) var(--spacing-medium);
3541
font-size: var(--spacing-medium);
3642
}
37-
.indicator-list {
38-
display: flex;
39-
gap: var(--spacing-medium);
40-
41-
.indicator {
42-
border-radius: var(--radius-badge-border);
43-
background-color: var(--color-backdrop-light);
44-
padding: var(--spacing-small) var(--spacing-medium);
45-
font-size: var(--spacing-medium);
46-
}
47-
}
4843
}
49-
50-
.custom-option-content {
51-
display: flex;
52-
gap: var(--spacing-large);
44+
}
5345

54-
.custom-option-list {
55-
display: flex;
56-
flex-direction: column;
57-
flex-grow: 1;
58-
gap: var(--spacing-medium);
59-
}
46+
.custom-option-container {
47+
display: flex;
48+
gap: var(--spacing-large);
49+
50+
.custom-option-list {
51+
display: flex;
52+
flex-direction: column;
53+
flex-grow: 1;
54+
gap: var(--spacing-medium);
6055
}
6156
}
6257

0 commit comments

Comments
 (0)