mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-01-27 06:52:50 -05:00
replace qmlformat with a better tool
still not perfect, but well - what can ya do
This commit is contained in:
bbedward
File diff suppressed because it is too large
Load Diff
@@ -5,493 +5,497 @@ import qs.Common
|
||||
import qs.Widgets
|
||||
|
||||
Item {
|
||||
id: launcherTab
|
||||
id: launcherTab
|
||||
|
||||
DankFlickable {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: Theme.spacingL
|
||||
anchors.bottomMargin: Theme.spacingXL
|
||||
clip: true
|
||||
contentHeight: mainColumn.height
|
||||
contentWidth: width
|
||||
|
||||
Column {
|
||||
id: mainColumn
|
||||
width: parent.width
|
||||
spacing: Theme.spacingXL
|
||||
|
||||
Loader {
|
||||
width: parent.width
|
||||
sourceComponent: appLauncherComponent
|
||||
}
|
||||
|
||||
Loader {
|
||||
width: parent.width
|
||||
sourceComponent: dockComponent
|
||||
}
|
||||
|
||||
Loader {
|
||||
width: parent.width
|
||||
sourceComponent: recentlyUsedComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// App Launcher Component
|
||||
Component {
|
||||
id: appLauncherComponent
|
||||
|
||||
StyledRect {
|
||||
width: parent.width
|
||||
height: appLauncherSection.implicitHeight + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: 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
|
||||
|
||||
Column {
|
||||
id: appLauncherSection
|
||||
|
||||
DankFlickable {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: Theme.spacingL
|
||||
anchors.bottomMargin: Theme.spacingXL
|
||||
clip: true
|
||||
contentHeight: mainColumn.height
|
||||
contentWidth: width
|
||||
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Use OS Logo"
|
||||
description: "Display operating system logo instead of apps icon"
|
||||
checked: SettingsData.useOSLogo
|
||||
onToggled: checked => {
|
||||
return SettingsData.setUseOSLogo(checked)
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
width: parent.width - Theme.spacingL
|
||||
spacing: Theme.spacingL
|
||||
visible: SettingsData.useOSLogo
|
||||
opacity: visible ? 1 : 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingL
|
||||
|
||||
Column {
|
||||
width: 120
|
||||
spacing: Theme.spacingS
|
||||
|
||||
StyledText {
|
||||
text: "Color Override"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
DankTextField {
|
||||
width: 100
|
||||
height: 28
|
||||
placeholderText: "#ffffff"
|
||||
text: SettingsData.osLogoColorOverride
|
||||
maximumLength: 7
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
topPadding: Theme.spacingXS
|
||||
bottomPadding: Theme.spacingXS
|
||||
onEditingFinished: {
|
||||
var color = text.trim()
|
||||
if (color === "" || /^#[0-9A-Fa-f]{6}$/.test(color))
|
||||
SettingsData.setOSLogoColorOverride(color)
|
||||
else
|
||||
text = SettingsData.osLogoColorOverride
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
width: 120
|
||||
spacing: Theme.spacingS
|
||||
|
||||
StyledText {
|
||||
text: "Brightness"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
DankSlider {
|
||||
width: 100
|
||||
height: 20
|
||||
minimum: 0
|
||||
maximum: 100
|
||||
value: Math.round(SettingsData.osLogoBrightness * 100)
|
||||
unit: "%"
|
||||
showValue: true
|
||||
onSliderValueChanged: newValue => {
|
||||
SettingsData.setOSLogoBrightness(
|
||||
newValue / 100)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
width: 120
|
||||
spacing: Theme.spacingS
|
||||
|
||||
StyledText {
|
||||
text: "Contrast"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
DankSlider {
|
||||
width: 100
|
||||
height: 20
|
||||
minimum: 0
|
||||
maximum: 200
|
||||
value: Math.round(SettingsData.osLogoContrast * 100)
|
||||
unit: "%"
|
||||
showValue: true
|
||||
onSliderValueChanged: newValue => {
|
||||
SettingsData.setOSLogoContrast(
|
||||
newValue / 100)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dock Component
|
||||
Component {
|
||||
id: dockComponent
|
||||
|
||||
StyledRect {
|
||||
width: parent.width
|
||||
height: dockSection.implicitHeight + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: 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
|
||||
|
||||
Column {
|
||||
id: dockSection
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: "dock_to_bottom"
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Dock"
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Show Dock"
|
||||
description: "Display a dock at the bottom of the screen with pinned and running applications"
|
||||
checked: SettingsData.showDock
|
||||
onToggled: checked => {
|
||||
SettingsData.setShowDock(checked)
|
||||
}
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Auto-hide Dock"
|
||||
description: "Hide the dock when not in use and reveal it when hovering near the bottom of the screen"
|
||||
checked: SettingsData.dockAutoHide
|
||||
visible: SettingsData.showDock
|
||||
opacity: visible ? 1 : 0
|
||||
onToggled: checked => {
|
||||
SettingsData.setDockAutoHide(checked)
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: mainColumn
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
visible: SettingsData.showDock
|
||||
opacity: visible ? 1 : 0
|
||||
|
||||
StyledText {
|
||||
text: "Dock Transparency"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
DankSlider {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingXL
|
||||
|
||||
Loader {
|
||||
width: parent.width
|
||||
sourceComponent: appLauncherComponent
|
||||
}
|
||||
|
||||
Loader {
|
||||
width: parent.width
|
||||
sourceComponent: dockComponent
|
||||
}
|
||||
|
||||
Loader {
|
||||
width: parent.width
|
||||
sourceComponent: recentlyUsedComponent
|
||||
height: 24
|
||||
value: Math.round(SettingsData.dockTransparency * 100)
|
||||
minimum: 0
|
||||
maximum: 100
|
||||
unit: ""
|
||||
showValue: true
|
||||
onSliderValueChanged: newValue => {
|
||||
SettingsData.setDockTransparency(
|
||||
newValue / 100)
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// App Launcher Component
|
||||
Component {
|
||||
id: appLauncherComponent
|
||||
|
||||
StyledRect {
|
||||
width: parent.width
|
||||
height: appLauncherSection.implicitHeight + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: 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
|
||||
// Recently Used Apps Component
|
||||
Component {
|
||||
id: recentlyUsedComponent
|
||||
|
||||
Column {
|
||||
id: appLauncherSection
|
||||
StyledRect {
|
||||
width: parent.width
|
||||
height: recentlyUsedSection.implicitHeight + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: 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
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
Column {
|
||||
id: recentlyUsedSection
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Use OS Logo"
|
||||
description: "Display operating system logo instead of apps icon"
|
||||
checked: SettingsData.useOSLogo
|
||||
onToggled: (checked) => {
|
||||
return SettingsData.setUseOSLogo(checked);
|
||||
}
|
||||
}
|
||||
property var rankedAppsModel: {
|
||||
var apps = []
|
||||
for (var appId in (AppUsageHistoryData.appUsageRanking || {})) {
|
||||
var appData = (AppUsageHistoryData.appUsageRanking || {})[appId]
|
||||
apps.push({
|
||||
"id": appId,
|
||||
"name": appData.name,
|
||||
"exec": appData.exec,
|
||||
"icon": appData.icon,
|
||||
"comment": appData.comment,
|
||||
"usageCount": appData.usageCount,
|
||||
"lastUsed": appData.lastUsed
|
||||
})
|
||||
}
|
||||
apps.sort(function (a, b) {
|
||||
if (a.usageCount !== b.usageCount)
|
||||
return b.usageCount - a.usageCount
|
||||
|
||||
Row {
|
||||
width: parent.width - Theme.spacingL
|
||||
spacing: Theme.spacingL
|
||||
visible: SettingsData.useOSLogo
|
||||
opacity: visible ? 1 : 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingL
|
||||
|
||||
Column {
|
||||
width: 120
|
||||
spacing: Theme.spacingS
|
||||
|
||||
StyledText {
|
||||
text: "Color Override"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
DankTextField {
|
||||
width: 100
|
||||
height: 28
|
||||
placeholderText: "#ffffff"
|
||||
text: SettingsData.osLogoColorOverride
|
||||
maximumLength: 7
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
topPadding: Theme.spacingXS
|
||||
bottomPadding: Theme.spacingXS
|
||||
onEditingFinished: {
|
||||
var color = text.trim();
|
||||
if (color === "" || /^#[0-9A-Fa-f]{6}$/.test(color))
|
||||
SettingsData.setOSLogoColorOverride(color);
|
||||
else
|
||||
text = SettingsData.osLogoColorOverride;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Column {
|
||||
width: 120
|
||||
spacing: Theme.spacingS
|
||||
|
||||
StyledText {
|
||||
text: "Brightness"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
DankSlider {
|
||||
width: 100
|
||||
height: 20
|
||||
minimum: 0
|
||||
maximum: 100
|
||||
value: Math.round(SettingsData.osLogoBrightness * 100)
|
||||
unit: "%"
|
||||
showValue: true
|
||||
onSliderValueChanged: (newValue) => {
|
||||
SettingsData.setOSLogoBrightness(newValue / 100);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Column {
|
||||
width: 120
|
||||
spacing: Theme.spacingS
|
||||
|
||||
StyledText {
|
||||
text: "Contrast"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
DankSlider {
|
||||
width: 100
|
||||
height: 20
|
||||
minimum: 0
|
||||
maximum: 200
|
||||
value: Math.round(SettingsData.osLogoContrast * 100)
|
||||
unit: "%"
|
||||
showValue: true
|
||||
onSliderValueChanged: (newValue) => {
|
||||
SettingsData.setOSLogoContrast(newValue / 100);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
return a.name.localeCompare(b.name)
|
||||
})
|
||||
return apps.slice(0, 20)
|
||||
}
|
||||
}
|
||||
|
||||
// Dock Component
|
||||
Component {
|
||||
id: dockComponent
|
||||
|
||||
StyledRect {
|
||||
width: parent.width
|
||||
height: dockSection.implicitHeight + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: 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
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Column {
|
||||
id: dockSection
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
DankIcon {
|
||||
name: "history"
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
StyledText {
|
||||
text: "Recently Used Apps"
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
DankIcon {
|
||||
name: "dock_to_bottom"
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
Item {
|
||||
width: parent.width - parent.children[0].width - parent.children[1].width
|
||||
- clearAllButton.width - Theme.spacingM * 3
|
||||
height: 1
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Dock"
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Show Dock"
|
||||
description: "Display a dock at the bottom of the screen with pinned and running applications"
|
||||
checked: SettingsData.showDock
|
||||
onToggled: (checked) => {
|
||||
SettingsData.setShowDock(checked)
|
||||
}
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Auto-hide Dock"
|
||||
description: "Hide the dock when not in use and reveal it when hovering near the bottom of the screen"
|
||||
checked: SettingsData.dockAutoHide
|
||||
visible: SettingsData.showDock
|
||||
opacity: visible ? 1 : 0
|
||||
onToggled: (checked) => {
|
||||
SettingsData.setDockAutoHide(checked)
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
visible: SettingsData.showDock
|
||||
opacity: visible ? 1 : 0
|
||||
|
||||
StyledText {
|
||||
text: "Dock Transparency"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
DankSlider {
|
||||
width: parent.width
|
||||
height: 24
|
||||
value: Math.round(SettingsData.dockTransparency * 100)
|
||||
minimum: 0
|
||||
maximum: 100
|
||||
unit: ""
|
||||
showValue: true
|
||||
onSliderValueChanged: (newValue) => {
|
||||
SettingsData.setDockTransparency(newValue / 100);
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
DankActionButton {
|
||||
id: clearAllButton
|
||||
|
||||
iconName: "delete_sweep"
|
||||
iconSize: Theme.iconSize - 2
|
||||
iconColor: Theme.error
|
||||
hoverColor: Qt.rgba(Theme.error.r, Theme.error.g,
|
||||
Theme.error.b, 0.12)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
onClicked: {
|
||||
AppUsageHistoryData.appUsageRanking = {}
|
||||
SettingsData.saveSettings()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Recently Used Apps Component
|
||||
Component {
|
||||
id: recentlyUsedComponent
|
||||
|
||||
StyledRect {
|
||||
width: parent.width
|
||||
height: recentlyUsedSection.implicitHeight + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: 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
|
||||
StyledText {
|
||||
width: parent.width
|
||||
text: "Apps are ordered by usage frequency, then last used, then alphabetically."
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
|
||||
Column {
|
||||
id: recentlyUsedSection
|
||||
Column {
|
||||
id: rankedAppsList
|
||||
|
||||
property var rankedAppsModel: {
|
||||
var apps = [];
|
||||
for (var appId in (AppUsageHistoryData.appUsageRanking || {})) {
|
||||
var appData = (AppUsageHistoryData.appUsageRanking || {})[appId];
|
||||
apps.push({
|
||||
"id": appId,
|
||||
"name": appData.name,
|
||||
"exec": appData.exec,
|
||||
"icon": appData.icon,
|
||||
"comment": appData.comment,
|
||||
"usageCount": appData.usageCount,
|
||||
"lastUsed": appData.lastUsed
|
||||
});
|
||||
}
|
||||
apps.sort(function(a, b) {
|
||||
if (a.usageCount !== b.usageCount)
|
||||
return b.usageCount - a.usageCount;
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
return apps.slice(0, 20);
|
||||
}
|
||||
Repeater {
|
||||
model: recentlyUsedSection.rankedAppsModel
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingL
|
||||
delegate: Rectangle {
|
||||
width: rankedAppsList.width
|
||||
height: 48
|
||||
radius: Theme.cornerRadius
|
||||
color: Qt.rgba(Theme.surfaceContainer.r,
|
||||
Theme.surfaceContainer.g,
|
||||
Theme.surfaceContainer.b, 0.3)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
|
||||
Theme.outline.b, 0.1)
|
||||
border.width: 1
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: "history"
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Recently Used Apps"
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width - parent.children[0].width - parent.children[1].width - clearAllButton.width - Theme.spacingM * 3
|
||||
height: 1
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
id: clearAllButton
|
||||
|
||||
iconName: "delete_sweep"
|
||||
iconSize: Theme.iconSize - 2
|
||||
iconColor: Theme.error
|
||||
hoverColor: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
onClicked: {
|
||||
AppUsageHistoryData.appUsageRanking = {};
|
||||
SettingsData.saveSettings();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
StyledText {
|
||||
width: parent.width
|
||||
text: "Apps are ordered by usage frequency, then last used, then alphabetically."
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
wrapMode: Text.WordWrap
|
||||
text: (index + 1).toString()
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
font.weight: Font.Medium
|
||||
color: Theme.primary
|
||||
width: 20
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Image {
|
||||
width: 24
|
||||
height: 24
|
||||
source: modelData.icon ? "image://icon/" + modelData.icon : "image://icon/application-x-executable"
|
||||
sourceSize.width: 24
|
||||
sourceSize.height: 24
|
||||
fillMode: Image.PreserveAspectFit
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
onStatusChanged: {
|
||||
if (status === Image.Error)
|
||||
source = "image://icon/application-x-executable"
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: rankedAppsList
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 2
|
||||
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
StyledText {
|
||||
text: modelData.name || "Unknown App"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: recentlyUsedSection.rankedAppsModel
|
||||
StyledText {
|
||||
text: {
|
||||
if (!modelData.lastUsed)
|
||||
return "Never used"
|
||||
|
||||
delegate: Rectangle {
|
||||
width: rankedAppsList.width
|
||||
height: 48
|
||||
radius: Theme.cornerRadius
|
||||
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.3)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
|
||||
border.width: 1
|
||||
var date = new Date(modelData.lastUsed)
|
||||
var now = new Date()
|
||||
var diffMs = now - date
|
||||
var diffMins = Math.floor(diffMs / (1000 * 60))
|
||||
var diffHours = Math.floor(diffMs / (1000 * 60 * 60))
|
||||
var diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
|
||||
if (diffMins < 1)
|
||||
return "Last launched just now"
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingM
|
||||
if (diffMins < 60)
|
||||
return "Last launched " + diffMins + " minute"
|
||||
+ (diffMins === 1 ? "" : "s") + " ago"
|
||||
|
||||
StyledText {
|
||||
text: (index + 1).toString()
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
font.weight: Font.Medium
|
||||
color: Theme.primary
|
||||
width: 20
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
if (diffHours < 24)
|
||||
return "Last launched " + diffHours + " hour"
|
||||
+ (diffHours === 1 ? "" : "s") + " ago"
|
||||
|
||||
Image {
|
||||
width: 24
|
||||
height: 24
|
||||
source: modelData.icon ? "image://icon/" + modelData.icon : "image://icon/application-x-executable"
|
||||
sourceSize.width: 24
|
||||
sourceSize.height: 24
|
||||
fillMode: Image.PreserveAspectFit
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
onStatusChanged: {
|
||||
if (status === Image.Error)
|
||||
source = "image://icon/application-x-executable";
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 2
|
||||
|
||||
StyledText {
|
||||
text: modelData.name || "Unknown App"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: {
|
||||
if (!modelData.lastUsed)
|
||||
return "Never used";
|
||||
|
||||
var date = new Date(modelData.lastUsed);
|
||||
var now = new Date();
|
||||
var diffMs = now - date;
|
||||
var diffMins = Math.floor(diffMs / (1000 * 60));
|
||||
var diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
||||
var diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
if (diffMins < 1)
|
||||
return "Last launched just now";
|
||||
|
||||
if (diffMins < 60)
|
||||
return "Last launched " + diffMins + " minute" + (diffMins === 1 ? "" : "s") + " ago";
|
||||
|
||||
if (diffHours < 24)
|
||||
return "Last launched " + diffHours + " hour" + (diffHours === 1 ? "" : "s") + " ago";
|
||||
|
||||
if (diffDays < 7)
|
||||
return "Last launched " + diffDays + " day" + (diffDays === 1 ? "" : "s") + " ago";
|
||||
|
||||
return "Last launched " + date.toLocaleDateString();
|
||||
}
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
circular: true
|
||||
iconName: "close"
|
||||
iconSize: 16
|
||||
iconColor: Theme.error
|
||||
hoverColor: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
|
||||
onClicked: {
|
||||
var currentRanking = Object.assign({
|
||||
}, AppUsageHistoryData.appUsageRanking || {});
|
||||
delete currentRanking[modelData.id];
|
||||
AppUsageHistoryData.appUsageRanking = currentRanking;
|
||||
SettingsData.saveSettings();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
if (diffDays < 7)
|
||||
return "Last launched " + diffDays + " day"
|
||||
+ (diffDays === 1 ? "" : "s") + " ago"
|
||||
|
||||
return "Last launched " + date.toLocaleDateString()
|
||||
}
|
||||
|
||||
StyledText {
|
||||
width: parent.width
|
||||
text: recentlyUsedSection.rankedAppsModel.length === 0 ? "No apps have been launched yet." : ""
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceVariantText
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
visible: recentlyUsedSection.rankedAppsModel.length === 0
|
||||
}
|
||||
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
circular: true
|
||||
iconName: "close"
|
||||
iconSize: 16
|
||||
iconColor: Theme.error
|
||||
hoverColor: Qt.rgba(Theme.error.r, Theme.error.g,
|
||||
Theme.error.b, 0.12)
|
||||
onClicked: {
|
||||
var currentRanking = Object.assign(
|
||||
{}, AppUsageHistoryData.appUsageRanking || {})
|
||||
delete currentRanking[modelData.id]
|
||||
AppUsageHistoryData.appUsageRanking = currentRanking
|
||||
SettingsData.saveSettings()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
width: parent.width
|
||||
text: recentlyUsedSection.rankedAppsModel.length
|
||||
=== 0 ? "No apps have been launched yet." : ""
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceVariantText
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
visible: recentlyUsedSection.rankedAppsModel.length === 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,114 +1,107 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
pragma ComponentBehavior
|
||||
|
||||
import QtQuick
|
||||
import qs.Common
|
||||
import qs.Widgets
|
||||
|
||||
Column {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
property string title: ""
|
||||
property string iconName: ""
|
||||
property alias content: contentLoader.sourceComponent
|
||||
property bool expanded: false
|
||||
property bool collapsible: true
|
||||
property bool lazyLoad: true
|
||||
property string title: ""
|
||||
property string iconName: ""
|
||||
property alias content: contentLoader.sourceComponent
|
||||
property bool expanded: false
|
||||
property bool collapsible: true
|
||||
property bool lazyLoad: true
|
||||
|
||||
width: parent.width
|
||||
spacing: expanded ? Theme.spacingM : 0
|
||||
Component.onCompleted: {
|
||||
if (!collapsible)
|
||||
expanded = true
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
width: parent.width
|
||||
spacing: expanded ? Theme.spacingM : 0
|
||||
Component.onCompleted: {
|
||||
if (!collapsible)
|
||||
expanded = true;
|
||||
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
width: parent.width
|
||||
height: headerRow.height
|
||||
enabled: collapsible
|
||||
hoverEnabled: collapsible
|
||||
onClicked: {
|
||||
if (collapsible)
|
||||
expanded = !expanded;
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: parent.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
|
||||
radius: Theme.radiusS
|
||||
}
|
||||
|
||||
Row {
|
||||
id: headerRow
|
||||
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
topPadding: Theme.spacingS
|
||||
bottomPadding: Theme.spacingS
|
||||
|
||||
DankIcon {
|
||||
name: root.collapsible ? (root.expanded ? "expand_less" : "expand_more") : root.iconName
|
||||
size: Theme.iconSize - 2
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Behavior on rotation {
|
||||
NumberAnimation {
|
||||
duration: Appearance.anim.durations.fast
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
DankIcon {
|
||||
name: root.iconName
|
||||
size: Theme.iconSize - 4
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: root.collapsible
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: root.title
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
height: headerRow.height
|
||||
enabled: collapsible
|
||||
hoverEnabled: collapsible
|
||||
onClicked: {
|
||||
if (collapsible)
|
||||
expanded = !expanded
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 1
|
||||
color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
|
||||
visible: expanded || !collapsible
|
||||
anchors.fill: parent
|
||||
color: parent.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g,
|
||||
Theme.primary.b,
|
||||
0.08) : "transparent"
|
||||
radius: Theme.radiusS
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: contentLoader
|
||||
Row {
|
||||
id: headerRow
|
||||
|
||||
width: parent.width
|
||||
active: lazyLoad ? expanded || !collapsible : true
|
||||
visible: expanded || !collapsible
|
||||
asynchronous: true
|
||||
opacity: visible ? 1 : 0
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
topPadding: Theme.spacingS
|
||||
bottomPadding: Theme.spacingS
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Appearance.anim.durations.normal
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
}
|
||||
DankIcon {
|
||||
name: root.collapsible ? (root.expanded ? "expand_less" : "expand_more") : root.iconName
|
||||
size: Theme.iconSize - 2
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Behavior on rotation {
|
||||
NumberAnimation {
|
||||
duration: Appearance.anim.durations.fast
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
DankIcon {
|
||||
name: root.iconName
|
||||
size: Theme.iconSize - 4
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: root.collapsible
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: root.title
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 1
|
||||
color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
|
||||
visible: expanded || !collapsible
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: contentLoader
|
||||
|
||||
width: parent.width
|
||||
active: lazyLoad ? expanded || !collapsible : true
|
||||
visible: expanded || !collapsible
|
||||
asynchronous: true
|
||||
opacity: visible ? 1 : 0
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Appearance.anim.durations.normal
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,183 +4,183 @@ import qs.Common
|
||||
import qs.Widgets
|
||||
|
||||
Item {
|
||||
id: timeWeatherTab
|
||||
id: timeWeatherTab
|
||||
|
||||
DankFlickable {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: Theme.spacingL
|
||||
anchors.bottomMargin: Theme.spacingXL
|
||||
clip: true
|
||||
contentHeight: mainColumn.height
|
||||
contentWidth: width
|
||||
|
||||
Column {
|
||||
id: mainColumn
|
||||
width: parent.width
|
||||
spacing: Theme.spacingXL
|
||||
|
||||
Loader {
|
||||
width: parent.width
|
||||
sourceComponent: timeComponent
|
||||
}
|
||||
|
||||
Loader {
|
||||
width: parent.width
|
||||
sourceComponent: weatherComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time Format Component
|
||||
Component {
|
||||
id: timeComponent
|
||||
|
||||
StyledRect {
|
||||
width: parent.width
|
||||
height: timeSection.implicitHeight + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: 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
|
||||
|
||||
Column {
|
||||
id: timeSection
|
||||
|
||||
DankFlickable {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: Theme.spacingL
|
||||
anchors.bottomMargin: Theme.spacingXL
|
||||
clip: true
|
||||
contentHeight: mainColumn.height
|
||||
contentWidth: width
|
||||
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: "schedule"
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Time Format"
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "24-Hour Format"
|
||||
description: "Use 24-hour time format instead of 12-hour AM/PM"
|
||||
checked: SettingsData.use24HourClock
|
||||
onToggled: checked => {
|
||||
return SettingsData.setClockFormat(checked)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Weather Component
|
||||
Component {
|
||||
id: weatherComponent
|
||||
|
||||
StyledRect {
|
||||
width: parent.width
|
||||
height: weatherSection.implicitHeight + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: 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
|
||||
|
||||
Column {
|
||||
id: weatherSection
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: "cloud"
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Weather"
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Enable Weather"
|
||||
description: "Show weather information in top bar and centcom center"
|
||||
checked: SettingsData.weatherEnabled
|
||||
onToggled: checked => {
|
||||
return SettingsData.setWeatherEnabled(checked)
|
||||
}
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Fahrenheit"
|
||||
description: "Use Fahrenheit instead of Celsius for temperature"
|
||||
checked: SettingsData.useFahrenheit
|
||||
enabled: SettingsData.weatherEnabled
|
||||
onToggled: checked => {
|
||||
return SettingsData.setTemperatureUnit(checked)
|
||||
}
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Auto Location"
|
||||
description: "Allow wttr.in to determine location based on IP address"
|
||||
checked: SettingsData.useAutoLocation
|
||||
enabled: SettingsData.weatherEnabled
|
||||
onToggled: checked => {
|
||||
return SettingsData.setAutoLocation(checked)
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: mainColumn
|
||||
width: parent.width
|
||||
spacing: Theme.spacingXS
|
||||
visible: !SettingsData.useAutoLocation && SettingsData.weatherEnabled
|
||||
|
||||
StyledText {
|
||||
text: "Location"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
DankLocationSearch {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingXL
|
||||
|
||||
Loader {
|
||||
width: parent.width
|
||||
sourceComponent: timeComponent
|
||||
}
|
||||
|
||||
Loader {
|
||||
width: parent.width
|
||||
sourceComponent: weatherComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time Format Component
|
||||
Component {
|
||||
id: timeComponent
|
||||
|
||||
StyledRect {
|
||||
width: parent.width
|
||||
height: timeSection.implicitHeight + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: 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
|
||||
|
||||
Column {
|
||||
id: timeSection
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: "schedule"
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Time Format"
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "24-Hour Format"
|
||||
description: "Use 24-hour time format instead of 12-hour AM/PM"
|
||||
checked: SettingsData.use24HourClock
|
||||
onToggled: (checked) => {
|
||||
return SettingsData.setClockFormat(checked);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Weather Component
|
||||
Component {
|
||||
id: weatherComponent
|
||||
|
||||
StyledRect {
|
||||
width: parent.width
|
||||
height: weatherSection.implicitHeight + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: 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
|
||||
|
||||
Column {
|
||||
id: weatherSection
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: "cloud"
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Weather"
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Enable Weather"
|
||||
description: "Show weather information in top bar and centcom center"
|
||||
checked: SettingsData.weatherEnabled
|
||||
onToggled: (checked) => {
|
||||
return SettingsData.setWeatherEnabled(checked);
|
||||
}
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Fahrenheit"
|
||||
description: "Use Fahrenheit instead of Celsius for temperature"
|
||||
checked: SettingsData.useFahrenheit
|
||||
enabled: SettingsData.weatherEnabled
|
||||
onToggled: (checked) => {
|
||||
return SettingsData.setTemperatureUnit(checked);
|
||||
}
|
||||
}
|
||||
|
||||
DankToggle {
|
||||
width: parent.width
|
||||
text: "Auto Location"
|
||||
description: "Allow wttr.in to determine location based on IP address"
|
||||
checked: SettingsData.useAutoLocation
|
||||
enabled: SettingsData.weatherEnabled
|
||||
onToggled: (checked) => {
|
||||
return SettingsData.setAutoLocation(checked);
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingXS
|
||||
visible: !SettingsData.useAutoLocation && SettingsData.weatherEnabled
|
||||
|
||||
StyledText {
|
||||
text: "Location"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
DankLocationSearch {
|
||||
width: parent.width
|
||||
currentLocation: SettingsData.weatherLocation
|
||||
placeholderText: "New York, NY"
|
||||
onLocationSelected: (displayName, coordinates) => {
|
||||
SettingsData.setWeatherLocation(displayName, coordinates);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
currentLocation: SettingsData.weatherLocation
|
||||
placeholderText: "New York, NY"
|
||||
onLocationSelected: (displayName, coordinates) => {
|
||||
SettingsData.setWeatherLocation(displayName,
|
||||
coordinates)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,380 +5,401 @@ import qs.Widgets
|
||||
import qs.Services
|
||||
|
||||
Column {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
property var items: []
|
||||
property var allWidgets: []
|
||||
property string title: ""
|
||||
property string titleIcon: "widgets"
|
||||
property string sectionId: ""
|
||||
property var items: []
|
||||
property var allWidgets: []
|
||||
property string title: ""
|
||||
property string titleIcon: "widgets"
|
||||
property string sectionId: ""
|
||||
|
||||
signal itemEnabledChanged(string sectionId, string itemId, bool enabled)
|
||||
signal itemOrderChanged(var newOrder)
|
||||
signal addWidget(string sectionId)
|
||||
signal removeWidget(string sectionId, int widgetIndex)
|
||||
signal spacerSizeChanged(string sectionId, string itemId, int newSize)
|
||||
signal compactModeChanged(string widgetId, bool enabled)
|
||||
signal gpuSelectionChanged(string sectionId, int widgetIndex, int selectedIndex)
|
||||
signal itemEnabledChanged(string sectionId, string itemId, bool enabled)
|
||||
signal itemOrderChanged(var newOrder)
|
||||
signal addWidget(string sectionId)
|
||||
signal removeWidget(string sectionId, int widgetIndex)
|
||||
signal spacerSizeChanged(string sectionId, string itemId, int newSize)
|
||||
signal compactModeChanged(string widgetId, bool enabled)
|
||||
signal gpuSelectionChanged(string sectionId, int widgetIndex, int selectedIndex)
|
||||
|
||||
width: parent.width
|
||||
height: implicitHeight
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
height: implicitHeight
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: root.titleIcon
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: root.title
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width - 60
|
||||
height: 1
|
||||
}
|
||||
|
||||
DankIcon {
|
||||
name: root.titleIcon
|
||||
size: Theme.iconSize
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Column {
|
||||
id: itemsList
|
||||
StyledText {
|
||||
text: root.title
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
Item {
|
||||
width: parent.width - 60
|
||||
height: 1
|
||||
}
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: root.items
|
||||
Column {
|
||||
id: itemsList
|
||||
|
||||
delegate: Item {
|
||||
id: delegateItem
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
|
||||
property bool held: dragArea.pressed
|
||||
property real originalY: y
|
||||
Repeater {
|
||||
model: root.items
|
||||
|
||||
width: itemsList.width
|
||||
height: 70
|
||||
z: held ? 2 : 1
|
||||
delegate: Item {
|
||||
id: delegateItem
|
||||
|
||||
Rectangle {
|
||||
id: itemBackground
|
||||
property bool held: dragArea.pressed
|
||||
property real originalY: y
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: 2
|
||||
radius: Theme.cornerRadius
|
||||
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.8)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
|
||||
border.width: 1
|
||||
width: itemsList.width
|
||||
height: 70
|
||||
z: held ? 2 : 1
|
||||
|
||||
DankIcon {
|
||||
name: "drag_indicator"
|
||||
size: Theme.iconSize - 4
|
||||
color: Theme.outline
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM + 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
opacity: 0.8
|
||||
Rectangle {
|
||||
id: itemBackground
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: 2
|
||||
radius: Theme.cornerRadius
|
||||
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
|
||||
Theme.surfaceContainer.b, 0.8)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
|
||||
Theme.outline.b, 0.2)
|
||||
border.width: 1
|
||||
|
||||
DankIcon {
|
||||
name: "drag_indicator"
|
||||
size: Theme.iconSize - 4
|
||||
color: Theme.outline
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM + 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
opacity: 0.8
|
||||
}
|
||||
|
||||
DankIcon {
|
||||
name: modelData.icon
|
||||
size: Theme.iconSize
|
||||
color: modelData.enabled ? Theme.primary : Theme.outline
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM * 2 + 40
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM * 3 + 40 + Theme.iconSize
|
||||
anchors.right: actionButtons.left
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 2
|
||||
|
||||
StyledText {
|
||||
text: modelData.text
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
font.weight: Font.Medium
|
||||
color: modelData.enabled ? Theme.surfaceText : Theme.outline
|
||||
elide: Text.ElideRight
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: modelData.description
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: modelData.enabled ? Theme.outline : Qt.rgba(
|
||||
Theme.outline.r, Theme.outline.g,
|
||||
Theme.outline.b, 0.6)
|
||||
elide: Text.ElideRight
|
||||
width: parent.width
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: actionButtons
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
Item {
|
||||
width: 120
|
||||
height: 32
|
||||
visible: modelData.id === "gpuTemp"
|
||||
|
||||
DankDropdown {
|
||||
id: gpuDropdown
|
||||
anchors.fill: parent
|
||||
currentValue: {
|
||||
var selectedIndex = modelData.selectedGpuIndex
|
||||
!== undefined ? modelData.selectedGpuIndex : 0
|
||||
if (SysMonitorService.availableGpus
|
||||
&& SysMonitorService.availableGpus.length > selectedIndex
|
||||
&& selectedIndex >= 0) {
|
||||
var gpu = SysMonitorService.availableGpus[selectedIndex]
|
||||
return gpu.driver.toUpperCase() + " (" + Math.round(
|
||||
gpu.temperature || 0) + "°C)"
|
||||
}
|
||||
return SysMonitorService.availableGpus
|
||||
&& SysMonitorService.availableGpus.length
|
||||
> 0 ? SysMonitorService.availableGpus[0].driver.toUpperCase(
|
||||
) + " (" + Math.round(
|
||||
SysMonitorService.availableGpus[0].temperature
|
||||
|| 0) + "°C)" : ""
|
||||
}
|
||||
options: {
|
||||
var gpuOptions = []
|
||||
if (SysMonitorService.availableGpus
|
||||
&& SysMonitorService.availableGpus.length > 0) {
|
||||
for (var i = 0; i < SysMonitorService.availableGpus.length; i++) {
|
||||
var gpu = SysMonitorService.availableGpus[i]
|
||||
gpuOptions.push(gpu.driver.toUpperCase(
|
||||
) + " (" + Math.round(gpu.temperature
|
||||
|| 0) + "°C)")
|
||||
}
|
||||
|
||||
DankIcon {
|
||||
name: modelData.icon
|
||||
size: Theme.iconSize
|
||||
color: modelData.enabled ? Theme.primary : Theme.outline
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM * 2 + 40
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM * 3 + 40 + Theme.iconSize
|
||||
anchors.right: actionButtons.left
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 2
|
||||
|
||||
StyledText {
|
||||
text: modelData.text
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
font.weight: Font.Medium
|
||||
color: modelData.enabled ? Theme.surfaceText : Theme.outline
|
||||
elide: Text.ElideRight
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: modelData.description
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: modelData.enabled ? Theme.outline : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
|
||||
elide: Text.ElideRight
|
||||
width: parent.width
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Row {
|
||||
id: actionButtons
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
Item {
|
||||
width: 120
|
||||
height: 32
|
||||
visible: modelData.id === "gpuTemp"
|
||||
|
||||
DankDropdown {
|
||||
id: gpuDropdown
|
||||
anchors.fill: parent
|
||||
currentValue: {
|
||||
var selectedIndex = modelData.selectedGpuIndex !== undefined ? modelData.selectedGpuIndex : 0;
|
||||
if (SysMonitorService.availableGpus && SysMonitorService.availableGpus.length > selectedIndex && selectedIndex >= 0) {
|
||||
var gpu = SysMonitorService.availableGpus[selectedIndex];
|
||||
return gpu.driver.toUpperCase() + " (" + Math.round(gpu.temperature || 0) + "°C)";
|
||||
}
|
||||
return SysMonitorService.availableGpus && SysMonitorService.availableGpus.length > 0 ? SysMonitorService.availableGpus[0].driver.toUpperCase() + " (" + Math.round(SysMonitorService.availableGpus[0].temperature || 0) + "°C)" : "";
|
||||
}
|
||||
return gpuOptions
|
||||
}
|
||||
onValueChanged: value => {
|
||||
var gpuIndex = options.indexOf(value)
|
||||
if (gpuIndex >= 0) {
|
||||
root.gpuSelectionChanged(root.sectionId,
|
||||
index, gpuIndex)
|
||||
}
|
||||
}
|
||||
options: {
|
||||
var gpuOptions = [];
|
||||
if (SysMonitorService.availableGpus && SysMonitorService.availableGpus.length > 0) {
|
||||
for (var i = 0; i < SysMonitorService.availableGpus.length; i++) {
|
||||
var gpu = SysMonitorService.availableGpus[i];
|
||||
gpuOptions.push(gpu.driver.toUpperCase() + " (" + Math.round(gpu.temperature || 0) + "°C)");
|
||||
}
|
||||
}
|
||||
return gpuOptions;
|
||||
}
|
||||
onValueChanged: (value) => {
|
||||
var gpuIndex = options.indexOf(value);
|
||||
if (gpuIndex >= 0) {
|
||||
root.gpuSelectionChanged(root.sectionId, index, gpuIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
width: 32
|
||||
height: 32
|
||||
visible: modelData.id === "clock" || modelData.id === "music"
|
||||
|
||||
DankActionButton {
|
||||
id: compactModeButton
|
||||
anchors.fill: parent
|
||||
buttonSize: 32
|
||||
iconName: (modelData.id === "clock" && SettingsData.clockCompactMode) || (modelData.id === "music" && SettingsData.mediaCompactMode) ? "zoom_out" : "zoom_in"
|
||||
iconSize: 18
|
||||
iconColor: ((modelData.id === "clock" && SettingsData.clockCompactMode) || (modelData.id === "music" && SettingsData.mediaCompactMode)) ? Theme.primary : Theme.outline
|
||||
onClicked: {
|
||||
if (modelData.id === "clock") {
|
||||
root.compactModeChanged("clock", !SettingsData.clockCompactMode);
|
||||
} else if (modelData.id === "music") {
|
||||
root.compactModeChanged("music", !SettingsData.mediaCompactMode);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: compactModeTooltip
|
||||
width: tooltipText.contentWidth + Theme.spacingM * 2
|
||||
height: tooltipText.contentHeight + Theme.spacingS * 2
|
||||
radius: Theme.cornerRadius
|
||||
color: Theme.surfaceContainer
|
||||
border.color: Theme.outline
|
||||
border.width: 1
|
||||
visible: compactModeButton.children[1] && compactModeButton.children[1].containsMouse
|
||||
opacity: visible ? 1 : 0
|
||||
x: -width - Theme.spacingS
|
||||
y: (parent.height - height) / 2
|
||||
z: 100
|
||||
Item {
|
||||
width: 32
|
||||
height: 32
|
||||
visible: modelData.id === "clock" || modelData.id === "music"
|
||||
|
||||
StyledText {
|
||||
id: tooltipText
|
||||
anchors.centerIn: parent
|
||||
text: "Compact Mode"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
}
|
||||
DankActionButton {
|
||||
id: compactModeButton
|
||||
anchors.fill: parent
|
||||
buttonSize: 32
|
||||
iconName: (modelData.id === "clock"
|
||||
&& SettingsData.clockCompactMode)
|
||||
|| (modelData.id === "music"
|
||||
&& SettingsData.mediaCompactMode) ? "zoom_out" : "zoom_in"
|
||||
iconSize: 18
|
||||
iconColor: ((modelData.id === "clock"
|
||||
&& SettingsData.clockCompactMode)
|
||||
|| (modelData.id === "music"
|
||||
&& SettingsData.mediaCompactMode)) ? Theme.primary : Theme.outline
|
||||
onClicked: {
|
||||
if (modelData.id === "clock") {
|
||||
root.compactModeChanged("clock",
|
||||
!SettingsData.clockCompactMode)
|
||||
} else if (modelData.id === "music") {
|
||||
root.compactModeChanged("music",
|
||||
!SettingsData.mediaCompactMode)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
visible: modelData.id !== "spacer"
|
||||
buttonSize: 32
|
||||
iconName: modelData.enabled ? "visibility" : "visibility_off"
|
||||
iconSize: 18
|
||||
iconColor: modelData.enabled ? Theme.primary : Theme.outline
|
||||
onClicked: {
|
||||
root.itemEnabledChanged(root.sectionId, modelData.id, !modelData.enabled);
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
visible: modelData.id === "spacer"
|
||||
spacing: Theme.spacingXS
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
DankActionButton {
|
||||
buttonSize: 24
|
||||
iconName: "remove"
|
||||
iconSize: 14
|
||||
iconColor: Theme.outline
|
||||
onClicked: {
|
||||
var currentSize = modelData.size || 20;
|
||||
var newSize = Math.max(5, currentSize - 5);
|
||||
root.spacerSizeChanged(root.sectionId, modelData.id, newSize);
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: (modelData.size || 20).toString()
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
buttonSize: 24
|
||||
iconName: "add"
|
||||
iconSize: 14
|
||||
iconColor: Theme.outline
|
||||
onClicked: {
|
||||
var currentSize = modelData.size || 20;
|
||||
var newSize = Math.min(5000, currentSize + 5);
|
||||
root.spacerSizeChanged(root.sectionId, modelData.id, newSize);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
buttonSize: 32
|
||||
iconName: "close"
|
||||
iconSize: 18
|
||||
iconColor: Theme.error
|
||||
onClicked: {
|
||||
root.removeWidget(root.sectionId, index);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: dragArea
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
width: 60
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.SizeVerCursor
|
||||
drag.target: held ? delegateItem : undefined
|
||||
drag.axis: Drag.YAxis
|
||||
drag.minimumY: -delegateItem.height
|
||||
drag.maximumY: itemsList.height
|
||||
preventStealing: true
|
||||
onPressed: {
|
||||
delegateItem.z = 2;
|
||||
delegateItem.originalY = delegateItem.y;
|
||||
}
|
||||
onReleased: {
|
||||
delegateItem.z = 1;
|
||||
if (drag.active) {
|
||||
var newIndex = Math.round(delegateItem.y / (delegateItem.height + itemsList.spacing));
|
||||
newIndex = Math.max(0, Math.min(newIndex, root.items.length - 1));
|
||||
if (newIndex !== index) {
|
||||
var newItems = root.items.slice();
|
||||
var draggedItem = newItems.splice(index, 1)[0];
|
||||
newItems.splice(newIndex, 0, draggedItem);
|
||||
root.itemOrderChanged(newItems.map((item) => {
|
||||
return ({
|
||||
"id": item.id,
|
||||
"enabled": item.enabled,
|
||||
"size": item.size
|
||||
});
|
||||
}));
|
||||
}
|
||||
}
|
||||
delegateItem.x = 0;
|
||||
delegateItem.y = delegateItem.originalY;
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on y {
|
||||
enabled: !dragArea.held && !dragArea.drag.active
|
||||
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
|
||||
}
|
||||
Rectangle {
|
||||
id: compactModeTooltip
|
||||
width: tooltipText.contentWidth + Theme.spacingM * 2
|
||||
height: tooltipText.contentHeight + Theme.spacingS * 2
|
||||
radius: Theme.cornerRadius
|
||||
color: Theme.surfaceContainer
|
||||
border.color: Theme.outline
|
||||
border.width: 1
|
||||
visible: compactModeButton.children[1]
|
||||
&& compactModeButton.children[1].containsMouse
|
||||
opacity: visible ? 1 : 0
|
||||
x: -width - Theme.spacingS
|
||||
y: (parent.height - height) / 2
|
||||
z: 100
|
||||
|
||||
StyledText {
|
||||
id: tooltipText
|
||||
anchors.centerIn: parent
|
||||
text: "Compact Mode"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
DankActionButton {
|
||||
visible: modelData.id !== "spacer"
|
||||
buttonSize: 32
|
||||
iconName: modelData.enabled ? "visibility" : "visibility_off"
|
||||
iconSize: 18
|
||||
iconColor: modelData.enabled ? Theme.primary : Theme.outline
|
||||
onClicked: {
|
||||
root.itemEnabledChanged(root.sectionId, modelData.id,
|
||||
!modelData.enabled)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Row {
|
||||
visible: modelData.id === "spacer"
|
||||
spacing: Theme.spacingXS
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Rectangle {
|
||||
width: 200
|
||||
height: 40
|
||||
radius: Theme.cornerRadius
|
||||
color: addButtonArea.containsMouse ? Theme.primaryContainer : 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
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
DankActionButton {
|
||||
buttonSize: 24
|
||||
iconName: "remove"
|
||||
iconSize: 14
|
||||
iconColor: Theme.outline
|
||||
onClicked: {
|
||||
var currentSize = modelData.size || 20
|
||||
var newSize = Math.max(5, currentSize - 5)
|
||||
root.spacerSizeChanged(root.sectionId, modelData.id, newSize)
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Add Widget"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
font.weight: Font.Medium
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
StyledText {
|
||||
text: (modelData.size || 20).toString()
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: addButtonArea
|
||||
DankActionButton {
|
||||
buttonSize: 24
|
||||
iconName: "add"
|
||||
iconSize: 14
|
||||
iconColor: Theme.outline
|
||||
onClicked: {
|
||||
var currentSize = modelData.size || 20
|
||||
var newSize = Math.min(5000, currentSize + 5)
|
||||
root.spacerSizeChanged(root.sectionId, modelData.id, newSize)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
anchors.fill: parent
|
||||
DankActionButton {
|
||||
buttonSize: 32
|
||||
iconName: "close"
|
||||
iconSize: 18
|
||||
iconColor: Theme.error
|
||||
onClicked: {
|
||||
root.removeWidget(root.sectionId, index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: dragArea
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
width: 60
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
root.addWidget(root.sectionId);
|
||||
cursorShape: Qt.SizeVerCursor
|
||||
drag.target: held ? delegateItem : undefined
|
||||
drag.axis: Drag.YAxis
|
||||
drag.minimumY: -delegateItem.height
|
||||
drag.maximumY: itemsList.height
|
||||
preventStealing: true
|
||||
onPressed: {
|
||||
delegateItem.z = 2
|
||||
delegateItem.originalY = delegateItem.y
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
onReleased: {
|
||||
delegateItem.z = 1
|
||||
if (drag.active) {
|
||||
var newIndex = Math.round(
|
||||
delegateItem.y / (delegateItem.height + itemsList.spacing))
|
||||
newIndex = Math.max(0, Math.min(newIndex,
|
||||
root.items.length - 1))
|
||||
if (newIndex !== index) {
|
||||
var newItems = root.items.slice()
|
||||
var draggedItem = newItems.splice(index, 1)[0]
|
||||
newItems.splice(newIndex, 0, draggedItem)
|
||||
root.itemOrderChanged(newItems.map(item => {
|
||||
return ({
|
||||
"id": item.id,
|
||||
"enabled": item.enabled,
|
||||
"size": item.size
|
||||
})
|
||||
}))
|
||||
}
|
||||
}
|
||||
delegateItem.x = 0
|
||||
delegateItem.y = delegateItem.originalY
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on y {
|
||||
enabled: !dragArea.held && !dragArea.drag.active
|
||||
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 200
|
||||
height: 40
|
||||
radius: Theme.cornerRadius
|
||||
color: addButtonArea.containsMouse ? Theme.primaryContainer : 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
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
StyledText {
|
||||
text: "Add Widget"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
font.weight: Font.Medium
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: addButtonArea
|
||||
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
root.addWidget(root.sectionId)
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user