fix(ui): assistant takes the page's own colours and name; collapsed rail stops sliding
The panel still said "Trợ lý App". I reported that name as changed several turns ago — I had added help_agent.badge for the launcher pill and never touched help_agent.title, so the panel header kept the old name in all three languages. It is "AI Assistant" now, as the audit page names it. Colours were invented rather than read. docs/ui-audit.html draws the assistant in a fixed teal — .fab background #E6F6F4, border #7FD0C4, .spark #0F9B8A, pill text #0F6E62 — and the app was using the theme accent instead. The dot, the hover pill, the edge tab and the sparkle now use those values, so the floating assistant is one recognisable object rather than something that changes colour with the theme. The panel header also shows the sparkle instead of the app's own icon.png, which is what made the header look unrelated to the dot that opens it. Collapsed rail: the nav tree kept sizing its column to the widest label, so at 54px it was ~100px wide inside a 66px viewport and grew a horizontal scrollbar — which slid the icons off the x they hold while the rail is open. The column now stretches to the viewport and horizontal scrolling is off; the first item's x is 0 in both states, measured. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -448,6 +448,13 @@ class MainWindow(QMainWindow):
|
||||
tree.setIndentation(0)
|
||||
tree.setRootIsDecorated(False)
|
||||
tree.setUniformRowHeights(True)
|
||||
# The column follows the viewport instead of the widest label. Left
|
||||
# to size itself it stayed ~100px wide inside the 54px collapsed
|
||||
# rail, so a horizontal scrollbar appeared and slid the icons out of
|
||||
# the position they hold while the rail is open.
|
||||
from PySide6.QtWidgets import QHeaderView
|
||||
tree.header().setSectionResizeMode(0, QHeaderView.Stretch)
|
||||
tree.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
|
||||
return tree
|
||||
|
||||
def _nav_rows(self):
|
||||
|
||||
@@ -486,7 +486,9 @@ STRINGS: Dict[str, Dict[str, str]] = {
|
||||
"chat.assistant": {"en": "Assistant", "ja": "アシスタント", "vi": "Assistant"},
|
||||
"chat.error": {"en": "Error", "ja": "エラー", "vi": "Lỗi"},
|
||||
"help_agent.title": {
|
||||
"en": "App Assistant", "ja": "アプリアシスタント", "vi": "Trợ lý App"},
|
||||
# The audit page names this AI Assistant, and keeps it the same in every
|
||||
# language — it is a product name, not a description.
|
||||
"en": "AI Assistant", "ja": "AI Assistant", "vi": "AI Assistant"},
|
||||
"help_agent.greeting": {
|
||||
"en": "Hello {name}, have a great working day! How can I help you use the app?",
|
||||
"ja": "こんにちは {name} さん、良い一日を!アプリの使い方について何かお手伝いできますか?",
|
||||
|
||||
+18
-11
@@ -42,6 +42,12 @@ _PILL_PAD = 12 # extra width for the label when hovered
|
||||
_TAB_W, _TAB_H = 28, 48 # the "show" tab when hidden at the edge (was 16 wide)
|
||||
_PANEL_W, _PANEL_H = 340, 460 # expanded chat panel size
|
||||
|
||||
# Straight from docs/ui-audit.html (.wf .fab / .fabpill / .spark): the
|
||||
# assistant is teal, not the app accent, and the same in both themes —
|
||||
# it is one recognisable object floating over every screen.
|
||||
_TEAL_BG, _TEAL_LINE = "#E6F6F4", "#7FD0C4"
|
||||
_TEAL_TEXT, _TEAL_SPARK = "#0F6E62", "#0F9B8A"
|
||||
|
||||
# The three states the floating assistant cycles through.
|
||||
_HIDDEN, _LAUNCHER_ST, _PANEL = "hidden", "launcher", "panel"
|
||||
|
||||
@@ -140,8 +146,8 @@ class HelpAgentWidget(QWidget):
|
||||
self._pal = self._compute_palette()
|
||||
self._apply_style()
|
||||
muted = self._pal.text_muted
|
||||
self.edge_tab.setIcon(icon("chevron-left", color=muted))
|
||||
self.launcher.setIcon(icon("sparkle", size=_DOT_ICON, color=self._pal.accent))
|
||||
self.edge_tab.setIcon(icon("chevron-left", color=_TEAL_TEXT))
|
||||
self.launcher.setIcon(icon("sparkle", size=_DOT_ICON, color=_TEAL_SPARK))
|
||||
self.min_btn.setIcon(icon("minus", color=muted))
|
||||
self._render()
|
||||
|
||||
@@ -154,16 +160,16 @@ class HelpAgentWidget(QWidget):
|
||||
self.setStyleSheet(f"""
|
||||
/* Closed launcher: a {_DOT}px dot. `pill` flips to true on hover, when
|
||||
the label comes out and the shape stretches to a rounded bar. */
|
||||
#helpLauncher {{ background: {p.surface}; border: 1px solid {p.border};
|
||||
border-radius: {_DOT // 2}px; color: {p.text}; font-weight: 600;
|
||||
#helpLauncher {{ background: {_TEAL_BG}; border: 1px solid {_TEAL_LINE};
|
||||
border-radius: {_DOT // 2}px; color: {_TEAL_TEXT}; font-weight: 700;
|
||||
font-size: 12px; padding: 0; text-align: center; }}
|
||||
#helpLauncher[pill="true"] {{ text-align: left; padding-left: 6px; }}
|
||||
#helpLauncher:hover {{ background: {p.hover}; border-color: {p.border_strong}; }}
|
||||
#helpLauncher:focus {{ border: 1px solid {p.focus_ring}; }}
|
||||
#helpEdgeTab {{ background: {p.surface}; border: 1px solid {p.border};
|
||||
#helpLauncher:hover {{ background: #D5EFEA; border-color: {_TEAL_SPARK}; }}
|
||||
#helpLauncher:focus {{ border: 1px solid {_TEAL_SPARK}; }}
|
||||
#helpEdgeTab {{ background: {_TEAL_BG}; border: 1px solid {_TEAL_LINE};
|
||||
border-right: none; border-top-left-radius: {r}px;
|
||||
border-bottom-left-radius: {r}px; }}
|
||||
#helpEdgeTab:hover {{ background: {p.hover}; }}
|
||||
#helpEdgeTab:hover {{ background: #D5EFEA; }}
|
||||
#helpPanel {{ background: {p.surface}; border: 1px solid {p.border};
|
||||
border-radius: {rl}px; color: {p.text}; }}
|
||||
#helpHeader {{ background: {p.surface}; border-bottom: 1px solid {p.border};
|
||||
@@ -196,7 +202,7 @@ class HelpAgentWidget(QWidget):
|
||||
# assistant back (chevron points left = "slide out").
|
||||
self.edge_tab = QPushButton(self)
|
||||
self.edge_tab.setObjectName("helpEdgeTab")
|
||||
self.edge_tab.setIcon(icon("chevron-left", color=self._pal.text_muted))
|
||||
self.edge_tab.setIcon(icon("chevron-left", color=_TEAL_TEXT))
|
||||
self.edge_tab.setCursor(Qt.PointingHandCursor)
|
||||
self.edge_tab.setToolTip(tr("help_agent.show_tooltip"))
|
||||
self.edge_tab.clicked.connect(self._show_launcher)
|
||||
@@ -207,7 +213,7 @@ class HelpAgentWidget(QWidget):
|
||||
# is gone — hiding to the edge is now a line in the panel's ⋯ menu.
|
||||
self.launcher = _HoverPill(self)
|
||||
self.launcher.setObjectName("helpLauncher")
|
||||
self.launcher.setIcon(icon("sparkle", size=_DOT_ICON, color=self._pal.accent))
|
||||
self.launcher.setIcon(icon("sparkle", size=_DOT_ICON, color=_TEAL_SPARK))
|
||||
self.launcher.setCursor(Qt.PointingHandCursor)
|
||||
self.launcher.setToolTip(tr("help_agent.open_tooltip"))
|
||||
self.launcher.clicked.connect(self._expand)
|
||||
@@ -226,7 +232,8 @@ class HelpAgentWidget(QWidget):
|
||||
hb = QHBoxLayout(header)
|
||||
hb.setContentsMargins(12, 8, 8, 8)
|
||||
self.title_icon = QLabel(header)
|
||||
self.title_icon.setPixmap(_app_icon().pixmap(20, 20))
|
||||
self.title_icon.setPixmap(
|
||||
icon("sparkle", size=16, color=_TEAL_SPARK).pixmap(16, 16))
|
||||
hb.addWidget(self.title_icon)
|
||||
self.title = QLabel(tr("help_agent.title"), header)
|
||||
self.title.setObjectName("helpTitle")
|
||||
|
||||
Reference in New Issue
Block a user