Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-05-04 11:32:12 -04:00
Code Packages Releases Activity

feat(DMS FrameMode): A New Connected Unified Surface & Animation Overhaul

Browse Source 
- Introduces Standalone & Connected Modes
- Updated Animations & Motion effects for both modes
- Numerous QOL tweaks and updates throughout the system
- Highly inspired to the OG Caelestia Shell / @Soramanew
This commit is contained in:
purian23
2026-05-03 15:38:30 -04:00
parent dd668469d7
commit fd24b4a36d
82 changed files with 12026 additions and 2905 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
quickshell/Modules/ControlCenter/Components/DetailHost.qml
View File

@@ -37,7 +37,7 @@ Item {
Loader {
id: pluginDetailLoader
width: parent.width
height: parent.height - Theme.spacingS
height: Math.max(0, parent.height - Theme.spacingS)
y: Theme.spacingS
active: false
sourceComponent: null
@@ -46,7 +46,7 @@ Item {
Loader {
id: coreDetailLoader
width: parent.width
height: parent.height - Theme.spacingS
height: Math.max(0, parent.height - Theme.spacingS)
y: Theme.spacingS
active: false
sourceComponent: null
@@ -134,7 +134,7 @@ Item {
}
pluginDetailLoader.sourceComponent = builtinInstance.ccDetailContent;
pluginDetailLoader.active = parent.height > 0;
pluginDetailLoader.active = true;
return;
}
@@ -155,19 +155,19 @@ Item {
}
pluginDetailLoader.sourceComponent = pluginDetailInstance.ccDetailContent;
pluginDetailLoader.active = parent.height > 0;
pluginDetailLoader.active = true;
return;
}
if (root.expandedSection.startsWith("diskUsage_")) {
coreDetailLoader.sourceComponent = diskUsageDetailComponent;
coreDetailLoader.active = parent.height > 0;
coreDetailLoader.active = true;
return;
}
if (root.expandedSection.startsWith("brightnessSlider_")) {
coreDetailLoader.sourceComponent = brightnessDetailComponent;
coreDetailLoader.active = parent.height > 0;
coreDetailLoader.active = true;
return;
}
@@ -195,7 +195,7 @@ Item {
return;
}
coreDetailLoader.active = parent.height > 0;
coreDetailLoader.active = true;
}
Component {

74
quickshell/Modules/ControlCenter/Components/DragDropGrid.qml
View File

@@ -52,6 +52,35 @@ Column {
return Math.max(100, maxPopoutHeight - totalRowHeight - rowSpacing);
}
readonly property real targetImplicitHeight: {
const rows = layoutResult.rows;
let totalHeight = 0;
for (let i = 0; i < rows.length; i++) {
const widgets = rows[i] || [];
const sliderOnly = widgets.length > 0 && widgets.every(w => {
const id = w.id || "";
return id === "volumeSlider" || id === "brightnessSlider" || id === "inputVolumeSlider";
});
totalHeight += sliderOnly ? (editMode ? 56 : 36) : 60;
if (expandedSection !== "" && i === expandedRowIndex)
totalHeight += detailHeightForSection(expandedSection) + Theme.spacingS;
}
totalHeight += Math.max(0, rows.length - 1) * spacing;
return totalHeight;
}
function detailHeightForSection(section) {
if (!section)
return 0;
if (section === "wifi" || section === "bluetooth" || section === "builtin_vpn")
return Math.min(350, _maxDetailHeight);
if (section.startsWith("brightnessSlider_"))
return Math.min(400, _maxDetailHeight);
if (section.startsWith("plugin_"))
return Math.min(250, _maxDetailHeight);
return Math.min(250, _maxDetailHeight);
}
function calculateRowsAndWidgets() {
return LayoutUtils.calculateRowsAndWidgets(root, expandedSection, expandedWidgetIndex);
}
@@ -182,7 +211,10 @@ Column {
id: detailHost
width: parent.width
maxAvailableHeight: root._maxDetailHeight
height: active ? (getDetailHeight(root.expandedSection) + Theme.spacingS) : 0
height: active ? (root.detailHeightForSection(root.expandedSection) + Theme.spacingS) : 0
clip: true
property string retainedSection: ""
property var retainedWidgetData: null
property bool active: {
if (root.expandedSection === "")
return false;
@@ -199,14 +231,48 @@ Column {
return rowIndex === root.expandedRowIndex;
}
visible: active
expandedSection: root.expandedSection
expandedWidgetData: root.expandedWidgetData
visible: active || height > 0.5
expandedSection: active ? root.expandedSection : retainedSection
expandedWidgetData: active ? root.expandedWidgetData : retainedWidgetData
bluetoothCodecSelector: root.bluetoothCodecSelector
widgetModel: root.model
collapseCallback: root.requestCollapse
screenName: root.screenName
screenModel: root.screenModel
function retainActiveDetail() {
if (!active || !root.expandedSection)
return;
retainedSection = root.expandedSection;
retainedWidgetData = root.expandedWidgetData;
}
onActiveChanged: retainActiveDetail()
onHeightChanged: {
if (!active && height <= 0.5) {
retainedSection = "";
retainedWidgetData = null;
}
}
Connections {
target: root
function onExpandedSectionChanged() {
detailHost.retainActiveDetail();
}
function onExpandedWidgetDataChanged() {
detailHost.retainActiveDetail();
}
}
Behavior on height {
enabled: true
NumberAnimation {
duration: Theme.variantDuration(Theme.popoutAnimationDuration, detailHost.active)
easing.type: Easing.BezierSpline
easing.bezierCurve: detailHost.active ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
}
}
}
}
}

127
quickshell/Modules/ControlCenter/Components/DragDropWidgetWrapper.qml
View File

@@ -23,11 +23,15 @@ Item {
signal toggleWidgetSize(int index)
width: {
const widgetWidth = widgetData?.width || 50
if (widgetWidth <= 25) return gridCellWidth
else if (widgetWidth <= 50) return gridCellWidth * 2
else if (widgetWidth <= 75) return gridCellWidth * 3
else return gridCellWidth * 4
const widgetWidth = widgetData?.width || 50;
if (widgetWidth <= 25)
return gridCellWidth;
else if (widgetWidth <= 50)
return gridCellWidth * 2;
else if (widgetWidth <= 75)
return gridCellWidth * 3;
else
return gridCellWidth * 4;
}
height: isSlider ? 16 : gridCellHeight
@@ -42,10 +46,14 @@ Item {
z: dragArea.drag.active ? 10000 : 1
Behavior on border.width {
NumberAnimation { duration: 150 }
NumberAnimation {
duration: 150
}
}
Behavior on opacity {
NumberAnimation { duration: 150 }
NumberAnimation {
duration: 150
}
}
}
@@ -58,14 +66,17 @@ Item {
property int globalWidgetIndex: root.widgetIndex
property int widgetWidth: root.widgetData?.width || 50
MouseArea {
id: editModeBlocker
anchors.fill: parent
enabled: root.editMode
acceptedButtons: Qt.AllButtons
onPressed: function(mouse) { mouse.accepted = true }
onWheel: function(wheel) { wheel.accepted = true }
onPressed: function (mouse) {
mouse.accepted = true;
}
onWheel: function (wheel) {
wheel.accepted = true;
}
z: 100
}
}
@@ -79,19 +90,19 @@ Item {
drag.axis: Drag.XAndYAxis
drag.smoothed: true
onPressed: function(mouse) {
onPressed: function (mouse) {
if (editMode) {
cursorShape = Qt.ClosedHandCursor
cursorShape = Qt.ClosedHandCursor;
if (root.gridLayout && root.gridLayout.moveToTop) {
root.gridLayout.moveToTop(root)
root.gridLayout.moveToTop(root);
}
}
}
onReleased: function(mouse) {
onReleased: function (mouse) {
if (editMode) {
cursorShape = Qt.OpenHandCursor
root.snapToGrid()
cursorShape = Qt.OpenHandCursor;
root.snapToGrid();
}
}
}
@@ -101,9 +112,11 @@ Item {
Drag.hotSpot.y: height / 2
function swapIndices(i, j) {
if (i === j) return;
if (i === j)
return;
const arr = SettingsData.controlCenterWidgets;
if (!arr || i < 0 || j < 0 || i >= arr.length || j >= arr.length) return;
if (!arr || i < 0 || j < 0 || i >= arr.length || j >= arr.length)
return;
const copy = arr.slice();
const tmp = copy[i];
@@ -114,37 +127,41 @@ Item {
}
function snapToGrid() {
if (!editMode || !gridLayout) return
if (!editMode || !gridLayout)
return;
const globalPos = root.mapToItem(gridLayout, 0, 0);
const cellWidth = gridLayout.width / gridColumns;
const cellHeight = gridCellHeight + Theme.spacingS;
const globalPos = root.mapToItem(gridLayout, 0, 0)
const cellWidth = gridLayout.width / gridColumns
const cellHeight = gridCellHeight + Theme.spacingS
const centerX = globalPos.x + (root.width / 2);
const centerY = globalPos.y + (root.height / 2);
const centerX = globalPos.x + (root.width / 2)
const centerY = globalPos.y + (root.height / 2)
let targetCol = Math.max(0, Math.floor(centerX / cellWidth));
let targetRow = Math.max(0, Math.floor(centerY / cellHeight));
let targetCol = Math.max(0, Math.floor(centerX / cellWidth))
let targetRow = Math.max(0, Math.floor(centerY / cellHeight))
targetCol = Math.min(targetCol, gridColumns - 1);
targetCol = Math.min(targetCol, gridColumns - 1)
const newIndex = findBestInsertionIndex(targetRow, targetCol)
const newIndex = findBestInsertionIndex(targetRow, targetCol);
if (newIndex !== widgetIndex && newIndex >= 0 && newIndex < (SettingsData.controlCenterWidgets?.length || 0)) {
swapIndices(widgetIndex, newIndex)
swapIndices(widgetIndex, newIndex);
}
}
function findBestInsertionIndex(targetRow, targetCol) {
const widgets = SettingsData.controlCenterWidgets || [];
const n = widgets.length;
if (!n || widgetIndex < 0 || widgetIndex >= n) return -1;
if (!n || widgetIndex < 0 || widgetIndex >= n)
return -1;
function spanFor(width) {
const w = width ?? 50;
if (w <= 25) return 1;
if (w <= 50) return 2;
if (w <= 75) return 3;
if (w <= 25)
return 1;
if (w <= 50)
return 2;
if (w <= 75)
return 3;
return 4;
}
@@ -169,7 +186,13 @@ Item {
if (i === widgetIndex) {
draggedOrigKey = centerKey;
} else {
pos.push({ index: i, row, startCol, span, centerKey });
pos.push({
index: i,
row,
startCol,
span,
centerKey
});
}
col += span;
@@ -179,7 +202,8 @@ Item {
}
}
if (pos.length === 0) return -1;
if (pos.length === 0)
return -1;
const centerColCoord = targetCol + 0.5;
const targetKey = targetRow * cols + centerColCoord;
@@ -192,15 +216,20 @@ Item {
}
let lo = 0, hi = pos.length - 1;
if (targetKey <= pos[0].centerKey) return pos[0].index;
if (targetKey >= pos[hi].centerKey) return pos[hi].index;
if (targetKey <= pos[0].centerKey)
return pos[0].index;
if (targetKey >= pos[hi].centerKey)
return pos[hi].index;
while (lo <= hi) {
const mid = (lo + hi) >> 1;
const mk = pos[mid].centerKey;
if (targetKey < mk) hi = mid - 1;
else if (targetKey > mk) lo = mid + 1;
else return pos[mid].index;
if (targetKey < mk)
hi = mid - 1;
else if (targetKey > mk)
lo = mid + 1;
else
return pos[mid].index;
}
const movingUp = (draggedOrigKey != null) ? (targetKey < draggedOrigKey) : false;
return (movingUp ? pos[lo].index : pos[hi].index);
@@ -240,11 +269,11 @@ Item {
currentSize: root.widgetData?.width || 50
isSlider: root.isSlider
widgetIndex: root.widgetIndex
onSizeChanged: (newSize) => {
var widgets = SettingsData.controlCenterWidgets.slice()
onSizeChanged: newSize => {
var widgets = SettingsData.controlCenterWidgets.slice();
if (widgetIndex >= 0 && widgetIndex < widgets.length) {
widgets[widgetIndex].width = newSize
SettingsData.set("controlCenterWidgets", widgets)
widgets[widgetIndex].width = newSize;
SettingsData.set("controlCenterWidgets", widgets);
}
}
}
@@ -270,7 +299,9 @@ Item {
}
Behavior on opacity {
NumberAnimation { duration: 150 }
NumberAnimation {
duration: 150
}
}
}
@@ -283,7 +314,9 @@ Item {
z: -1
Behavior on color {
ColorAnimation { duration: Theme.shortDuration }
ColorAnimation {
duration: Theme.shortDuration
}
}
}
}

238
quickshell/Modules/ControlCenter/ControlCenterPopout.qml
View File

@@ -20,19 +20,53 @@ DankPopout {
property int expandedWidgetIndex: -1
property var expandedWidgetData: null
property bool powerMenuOpen: powerMenuModalLoader?.item?.shouldBeVisible ?? false
property real targetPopupHeight: 400
property bool _heightUpdatePending: false
signal lockRequested
function _maxPopupHeight() {
const screenHeight = (triggerScreen?.height ?? 1080);
return screenHeight - 100;
}
function _contentTargetHeight() {
const item = contentLoader.item;
if (!item)
return 400;
const naturalHeight = item.targetImplicitHeight !== undefined ? item.targetImplicitHeight : item.implicitHeight;
return Math.max(300, naturalHeight + 20);
}
function updateTargetPopupHeight() {
const target = Math.min(_maxPopupHeight(), _contentTargetHeight());
if (Math.abs(targetPopupHeight - target) < 0.5)
return;
targetPopupHeight = target;
}
function queueTargetPopupHeightUpdate() {
if (_heightUpdatePending)
return;
_heightUpdatePending = true;
Qt.callLater(() => {
_heightUpdatePending = false;
updateTargetPopupHeight();
});
}
function collapseAll() {
expandedSection = "";
expandedWidgetIndex = -1;
expandedWidgetData = null;
queueTargetPopupHeightUpdate();
}
onEditModeChanged: {
if (editMode) {
collapseAll();
}
queueTargetPopupHeightUpdate();
}
onVisibleChanged: {
@@ -52,12 +86,7 @@ DankPopout {
}
popupWidth: 550
popupHeight: {
const screenHeight = (triggerScreen?.height ?? 1080);
const maxHeight = screenHeight - 100;
const contentHeight = contentLoader.item && contentLoader.item.implicitHeight > 0 ? contentLoader.item.implicitHeight + 20 : 400;
return Math.min(maxHeight, contentHeight);
}
popupHeight: targetPopupHeight
triggerWidth: 80
positioning: ""
screen: triggerScreen
@@ -95,6 +124,7 @@ DankPopout {
onShouldBeVisibleChanged: {
if (shouldBeVisible) {
collapseAll();
queueTargetPopupHeightUpdate();
Qt.callLater(() => {
if (NetworkService.activeService)
NetworkService.activeService.autoRefreshEnabled = NetworkService.wifiEnabled;
@@ -111,6 +141,28 @@ DankPopout {
}
}
onExpandedSectionChanged: queueTargetPopupHeightUpdate()
onExpandedWidgetIndexChanged: queueTargetPopupHeightUpdate()
onTriggerScreenChanged: queueTargetPopupHeightUpdate()
Connections {
target: contentLoader
function onLoaded() {
root.queueTargetPopupHeightUpdate();
}
}
Connections {
target: contentLoader.item
ignoreUnknownSignals: true
function onTargetImplicitHeightChanged() {
root.queueTargetPopupHeightUpdate();
}
function onImplicitHeightChanged() {
root.queueTargetPopupHeightUpdate();
}
}
WidgetModel {
id: widgetModel
}
@@ -122,7 +174,13 @@ DankPopout {
LayoutMirroring.enabled: I18n.isRtl
LayoutMirroring.childrenInherit: true
implicitHeight: mainColumn.implicitHeight + Theme.spacingM
readonly property real targetImplicitHeight: {
let total = headerPane.implicitHeight + Theme.spacingS + widgetGrid.targetImplicitHeight;
if (editControls.visible)
total += Theme.spacingS + editControls.height;
return total + Theme.spacingM;
}
implicitHeight: targetImplicitHeight
property alias bluetoothCodecSelector: bluetoothCodecSelector
color: "transparent"
@@ -136,95 +194,107 @@ DankPopout {
z: 5000
Behavior on opacity {
enabled: !Theme.isDirectionalEffect
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
duration: Theme.shortDuration
easing.type: Easing.BezierSpline
easing.bezierCurve: root.shouldBeVisible ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve
}
}
}
Column {
id: mainColumn
width: parent.width - Theme.spacingL * 2
x: Theme.spacingL
y: Theme.spacingL
spacing: Theme.spacingS
DankFlickable {
id: contentFlickable
anchors.fill: parent
clip: true
contentWidth: width
contentHeight: Math.max(height, mainColumn.implicitHeight + Theme.spacingM)
interactive: contentHeight > height
HeaderPane {
id: headerPane
width: parent.width
editMode: root.editMode
onEditModeToggled: root.editMode = !root.editMode
onPowerButtonClicked: {
if (powerMenuModalLoader) {
powerMenuModalLoader.active = true;
if (powerMenuModalLoader.item) {
const bounds = Qt.rect(root.alignedX, root.alignedY, root.popupWidth, root.popupHeight);
powerMenuModalLoader.item.openFromControlCenter(bounds, root.screen);
Column {
id: mainColumn
width: contentFlickable.width - Theme.spacingL * 2
x: Theme.spacingL
y: Theme.spacingL
spacing: Theme.spacingS
HeaderPane {
id: headerPane
width: parent.width
editMode: root.editMode
onEditModeToggled: root.editMode = !root.editMode
onPowerButtonClicked: {
if (powerMenuModalLoader) {
powerMenuModalLoader.active = true;
if (powerMenuModalLoader.item) {
const bounds = Qt.rect(root.alignedX, root.alignedY, root.popupWidth, root.popupHeight);
powerMenuModalLoader.item.openFromControlCenter(bounds, root.screen);
}
}
}
}
onLockRequested: {
root.close();
root.lockRequested();
}
onSettingsButtonClicked: {
root.close();
}
}
DragDropGrid {
id: widgetGrid
width: parent.width
editMode: root.editMode
maxPopoutHeight: {
const screenHeight = (root.triggerScreen?.height ?? 1080);
return screenHeight - 100 - Theme.spacingL - headerPane.height - Theme.spacingS;
}
expandedSection: root.expandedSection
expandedWidgetIndex: root.expandedWidgetIndex
expandedWidgetData: root.expandedWidgetData
model: widgetModel
bluetoothCodecSelector: bluetoothCodecSelector
colorPickerModal: root.colorPickerModal
screenName: root.triggerScreen?.name || ""
screenModel: root.triggerScreen?.model || ""
parentScreen: root.triggerScreen
onExpandClicked: (widgetData, globalIndex) => {
root.expandedWidgetIndex = globalIndex;
root.expandedWidgetData = widgetData;
if (widgetData.id === "diskUsage") {
root.toggleSection("diskUsage_" + (widgetData.instanceId || "default"));
} else if (widgetData.id === "brightnessSlider") {
root.toggleSection("brightnessSlider_" + (widgetData.instanceId || "default"));
} else {
root.toggleSection(widgetData.id);
onLockRequested: {
root.close();
root.lockRequested();
}
onSettingsButtonClicked: {
root.close();
}
}
onRemoveWidget: index => widgetModel.removeWidget(index)
onMoveWidget: (fromIndex, toIndex) => widgetModel.moveWidget(fromIndex, toIndex)
onToggleWidgetSize: index => widgetModel.toggleWidgetSize(index)
onCollapseRequested: root.collapseAll()
}
EditControls {
width: parent.width
visible: editMode
popupScreen: root.screen
popoutX: root.alignedX
popoutY: root.alignedY
popoutWidth: root.alignedWidth
popoutHeight: root.alignedHeight
availableWidgets: {
if (!editMode)
return [];
const existingIds = (SettingsData.controlCenterWidgets || []).map(w => w.id);
const allWidgets = widgetModel.baseWidgetDefinitions.concat(widgetModel.getPluginWidgets());
return allWidgets.filter(w => w.allowMultiple || !existingIds.includes(w.id));
DragDropGrid {
id: widgetGrid
width: parent.width
editMode: root.editMode
maxPopoutHeight: {
const screenHeight = (root.triggerScreen?.height ?? 1080);
return screenHeight - 100 - Theme.spacingL - headerPane.implicitHeight - Theme.spacingS;
}
expandedSection: root.expandedSection
expandedWidgetIndex: root.expandedWidgetIndex
expandedWidgetData: root.expandedWidgetData
model: widgetModel
bluetoothCodecSelector: bluetoothCodecSelector
colorPickerModal: root.colorPickerModal
screenName: root.triggerScreen?.name || ""
screenModel: root.triggerScreen?.model || ""
parentScreen: root.triggerScreen
onExpandClicked: (widgetData, globalIndex) => {
root.expandedWidgetIndex = globalIndex;
root.expandedWidgetData = widgetData;
if (widgetData.id === "diskUsage") {
root.toggleSection("diskUsage_" + (widgetData.instanceId || "default"));
} else if (widgetData.id === "brightnessSlider") {
root.toggleSection("brightnessSlider_" + (widgetData.instanceId || "default"));
} else {
root.toggleSection(widgetData.id);
}
}
onRemoveWidget: index => widgetModel.removeWidget(index)
onMoveWidget: (fromIndex, toIndex) => widgetModel.moveWidget(fromIndex, toIndex)
onToggleWidgetSize: index => widgetModel.toggleWidgetSize(index)
onCollapseRequested: root.collapseAll()
}
EditControls {
id: editControls
width: parent.width
visible: editMode
popupScreen: root.screen
popoutX: root.alignedX
popoutY: root.alignedY
popoutWidth: root.alignedWidth
popoutHeight: root.alignedHeight
availableWidgets: {
if (!editMode)
return [];
const existingIds = (SettingsData.controlCenterWidgets || []).map(w => w.id);
const allWidgets = widgetModel.baseWidgetDefinitions.concat(widgetModel.getPluginWidgets());
return allWidgets.filter(w => w.allowMultiple || !existingIds.includes(w.id));
}
onAddWidget: widgetId => widgetModel.addWidget(widgetId)
onResetToDefault: () => widgetModel.resetToDefault()
onClearAll: () => widgetModel.clearAll()
}
onAddWidget: widgetId => widgetModel.addWidget(widgetId)
onResetToDefault: () => widgetModel.resetToDefault()
onClearAll: () => widgetModel.clearAll()
}
}

2
quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml
View File

@@ -449,7 +449,7 @@ Rectangle {
size: 24
color: Qt.rgba(Theme.surfaceText.r || 0.8, Theme.surfaceText.g || 0.8, Theme.surfaceText.b || 0.8, 0.4)
RotationAnimation on rotation {
RotationAnimator on rotation {
running: parent.visible
loops: Animation.Infinite
from: 0

4
quickshell/Modules/ControlCenter/Details/NetworkDetail.qml
View File

@@ -178,7 +178,7 @@ Rectangle {
size: 32
color: Theme.primary
RotationAnimation on rotation {
RotationAnimator on rotation {
running: NetworkService.wifiToggling
loops: Animation.Infinite
from: 0
@@ -494,7 +494,7 @@ Rectangle {
size: 48
color: Qt.rgba(Theme.surfaceText.r || 0.8, Theme.surfaceText.g || 0.8, Theme.surfaceText.b || 0.8, 0.3)
RotationAnimation on rotation {
RotationAnimator on rotation {
running: wifiScanningOverlay.visible
loops: Animation.Infinite
from: 0