Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-03 20:32:07 -04:00
Code Packages Releases Activity

replace qmlformat with a better tool

Browse Source 
still not perfect, but well - what can ya do
This commit is contained in:
bbedward
2025-08-08 15:55:37 -04:00
parent 8dc6e2805d
commit 4d408c65f2
137 changed files with 30315 additions and 29625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
Widgets/CachingImage.qml
View File

@@ -1,4 +1,4 @@
pragma ComponentBehavior: Bound
pragma ComponentBehavior
import QtQuick
import Quickshell
@@ -6,56 +6,56 @@ import Quickshell.Io
import qs.Common
Image {
id: root
id: root
property string imagePath: ""
property string imageHash: ""
property int maxCacheSize: 512
readonly property string cachePath: imageHash ? `${Paths.stringify(Paths.imagecache)}/${imageHash}@${maxCacheSize}x${maxCacheSize}.png` : ""
property string imagePath: ""
property string imageHash: ""
property int maxCacheSize: 512
readonly property string cachePath: imageHash ? `${Paths.stringify(
Paths.imagecache)}/${imageHash}@${maxCacheSize}x${maxCacheSize}.png` : ""
asynchronous: true
fillMode: Image.PreserveAspectCrop
sourceSize.width: maxCacheSize
sourceSize.height: maxCacheSize
smooth: true
onImagePathChanged: {
if (imagePath) {
hashProcess.command = ["sha256sum", Paths.strip(imagePath)];
hashProcess.running = true;
} else {
source = "";
imageHash = "";
}
asynchronous: true
fillMode: Image.PreserveAspectCrop
sourceSize.width: maxCacheSize
sourceSize.height: maxCacheSize
smooth: true
onImagePathChanged: {
if (imagePath) {
hashProcess.command = ["sha256sum", Paths.strip(imagePath)]
hashProcess.running = true
} else {
source = ""
imageHash = ""
}
onCachePathChanged: {
if (imageHash && cachePath) {
Paths.mkdir(Paths.imagecache);
source = cachePath;
}
}
onCachePathChanged: {
if (imageHash && cachePath) {
Paths.mkdir(Paths.imagecache)
source = cachePath
}
onStatusChanged: {
if (source == cachePath && status === Image.Error) {
source = imagePath;
} else if (source == imagePath && status === Image.Ready && imageHash && cachePath) {
Paths.mkdir(Paths.imagecache);
const grabPath = cachePath;
if (visible && width > 0 && height > 0 && Window.window && Window.window.visible)
grabToImage((res) => {
return res.saveToFile(grabPath);
});
}
}
onStatusChanged: {
if (source == cachePath && status === Image.Error) {
source = imagePath
} else if (source == imagePath && status === Image.Ready && imageHash
&& cachePath) {
Paths.mkdir(Paths.imagecache)
const grabPath = cachePath
if (visible && width > 0 && height > 0 && Window.window
&& Window.window.visible)
grabToImage(res => {
return res.saveToFile(grabPath)
})
}
}
Process {
id: hashProcess
stdout: StdioCollector {
onStreamFinished: {
root.imageHash = text.split(" ")[0];
}
}
Process {
id: hashProcess
stdout: StdioCollector {
onStreamFinished: {
root.imageHash = text.split(" ")[0]
}
}
}
}

53
Widgets/DankActionButton.qml
View File

@@ -3,36 +3,35 @@ import qs.Common
import qs.Widgets
StyledRect {
id: root
id: root
property string iconName: ""
property int iconSize: Theme.iconSize - 4
property color iconColor: Theme.surfaceText
property color hoverColor: Theme.primaryHover
property color backgroundColor: "transparent"
property bool circular: true
property int buttonSize: 32
property string iconName: ""
property int iconSize: Theme.iconSize - 4
property color iconColor: Theme.surfaceText
property color hoverColor: Theme.primaryHover
property color backgroundColor: "transparent"
property bool circular: true
property int buttonSize: 32
signal clicked()
signal clicked
width: buttonSize
height: buttonSize
radius: circular ? buttonSize / 2 : Theme.cornerRadius
color: backgroundColor
width: buttonSize
height: buttonSize
radius: circular ? buttonSize / 2 : Theme.cornerRadius
color: backgroundColor
DankIcon {
anchors.centerIn: parent
name: root.iconName
size: root.iconSize
color: root.iconColor
DankIcon {
anchors.centerIn: parent
name: root.iconName
size: root.iconSize
color: root.iconColor
}
StateLayer {
stateColor: Theme.primary
cornerRadius: root.radius
onClicked: {
root.clicked()
}
StateLayer {
stateColor: Theme.primary
cornerRadius: root.radius
onClicked: {
root.clicked();
}
}
}
}

639
Widgets/DankDropdown.qml
View File

@@ -5,358 +5,349 @@ import qs.Common
import qs.Widgets
Rectangle {
id: root
id: root
property string text: ""
property string description: ""
property string currentValue: ""
property var options: []
property var optionIcons: [] // Array of icon names corresponding to options
property bool forceRecreate: false
property bool enableFuzzySearch: false
property int popupWidthOffset: 0 // How much wider the popup should be than the button
property int maxPopupHeight: 400
property string text: ""
property string description: ""
property string currentValue: ""
property var options: []
property var optionIcons: [] // Array of icon names corresponding to options
property bool forceRecreate: false
property bool enableFuzzySearch: false
property int popupWidthOffset: 0 // How much wider the popup should be than the button
property int maxPopupHeight: 400
signal valueChanged(string value)
signal valueChanged(string value)
width: parent.width
height: 60
radius: Theme.cornerRadius
color: "transparent"
Component.onCompleted: {
forceRecreateTimer.start();
width: parent.width
height: 60
radius: Theme.cornerRadius
color: "transparent"
Component.onCompleted: {
forceRecreateTimer.start()
}
Component.onDestruction: {
var popup = popupLoader.item
if (popup && popup.visible)
popup.close()
}
onVisibleChanged: {
var popup = popupLoader.item
if (!visible && popup && popup.visible)
popup.close()
else if (visible)
forceRecreateTimer.start()
}
Timer {
id: forceRecreateTimer
interval: 50
repeat: false
onTriggered: {
root.forceRecreate = !root.forceRecreate
}
Component.onDestruction: {
var popup = popupLoader.item;
if (popup && popup.visible)
popup.close();
}
}
onVisibleChanged: {
var popup = popupLoader.item;
if (!visible && popup && popup.visible)
popup.close();
else if (visible)
forceRecreateTimer.start();
Column {
anchors.left: parent.left
anchors.right: dropdown.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingM
anchors.rightMargin: Theme.spacingM
spacing: Theme.spacingXS
StyledText {
text: root.text
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
}
Timer {
id: forceRecreateTimer
StyledText {
text: root.description
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
visible: description.length > 0
wrapMode: Text.WordWrap
width: parent.width
}
}
interval: 50
repeat: false
onTriggered: {
root.forceRecreate = !root.forceRecreate;
Rectangle {
id: dropdown
width: 180
height: 36
anchors.right: parent.right
anchors.rightMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
radius: Theme.cornerRadiusSmall
color: dropdownArea.containsMouse ? Theme.primaryHover : Theme.contentBackground()
border.color: Theme.surfaceVariantAlpha
border.width: 1
MouseArea {
id: dropdownArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
var popup = popupLoader.item
if (popup && popup.visible) {
popup.close()
} else if (popup) {
var pos = dropdown.mapToItem(Overlay.overlay, 0, dropdown.height + 4)
popup.x = pos.x - (root.popupWidthOffset / 2)
popup.y = pos.y
popup.open()
}
}
}
Column {
anchors.left: parent.left
anchors.right: dropdown.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingM
anchors.rightMargin: Theme.spacingM
spacing: Theme.spacingXS
Row {
id: contentRow
StyledText {
text: root.text
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingM
spacing: Theme.spacingS
DankIcon {
name: {
var currentIndex = root.options.indexOf(root.currentValue)
return root.optionIcons.length > currentIndex
&& currentIndex >= 0 ? root.optionIcons[currentIndex] : ""
}
size: 18
color: Theme.surfaceVariantText
visible: name !== ""
}
StyledText {
text: root.currentValue
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
width: dropdown.width - contentRow.x - expandIcon.width - Theme.spacingM - Theme.spacingS
elide: Text.ElideRight
}
}
DankIcon {
id: expandIcon
name: "expand_more"
size: 20
color: Theme.surfaceVariantText
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.rightMargin: Theme.spacingS
}
}
Loader {
id: popupLoader
property bool recreateFlag: root.forceRecreate
active: true
onRecreateFlagChanged: {
active = false
active = true
}
sourceComponent: Component {
Popup {
id: dropdownMenu
property string searchQuery: ""
property var filteredOptions: []
property int selectedIndex: -1
function updateFilteredOptions() {
if (!root.enableFuzzySearch || searchQuery.length === 0) {
filteredOptions = root.options
} else {
var results = FuzzySort.go(searchQuery, root.options, {
"limit": 50,
"threshold": -10000
})
filteredOptions = results.map(function (result) {
return result.target
})
}
selectedIndex = -1
}
StyledText {
text: root.description
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
visible: description.length > 0
wrapMode: Text.WordWrap
width: parent.width
function selectNext() {
if (filteredOptions.length > 0) {
selectedIndex = (selectedIndex + 1) % filteredOptions.length
listView.positionViewAtIndex(selectedIndex, ListView.Contain)
}
}
}
function selectPrevious() {
if (filteredOptions.length > 0) {
selectedIndex = selectedIndex <= 0 ? filteredOptions.length - 1 : selectedIndex - 1
listView.positionViewAtIndex(selectedIndex, ListView.Contain)
}
}
Rectangle {
id: dropdown
function selectCurrent() {
if (selectedIndex >= 0 && selectedIndex < filteredOptions.length) {
root.currentValue = filteredOptions[selectedIndex]
root.valueChanged(filteredOptions[selectedIndex])
close()
}
}
width: 180
height: 36
anchors.right: parent.right
anchors.rightMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
radius: Theme.cornerRadiusSmall
color: dropdownArea.containsMouse ? Theme.primaryHover : Theme.contentBackground()
border.color: Theme.surfaceVariantAlpha
border.width: 1
parent: Overlay.overlay
width: dropdown.width + root.popupWidthOffset
height: Math.min(root.maxPopupHeight,
(root.enableFuzzySearch ? 54 : 0) + Math.min(
filteredOptions.length, 10) * 36 + 16)
padding: 0
modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
onOpened: {
searchQuery = ""
updateFilteredOptions()
if (root.enableFuzzySearch && searchField.visible)
searchField.forceActiveFocus()
}
MouseArea {
id: dropdownArea
background: Rectangle {
color: "transparent"
}
contentItem: Rectangle {
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
Theme.surfaceContainer.b, 1)
border.color: Theme.primarySelected
border.width: 1
radius: Theme.cornerRadiusSmall
Column {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
var popup = popupLoader.item;
if (popup && popup.visible) {
popup.close();
} else if (popup) {
var pos = dropdown.mapToItem(Overlay.overlay, 0, dropdown.height + 4);
popup.x = pos.x - (root.popupWidthOffset / 2);
popup.y = pos.y;
popup.open();
anchors.margins: Theme.spacingS
Rectangle {
id: searchContainer
width: parent.width
height: 42
visible: root.enableFuzzySearch
radius: Theme.cornerRadiusSmall
color: Theme.surfaceVariantAlpha
DankTextField {
id: searchField
anchors.fill: parent
anchors.margins: 1
placeholderText: "Search..."
text: searchQuery
topPadding: Theme.spacingS
bottomPadding: Theme.spacingS
onTextChanged: {
searchQuery = text
updateFilteredOptions()
}
Keys.onDownPressed: selectNext()
Keys.onUpPressed: selectPrevious()
Keys.onReturnPressed: selectCurrent()
Keys.onEnterPressed: selectCurrent()
}
}
}
Row {
id: contentRow
Item {
width: 1
height: Theme.spacingXS
visible: root.enableFuzzySearch
}
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingM
spacing: Theme.spacingS
DankListView {
id: listView
DankIcon {
name: {
var currentIndex = root.options.indexOf(root.currentValue);
return root.optionIcons.length > currentIndex && currentIndex >= 0 ? root.optionIcons[currentIndex] : "";
property var popupRef: dropdownMenu
width: parent.width
height: parent.height - (root.enableFuzzySearch ? searchContainer.height
+ Theme.spacingXS : 0)
clip: true
model: filteredOptions
spacing: 2
// Qt 6.9+ scrolling: flickDeceleration/maximumFlickVelocity only affect touch now
interactive: true
flickDeceleration: 1500 // Touch only in Qt 6.9+ // Lower = more momentum, longer scrolling
maximumFlickVelocity: 2000 // Touch only in Qt 6.9+ // Higher = faster maximum scroll speed
boundsBehavior: Flickable.DragAndOvershootBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
ScrollBar.vertical: ScrollBar {
policy: ScrollBar.AsNeeded
}
ScrollBar.horizontal: ScrollBar {
policy: ScrollBar.AlwaysOff
}
delegate: Rectangle {
property bool isSelected: selectedIndex === index
property bool isCurrentValue: root.currentValue === modelData
property int optionIndex: root.options.indexOf(modelData)
width: ListView.view.width
height: 32
radius: Theme.cornerRadiusSmall
color: isSelected ? Theme.primaryHover : optionArea.containsMouse ? Theme.primaryHoverLight : "transparent"
Row {
anchors.left: parent.left
anchors.leftMargin: Theme.spacingS
anchors.verticalCenter: parent.verticalCenter
spacing: Theme.spacingS
DankIcon {
name: optionIndex >= 0 && root.optionIcons.length
> optionIndex ? root.optionIcons[optionIndex] : ""
size: 18
color: isCurrentValue ? Theme.primary : Theme.surfaceVariantText
visible: name !== ""
}
StyledText {
anchors.verticalCenter: parent.verticalCenter
text: modelData
font.pixelSize: Theme.fontSizeMedium
color: isCurrentValue ? Theme.primary : Theme.surfaceText
font.weight: isCurrentValue ? Font.Medium : Font.Normal
width: parent.parent.width - parent.x - Theme.spacingS
elide: Text.ElideRight
}
}
size: 18
color: Theme.surfaceVariantText
visible: name !== ""
MouseArea {
id: optionArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
root.currentValue = modelData
root.valueChanged(modelData)
dropdownMenu.close()
}
}
}
}
StyledText {
text: root.currentValue
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
width: dropdown.width - contentRow.x - expandIcon.width - Theme.spacingM - Theme.spacingS
elide: Text.ElideRight
}
}
}
DankIcon {
id: expandIcon
name: "expand_more"
size: 20
color: Theme.surfaceVariantText
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.rightMargin: Theme.spacingS
}
}
}
Loader {
id: popupLoader
property bool recreateFlag: root.forceRecreate
active: true
onRecreateFlagChanged: {
active = false;
active = true;
}
sourceComponent: Component {
Popup {
id: dropdownMenu
property string searchQuery: ""
property var filteredOptions: []
property int selectedIndex: -1
function updateFilteredOptions() {
if (!root.enableFuzzySearch || searchQuery.length === 0) {
filteredOptions = root.options;
} else {
var results = FuzzySort.go(searchQuery, root.options, {
"limit": 50,
"threshold": -10000
});
filteredOptions = results.map(function(result) {
return result.target;
});
}
selectedIndex = -1;
}
function selectNext() {
if (filteredOptions.length > 0) {
selectedIndex = (selectedIndex + 1) % filteredOptions.length;
listView.positionViewAtIndex(selectedIndex, ListView.Contain);
}
}
function selectPrevious() {
if (filteredOptions.length > 0) {
selectedIndex = selectedIndex <= 0 ? filteredOptions.length - 1 : selectedIndex - 1;
listView.positionViewAtIndex(selectedIndex, ListView.Contain);
}
}
function selectCurrent() {
if (selectedIndex >= 0 && selectedIndex < filteredOptions.length) {
root.currentValue = filteredOptions[selectedIndex];
root.valueChanged(filteredOptions[selectedIndex]);
close();
}
}
parent: Overlay.overlay
width: dropdown.width + root.popupWidthOffset
height: Math.min(root.maxPopupHeight, (root.enableFuzzySearch ? 54 : 0) + Math.min(filteredOptions.length, 10) * 36 + 16)
padding: 0
modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
onOpened: {
searchQuery = "";
updateFilteredOptions();
if (root.enableFuzzySearch && searchField.visible)
searchField.forceActiveFocus();
}
background: Rectangle {
color: "transparent"
}
contentItem: Rectangle {
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1)
border.color: Theme.primarySelected
border.width: 1
radius: Theme.cornerRadiusSmall
Column {
anchors.fill: parent
anchors.margins: Theme.spacingS
Rectangle {
id: searchContainer
width: parent.width
height: 42
visible: root.enableFuzzySearch
radius: Theme.cornerRadiusSmall
color: Theme.surfaceVariantAlpha
DankTextField {
id: searchField
anchors.fill: parent
anchors.margins: 1
placeholderText: "Search..."
text: searchQuery
topPadding: Theme.spacingS
bottomPadding: Theme.spacingS
onTextChanged: {
searchQuery = text;
updateFilteredOptions();
}
Keys.onDownPressed: selectNext()
Keys.onUpPressed: selectPrevious()
Keys.onReturnPressed: selectCurrent()
Keys.onEnterPressed: selectCurrent()
}
}
Item {
width: 1
height: Theme.spacingXS
visible: root.enableFuzzySearch
}
DankListView {
id: listView
property var popupRef: dropdownMenu
width: parent.width
height: parent.height - (root.enableFuzzySearch ? searchContainer.height + Theme.spacingXS : 0)
clip: true
model: filteredOptions
spacing: 2
// Qt 6.9+ scrolling: flickDeceleration/maximumFlickVelocity only affect touch now
interactive: true
flickDeceleration: 1500 // Touch only in Qt 6.9+ // Lower = more momentum, longer scrolling
maximumFlickVelocity: 2000 // Touch only in Qt 6.9+ // Higher = faster maximum scroll speed
boundsBehavior: Flickable.DragAndOvershootBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
ScrollBar.vertical: ScrollBar {
policy: ScrollBar.AsNeeded
}
ScrollBar.horizontal: ScrollBar {
policy: ScrollBar.AlwaysOff
}
delegate: Rectangle {
property bool isSelected: selectedIndex === index
property bool isCurrentValue: root.currentValue === modelData
property int optionIndex: root.options.indexOf(modelData)
width: ListView.view.width
height: 32
radius: Theme.cornerRadiusSmall
color: isSelected ? Theme.primaryHover : optionArea.containsMouse ? Theme.primaryHoverLight : "transparent"
Row {
anchors.left: parent.left
anchors.leftMargin: Theme.spacingS
anchors.verticalCenter: parent.verticalCenter
spacing: Theme.spacingS
DankIcon {
name: optionIndex >= 0 && root.optionIcons.length > optionIndex ? root.optionIcons[optionIndex] : ""
size: 18
color: isCurrentValue ? Theme.primary : Theme.surfaceVariantText
visible: name !== ""
}
StyledText {
anchors.verticalCenter: parent.verticalCenter
text: modelData
font.pixelSize: Theme.fontSizeMedium
color: isCurrentValue ? Theme.primary : Theme.surfaceText
font.weight: isCurrentValue ? Font.Medium : Font.Normal
width: parent.parent.width - parent.x - Theme.spacingS
elide: Text.ElideRight
}
}
MouseArea {
id: optionArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
root.currentValue = modelData;
root.valueChanged(modelData);
dropdownMenu.close();
}
}
}
}
}
}
}
}
}
}
}

391
Widgets/DankFlickable.qml
View File

@@ -3,204 +3,225 @@ import QtQuick.Controls
import qs.Common
Flickable {
id: flickable
id: flickable
property real mouseWheelSpeed: 60
property real momentumVelocity: 0
property bool isMomentumActive: false
property real friction: 0.95
property real minMomentumVelocity: 50
property real maxMomentumVelocity: 2500
// Internal: controls transient scrollbar visibility
property bool _scrollBarActive: false
property real mouseWheelSpeed: 60
property real momentumVelocity: 0
property bool isMomentumActive: false
property real friction: 0.95
property real minMomentumVelocity: 50
property real maxMomentumVelocity: 2500
// Internal: controls transient scrollbar visibility
property bool _scrollBarActive: false
flickDeceleration: 1500
maximumFlickVelocity: 2000
boundsBehavior: Flickable.StopAtBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
flickDeceleration: 1500
maximumFlickVelocity: 2000
boundsBehavior: Flickable.StopAtBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
WheelHandler {
id: wheelHandler
WheelHandler {
id: wheelHandler
property real touchpadSpeed: 1.8
property real momentumRetention: 0.92
property real lastWheelTime: 0
property real momentum: 0
property var velocitySamples: []
property real touchpadSpeed: 1.8
property real momentumRetention: 0.92
property real lastWheelTime: 0
property real momentum: 0
property var velocitySamples: []
function startMomentum() {
flickable.isMomentumActive = true;
momentumTimer.start();
}
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
onWheel: (event) => {
// Activate scrollbar on any wheel interaction
flickable._scrollBarActive = true;
hideScrollBarTimer.restart();
let currentTime = Date.now();
let timeDelta = currentTime - lastWheelTime;
lastWheelTime = currentTime;
const deltaY = event.angleDelta.y;
const isMouseWheel = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0;
if (isMouseWheel) {
momentumTimer.stop();
flickable.isMomentumActive = false;
velocitySamples = [];
momentum = 0;
const lines = Math.floor(Math.abs(deltaY) / 120);
const scrollAmount = (deltaY > 0 ? -lines : lines) * flickable.mouseWheelSpeed;
let newY = flickable.contentY + scrollAmount;
newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY));
if (flickable.flicking)
flickable.cancelFlick();
flickable.contentY = newY;
} else {
momentumTimer.stop();
flickable.isMomentumActive = false;
let delta = 0;
if (event.pixelDelta.y !== 0) {
delta = event.pixelDelta.y * touchpadSpeed;
} else {
delta = event.angleDelta.y / 8 * touchpadSpeed;
}
velocitySamples.push({
"delta": delta,
"time": currentTime
});
velocitySamples = velocitySamples.filter((s) => {
return currentTime - s.time < 100;
});
if (velocitySamples.length > 1) {
let totalDelta = velocitySamples.reduce((sum, s) => {
return sum + s.delta;
}, 0);
let timeSpan = currentTime - velocitySamples[0].time;
if (timeSpan > 0)
flickable.momentumVelocity = Math.max(-flickable.maxMomentumVelocity,
Math.min(flickable.maxMomentumVelocity,
totalDelta / timeSpan * 1000));
}
if (event.pixelDelta.y !== 0 && timeDelta < 50) {
momentum = momentum * momentumRetention + delta * 0.15;
delta += momentum;
} else {
momentum = 0;
}
let newY = flickable.contentY - delta;
newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY));
if (flickable.flicking)
flickable.cancelFlick();
flickable.contentY = newY;
}
event.accepted = true;
}
onActiveChanged: {
if (!active) {
if (Math.abs(flickable.momentumVelocity) >= flickable.minMomentumVelocity) {
startMomentum();
} else {
velocitySamples = [];
flickable.momentumVelocity = 0;
}
}
}
function startMomentum() {
flickable.isMomentumActive = true
momentumTimer.start()
}
// Show scrollbar while flicking / momentum
onMovementStarted: {
_scrollBarActive = true;
hideScrollBarTimer.stop();
}
onMovementEnded: hideScrollBarTimer.restart()
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
Timer {
id: momentumTimer
interval: 16
repeat: true
onTriggered: {
let newY = flickable.contentY - flickable.momentumVelocity * 0.016;
let maxY = Math.max(0, flickable.contentHeight - flickable.height);
if (newY < 0) {
flickable.contentY = 0;
stop();
flickable.isMomentumActive = false;
flickable.momentumVelocity = 0;
return;
} else if (newY > maxY) {
flickable.contentY = maxY;
stop();
flickable.isMomentumActive = false;
flickable.momentumVelocity = 0;
return;
}
flickable.contentY = newY;
flickable.momentumVelocity *= flickable.friction;
if (Math.abs(flickable.momentumVelocity) < 5) {
stop();
flickable.isMomentumActive = false;
flickable.momentumVelocity = 0;
}
onWheel: event => {
// Activate scrollbar on any wheel interaction
flickable._scrollBarActive = true
hideScrollBarTimer.restart()
let currentTime = Date.now()
let timeDelta = currentTime - lastWheelTime
lastWheelTime = currentTime
const deltaY = event.angleDelta.y
const isMouseWheel = Math.abs(deltaY) >= 120
&& (Math.abs(deltaY) % 120) === 0
if (isMouseWheel) {
momentumTimer.stop()
flickable.isMomentumActive = false
velocitySamples = []
momentum = 0
const lines = Math.floor(Math.abs(deltaY) / 120)
const scrollAmount = (deltaY > 0 ? -lines : lines) * flickable.mouseWheelSpeed
let newY = flickable.contentY + scrollAmount
newY = Math.max(0, Math.min(
flickable.contentHeight - flickable.height,
newY))
if (flickable.flicking)
flickable.cancelFlick()
flickable.contentY = newY
} else {
momentumTimer.stop()
flickable.isMomentumActive = false
let delta = 0
if (event.pixelDelta.y !== 0) {
delta = event.pixelDelta.y * touchpadSpeed
} else {
delta = event.angleDelta.y / 8 * touchpadSpeed
}
velocitySamples.push({
"delta": delta,
"time": currentTime
})
velocitySamples = velocitySamples.filter(s => {
return currentTime - s.time < 100
})
if (velocitySamples.length > 1) {
let totalDelta = velocitySamples.reduce((sum, s) => {
return sum + s.delta
}, 0)
let timeSpan = currentTime - velocitySamples[0].time
if (timeSpan > 0)
flickable.momentumVelocity = Math.max(
-flickable.maxMomentumVelocity,
Math.min(flickable.maxMomentumVelocity,
totalDelta / timeSpan * 1000))
}
if (event.pixelDelta.y !== 0 && timeDelta < 50) {
momentum = momentum * momentumRetention + delta * 0.15
delta += momentum
} else {
momentum = 0
}
let newY = flickable.contentY - delta
newY = Math.max(0, Math.min(
flickable.contentHeight - flickable.height,
newY))
if (flickable.flicking)
flickable.cancelFlick()
flickable.contentY = newY
}
event.accepted = true
}
onActiveChanged: {
if (!active) {
if (Math.abs(
flickable.momentumVelocity) >= flickable.minMomentumVelocity) {
startMomentum()
} else {
velocitySamples = []
flickable.momentumVelocity = 0
}
}
}
}
NumberAnimation {
id: returnToBoundsAnimation
target: flickable
property: "contentY"
duration: 300
// Show scrollbar while flicking / momentum
onMovementStarted: {
_scrollBarActive = true
hideScrollBarTimer.stop()
}
onMovementEnded: hideScrollBarTimer.restart()
Timer {
id: momentumTimer
interval: 16
repeat: true
onTriggered: {
let newY = flickable.contentY - flickable.momentumVelocity * 0.016
let maxY = Math.max(0, flickable.contentHeight - flickable.height)
if (newY < 0) {
flickable.contentY = 0
stop()
flickable.isMomentumActive = false
flickable.momentumVelocity = 0
return
} else if (newY > maxY) {
flickable.contentY = maxY
stop()
flickable.isMomentumActive = false
flickable.momentumVelocity = 0
return
}
flickable.contentY = newY
flickable.momentumVelocity *= flickable.friction
if (Math.abs(flickable.momentumVelocity) < 5) {
stop()
flickable.isMomentumActive = false
flickable.momentumVelocity = 0
}
}
}
NumberAnimation {
id: returnToBoundsAnimation
target: flickable
property: "contentY"
duration: 300
easing.type: Easing.OutQuad
}
// Styled vertical scrollbar (auto-hide, no track)
ScrollBar.vertical: ScrollBar {
id: vbar
policy: flickable.contentHeight > flickable.height ? ScrollBar.AsNeeded : ScrollBar.AlwaysOff
minimumSize: 0.08
implicitWidth: 10
interactive: true
hoverEnabled: true
z: 1000
opacity: (policy !== ScrollBar.AlwaysOff)
&& (vbar.pressed || vbar.hovered || vbar.active || flickable.moving
|| flickable.flicking || flickable.isMomentumActive
|| flickable._scrollBarActive) ? 1 : 0
visible: policy !== ScrollBar.AlwaysOff
Behavior on opacity {
NumberAnimation {
duration: 160
easing.type: Easing.OutQuad
}
}
// Styled vertical scrollbar (auto-hide, no track)
ScrollBar.vertical: ScrollBar {
id: vbar
policy: flickable.contentHeight > flickable.height ? ScrollBar.AsNeeded : ScrollBar.AlwaysOff
minimumSize: 0.08
implicitWidth: 10
interactive: true
hoverEnabled: true
z: 1000
opacity: (policy !== ScrollBar.AlwaysOff) && (vbar.pressed || vbar.hovered || vbar.active || flickable.moving || flickable.flicking || flickable.isMomentumActive || flickable._scrollBarActive) ? 1 : 0
visible: policy !== ScrollBar.AlwaysOff
Behavior on opacity { NumberAnimation { duration: 160; easing.type: Easing.OutQuad } }
contentItem: Rectangle {
implicitWidth: 6
radius: width / 2
color: vbar.pressed ? Theme.primary
: (vbar.hovered || vbar.active || flickable.moving || flickable.flicking || flickable.isMomentumActive || flickable._scrollBarActive ? Theme.outline : Theme.outlineMedium)
opacity: vbar.pressed ? 1 : (vbar.hovered || vbar.active || flickable.moving || flickable.flicking || flickable.isMomentumActive || flickable._scrollBarActive ? 1 : 0.6)
}
background: Item {}
contentItem: Rectangle {
implicitWidth: 6
radius: width / 2
color: vbar.pressed ? Theme.primary : (vbar.hovered || vbar.active
|| flickable.moving
|| flickable.flicking
|| flickable.isMomentumActive
|| flickable._scrollBarActive ? Theme.outline : Theme.outlineMedium)
opacity: vbar.pressed ? 1 : (vbar.hovered || vbar.active
|| flickable.moving || flickable.flicking
|| flickable.isMomentumActive
|| flickable._scrollBarActive ? 1 : 0.6)
}
Timer {
id: hideScrollBarTimer
interval: 1200
onTriggered: flickable._scrollBarActive = false
}
}
background: Item {}
}
Timer {
id: hideScrollBarTimer
interval: 1200
onTriggered: flickable._scrollBarActive = false
}
}

330
Widgets/DankGridView.qml
View File

@@ -2,178 +2,182 @@ import QtQuick
import QtQuick.Controls
GridView {
id: gridView
id: gridView
// Kinetic scrolling momentum properties
property real momentumVelocity: 0
property bool isMomentumActive: false
property real friction: 0.95
property real minMomentumVelocity: 50
property real maxMomentumVelocity: 2500
// Kinetic scrolling momentum properties
property real momentumVelocity: 0
property bool isMomentumActive: false
property real friction: 0.95
property real minMomentumVelocity: 50
property real maxMomentumVelocity: 2500
flickDeceleration: 1500
maximumFlickVelocity: 2000
boundsBehavior: Flickable.StopAtBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
flickDeceleration: 1500
maximumFlickVelocity: 2000
boundsBehavior: Flickable.StopAtBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
WheelHandler {
id: wheelHandler
WheelHandler {
id: wheelHandler
// Tunable parameters for responsive scrolling
property real mouseWheelSpeed: 60
// Higher = faster mouse wheel
property real touchpadSpeed: 1.8
// Touchpad sensitivity
property real momentumRetention: 0.92
property real lastWheelTime: 0
property real momentum: 0
property var velocitySamples: []
// Tunable parameters for responsive scrolling
property real mouseWheelSpeed: 60
// Higher = faster mouse wheel
property real touchpadSpeed: 1.8
// Touchpad sensitivity
property real momentumRetention: 0.92
property real lastWheelTime: 0
property real momentum: 0
property var velocitySamples: []
function startMomentum() {
isMomentumActive = true;
momentumTimer.start();
}
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
onWheel: (event) => {
let currentTime = Date.now();
let timeDelta = currentTime - lastWheelTime;
lastWheelTime = currentTime;
// Detect mouse wheel vs touchpad
const deltaY = event.angleDelta.y;
const isMouseWheel = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0;
if (isMouseWheel) {
// Fixed scrolling for mouse wheel - 2 cells per click
momentumTimer.stop();
isMomentumActive = false;
velocitySamples = [];
momentum = 0;
const lines = Math.floor(Math.abs(deltaY) / 120);
const scrollAmount = (deltaY > 0 ? -lines : lines) * cellHeight * 0.15; // 0.15 cells per wheel click
let newY = contentY + scrollAmount;
newY = Math.max(0, Math.min(contentHeight - height, newY));
if (flicking)
cancelFlick();
contentY = newY;
} else {
// Touchpad - existing smooth kinetic scrolling
// Stop any existing momentum
momentumTimer.stop();
isMomentumActive = false;
// Calculate scroll delta based on input type
let delta = 0;
if (event.pixelDelta.y !== 0)
// Touchpad with pixel precision
delta = event.pixelDelta.y * touchpadSpeed;
else
// Fallback for touchpad without pixel delta
delta = event.angleDelta.y / 120 * cellHeight * 1.2;
// Track velocity for momentum
velocitySamples.push({
"delta": delta,
"time": currentTime
});
velocitySamples = velocitySamples.filter((s) => {
return currentTime - s.time < 100;
});
// Calculate momentum velocity from samples
if (velocitySamples.length > 1) {
let totalDelta = velocitySamples.reduce((sum, s) => {
return sum + s.delta;
}, 0);
let timeSpan = currentTime - velocitySamples[0].time;
if (timeSpan > 0)
momentumVelocity = Math.max(-maxMomentumVelocity, Math.min(maxMomentumVelocity, totalDelta / timeSpan * 1000));
}
// Apply momentum for touchpad (smooth continuous scrolling)
if (event.pixelDelta.y !== 0 && timeDelta < 50) {
momentum = momentum * momentumRetention + delta * 0.15;
delta += momentum;
} else {
momentum = 0;
}
// Apply scrolling with proper bounds checking
let newY = contentY - delta;
newY = Math.max(0, Math.min(contentHeight - height, newY));
// Cancel any conflicting flicks and apply new position
if (flicking)
cancelFlick();
contentY = newY;
}
event.accepted = true;
}
onActiveChanged: {
if (!active && Math.abs(momentumVelocity) >= minMomentumVelocity) {
startMomentum();
} else if (!active) {
velocitySamples = [];
momentumVelocity = 0;
}
}
function startMomentum() {
isMomentumActive = true
momentumTimer.start()
}
// Physics-based momentum timer for kinetic scrolling
Timer {
id: momentumTimer
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
onWheel: event => {
let currentTime = Date.now()
let timeDelta = currentTime - lastWheelTime
lastWheelTime = currentTime
interval: 16 // ~60 FPS
repeat: true
onTriggered: {
// Apply velocity to position
let newY = contentY - momentumVelocity * 0.016;
let maxY = Math.max(0, contentHeight - height);
// Stop momentum at boundaries instead of bouncing
if (newY < 0) {
contentY = 0;
stop();
isMomentumActive = false;
momentumVelocity = 0;
return;
} else if (newY > maxY) {
contentY = maxY;
stop();
isMomentumActive = false;
momentumVelocity = 0;
return;
}
contentY = newY;
// Apply friction
momentumVelocity *= friction;
// Stop if velocity too low
if (Math.abs(momentumVelocity) < 5) {
stop();
isMomentumActive = false;
momentumVelocity = 0;
}
}
// Detect mouse wheel vs touchpad
const deltaY = event.angleDelta.y
const isMouseWheel = Math.abs(deltaY) >= 120
&& (Math.abs(deltaY) % 120) === 0
if (isMouseWheel) {
// Fixed scrolling for mouse wheel - 2 cells per click
momentumTimer.stop()
isMomentumActive = false
velocitySamples = []
momentum = 0
const lines = Math.floor(Math.abs(deltaY) / 120)
const scrollAmount = (deltaY > 0 ? -lines : lines) * cellHeight * 0.35
// 0.15 cells per wheel click
let newY = contentY + scrollAmount
newY = Math.max(0, Math.min(contentHeight - height, newY))
if (flicking)
cancelFlick()
contentY = newY
} else {
// Touchpad - existing smooth kinetic scrolling
// Stop any existing momentum
momentumTimer.stop()
isMomentumActive = false
// Calculate scroll delta based on input type
let delta = 0
if (event.pixelDelta.y !== 0)
// Touchpad with pixel precision
delta = event.pixelDelta.y * touchpadSpeed
else
// Fallback for touchpad without pixel delta
delta = event.angleDelta.y / 120 * cellHeight * 1.2
// Track velocity for momentum
velocitySamples.push({
"delta": delta,
"time": currentTime
})
velocitySamples = velocitySamples.filter(s => {
return currentTime - s.time < 100
})
// Calculate momentum velocity from samples
if (velocitySamples.length > 1) {
let totalDelta = velocitySamples.reduce((sum, s) => {
return sum + s.delta
}, 0)
let timeSpan = currentTime - velocitySamples[0].time
if (timeSpan > 0)
momentumVelocity = Math.max(-maxMomentumVelocity, Math.min(
maxMomentumVelocity,
totalDelta / timeSpan * 1000))
}
// Apply momentum for touchpad (smooth continuous scrolling)
if (event.pixelDelta.y !== 0 && timeDelta < 50) {
momentum = momentum * momentumRetention + delta * 0.15
delta += momentum
} else {
momentum = 0
}
// Apply scrolling with proper bounds checking
let newY = contentY - delta
newY = Math.max(0, Math.min(contentHeight - height, newY))
// Cancel any conflicting flicks and apply new position
if (flicking)
cancelFlick()
contentY = newY
}
event.accepted = true
}
onActiveChanged: {
if (!active && Math.abs(momentumVelocity) >= minMomentumVelocity) {
startMomentum()
} else if (!active) {
velocitySamples = []
momentumVelocity = 0
}
}
}
// Smooth return to bounds animation
NumberAnimation {
id: returnToBoundsAnimation
// Physics-based momentum timer for kinetic scrolling
Timer {
id: momentumTimer
target: gridView
property: "contentY"
duration: 300
easing.type: Easing.OutQuad
interval: 16 // ~60 FPS
repeat: true
onTriggered: {
// Apply velocity to position
let newY = contentY - momentumVelocity * 0.016
let maxY = Math.max(0, contentHeight - height)
// Stop momentum at boundaries instead of bouncing
if (newY < 0) {
contentY = 0
stop()
isMomentumActive = false
momentumVelocity = 0
return
} else if (newY > maxY) {
contentY = maxY
stop()
isMomentumActive = false
momentumVelocity = 0
return
}
contentY = newY
// Apply friction
momentumVelocity *= friction
// Stop if velocity too low
if (Math.abs(momentumVelocity) < 5) {
stop()
isMomentumActive = false
momentumVelocity = 0
}
}
}
}
// Smooth return to bounds animation
NumberAnimation {
id: returnToBoundsAnimation
target: gridView
property: "contentY"
duration: 300
easing.type: Easing.OutQuad
}
}

67
Widgets/DankIcon.qml
View File

@@ -2,45 +2,42 @@ import QtQuick
import qs.Common
StyledText {
id: icon
id: icon
property alias name: icon.text
property alias size: icon.font.pixelSize
property alias color: icon.color
property bool filled: false
property real fill: filled ? 1 : 0
property int grade: Theme.isLightMode ? 0 : -25
property int weight: filled ? 500 : 400
property alias name: icon.text
property alias size: icon.font.pixelSize
property alias color: icon.color
property bool filled: false
property real fill: filled ? 1 : 0
property int grade: Theme.isLightMode ? 0 : -25
property int weight: filled ? 500 : 400
font.family: "Material Symbols Rounded"
font.pixelSize: Appearance.fontSize.normal
font.weight: weight
color: Theme.surfaceText
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.variableAxes: ({
"FILL": fill.toFixed(1),
"GRAD": grade,
"opsz": 24,
"wght": weight
})
Behavior on fill {
NumberAnimation {
duration: Appearance.anim.durations.quick
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
font.family: "Material Symbols Rounded"
font.pixelSize: Appearance.fontSize.normal
font.weight: weight
color: Theme.surfaceText
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.variableAxes: ({
"FILL": fill.toFixed(1),
"GRAD": grade,
"opsz": 24,
"wght": weight
})
Behavior on fill {
NumberAnimation {
duration: Appearance.anim.durations.quick
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
Behavior on weight {
NumberAnimation {
duration: Appearance.anim.durations.quick
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
Behavior on weight {
NumberAnimation {
duration: Appearance.anim.durations.quick
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
}

389
Widgets/DankListView.qml
View File

@@ -2,211 +2,214 @@ import QtQuick
import QtQuick.Controls
ListView {
id: listView
id: listView
property real mouseWheelSpeed: 60
property real mouseWheelSpeed: 60
// Simple position preservation
property real savedY: 0
property bool justChanged: false
property bool isUserScrolling: false
// Simple position preservation
property real savedY: 0
property bool justChanged: false
property bool isUserScrolling: false
// Kinetic scrolling momentum properties
property real momentumVelocity: 0
property bool isMomentumActive: false
property real friction: 0.95
property real minMomentumVelocity: 50
property real maxMomentumVelocity: 2500
// Kinetic scrolling momentum properties
property real momentumVelocity: 0
property bool isMomentumActive: false
property real friction: 0.95
property real minMomentumVelocity: 50
property real maxMomentumVelocity: 2500
flickDeceleration: 1500
maximumFlickVelocity: 2000
boundsBehavior: Flickable.StopAtBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
flickDeceleration: 1500
maximumFlickVelocity: 2000
boundsBehavior: Flickable.StopAtBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
onMovementStarted: isUserScrolling = true
onMovementEnded: isUserScrolling = false
onContentYChanged: {
if (!justChanged && isUserScrolling) {
savedY = contentY;
}
justChanged = false;
onMovementStarted: isUserScrolling = true
onMovementEnded: isUserScrolling = false
onContentYChanged: {
if (!justChanged && isUserScrolling) {
savedY = contentY
}
// Restore position when model changes
onModelChanged: {
justChanged = true;
contentY = savedY;
justChanged = false
}
// Restore position when model changes
onModelChanged: {
justChanged = true
contentY = savedY
}
WheelHandler {
id: wheelHandler
// Tunable parameters for responsive scrolling
property real touchpadSpeed: 1.8 // Touchpad sensitivity
property real momentumRetention: 0.92
property real lastWheelTime: 0
property real momentum: 0
property var velocitySamples: []
function startMomentum() {
isMomentumActive = true
momentumTimer.start()
}
WheelHandler {
id: wheelHandler
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
// Tunable parameters for responsive scrolling
property real touchpadSpeed: 1.8 // Touchpad sensitivity
property real momentumRetention: 0.92
property real lastWheelTime: 0
property real momentum: 0
property var velocitySamples: []
onWheel: event => {
isUserScrolling = true // Mark as user interaction
function startMomentum() {
isMomentumActive = true;
momentumTimer.start();
}
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
onWheel: (event) => {
isUserScrolling = true; // Mark as user interaction
let currentTime = Date.now();
let timeDelta = currentTime - lastWheelTime;
lastWheelTime = currentTime;
// Detect mouse wheel vs touchpad, seems like assuming based on the increments is the only way in QT
const deltaY = event.angleDelta.y;
const isMouseWheel = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0;
if (isMouseWheel) {
momentumTimer.stop();
isMomentumActive = false;
velocitySamples = [];
momentum = 0;
const lines = Math.floor(Math.abs(deltaY) / 120);
const scrollAmount = (deltaY > 0 ? -lines : lines) * mouseWheelSpeed;
let newY = listView.contentY + scrollAmount;
newY = Math.max(0, Math.min(listView.contentHeight - listView.height, newY));
if (listView.flicking)
listView.cancelFlick();
listView.contentY = newY;
savedY = newY;
} else {
momentumTimer.stop();
isMomentumActive = false;
// Calculate scroll delta based on input type
let delta = 0;
if (event.pixelDelta.y !== 0) {
// Touchpad with pixel precision
delta = event.pixelDelta.y * touchpadSpeed;
} else {
// Fallback for touchpad without pixel delta
delta = event.angleDelta.y / 8 * touchpadSpeed;
}
// Track velocity for momentum
velocitySamples.push({
"delta": delta,
"time": currentTime
});
velocitySamples = velocitySamples.filter((s) => {
return currentTime - s.time < 100;
});
// Calculate momentum velocity from samples
if (velocitySamples.length > 1) {
let totalDelta = velocitySamples.reduce((sum, s) => {
return sum + s.delta;
}, 0);
let timeSpan = currentTime - velocitySamples[0].time;
if (timeSpan > 0)
momentumVelocity = Math.max(-maxMomentumVelocity,
Math.min(maxMomentumVelocity,
totalDelta / timeSpan * 1000));
}
// Apply momentum for touchpad (smooth continuous scrolling)
if (event.pixelDelta.y !== 0 && timeDelta < 50) {
momentum = momentum * momentumRetention + delta * 0.15;
delta += momentum;
} else {
momentum = 0;
}
// Apply scrolling with proper bounds checking
let newY = listView.contentY - delta;
newY = Math.max(0, Math.min(listView.contentHeight - listView.height, newY));
// Cancel any conflicting flicks and apply new position
if (listView.flicking)
listView.cancelFlick();
listView.contentY = newY;
savedY = newY; // Update saved position
}
event.accepted = true;
}
onActiveChanged: {
if (!active) {
isUserScrolling = false;
// Start momentum if applicable (touchpad only)
if (Math.abs(momentumVelocity) >= minMomentumVelocity) {
startMomentum();
} else {
velocitySamples = [];
momentumVelocity = 0;
}
}
let currentTime = Date.now()
let timeDelta = currentTime - lastWheelTime
lastWheelTime = currentTime
// Detect mouse wheel vs touchpad, seems like assuming based on the increments is the only way in QT
const deltaY = event.angleDelta.y
const isMouseWheel = Math.abs(deltaY) >= 120
&& (Math.abs(deltaY) % 120) === 0
if (isMouseWheel) {
momentumTimer.stop()
isMomentumActive = false
velocitySamples = []
momentum = 0
const lines = Math.floor(Math.abs(deltaY) / 120)
const scrollAmount = (deltaY > 0 ? -lines : lines) * mouseWheelSpeed
let newY = listView.contentY + scrollAmount
newY = Math.max(
0, Math.min(listView.contentHeight - listView.height, newY))
if (listView.flicking)
listView.cancelFlick()
listView.contentY = newY
savedY = newY
} else {
momentumTimer.stop()
isMomentumActive = false
// Calculate scroll delta based on input type
let delta = 0
if (event.pixelDelta.y !== 0) {
// Touchpad with pixel precision
delta = event.pixelDelta.y * touchpadSpeed
} else {
// Fallback for touchpad without pixel delta
delta = event.angleDelta.y / 8 * touchpadSpeed
}
// Track velocity for momentum
velocitySamples.push({
"delta": delta,
"time": currentTime
})
velocitySamples = velocitySamples.filter(s => {
return currentTime - s.time < 100
})
// Calculate momentum velocity from samples
if (velocitySamples.length > 1) {
let totalDelta = velocitySamples.reduce((sum, s) => {
return sum + s.delta
}, 0)
let timeSpan = currentTime - velocitySamples[0].time
if (timeSpan > 0)
momentumVelocity = Math.max(-maxMomentumVelocity, Math.min(
maxMomentumVelocity,
totalDelta / timeSpan * 1000))
}
// Apply momentum for touchpad (smooth continuous scrolling)
if (event.pixelDelta.y !== 0 && timeDelta < 50) {
momentum = momentum * momentumRetention + delta * 0.15
delta += momentum
} else {
momentum = 0
}
// Apply scrolling with proper bounds checking
let newY = listView.contentY - delta
newY = Math.max(
0, Math.min(listView.contentHeight - listView.height, newY))
// Cancel any conflicting flicks and apply new position
if (listView.flicking)
listView.cancelFlick()
listView.contentY = newY
savedY = newY // Update saved position
}
event.accepted = true
}
onActiveChanged: {
if (!active) {
isUserScrolling = false
// Start momentum if applicable (touchpad only)
if (Math.abs(momentumVelocity) >= minMomentumVelocity) {
startMomentum()
} else {
velocitySamples = []
momentumVelocity = 0
}
}
}
}
// Physics-based momentum timer for kinetic scrolling (touchpad only)
Timer {
id: momentumTimer
interval: 16 // ~60 FPS
repeat: true
onTriggered: {
// Apply velocity to position
let newY = contentY - momentumVelocity * 0.016;
let maxY = Math.max(0, contentHeight - height);
// Stop momentum at boundaries instead of bouncing
if (newY < 0) {
contentY = 0;
savedY = 0;
stop();
isMomentumActive = false;
momentumVelocity = 0;
return;
} else if (newY > maxY) {
contentY = maxY;
savedY = maxY;
stop();
isMomentumActive = false;
momentumVelocity = 0;
return;
}
contentY = newY;
savedY = newY; // Keep updating saved position during momentum
// Apply friction
momentumVelocity *= friction;
// Stop if velocity too low
if (Math.abs(momentumVelocity) < 5) {
stop();
isMomentumActive = false;
momentumVelocity = 0;
}
}
}
// Physics-based momentum timer for kinetic scrolling (touchpad only)
Timer {
id: momentumTimer
interval: 16 // ~60 FPS
repeat: true
// Smooth return to bounds animation
NumberAnimation {
id: returnToBoundsAnimation
target: listView
property: "contentY"
duration: 300
easing.type: Easing.OutQuad
onTriggered: {
// Apply velocity to position
let newY = contentY - momentumVelocity * 0.016
let maxY = Math.max(0, contentHeight - height)
// Stop momentum at boundaries instead of bouncing
if (newY < 0) {
contentY = 0
savedY = 0
stop()
isMomentumActive = false
momentumVelocity = 0
return
} else if (newY > maxY) {
contentY = maxY
savedY = maxY
stop()
isMomentumActive = false
momentumVelocity = 0
return
}
contentY = newY
savedY = newY // Keep updating saved position during momentum
// Apply friction
momentumVelocity *= friction
// Stop if velocity too low
if (Math.abs(momentumVelocity) < 5) {
stop()
isMomentumActive = false
momentumVelocity = 0
}
}
}
}
// Smooth return to bounds animation
NumberAnimation {
id: returnToBoundsAnimation
target: listView
property: "contentY"
duration: 300
easing.type: Easing.OutQuad
}
}

605
Widgets/DankLocationSearch.qml
View File

@@ -5,350 +5,343 @@ import qs.Common
import qs.Widgets
Item {
id: root
id: root
property string currentLocation: ""
property string placeholderText: "Search for a location..."
property bool _internalChange: false
property bool isLoading: false
property string helperTextState: "default" // "default", "prompt", "searching", "found", "not_found"
property string currentSearchText: ""
property string currentLocation: ""
property string placeholderText: "Search for a location..."
property bool _internalChange: false
property bool isLoading: false
property string helperTextState: "default" // "default", "prompt", "searching", "found", "not_found"
property string currentSearchText: ""
signal locationSelected(string displayName, string coordinates)
signal locationSelected(string displayName, string coordinates)
function resetSearchState() {
locationSearchTimer.stop();
dropdownHideTimer.stop();
function resetSearchState() {
locationSearchTimer.stop()
dropdownHideTimer.stop()
if (locationSearcher.running)
locationSearcher.running = false
isLoading = false
searchResultsModel.clear()
helperTextState = "default"
}
width: parent.width
height: searchInputField.height + (searchDropdown.visible ? searchDropdown.height : 0)
ListModel {
id: searchResultsModel
}
Timer {
id: locationSearchTimer
interval: 500
running: false
repeat: false
onTriggered: {
if (locationInput.text.length > 2) {
if (locationSearcher.running)
locationSearcher.running = false;
locationSearcher.running = false
isLoading = false;
searchResultsModel.clear();
helperTextState = "default";
searchResultsModel.clear()
root.isLoading = true
root.helperTextState = "searching"
const searchLocation = locationInput.text
root.currentSearchText = searchLocation
const encodedLocation = encodeURIComponent(searchLocation)
const curlCommand = `curl -s --connect-timeout 5 --max-time 10 'https://nominatim.openstreetmap.org/search?q=${encodedLocation}&format=json&limit=5&addressdetails=1'`
locationSearcher.command = ["bash", "-c", curlCommand]
locationSearcher.running = true
}
}
}
Timer {
id: dropdownHideTimer
interval: 200
running: false
repeat: false
onTriggered: {
if (!locationInput.getActiveFocus() && !searchDropdown.hovered)
root.resetSearchState()
}
}
Process {
id: locationSearcher
command: ["bash", "-c", "echo"]
running: false
onExited: exitCode => {
root.isLoading = false
if (exitCode !== 0) {
searchResultsModel.clear()
root.helperTextState = "not_found"
}
}
stdout: StdioCollector {
onStreamFinished: {
if (root.currentSearchText !== locationInput.text)
return
const raw = text.trim()
root.isLoading = false
searchResultsModel.clear()
if (!raw || raw[0] !== "[") {
root.helperTextState = "not_found"
return
}
try {
const data = JSON.parse(raw)
if (data.length === 0) {
root.helperTextState = "not_found"
return
}
for (var i = 0; i < Math.min(data.length, 5); i++) {
const location = data[i]
if (location.display_name && location.lat && location.lon) {
const parts = location.display_name.split(', ')
let cleanName = parts[0]
if (parts.length > 1) {
const state = parts[parts.length - 2]
if (state && state !== cleanName)
cleanName += `, ${state}`
}
const query = `${location.lat},${location.lon}`
searchResultsModel.append({
"name": cleanName,
"query": query
})
}
}
root.helperTextState = "found"
} catch (e) {
root.helperTextState = "not_found"
}
}
}
}
Item {
id: searchInputField
width: parent.width
height: searchInputField.height + (searchDropdown.visible ? searchDropdown.height : 0)
height: 48
ListModel {
id: searchResultsModel
DankTextField {
id: locationInput
width: parent.width
height: parent.height
leftIconName: "search"
placeholderText: root.placeholderText
text: root.currentLocation
backgroundColor: Theme.surfaceVariant
normalBorderColor: Theme.primarySelected
focusedBorderColor: Theme.primary
onTextEdited: {
if (root._internalChange)
return
if (getActiveFocus()) {
if (text.length > 2) {
root.isLoading = true
root.helperTextState = "searching"
locationSearchTimer.restart()
} else {
root.resetSearchState()
root.helperTextState = "prompt"
}
}
}
onFocusStateChanged: hasFocus => {
if (hasFocus) {
dropdownHideTimer.stop()
if (text.length <= 2)
root.helperTextState = "prompt"
} else {
dropdownHideTimer.start()
}
}
}
Timer {
id: locationSearchTimer
DankIcon {
name: {
if (root.isLoading)
return "hourglass_empty"
interval: 500
running: false
repeat: false
onTriggered: {
if (locationInput.text.length > 2) {
if (locationSearcher.running)
locationSearcher.running = false;
if (searchResultsModel.count > 0)
return "check_circle"
searchResultsModel.clear();
root.isLoading = true;
root.helperTextState = "searching";
const searchLocation = locationInput.text;
root.currentSearchText = searchLocation;
const encodedLocation = encodeURIComponent(searchLocation);
const curlCommand = `curl -s --connect-timeout 5 --max-time 10 'https://nominatim.openstreetmap.org/search?q=${encodedLocation}&format=json&limit=5&addressdetails=1'`;
locationSearcher.command = ["bash", "-c", curlCommand];
locationSearcher.running = true;
}
if (locationInput.getActiveFocus() && locationInput.text.length > 2
&& !root.isLoading)
return "error"
return ""
}
size: Theme.iconSize - 4
color: {
if (root.isLoading)
return Theme.surfaceVariantText
if (searchResultsModel.count > 0)
return Theme.success || Theme.primary
if (locationInput.getActiveFocus() && locationInput.text.length > 2)
return Theme.error
return "transparent"
}
anchors.right: parent.right
anchors.rightMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
opacity: (locationInput.getActiveFocus()
&& locationInput.text.length > 2) ? 1 : 0
Behavior on opacity {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
Timer {
id: dropdownHideTimer
StyledRect {
id: searchDropdown
interval: 200
running: false
repeat: false
onTriggered: {
if (!locationInput.getActiveFocus() && !searchDropdown.hovered)
root.resetSearchState();
property bool hovered: false
}
}
Process {
id: locationSearcher
command: ["bash", "-c", "echo"]
running: false
onExited: (exitCode) => {
root.isLoading = false;
if (exitCode !== 0) {
searchResultsModel.clear();
root.helperTextState = "not_found";
}
}
stdout: StdioCollector {
onStreamFinished: {
if (root.currentSearchText !== locationInput.text)
return ;
const raw = text.trim();
root.isLoading = false;
searchResultsModel.clear();
if (!raw || raw[0] !== "[") {
root.helperTextState = "not_found";
return ;
}
try {
const data = JSON.parse(raw);
if (data.length === 0) {
root.helperTextState = "not_found";
return ;
}
for (let i = 0; i < Math.min(data.length, 5); i++) {
const location = data[i];
if (location.display_name && location.lat && location.lon) {
const parts = location.display_name.split(', ');
let cleanName = parts[0];
if (parts.length > 1) {
const state = parts[parts.length - 2];
if (state && state !== cleanName)
cleanName += `, ${state}`;
}
const query = `${location.lat},${location.lon}`;
searchResultsModel.append({
"name": cleanName,
"query": query
});
}
}
root.helperTextState = "found";
} catch (e) {
root.helperTextState = "not_found";
}
}
}
width: parent.width
height: Math.min(Math.max(
searchResultsModel.count * 38 + Theme.spacingS * 2, 50),
200)
y: searchInputField.height
radius: Theme.cornerRadius
color: Theme.popupBackground()
border.color: Theme.primarySelected
border.width: 1
visible: locationInput.getActiveFocus() && locationInput.text.length > 2
&& (searchResultsModel.count > 0 || root.isLoading)
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
parent.hovered = true
dropdownHideTimer.stop()
}
onExited: {
parent.hovered = false
if (!locationInput.getActiveFocus())
dropdownHideTimer.start()
}
acceptedButtons: Qt.NoButton
}
Item {
id: searchInputField
anchors.fill: parent
anchors.margins: Theme.spacingS
width: parent.width
height: 48
DankListView {
id: searchResultsList
DankTextField {
id: locationInput
anchors.fill: parent
clip: true
model: searchResultsModel
spacing: 2
width: parent.width
height: parent.height
leftIconName: "search"
placeholderText: root.placeholderText
text: root.currentLocation
backgroundColor: Theme.surfaceVariant
normalBorderColor: Theme.primarySelected
focusedBorderColor: Theme.primary
onTextEdited: {
if (root._internalChange)
return ;
// Qt 6.9+ scrolling: flickDeceleration/maximumFlickVelocity only affect touch now
interactive: true
flickDeceleration: 1500
maximumFlickVelocity: 2000
boundsBehavior: Flickable.DragAndOvershootBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
if (getActiveFocus()) {
if (text.length > 2) {
root.isLoading = true;
root.helperTextState = "searching";
locationSearchTimer.restart();
} else {
root.resetSearchState();
root.helperTextState = "prompt";
}
}
}
onFocusStateChanged: (hasFocus) => {
if (hasFocus) {
dropdownHideTimer.stop();
if (text.length <= 2)
root.helperTextState = "prompt";
// Custom wheel handler for Qt 6.9+ responsive mouse wheel scrolling
WheelHandler {
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
property real momentum: 0
onWheel: event => {
if (event.pixelDelta.y !== 0) {
// Touchpad with pixel delta
momentum = event.pixelDelta.y * 1.8
} else {
// Mouse wheel with angle delta
momentum = (event.angleDelta.y / 120)
* ((36 + parent.spacing) * 2.5) // ~2.5 items per wheel step
}
} else {
dropdownHideTimer.start();
}
}
let newY = parent.contentY - momentum
newY = Math.max(
0, Math.min(parent.contentHeight - parent.height, newY))
parent.contentY = newY
momentum *= 0.92 // Decay for smooth momentum
event.accepted = true
}
}
DankIcon {
name: {
if (root.isLoading)
return "hourglass_empty";
delegate: StyledRect {
width: searchResultsList.width
height: 36
radius: Theme.cornerRadius
color: resultMouseArea.containsMouse ? Theme.surfaceLight : "transparent"
if (searchResultsModel.count > 0)
return "check_circle";
if (locationInput.getActiveFocus() && locationInput.text.length > 2 && !root.isLoading)
return "error";
return "";
}
size: Theme.iconSize - 4
color: {
if (root.isLoading)
return Theme.surfaceVariantText;
if (searchResultsModel.count > 0)
return Theme.success || Theme.primary;
if (locationInput.getActiveFocus() && locationInput.text.length > 2)
return Theme.error;
return "transparent";
}
anchors.right: parent.right
anchors.rightMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
opacity: (locationInput.getActiveFocus() && locationInput.text.length > 2) ? 1 : 0
Behavior on opacity {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
StyledRect {
id: searchDropdown
property bool hovered: false
width: parent.width
height: Math.min(Math.max(searchResultsModel.count * 38 + Theme.spacingS * 2, 50), 200)
y: searchInputField.height
radius: Theme.cornerRadius
color: Theme.popupBackground()
border.color: Theme.primarySelected
border.width: 1
visible: locationInput.getActiveFocus() && locationInput.text.length > 2 && (searchResultsModel.count > 0 || root.isLoading)
MouseArea {
Row {
anchors.fill: parent
hoverEnabled: true
onEntered: {
parent.hovered = true;
dropdownHideTimer.stop();
}
onExited: {
parent.hovered = false;
if (!locationInput.getActiveFocus())
dropdownHideTimer.start();
}
acceptedButtons: Qt.NoButton
}
Item {
anchors.fill: parent
anchors.margins: Theme.spacingS
DankListView {
id: searchResultsList
anchors.fill: parent
clip: true
model: searchResultsModel
spacing: 2
// Qt 6.9+ scrolling: flickDeceleration/maximumFlickVelocity only affect touch now
interactive: true
flickDeceleration: 1500
maximumFlickVelocity: 2000
boundsBehavior: Flickable.DragAndOvershootBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
// Custom wheel handler for Qt 6.9+ responsive mouse wheel scrolling
WheelHandler {
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
property real momentum: 0
onWheel: (event) => {
if (event.pixelDelta.y !== 0) {
// Touchpad with pixel delta
momentum = event.pixelDelta.y * 1.8
} else {
// Mouse wheel with angle delta
momentum = (event.angleDelta.y / 120) * ((36 + parent.spacing) * 2.5) // ~2.5 items per wheel step
}
let newY = parent.contentY - momentum
newY = Math.max(0, Math.min(parent.contentHeight - parent.height, newY))
parent.contentY = newY
momentum *= 0.92 // Decay for smooth momentum
event.accepted = true
}
}
delegate: StyledRect {
width: searchResultsList.width
height: 36
radius: Theme.cornerRadius
color: resultMouseArea.containsMouse ? Theme.surfaceLight : "transparent"
Row {
anchors.fill: parent
anchors.margins: Theme.spacingM
spacing: Theme.spacingS
DankIcon {
name: "place"
size: Theme.iconSize - 6
color: Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
text: model.name || "Unknown"
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
elide: Text.ElideRight
width: parent.width - 30
}
}
MouseArea {
id: resultMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
root._internalChange = true;
const selectedName = model.name;
const selectedQuery = model.query;
locationInput.text = selectedName;
root.locationSelected(selectedName, selectedQuery);
root.resetSearchState();
locationInput.setFocus(false);
root._internalChange = false;
}
}
}
anchors.margins: Theme.spacingM
spacing: Theme.spacingS
DankIcon {
name: "place"
size: Theme.iconSize - 6
color: Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
anchors.centerIn: parent
text: root.isLoading ? "Searching..." : "No locations found"
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceVariantText
visible: searchResultsList.count === 0 && locationInput.text.length > 2
text: model.name || "Unknown"
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
elide: Text.ElideRight
width: parent.width - 30
}
}
MouseArea {
id: resultMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
root._internalChange = true
const selectedName = model.name
const selectedQuery = model.query
locationInput.text = selectedName
root.locationSelected(selectedName, selectedQuery)
root.resetSearchState()
locationInput.setFocus(false)
root._internalChange = false
}
}
}
}
StyledText {
anchors.centerIn: parent
text: root.isLoading ? "Searching..." : "No locations found"
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceVariantText
visible: searchResultsList.count === 0 && locationInput.text.length > 2
}
}
}
}

411
Widgets/DankSlider.qml
View File

@@ -3,225 +3,232 @@ import qs.Common
import qs.Widgets
Item {
id: slider
id: slider
property int value: 50
property int minimum: 0
property int maximum: 100
property string leftIcon: ""
property string rightIcon: ""
property bool enabled: true
property string unit: "%"
property bool showValue: true
property bool isDragging: false
property int value: 50
property int minimum: 0
property int maximum: 100
property string leftIcon: ""
property string rightIcon: ""
property bool enabled: true
property string unit: "%"
property bool showValue: true
property bool isDragging: false
signal sliderValueChanged(int newValue)
signal sliderDragFinished(int finalValue)
signal sliderValueChanged(int newValue)
signal sliderDragFinished(int finalValue)
height: 40
height: 40
Row {
anchors.centerIn: parent
width: parent.width
spacing: Theme.spacingM
Row {
anchors.centerIn: parent
width: parent.width
spacing: Theme.spacingM
DankIcon {
name: slider.leftIcon
size: Theme.iconSize
color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter
visible: slider.leftIcon.length > 0
DankIcon {
name: slider.leftIcon
size: Theme.iconSize
color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter
visible: slider.leftIcon.length > 0
}
StyledRect {
id: sliderTrack
property int leftIconWidth: slider.leftIcon.length > 0 ? Theme.iconSize : 0
property int rightIconWidth: slider.rightIcon.length > 0 ? Theme.iconSize : 0
width: parent.width - (leftIconWidth + rightIconWidth
+ (slider.leftIcon.length > 0 ? Theme.spacingM : 0)
+ (slider.rightIcon.length > 0 ? Theme.spacingM : 0))
height: 6
radius: 3
color: slider.enabled ? Theme.surfaceVariantAlpha : Theme.surfaceLight
anchors.verticalCenter: parent.verticalCenter
StyledRect {
id: sliderFill
width: parent.width * ((slider.value - slider.minimum) / (slider.maximum - slider.minimum))
height: parent.height
radius: parent.radius
color: slider.enabled ? Theme.primary : Theme.surfaceVariantText
Behavior on width {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
StyledRect {
id: sliderHandle
width: 18
height: 18
radius: 9
color: slider.enabled ? Theme.primary : Theme.surfaceVariantText
border.color: slider.enabled ? Qt.lighter(Theme.primary,
1.3) : Qt.lighter(
Theme.surfaceVariantText, 1.3)
border.width: 2
x: Math.max(0, Math.min(parent.width - width,
sliderFill.width - width / 2))
anchors.verticalCenter: parent.verticalCenter
scale: sliderMouseArea.containsMouse
|| sliderMouseArea.pressed ? 1.2 : 1
StyledRect {
anchors.centerIn: parent
width: parent.width + 4
height: parent.height + 4
radius: width / 2
color: "transparent"
border.color: Theme.primarySelected
border.width: 2
visible: sliderMouseArea.containsMouse && slider.enabled
}
StyledRect {
id: sliderTrack
id: valueTooltip
property int leftIconWidth: slider.leftIcon.length > 0 ? Theme.iconSize : 0
property int rightIconWidth: slider.rightIcon.length > 0 ? Theme.iconSize : 0
width: tooltipText.contentWidth + Theme.spacingS * 2
height: tooltipText.contentHeight + Theme.spacingXS * 2
radius: Theme.cornerRadiusSmall
color: Theme.surfaceContainer
border.color: Theme.outline
border.width: 1
anchors.bottom: parent.top
anchors.bottomMargin: Theme.spacingS
anchors.horizontalCenter: parent.horizontalCenter
visible: (sliderMouseArea.containsMouse && slider.showValue)
|| (slider.isDragging && slider.showValue)
opacity: visible ? 1 : 0
width: parent.width - (leftIconWidth + rightIconWidth + (slider.leftIcon.length > 0 ? Theme.spacingM : 0) + (slider.rightIcon.length > 0 ? Theme.spacingM : 0))
height: 6
radius: 3
color: slider.enabled ? Theme.surfaceVariantAlpha : Theme.surfaceLight
anchors.verticalCenter: parent.verticalCenter
StyledText {
id: tooltipText
StyledRect {
id: sliderFill
width: parent.width * ((slider.value - slider.minimum) / (slider.maximum - slider.minimum))
height: parent.height
radius: parent.radius
color: slider.enabled ? Theme.primary : Theme.surfaceVariantText
Behavior on width {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
text: slider.value + slider.unit
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
anchors.centerIn: parent
font.hintingPreference: Font.PreferFullHinting
}
Behavior on opacity {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
StyledRect {
id: sliderHandle
width: 18
height: 18
radius: 9
color: slider.enabled ? Theme.primary : Theme.surfaceVariantText
border.color: slider.enabled ? Qt.lighter(Theme.primary, 1.3) : Qt.lighter(Theme.surfaceVariantText, 1.3)
border.width: 2
x: Math.max(0, Math.min(parent.width - width, sliderFill.width - width / 2))
anchors.verticalCenter: parent.verticalCenter
scale: sliderMouseArea.containsMouse || sliderMouseArea.pressed ? 1.2 : 1
StyledRect {
anchors.centerIn: parent
width: parent.width + 4
height: parent.height + 4
radius: width / 2
color: "transparent"
border.color: Theme.primarySelected
border.width: 2
visible: sliderMouseArea.containsMouse && slider.enabled
}
StyledRect {
id: valueTooltip
width: tooltipText.contentWidth + Theme.spacingS * 2
height: tooltipText.contentHeight + Theme.spacingXS * 2
radius: Theme.cornerRadiusSmall
color: Theme.surfaceContainer
border.color: Theme.outline
border.width: 1
anchors.bottom: parent.top
anchors.bottomMargin: Theme.spacingS
anchors.horizontalCenter: parent.horizontalCenter
visible: (sliderMouseArea.containsMouse && slider.showValue) || (slider.isDragging && slider.showValue)
opacity: visible ? 1 : 0
StyledText {
id: tooltipText
text: slider.value + slider.unit
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
anchors.centerIn: parent
font.hintingPreference: Font.PreferFullHinting
}
Behavior on opacity {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
Behavior on scale {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
Item {
id: sliderContainer
anchors.fill: parent
MouseArea {
id: sliderMouseArea
property bool isDragging: false
anchors.fill: parent
anchors.topMargin: -10
anchors.bottomMargin: -10
hoverEnabled: true
cursorShape: slider.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
enabled: slider.enabled
preventStealing: true
onPressed: (mouse) => {
if (slider.enabled) {
slider.isDragging = true;
sliderMouseArea.isDragging = true;
let ratio = Math.max(0, Math.min(1, mouse.x / width));
let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum));
slider.value = newValue;
slider.sliderValueChanged(newValue);
}
}
onReleased: {
if (slider.enabled) {
slider.isDragging = false;
sliderMouseArea.isDragging = false;
slider.sliderDragFinished(slider.value);
}
}
onPositionChanged: (mouse) => {
if (pressed && slider.isDragging && slider.enabled) {
let ratio = Math.max(0, Math.min(1, mouse.x / width));
let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum));
slider.value = newValue;
slider.sliderValueChanged(newValue);
}
}
onClicked: (mouse) => {
if (slider.enabled && !slider.isDragging) {
let ratio = Math.max(0, Math.min(1, mouse.x / width));
let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum));
slider.value = newValue;
slider.sliderValueChanged(newValue);
}
}
}
MouseArea {
id: sliderGlobalMouseArea
anchors.fill: sliderContainer
enabled: slider.isDragging
visible: false
preventStealing: true
onPositionChanged: (mouse) => {
if (slider.isDragging && slider.enabled) {
let globalPos = mapToItem(sliderTrack, mouse.x, mouse.y);
let ratio = Math.max(0, Math.min(1, globalPos.x / sliderTrack.width));
let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum));
slider.value = newValue;
slider.sliderValueChanged(newValue);
}
}
onReleased: {
if (slider.isDragging && slider.enabled) {
slider.isDragging = false;
sliderMouseArea.isDragging = false;
slider.sliderDragFinished(slider.value);
}
}
}
}
}
}
DankIcon {
name: slider.rightIcon
size: Theme.iconSize
color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter
visible: slider.rightIcon.length > 0
Behavior on scale {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
Item {
id: sliderContainer
anchors.fill: parent
MouseArea {
id: sliderMouseArea
property bool isDragging: false
anchors.fill: parent
anchors.topMargin: -10
anchors.bottomMargin: -10
hoverEnabled: true
cursorShape: slider.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
enabled: slider.enabled
preventStealing: true
onPressed: mouse => {
if (slider.enabled) {
slider.isDragging = true
sliderMouseArea.isDragging = true
let ratio = Math.max(0, Math.min(1, mouse.x / width))
let newValue = Math.round(
slider.minimum + ratio * (slider.maximum - slider.minimum))
slider.value = newValue
slider.sliderValueChanged(newValue)
}
}
onReleased: {
if (slider.enabled) {
slider.isDragging = false
sliderMouseArea.isDragging = false
slider.sliderDragFinished(slider.value)
}
}
onPositionChanged: mouse => {
if (pressed && slider.isDragging
&& slider.enabled) {
let ratio = Math.max(0,
Math.min(1,
mouse.x / width))
let newValue = Math.round(
slider.minimum + ratio * (slider.maximum - slider.minimum))
slider.value = newValue
slider.sliderValueChanged(newValue)
}
}
onClicked: mouse => {
if (slider.enabled && !slider.isDragging) {
let ratio = Math.max(0, Math.min(1, mouse.x / width))
let newValue = Math.round(
slider.minimum + ratio * (slider.maximum - slider.minimum))
slider.value = newValue
slider.sliderValueChanged(newValue)
}
}
}
MouseArea {
id: sliderGlobalMouseArea
anchors.fill: sliderContainer
enabled: slider.isDragging
visible: false
preventStealing: true
onPositionChanged: mouse => {
if (slider.isDragging && slider.enabled) {
let globalPos = mapToItem(sliderTrack,
mouse.x, mouse.y)
let ratio = Math.max(
0, Math.min(1,
globalPos.x / sliderTrack.width))
let newValue = Math.round(
slider.minimum + ratio * (slider.maximum - slider.minimum))
slider.value = newValue
slider.sliderValueChanged(newValue)
}
}
onReleased: {
if (slider.isDragging && slider.enabled) {
slider.isDragging = false
sliderMouseArea.isDragging = false
slider.sliderDragFinished(slider.value)
}
}
}
}
}
DankIcon {
name: slider.rightIcon
size: Theme.iconSize
color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter
visible: slider.rightIcon.length > 0
}
}
}

136
Widgets/DankTabBar.qml
View File

@@ -3,89 +3,85 @@ import qs.Common
import qs.Widgets
Item {
id: tabBar
id: tabBar
property alias model: tabRepeater.model
property int currentIndex: 0
property int spacing: Theme.spacingXS
property int tabHeight: 36
property bool showIcons: true
property bool equalWidthTabs: true
property alias model: tabRepeater.model
property int currentIndex: 0
property int spacing: Theme.spacingXS
property int tabHeight: 36
property bool showIcons: true
property bool equalWidthTabs: true
signal tabClicked(int index)
signal tabClicked(int index)
height: tabHeight
height: tabHeight
Row {
id: tabRow
Row {
id: tabRow
anchors.fill: parent
spacing: tabBar.spacing
anchors.fill: parent
spacing: tabBar.spacing
Repeater {
id: tabRepeater
Repeater {
id: tabRepeater
Rectangle {
property int tabCount: tabRepeater.count
property bool isActive: tabBar.currentIndex === index
property bool hasIcon: tabBar.showIcons && modelData.icon && modelData.icon.length > 0
property bool hasText: modelData.text && modelData.text.length > 0
Rectangle {
property int tabCount: tabRepeater.count
property bool isActive: tabBar.currentIndex === index
property bool hasIcon: tabBar.showIcons && modelData.icon
&& modelData.icon.length > 0
property bool hasText: modelData.text && modelData.text.length > 0
width: tabBar.equalWidthTabs ? (tabBar.width - tabBar.spacing * (tabCount - 1)) / tabCount : contentRow.implicitWidth + Theme.spacingM * 2
height: tabBar.tabHeight
radius: Theme.cornerRadiusSmall
color: isActive ? Theme.primaryPressed : tabArea.containsMouse ? Theme.primaryHoverLight : "transparent"
width: tabBar.equalWidthTabs ? (tabBar.width - tabBar.spacing * (tabCount - 1))
/ tabCount : contentRow.implicitWidth + Theme.spacingM * 2
height: tabBar.tabHeight
radius: Theme.cornerRadiusSmall
color: isActive ? Theme.primaryPressed : tabArea.containsMouse ? Theme.primaryHoverLight : "transparent"
Row {
id: contentRow
Row {
id: contentRow
anchors.centerIn: parent
spacing: Theme.spacingXS
anchors.centerIn: parent
spacing: Theme.spacingXS
DankIcon {
name: modelData.icon || ""
size: Theme.iconSize - 4
color: parent.parent.isActive ? Theme.primary : Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
visible: parent.parent.hasIcon
}
StyledText {
text: modelData.text || ""
font.pixelSize: Theme.fontSizeMedium
color: parent.parent.isActive ? Theme.primary : Theme.surfaceText
font.weight: parent.parent.isActive ? Font.Medium : Font.Normal
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1
visible: parent.parent.hasText
}
}
MouseArea {
id: tabArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
tabBar.currentIndex = index;
tabBar.tabClicked(index);
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
DankIcon {
name: modelData.icon || ""
size: Theme.iconSize - 4
color: parent.parent.isActive ? Theme.primary : Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
visible: parent.parent.hasIcon
}
StyledText {
text: modelData.text || ""
font.pixelSize: Theme.fontSizeMedium
color: parent.parent.isActive ? Theme.primary : Theme.surfaceText
font.weight: parent.parent.isActive ? Font.Medium : Font.Normal
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1
visible: parent.parent.hasText
}
}
}
MouseArea {
id: tabArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
tabBar.currentIndex = index
tabBar.tabClicked(index)
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
}
}

358
Widgets/DankTextField.qml
View File

@@ -4,204 +4,202 @@ import qs.Common
import qs.Widgets
StyledRect {
id: root
id: root
property alias text: textInput.text
property string placeholderText: ""
property alias font: textInput.font
property alias textColor: textInput.color
property alias selectByMouse: textInput.selectByMouse
property alias enabled: textInput.enabled
property alias echoMode: textInput.echoMode
property alias verticalAlignment: textInput.verticalAlignment
property alias cursorVisible: textInput.cursorVisible
property alias readOnly: textInput.readOnly
property alias validator: textInput.validator
property alias inputMethodHints: textInput.inputMethodHints
property alias maximumLength: textInput.maximumLength
property string leftIconName: ""
property int leftIconSize: Theme.iconSize
property color leftIconColor: Theme.surfaceVariantText
property color leftIconFocusedColor: Theme.primary
property bool showClearButton: false
property color backgroundColor: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.9)
property color focusedBorderColor: Theme.primary
property color normalBorderColor: Theme.outlineStrong
property color placeholderColor: Theme.outlineButton
property int borderWidth: 1
property int focusedBorderWidth: 2
property real cornerRadius: Theme.cornerRadius
readonly property real leftPadding: Theme.spacingM + (leftIconName ? leftIconSize + Theme.spacingM : 0)
readonly property real rightPadding: Theme.spacingM + (showClearButton && text.length > 0 ? 24 + Theme.spacingM : 0)
property real topPadding: Theme.spacingM
property real bottomPadding: Theme.spacingM
property bool ignoreLeftRightKeys: false
property var keyForwardTargets: []
property alias text: textInput.text
property string placeholderText: ""
property alias font: textInput.font
property alias textColor: textInput.color
property alias selectByMouse: textInput.selectByMouse
property alias enabled: textInput.enabled
property alias echoMode: textInput.echoMode
property alias verticalAlignment: textInput.verticalAlignment
property alias cursorVisible: textInput.cursorVisible
property alias readOnly: textInput.readOnly
property alias validator: textInput.validator
property alias inputMethodHints: textInput.inputMethodHints
property alias maximumLength: textInput.maximumLength
property string leftIconName: ""
property int leftIconSize: Theme.iconSize
property color leftIconColor: Theme.surfaceVariantText
property color leftIconFocusedColor: Theme.primary
property bool showClearButton: false
property color backgroundColor: Qt.rgba(Theme.surfaceContainer.r,
Theme.surfaceContainer.g,
Theme.surfaceContainer.b, 0.9)
property color focusedBorderColor: Theme.primary
property color normalBorderColor: Theme.outlineStrong
property color placeholderColor: Theme.outlineButton
property int borderWidth: 1
property int focusedBorderWidth: 2
property real cornerRadius: Theme.cornerRadius
readonly property real leftPadding: Theme.spacingM
+ (leftIconName ? leftIconSize + Theme.spacingM : 0)
readonly property real rightPadding: Theme.spacingM + (showClearButton
&& text.length
> 0 ? 24 + Theme.spacingM : 0)
property real topPadding: Theme.spacingM
property real bottomPadding: Theme.spacingM
property bool ignoreLeftRightKeys: false
property var keyForwardTargets: []
signal textEdited()
signal editingFinished()
signal accepted()
signal focusStateChanged(bool hasFocus)
signal textEdited
signal editingFinished
signal accepted
signal focusStateChanged(bool hasFocus)
function getActiveFocus() {
return textInput.activeFocus;
function getActiveFocus() {
return textInput.activeFocus
}
function getFocus() {
return textInput.focus
}
function setFocus(value) {
textInput.focus = value
}
function forceActiveFocus() {
textInput.forceActiveFocus()
}
function selectAll() {
textInput.selectAll()
}
function clear() {
textInput.clear()
}
function paste() {
textInput.paste()
}
function copy() {
textInput.copy()
}
function cut() {
textInput.cut()
}
function insertText(str) {
textInput.insert(textInput.cursorPosition, str)
}
function clearFocus() {
textInput.focus = false
}
width: 200
height: 48
radius: cornerRadius
color: backgroundColor
border.color: textInput.activeFocus ? focusedBorderColor : normalBorderColor
border.width: textInput.activeFocus ? focusedBorderWidth : borderWidth
DankIcon {
id: leftIcon
anchors.left: parent.left
anchors.leftMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
name: leftIconName
size: leftIconSize
color: textInput.activeFocus ? leftIconFocusedColor : leftIconColor
visible: leftIconName !== ""
}
TextInput {
id: textInput
anchors.fill: parent
anchors.leftMargin: root.leftPadding
anchors.rightMargin: root.rightPadding
anchors.topMargin: root.topPadding
anchors.bottomMargin: root.bottomPadding
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
verticalAlignment: TextInput.AlignVCenter
selectByMouse: !root.ignoreLeftRightKeys
clip: true
onTextChanged: root.textEdited()
onEditingFinished: root.editingFinished()
onAccepted: root.accepted()
onActiveFocusChanged: root.focusStateChanged(activeFocus)
Keys.forwardTo: root.ignoreLeftRightKeys ? root.keyForwardTargets : []
Keys.onLeftPressed: function (event) {
if (root.ignoreLeftRightKeys)
event.accepted = true
}
Keys.onRightPressed: function (event) {
if (root.ignoreLeftRightKeys)
event.accepted = true
}
function getFocus() {
return textInput.focus;
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.IBeamCursor
acceptedButtons: Qt.NoButton
}
}
function setFocus(value) {
textInput.focus = value;
}
StyledRect {
id: clearButton
function forceActiveFocus() {
textInput.forceActiveFocus();
}
function selectAll() {
textInput.selectAll();
}
function clear() {
textInput.clear();
}
function paste() {
textInput.paste();
}
function copy() {
textInput.copy();
}
function cut() {
textInput.cut();
}
function insertText(str) {
textInput.insert(textInput.cursorPosition, str);
}
function clearFocus() {
textInput.focus = false;
}
width: 200
height: 48
radius: cornerRadius
color: backgroundColor
border.color: textInput.activeFocus ? focusedBorderColor : normalBorderColor
border.width: textInput.activeFocus ? focusedBorderWidth : borderWidth
width: 24
height: 24
radius: 12
color: clearArea.containsMouse ? Theme.outlineStrong : "transparent"
anchors.right: parent.right
anchors.rightMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
visible: showClearButton && text.length > 0
DankIcon {
id: leftIcon
anchors.left: parent.left
anchors.leftMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
name: leftIconName
size: leftIconSize
color: textInput.activeFocus ? leftIconFocusedColor : leftIconColor
visible: leftIconName !== ""
anchors.centerIn: parent
name: "close"
size: 16
color: clearArea.containsMouse ? Theme.outline : Theme.surfaceVariantText
}
TextInput {
id: textInput
anchors.fill: parent
anchors.leftMargin: root.leftPadding
anchors.rightMargin: root.rightPadding
anchors.topMargin: root.topPadding
anchors.bottomMargin: root.bottomPadding
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
verticalAlignment: TextInput.AlignVCenter
selectByMouse: !root.ignoreLeftRightKeys
clip: true
onTextChanged: root.textEdited()
onEditingFinished: root.editingFinished()
onAccepted: root.accepted()
onActiveFocusChanged: root.focusStateChanged(activeFocus)
Keys.forwardTo: root.ignoreLeftRightKeys ? root.keyForwardTargets : []
Keys.onLeftPressed: function(event) {
if (root.ignoreLeftRightKeys)
event.accepted = true;
}
Keys.onRightPressed: function(event) {
if (root.ignoreLeftRightKeys)
event.accepted = true;
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.IBeamCursor
acceptedButtons: Qt.NoButton
}
MouseArea {
id: clearArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
textInput.text = ""
}
}
}
StyledRect {
id: clearButton
StyledText {
id: placeholderLabel
width: 24
height: 24
radius: 12
color: clearArea.containsMouse ? Theme.outlineStrong : "transparent"
anchors.right: parent.right
anchors.rightMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
visible: showClearButton && text.length > 0
DankIcon {
anchors.centerIn: parent
name: "close"
size: 16
color: clearArea.containsMouse ? Theme.outline : Theme.surfaceVariantText
}
MouseArea {
id: clearArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
textInput.text = "";
}
}
anchors.fill: textInput
text: root.placeholderText
font: textInput.font
color: placeholderColor
verticalAlignment: textInput.verticalAlignment
visible: textInput.text.length === 0 && !textInput.activeFocus
elide: Text.ElideRight
}
Behavior on border.color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
StyledText {
id: placeholderLabel
anchors.fill: textInput
text: root.placeholderText
font: textInput.font
color: placeholderColor
verticalAlignment: textInput.verticalAlignment
visible: textInput.text.length === 0 && !textInput.activeFocus
elide: Text.ElideRight
Behavior on border.width {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
Behavior on border.color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
Behavior on border.width {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}

237
Widgets/DankToggle.qml
View File

@@ -3,137 +3,132 @@ import qs.Common
import qs.Widgets
Item {
id: toggle
id: toggle
property bool checked: false
property bool enabled: true
property bool toggling: false
property string text: ""
property string description: ""
property bool hideText: false
property bool checked: false
property bool enabled: true
property bool toggling: false
property string text: ""
property string description: ""
property bool hideText: false
signal clicked()
signal toggled(bool checked)
signal clicked
signal toggled(bool checked)
width: (text && !hideText) ? parent.width : 48
height: (text && !hideText) ? 60 : 24
width: (text && !hideText) ? parent.width : 48
height: (text && !hideText) ? 60 : 24
StyledRect {
id: background
anchors.fill: parent
radius: (toggle.text && !toggle.hideText) ? Theme.cornerRadius : 0
color: (toggle.text
&& !toggle.hideText) ? Theme.surfaceHover : "transparent"
visible: (toggle.text && !toggle.hideText)
StateLayer {
visible: (toggle.text && !toggle.hideText)
disabled: !toggle.enabled
stateColor: Theme.primary
cornerRadius: parent.radius
onClicked: {
if (toggle.enabled) {
toggle.checked = !toggle.checked
toggle.clicked()
toggle.toggled(toggle.checked)
}
}
}
}
Row {
id: textRow
anchors.left: parent.left
anchors.right: toggleTrack.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingM
anchors.rightMargin: Theme.spacingM
spacing: Theme.spacingXS
visible: (toggle.text && !toggle.hideText)
Column {
anchors.verticalCenter: parent.verticalCenter
spacing: Theme.spacingXS
StyledText {
text: toggle.text
font.pixelSize: Appearance.fontSize.normal
font.weight: Font.Medium
opacity: toggle.enabled ? 1 : 0.4
}
StyledText {
text: toggle.description
font.pixelSize: Appearance.fontSize.small
color: Theme.surfaceVariantText
wrapMode: Text.WordWrap
width: Math.min(implicitWidth, toggle.width - 120)
visible: toggle.description.length > 0
}
}
}
StyledRect {
id: toggleTrack
width: toggle.text ? 48 : parent.width
height: toggle.text ? 24 : parent.height
anchors.right: parent.right
anchors.rightMargin: toggle.text ? Theme.spacingM : 0
anchors.verticalCenter: parent.verticalCenter
radius: height / 2
color: (toggle.checked
&& toggle.enabled) ? Theme.primary : Theme.surfaceVariantAlpha
opacity: toggle.toggling ? 0.6 : (toggle.enabled ? 1 : 0.4)
StyledRect {
id: background
id: toggleHandle
anchors.fill: parent
radius: (toggle.text && !toggle.hideText) ? Theme.cornerRadius : 0
color: (toggle.text && !toggle.hideText) ? Theme.surfaceHover : "transparent"
visible: (toggle.text && !toggle.hideText)
width: 20
height: 20
radius: 10
color: Theme.surface
anchors.verticalCenter: parent.verticalCenter
x: (toggle.checked && toggle.enabled) ? parent.width - width - 2 : 2
StateLayer {
visible: (toggle.text && !toggle.hideText)
disabled: !toggle.enabled
stateColor: Theme.primary
cornerRadius: parent.radius
onClicked: {
if (toggle.enabled) {
toggle.checked = !toggle.checked;
toggle.clicked();
toggle.toggled(toggle.checked);
}
}
StyledRect {
anchors.centerIn: parent
width: parent.width + 2
height: parent.height + 2
radius: (parent.width + 2) / 2
color: "transparent"
border.color: Qt.rgba(0, 0, 0, 0.1)
border.width: 1
z: -1
}
Behavior on x {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
}
}
}
Row {
id: textRow
anchors.left: parent.left
anchors.right: toggleTrack.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingM
anchors.rightMargin: Theme.spacingM
spacing: Theme.spacingXS
visible: (toggle.text && !toggle.hideText)
Column {
anchors.verticalCenter: parent.verticalCenter
spacing: Theme.spacingXS
StyledText {
text: toggle.text
font.pixelSize: Appearance.fontSize.normal
font.weight: Font.Medium
opacity: toggle.enabled ? 1 : 0.4
}
StyledText {
text: toggle.description
font.pixelSize: Appearance.fontSize.small
color: Theme.surfaceVariantText
wrapMode: Text.WordWrap
width: Math.min(implicitWidth, toggle.width - 120)
visible: toggle.description.length > 0
}
StateLayer {
disabled: !toggle.enabled
stateColor: Theme.primary
cornerRadius: parent.radius
onClicked: {
if (toggle.enabled) {
toggle.checked = !toggle.checked
toggle.clicked()
toggle.toggled(toggle.checked)
}
}
}
StyledRect {
id: toggleTrack
width: toggle.text ? 48 : parent.width
height: toggle.text ? 24 : parent.height
anchors.right: parent.right
anchors.rightMargin: toggle.text ? Theme.spacingM : 0
anchors.verticalCenter: parent.verticalCenter
radius: height / 2
color: (toggle.checked && toggle.enabled) ? Theme.primary : Theme.surfaceVariantAlpha
opacity: toggle.toggling ? 0.6 : (toggle.enabled ? 1 : 0.4)
StyledRect {
id: toggleHandle
width: 20
height: 20
radius: 10
color: Theme.surface
anchors.verticalCenter: parent.verticalCenter
x: (toggle.checked && toggle.enabled) ? parent.width - width - 2 : 2
StyledRect {
anchors.centerIn: parent
width: parent.width + 2
height: parent.height + 2
radius: (parent.width + 2) / 2
color: "transparent"
border.color: Qt.rgba(0, 0, 0, 0.1)
border.width: 1
z: -1
}
Behavior on x {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
}
}
}
StateLayer {
disabled: !toggle.enabled
stateColor: Theme.primary
cornerRadius: parent.radius
onClicked: {
if (toggle.enabled) {
toggle.checked = !toggle.checked;
toggle.clicked();
toggle.toggled(toggle.checked);
}
}
}
}
}
}

371
Widgets/DankWidgetSelectionPopup.qml
View File

@@ -4,216 +4,215 @@ import qs.Common
import qs.Widgets
Popup {
id: root
id: root
property var allWidgets: []
property string targetSection: ""
property bool isOpening: false
property var allWidgets: []
property string targetSection: ""
property bool isOpening: false
signal widgetSelected(string widgetId, string targetSection)
signal widgetSelected(string widgetId, string targetSection)
function safeOpen() {
if (!isOpening && !visible) {
isOpening = true;
open();
}
function safeOpen() {
if (!isOpening && !visible) {
isOpening = true
open()
}
}
width: 400
height: 450
modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
onOpened: {
isOpening = false
}
onClosed: {
isOpening = false
allWidgets = []
targetSection = ""
}
background: Rectangle {
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
Theme.surfaceContainer.b, 1)
border.color: Theme.primarySelected
border.width: 1
radius: Theme.cornerRadiusLarge
}
contentItem: Item {
anchors.fill: parent
DankActionButton {
iconName: "close"
iconSize: Theme.iconSize - 2
iconColor: Theme.outline
hoverColor: Theme.primaryContainer
anchors.top: parent.top
anchors.topMargin: Theme.spacingM
anchors.right: parent.right
anchors.rightMargin: Theme.spacingM
onClicked: root.close()
}
width: 400
height: 450
modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
onOpened: {
isOpening = false;
}
onClosed: {
isOpening = false;
allWidgets = [];
targetSection = "";
}
Column {
id: contentColumn
background: Rectangle {
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1)
border.color: Theme.primarySelected
border.width: 1
radius: Theme.cornerRadiusLarge
}
spacing: Theme.spacingM
anchors.fill: parent
anchors.margins: Theme.spacingL
anchors.topMargin: Theme.spacingL + 30 // Space for close button
contentItem: Item {
anchors.fill: parent
Row {
width: parent.width
spacing: Theme.spacingM
DankActionButton {
iconName: "close"
iconSize: Theme.iconSize - 2
iconColor: Theme.outline
hoverColor: Theme.primaryContainer
anchors.top: parent.top
anchors.topMargin: Theme.spacingM
anchors.right: parent.right
anchors.rightMargin: Theme.spacingM
onClicked: root.close()
DankIcon {
name: "add_circle"
size: Theme.iconSize
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
}
Column {
id: contentColumn
StyledText {
text: "Add Widget to " + root.targetSection + " Section"
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Medium
color: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
}
}
spacing: Theme.spacingM
anchors.fill: parent
anchors.margins: Theme.spacingL
anchors.topMargin: Theme.spacingL + 30 // Space for close button
StyledText {
text: "Select a widget to add to the " + root.targetSection.toLowerCase(
) + " section of the top bar. You can add multiple instances of the same widget if needed."
font.pixelSize: Theme.fontSizeSmall
color: Theme.outline
width: parent.width
wrapMode: Text.WordWrap
}
ScrollView {
width: parent.width
height: parent.height - 120 // Leave space for header and description
clip: true
DankListView {
id: widgetList
spacing: Theme.spacingS
model: root.allWidgets
// Qt 6.9+ scrolling: flickDeceleration/maximumFlickVelocity only affect touch now
interactive: true
flickDeceleration: 1500
maximumFlickVelocity: 2000
boundsBehavior: Flickable.DragAndOvershootBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
// Custom wheel handler for Qt 6.9+ responsive mouse wheel scrolling
WheelHandler {
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
property real momentum: 0
onWheel: event => {
if (event.pixelDelta.y !== 0) {
// Touchpad with pixel delta
momentum = event.pixelDelta.y * 1.8
} else {
// Mouse wheel with angle delta
momentum = (event.angleDelta.y / 120)
* ((60 + parent.spacing) * 2.5) // ~2.5 items per wheel step
}
let newY = parent.contentY - momentum
newY = Math.max(0, Math.min(
parent.contentHeight - parent.height,
newY))
parent.contentY = newY
momentum *= 0.92 // Decay for smooth momentum
event.accepted = true
}
}
delegate: Rectangle {
width: widgetList.width
height: 60
radius: Theme.cornerRadius
color: widgetArea.containsMouse ? Theme.primaryHover : Qt.rgba(
Theme.surfaceVariant.r,
Theme.surfaceVariant.g,
Theme.surfaceVariant.b, 0.3)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
Theme.outline.b, 0.2)
border.width: 1
Row {
width: parent.width
spacing: Theme.spacingM
anchors.fill: parent
anchors.margins: Theme.spacingM
spacing: Theme.spacingM
DankIcon {
name: "add_circle"
size: Theme.iconSize
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
DankIcon {
name: modelData.icon
size: Theme.iconSize
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
}
Column {
anchors.verticalCenter: parent.verticalCenter
spacing: 2
width: parent.width - Theme.iconSize - Theme.spacingM * 3
StyledText {
text: modelData.text
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
elide: Text.ElideRight
width: parent.width
}
StyledText {
text: "Add Widget to " + root.targetSection + " Section"
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Medium
color: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
text: modelData.description
font.pixelSize: Theme.fontSizeSmall
color: Theme.outline
elide: Text.ElideRight
width: parent.width
wrapMode: Text.WordWrap
}
}
DankIcon {
name: "add"
size: Theme.iconSize - 4
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
}
}
StyledText {
text: "Select a widget to add to the " + root.targetSection.toLowerCase() + " section of the top bar. You can add multiple instances of the same widget if needed."
font.pixelSize: Theme.fontSizeSmall
color: Theme.outline
width: parent.width
wrapMode: Text.WordWrap
MouseArea {
id: widgetArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
root.widgetSelected(modelData.id, root.targetSection)
root.close()
}
}
ScrollView {
width: parent.width
height: parent.height - 120 // Leave space for header and description
clip: true
DankListView {
id: widgetList
spacing: Theme.spacingS
model: root.allWidgets
// Qt 6.9+ scrolling: flickDeceleration/maximumFlickVelocity only affect touch now
interactive: true
flickDeceleration: 1500
maximumFlickVelocity: 2000
boundsBehavior: Flickable.DragAndOvershootBounds
boundsMovement: Flickable.FollowBoundsBehavior
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
// Custom wheel handler for Qt 6.9+ responsive mouse wheel scrolling
WheelHandler {
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
property real momentum: 0
onWheel: (event) => {
if (event.pixelDelta.y !== 0) {
// Touchpad with pixel delta
momentum = event.pixelDelta.y * 1.8
} else {
// Mouse wheel with angle delta
momentum = (event.angleDelta.y / 120) * ((60 + parent.spacing) * 2.5) // ~2.5 items per wheel step
}
let newY = parent.contentY - momentum
newY = Math.max(0, Math.min(parent.contentHeight - parent.height, newY))
parent.contentY = newY
momentum *= 0.92 // Decay for smooth momentum
event.accepted = true
}
}
delegate: Rectangle {
width: widgetList.width
height: 60
radius: Theme.cornerRadius
color: widgetArea.containsMouse ? Theme.primaryHover : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
border.width: 1
Row {
anchors.fill: parent
anchors.margins: Theme.spacingM
spacing: Theme.spacingM
DankIcon {
name: modelData.icon
size: Theme.iconSize
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
}
Column {
anchors.verticalCenter: parent.verticalCenter
spacing: 2
width: parent.width - Theme.iconSize - Theme.spacingM * 3
StyledText {
text: modelData.text
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
elide: Text.ElideRight
width: parent.width
}
StyledText {
text: modelData.description
font.pixelSize: Theme.fontSizeSmall
color: Theme.outline
elide: Text.ElideRight
width: parent.width
wrapMode: Text.WordWrap
}
}
DankIcon {
name: "add"
size: Theme.iconSize - 4
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
}
}
MouseArea {
id: widgetArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
root.widgetSelected(modelData.id, root.targetSection);
root.close();
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
}
}
}
}

34
Widgets/StateLayer.qml
View File

@@ -3,24 +3,22 @@ import qs.Common
import qs.Widgets
MouseArea {
id: root
id: root
property bool disabled: false
property color stateColor: Theme.surfaceText
property real cornerRadius: parent?.radius ?? Theme.cornerRadius
property bool disabled: false
property color stateColor: Theme.surfaceText
property real cornerRadius: parent?.radius ?? Theme.cornerRadius
anchors.fill: parent
cursorShape: disabled ? undefined : Qt.PointingHandCursor
hoverEnabled: true
Rectangle {
id: hoverLayer
anchors.fill: parent
cursorShape: disabled ? undefined : Qt.PointingHandCursor
hoverEnabled: true
Rectangle {
id: hoverLayer
anchors.fill: parent
radius: root.cornerRadius
color: Qt.rgba(root.stateColor.r, root.stateColor.g, root.stateColor.b,
root.disabled ? 0 :
root.pressed ? 0.12 :
root.containsMouse ? 0.08 : 0)
}
}
radius: root.cornerRadius
color: Qt.rgba(
root.stateColor.r, root.stateColor.g, root.stateColor.b,
root.disabled ? 0 : root.pressed ? 0.12 : root.containsMouse ? 0.08 : 0)
}
}

46
Widgets/StyledRect.qml
View File

@@ -2,36 +2,32 @@ import QtQuick
import qs.Common
Rectangle {
id: root
id: root
color: "transparent"
radius: Appearance.rounding.normal
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
color: "transparent"
radius: Appearance.rounding.normal
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
Behavior on radius {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
Behavior on radius {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
Behavior on opacity {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
Behavior on opacity {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
}

64
Widgets/StyledText.qml
View File

@@ -3,45 +3,41 @@ import qs.Common
import qs.Services
Text {
id: root
id: root
property bool isMonospace: false
property bool isMonospace: false
color: Theme.surfaceText
font.pixelSize: Appearance.fontSize.normal
font.family: {
var requestedFont = isMonospace ? SettingsData.monoFontFamily : SettingsData.fontFamily;
var defaultFont = isMonospace ? SettingsData.defaultMonoFontFamily : SettingsData.defaultFontFamily;
if (requestedFont === defaultFont) {
var availableFonts = Qt.fontFamilies();
if (!availableFonts.includes(requestedFont))
return isMonospace ? "Monospace" : "DejaVu Sans";
}
return requestedFont;
color: Theme.surfaceText
font.pixelSize: Appearance.fontSize.normal
font.family: {
var requestedFont = isMonospace ? SettingsData.monoFontFamily : SettingsData.fontFamily
var defaultFont = isMonospace ? SettingsData.defaultMonoFontFamily : SettingsData.defaultFontFamily
if (requestedFont === defaultFont) {
var availableFonts = Qt.fontFamilies()
if (!availableFonts.includes(requestedFont))
return isMonospace ? "Monospace" : "DejaVu Sans"
}
font.weight: SettingsData.fontWeight
wrapMode: Text.WordWrap
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
antialiasing: true
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
return requestedFont
}
font.weight: SettingsData.fontWeight
wrapMode: Text.WordWrap
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
antialiasing: true
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
Behavior on opacity {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
Behavior on opacity {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
}

44
Widgets/SystemLogo.qml
View File

@@ -6,33 +6,31 @@ import Quickshell.Widgets
import qs.Common
IconImage {
id: root
id: root
property string colorOverride: ""
property real brightnessOverride: 0.5
property real contrastOverride: 1
property string colorOverride: ""
property real brightnessOverride: 0.5
property real contrastOverride: 1
smooth: true
asynchronous: true
layer.enabled: colorOverride !== ""
smooth: true
asynchronous: true
layer.enabled: colorOverride !== ""
Process {
running: true
command: ["sh", "-c", ". /etc/os-release && echo $LOGO"]
stdout: StdioCollector {
onStreamFinished: () => {
root.source = Quickshell.iconPath(this.text.trim());
}
}
Process {
running: true
command: ["sh", "-c", ". /etc/os-release && echo $LOGO"]
stdout: StdioCollector {
onStreamFinished: () => {
root.source = Quickshell.iconPath(this.text.trim())
}
}
}
layer.effect: MultiEffect {
colorization: 1
colorizationColor: colorOverride
brightness: brightnessOverride
contrast: contrastOverride
}
layer.effect: MultiEffect {
colorization: 1
colorizationColor: colorOverride
brightness: brightnessOverride
contrast: contrastOverride
}
}