tweak(ui): restore questions progress indicator
parent
81a61f8dbd
commit
b286c0ae3f
|
|
@ -233,6 +233,12 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
|
||||||
setStore("editing", false)
|
setStore("editing", false)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const jump = (tab: number) => {
|
||||||
|
if (store.sending) return
|
||||||
|
setStore("tab", tab)
|
||||||
|
setStore("editing", false)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DockPrompt
|
<DockPrompt
|
||||||
kind="question"
|
kind="question"
|
||||||
|
|
@ -252,7 +258,32 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div data-slot="question-header-title">{summary()}</div>
|
<div data-slot="question-header-title">{summary()}</div>
|
||||||
<div class="ml-auto">
|
<div data-slot="question-progress" class="ml-auto">
|
||||||
|
<For each={questions()}>
|
||||||
|
{(_, i) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-slot="question-progress-segment"
|
||||||
|
data-active={i() === store.tab}
|
||||||
|
data-answered={
|
||||||
|
(store.answers[i()]?.length ?? 0) > 0 ||
|
||||||
|
(store.customOn[i()] === true && (store.custom[i()] ?? "").trim().length > 0)
|
||||||
|
}
|
||||||
|
disabled={store.sending}
|
||||||
|
onMouseDown={(event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
}}
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation()
|
||||||
|
jump(i())
|
||||||
|
}}
|
||||||
|
aria-label={`${language.t("ui.tool.questions")} ${i() + 1}`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<IconButton
|
<IconButton
|
||||||
data-action="session-question-toggle-button"
|
data-action="session-question-toggle-button"
|
||||||
icon="chevron-down"
|
icon="chevron-down"
|
||||||
|
|
|
||||||
|
|
@ -808,6 +808,49 @@
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-slot="question-progress"] {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-slot="question-progress-segment"] {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 999px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
touch-action: manipulation;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
width: 16px;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background-color: var(--icon-weak-base);
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-active="true"]::after {
|
||||||
|
background-color: var(--icon-strong-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-answered="true"]::after {
|
||||||
|
background-color: var(--icon-interactive-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-slot="question-content"] {
|
[data-slot="question-content"] {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue