lainns-mirror/noctalia-shell
1
0
Fork 0
mirror of https://github.com/noctalia-dev/noctalia-shell.git synced 2026-05-11 17:08:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

colors: smooth transitionning animation to a new scheme.

Browse Source
This commit is contained in:
Lemmy
2026-01-22 08:49:28 -05:00
parent b92ff12a88
commit a06b38574e
11 changed files with 219 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Commons/Color.qml
+199 -16
View File
@@ -20,30 +20,213 @@ Singleton {
property bool reloadColors: false
// Flag indicating theme colors are currently transitioning (for widgets to disable their own animations)
property bool isTransitioning: false
// Timer to reset isTransitioning after animation completes
Timer {
id: transitionTimer
interval: Style.animationSlowest + 50 // Small buffer after animation
onTriggered: root.isTransitioning = false
}
// --- Key Colors: These are the main accent colors that define your app's style
readonly property color mPrimary: customColorsData.mPrimary
readonly property color mOnPrimary: customColorsData.mOnPrimary
readonly property color mSecondary: customColorsData.mSecondary
readonly property color mOnSecondary: customColorsData.mOnSecondary
readonly property color mTertiary: customColorsData.mTertiary
readonly property color mOnTertiary: customColorsData.mOnTertiary
property color mPrimary: defaultColors.mPrimary
property color mOnPrimary: defaultColors.mOnPrimary
property color mSecondary: defaultColors.mSecondary
property color mOnSecondary: defaultColors.mOnSecondary
property color mTertiary: defaultColors.mTertiary
property color mOnTertiary: defaultColors.mOnTertiary
// --- Utility Colors: These colors serve specific, universal purposes like indicating errors
readonly property color mError: customColorsData.mError
readonly property color mOnError: customColorsData.mOnError
property color mError: defaultColors.mError
property color mOnError: defaultColors.mOnError
// --- Surface and Variant Colors: These provide additional options for surfaces and their contents, creating visual hierarchy
readonly property color mSurface: customColorsData.mSurface
readonly property color mOnSurface: customColorsData.mOnSurface
property color mSurface: defaultColors.mSurface
property color mOnSurface: defaultColors.mOnSurface
readonly property color mSurfaceVariant: customColorsData.mSurfaceVariant
readonly property color mOnSurfaceVariant: customColorsData.mOnSurfaceVariant
property color mSurfaceVariant: defaultColors.mSurfaceVariant
property color mOnSurfaceVariant: defaultColors.mOnSurfaceVariant
readonly property color mOutline: customColorsData.mOutline
readonly property color mShadow: customColorsData.mShadow
property color mOutline: defaultColors.mOutline
property color mShadow: defaultColors.mShadow
readonly property color mHover: customColorsData.mHover
readonly property color mOnHover: customColorsData.mOnHover
property color mHover: defaultColors.mHover
property color mOnHover: defaultColors.mOnHover
// --- Color transition animations ---
Behavior on mPrimary {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mOnPrimary {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mSecondary {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mOnSecondary {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mTertiary {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mOnTertiary {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mError {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mOnError {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mSurface {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mOnSurface {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mSurfaceVariant {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mOnSurfaceVariant {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mOutline {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mShadow {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mHover {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
Behavior on mOnHover {
ColorAnimation {
duration: Style.animationSlowest
easing.type: Easing.OutCubic
}
}
// Helper to start transition and update a color
function startTransition() {
root.isTransitioning = true;
transitionTimer.restart();
}
// Update colors when customColorsData changes (imperative assignment enables Behavior animations)
Connections {
target: customColorsData
function onMPrimaryChanged() {
startTransition();
root.mPrimary = customColorsData.mPrimary;
}
function onMOnPrimaryChanged() {
startTransition();
root.mOnPrimary = customColorsData.mOnPrimary;
}
function onMSecondaryChanged() {
startTransition();
root.mSecondary = customColorsData.mSecondary;
}
function onMOnSecondaryChanged() {
startTransition();
root.mOnSecondary = customColorsData.mOnSecondary;
}
function onMTertiaryChanged() {
startTransition();
root.mTertiary = customColorsData.mTertiary;
}
function onMOnTertiaryChanged() {
startTransition();
root.mOnTertiary = customColorsData.mOnTertiary;
}
function onMErrorChanged() {
startTransition();
root.mError = customColorsData.mError;
}
function onMOnErrorChanged() {
startTransition();
root.mOnError = customColorsData.mOnError;
}
function onMSurfaceChanged() {
startTransition();
root.mSurface = customColorsData.mSurface;
}
function onMOnSurfaceChanged() {
startTransition();
root.mOnSurface = customColorsData.mOnSurface;
}
function onMSurfaceVariantChanged() {
startTransition();
root.mSurfaceVariant = customColorsData.mSurfaceVariant;
}
function onMOnSurfaceVariantChanged() {
startTransition();
root.mOnSurfaceVariant = customColorsData.mOnSurfaceVariant;
}
function onMOutlineChanged() {
startTransition();
root.mOutline = customColorsData.mOutline;
}
function onMShadowChanged() {
startTransition();
root.mShadow = customColorsData.mShadow;
}
function onMHoverChanged() {
startTransition();
root.mHover = customColorsData.mHover;
}
function onMOnHoverChanged() {
startTransition();
root.mOnHover = customColorsData.mOnHover;
}
}
// --------------------------------
// Default colors: Rose Pine
Modules/Bar/Extras/BarPillHorizontal.qml
+1
View File
@@ -83,6 +83,7 @@ Item {
border.width: Style.capsuleBorderWidth
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutQuad
Modules/Bar/Extras/BarPillVertical.qml
+1
View File
@@ -97,6 +97,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutQuad
Modules/Bar/Widgets/Workspace.qml
+3
View File
@@ -579,6 +579,7 @@ Item {
}
}
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutCubic
@@ -727,6 +728,7 @@ Item {
}
}
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutCubic
@@ -957,6 +959,7 @@ Item {
}
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutCubic
Modules/MainScreen/Backgrounds/BarBackground.qml
-7
View File
@@ -95,13 +95,6 @@ ShapePath {
startX: barMappedPos.x + tlRadius * tlMultX
startY: barMappedPos.y
// Smooth color animation
Behavior on fillColor {
ColorAnimation {
duration: Style.animationFast
}
}
// ========== PATH DEFINITION ==========
// Draws a rectangle with potentially inverted corners
// All coordinates are relative to startX/startY
Modules/MainScreen/ScreenCorners.qml
+2 -1
View File
@@ -52,8 +52,9 @@ Item {
strokeWidth: -1 // No stroke, fill only
fillColor: shouldShow ? cornerColor : "transparent"
// Smooth color animation
// Smooth color animation (disabled during theme transitions to sync with Color.qml)
Behavior on fillColor {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
}
Modules/Panels/Settings/SettingsContent.qml
+3
View File
@@ -388,6 +388,7 @@ Item {
color: toggleMouseArea.containsMouse ? Color.mHover : "transparent"
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutQuad
@@ -451,6 +452,7 @@ Item {
property color tabTextColor: selected ? Color.mOnPrimary : (tabItem.hovering ? Color.mOnHover : Color.mOnSurface)
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutQuad
@@ -458,6 +460,7 @@ Item {
}
Behavior on tabTextColor {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutQuad
Widgets/NButton.qml
+4
View File
@@ -71,6 +71,7 @@ Rectangle {
opacity: enabled ? 1.0 : 0.6
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.OutCubic
@@ -78,6 +79,7 @@ Rectangle {
}
Behavior on border.color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.OutCubic
@@ -102,6 +104,7 @@ Rectangle {
color: contentColor
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.OutCubic
@@ -119,6 +122,7 @@ Rectangle {
color: contentColor
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.OutCubic
Widgets/NIconButton.qml
+2
View File
@@ -42,6 +42,7 @@ Rectangle {
border.width: Style.borderS
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutQuad
@@ -58,6 +59,7 @@ Rectangle {
y: Style.pixelAlignCenter(root.height, contentHeight)
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutQuad
Widgets/NIconButtonHot.qml
+2
View File
@@ -64,6 +64,7 @@ Rectangle {
border.width: Style.borderS
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutQuad
@@ -93,6 +94,7 @@ Rectangle {
y: (root.height - height) / 2 + (height - contentHeight) / 2
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.InOutQuad
Widgets/NTabButton.qml
+2
View File
@@ -34,6 +34,7 @@ Rectangle {
border.width: Style.borderS
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.OutCubic
@@ -57,6 +58,7 @@ Rectangle {
verticalAlignment: Text.AlignVCenter
Behavior on color {
enabled: !Color.isTransitioning
ColorAnimation {
duration: Style.animationFast
easing.type: Easing.OutCubic