From cfa2e8d25f24250fc03456ab1d3f9560d29e4844 Mon Sep 17 00:00:00 2001 From: Philip Mueller Date: Fri, 26 May 2023 13:19:29 +0200 Subject: [PATCH] [branding] sync with 3.2.x branch --- src/branding/manjaro/slideshow/Artwork.qml | 467 ++++++++++++++++-- src/branding/manjaro/slideshow/Rocket.qml | 58 +++ src/branding/manjaro/slideshow/Slide.qml | 3 +- src/branding/manjaro/slideshow/SlideShow.qml | 20 +- src/branding/manjaro/slideshow/Slider.qml | 42 +- src/branding/manjaro/slideshow/background.svg | 98 ++-- .../manjaro/slideshow/background_dark.svg | 47 +- src/branding/manjaro/slideshow/comet.svg | 200 ++++++++ src/branding/manjaro/slideshow/moon.svg | 189 +++++++ src/branding/manjaro/slideshow/rocket_a.svg | 249 ++++++++++ src/branding/manjaro/slideshow/rocket_b.svg | 250 ++++++++++ .../manjaro/slideshow/rocket_smoke.svg | 10 +- src/branding/manjaro/slideshow/space.svg | 78 +++ src/branding/manjaro/slideshow/starsClose.svg | 72 +++ src/branding/manjaro/slideshow/starsFar.svg | 72 +++ 15 files changed, 1724 insertions(+), 131 deletions(-) create mode 100644 src/branding/manjaro/slideshow/Rocket.qml create mode 100644 src/branding/manjaro/slideshow/comet.svg create mode 100644 src/branding/manjaro/slideshow/moon.svg create mode 100644 src/branding/manjaro/slideshow/rocket_a.svg create mode 100644 src/branding/manjaro/slideshow/rocket_b.svg create mode 100644 src/branding/manjaro/slideshow/space.svg create mode 100644 src/branding/manjaro/slideshow/starsClose.svg create mode 100644 src/branding/manjaro/slideshow/starsFar.svg diff --git a/src/branding/manjaro/slideshow/Artwork.qml b/src/branding/manjaro/slideshow/Artwork.qml index 5055fffc1..7fef09d3b 100644 --- a/src/branding/manjaro/slideshow/Artwork.qml +++ b/src/branding/manjaro/slideshow/Artwork.qml @@ -1,45 +1,219 @@ import QtQuick 2.15 -Item { +Rectangle { + id: root + + // Max size of the scene - needed to load heavy assets only once and also set star field sizes + QtObject { + id: maxSceneSize + property int width: 6075 + property int height: 6950 + } + + SystemPalette { id: systemPalette } - property int rocketLift: 0 - id: root + color: "#103e49" + Image { - id: background - anchors { - fill: parent - margins: -10 - bottomMargin: 20 + id: comet + source: "comet.svg" + sourceSize { + width: 50 + height: 50 + } + opacity: 0 + + Timer { + id: cometShowupTimeout + running: true + interval: 6000 + repeat: true + onTriggered: { + comet.x = Math.floor(Math.random() * root.width); + comet.y = Math.floor(Math.random() * root.height); + cometShowupAnimation.start(); + } } - source: systemPalette.window.hslLightness > 0.5 ? "background.svg" : "background_dark.svg" - sourceSize.width: width - sourceSize.height: height + ParallelAnimation { + id: cometShowupAnimation + loops: 1 - SequentialAnimation { - loops: Animation.Infinite - running: true - - XAnimator{ - target: background - from: -20 - to: 0 - duration: 5000 + SequentialAnimation { + NumberAnimation { + target: comet + property: "opacity" + duration: 200 + from: 0 + to: 1 + } + NumberAnimation { + target: comet + property: "opacity" + duration: 200 + from: 1 + to: 0 + } } - XAnimator { - target: background - from: 0 - to: -20 - duration: 5000 + NumberAnimation { + target: comet + properties: "x" + duration: 700 + easing.type: Easing.OutQuad + to: comet.x-100 + } + NumberAnimation { + target: comet + properties: "y" + duration: 700 + easing.type: Easing.OutQuad + to: comet.y+100 } } } - Rectangle { - id: smoke + Column { + id: starsClose + + anchors { + left: parent.left + right: parent.right + top: parent.top + topMargin: -starsClose1.sourceSize.height + } + height: starsClose1.height+starsClose2.height + + Image { + fillMode: Image.Tile + + id: starsClose1 + source: 'starsClose.svg' + + height: maxSceneSize.height + width: maxSceneSize.width + } + Image { + fillMode: Image.Tile + + id: starsClose2 + source: 'starsClose.svg' + + height: maxSceneSize.height + width: maxSceneSize.width + } + NumberAnimation { + id: starsCloseMovingAnimation + running: true + loops: -1 + + duration: 100000 + target: starsClose + property: "anchors.topMargin" + from: -starsClose1.sourceSize.height + to: 0 + } + } + + Column { + id: starsFar + + anchors { + left: parent.left + right: parent.right + top: parent.top + topMargin: -starsFar1.sourceSize.height + } + height: starsFar1.height+starsFar2.height + + Image { + fillMode: Image.Tile + id: starsFar1 + source: 'starsFar.svg' + + height: maxSceneSize.height + width: maxSceneSize.width + } + Image { + fillMode: Image.Tile + + id: starsFar2 + source: 'starsFar.svg' + + height: maxSceneSize.height + width: maxSceneSize.width + } + + NumberAnimation { + id: starsFarMovingAnimation + running: true + loops: -1 + duration: 200000 + target: starsFar + property: "anchors.topMargin" + from: -starsFar1.sourceSize.height + to: 0 + } + } + + Image { + id: moon + source: "moon.svg" + sourceSize.height: height + sourceSize.width: width + x: -height + height: 70 + width: height + + Timer { + id: moonShowupTimeout + running: true + interval: 25000 + repeat: true + onTriggered: { + moon.height = Math.floor(Math.random() * (45 - 200) + 200) + + moon.x = Math.floor(Math.random() * root.width); + moonShowupAnimation.start(); + } + } + NumberAnimation { + id: moonShowupAnimation + target: moon + properties: "y" + duration: 25000 + from: -moon.height + to: maxSceneSize.height+moon.height + } + + } + + Image { + id: background + anchors.fill: parent + + mipmap: true + source: systemPalette.window.hslLightness > 0.5 ? "background.svg" : "background_dark.svg" + + sourceSize { + height: maxSceneSize.height + width: maxSceneSize.width + } + } + + Item { + id: smoke + + anchors{ + bottom: parent.bottom + right: parent.right + left: parent.left + } + height: smokeAsset.paintedHeight + + Rectangle { anchors{ bottom: parent.bottom right: parent.right @@ -48,41 +222,228 @@ Item { height: 57 color: "#eff0f1" - - Image { - anchors{ - bottom: parent.bottom - left: parent.left - } - - source: "smoke.svg" - sourceSize.width: width - sourceSize.height: height + } + Image { + id: smokeAsset + anchors{ + bottom: parent.bottom + horizontalCenter: parent.horizontalCenter } + source: "smoke.svg" + sourceSize.width: width + sourceSize.height: height + } } - Image { + Rocket { id: rocket + property int lift: 0 + anchors { bottom: parent.bottom - bottomMargin: -(height-rocketLift) - left: parent.left - leftMargin: 105 + bottomMargin: -(height-lift) + horizontalCenter: parent.horizontalCenter + horizontalCenterOffset: -235 } width: 100 - - source: "rocket_smoke.svg" - sourceSize.width: width - sourceSize.height: height - - Behavior on anchors.bottomMargin { - NumberAnimation { - duration: 1400 - easing.type: Easing.OutQuad - } - } - + showSmoke: true } + state: "onGround" + + states: [ + State { + name: "onGround" + PropertyChanges { + target: rocket + lift: 180 + } + PropertyChanges { + target: background + anchors.topMargin: -root.height + anchors.bottomMargin: 20 + opacity: 1 + } + PropertyChanges { + target: starsCloseMovingAnimation + running: false + } + PropertyChanges { + target: starsFarMovingAnimation + running: false + } + PropertyChanges { + target: moonShowupTimeout + running: false + } + PropertyChanges { + target: cometShowupTimeout + running: false + } + }, + State { + extend: "onGround" + name: "nearGround" + PropertyChanges { + target: rocket + lift: root.height/2 + 150 + } + PropertyChanges { + target: smoke + anchors.bottomMargin: -smoke.height/2 + 100 + } + + PropertyChanges { + target: background + anchors.bottomMargin: -(root.height*0.2) + anchors.topMargin: -root.height+root.height*0.2 + } + }, + State { + extend: "nearGround" + name: "inAtmosphere" + PropertyChanges { + target: rocket + showSmoke: false + } + PropertyChanges { + target: rocket + lift: root.height/2 + 100 + } + PropertyChanges { + target: background + anchors.bottomMargin: -root.height*0.9 + anchors.topMargin: 0 + } + }, + State { + extend: "inAtmosphere" + name: "inSpace" + PropertyChanges { + target: background + anchors.bottomMargin: -(root.height*2) + anchors.topMargin: root.height + } + PropertyChanges { + target: starsCloseMovingAnimation + running: true + } + PropertyChanges { + target: starsFarMovingAnimation + running: true + } + PropertyChanges { + target: moonShowupTimeout + running: true + } + PropertyChanges { + target: cometShowupTimeout + running: true + } + } + ] + + transitions: [ + Transition{ + id: transition1 + from: "onGround" + to: "nearGround" + SequentialAnimation { + NumberAnimation { + target: rocket + property: "lift" + duration: 10000 + easing.type: Easing.InQuad + } + ScriptAction { script: root.state = "inAtmosphere" } + } + NumberAnimation { + target: smoke + property: "bottomMargin" + duration: 10000 + easing.type: Easing.InQuad + + } + NumberAnimation { + target: background + properties: "anchors.topMargin,anchors.bottomMargin" + duration: 10000 + easing.type: Easing.InQuad + } + }, + Transition { + id: transition2 + from: "nearGround" + to: "inAtmosphere" + NumberAnimation { + target: rocket + property: "lift" + duration: 5000 + easing.type: Easing.OutQuad + } + SequentialAnimation { + NumberAnimation { + target: background + properties: "anchors.topMargin,anchors.bottomMargin" + duration: 5000 + } + ScriptAction { script: root.state = "inSpace" } + } + }, + Transition { + id: transition3 + from: "inAtmosphere" + to: "inSpace" + NumberAnimation { + target: rocket + property: "lift" + duration: 3000 + easing.type: Easing.OutQuad + } + + NumberAnimation { + target: background + properties: "anchors.bottomMargin" + duration: 15000 + from: -root.height + } + NumberAnimation { + target: background + properties: "anchors.topMargin" + duration: 15000 + from: 0 + } + } + ] + + // Animation objects don't bind properties - so we have to reset the animation when a window size changes. In our case it's only about height. + // Timeout is needed to ensure that properties already have needed values set. + Timer { + id: sizeChangeTimeout + interval: 1 + + onTriggered: { + switch(state) { + case "nearGround": + if(!transition1.running) return; + state = "onGround"; + state = "nearGround"; + break; + case "inAtmosphere": + if(!transition2.running) return; + state = "nearGround"; + state = "inAtmosphere"; + break; + case "inSpace": + if(!transition3.running) return; + state = "inAtmosphere"; + state = "inSpace"; + } + } + } + + onHeightChanged: { + sizeChangeTimeout.restart(); + } } diff --git a/src/branding/manjaro/slideshow/Rocket.qml b/src/branding/manjaro/slideshow/Rocket.qml new file mode 100644 index 000000000..cddbdd28c --- /dev/null +++ b/src/branding/manjaro/slideshow/Rocket.qml @@ -0,0 +1,58 @@ +import QtQuick 2.15 +Item { + + property bool showSmoke: false + + Item { + id: rocketNoSmoke + property bool rocketFrame: false + + Timer { + interval: 200 + running: !showSmoke + repeat: true + onTriggered: rocketNoSmoke.rocketFrame = !rocketNoSmoke.rocketFrame + } + width: 250 + height: Math.min(rocket_a.paintedHeight, rocket_b.paintedHeight) + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + Image { + opacity: rocketNoSmoke.rocketFrame?1:0 + width: parent.width + id: rocket_a + fillMode: Image.PreserveAspectFit + + source: "rocket_a.svg" + + } + + Image { + opacity: rocketNoSmoke.rocketFrame?0:1 + width: parent.width + id: rocket_b + fillMode: Image.PreserveAspectFit + + source: "rocket_b.svg" + + } + } + + + + Image { + opacity: showSmoke?1:0 + width: 250 + anchors.top: parent.top + anchors.horizontalCenter: parent.horizontalCenter + id: rocketSmoke + fillMode: Image.PreserveAspectFit + + source: "rocket_smoke.svg" + + Behavior on opacity { + NumberAnimation{} + } + } + +} diff --git a/src/branding/manjaro/slideshow/Slide.qml b/src/branding/manjaro/slideshow/Slide.qml index 212e07709..346b58314 100644 --- a/src/branding/manjaro/slideshow/Slide.qml +++ b/src/branding/manjaro/slideshow/Slide.qml @@ -1,7 +1,8 @@ import QtQuick 2.15 -Item { +QtObject { required property string title + property string secondaryTitle required property string body property string footer } diff --git a/src/branding/manjaro/slideshow/SlideShow.qml b/src/branding/manjaro/slideshow/SlideShow.qml index 0b24a6148..6abd74cec 100644 --- a/src/branding/manjaro/slideshow/SlideShow.qml +++ b/src/branding/manjaro/slideshow/SlideShow.qml @@ -7,6 +7,7 @@ Item { function onActivate(){ timer.restart(); slider.reset(); + artwork.state = "nearGround"; } function onLeave(){ @@ -35,14 +36,6 @@ Item { Artwork { id: artwork anchors.fill: parent - rocketLift: 120 + ((root.height - 140) / slider.slidesSize) * (slider.slidesSize) - Binding { - target: artwork - property: "rocketLift" - value: 120 + ((root.height - 140) / slider.slidesSize) * (slider.currentSlideIndex + 1) - when: slider.firstIteration - restoreMode: Binding.RestoreBinding - } } Slider { @@ -51,20 +44,21 @@ Item { slides: [ Slide { - title: qsTr("hello") + title: qsTr("Hello") body: qsTr("Manjaro is simple and elegant yet fully customizable. Use as is or create something incredible? You decide.") footer: qsTr("During the installation, this slideshow will provide a quick introduction.") }, Slide { - title: qsTr("pamac") + title: qsTr("Pamac") + secondaryTitle: qsTr("Add/Remove Software") body: qsTr("Accessible via command line or fast, beautiful graphical interface. Add or remove software with the greatest of ease.") }, Slide { - title: qsTr("control panel") - body: qsTr("Settings manager, the same for every redaction you choose, will help you to install drivers, download missing translation and language packets, or update your kernel.") + title: qsTr("Control Panel") + body: qsTr("The control panel is a handy tool to install device drivers, download missing translations and language packages, it also helps in keeping your kernels up to date.") }, Slide { - title: qsTr("thank you") + title: qsTr("Thank You") body: qsTr("It's time to relax and prepare for new adventures.") footer: qsTr("Check our forum and wiki if you have any questions or feedback.") } diff --git a/src/branding/manjaro/slideshow/Slider.qml b/src/branding/manjaro/slideshow/Slider.qml index e0df67c00..79baad3dd 100644 --- a/src/branding/manjaro/slideshow/Slider.qml +++ b/src/branding/manjaro/slideshow/Slider.qml @@ -29,18 +29,28 @@ Item { Text { id: titleText font { - family: "Comfortaa" - capitalization: Font.AllLowercase + family: "Montserrat" + capitalization: Font.AllUppercase weight: Font.DemiBold pointSize: 18 } color: "white" text: slides[_currentSlideIndex].title } + Text { + id: secondaryTitleText + font { + family: "Montserrat" + weight: Font.Light + pointSize: 12 + } + color: "white" + text: slides[_currentSlideIndex].secondaryTitle ?? "" + } Text { id: bodyText font { - family: "Comfortaa" + family: "Montserrat" pointSize: 12 } width: 400 @@ -52,7 +62,7 @@ Item { Text { id: footerText font { - family: "Comfortaa" + family: "Montserrat" weight: Font.Light pointSize: 12 } @@ -74,6 +84,12 @@ Item { to: 0.0 duration: transitionAnimation.duration } + OpacityAnimator { + target: secondaryTitleText + from: 1.0 + to: 0.0 + duration: transitionAnimation.duration + } OpacityAnimator { target: bodyText from: 1.0 @@ -92,6 +108,12 @@ Item { to: -30 duration: transitionAnimation.duration } + XAnimator { + target: secondaryTitleText + from: 0 + to: -30 + duration: transitionAnimation.duration + } XAnimator { target: bodyText from: 0 @@ -117,6 +139,12 @@ Item { to: 1.0 duration: transitionAnimation.duration } + OpacityAnimator { + target: secondaryTitleText + from: 0.0 + to: 1.0 + duration: transitionAnimation.duration + } OpacityAnimator { target: bodyText from: 0.0 @@ -135,6 +163,12 @@ Item { to: 0 duration: transitionAnimation.duration } + XAnimator { + target: secondaryTitleText + from: 30 + to: 0 + duration: transitionAnimation.duration + } XAnimator { target: bodyText from: 25 diff --git a/src/branding/manjaro/slideshow/background.svg b/src/branding/manjaro/slideshow/background.svg index 94fb4d95f..b84cac5c0 100644 --- a/src/branding/manjaro/slideshow/background.svg +++ b/src/branding/manjaro/slideshow/background.svg @@ -3,31 +3,63 @@ - - - - - - image/svg+xml - - - - - image/svg+xml - - - - - - - + inkscape:export-ydpi="95.990692" /> diff --git a/src/branding/manjaro/slideshow/background_dark.svg b/src/branding/manjaro/slideshow/background_dark.svg index 4d3facc22..735e1d326 100644 --- a/src/branding/manjaro/slideshow/background_dark.svg +++ b/src/branding/manjaro/slideshow/background_dark.svg @@ -2,22 +2,31 @@ + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/branding/manjaro/slideshow/moon.svg b/src/branding/manjaro/slideshow/moon.svg new file mode 100644 index 000000000..e0f21f6e0 --- /dev/null +++ b/src/branding/manjaro/slideshow/moon.svg @@ -0,0 +1,189 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/branding/manjaro/slideshow/rocket_a.svg b/src/branding/manjaro/slideshow/rocket_a.svg new file mode 100644 index 000000000..44aaac53c --- /dev/null +++ b/src/branding/manjaro/slideshow/rocket_a.svg @@ -0,0 +1,249 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/branding/manjaro/slideshow/rocket_b.svg b/src/branding/manjaro/slideshow/rocket_b.svg new file mode 100644 index 000000000..0e40f6486 --- /dev/null +++ b/src/branding/manjaro/slideshow/rocket_b.svg @@ -0,0 +1,250 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/branding/manjaro/slideshow/rocket_smoke.svg b/src/branding/manjaro/slideshow/rocket_smoke.svg index 78a99d0a4..69c25fd24 100644 --- a/src/branding/manjaro/slideshow/rocket_smoke.svg +++ b/src/branding/manjaro/slideshow/rocket_smoke.svg @@ -25,9 +25,9 @@ borderopacity="1" inkscape:pageopacity="0" inkscape:pageshadow="2" - inkscape:zoom="0.7" - inkscape:cx="557.85714" - inkscape:cy="251.42857" + inkscape:zoom="0.98994949" + inkscape:cx="-169.20055" + inkscape:cy="1534.4217" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" @@ -64,11 +64,11 @@ + + +image/svg+xml diff --git a/src/branding/manjaro/slideshow/starsClose.svg b/src/branding/manjaro/slideshow/starsClose.svg new file mode 100644 index 000000000..60c51a274 --- /dev/null +++ b/src/branding/manjaro/slideshow/starsClose.svg @@ -0,0 +1,72 @@ + + + +image/svg+xml diff --git a/src/branding/manjaro/slideshow/starsFar.svg b/src/branding/manjaro/slideshow/starsFar.svg new file mode 100644 index 000000000..f0e54e475 --- /dev/null +++ b/src/branding/manjaro/slideshow/starsFar.svg @@ -0,0 +1,72 @@ + + + +image/svg+xml