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

subtle redesigns

Browse Source
This commit is contained in:
bbedward
2025-07-24 20:32:28 -04:00
parent aabb0ffcc5
commit 0068774a8b
14 changed files with 362 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
Modals/ClipboardHistoryModal.qml
View File

@@ -118,6 +118,11 @@ DankModal {
width: 650 width: 650
height: 550 height: 550
keyboardFocus: "ondemand" keyboardFocus: "ondemand"
backgroundColor: Theme.popupBackground()
cornerRadius: Theme.cornerRadiusLarge
borderColor: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
borderWidth: 1
enableShadow: true
onBackgroundClicked: { onBackgroundClicked: {
hide(); hide();
} }
@@ -332,14 +337,12 @@ DankModal {
content: Component { content: Component {
Column { Column {
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingM anchors.margins: Theme.spacingL
spacing: Theme.spacingS spacing: Theme.spacingL
// Header with search Row {
Rectangle {
width: parent.width width: parent.width
height: 40 height: 40
color: "transparent"
Row { Row {
anchors.left: parent.left anchors.left: parent.left
@@ -360,7 +363,6 @@ DankModal {
font.weight: Font.Medium font.weight: Font.Medium
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
} }
Row { Row {
@@ -385,12 +387,9 @@ DankModal {
hoverColor: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12) hoverColor: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
onClicked: hide() onClicked: hide()
} }
} }
} }
// Search field
DankTextField { DankTextField {
id: searchField id: searchField
@@ -414,15 +413,15 @@ DankModal {
target: clipboardHistoryModal target: clipboardHistoryModal
} }
} }
// Clipboard entries list
Rectangle { Rectangle {
width: parent.width width: parent.width
height: parent.height - 110 height: parent.height - 110
radius: Theme.cornerRadius radius: Theme.cornerRadiusLarge
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1) color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: 1
clip: true clip: true
ScrollView { ScrollView {

24
Modals/ProcessListModal.qml
View File

@@ -74,7 +74,7 @@ DankModal {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingXL anchors.margins: Theme.spacingL
spacing: Theme.spacingL spacing: Theme.spacingL
RowLayout { RowLayout {
@@ -90,10 +90,9 @@ DankModal {
} }
Item { Item {
Layout.fillWidth: true // Spacer to push close button to the right Layout.fillWidth: true
} }
// Close button
DankActionButton { DankActionButton {
circular: false circular: false
iconName: "close" iconName: "close"
@@ -103,13 +102,12 @@ DankModal {
onClicked: processListModal.hide() onClicked: processListModal.hide()
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
} }
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
height: 52 height: 52
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.04) color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.15)
radius: Theme.cornerRadiusLarge radius: Theme.cornerRadiusLarge
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.06) border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.06)
border.width: 1 border.width: 1
@@ -210,14 +208,19 @@ DankModal {
} }
Item { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
radius: Theme.cornerRadiusLarge
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: 1
Loader { Loader {
id: processesTab id: processesTab
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingS
active: currentTab === 0 active: currentTab === 0
visible: currentTab === 0 visible: currentTab === 0
opacity: currentTab === 0 ? 1 : 0 opacity: currentTab === 0 ? 1 : 0
@@ -228,15 +231,14 @@ DankModal {
duration: Theme.mediumDuration duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing easing.type: Theme.emphasizedEasing
} }
} }
} }
Loader { Loader {
id: performanceTab id: performanceTab
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingS
active: currentTab === 1 active: currentTab === 1
visible: currentTab === 1 visible: currentTab === 1
opacity: currentTab === 1 ? 1 : 0 opacity: currentTab === 1 ? 1 : 0
@@ -247,15 +249,14 @@ DankModal {
duration: Theme.mediumDuration duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing easing.type: Theme.emphasizedEasing
} }
} }
} }
Loader { Loader {
id: systemTab id: systemTab
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingS
active: currentTab === 2 active: currentTab === 2
visible: currentTab === 2 visible: currentTab === 2
opacity: currentTab === 2 ? 1 : 0 opacity: currentTab === 2 ? 1 : 0
@@ -266,11 +267,8 @@ DankModal {
duration: Theme.mediumDuration duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing easing.type: Theme.emphasizedEasing
} }
} }
} }
} }
} }

40
Modals/SpotlightModal.qml
View File

@@ -125,18 +125,28 @@ DankModal {
Column { Column {
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingM anchors.margins: Theme.spacingL
spacing: Theme.spacingM spacing: Theme.spacingL
// Category selector Rectangle {
CategorySelector {
width: parent.width width: parent.width
categories: appLauncher.categories height: categorySelector.height + Theme.spacingM * 2
selectedCategory: appLauncher.selectedCategory radius: Theme.cornerRadiusLarge
compact: false 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
visible: appLauncher.categories.length > 1 || appLauncher.model.count > 0 visible: appLauncher.categories.length > 1 || appLauncher.model.count > 0
onCategorySelected: (category) => {
return appLauncher.setCategory(category); CategorySelector {
id: categorySelector
anchors.centerIn: parent
width: parent.width - Theme.spacingM * 2
categories: appLauncher.categories
selectedCategory: appLauncher.selectedCategory
compact: false
onCategorySelected: (category) => {
return appLauncher.setCategory(category);
}
} }
} }
@@ -267,19 +277,21 @@ DankModal {
} }
// Results container
Rectangle { Rectangle {
id: resultsContainer id: resultsContainer
width: parent.width width: parent.width
height: parent.height - y // Use remaining space height: parent.height - y
color: "transparent" radius: Theme.cornerRadiusLarge
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: 1
// List view
DankListView { DankListView {
id: resultsList id: resultsList
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingS
visible: appLauncher.viewMode === "list" visible: appLauncher.viewMode === "list"
model: appLauncher.model model: appLauncher.model
currentIndex: appLauncher.selectedIndex currentIndex: appLauncher.selectedIndex
@@ -299,11 +311,11 @@ DankModal {
} }
} }
// Grid view
DankGridView { DankGridView {
id: resultsGrid id: resultsGrid
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingS
visible: appLauncher.viewMode === "grid" visible: appLauncher.viewMode === "grid"
model: appLauncher.model model: appLauncher.model
columns: 4 columns: 4

29
Modules/AppDrawer/AppDrawerPopout.qml
View File

@@ -182,18 +182,16 @@ PanelWindow {
} }
Column { Column {
width: parent.width - Theme.spacingXL * 2 width: parent.width - Theme.spacingL * 2
height: parent.height - Theme.spacingXL * 2 height: parent.height - Theme.spacingL * 2
x: Theme.spacingXL x: Theme.spacingL
y: Theme.spacingXL y: Theme.spacingL
spacing: Theme.spacingL spacing: Theme.spacingL
// Header section
Row { Row {
width: parent.width width: parent.width
height: 40 height: 40
// App launcher title
Text { Text {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: "Applications" text: "Applications"
@@ -207,7 +205,6 @@ PanelWindow {
height: 1 height: 1
} }
// Quick stats
Text { Text {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: appLauncher.model.count + " apps" text: appLauncher.model.count + " apps"
@@ -274,14 +271,12 @@ PanelWindow {
} }
// Category filter and view mode controls
Row { Row {
width: parent.width width: parent.width
height: 40 height: 40
spacing: Theme.spacingM spacing: Theme.spacingM
visible: searchField.text.length === 0 visible: searchField.text.length === 0
// Category filter using DankDropdown
Item { Item {
width: 200 width: 200
height: 36 height: 36
@@ -304,12 +299,10 @@ PanelWindow {
height: 1 height: 1
} }
// View mode toggle
Row { Row {
spacing: 4 spacing: 4
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
// List view button
DankActionButton { DankActionButton {
buttonSize: 36 buttonSize: 36
circular: false circular: false
@@ -323,7 +316,6 @@ PanelWindow {
} }
} }
// Grid view button
DankActionButton { DankActionButton {
buttonSize: 36 buttonSize: 36
circular: false circular: false
@@ -341,26 +333,26 @@ PanelWindow {
} }
// App grid/list container // App grid/list container with enhanced styling
Rectangle { Rectangle {
width: parent.width width: parent.width
height: { height: {
// Calculate more precise remaining height
let usedHeight = 40 + Theme.spacingL; let usedHeight = 40 + Theme.spacingL;
// Header
usedHeight += 52 + Theme.spacingL; usedHeight += 52 + Theme.spacingL;
// Search container
usedHeight += (searchField.text.length === 0 ? 40 + Theme.spacingL : 0); usedHeight += (searchField.text.length === 0 ? 40 + Theme.spacingL : 0);
// Category/controls when visible
return parent.height - usedHeight; return parent.height - usedHeight;
} }
color: "transparent" radius: Theme.cornerRadiusLarge
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: 1
// List view // List view
DankListView { DankListView {
id: appList id: appList
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingS
visible: appLauncher.viewMode === "list" visible: appLauncher.viewMode === "list"
model: appLauncher.model model: appLauncher.model
currentIndex: appLauncher.selectedIndex currentIndex: appLauncher.selectedIndex
@@ -385,6 +377,7 @@ PanelWindow {
id: appGrid id: appGrid
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingS
visible: appLauncher.viewMode === "grid" visible: appLauncher.viewMode === "grid"
model: appLauncher.model model: appLauncher.model
columns: 4 columns: 4

127
Modules/CentcomCenter/CalendarGrid.qml
View File

@@ -177,74 +177,79 @@ Column {
width: parent.width / 7 width: parent.width / 7
height: parent.height / 6 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" color: "transparent"
radius: Theme.cornerRadiusSmall clip: true
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
Rectangle { 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 Text {
anchors.centerIn: parent
anchors.bottom: parent.bottom text: dayDate.getDate()
anchors.left: parent.left font.pixelSize: Theme.fontSizeMedium
anchors.right: parent.right color: isSelected ? Theme.surface : isToday ? Theme.primary : isCurrentMonth ? Theme.surfaceText : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4)
anchors.margins: 2 font.weight: isToday || isSelected ? Font.Medium : Font.Normal
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;
} }
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 { // Event indicator - bottom fill effect
NumberAnimation { Rectangle {
duration: Theme.shortDuration id: eventIndicator
easing.type: Theme.standardEasing
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 { MouseArea {

42
Modules/CentcomCenter/CentcomPopout.qml
View File

@@ -78,6 +78,9 @@ PanelWindow {
let hasEvents = events.selectedDateEvents && events.selectedDateEvents.length > 0; let hasEvents = events.selectedDateEvents && events.selectedDateEvents.length > 0;
let eventsHeight = hasEvents ? Math.min(300, 80 + events.selectedDateEvents.length * 60) : 120; let eventsHeight = hasEvents ? Math.min(300, 80 + events.selectedDateEvents.length * 60) : 120;
contentHeight += eventsHeight; contentHeight += eventsHeight;
} else {
// When no khal, reduce bottom margin to match top
contentHeight -= Theme.spacingM;
} }
return Math.min(contentHeight, parent.height * 0.9); return Math.min(contentHeight, parent.height * 0.9);
} }
@@ -161,61 +164,62 @@ PanelWindow {
anchors.margins: Theme.spacingM anchors.margins: Theme.spacingM
spacing: Theme.spacingM spacing: Theme.spacingM
// Main row with widgets and calendar // Main row with widgets and calendar - improved spacing and proportions
Row { Row {
width: parent.width width: parent.width
height: { height: {
let widgetHeight = 160; // Media widget always present let widgetHeight = 160; // Media widget
widgetHeight += 140 + Theme.spacingM; // Weather widget always present widgetHeight += 140 + Theme.spacingM; // Weather widget with spacing
let calendarHeight = 300; let calendarHeight = 300; // Calendar
return Math.max(widgetHeight, calendarHeight); return Math.max(widgetHeight, calendarHeight);
} }
spacing: Theme.spacingM spacing: Theme.spacingM
// Left section for widgets // Left section for widgets - improved visual hierarchy
Column { Column {
id: leftWidgets 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 height: childrenRect.height
spacing: Theme.spacingM spacing: Theme.spacingM
visible: hasAnyWidgets visible: hasAnyWidgets
anchors.top: parent.top anchors.top: parent.top
MediaPlayer { MediaPlayer {
visible: true // Always visible - shows placeholder when no media
width: parent.width width: parent.width
height: 160 height: 160
} }
Weather { Weather {
visible: true // Always visible - shows placeholder when no weather
width: parent.width width: parent.width
height: 140 height: 140
} }
} }
// Right section for calendar // Right section for calendar - enhanced container
CalendarGrid { Rectangle {
id: calendarGrid width: leftWidgets.hasAnyWidgets ? parent.width * 0.55 - Theme.spacingM : parent.width
width: leftWidgets.hasAnyWidgets ? parent.width * 0.55 - Theme.spacingL : parent.width
height: parent.height 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 { Events {
id: events id: events
width: parent.width width: parent.width
selectedDate: calendarGrid.selectedDate selectedDate: calendarGrid.selectedDate
} }
} }
Behavior on opacity { Behavior on opacity {

110
Modules/ControlCenter/ControlCenterPopout.qml
View File

@@ -584,90 +584,94 @@ PanelWindow {
} }
// Tab buttons Rectangle {
DankTabBar {
width: parent.width width: parent.width
tabHeight: 40 height: tabBar.height + Theme.spacingM * 2
currentIndex: { radius: Theme.cornerRadiusLarge
let tabs = ["network", "audio"]; color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.15)
if (BluetoothService.available) border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.06)
tabs.push("bluetooth"); border.width: 1
tabs.push("display"); DankTabBar {
return tabs.indexOf(root.currentTab); id: tabBar
} anchors.centerIn: parent
model: { width: parent.width - Theme.spacingM * 2
let tabs = [{ tabHeight: 40
"text": "Network", currentIndex: {
"icon": "wifi", let tabs = ["network", "audio"];
"id": "network" if (BluetoothService.available)
}]; tabs.push("bluetooth");
// Always show audio
tabs.push({ tabs.push("display");
"text": "Audio", return tabs.indexOf(root.currentTab);
"icon": "volume_up", }
"id": "audio" model: {
}); let tabs = [{
// Show Bluetooth only if available "text": "Network",
if (BluetoothService.available) "icon": "wifi",
"id": "network"
}];
tabs.push({ tabs.push({
"text": "Bluetooth", "text": "Audio",
"icon": "bluetooth", "icon": "volume_up",
"id": "bluetooth" "id": "audio"
}); });
if (BluetoothService.available)
tabs.push({
"text": "Bluetooth",
"icon": "bluetooth",
"id": "bluetooth"
});
// Always show display tabs.push({
tabs.push({ "text": "Display",
"text": "Display", "icon": "brightness_6",
"icon": "brightness_6", "id": "display"
"id": "display" });
}); return tabs;
return tabs; }
} onTabClicked: function(index) {
onTabClicked: function(index) { let tabs = ["network", "audio"];
let tabs = ["network", "audio"]; if (BluetoothService.available)
if (BluetoothService.available) tabs.push("bluetooth");
tabs.push("bluetooth");
tabs.push("display"); tabs.push("display");
root.currentTab = tabs[index]; root.currentTab = tabs[index];
}
} }
} }
} }
// Tab content area
Rectangle { Rectangle {
width: parent.width width: parent.width
Layout.fillHeight: true Layout.fillHeight: true
radius: Theme.cornerRadius radius: Theme.cornerRadiusLarge
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.1) color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: 1
// Network Tab
NetworkTab { NetworkTab {
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingM anchors.margins: Theme.spacingS
visible: root.currentTab === "network" visible: root.currentTab === "network"
} }
// Audio Tab
AudioTab { AudioTab {
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingM anchors.margins: Theme.spacingS
visible: root.currentTab === "audio" visible: root.currentTab === "audio"
} }
// Bluetooth Tab
BluetoothTab { BluetoothTab {
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingM anchors.margins: Theme.spacingS
visible: BluetoothService.available && root.currentTab === "bluetooth" visible: BluetoothService.available && root.currentTab === "bluetooth"
} }
// Display Tab
Column { Column {
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingM anchors.margins: Theme.spacingS
visible: root.currentTab === "display" visible: root.currentTab === "display"
spacing: Theme.spacingL spacing: Theme.spacingL

52
Modules/NotificationCenter.qml → Modules/Notifications/NotificationCenterPopout.qml
View File

@@ -45,8 +45,38 @@ PanelWindow {
color: Theme.popupBackground() color: Theme.popupBackground()
radius: Theme.cornerRadiusLarge radius: Theme.cornerRadiusLarge
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08) border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: 0.5 border.width: 1
opacity: notificationHistoryVisible ? 1 : 0 opacity: notificationHistoryVisible ? 1 : 0
// Material 3 elevation with multiple layers
Rectangle {
anchors.fill: parent
anchors.margins: -3
color: "transparent"
radius: parent.radius + 3
border.color: Qt.rgba(0, 0, 0, 0.05)
border.width: 1
z: -3
}
Rectangle {
anchors.fill: parent
anchors.margins: -2
color: "transparent"
radius: parent.radius + 2
border.color: Qt.rgba(0, 0, 0, 0.08)
border.width: 1
z: -2
}
Rectangle {
anchors.fill: parent
color: "transparent"
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
border.width: 1
radius: parent.radius
z: -1
}
// Animation // Animation
transform: [ transform: [
Scale { Scale {
@@ -150,12 +180,12 @@ PanelWindow {
Rectangle { Rectangle {
width: 120 width: 120
height: 28 height: 28
radius: Theme.cornerRadius radius: Theme.cornerRadiusLarge
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: NotificationService.notifications.length > 0 visible: NotificationService.notifications.length > 0
color: clearArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.surfaceContainer color: clearArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
border.color: clearArea.containsMouse ? Theme.primary : Theme.outline border.color: clearArea.containsMouse ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: 1 border.width: 1
Row { Row {
@@ -311,9 +341,9 @@ PanelWindow {
} }
return 116; return 116;
} }
radius: 12 radius: Theme.cornerRadiusLarge
color: Theme.popupBackground() color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
border.color: modelData.latestNotification.urgency === 2 ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08) border.color: modelData.latestNotification.urgency === 2 ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: modelData.latestNotification.urgency === 2 ? 2 : 1 border.width: modelData.latestNotification.urgency === 2 ? 2 : 1
clip: true clip: true
@@ -714,10 +744,10 @@ PanelWindow {
width: parent.width width: parent.width
height: messageExpanded ? Math.min(120, 50 + (bodyText.contentHeight || 0)) : 80 height: messageExpanded ? Math.min(120, 50 + (bodyText.contentHeight || 0)) : 80
radius: 8 radius: Theme.cornerRadiusLarge
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.3) color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.2)
border.color: "transparent" border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: 0 border.width: 1
Item { Item {
anchors.fill: parent anchors.fill: parent

46
Modules/NotificationPopup.qml → Modules/Notifications/NotificationPopup.qml
View File

@@ -76,11 +76,41 @@ PanelWindow {
} }
return 116; return 116;
} }
radius: 12 radius: Theme.cornerRadiusLarge
color: Theme.popupBackground() color: Theme.popupBackground()
border.color: modelData.latestNotification.urgency === 2 ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08) border.color: modelData.latestNotification.urgency === 2 ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: modelData.latestNotification.urgency === 2 ? 2 : 1 border.width: modelData.latestNotification.urgency === 2 ? 2 : 1
clip: true clip: true
// Material 3 elevation with multiple layers
Rectangle {
anchors.fill: parent
anchors.margins: -3
color: "transparent"
radius: parent.radius + 3
border.color: Qt.rgba(0, 0, 0, 0.05)
border.width: 1
z: -3
}
Rectangle {
anchors.fill: parent
anchors.margins: -2
color: "transparent"
radius: parent.radius + 2
border.color: Qt.rgba(0, 0, 0, 0.08)
border.width: 1
z: -2
}
Rectangle {
anchors.fill: parent
color: "transparent"
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
border.width: 1
radius: parent.radius
z: -1
}
onCurrentLatestNotificationChanged: { onCurrentLatestNotificationChanged: {
if (isPopup && !cardHoverArea.containsMouse) if (isPopup && !cardHoverArea.containsMouse)
dismissTimer.restart(); dismissTimer.restart();
@@ -477,9 +507,9 @@ PanelWindow {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: Math.min(400, modelData.notifications.length * 90) // Fixed height constraint for inner scroll height: Math.min(400, modelData.notifications.length * 90) // Fixed height constraint for inner scroll
radius: 8 radius: Theme.cornerRadiusLarge
color: "transparent" color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1) border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: 1 border.width: 1
clip: true clip: true
@@ -500,10 +530,10 @@ PanelWindow {
width: parent.width width: parent.width
height: messageExpanded ? Math.min(120, 50 + (bodyText.contentHeight || 0)) : 80 height: messageExpanded ? Math.min(120, 50 + (bodyText.contentHeight || 0)) : 80
radius: 8 radius: Theme.cornerRadiusLarge
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.3) color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.2)
border.color: "transparent" border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: 0 border.width: 1
Item { Item {
anchors.fill: parent anchors.fill: parent

3
Modules/Notifications/qmldir Normal file
View File

@@ -0,0 +1,3 @@
module qs.Modules.Notifications
NotificationPopup 1.0 NotificationPopup.qml
NotificationCenterPopout 1.0 NotificationCenterPopout.qml

32
Modules/ProcessList/ProcessListPopout.qml
View File

@@ -116,22 +116,36 @@ PanelWindow {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.spacingL anchors.margins: Theme.spacingL
spacing: Theme.spacingM spacing: Theme.spacingL
SystemOverview { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
height: systemOverview.height + Theme.spacingM * 2
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
SystemOverview {
id: systemOverview
anchors.centerIn: parent
width: parent.width - Theme.spacingM * 2
}
} }
Rectangle { Rectangle {
width: parent.width
height: 1
color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
}
ProcessListView {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
contextMenu: processContextMenu radius: Theme.cornerRadiusLarge
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: 1
ProcessListView {
anchors.fill: parent
anchors.margins: Theme.spacingS
contextMenu: processContextMenu
}
} }
} }
} }

68
Modules/TopBar/BatteryPopout.qml
View File

@@ -97,6 +97,37 @@ PanelWindow {
radius: Theme.cornerRadiusLarge radius: Theme.cornerRadiusLarge
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08) border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: 1 border.width: 1
// Material 3 elevation with multiple layers
Rectangle {
anchors.fill: parent
anchors.margins: -3
color: "transparent"
radius: parent.radius + 3
border.color: Qt.rgba(0, 0, 0, 0.05)
border.width: 1
z: -3
}
Rectangle {
anchors.fill: parent
anchors.margins: -2
color: "transparent"
radius: parent.radius + 2
border.color: Qt.rgba(0, 0, 0, 0.08)
border.width: 1
z: -2
}
Rectangle {
anchors.fill: parent
color: "transparent"
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
border.width: 1
radius: parent.radius
z: -1
}
// Remove layer rendering for better performance // Remove layer rendering for better performance
antialiasing: true antialiasing: true
smooth: true smooth: true
@@ -110,7 +141,6 @@ PanelWindow {
width: parent.width width: parent.width
spacing: Theme.spacingL spacing: Theme.spacingL
// Header
Row { Row {
width: parent.width width: parent.width
@@ -150,17 +180,15 @@ PanelWindow {
batteryPopupVisible = false; batteryPopupVisible = false;
} }
} }
} }
} }
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 80 height: 80
radius: Theme.cornerRadius radius: Theme.cornerRadiusLarge
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.5) color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.4)
border.color: BatteryService.isCharging ? Theme.primary : (BatteryService.isLowBattery ? Theme.error : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)) border.color: BatteryService.isCharging ? Theme.primary : (BatteryService.isLowBattery ? Theme.error : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08))
border.width: BatteryService.isCharging || BatteryService.isLowBattery ? 2 : 1 border.width: BatteryService.isCharging || BatteryService.isLowBattery ? 2 : 1
visible: BatteryService.batteryAvailable visible: BatteryService.batteryAvailable
@@ -248,9 +276,9 @@ PanelWindow {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 80 height: 80
radius: Theme.cornerRadius radius: Theme.cornerRadiusLarge
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.5) color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.4)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: 1 border.width: 1
visible: !BatteryService.batteryAvailable visible: !BatteryService.batteryAvailable
@@ -378,10 +406,10 @@ PanelWindow {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 50 height: 50
radius: Theme.cornerRadius radius: Theme.cornerRadiusLarge
color: profileArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : (batteryPopout.isActiveProfile(modelData) ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)) color: profileArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : (root.isActiveProfile(modelData) ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1))
border.color: batteryPopout.isActiveProfile(modelData) ? Theme.primary : "transparent" border.color: root.isActiveProfile(modelData) ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
border.width: 2 border.width: root.isActiveProfile(modelData) ? 2 : 1
Row { Row {
anchors.left: parent.left anchors.left: parent.left
@@ -392,7 +420,7 @@ PanelWindow {
DankIcon { DankIcon {
name: Theme.getPowerProfileIcon(modelData) name: Theme.getPowerProfileIcon(modelData)
size: Theme.iconSize size: Theme.iconSize
color: batteryPopout.isActiveProfile(modelData) ? Theme.primary : Theme.surfaceText color: root.isActiveProfile(modelData) ? Theme.primary : Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
@@ -403,8 +431,8 @@ PanelWindow {
Text { Text {
text: Theme.getPowerProfileLabel(modelData) text: Theme.getPowerProfileLabel(modelData)
font.pixelSize: Theme.fontSizeMedium font.pixelSize: Theme.fontSizeMedium
color: batteryPopout.isActiveProfile(modelData) ? Theme.primary : Theme.surfaceText color: root.isActiveProfile(modelData) ? Theme.primary : Theme.surfaceText
font.weight: batteryPopout.isActiveProfile(modelData) ? Font.Medium : Font.Normal font.weight: root.isActiveProfile(modelData) ? Font.Medium : Font.Normal
} }
Text { Text {
@@ -424,7 +452,7 @@ PanelWindow {
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onClicked: { onClicked: {
batteryPopout.setProfile(modelData); root.setProfile(modelData);
} }
} }
@@ -440,10 +468,10 @@ PanelWindow {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 60 height: 60
radius: Theme.cornerRadius radius: Theme.cornerRadiusLarge
color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12) color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
border.color: Theme.error border.color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3)
border.width: 2 border.width: 1
visible: (typeof PowerProfiles !== "undefined") && PowerProfiles.degradationReason !== PerformanceDegradationReason.None visible: (typeof PowerProfiles !== "undefined") && PowerProfiles.degradationReason !== PerformanceDegradationReason.None
Row { Row {

3
Widgets/DankDropdown.qml
View File

@@ -132,7 +132,8 @@ Rectangle {
width: 180 width: 180
height: Math.min(200, root.options.length * 36 + 16) height: Math.min(200, root.options.length * 36 + 16)
padding: 0 padding: 0
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
background: Rectangle { background: Rectangle {
color: "transparent" color: "transparent"

3
shell.qml
View File

@@ -11,6 +11,7 @@ import qs.Modules.Settings
import qs.Modules.ProcessList import qs.Modules.ProcessList
import qs.Modules.ControlCenter.Network import qs.Modules.ControlCenter.Network
import qs.Modules.Lock import qs.Modules.Lock
import qs.Modules.Notifications
import qs.Modals import qs.Modals
import qs.Services import qs.Services
@@ -42,7 +43,7 @@ ShellRoot {
id: systemTrayContextMenu id: systemTrayContextMenu
} }
NotificationCenter { NotificationCenterPopout {
id: notificationCenter id: notificationCenter
} }