feat(chat): thicker, grabbable scrollbar for the message thread
The chat message thread used the global 6px scrollbar with a ~6% grab, which is thin and hard to grab. Push a 12px scrollbar with a clearly-visible, theme-adaptive grab (OnSurface at 55/95/135 alpha for idle/hover/active) for the ##ChatMessages child only, popped after EndChild. No change to the global scrollbar or other scroll regions. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1487,6 +1487,13 @@ void RenderChatTab(App* app)
|
|||||||
const float origSpacingX = ImGui::GetStyle().ItemSpacing.x;
|
const float origSpacingX = ImGui::GetStyle().ItemSpacing.x;
|
||||||
ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(4.0f * dp, 8.0f * dp));
|
ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(4.0f * dp, 8.0f * dp));
|
||||||
ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(origSpacingX, 0.0f));
|
ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(origSpacingX, 0.0f));
|
||||||
|
// Thicker, clearly-visible scrollbar for the message thread: the global one is a thin 6px with a
|
||||||
|
// ~6% grab that's hard to see and grab. Pushed for this child only (popped after EndChild below).
|
||||||
|
ImGui::PushStyleVar(ImGuiStyleVar_ScrollbarSize, 12.0f * dp);
|
||||||
|
ImGui::PushStyleVar(ImGuiStyleVar_ScrollbarRounding, 6.0f * dp);
|
||||||
|
ImGui::PushStyleColor(ImGuiCol_ScrollbarGrab, material::WithAlpha(material::OnSurface(), 55));
|
||||||
|
ImGui::PushStyleColor(ImGuiCol_ScrollbarGrabHovered, material::WithAlpha(material::OnSurface(), 95));
|
||||||
|
ImGui::PushStyleColor(ImGuiCol_ScrollbarGrabActive, material::WithAlpha(material::OnSurface(), 135));
|
||||||
ImGui::BeginChild("##ChatMessages", ImVec2(0, ImGui::GetContentRegionAvail().y),
|
ImGui::BeginChild("##ChatMessages", ImVec2(0, ImGui::GetContentRegionAvail().y),
|
||||||
ImGuiChildFlags_AlwaysUseWindowPadding, ImGuiWindowFlags_NoScrollWithMouse);
|
ImGuiChildFlags_AlwaysUseWindowPadding, ImGuiWindowFlags_NoScrollWithMouse);
|
||||||
material::ApplySmoothScroll(); // smooth wheel scroll; syncs with the auto-scroll-to-bottom below
|
material::ApplySmoothScroll(); // smooth wheel scroll; syncs with the auto-scroll-to-bottom below
|
||||||
@@ -1951,7 +1958,8 @@ void RenderChatTab(App* app)
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
ImGui::EndChild();
|
ImGui::EndChild();
|
||||||
ImGui::PopStyleVar(2); // ##ChatMessages WindowPadding + zeroed vertical ItemSpacing
|
ImGui::PopStyleColor(3); // ScrollbarGrab + Hovered + Active
|
||||||
|
ImGui::PopStyleVar(4); // WindowPadding + ItemSpacing + ScrollbarSize + ScrollbarRounding
|
||||||
// Larger-messages tier 3: while a big incoming message is still arriving across transactions,
|
// Larger-messages tier 3: while a big incoming message is still arriving across transactions,
|
||||||
// show a subtle centred progress line (it surfaces as an ordinary bubble once every part lands).
|
// show a subtle centred progress line (it surfaces as an ordinary bubble once every part lands).
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user