WHC
3fd039cb51
The window drew its icons with unicode glyphs -- a clip emoji for attach, a
gear, a hamburger, a chevron, a multiplication sign for delete. Those render
in whichever font happens to cover them (colour emoji in a grey toolbar) and
are a box on a machine without that glyph. They now come from the icon theme,
the way every other desktop app gets them.
Icons
- app/src/ui/ThemeIcons.{h,cpp}: a QQuickImageProvider for
image://csttheme/<name>?color=%23rrggbb -- QIcon::fromTheme() in the
desktop's theme (whatever the platform theme set, else breeze-dark, breeze,
hicolor), tinted with QPainter's SourceIn and rasterised at the requested
size and the screen's device pixel ratio. Qt only builds its theme search
paths from XDG once a theme name is set, so the provider fills them itself
(GenericDataLocation/icons, ~/.icons and, on NixOS,
/run/current-system/sw/share/icons, for a shell started outside the desktop
session). An unknown name yields a null image, which QML reports as
Image.Error.
- app/qml/ThemeIcon.qml: the one component that asks for an icon. Every use
still names the old character as `glyph:`, so a host with no icon theme
degrades to exactly what the window looked like before instead of going
blank. installThemeIcons() is called by main() and by --uitest, so the test
loads the same icons the app does.
- Replaced: nav (application-menu), settings (settings-configure), attach
(mail-attachment), copy (edit-copy), session delete (edit-delete), new
session (list-add), expand/collapse (arrow-right/arrow-down), jump to the end
(go-down), the plan checklist (task-complete/box). A tool card also shows
what kind of tool ran -- Theme.toolIcon(): pencil for patch/write, text page
for read, folder for list/glob, magnifier for grep, braces for a shell,
globe for web, list for a plan. Toolbar icons are 22 px (Breeze's toolbar
size), card and row icons 14-16 px.
Colours (the "some text is unreadable" part)
- textFaint #6d757b -> #8d959c: ~3.4:1 -> ~5:1 on the card fill. It carries
hints, provider URLs, session metadata and placeholders, so it is text, not
decoration.
- A selected provider row and the open session row write on the accent fill;
they now use accentText / accentTextDim / okOnAccent instead of faint grey
and green on blue (named "accentText", not "onAccent": QML reads any `onFoo`
property as a signal handler and refuses the assignment).
- The filled buttons (Send, Use this) take their ink from Theme.accentInk.
Composer
- The frame is one Theme.pad around its column on every side (anchors.fill,
implicitHeight + 2*pad). With the top margin alone the last row -- the clip
and Send -- hung over the lower border, which is what put the clip on the
frame instead of inside it.
app/README.md gains an "Icons, colors" section (the provider, why the theme
search paths are filled by hand, the qtsvg requirement for rasterising Breeze,
the tool map, and the contrast rules).
Verified: --uitest 52/52, --selftest OK, and the 0.8.14 window relaunched in
the Plasma session (no QML warnings).
Version 0.8.14.
mode = coding
169 lines
6.2 KiB
QML
169 lines
6.2 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
|
|
// A tool call: what ran, whether it is still running, and what came back.
|
|
// Long output stays folded until asked for, diff lines are colored.
|
|
Rectangle {
|
|
id: card
|
|
property string name: ""
|
|
property string state: "pending" // pending | ready | running | done | denied
|
|
// | unfinished (replayed, no result)
|
|
property string detail: ""
|
|
property string output: ""
|
|
property int exitCode: 0
|
|
property bool hasResult: false
|
|
property bool expanded: false
|
|
|
|
readonly property bool running: state === "pending" || state === "ready" || state === "running"
|
|
readonly property color stateColor: state === "denied" ? Theme.err
|
|
: state === "unfinished" ? Theme.textFaint
|
|
: running ? Theme.warn
|
|
: hasResult && exitCode !== 0 ? Theme.err
|
|
: Theme.ok
|
|
readonly property string stateText: state === "pending" ? "reading"
|
|
: state === "ready" ? "queued"
|
|
: state === "running" ? "running"
|
|
: state === "denied" ? "denied"
|
|
: state === "unfinished" ? "no result"
|
|
: hasResult && exitCode !== 0 ? "failed" : "done"
|
|
|
|
function lines() {
|
|
const all = output.split("\n")
|
|
return all.length > 500 ? all.slice(0, 500).concat(["… " + (all.length - 500) + " more lines"]) : all
|
|
}
|
|
|
|
radius: Theme.radius
|
|
color: Theme.surfaceAlt
|
|
border.width: 1
|
|
border.color: expanded ? Theme.stateColor : Theme.border
|
|
implicitHeight: layout.implicitHeight + Theme.pad
|
|
|
|
ColumnLayout {
|
|
id: layout
|
|
anchors {
|
|
left: parent.left
|
|
right: parent.right
|
|
top: parent.top
|
|
margins: Theme.pad
|
|
}
|
|
spacing: 6
|
|
|
|
RowLayout {
|
|
spacing: Theme.gap
|
|
BusyIndicator {
|
|
visible: card.running
|
|
running: card.running
|
|
implicitWidth: 16
|
|
implicitHeight: 16
|
|
Layout.alignment: Qt.AlignVCenter
|
|
}
|
|
Rectangle {
|
|
visible: !card.running
|
|
Layout.alignment: Qt.AlignVCenter
|
|
width: 6
|
|
height: 6
|
|
radius: 3
|
|
color: card.stateColor
|
|
}
|
|
/* What kind of tool this was, from the icon theme (Theme.toolIcon
|
|
* maps the engine's names onto Breeze ones). */
|
|
ThemeIcon {
|
|
Layout.alignment: Qt.AlignVCenter
|
|
name: Theme.toolIcon(card.name)
|
|
size: 16
|
|
color: Theme.textDim
|
|
}
|
|
Text {
|
|
text: card.name
|
|
color: Theme.text
|
|
font.family: Theme.mono
|
|
font.pixelSize: Theme.monoSize
|
|
font.bold: true
|
|
}
|
|
Rectangle {
|
|
Layout.alignment: Qt.AlignVCenter
|
|
radius: Theme.radiusSm
|
|
color: "transparent"
|
|
border.width: 1
|
|
border.color: card.stateColor
|
|
implicitWidth: chip.implicitWidth + 10
|
|
implicitHeight: chip.implicitHeight + 2
|
|
Text {
|
|
id: chip
|
|
anchors.centerIn: parent
|
|
/* "no result" is not an outcome: no exit code belongs on it. */
|
|
text: card.stateText + (card.hasResult && card.state !== "unfinished"
|
|
? " · exit " + card.exitCode : "")
|
|
color: card.stateColor
|
|
font.pixelSize: Theme.smallSize
|
|
}
|
|
}
|
|
Text {
|
|
Layout.fillWidth: true
|
|
elide: Text.ElideRight
|
|
text: card.detail.replace(/\s+/g, " ").trim()
|
|
color: Theme.textFaint
|
|
font.family: Theme.mono
|
|
font.pixelSize: Theme.smallSize
|
|
}
|
|
ToolButton {
|
|
implicitWidth: 26
|
|
implicitHeight: 22
|
|
visible: card.output.length > 0
|
|
contentItem: ThemeIcon {
|
|
name: card.expanded ? "arrow-down" : "arrow-right"
|
|
glyph: card.expanded ? "▾" : "▸"
|
|
size: 14
|
|
color: parent.hovered ? Theme.text : Theme.textDim
|
|
}
|
|
background: Rectangle {
|
|
radius: Theme.radiusSm
|
|
color: parent.hovered ? Theme.surfaceHi : "transparent"
|
|
}
|
|
onClicked: card.expanded = !card.expanded
|
|
}
|
|
}
|
|
|
|
// Folded view: the first line of the result, so a done card still says
|
|
// something without being opened.
|
|
Text {
|
|
Layout.fillWidth: true
|
|
visible: !card.expanded && card.output.length > 0
|
|
text: {
|
|
const l = card.output.split("\n")
|
|
return l[0] + (l.length > 1 ? " …" : "")
|
|
}
|
|
elide: Text.ElideRight
|
|
color: Theme.textFaint
|
|
font.family: Theme.mono
|
|
font.pixelSize: Theme.smallSize
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
visible: card.expanded && card.output.length > 0
|
|
spacing: 0
|
|
Repeater {
|
|
model: card.expanded ? card.lines() : []
|
|
Text {
|
|
Layout.fillWidth: true
|
|
text: modelData.length ? modelData : " "
|
|
color: Theme.lineColor(modelData)
|
|
font.family: Theme.mono
|
|
font.pixelSize: Theme.monoSize
|
|
wrapMode: Text.NoWrap
|
|
textFormat: Text.PlainText
|
|
}
|
|
}
|
|
Text {
|
|
Layout.topMargin: 4
|
|
visible: card.output.split("\n").length > 500
|
|
text: "output truncated for the view"
|
|
color: Theme.textFaint
|
|
font.pixelSize: Theme.smallSize
|
|
}
|
|
}
|
|
}
|
|
}
|