28allday
16de3f16fe
- About page: replace caelestia AnimatedLogo with the NoSignal logo (assets/nosignal-logo.png), title "NoSignal", version reads "V1". - Square every remaining curved element to match the no-curves design: avatars, toggle/icon circles, power/media buttons, slider tracks+handles, NsSwitch track+knob, notification dot, calendar today, lock avatar -> radius 0. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
382 lines
11 KiB
QML
382 lines
11 KiB
QML
pragma ComponentBehavior: Bound
|
|
|
|
// NoSignal Quick Settings popout (off the media / battery pill). Avatar + user +
|
|
// uptime + power button; 2-col toggle grid; brightness + volume sliders; media
|
|
// card. Wired to the real services (Network, Bluetooth, Notifs, Audio,
|
|
// Brightness, Players); Night Light / Airplane / VPN are stateful toggles for now.
|
|
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import Quickshell.Bluetooth
|
|
import qs.services
|
|
import qs.utils
|
|
import qs.components
|
|
|
|
NsPanel {
|
|
id: root
|
|
|
|
implicitWidth: 380
|
|
anchorMode: "right"
|
|
|
|
readonly property var brightMon: Brightness.monitors[0] ?? null
|
|
|
|
// ── Header ───────────────────────────────────────────────────────────
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 12
|
|
|
|
Rectangle {
|
|
implicitWidth: 40
|
|
implicitHeight: 40
|
|
radius: 0
|
|
gradient: Gradient {
|
|
orientation: Gradient.Vertical
|
|
GradientStop {
|
|
position: 0
|
|
color: Theme.accent
|
|
}
|
|
GradientStop {
|
|
position: 1
|
|
color: Theme.blue
|
|
}
|
|
}
|
|
|
|
StyledText {
|
|
anchors.centerIn: parent
|
|
text: (SysInfo.user || "?").charAt(0).toUpperCase()
|
|
color: Theme.onAccent
|
|
font.family: Theme.font.family
|
|
font.pixelSize: Theme.font.body
|
|
font.weight: Font.Bold
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
spacing: 0
|
|
StyledText {
|
|
text: SysInfo.user || "user"
|
|
color: Theme.text
|
|
font.family: Theme.font.family
|
|
font.pixelSize: Theme.font.panelTitle
|
|
font.weight: Font.DemiBold
|
|
}
|
|
StyledText {
|
|
text: "uptime " + SysInfo.uptime
|
|
color: Theme.textMuted
|
|
font.family: Theme.font.family
|
|
font.pixelSize: Theme.font.bodySmall
|
|
}
|
|
}
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
Rectangle {
|
|
implicitWidth: 34
|
|
implicitHeight: 34
|
|
radius: 0
|
|
color: pwrMa.containsMouse ? Theme.accentSoft : Theme.fillSubtle
|
|
|
|
NsIcon {
|
|
anchors.centerIn: parent
|
|
icon: "power_settings_new"
|
|
color: Theme.danger
|
|
}
|
|
|
|
MouseArea {
|
|
id: pwrMa
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: NsShell.show("power", 0)
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Toggle grid ──────────────────────────────────────────────────────
|
|
GridLayout {
|
|
Layout.fillWidth: true
|
|
columns: 2
|
|
rowSpacing: 8
|
|
columnSpacing: 8
|
|
|
|
QSToggle {
|
|
icon: "wifi"
|
|
label: "Wi-Fi"
|
|
sub: Network.wifiEnabled ? Network.active?.ssid ?? "On" : "Off"
|
|
on: Network.wifiEnabled
|
|
onToggled: Network.toggleWifi()
|
|
}
|
|
QSToggle {
|
|
icon: "bluetooth"
|
|
label: "Bluetooth"
|
|
sub: Bluetooth.defaultAdapter?.enabled ? "On" : "Off"
|
|
on: Bluetooth.defaultAdapter?.enabled ?? false
|
|
onToggled: if (Bluetooth.defaultAdapter)
|
|
Bluetooth.defaultAdapter.enabled = !Bluetooth.defaultAdapter.enabled
|
|
}
|
|
QSToggle {
|
|
icon: "do_not_disturb_on"
|
|
label: "Do Not Disturb"
|
|
sub: Notifs.dnd ? "On" : "Off"
|
|
on: Notifs.dnd
|
|
onToggled: Notifs.dnd = !Notifs.dnd
|
|
}
|
|
QSToggle {
|
|
id: nightTog
|
|
icon: "nightlight"
|
|
label: "Night Light"
|
|
sub: on ? "Warm 3500K" : "Off"
|
|
onToggled: on = !on
|
|
}
|
|
QSToggle {
|
|
id: airTog
|
|
icon: "airplanemode_active"
|
|
label: "Airplane"
|
|
sub: on ? "On" : "Off"
|
|
onToggled: on = !on
|
|
}
|
|
QSToggle {
|
|
id: vpnTog
|
|
icon: "vpn_key"
|
|
label: "VPN"
|
|
sub: on ? "On" : "Off"
|
|
onToggled: on = !on
|
|
}
|
|
}
|
|
|
|
// ── Sliders ──────────────────────────────────────────────────────────
|
|
QSSlider {
|
|
icon: "brightness_6"
|
|
value: root.brightMon?.brightness ?? 0
|
|
visible: root.brightMon !== null
|
|
onMoved: v => root.brightMon?.setBrightness(v)
|
|
}
|
|
|
|
QSSlider {
|
|
icon: Audio.muted ? "volume_off" : "volume_up"
|
|
value: Audio.volume
|
|
onMoved: v => Audio.setVolume(v)
|
|
}
|
|
|
|
// ── Media card ───────────────────────────────────────────────────────
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.topMargin: 4
|
|
implicitHeight: 80
|
|
radius: Theme.radius.tile
|
|
color: Theme.fillSubtle
|
|
visible: Players.active !== null
|
|
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 12
|
|
spacing: 12
|
|
|
|
Rectangle {
|
|
implicitWidth: 56
|
|
implicitHeight: 56
|
|
radius: 0
|
|
gradient: Gradient {
|
|
orientation: Gradient.Vertical
|
|
GradientStop {
|
|
position: 0
|
|
color: Theme.accent
|
|
}
|
|
GradientStop {
|
|
position: 1
|
|
color: Theme.blue
|
|
}
|
|
}
|
|
NsIcon {
|
|
anchors.centerIn: parent
|
|
icon: "music_note"
|
|
color: Theme.onAccent
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 2
|
|
|
|
StyledText {
|
|
Layout.fillWidth: true
|
|
text: Players.active?.trackTitle || "Awake"
|
|
color: Theme.text
|
|
elide: Text.ElideRight
|
|
font.family: Theme.font.family
|
|
font.pixelSize: Theme.font.body
|
|
font.weight: Font.DemiBold
|
|
}
|
|
StyledText {
|
|
Layout.fillWidth: true
|
|
text: Players.active?.trackArtist || ""
|
|
color: Theme.textMuted
|
|
elide: Text.ElideRight
|
|
font.family: Theme.font.family
|
|
font.pixelSize: Theme.font.bodySmall
|
|
}
|
|
|
|
RowLayout {
|
|
spacing: 16
|
|
Layout.topMargin: 2
|
|
|
|
MediaBtn {
|
|
icon: "skip_previous"
|
|
onActivated: Players.previous()
|
|
}
|
|
MediaBtn {
|
|
icon: Players.active?.isPlaying ? "pause" : "play_arrow"
|
|
onActivated: Players.togglePlaying()
|
|
}
|
|
MediaBtn {
|
|
icon: "skip_next"
|
|
onActivated: Players.next()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Reusable bits ────────────────────────────────────────────────────
|
|
component QSToggle: Rectangle {
|
|
id: tile
|
|
|
|
property string icon
|
|
property string label
|
|
property string sub
|
|
property bool on: false
|
|
signal toggled
|
|
|
|
Layout.fillWidth: true
|
|
implicitHeight: 56
|
|
radius: Theme.radius.button
|
|
color: tile.on ? Theme.accentSoft : Theme.fillSubtle
|
|
border.width: tile.on ? 1 : 0
|
|
border.color: Theme.accent
|
|
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 11
|
|
spacing: 10
|
|
|
|
Rectangle {
|
|
implicitWidth: 30
|
|
implicitHeight: 30
|
|
radius: 0
|
|
color: tile.on ? Theme.accent : Qt.rgba(1, 1, 1, 0.06)
|
|
|
|
NsIcon {
|
|
anchors.centerIn: parent
|
|
icon: tile.icon
|
|
color: tile.on ? Theme.onAccent : Theme.text
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
spacing: 0
|
|
StyledText {
|
|
text: tile.label
|
|
color: Theme.text
|
|
font.family: Theme.font.family
|
|
font.pixelSize: Theme.font.bodySmall
|
|
font.weight: Font.Medium
|
|
}
|
|
StyledText {
|
|
text: tile.sub
|
|
color: Theme.textMuted
|
|
font.family: Theme.font.family
|
|
font.pixelSize: Theme.font.meta
|
|
}
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: tile.toggled()
|
|
}
|
|
}
|
|
|
|
component QSSlider: RowLayout {
|
|
id: s
|
|
|
|
property string icon
|
|
property real value: 0
|
|
signal moved(real v)
|
|
|
|
Layout.fillWidth: true
|
|
spacing: 10
|
|
|
|
NsIcon {
|
|
icon: s.icon
|
|
color: Theme.textMuted
|
|
}
|
|
|
|
Rectangle {
|
|
id: track
|
|
|
|
Layout.fillWidth: true
|
|
implicitHeight: 6
|
|
radius: 0
|
|
color: Theme.fillSubtle
|
|
|
|
Rectangle {
|
|
width: parent.width * Math.max(0, Math.min(1, s.value))
|
|
height: parent.height
|
|
radius: 0
|
|
color: Theme.accent
|
|
}
|
|
|
|
Rectangle {
|
|
x: parent.width * Math.max(0, Math.min(1, s.value)) - width / 2
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
implicitWidth: 14
|
|
implicitHeight: 14
|
|
radius: 0
|
|
color: Theme.accent
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
onPressed: e => s.moved(Math.max(0, Math.min(1, e.x / width)))
|
|
onPositionChanged: e => {
|
|
if (pressed)
|
|
s.moved(Math.max(0, Math.min(1, e.x / width)));
|
|
}
|
|
}
|
|
}
|
|
|
|
StyledText {
|
|
text: Math.round(s.value * 100) + "%"
|
|
color: Theme.textMuted
|
|
font.family: Theme.font.family
|
|
font.pixelSize: Theme.font.meta
|
|
}
|
|
}
|
|
|
|
component MediaBtn: Rectangle {
|
|
property string icon
|
|
signal activated
|
|
|
|
implicitWidth: 28
|
|
implicitHeight: 28
|
|
radius: 0
|
|
color: mbm.containsMouse ? Theme.hover : "transparent"
|
|
|
|
NsIcon {
|
|
anchors.centerIn: parent
|
|
icon: parent.icon
|
|
color: Theme.text
|
|
}
|
|
|
|
MouseArea {
|
|
id: mbm
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: parent.activated()
|
|
}
|
|
}
|
|
}
|