248 lines
8.5 KiB
QML
248 lines
8.5 KiB
QML
// One GNOME Online Accounts account: a line you can read, unfolding into the
|
|
// services it lends to the rest of the desktop.
|
|
//
|
|
// Built like InstalledAppRow rather than out of SettingRow, because the head
|
|
// carries the provider's own icon on the left and SettingRow's only icon slot
|
|
// is a mono glyph. What unfolds is small -- a toggle per service and a removal
|
|
// -- but it is per-account state, and four accounts each showing four toggles
|
|
// was most of a screen of switches with no way to tell which belonged to whom.
|
|
//
|
|
// Nothing here writes. Every control leaves through a signal so the page owns
|
|
// the service calls, which keeps the removal confirmation one piece of page
|
|
// state instead of something each row remembers for itself.
|
|
|
|
import QtQuick
|
|
import Quickshell
|
|
import qs.config
|
|
import qs.widgets
|
|
|
|
Column {
|
|
id: root
|
|
|
|
// { path, provider, providerName, providerIcons, identity, needsAttention,
|
|
// services: [{ key, label, enabled }] }
|
|
required property var account
|
|
|
|
property bool expanded: false
|
|
property bool busy: false
|
|
property bool confirmingRemoval: false
|
|
property bool divider: true
|
|
|
|
// The words on the re-authorisation button come from the page, because the
|
|
// page is what that button leads to: it is the one hand-off to GNOME's own
|
|
// dialog, and the sentence and the call belong together rather than one of
|
|
// them living out here. Left empty the button does not appear at all.
|
|
property string signInAction: ""
|
|
|
|
signal activated
|
|
signal serviceToggled(key: string, enabled: bool)
|
|
signal removeArmed
|
|
signal removeCancelled
|
|
signal removeConfirmed
|
|
signal signInAgainRequested
|
|
|
|
readonly property bool needsAttention: root.account?.needsAttention === true
|
|
readonly property string providerName: String(root.account?.providerName ?? "")
|
|
readonly property string identity: String(root.account?.identity ?? "")
|
|
readonly property var services: root.account?.services ?? []
|
|
|
|
// GOA hands back a preference-ordered chain; this walks it and takes the
|
|
// first name the active icon theme actually has. Taking the first blindly,
|
|
// or the last as a fallback, both looked right and were not: on Adwaita the
|
|
// tail of these chains ("mail", "goa-symbolic") does not exist, so a miss
|
|
// would have rendered nothing at all.
|
|
readonly property string iconName: {
|
|
const chain = root.account?.providerIcons ?? [];
|
|
for (const name of chain) {
|
|
if (Quickshell.iconPath(String(name), true) !== "")
|
|
return String(name);
|
|
}
|
|
return "";
|
|
}
|
|
|
|
width: parent ? parent.width : 620
|
|
spacing: 0
|
|
|
|
Item {
|
|
id: head
|
|
|
|
width: parent.width
|
|
implicitHeight: Math.max(56, copy.implicitHeight + 20)
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
anchors.bottomMargin: 1
|
|
radius: 9
|
|
z: -1
|
|
visible: headHover.hovered
|
|
color: Theme.alpha(Theme.fg, 0.05)
|
|
border.width: 0
|
|
}
|
|
|
|
Rectangle {
|
|
id: tile
|
|
|
|
anchors.left: parent.left
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 32
|
|
height: 32
|
|
radius: 9
|
|
color: Theme.alpha(Theme.fg, 0.07)
|
|
border.width: 0
|
|
|
|
ThemedIcon {
|
|
anchors.centerIn: parent
|
|
icon: root.iconName
|
|
iconFallback: "avatar-default-symbolic"
|
|
tint: root.needsAttention ? Theme.warn : Theme.fg
|
|
size: 19
|
|
}
|
|
}
|
|
|
|
Column {
|
|
id: copy
|
|
|
|
anchors.left: tile.right
|
|
anchors.leftMargin: 12
|
|
anchors.right: trailing.left
|
|
anchors.rightMargin: 16
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: 2
|
|
|
|
Text {
|
|
width: parent.width
|
|
text: root.identity !== "" ? root.identity : root.providerName
|
|
color: Theme.fg
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSize
|
|
font.weight: Font.Medium
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
Text {
|
|
width: parent.width
|
|
text: root.needsAttention
|
|
? root.providerName + " · sign-in expired, so this account has stopped syncing"
|
|
: (root.services.length === 0
|
|
? root.providerName
|
|
: root.providerName + " · "
|
|
+ root.services.filter(service => service.enabled)
|
|
.map(service => String(service.label)).join(", "))
|
|
color: root.needsAttention ? Theme.warn : Theme.fgDim
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
elide: Text.ElideRight
|
|
}
|
|
}
|
|
|
|
Row {
|
|
id: trailing
|
|
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: 9
|
|
|
|
SettingsButton {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
visible: root.needsAttention && root.signInAction !== ""
|
|
text: root.signInAction
|
|
enabled: !root.busy
|
|
onClicked: root.signInAgainRequested()
|
|
}
|
|
|
|
Text {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
text: root.expanded ? "▴" : "▾"
|
|
color: Theme.fgMuted
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
anchors.left: copy.left
|
|
anchors.right: parent.right
|
|
anchors.bottom: parent.bottom
|
|
height: 1
|
|
visible: root.divider && !root.expanded
|
|
color: Theme.alpha(Theme.fg, 0.065)
|
|
}
|
|
|
|
HoverHandler {
|
|
id: headHover
|
|
cursorShape: Qt.PointingHandCursor
|
|
}
|
|
|
|
TapHandler {
|
|
onTapped: root.activated()
|
|
}
|
|
}
|
|
|
|
Column {
|
|
id: expansion
|
|
|
|
width: parent.width
|
|
leftPadding: 44
|
|
visible: root.expanded
|
|
|
|
Repeater {
|
|
model: root.services
|
|
|
|
delegate: SettingRow {
|
|
id: serviceRow
|
|
|
|
required property var modelData
|
|
|
|
width: expansion.width - expansion.leftPadding
|
|
label: String(serviceRow.modelData.label ?? "")
|
|
detail: serviceRow.modelData.enabled
|
|
? "Applications using " + String(serviceRow.modelData.label ?? "").toLowerCase()
|
|
+ " can see this account"
|
|
: "Hidden from applications"
|
|
controlWidth: 54
|
|
|
|
SettingsToggle {
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
checked: serviceRow.modelData.enabled === true
|
|
// A toggle that moves while GOA is still answering the last
|
|
// one springs back, which reads as a broken switch.
|
|
enabled: !root.busy
|
|
onToggled: value => root.serviceToggled(
|
|
String(serviceRow.modelData.key ?? ""), value)
|
|
}
|
|
}
|
|
}
|
|
|
|
SettingRow {
|
|
width: expansion.width - expansion.leftPadding
|
|
label: root.confirmingRemoval ? "Remove this account?" : "Remove this account"
|
|
detail: root.confirmingRemoval
|
|
? "It signs out here and disappears from every application that was using it. Nothing on the provider's side is touched."
|
|
: "Signs out and removes it from every application that was using it"
|
|
controlWidth: 230
|
|
divider: false
|
|
|
|
Row {
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: 8
|
|
|
|
SettingsButton {
|
|
text: root.confirmingRemoval ? "Keep it" : "Remove…"
|
|
enabled: !root.busy
|
|
onClicked: root.confirmingRemoval ? root.removeCancelled() : root.removeArmed()
|
|
}
|
|
|
|
SettingsButton {
|
|
visible: root.confirmingRemoval
|
|
text: "Remove"
|
|
tone: "danger"
|
|
enabled: !root.busy
|
|
onClicked: root.removeConfirmed()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|