bar: add scrolling hint

This commit is contained in:
end-4
2025-05-16 11:26:02 +02:00
parent e7e6f4d0b5
commit a2d48303ca
3 changed files with 169 additions and 101 deletions
+129 -101
View File
@@ -100,42 +100,56 @@ Scope {
} }
} }
} }
RowLayout { // Left section Item { // Left section
id: leftSection
anchors.fill: parent anchors.fill: parent
spacing: 10 implicitHeight: leftSectionRowLayout.implicitHeight
implicitWidth: leftSectionRowLayout.implicitWidth
Rectangle { ScrollHint {
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter reveal: barLeftSideMouseArea.hovered
Layout.leftMargin: Appearance.rounding.screenRounding icon: "light_mode"
Layout.fillWidth: false side: "left"
anchors.left: parent.left
// Layout.fillHeight: true anchors.verticalCenter: parent.verticalCenter
radius: Appearance.rounding.full
color: (barLeftSideMouseArea.pressed || GlobalStates.sidebarLeftOpenCount > 0) ? Appearance.colors.colLayer1Active : barLeftSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : "transparent"
implicitWidth: distroIcon.width + 5*2
implicitHeight: distroIcon.height + 5*2
CustomIcon {
id: distroIcon
anchors.centerIn: parent
width: 19.5
height: 19.5
source: ConfigOptions.bar.topLeftIcon == 'distro' ?
SystemInfo.distroIcon : "spark-symbolic"
}
ColorOverlay {
anchors.fill: distroIcon
source: distroIcon
color: Appearance.colors.colOnLayer0
}
} }
RowLayout { // Content
id: leftSectionRowLayout
anchors.fill: parent
spacing: 10
ActiveWindow { Rectangle {
Layout.rightMargin: Appearance.rounding.screenRounding Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.fillWidth: true Layout.leftMargin: Appearance.rounding.screenRounding
bar: barRoot Layout.fillWidth: false
// Layout.fillHeight: true
radius: Appearance.rounding.full
color: (barLeftSideMouseArea.pressed || GlobalStates.sidebarLeftOpenCount > 0) ? Appearance.colors.colLayer1Active : barLeftSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : "transparent"
implicitWidth: distroIcon.width + 5*2
implicitHeight: distroIcon.height + 5*2
CustomIcon {
id: distroIcon
anchors.centerIn: parent
width: 19.5
height: 19.5
source: ConfigOptions.bar.topLeftIcon == 'distro' ?
SystemInfo.distroIcon : "spark-symbolic"
}
ColorOverlay {
anchors.fill: distroIcon
source: distroIcon
color: Appearance.colors.colOnLayer0
}
}
ActiveWindow {
Layout.rightMargin: Appearance.rounding.screenRounding
Layout.fillWidth: true
bar: barRoot
}
} }
} }
} }
@@ -259,89 +273,103 @@ Scope {
} }
} }
RowLayout { Item {
id: rightSection
anchors.fill: parent anchors.fill: parent
spacing: 5 implicitHeight: rightSectionRowLayout.implicitHeight
layoutDirection: Qt.RightToLeft implicitWidth: rightSectionRowLayout.implicitWidth
Rectangle { ScrollHint {
Layout.margins: 4 reveal: barRightSideMouseArea.hovered
Layout.rightMargin: Appearance.rounding.screenRounding icon: "volume_up"
Layout.fillHeight: true side: "right"
implicitWidth: indicatorsRowLayout.implicitWidth + 10*2 anchors.right: parent.right
radius: Appearance.rounding.full anchors.verticalCenter: parent.verticalCenter
color: (barRightSideMouseArea.pressed || GlobalStates.sidebarRightOpenCount > 0) ? Appearance.colors.colLayer1Active : barRightSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : "transparent" }
RowLayout {
id: indicatorsRowLayout RowLayout {
anchors.centerIn: parent id: rightSectionRowLayout
property real realSpacing: 15 anchors.fill: parent
spacing: 0 spacing: 5
layoutDirection: Qt.RightToLeft
Revealer {
reveal: Audio.sink?.audio?.muted ?? false Rectangle {
Layout.fillHeight: true Layout.margins: 4
Layout.rightMargin: reveal ? indicatorsRowLayout.realSpacing : 0 Layout.rightMargin: Appearance.rounding.screenRounding
Behavior on Layout.rightMargin { Layout.fillHeight: true
NumberAnimation { implicitWidth: indicatorsRowLayout.implicitWidth + 10*2
duration: Appearance.animation.elementMoveFast.duration radius: Appearance.rounding.full
easing.type: Appearance.animation.elementMoveFast.type color: (barRightSideMouseArea.pressed || GlobalStates.sidebarRightOpenCount > 0) ? Appearance.colors.colLayer1Active : barRightSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : "transparent"
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve RowLayout {
id: indicatorsRowLayout
anchors.centerIn: parent
property real realSpacing: 15
spacing: 0
Revealer {
reveal: Audio.sink?.audio?.muted ?? false
Layout.fillHeight: true
Layout.rightMargin: reveal ? indicatorsRowLayout.realSpacing : 0
Behavior on Layout.rightMargin {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
MaterialSymbol {
text: "volume_off"
iconSize: Appearance.font.pixelSize.larger
color: Appearance.colors.colOnLayer0
}
}
Revealer {
reveal: Audio.source?.audio?.muted ?? false
Layout.fillHeight: true
Layout.rightMargin: reveal ? indicatorsRowLayout.realSpacing : 0
Behavior on Layout.rightMargin {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
MaterialSymbol {
text: "mic_off"
iconSize: Appearance.font.pixelSize.larger
color: Appearance.colors.colOnLayer0
} }
} }
MaterialSymbol { MaterialSymbol {
text: "volume_off" Layout.rightMargin: indicatorsRowLayout.realSpacing
text: (Network.networkName.length > 0 && Network.networkName != "lo") ? (
Network.networkStrength > 80 ? "signal_wifi_4_bar" :
Network.networkStrength > 60 ? "network_wifi_3_bar" :
Network.networkStrength > 40 ? "network_wifi_2_bar" :
Network.networkStrength > 20 ? "network_wifi_1_bar" :
"signal_wifi_0_bar"
) : "signal_wifi_off"
iconSize: Appearance.font.pixelSize.larger iconSize: Appearance.font.pixelSize.larger
color: Appearance.colors.colOnLayer0 color: Appearance.colors.colOnLayer0
} }
}
Revealer {
reveal: Audio.source?.audio?.muted ?? false
Layout.fillHeight: true
Layout.rightMargin: reveal ? indicatorsRowLayout.realSpacing : 0
Behavior on Layout.rightMargin {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
MaterialSymbol { MaterialSymbol {
text: "mic_off" text: Bluetooth.bluetoothConnected ? "bluetooth_connected" : Bluetooth.bluetoothEnabled ? "bluetooth" : "bluetooth_disabled"
iconSize: Appearance.font.pixelSize.larger iconSize: Appearance.font.pixelSize.larger
color: Appearance.colors.colOnLayer0 color: Appearance.colors.colOnLayer0
} }
} }
MaterialSymbol { }
Layout.rightMargin: indicatorsRowLayout.realSpacing
text: (Network.networkName.length > 0 && Network.networkName != "lo") ? ( SysTray {
Network.networkStrength > 80 ? "signal_wifi_4_bar" : bar: barRoot
Network.networkStrength > 60 ? "network_wifi_3_bar" : Layout.fillWidth: false
Network.networkStrength > 40 ? "network_wifi_2_bar" : Layout.fillHeight: true
Network.networkStrength > 20 ? "network_wifi_1_bar" : }
"signal_wifi_0_bar"
) : "signal_wifi_off" Item {
iconSize: Appearance.font.pixelSize.larger Layout.fillWidth: true
color: Appearance.colors.colOnLayer0 Layout.fillHeight: true
}
MaterialSymbol {
text: Bluetooth.bluetoothConnected ? "bluetooth_connected" : Bluetooth.bluetoothEnabled ? "bluetooth" : "bluetooth_disabled"
iconSize: Appearance.font.pixelSize.larger
color: Appearance.colors.colOnLayer0
}
} }
} }
SysTray {
bar: barRoot
Layout.fillWidth: false
}
Item {
Layout.fillWidth: true
}
} }
} }
} }
@@ -0,0 +1,39 @@
import "root:/"
import "root:/modules/common"
import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Revealer { // Scroll hint
id: root
property string icon
property string side: "left"
ColumnLayout {
anchors.right: root.side === "left" ? parent.right : undefined
anchors.left: root.side === "right" ? parent.left : undefined
spacing: -5
MaterialSymbol {
Layout.leftMargin: 5
Layout.rightMargin: 5
text: "keyboard_arrow_up"
iconSize: 14
color: Appearance.colors.colOnLayer0
}
MaterialSymbol {
Layout.leftMargin: 5
Layout.rightMargin: 5
text: root.icon
iconSize: 14
color: Appearance.colors.colOnLayer0
}
MaterialSymbol {
Layout.leftMargin: 5
Layout.rightMargin: 5
text: "keyboard_arrow_down"
iconSize: 14
color: Appearance.colors.colOnLayer0
}
}
}
@@ -162,6 +162,7 @@ Singleton {
property string reading: "Readex Pro" property string reading: "Readex Pro"
} }
property QtObject pixelSize: QtObject { property QtObject pixelSize: QtObject {
property int smallest: 10
property int smaller: 13 property int smaller: 13
property int small: 15 property int small: 15
property int normal: 16 property int normal: 16