Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-01-24 21:42:51 -05:00
Code Packages Releases Activity

qmlfmt with 4 space

Browse Source
This commit is contained in:
bbedward
2025-08-20 00:05:14 -04:00
parent 6e0977c719
commit b688bbfe83
154 changed files with 28809 additions and 27639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
Widgets/CachingImage.qml
View File

@@ -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
Process {
id: hashProcess
stdout: StdioCollector {
onStreamFinished: {
root.imageHash = text.split(" ")[0]
}
stdout: StdioCollector {
onStreamFinished: {
root.imageHash = text.split(" ")[0]
}
}
}
}
}

52
Widgets/DankActionButton.qml
View File

@@ -3,35 +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
}
StateLayer {
stateColor: Theme.primary
cornerRadius: root.radius
onClicked: {
root.clicked()
DankIcon {
anchors.centerIn: parent
name: root.iconName
size: root.iconSize
color: root.iconColor
}
StateLayer {
stateColor: Theme.primary
cornerRadius: root.radius
onClicked: {
root.clicked()
}
}
}
}

652
Widgets/DankDropdown.qml
View File

@@ -5,349 +5,357 @@ 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()
}
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
}
}
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
}
StyledText {
text: root.description
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
visible: description.length > 0
wrapMode: Text.WordWrap
width: parent.width
}
}
Rectangle {
id: dropdown
width: 180
height: 36
anchors.right: parent.right
anchors.rightMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
width: parent.width
height: 60
radius: Theme.cornerRadius
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: {
color: "transparent"
Component.onCompleted: {
forceRecreateTimer.start()
}
Component.onDestruction: {
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()
}
}
if (popup && popup.visible)
popup.close()
}
onVisibleChanged: {
var popup = popupLoader.item
if (!visible && popup && popup.visible)
popup.close()
else if (visible)
forceRecreateTimer.start()
}
Row {
id: contentRow
Timer {
id: forceRecreateTimer
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] : ""
interval: 50
repeat: false
onTriggered: {
root.forceRecreate = !root.forceRecreate
}
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
Column {
anchors.left: parent.left
anchors.right: dropdown.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingM
anchors.rightMargin: Theme.spacingM
spacing: Theme.spacingXS
name: "expand_more"
size: 20
color: Theme.surfaceVariantText
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.rightMargin: Theme.spacingS
}
}
StyledText {
text: root.text
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
}
Loader {
id: popupLoader
property bool recreateFlag: root.forceRecreate
active: true
onRecreateFlagChanged: {
active = false
active = true
StyledText {
text: root.description
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
visible: description.length > 0
wrapMode: Text.WordWrap
width: parent.width
}
}
sourceComponent: Component {
Popup {
id: dropdownMenu
Rectangle {
id: dropdown
property string searchQuery: ""
property var filteredOptions: []
property int selectedIndex: -1
width: 180
height: 36
anchors.right: parent.right
anchors.rightMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
radius: Theme.cornerRadius
color: dropdownArea.containsMouse ? Theme.primaryHover : Theme.contentBackground()
border.color: Theme.surfaceVariantAlpha
border.width: 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
}
MouseArea {
id: dropdownArea
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.cornerRadius
Column {
anchors.fill: parent
anchors.margins: Theme.spacingS
Rectangle {
id: searchContainer
width: parent.width
height: 42
visible: root.enableFuzzySearch
radius: Theme.cornerRadius
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()
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()
}
}
}
Row {
id: contentRow
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
}
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.cornerRadius
Column {
anchors.fill: parent
anchors.margins: Theme.spacingS
Rectangle {
id: searchContainer
width: parent.width
height: 42
visible: root.enableFuzzySearch
radius: Theme.cornerRadius
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.cornerRadius
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()
}
}
}
}
}
}
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.cornerRadius
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()
}
}
}
}
}
}
}
}
}
}

417
Widgets/DankFlickable.qml
View File

@@ -3,225 +3,232 @@ 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()
}
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
}
}
}
}
}
}
// 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
}
// Show scrollbar while flicking / momentum
onMovementStarted: {
_scrollBarActive = true
hideScrollBarTimer.stop()
}
}
onMovementEnded: hideScrollBarTimer.restart()
NumberAnimation {
id: returnToBoundsAnimation
target: flickable
property: "contentY"
duration: 300
easing.type: Easing.OutQuad
}
Timer {
id: momentumTimer
interval: 16
repeat: true
// 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
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
}
}
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)
// 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 {}
}
background: Item {}
}
Timer {
id: hideScrollBarTimer
interval: 1200
onTriggered: flickable._scrollBarActive = false
}
Timer {
id: hideScrollBarTimer
interval: 1200
onTriggered: flickable._scrollBarActive = false
}
}

311
Widgets/DankGridView.qml
View File

@@ -2,182 +2,187 @@ 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()
}
function startMomentum() {
isMomentumActive = true
momentumTimer.start()
}
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
onWheel: event => {
let currentTime = Date.now()
let timeDelta = currentTime - lastWheelTime
lastWheelTime = currentTime
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
// 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
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))
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()
if (flicking)
cancelFlick()
contentY = newY
} else {
// Touchpad - existing smooth kinetic scrolling
// Stop any existing momentum
momentumTimer.stop()
isMomentumActive = false
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
// 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
})
// 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))
// 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
}
// 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
}
onActiveChanged: {
if (!active && Math.abs(momentumVelocity) >= minMomentumVelocity) {
startMomentum()
} else if (!active) {
velocitySamples = []
momentumVelocity = 0
}
}
}
}
// Physics-based momentum timer for kinetic scrolling
Timer {
id: momentumTimer
// Physics-based momentum timer for kinetic scrolling
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)
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
}
// 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
contentY = newY
// Apply friction
momentumVelocity *= friction
// Apply friction
momentumVelocity *= friction
// Stop if velocity too low
if (Math.abs(momentumVelocity) < 5) {
stop()
isMomentumActive = false
momentumVelocity = 0
}
// Stop if velocity too low
if (Math.abs(momentumVelocity) < 5) {
stop()
isMomentumActive = false
momentumVelocity = 0
}
}
}
}
// Smooth return to bounds animation
NumberAnimation {
id: returnToBoundsAnimation
// Smooth return to bounds animation
NumberAnimation {
id: returnToBoundsAnimation
target: gridView
property: "contentY"
duration: 300
easing.type: Easing.OutQuad
}
target: gridView
property: "contentY"
duration: 300
easing.type: Easing.OutQuad
}
}

64
Widgets/DankIcon.qml
View File

@@ -2,42 +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
})
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 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
}
}
}
}

582
Widgets/DankIconPicker.qml
View File

@@ -7,326 +7,330 @@ import qs.Common
import qs.Widgets
Rectangle {
id: root
id: root
property string currentIcon: ""
property string currentText: ""
property string iconType: "icon" // "icon" or "text"
signal iconSelected(string iconName, string iconType)
property string currentIcon: ""
property string currentText: ""
property string iconType: "icon" // "icon" or "text"
width: 240
height: 32
radius: Theme.cornerRadius
color: Theme.surfaceContainer
border.color: dropdownLoader.active ? Theme.primary : (mouseArea.containsMouse ? Theme.outline : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.5))
border.width: 1
signal iconSelected(string iconName, string iconType)
property var iconCategories: [
{
name: "Workspace",
icons: ["work", "laptop", "desktop_windows", "code", "terminal", "build", "settings", "folder", "view_module", "dashboard", "apps", "grid_view"]
},
{
name: "Development",
icons: ["code", "terminal", "bug_report", "build", "engineering", "integration_instructions", "data_object", "schema", "api", "webhook"]
},
{
name: "Communication",
icons: ["chat", "mail", "forum", "message", "video_call", "call", "contacts", "group", "notifications", "campaign"]
},
{
name: "Media",
icons: ["music_note", "headphones", "mic", "videocam", "photo", "movie", "library_music", "album", "radio", "volume_up"]
},
{
name: "System",
icons: ["memory", "storage", "developer_board", "monitor", "keyboard", "mouse", "battery_std", "wifi", "bluetooth", "security"]
},
{
name: "Navigation",
icons: ["home", "arrow_forward", "arrow_back", "expand_more", "expand_less", "menu", "close", "search", "filter_list", "sort"]
},
{
name: "Actions",
icons: ["add", "remove", "edit", "delete", "save", "download", "upload", "share", "content_copy", "content_paste", "content_cut", "undo", "redo"]
},
{
name: "Status",
icons: ["check", "close", "error", "warning", "info", "done", "pending", "schedule", "update", "sync", "offline_bolt"]
},
{
name: "Fun",
icons: ["celebration", "cake", "star", "favorite", "pets", "sports_esports", "local_fire_department", "bolt", "auto_awesome", "diamond"]
width: 240
height: 32
radius: Theme.cornerRadius
color: Theme.surfaceContainer
border.color: dropdownLoader.active ? Theme.primary : (mouseArea.containsMouse ? Theme.outline : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.5))
border.width: 1
property var iconCategories: [{
"name": "Workspace",
"icons": ["work", "laptop", "desktop_windows", "code", "terminal", "build", "settings", "folder", "view_module", "dashboard", "apps", "grid_view"]
}, {
"name": "Development",
"icons": ["code", "terminal", "bug_report", "build", "engineering", "integration_instructions", "data_object", "schema", "api", "webhook"]
}, {
"name": "Communication",
"icons": ["chat", "mail", "forum", "message", "video_call", "call", "contacts", "group", "notifications", "campaign"]
}, {
"name": "Media",
"icons": ["music_note", "headphones", "mic", "videocam", "photo", "movie", "library_music", "album", "radio", "volume_up"]
}, {
"name": "System",
"icons": ["memory", "storage", "developer_board", "monitor", "keyboard", "mouse", "battery_std", "wifi", "bluetooth", "security"]
}, {
"name": "Navigation",
"icons": ["home", "arrow_forward", "arrow_back", "expand_more", "expand_less", "menu", "close", "search", "filter_list", "sort"]
}, {
"name": "Actions",
"icons": ["add", "remove", "edit", "delete", "save", "download", "upload", "share", "content_copy", "content_paste", "content_cut", "undo", "redo"]
}, {
"name": "Status",
"icons": ["check", "close", "error", "warning", "info", "done", "pending", "schedule", "update", "sync", "offline_bolt"]
}, {
"name": "Fun",
"icons": ["celebration", "cake", "star", "favorite", "pets", "sports_esports", "local_fire_department", "bolt", "auto_awesome", "diamond"]
}]
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
dropdownLoader.active = !dropdownLoader.active
}
}
]
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
dropdownLoader.active = !dropdownLoader.active
Row {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingS
spacing: Theme.spacingS
DankIcon {
name: root.iconType === "icon"
&& root.currentIcon ? root.currentIcon : (root.iconType
=== "text" ? "text_fields" : "add")
size: 16
color: root.currentIcon
|| root.currentText ? Theme.surfaceText : Theme.outline
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
text: {
if (root.iconType === "text" && root.currentText)
return root.currentText
if (root.iconType === "icon" && root.currentIcon)
return root.currentIcon
return "Choose icon or text"
}
font.pixelSize: Theme.fontSizeSmall
color: root.currentIcon
|| root.currentText ? Theme.surfaceText : Theme.outline
anchors.verticalCenter: parent.verticalCenter
width: 160
elide: Text.ElideRight
}
}
}
Row {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingS
spacing: Theme.spacingS
DankIcon {
name: root.iconType === "icon" && root.currentIcon ? root.currentIcon : (root.iconType === "text" ? "text_fields" : "add")
size: 16
color: root.currentIcon || root.currentText ? Theme.surfaceText : Theme.outline
anchors.verticalCenter: parent.verticalCenter
name: dropdownLoader.active ? "expand_less" : "expand_more"
size: 16
color: Theme.outline
anchors.right: parent.right
anchors.rightMargin: Theme.spacingS
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
text: {
if (root.iconType === "text" && root.currentText) return root.currentText
if (root.iconType === "icon" && root.currentIcon) return root.currentIcon
return "Choose icon or text"
}
font.pixelSize: Theme.fontSizeSmall
color: root.currentIcon || root.currentText ? Theme.surfaceText : Theme.outline
anchors.verticalCenter: parent.verticalCenter
width: 160
elide: Text.ElideRight
}
}
Loader {
id: dropdownLoader
active: false
asynchronous: true
DankIcon {
name: dropdownLoader.active ? "expand_less" : "expand_more"
size: 16
color: Theme.outline
anchors.right: parent.right
anchors.rightMargin: Theme.spacingS
anchors.verticalCenter: parent.verticalCenter
}
sourceComponent: PanelWindow {
id: dropdownPopup
Loader {
id: dropdownLoader
active: false
asynchronous: true
sourceComponent: PanelWindow {
id: dropdownPopup
visible: true
implicitWidth: 320
implicitHeight: Math.min(500, dropdownContent.implicitHeight + 32)
color: "transparent"
WlrLayershell.layer: WlrLayershell.Overlay
WlrLayershell.exclusiveZone: -1
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
anchors {
top: true
left: true
right: true
bottom: true
}
visible: true
implicitWidth: 320
implicitHeight: Math.min(500, dropdownContent.implicitHeight + 32)
color: "transparent"
WlrLayershell.layer: WlrLayershell.Overlay
WlrLayershell.exclusiveZone: -1
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
// Click outside to close
MouseArea {
anchors.fill: parent
onClicked: dropdownLoader.active = false
}
anchors {
top: true
left: true
right: true
bottom: true
}
Rectangle {
width: 320
height: Math.min(500, dropdownContent.implicitHeight + 32)
x: {
// Get the root picker's position relative to the screen
var pickerPos = root.mapToItem(null, 0, 0)
return Math.max(16, Math.min(pickerPos.x, parent.width - width - 16))
}
y: {
// Position below the picker button
var pickerPos = root.mapToItem(null, 0, root.height + 4)
return Math.max(16, Math.min(pickerPos.y, parent.height - height - 16))
}
radius: Theme.cornerRadius
color: Theme.surface
border.color: Theme.outline
border.width: 1
// Prevent this from closing the dropdown when clicked
MouseArea {
anchors.fill: parent
// Don't propagate clicks to parent
}
layer.enabled: true
layer.effect: MultiEffect {
shadowEnabled: true
shadowColor: Theme.shadowDark
shadowBlur: 0.8
shadowHorizontalOffset: 0
shadowVerticalOffset: 4
}
DankFlickable {
anchors.fill: parent
anchors.margins: Theme.spacingS
contentHeight: dropdownContent.height
clip: true
Column {
id: dropdownContent
width: parent.width
spacing: Theme.spacingM
// Custom text section
Rectangle {
width: parent.width
height: customTextSection.implicitHeight + Theme.spacingS * 2
radius: Theme.cornerRadius
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
Column {
id: customTextSection
// Click outside to close
MouseArea {
anchors.fill: parent
anchors.margins: Theme.spacingS
spacing: Theme.spacingS
StyledText {
text: "Custom Text"
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
color: Theme.surfaceText
}
Rectangle {
width: parent.width
height: 28
radius: Theme.cornerRadius
color: Theme.surfaceContainer
border.color: customTextInput.activeFocus ? Theme.primary : Theme.outline
border.width: 1
Row {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingS
spacing: Theme.spacingS
DankIcon {
name: "text_fields"
size: 14
color: Theme.outline
anchors.verticalCenter: parent.verticalCenter
}
TextInput {
id: customTextInput
anchors.verticalCenter: parent.verticalCenter
width: 200
text: root.iconType === "text" ? root.currentText : ""
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
selectByMouse: true
onEditingFinished: {
var trimmedText = text.trim()
if (trimmedText) {
root.iconSelected(trimmedText, "text")
dropdownLoader.active = false
}
}
}
}
StyledText {
anchors.left: parent.left
anchors.leftMargin: Theme.spacingS + 14 + Theme.spacingS
anchors.verticalCenter: parent.verticalCenter
text: "1-2 characters"
font.pixelSize: Theme.fontSizeSmall
color: Theme.outline
opacity: 0.6
visible: customTextInput.text === ""
}
}
}
onClicked: dropdownLoader.active = false
}
// Icon categories
Repeater {
model: root.iconCategories
Rectangle {
width: 320
height: Math.min(500, dropdownContent.implicitHeight + 32)
x: {
// Get the root picker's position relative to the screen
var pickerPos = root.mapToItem(null, 0, 0)
return Math.max(16, Math.min(pickerPos.x,
parent.width - width - 16))
}
y: {
// Position below the picker button
var pickerPos = root.mapToItem(null, 0, root.height + 4)
return Math.max(16, Math.min(pickerPos.y,
parent.height - height - 16))
}
radius: Theme.cornerRadius
color: Theme.surface
border.color: Theme.outline
border.width: 1
Column {
width: parent.width
spacing: Theme.spacingS
StyledText {
text: modelData.name
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
color: Theme.surfaceText
// Prevent this from closing the dropdown when clicked
MouseArea {
anchors.fill: parent
// Don't propagate clicks to parent
}
Flow {
width: parent.width
spacing: 4
layer.enabled: true
layer.effect: MultiEffect {
shadowEnabled: true
shadowColor: Theme.shadowDark
shadowBlur: 0.8
shadowHorizontalOffset: 0
shadowVerticalOffset: 4
}
Repeater {
model: modelData.icons
DankFlickable {
anchors.fill: parent
anchors.margins: Theme.spacingS
contentHeight: dropdownContent.height
clip: true
Rectangle {
width: 36
height: 36
radius: Theme.cornerRadius
color: iconMouseArea.containsMouse ? Theme.primaryHover : "transparent"
border.color: root.currentIcon === modelData ? Theme.primary : "transparent"
border.width: 2
Column {
id: dropdownContent
width: parent.width
spacing: Theme.spacingM
DankIcon {
name: modelData
size: 20
color: root.currentIcon === modelData ? Theme.primary : Theme.surfaceText
anchors.centerIn: parent
}
// Custom text section
Rectangle {
width: parent.width
height: customTextSection.implicitHeight + Theme.spacingS * 2
radius: Theme.cornerRadius
color: Qt.rgba(Theme.surfaceVariant.r,
Theme.surfaceVariant.g,
Theme.surfaceVariant.b, 0.3)
MouseArea {
id: iconMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
root.iconSelected(modelData, "icon")
dropdownLoader.active = false
Column {
id: customTextSection
anchors.fill: parent
anchors.margins: Theme.spacingS
spacing: Theme.spacingS
StyledText {
text: "Custom Text"
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
color: Theme.surfaceText
}
Rectangle {
width: parent.width
height: 28
radius: Theme.cornerRadius
color: Theme.surfaceContainer
border.color: customTextInput.activeFocus ? Theme.primary : Theme.outline
border.width: 1
Row {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingS
spacing: Theme.spacingS
DankIcon {
name: "text_fields"
size: 14
color: Theme.outline
anchors.verticalCenter: parent.verticalCenter
}
TextInput {
id: customTextInput
anchors.verticalCenter: parent.verticalCenter
width: 200
text: root.iconType === "text" ? root.currentText : ""
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
selectByMouse: true
onEditingFinished: {
var trimmedText = text.trim()
if (trimmedText) {
root.iconSelected(
trimmedText,
"text")
dropdownLoader.active = false
}
}
}
}
StyledText {
anchors.left: parent.left
anchors.leftMargin: Theme.spacingS + 14 + Theme.spacingS
anchors.verticalCenter: parent.verticalCenter
text: "1-2 characters"
font.pixelSize: Theme.fontSizeSmall
color: Theme.outline
opacity: 0.6
visible: customTextInput.text === ""
}
}
}
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
// Icon categories
Repeater {
model: root.iconCategories
Column {
width: parent.width
spacing: Theme.spacingS
StyledText {
text: modelData.name
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
color: Theme.surfaceText
}
Flow {
width: parent.width
spacing: 4
Repeater {
model: modelData.icons
Rectangle {
width: 36
height: 36
radius: Theme.cornerRadius
color: iconMouseArea.containsMouse ? Theme.primaryHover : "transparent"
border.color: root.currentIcon === modelData ? Theme.primary : "transparent"
border.width: 2
DankIcon {
name: modelData
size: 20
color: root.currentIcon === modelData ? Theme.primary : Theme.surfaceText
anchors.centerIn: parent
}
MouseArea {
id: iconMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
root.iconSelected(
modelData,
"icon")
dropdownLoader.active = false
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
function setIcon(iconName, type) {
if (type === "text") {
root.currentText = iconName
root.currentIcon = ""
root.iconType = "text"
} else {
root.currentIcon = iconName
root.currentText = ""
root.iconType = "icon"
function setIcon(iconName, type) {
if (type === "text") {
root.currentText = iconName
root.currentIcon = ""
root.iconType = "text"
} else {
root.currentIcon = iconName
root.currentText = ""
root.iconType = "icon"
}
}
}
}
}

405
Widgets/DankListView.qml
View File

@@ -2,214 +2,221 @@ 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
onMovementStarted: isUserScrolling = true
onMovementEnded: isUserScrolling = false
onContentYChanged: {
if (!justChanged && isUserScrolling) {
savedY = contentY
}
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()
}
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
onContentYChanged: {
if (!justChanged && isUserScrolling) {
savedY = contentY
}
}
justChanged = false
}
}
// 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
}
// Restore position when model changes
onModelChanged: {
justChanged = true
contentY = savedY
}
}
// Smooth return to bounds animation
NumberAnimation {
id: returnToBoundsAnimation
target: listView
property: "contentY"
duration: 300
easing.type: Easing.OutQuad
}
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()
}
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
}
}
}
}
// 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
}
}
}
// Smooth return to bounds animation
NumberAnimation {
id: returnToBoundsAnimation
target: listView
property: "contentY"
duration: 300
easing.type: Easing.OutQuad
}
}

640
Widgets/DankLocationSearch.qml
View File

@@ -5,343 +5,349 @@ 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()
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
searchResultsModel.clear()
root.isLoading = true
root.helperTextState = "searching"
const searchLocation = locationInput.text
root.currentSearchText = searchLocation
const encodedLocation = encodeURIComponent(searchLocation)
const curlCommand = `curl -4 -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: 48
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()
}
}
}
DankIcon {
name: {
if (root.isLoading)
return "hourglass_empty"
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 {
anchors.fill: parent
hoverEnabled: true
onEntered: {
parent.hovered = true
function resetSearchState() {
locationSearchTimer.stop()
dropdownHideTimer.stop()
}
onExited: {
parent.hovered = false
if (!locationInput.getActiveFocus())
dropdownHideTimer.start()
}
acceptedButtons: Qt.NoButton
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
searchResultsModel.clear()
root.isLoading = true
root.helperTextState = "searching"
const searchLocation = locationInput.text
root.currentSearchText = searchLocation
const encodedLocation = encodeURIComponent(searchLocation)
const curlCommand = `curl -4 -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 {
anchors.fill: parent
anchors.margins: Theme.spacingS
id: searchInputField
DankListView {
id: searchResultsList
width: parent.width
height: 48
anchors.fill: parent
clip: true
model: searchResultsModel
spacing: 2
DankTextField {
id: locationInput
// 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
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
// 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
}
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()
}
}
}
delegate: StyledRect {
width: searchResultsList.width
height: 36
radius: Theme.cornerRadius
color: resultMouseArea.containsMouse ? Theme.surfaceLight : "transparent"
DankIcon {
name: {
if (root.isLoading)
return "hourglass_empty"
Row {
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 {
anchors.fill: parent
anchors.margins: Theme.spacingM
spacing: Theme.spacingS
hoverEnabled: true
onEntered: {
parent.hovered = true
dropdownHideTimer.stop()
}
onExited: {
parent.hovered = false
if (!locationInput.getActiveFocus())
dropdownHideTimer.start()
}
acceptedButtons: Qt.NoButton
}
DankIcon {
name: "place"
size: Theme.iconSize - 6
color: Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter
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
}
}
}
}
StyledText {
text: model.name || "Unknown"
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
elide: Text.ElideRight
width: parent.width - 30
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
}
}
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
}
}
}
}

108
Widgets/DankPopout.qml
View File

@@ -19,27 +19,27 @@ PanelWindow {
property var animationEasing: Theme.emphasizedEasing
property bool shouldBeVisible: false
signal opened()
signal popoutClosed()
signal backgroundClicked()
signal opened
signal popoutClosed
signal backgroundClicked
function open() {
closeTimer.stop();
shouldBeVisible = true;
visible = true;
opened();
closeTimer.stop()
shouldBeVisible = true
visible = true
opened()
}
function close() {
shouldBeVisible = false;
closeTimer.restart();
shouldBeVisible = false
closeTimer.restart()
}
function toggle() {
if (shouldBeVisible)
close();
close()
else
open();
open()
}
Timer {
@@ -47,8 +47,8 @@ PanelWindow {
interval: animationDuration + 50
onTriggered: {
if (!shouldBeVisible) {
visible = false;
popoutClosed();
visible = false
popoutClosed()
}
}
}
@@ -57,7 +57,7 @@ PanelWindow {
WlrLayershell.layer: WlrLayershell.Overlay
WlrLayershell.exclusiveZone: -1
WlrLayershell.keyboardFocus: shouldBeVisible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
anchors {
top: true
left: true
@@ -68,41 +68,45 @@ PanelWindow {
MouseArea {
anchors.fill: parent
enabled: shouldBeVisible
onClicked: (mouse) => {
var localPos = mapToItem(contentContainer, mouse.x, mouse.y);
if (localPos.x < 0 || localPos.x > contentContainer.width ||
localPos.y < 0 || localPos.y > contentContainer.height) {
backgroundClicked();
close();
}
}
onClicked: mouse => {
var localPos = mapToItem(contentContainer,
mouse.x, mouse.y)
if (localPos.x < 0 || localPos.x > contentContainer.width
|| localPos.y < 0
|| localPos.y > contentContainer.height) {
backgroundClicked()
close()
}
}
}
Item {
id: contentContainer
readonly property real screenWidth: root.screen ? root.screen.width : 1920
readonly property real screenHeight: root.screen ? root.screen.height : 1080
readonly property real calculatedX: {
if (positioning === "center") {
var centerX = triggerX + (triggerWidth / 2) - (popupWidth / 2);
if (centerX >= Theme.spacingM && centerX + popupWidth <= screenWidth - Theme.spacingM)
return centerX;
var centerX = triggerX + (triggerWidth / 2) - (popupWidth / 2)
if (centerX >= Theme.spacingM
&& centerX + popupWidth <= screenWidth - Theme.spacingM)
return centerX
if (centerX < Theme.spacingM)
return Theme.spacingM;
return Theme.spacingM
if (centerX + popupWidth > screenWidth - Theme.spacingM)
return screenWidth - popupWidth - Theme.spacingM;
return centerX;
return screenWidth - popupWidth - Theme.spacingM
return centerX
} else if (positioning === "left") {
return Math.max(Theme.spacingM, triggerX);
return Math.max(Theme.spacingM, triggerX)
} else if (positioning === "right") {
return Math.min(screenWidth - popupWidth - Theme.spacingM, triggerX + triggerWidth - popupWidth);
return Math.min(screenWidth - popupWidth - Theme.spacingM,
triggerX + triggerWidth - popupWidth)
}
return triggerX;
return triggerX
}
readonly property real calculatedY: triggerY
@@ -139,27 +143,27 @@ PanelWindow {
anchors.fill: parent
visible: shouldBeVisible
focus: shouldBeVisible
Keys.onPressed: (event) => {
if (event.key === Qt.Key_Escape) {
close();
event.accepted = true;
} else {
// Forward all non-escape keys to content
event.accepted = false;
}
}
Keys.onPressed: event => {
if (event.key === Qt.Key_Escape) {
close()
event.accepted = true
} else {
// Forward all non-escape keys to content
event.accepted = false
}
}
onVisibleChanged: {
if (visible) {
Qt.callLater(function() {
Qt.callLater(function () {
if (contentLoader.item) {
contentLoader.item.forceActiveFocus();
contentLoader.item.forceActiveFocus()
} else {
forceActiveFocus();
forceActiveFocus()
}
});
})
}
}
}
}
}

413
Widgets/DankSlider.qml
View File

@@ -3,232 +3,245 @@ 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
}
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
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: valueTooltip
id: sliderTrack
width: tooltipText.contentWidth + Theme.spacingS * 2
height: tooltipText.contentHeight + Theme.spacingXS * 2
radius: Theme.cornerRadius
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
property int leftIconWidth: slider.leftIcon.length > 0 ? Theme.iconSize : 0
property int rightIconWidth: slider.rightIcon.length > 0 ? Theme.iconSize : 0
StyledText {
id: tooltipText
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
text: slider.value + slider.unit
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
anchors.centerIn: parent
font.hintingPreference: Font.PreferFullHinting
}
StyledRect {
id: sliderFill
Behavior on opacity {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
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
}
}
}
}
}
Behavior on scale {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
StyledRect {
id: sliderHandle
Item {
id: sliderContainer
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
anchors.fill: parent
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
}
MouseArea {
id: sliderMouseArea
StyledRect {
id: valueTooltip
property bool isDragging: false
width: tooltipText.contentWidth + Theme.spacingS * 2
height: tooltipText.contentHeight + Theme.spacingXS * 2
radius: Theme.cornerRadius
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
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)
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
}
}
}
}
onPositionChanged: mouse => {
if (pressed && slider.isDragging
&& slider.enabled) {
let ratio = Math.max(0,
Math.min(1,
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)
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)
}
}
}
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
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)
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
DankIcon {
name: slider.rightIcon
size: Theme.iconSize
color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter
visible: slider.rightIcon.length > 0
}
}
}
}

140
Widgets/DankTabBar.qml
View File

@@ -3,86 +3,90 @@ 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" in modelData)
&& modelData.icon && modelData.icon.length > 0
property bool hasText: modelData && ("text" in modelData)
&& 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" in modelData)
&& modelData.icon
&& modelData.icon.length > 0
property bool hasText: modelData && ("text" in modelData)
&& 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.cornerRadius
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.cornerRadius
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
}
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
}
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
}
}
}
}
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
}
}
}
}
}
}

356
Widgets/DankTextField.qml
View File

@@ -4,202 +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 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 getActiveFocus() {
return textInput.activeFocus
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.IBeamCursor
acceptedButtons: Qt.NoButton
function getFocus() {
return textInput.focus
}
}
StyledRect {
id: clearButton
function setFocus(value) {
textInput.focus = value
}
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
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 {
anchors.centerIn: parent
name: "close"
size: 16
color: clearArea.containsMouse ? Theme.outline : Theme.surfaceVariantText
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 !== ""
}
MouseArea {
id: clearArea
TextInput {
id: textInput
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
textInput.text = ""
}
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
}
}
}
StyledText {
id: placeholderLabel
StyledRect {
id: clearButton
anchors.fill: textInput
text: root.placeholderText
font: textInput.font
color: placeholderColor
verticalAlignment: textInput.verticalAlignment
visible: textInput.text.length === 0 && !textInput.activeFocus
elide: Text.ElideRight
}
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
Behavior on border.color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
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 = ""
}
}
}
}
Behavior on border.width {
NumberAnimation {
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.color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
Behavior on border.width {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}

232
Widgets/DankToggle.qml
View File

@@ -3,132 +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
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)
width: (text && !hideText) ? parent.width : 48
height: (text && !hideText) ? 60 : 24
StyledRect {
id: toggleHandle
id: background
width: 20
height: 20
radius: 10
color: Theme.surface
anchors.verticalCenter: parent.verticalCenter
x: (toggle.checked && toggle.enabled) ? parent.width - width - 2 : 2
anchors.fill: parent
radius: (toggle.text && !toggle.hideText) ? Theme.cornerRadius : 0
color: (toggle.text
&& !toggle.hideText) ? Theme.surfaceHover : "transparent"
visible: (toggle.text && !toggle.hideText)
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 {
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)
}
}
}
}
}
StateLayer {
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: 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)
}
}
}
}
}
}
}

376
Widgets/DankWidgetSelectionPopup.qml
View File

@@ -4,215 +4,219 @@ 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()
}
}
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.cornerRadius
}
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()
function safeOpen() {
if (!isOpening && !visible) {
isOpening = true
open()
}
}
Column {
id: contentColumn
width: 400
height: 450
modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
onOpened: {
isOpening = false
}
onClosed: {
isOpening = false
allWidgets = []
targetSection = ""
}
spacing: Theme.spacingM
anchors.fill: parent
anchors.margins: Theme.spacingL
anchors.topMargin: Theme.spacingL + 30 // Space for close button
background: Rectangle {
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
Theme.surfaceContainer.b, 1)
border.color: Theme.primarySelected
border.width: 1
radius: Theme.cornerRadius
}
Row {
width: parent.width
spacing: Theme.spacingM
contentItem: Item {
anchors.fill: parent
DankIcon {
name: "add_circle"
size: Theme.iconSize
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
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()
}
StyledText {
text: "Add Widget to " + root.targetSection + " Section"
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Medium
color: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
}
}
Column {
id: contentColumn
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
spacing: Theme.spacingM
anchors.fill: parent
anchors.margins: Theme.spacingL
anchors.topMargin: Theme.spacingL + 30 // Space for close button
Row {
anchors.fill: parent
anchors.margins: Theme.spacingM
spacing: Theme.spacingM
width: parent.width
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
DankIcon {
name: "add_circle"
size: Theme.iconSize
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
text: modelData.description
font.pixelSize: Theme.fontSizeSmall
color: Theme.outline
elide: Text.ElideRight
width: parent.width
wrapMode: Text.WordWrap
text: "Add Widget to " + root.targetSection + " Section"
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Medium
color: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
}
}
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()
}
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
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
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
}
}
}
}
}
}
}
}
}
}
}

30
Widgets/StateLayer.qml
View File

@@ -3,22 +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
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)
}
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)
}
}

42
Widgets/StyledRect.qml
View File

@@ -2,32 +2,32 @@ import QtQuick
import qs.Common
Rectangle {
id: root
id: root
color: "transparent"
radius: Appearance.rounding.normal
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 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
}
}
}
}

60
Widgets/StyledText.qml
View File

@@ -3,41 +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"
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
}
return requestedFont
}
font.weight: SettingsData.fontWeight
wrapMode: Text.WordWrap
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
antialiasing: true
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 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
}
}
}
}

43
Widgets/SystemLogo.qml
View File

@@ -6,31 +6,32 @@ 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"]
Process {
running: true
command: ["sh", "-c", ". /etc/os-release && echo $LOGO"]
stdout: StdioCollector {
onStreamFinished: () => {
root.source = Quickshell.iconPath(this.text.trim())
}
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
}
}