Use QtGraphicalEffects.LinearGradient

Instead of using a Rectangle and its gradient prop, since there's no
need for the rotation/scale hack and it gives better quality.

TODO.md

@@ -16,7 +16,6 @@
   - Distribute fonts
   - Backspace bug
   - Add missing shortcuts to config file
-  - Zoom animation with gradient
 
   - Show error if uploading avatar fails or file is corrupted
 

src/qml/LoadingScreen.qml

@@ -1,13 +1,13 @@
 import QtQuick 2.12
+import QtGraphicalEffects 1.12
 import "Base"
 
 Item {
-    Rectangle {
+    LinearGradient {
         anchors.fill: parent
-        scale: Math.max(
+        start: Qt.point(0, 0)
-            2.25, Math.ceil(parent.parent.width / parent.parent.height)
+        end: Qt.point(window.width, window.height)
-        )
+
-        rotation: -45
         gradient: Gradient {
             GradientStop { position: 0.0; color: "#001b20" }
             GradientStop { position: 1.0; color: "#3c2f4b" }

src/qml/UI.qml

@@ -2,6 +2,7 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
 import QtQuick.Window 2.7
+import QtGraphicalEffects 1.12
 import "Base"
 import "SidePane"
 
@@ -43,16 +44,15 @@ Item {
         asynchronous: false
     }
 
-    Rectangle {
+    LinearGradient {
         id: mainUIGradient
         anchors.fill: parent
-        scale: Math.max(
+        start: theme.ui.gradientStart
-            2.25, Math.ceil(parent.parent.width / parent.parent.height)
+        end: theme.ui.gradientEnd
-        )
+
-        rotation: theme.ui.gradientRotation
         gradient: Gradient {
-            GradientStop { position: 0.0; color: theme.ui.gradientStart }
+            GradientStop { position: 0.0; color: theme.ui.gradientStartColor }
-            GradientStop { position: 1.0; color: theme.ui.gradientEnd }
+            GradientStop { position: 1.0; color: theme.ui.gradientEndColor }
         }
     }
 

src/themes/Default.qpl

@@ -196,16 +196,18 @@ ui:
     // If not specified, the gradient will be shown instead.
     url image: ""
 
-    int gradientRotation: -45
+    point gradientStart: Qt.point(0, 0)
-    color gradientStart:
+    point gradientEnd:   Qt.point(window.width, window.height)
+
+    color gradientStartColor:
         hsluv(colors.hue - 50, 100, colors.intensity * 8, 1.0)
-    color gradientEnd:
+    color gradientEndColor:
         hsluv(colors.hue + 20, 30, colors.intensity * 22, 1.0)
 
     // To have a solid color instead,
-    // set gradientStart and gradientEnd to the same value. Example:
+    // set gradientStartColor and gradientEndColor to the same value, e.g.:
-    // color gradientStart: hsluv(0, 0, 0, 0.8)
+    // color gradientStartColor: hsluv(0, 0, 0, 0.8)
-    // color gradientEnd: hsluv(0, 0, 0, 0.8)
+    // color gradientEndColor: hsluv(0, 0, 0, 0.8)