mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-01-27 06:52:50 -05:00
subtle redesigns
This commit is contained in:
bbedward
@@ -177,74 +177,79 @@ Column {
|
||||
|
||||
width: parent.width / 7
|
||||
height: parent.height / 6
|
||||
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
|
||||
|
||||
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.weight: isToday || isSelected ? Font.Medium : Font.Normal
|
||||
}
|
||||
|
||||
// Event indicator - full-width elegant bar
|
||||
color: "transparent"
|
||||
clip: true
|
||||
|
||||
Rectangle {
|
||||
// Use a lighter tint of primary for selected state
|
||||
anchors.centerIn: parent
|
||||
width: parent.width - 4
|
||||
height: parent.height - 4
|
||||
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
|
||||
clip: true
|
||||
|
||||
id: eventIndicator
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.margins: 2
|
||||
height: 3
|
||||
radius: 1.5
|
||||
visible: CalendarService && CalendarService.khalAvailable && CalendarService.hasEventsForDate(dayDate)
|
||||
// Dynamic color based on state with opacity
|
||||
color: {
|
||||
if (isSelected)
|
||||
return Qt.lighter(Theme.primary, 1.3);
|
||||
else if (isToday)
|
||||
return Theme.primary;
|
||||
else
|
||||
return Theme.primary;
|
||||
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.weight: isToday || isSelected ? Font.Medium : Font.Normal
|
||||
}
|
||||
opacity: {
|
||||
if (isSelected)
|
||||
return 0.9;
|
||||
else if (isToday)
|
||||
return 0.8;
|
||||
else
|
||||
return 0.6;
|
||||
}
|
||||
// Subtle animation on hover
|
||||
scale: dayArea.containsMouse ? 1.05 : 1
|
||||
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
// Event indicator - bottom fill effect
|
||||
Rectangle {
|
||||
id: eventIndicator
|
||||
|
||||
anchors.fill: parent
|
||||
radius: parent.radius
|
||||
visible: CalendarService && CalendarService.khalAvailable && CalendarService.hasEventsForDate(dayDate)
|
||||
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0.89
|
||||
color: "transparent"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.9
|
||||
color: {
|
||||
if (isSelected)
|
||||
return Qt.lighter(Theme.primary, 1.3);
|
||||
else if (isToday)
|
||||
return Theme.primary;
|
||||
else
|
||||
return Theme.primary;
|
||||
}
|
||||
}
|
||||
GradientStop {
|
||||
position: 1.0
|
||||
color: {
|
||||
if (isSelected)
|
||||
return Qt.lighter(Theme.primary, 1.3);
|
||||
else if (isToday)
|
||||
return Theme.primary;
|
||||
else
|
||||
return Theme.primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
opacity: {
|
||||
if (isSelected)
|
||||
return 0.9;
|
||||
else if (isToday)
|
||||
return 0.8;
|
||||
else
|
||||
return 0.6;
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
|
||||
@@ -78,6 +78,9 @@ PanelWindow {
|
||||
let hasEvents = events.selectedDateEvents && events.selectedDateEvents.length > 0;
|
||||
let eventsHeight = hasEvents ? Math.min(300, 80 + events.selectedDateEvents.length * 60) : 120;
|
||||
contentHeight += eventsHeight;
|
||||
} else {
|
||||
// When no khal, reduce bottom margin to match top
|
||||
contentHeight -= Theme.spacingM;
|
||||
}
|
||||
return Math.min(contentHeight, parent.height * 0.9);
|
||||
}
|
||||
@@ -161,61 +164,62 @@ PanelWindow {
|
||||
anchors.margins: Theme.spacingM
|
||||
spacing: Theme.spacingM
|
||||
|
||||
// Main row with widgets and calendar
|
||||
// Main row with widgets and calendar - improved spacing and proportions
|
||||
Row {
|
||||
width: parent.width
|
||||
height: {
|
||||
let widgetHeight = 160; // Media widget always present
|
||||
widgetHeight += 140 + Theme.spacingM; // Weather widget always present
|
||||
let calendarHeight = 300;
|
||||
let widgetHeight = 160; // Media widget
|
||||
widgetHeight += 140 + Theme.spacingM; // Weather widget with spacing
|
||||
let calendarHeight = 300; // Calendar
|
||||
return Math.max(widgetHeight, calendarHeight);
|
||||
}
|
||||
spacing: Theme.spacingM
|
||||
|
||||
// Left section for widgets
|
||||
// Left section for widgets - improved visual hierarchy
|
||||
Column {
|
||||
id: leftWidgets
|
||||
|
||||
property bool hasAnyWidgets: true // Always show media widget and weather widget
|
||||
property bool hasAnyWidgets: true
|
||||
|
||||
width: hasAnyWidgets ? parent.width * 0.45 : 0
|
||||
width: hasAnyWidgets ? parent.width * 0.42 : 0 // Slightly narrower for better proportions
|
||||
height: childrenRect.height
|
||||
spacing: Theme.spacingM
|
||||
visible: hasAnyWidgets
|
||||
anchors.top: parent.top
|
||||
|
||||
MediaPlayer {
|
||||
visible: true // Always visible - shows placeholder when no media
|
||||
width: parent.width
|
||||
height: 160
|
||||
}
|
||||
|
||||
Weather {
|
||||
visible: true // Always visible - shows placeholder when no weather
|
||||
width: parent.width
|
||||
height: 140
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Right section for calendar
|
||||
CalendarGrid {
|
||||
id: calendarGrid
|
||||
|
||||
width: leftWidgets.hasAnyWidgets ? parent.width * 0.55 - Theme.spacingL : parent.width
|
||||
// Right section for calendar - enhanced container
|
||||
Rectangle {
|
||||
width: leftWidgets.hasAnyWidgets ? parent.width * 0.55 - Theme.spacingM : parent.width
|
||||
height: parent.height
|
||||
}
|
||||
radius: Theme.cornerRadiusLarge
|
||||
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.2)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
|
||||
border.width: 1
|
||||
|
||||
CalendarGrid {
|
||||
id: calendarGrid
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingS
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Full-width events widget below
|
||||
Events {
|
||||
id: events
|
||||
|
||||
width: parent.width
|
||||
selectedDate: calendarGrid.selectedDate
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
|
||||
Reference in New Issue
Block a user