mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-01-27 06:52:50 -05:00
meta: large-scale refactor progress
This commit is contained in:
bbedward
@@ -7,11 +7,10 @@ import qs.Services
|
||||
Column {
|
||||
id: calendarWidget
|
||||
|
||||
property var theme: Theme
|
||||
property date displayDate: new Date()
|
||||
property date selectedDate: new Date()
|
||||
|
||||
spacing: theme.spacingM
|
||||
spacing: Theme.spacingM
|
||||
|
||||
// Load events when display date changes
|
||||
onDisplayDateChanged: {
|
||||
@@ -61,16 +60,16 @@ Column {
|
||||
Rectangle {
|
||||
width: 40
|
||||
height: 40
|
||||
radius: theme.cornerRadius
|
||||
color: prevMonthArea.containsMouse ? Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.12) : "transparent"
|
||||
radius: Theme.cornerRadius
|
||||
color: prevMonthArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "chevron_left"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.iconSize
|
||||
color: theme.primary
|
||||
font.weight: theme.iconFontWeight
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.iconSize
|
||||
color: Theme.primary
|
||||
font.weight: Theme.iconFontWeight
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
@@ -91,8 +90,8 @@ Column {
|
||||
width: parent.width - 80
|
||||
height: 40
|
||||
text: Qt.formatDate(displayDate, "MMMM yyyy")
|
||||
font.pixelSize: theme.fontSizeLarge
|
||||
color: theme.surfaceText
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
@@ -101,16 +100,16 @@ Column {
|
||||
Rectangle {
|
||||
width: 40
|
||||
height: 40
|
||||
radius: theme.cornerRadius
|
||||
color: nextMonthArea.containsMouse ? Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.12) : "transparent"
|
||||
radius: Theme.cornerRadius
|
||||
color: nextMonthArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "chevron_right"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.iconSize
|
||||
color: theme.primary
|
||||
font.weight: theme.iconFontWeight
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.iconSize
|
||||
color: Theme.primary
|
||||
font.weight: Theme.iconFontWeight
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
@@ -144,8 +143,8 @@ Column {
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: modelData
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.6)
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
}
|
||||
@@ -183,20 +182,20 @@ Column {
|
||||
property bool isToday: dayDate.toDateString() === new Date().toDateString()
|
||||
property bool isSelected: dayDate.toDateString() === selectedDate.toDateString()
|
||||
|
||||
color: isSelected ? theme.primary :
|
||||
isToday ? Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.12) :
|
||||
dayArea.containsMouse ? Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.08) : "transparent"
|
||||
color: isSelected ? Theme.primary :
|
||||
isToday ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) :
|
||||
dayArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
|
||||
|
||||
radius: theme.cornerRadiusSmall
|
||||
radius: Theme.cornerRadiusSmall
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: dayDate.getDate()
|
||||
font.pixelSize: theme.fontSizeMedium
|
||||
color: isSelected ? theme.surface :
|
||||
isToday ? theme.primary :
|
||||
isCurrentMonth ? theme.surfaceText :
|
||||
Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.4)
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: isSelected ? Theme.surface :
|
||||
isToday ? Theme.primary :
|
||||
isCurrentMonth ? Theme.surfaceText :
|
||||
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4)
|
||||
font.weight: isToday || isSelected ? Font.Medium : Font.Normal
|
||||
}
|
||||
|
||||
@@ -215,11 +214,11 @@ Column {
|
||||
color: {
|
||||
if (isSelected) {
|
||||
// Use a lighter tint of primary for selected state
|
||||
return Qt.lighter(theme.primary, 1.3)
|
||||
return Qt.lighter(Theme.primary, 1.3)
|
||||
} else if (isToday) {
|
||||
return theme.primary
|
||||
return Theme.primary
|
||||
} else {
|
||||
return theme.primary
|
||||
return Theme.primary
|
||||
}
|
||||
}
|
||||
|
||||
@@ -238,22 +237,22 @@ Column {
|
||||
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
duration: theme.shortDuration
|
||||
easing.type: theme.standardEasing
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: theme.shortDuration
|
||||
easing.type: theme.standardEasing
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: theme.shortDuration
|
||||
easing.type: theme.standardEasing
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,12 +9,12 @@ import qs.Common
|
||||
import qs.Services
|
||||
|
||||
PanelWindow {
|
||||
id: centerCommandCenter
|
||||
id: root
|
||||
|
||||
property var theme: Theme
|
||||
readonly property bool hasActiveMedia: MprisController.activePlayer !== null
|
||||
property bool calendarVisible: false
|
||||
|
||||
visible: root.calendarVisible
|
||||
visible: calendarVisible
|
||||
|
||||
implicitWidth: 480
|
||||
implicitHeight: 600
|
||||
@@ -48,15 +48,15 @@ PanelWindow {
|
||||
}
|
||||
|
||||
function calculateHeight() {
|
||||
let contentHeight = theme.spacingM * 2 // margins
|
||||
let contentHeight = Theme.spacingM * 2 // margins
|
||||
|
||||
// Main row with widgets and calendar
|
||||
let widgetHeight = 160 // Media widget always present
|
||||
widgetHeight += 140 + theme.spacingM // Weather widget always present
|
||||
widgetHeight += 140 + Theme.spacingM // Weather widget always present
|
||||
let calendarHeight = 300
|
||||
let mainRowHeight = Math.max(widgetHeight, calendarHeight)
|
||||
|
||||
contentHeight += mainRowHeight + theme.spacingM // Add spacing between main row and events
|
||||
contentHeight += mainRowHeight + Theme.spacingM
|
||||
|
||||
// Add events widget height - use calculated height instead of actual
|
||||
if (CalendarService && CalendarService.khalAvailable) {
|
||||
@@ -68,9 +68,9 @@ PanelWindow {
|
||||
return Math.min(contentHeight, parent.height * 0.9)
|
||||
}
|
||||
|
||||
color: theme.surfaceContainer
|
||||
radius: theme.cornerRadiusLarge
|
||||
border.color: Qt.rgba(theme.outline.r, theme.outline.g, theme.outline.b, 0.08)
|
||||
color: Theme.surfaceContainer
|
||||
radius: Theme.cornerRadiusLarge
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
|
||||
border.width: 1
|
||||
|
||||
layer.enabled: true
|
||||
@@ -85,27 +85,27 @@ PanelWindow {
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Qt.rgba(theme.surfaceTint.r, theme.surfaceTint.g, theme.surfaceTint.b, 0.04)
|
||||
color: Qt.rgba(Theme.surfaceTint.r, Theme.surfaceTint.g, Theme.surfaceTint.b, 0.04)
|
||||
radius: parent.radius
|
||||
|
||||
SequentialAnimation on opacity {
|
||||
running: root.calendarVisible
|
||||
running: calendarVisible
|
||||
loops: Animation.Infinite
|
||||
NumberAnimation {
|
||||
to: 0.08
|
||||
duration: theme.extraLongDuration
|
||||
easing.type: theme.standardEasing
|
||||
duration: Theme.extraLongDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
NumberAnimation {
|
||||
to: 0.02
|
||||
duration: theme.extraLongDuration
|
||||
easing.type: theme.standardEasing
|
||||
duration: Theme.extraLongDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
opacity: root.calendarVisible ? 1.0 : 0.0
|
||||
scale: root.calendarVisible ? 1.0 : 0.92
|
||||
opacity: calendarVisible ? 1.0 : 0.0
|
||||
scale: calendarVisible ? 1.0 : 0.92
|
||||
|
||||
// Update height when calendar service events change
|
||||
Connections {
|
||||
@@ -130,47 +130,47 @@ PanelWindow {
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: theme.longDuration
|
||||
easing.type: theme.emphasizedEasing
|
||||
duration: Theme.longDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
duration: theme.longDuration
|
||||
easing.type: theme.emphasizedEasing
|
||||
duration: Theme.longDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on height {
|
||||
NumberAnimation {
|
||||
duration: theme.mediumDuration
|
||||
easing.type: theme.standardEasing
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.fill: parent
|
||||
anchors.margins: theme.spacingM
|
||||
spacing: theme.spacingM
|
||||
anchors.margins: Theme.spacingM
|
||||
spacing: Theme.spacingM
|
||||
|
||||
// Main row with widgets and calendar
|
||||
Row {
|
||||
width: parent.width
|
||||
height: {
|
||||
let widgetHeight = 160 // Media widget always present
|
||||
widgetHeight += 140 + theme.spacingM // Weather widget always present
|
||||
widgetHeight += 140 + Theme.spacingM // Weather widget always present
|
||||
let calendarHeight = 300
|
||||
return Math.max(widgetHeight, calendarHeight)
|
||||
}
|
||||
spacing: theme.spacingM
|
||||
spacing: Theme.spacingM
|
||||
|
||||
// Left section for widgets
|
||||
Column {
|
||||
id: leftWidgets
|
||||
width: hasAnyWidgets ? parent.width * 0.45 : 0
|
||||
height: childrenRect.height
|
||||
spacing: theme.spacingM
|
||||
spacing: Theme.spacingM
|
||||
visible: hasAnyWidgets
|
||||
anchors.top: parent.top
|
||||
|
||||
@@ -180,23 +180,20 @@ PanelWindow {
|
||||
visible: true // Always visible - shows placeholder when no media
|
||||
width: parent.width
|
||||
height: 160
|
||||
theme: centerCommandCenter.theme
|
||||
}
|
||||
|
||||
WeatherWidget {
|
||||
visible: true // Always visible - shows placeholder when no weather
|
||||
width: parent.width
|
||||
height: 140
|
||||
theme: centerCommandCenter.theme
|
||||
}
|
||||
}
|
||||
|
||||
// Right section for calendar
|
||||
CalendarWidget {
|
||||
id: calendarWidget
|
||||
width: leftWidgets.hasAnyWidgets ? parent.width * 0.55 - theme.spacingL : parent.width
|
||||
width: leftWidgets.hasAnyWidgets ? parent.width * 0.55 - Theme.spacingL : parent.width
|
||||
height: parent.height
|
||||
theme: centerCommandCenter.theme
|
||||
}
|
||||
}
|
||||
|
||||
@@ -204,7 +201,6 @@ PanelWindow {
|
||||
EventsWidget {
|
||||
id: eventsWidget
|
||||
width: parent.width
|
||||
theme: centerCommandCenter.theme
|
||||
selectedDate: calendarWidget.selectedDate
|
||||
|
||||
}
|
||||
@@ -215,7 +211,7 @@ PanelWindow {
|
||||
anchors.fill: parent
|
||||
z: -1
|
||||
onClicked: {
|
||||
root.calendarVisible = false
|
||||
calendarVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,6 @@ import qs.Services
|
||||
Rectangle {
|
||||
id: eventsWidget
|
||||
|
||||
property var theme: Theme
|
||||
property date selectedDate: new Date()
|
||||
property var selectedDateEvents: []
|
||||
property bool hasEvents: selectedDateEvents && selectedDateEvents.length > 0
|
||||
@@ -21,9 +20,9 @@ Rectangle {
|
||||
|
||||
width: parent.width
|
||||
height: shouldShow ? (hasEvents ? Math.min(300, 80 + selectedDateEvents.length * 60) : 120) : 0
|
||||
radius: theme.cornerRadiusLarge
|
||||
color: Qt.rgba(theme.surfaceVariant.r, theme.surfaceVariant.g, theme.surfaceVariant.b, 0.12)
|
||||
border.color: Qt.rgba(theme.outline.r, theme.outline.g, theme.outline.b, 0.08)
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.12)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
|
||||
border.width: 1
|
||||
visible: shouldShow
|
||||
|
||||
@@ -40,8 +39,8 @@ Rectangle {
|
||||
|
||||
Behavior on height {
|
||||
NumberAnimation {
|
||||
duration: theme.mediumDuration
|
||||
easing.type: theme.emphasizedEasing
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,14 +80,14 @@ Rectangle {
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.margins: theme.spacingL
|
||||
spacing: theme.spacingS
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingS
|
||||
|
||||
Text {
|
||||
text: "event"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.iconSize - 2
|
||||
color: theme.primary
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.iconSize - 2
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
@@ -97,8 +96,8 @@ Rectangle {
|
||||
(Qt.formatDate(selectedDate, "MMM d") + " • " +
|
||||
(selectedDateEvents.length === 1 ? "1 event" : selectedDateEvents.length + " events")) :
|
||||
Qt.formatDate(selectedDate, "MMM d")
|
||||
font.pixelSize: theme.fontSizeMedium
|
||||
color: theme.surfaceText
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
@@ -107,21 +106,21 @@ Rectangle {
|
||||
// No events placeholder - centered in entire widget (not just content area)
|
||||
Column {
|
||||
anchors.centerIn: parent
|
||||
spacing: theme.spacingXS
|
||||
spacing: Theme.spacingXS
|
||||
visible: !hasEvents
|
||||
|
||||
Text {
|
||||
text: "event_busy"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.iconSize + 8
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.3)
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.iconSize + 8
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.3)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "No events"
|
||||
font.pixelSize: theme.fontSizeMedium
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.5)
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
|
||||
font.weight: Font.Normal
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
@@ -134,12 +133,12 @@ Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.margins: theme.spacingL
|
||||
anchors.topMargin: theme.spacingM
|
||||
anchors.margins: Theme.spacingL
|
||||
anchors.topMargin: Theme.spacingM
|
||||
visible: opacity > 0
|
||||
opacity: hasEvents ? 1.0 : 0.0
|
||||
clip: true
|
||||
spacing: theme.spacingS
|
||||
spacing: Theme.spacingS
|
||||
boundsMovement: Flickable.StopAtBounds
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
|
||||
@@ -149,28 +148,28 @@ Rectangle {
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: theme.mediumDuration
|
||||
easing.type: theme.emphasizedEasing
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
|
||||
delegate: Rectangle {
|
||||
width: eventsList.width
|
||||
height: eventContent.implicitHeight + theme.spacingM
|
||||
radius: theme.cornerRadius
|
||||
height: eventContent.implicitHeight + Theme.spacingM
|
||||
radius: Theme.cornerRadius
|
||||
color: {
|
||||
if (modelData.url && eventMouseArea.containsMouse) {
|
||||
return Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.12)
|
||||
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
|
||||
} else if (eventMouseArea.containsMouse) {
|
||||
return Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.06)
|
||||
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.06)
|
||||
}
|
||||
return Qt.rgba(theme.surfaceVariant.r, theme.surfaceVariant.g, theme.surfaceVariant.b, 0.06)
|
||||
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.06)
|
||||
}
|
||||
border.color: {
|
||||
if (modelData.url && eventMouseArea.containsMouse) {
|
||||
return Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.3)
|
||||
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
|
||||
} else if (eventMouseArea.containsMouse) {
|
||||
return Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.15)
|
||||
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.15)
|
||||
}
|
||||
return "transparent"
|
||||
}
|
||||
@@ -184,7 +183,7 @@ Rectangle {
|
||||
anchors.leftMargin: 4
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
radius: 2
|
||||
color: theme.primary
|
||||
color: Theme.primary
|
||||
opacity: 0.8
|
||||
}
|
||||
|
||||
@@ -193,15 +192,15 @@ Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.leftMargin: theme.spacingL + 4
|
||||
anchors.rightMargin: theme.spacingM
|
||||
anchors.leftMargin: Theme.spacingL + 4
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
spacing: 6
|
||||
|
||||
Text {
|
||||
width: parent.width
|
||||
text: modelData.title
|
||||
font.pixelSize: theme.fontSizeMedium
|
||||
color: theme.surfaceText
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
elide: Text.ElideRight
|
||||
wrapMode: Text.Wrap
|
||||
@@ -220,9 +219,9 @@ Rectangle {
|
||||
|
||||
Text {
|
||||
text: "schedule"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.7)
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
@@ -240,8 +239,8 @@ Rectangle {
|
||||
return startTime
|
||||
}
|
||||
}
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.7)
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
|
||||
font.weight: Font.Normal
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
@@ -256,16 +255,16 @@ Rectangle {
|
||||
|
||||
Text {
|
||||
text: "location_on"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.7)
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
text: modelData.location
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.7)
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
|
||||
elide: Text.ElideRight
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
maximumLineCount: 1
|
||||
@@ -293,15 +292,15 @@ Rectangle {
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: theme.shortDuration
|
||||
easing.type: theme.standardEasing
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: theme.shortDuration
|
||||
easing.type: theme.standardEasing
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,6 @@ Rectangle {
|
||||
id: mediaPlayerWidget
|
||||
|
||||
property MprisPlayer activePlayer: MprisController.activePlayer
|
||||
property var theme: Theme
|
||||
|
||||
property string lastValidTitle: ""
|
||||
property string lastValidArtist: ""
|
||||
@@ -40,9 +39,9 @@ Rectangle {
|
||||
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
radius: theme.cornerRadiusLarge
|
||||
color: Qt.rgba(theme.surfaceContainer.r, theme.surfaceContainer.g, theme.surfaceContainer.b, 0.4)
|
||||
border.color: Qt.rgba(theme.outline.r, theme.outline.g, theme.outline.b, 0.08)
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.4)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
|
||||
border.width: 1
|
||||
|
||||
layer.enabled: true
|
||||
@@ -96,26 +95,26 @@ Rectangle {
|
||||
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
anchors.margins: theme.spacingS
|
||||
anchors.margins: Theme.spacingS
|
||||
|
||||
// Placeholder when no media - centered in entire widget
|
||||
Column {
|
||||
anchors.centerIn: parent
|
||||
spacing: theme.spacingS
|
||||
spacing: Theme.spacingS
|
||||
visible: (!activePlayer && !lastValidTitle) || (activePlayer && activePlayer.trackTitle === "" && lastValidTitle === "")
|
||||
|
||||
Text {
|
||||
text: "music_note"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.iconSize + 8
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.5)
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.iconSize + 8
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "No Media Playing"
|
||||
font.pixelSize: theme.fontSizeMedium
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.7)
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
}
|
||||
@@ -123,21 +122,21 @@ Rectangle {
|
||||
// Active content in a column
|
||||
Column {
|
||||
anchors.fill: parent
|
||||
spacing: theme.spacingS
|
||||
spacing: Theme.spacingS
|
||||
visible: activePlayer && activePlayer.trackTitle !== "" || lastValidTitle !== ""
|
||||
|
||||
// Normal media info when playing
|
||||
Row {
|
||||
width: parent.width
|
||||
height: 60
|
||||
spacing: theme.spacingM
|
||||
spacing: Theme.spacingM
|
||||
|
||||
// Album Art
|
||||
Rectangle {
|
||||
width: 60
|
||||
height: 60
|
||||
radius: theme.cornerRadius
|
||||
color: Qt.rgba(theme.surfaceVariant.r, theme.surfaceVariant.g, theme.surfaceVariant.b, 0.3)
|
||||
radius: Theme.cornerRadius
|
||||
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
|
||||
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
@@ -164,9 +163,9 @@ Rectangle {
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "album"
|
||||
font.family: theme.iconFont
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: 28
|
||||
color: theme.surfaceVariantText
|
||||
color: Theme.surfaceVariantText
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -174,9 +173,9 @@ Rectangle {
|
||||
|
||||
// Track Info
|
||||
Column {
|
||||
width: parent.width - 60 - theme.spacingM
|
||||
width: parent.width - 60 - Theme.spacingM
|
||||
height: parent.height
|
||||
spacing: theme.spacingXS
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
Text {
|
||||
text: activePlayer?.trackTitle || lastValidTitle || "Unknown Track"
|
||||
@@ -185,9 +184,9 @@ Rectangle {
|
||||
lastValidTitle = activePlayer.trackTitle;
|
||||
}
|
||||
}
|
||||
font.pixelSize: theme.fontSizeMedium
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
font.weight: Font.Bold
|
||||
color: theme.surfaceText
|
||||
color: Theme.surfaceText
|
||||
width: parent.width
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
@@ -199,8 +198,8 @@ Rectangle {
|
||||
lastValidArtist = activePlayer.trackArtist;
|
||||
}
|
||||
}
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.8)
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.8)
|
||||
width: parent.width
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
@@ -212,8 +211,8 @@ Rectangle {
|
||||
lastValidAlbum = activePlayer.trackAlbum;
|
||||
}
|
||||
}
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.6)
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
|
||||
width: parent.width
|
||||
elide: Text.ElideRight
|
||||
visible: text.length > 0
|
||||
@@ -232,7 +231,7 @@ Rectangle {
|
||||
width: parent.width
|
||||
height: 6
|
||||
radius: 3
|
||||
color: Qt.rgba(theme.surfaceVariant.r, theme.surfaceVariant.g, theme.surfaceVariant.b, 0.3)
|
||||
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
|
||||
visible: activePlayer !== null
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
@@ -240,7 +239,7 @@ Rectangle {
|
||||
id: progressFill
|
||||
height: parent.height
|
||||
radius: parent.radius
|
||||
color: theme.primary
|
||||
color: Theme.primary
|
||||
|
||||
width: parent.width * ratio()
|
||||
|
||||
@@ -255,8 +254,8 @@ Rectangle {
|
||||
width: 12
|
||||
height: 12
|
||||
radius: 6
|
||||
color: theme.primary
|
||||
border.color: Qt.lighter(theme.primary, 1.3)
|
||||
color: Theme.primary
|
||||
border.color: Qt.lighter(Theme.primary, 1.3)
|
||||
border.width: 1
|
||||
|
||||
x: Math.max(0, Math.min(parent.width - width, progressFill.width - width/2))
|
||||
@@ -346,7 +345,7 @@ Rectangle {
|
||||
|
||||
Row {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: theme.spacingM
|
||||
spacing: Theme.spacingM
|
||||
height: parent.height
|
||||
|
||||
// Previous button
|
||||
@@ -354,14 +353,14 @@ Rectangle {
|
||||
width: 28
|
||||
height: 28
|
||||
radius: 14
|
||||
color: prevBtnArea.containsMouse ? Qt.rgba(theme.surfaceVariant.r, theme.surfaceVariant.g, theme.surfaceVariant.b, 0.12) : "transparent"
|
||||
color: prevBtnArea.containsMouse ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.12) : "transparent"
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "skip_previous"
|
||||
font.family: theme.iconFont
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: 16
|
||||
color: theme.surfaceText
|
||||
color: Theme.surfaceText
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
@@ -388,14 +387,14 @@ Rectangle {
|
||||
width: 32
|
||||
height: 32
|
||||
radius: 16
|
||||
color: theme.primary
|
||||
color: Theme.primary
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: activePlayer?.playbackState === MprisPlaybackState.Playing ? "pause" : "play_arrow"
|
||||
font.family: theme.iconFont
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: 20
|
||||
color: theme.background
|
||||
color: Theme.background
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
@@ -411,14 +410,14 @@ Rectangle {
|
||||
width: 28
|
||||
height: 28
|
||||
radius: 14
|
||||
color: nextBtnArea.containsMouse ? Qt.rgba(theme.surfaceVariant.r, theme.surfaceVariant.g, theme.surfaceVariant.b, 0.12) : "transparent"
|
||||
color: nextBtnArea.containsMouse ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.12) : "transparent"
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "skip_next"
|
||||
font.family: theme.iconFont
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: 16
|
||||
color: theme.surfaceText
|
||||
color: Theme.surfaceText
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
|
||||
@@ -7,13 +7,12 @@ import qs.Services
|
||||
Rectangle {
|
||||
id: weatherWidget
|
||||
|
||||
property var theme: Theme
|
||||
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
radius: theme.cornerRadiusLarge
|
||||
color: Qt.rgba(theme.surfaceContainer.r, theme.surfaceContainer.g, theme.surfaceContainer.b, 0.4)
|
||||
border.color: Qt.rgba(theme.outline.r, theme.outline.g, theme.outline.b, 0.08)
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.4)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
|
||||
border.width: 1
|
||||
|
||||
layer.enabled: true
|
||||
@@ -29,21 +28,21 @@ Rectangle {
|
||||
// Placeholder when no weather - centered in entire widget
|
||||
Column {
|
||||
anchors.centerIn: parent
|
||||
spacing: theme.spacingS
|
||||
spacing: Theme.spacingS
|
||||
visible: !WeatherService.weather.available || WeatherService.weather.temp === 0
|
||||
|
||||
Text {
|
||||
text: "cloud_off"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.iconSize + 8
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.5)
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.iconSize + 8
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "No Weather Data"
|
||||
font.pixelSize: theme.fontSizeMedium
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.7)
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
}
|
||||
@@ -51,8 +50,8 @@ Rectangle {
|
||||
// Weather content when available - original Column structure
|
||||
Column {
|
||||
anchors.fill: parent
|
||||
anchors.margins: theme.spacingL
|
||||
spacing: theme.spacingS
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingS
|
||||
visible: WeatherService.weather.available && WeatherService.weather.temp !== 0
|
||||
|
||||
// Weather header info
|
||||
@@ -62,25 +61,25 @@ Rectangle {
|
||||
|
||||
Row {
|
||||
anchors.centerIn: parent
|
||||
spacing: theme.spacingL
|
||||
spacing: Theme.spacingL
|
||||
|
||||
// Weather icon
|
||||
Text {
|
||||
text: WeatherService.getWeatherIcon(WeatherService.weather.wCode)
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.iconSize + 8
|
||||
color: theme.primary
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.iconSize + 8
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Column {
|
||||
spacing: theme.spacingXS
|
||||
spacing: Theme.spacingXS
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Text {
|
||||
text: (Prefs.useFahrenheit ? WeatherService.weather.tempF : WeatherService.weather.temp) + "°" + (Prefs.useFahrenheit ? "F" : "C")
|
||||
font.pixelSize: theme.fontSizeXLarge
|
||||
color: theme.surfaceText
|
||||
font.pixelSize: Theme.fontSizeXLarge
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Light
|
||||
|
||||
MouseArea {
|
||||
@@ -94,8 +93,8 @@ Rectangle {
|
||||
|
||||
Text {
|
||||
text: WeatherService.weather.city || ""
|
||||
font.pixelSize: theme.fontSizeMedium
|
||||
color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.7)
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
|
||||
visible: text.length > 0
|
||||
}
|
||||
}
|
||||
@@ -105,73 +104,73 @@ Rectangle {
|
||||
// Weather details grid
|
||||
Grid {
|
||||
columns: 2
|
||||
spacing: theme.spacingM
|
||||
spacing: Theme.spacingM
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
Row {
|
||||
spacing: theme.spacingXS
|
||||
spacing: Theme.spacingXS
|
||||
Text {
|
||||
text: "humidity_low"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: theme.surfaceText
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
Text {
|
||||
text: WeatherService.weather.humidity ? WeatherService.weather.humidity + "%" : "--"
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: theme.surfaceText
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
spacing: theme.spacingXS
|
||||
spacing: Theme.spacingXS
|
||||
Text {
|
||||
text: "air"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: theme.surfaceText
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
Text {
|
||||
text: WeatherService.weather.wind || "--"
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: theme.surfaceText
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
spacing: theme.spacingXS
|
||||
spacing: Theme.spacingXS
|
||||
Text {
|
||||
text: "wb_twilight"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: theme.surfaceText
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
Text {
|
||||
text: WeatherService.weather.sunrise || "--"
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: theme.surfaceText
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
spacing: theme.spacingXS
|
||||
spacing: Theme.spacingXS
|
||||
Text {
|
||||
text: "bedtime"
|
||||
font.family: theme.iconFont
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: theme.surfaceText
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
Text {
|
||||
text: WeatherService.weather.sunset || "--"
|
||||
font.pixelSize: theme.fontSizeSmall
|
||||
color: theme.surfaceText
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user