Panel tweaks
This commit is contained in:
@@ -21,6 +21,7 @@ Rectangle {
|
|||||||
// separately from real activeFocus. Visuals match the activeFocus look
|
// separately from real activeFocus. Visuals match the activeFocus look
|
||||||
// (foreground 2px border) so cursor and Tab focus read the same.
|
// (foreground 2px border) so cursor and Tab focus read the same.
|
||||||
property bool hasCursor: false
|
property bool hasCursor: false
|
||||||
|
property bool borderlessHighlight: false
|
||||||
|
|
||||||
property color foreground: Color.foreground
|
property color foreground: Color.foreground
|
||||||
property color background: Color.background
|
property color background: Color.background
|
||||||
@@ -42,11 +43,12 @@ Rectangle {
|
|||||||
|
|
||||||
color: selected
|
color: selected
|
||||||
? Qt.rgba(accent.r, accent.g, accent.b, 0.18)
|
? Qt.rgba(accent.r, accent.g, accent.b, 0.18)
|
||||||
: (mouse.containsMouse ? Style.hotFill : background)
|
: ((mouse.containsMouse || hasCursor) ? Qt.rgba(foreground.r, foreground.g, foreground.b, 0.12) : background)
|
||||||
border.color: selected
|
border.color: selected
|
||||||
? accent
|
? accent
|
||||||
: (activeFocus || hasCursor ? foreground : Qt.rgba(foreground.r, foreground.g, foreground.b, 0.4))
|
: (activeFocus ? foreground : Qt.rgba(foreground.r, foreground.g, foreground.b, 0.4))
|
||||||
border.width: selected ? 2 : (activeFocus || hasCursor ? 2 : 1)
|
border.width: borderlessHighlight ? (activeFocus ? 2 : 0)
|
||||||
|
: (selected ? 2 : (activeFocus || hasCursor ? 2 : 1))
|
||||||
|
|
||||||
Behavior on color { ColorAnimation { duration: 100 } }
|
Behavior on color { ColorAnimation { duration: 100 } }
|
||||||
|
|
||||||
|
|||||||
@@ -20,6 +20,8 @@ import QtQuick
|
|||||||
PillButton {
|
PillButton {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
|
cursorBordered: false
|
||||||
|
|
||||||
signal hovered(bool isHovered)
|
signal hovered(bool isHovered)
|
||||||
|
|
||||||
HoverHandler {
|
HoverHandler {
|
||||||
|
|||||||
@@ -13,11 +13,12 @@ Rectangle {
|
|||||||
property bool current: false
|
property bool current: false
|
||||||
|
|
||||||
property color foreground: "#cacccc"
|
property color foreground: "#cacccc"
|
||||||
property color fill: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.18)
|
property color fill: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.12)
|
||||||
|
property color currentFill: fill
|
||||||
|
|
||||||
radius: Style.cornerRadius
|
radius: Style.cornerRadius
|
||||||
color: (hasCursor || current) ? fill : "transparent"
|
color: hasCursor ? fill : (current ? currentFill : "transparent")
|
||||||
border.width: hasCursor ? 1 : 0
|
border.width: 0
|
||||||
border.color: foreground
|
border.color: foreground
|
||||||
|
|
||||||
Behavior on color {
|
Behavior on color {
|
||||||
|
|||||||
@@ -40,6 +40,7 @@ Rectangle {
|
|||||||
// hits them. The hot/cursor state paints its own 1px border, so changing
|
// hits them. The hot/cursor state paints its own 1px border, so changing
|
||||||
// this doesn't affect panel-pill visuals.
|
// this doesn't affect panel-pill visuals.
|
||||||
property bool bordered: false
|
property bool bordered: false
|
||||||
|
property bool cursorBordered: true
|
||||||
|
|
||||||
activeFocusOnTab: focusable
|
activeFocusOnTab: focusable
|
||||||
Keys.onReturnPressed: if (focusable) root.clicked()
|
Keys.onReturnPressed: if (focusable) root.clicked()
|
||||||
@@ -93,7 +94,7 @@ Rectangle {
|
|||||||
: hot ? hoverBackground
|
: hot ? hoverBackground
|
||||||
: (active ? activeBackground : background)
|
: (active ? activeBackground : background)
|
||||||
border.width: _showFocusRing ? Style.focusBorderWidth
|
border.width: _showFocusRing ? Style.focusBorderWidth
|
||||||
: hot ? 1
|
: hot ? (cursorBordered ? 1 : 0)
|
||||||
: (bordered ? 1 : 0)
|
: (bordered ? 1 : 0)
|
||||||
border.color: _showFocusRing ? Style.focusBorderColor : foreground
|
border.color: _showFocusRing ? Style.focusBorderColor : foreground
|
||||||
|
|
||||||
|
|||||||
@@ -97,7 +97,7 @@ Item {
|
|||||||
property int selectedIndex: -1
|
property int selectedIndex: -1
|
||||||
|
|
||||||
readonly property color activeFill: bar
|
readonly property color activeFill: bar
|
||||||
? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.18)
|
? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.12)
|
||||||
: "transparent"
|
: "transparent"
|
||||||
|
|
||||||
function sectionCount(section) {
|
function sectionCount(section) {
|
||||||
@@ -450,7 +450,7 @@ Item {
|
|||||||
hasCursor: root.focusSection === "output" && root.selectedIndex === -1
|
hasCursor: root.focusSection === "output" && root.selectedIndex === -1
|
||||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(outputSliderRow)
|
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(outputSliderRow)
|
||||||
foreground: root.bar.foreground
|
foreground: root.bar.foreground
|
||||||
fill: root.activeFill
|
fill: "transparent"
|
||||||
|
|
||||||
Row {
|
Row {
|
||||||
id: outputSliderInner
|
id: outputSliderInner
|
||||||
@@ -567,7 +567,7 @@ Item {
|
|||||||
hasCursor: root.focusSection === "input" && root.selectedIndex === -1
|
hasCursor: root.focusSection === "input" && root.selectedIndex === -1
|
||||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(inputSliderRow)
|
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(inputSliderRow)
|
||||||
foreground: root.bar.foreground
|
foreground: root.bar.foreground
|
||||||
fill: root.activeFill
|
fill: "transparent"
|
||||||
|
|
||||||
Row {
|
Row {
|
||||||
id: inputSliderInner
|
id: inputSliderInner
|
||||||
@@ -700,8 +700,8 @@ Item {
|
|||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
anchors.leftMargin: 10
|
anchors.leftMargin: 6
|
||||||
anchors.rightMargin: 10
|
anchors.rightMargin: 6
|
||||||
spacing: 8
|
spacing: 8
|
||||||
|
|
||||||
Text {
|
Text {
|
||||||
@@ -709,7 +709,7 @@ Item {
|
|||||||
color: root.bar.foreground
|
color: root.bar.foreground
|
||||||
font.family: root.bar.fontFamily
|
font.family: root.bar.fontFamily
|
||||||
font.pixelSize: 14
|
font.pixelSize: 14
|
||||||
width: 18
|
width: 22
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
@@ -720,7 +720,7 @@ Item {
|
|||||||
font.family: root.bar.fontFamily
|
font.family: root.bar.fontFamily
|
||||||
font.pixelSize: 12
|
font.pixelSize: 12
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
width: parent.width - 18 - 14 - 16
|
width: parent.width - 22 - 14 - 16
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -766,8 +766,8 @@ Item {
|
|||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
anchors.leftMargin: 10
|
anchors.leftMargin: 6
|
||||||
anchors.rightMargin: 10
|
anchors.rightMargin: 6
|
||||||
spacing: 8
|
spacing: 8
|
||||||
|
|
||||||
Text {
|
Text {
|
||||||
@@ -775,7 +775,7 @@ Item {
|
|||||||
color: root.bar.foreground
|
color: root.bar.foreground
|
||||||
font.family: root.bar.fontFamily
|
font.family: root.bar.fontFamily
|
||||||
font.pixelSize: 14
|
font.pixelSize: 14
|
||||||
width: 18
|
width: 22
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
@@ -786,7 +786,7 @@ Item {
|
|||||||
font.family: root.bar.fontFamily
|
font.family: root.bar.fontFamily
|
||||||
font.pixelSize: 12
|
font.pixelSize: 12
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
width: parent.width - 18 - 14 - 16
|
width: parent.width - 22 - 14 - 16
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -85,7 +85,7 @@ Item {
|
|||||||
property string focusedKnownAddress: ""
|
property string focusedKnownAddress: ""
|
||||||
|
|
||||||
readonly property color activeFill: bar
|
readonly property color activeFill: bar
|
||||||
? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.18)
|
? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.12)
|
||||||
: "transparent"
|
: "transparent"
|
||||||
|
|
||||||
function sectionCount(section) {
|
function sectionCount(section) {
|
||||||
@@ -374,7 +374,6 @@ Item {
|
|||||||
tooltipText: !root.adapter ? "" : !root.adapter.enabled ? "Bluetooth is off"
|
tooltipText: !root.adapter ? "" : !root.adapter.enabled ? "Bluetooth is off"
|
||||||
: root.adapter.discovering ? "Stop scanning" : "Scan for devices"
|
: root.adapter.discovering ? "Stop scanning" : "Scan for devices"
|
||||||
pillEnabled: root.adapter !== null && root.adapter.enabled
|
pillEnabled: root.adapter !== null && root.adapter.enabled
|
||||||
active: root.adapter && root.adapter.discovering
|
|
||||||
onActivated: if (root.adapter) root.adapter.discovering = !root.adapter.discovering
|
onActivated: if (root.adapter) root.adapter.discovering = !root.adapter.discovering
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -389,7 +388,6 @@ Item {
|
|||||||
pillIndex: 2
|
pillIndex: 2
|
||||||
iconText: root.adapter && root.adapter.enabled ? "" : ""
|
iconText: root.adapter && root.adapter.enabled ? "" : ""
|
||||||
tooltipText: root.adapter && root.adapter.enabled ? "Turn Bluetooth off" : "Turn Bluetooth on"
|
tooltipText: root.adapter && root.adapter.enabled ? "Turn Bluetooth off" : "Turn Bluetooth on"
|
||||||
active: root.adapter && root.adapter.enabled
|
|
||||||
onActivated: if (root.adapter) root.adapter.enabled = !root.adapter.enabled
|
onActivated: if (root.adapter) root.adapter.enabled = !root.adapter.enabled
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -514,7 +512,7 @@ Item {
|
|||||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(row)
|
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(row)
|
||||||
current: isConnected
|
current: isConnected
|
||||||
foreground: root.bar.foreground
|
foreground: root.bar.foreground
|
||||||
fill: root.activeFill
|
fill: isConnected ? root.activeFill : "transparent"
|
||||||
|
|
||||||
// 0 idle, 1 connecting, 2 disconnecting, 3 pairing, 4 failed.
|
// 0 idle, 1 connecting, 2 disconnecting, 3 pairing, 4 failed.
|
||||||
property int pendingAction: 0
|
property int pendingAction: 0
|
||||||
|
|||||||
@@ -414,7 +414,7 @@ Item {
|
|||||||
hasCursor: root.focusSection === "brightness" && root.selectedIndex === -1
|
hasCursor: root.focusSection === "brightness" && root.selectedIndex === -1
|
||||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(brightnessRow)
|
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(brightnessRow)
|
||||||
foreground: root.bar.foreground
|
foreground: root.bar.foreground
|
||||||
fill: Qt.rgba(root.bar.foreground.r, root.bar.foreground.g, root.bar.foreground.b, 0.18)
|
fill: "transparent"
|
||||||
|
|
||||||
Row {
|
Row {
|
||||||
id: brightnessInner
|
id: brightnessInner
|
||||||
@@ -511,6 +511,7 @@ Item {
|
|||||||
fontSize: 11
|
fontSize: 11
|
||||||
selected: root.normalizeScale(root.monitorScale) === root.normalizeScale(modelData)
|
selected: root.normalizeScale(root.monitorScale) === root.normalizeScale(modelData)
|
||||||
hasCursor: root.focusSection === "scale" && root.selectedIndex === index
|
hasCursor: root.focusSection === "scale" && root.selectedIndex === index
|
||||||
|
borderlessHighlight: true
|
||||||
onClicked: root.setScale(modelData)
|
onClicked: root.setScale(modelData)
|
||||||
onHovered: function(h) {
|
onHovered: function(h) {
|
||||||
if (h) {
|
if (h) {
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ Item {
|
|||||||
// Mouse hover and keyboard nav both mutate this state at the root; items
|
// Mouse hover and keyboard nav both mutate this state at the root; items
|
||||||
// never read containsMouse for visuals. See CursorSurface for the
|
// never read containsMouse for visuals. See CursorSurface for the
|
||||||
// shared chrome (fill / border) shared by NetworkRow and DnsProviderPill.
|
// shared chrome (fill / border) shared by NetworkRow and DnsProviderPill.
|
||||||
readonly property color activeFill: bar ? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.18) : "transparent"
|
readonly property color activeFill: bar ? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.12) : "transparent"
|
||||||
|
|
||||||
// The panel below is its own layer-shell with Exclusive keyboard focus,
|
// The panel below is its own layer-shell with Exclusive keyboard focus,
|
||||||
// so Hyprland grants focus when the surface is mapped (popupOpen flips
|
// so Hyprland grants focus when the surface is mapped (popupOpen flips
|
||||||
|
|||||||
Reference in New Issue
Block a user