tweak(ui): restore questions progress indicator
parent
81a61f8dbd
commit
b286c0ae3f
|
|
@ -233,6 +233,12 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
|
|||
setStore("editing", false)
|
||||
}
|
||||
|
||||
const jump = (tab: number) => {
|
||||
if (store.sending) return
|
||||
setStore("tab", tab)
|
||||
setStore("editing", false)
|
||||
}
|
||||
|
||||
return (
|
||||
<DockPrompt
|
||||
kind="question"
|
||||
|
|
@ -252,7 +258,32 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
|
|||
}}
|
||||
>
|
||||
<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
|
||||
data-action="session-question-toggle-button"
|
||||
icon="chevron-down"
|
||||
|
|
|
|||
|
|
@ -808,6 +808,49 @@
|
|||
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"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
Loading…
Reference in New Issue