qml/private/ImageBackground.qml

0001 /*
0002  * Copyright 2018 by Marco Martin <mart@kde.org>
0003  * Copyright 2018 David Edmundson <davidedmundson@kde.org>
0004  *
0005  * Licensed under the Apache License, Version 2.0 (the "License");
0006  * you may not use this file except in compliance with the License.
0007  * You may obtain a copy of the License at
0008  *
0009  *    http://www.apache.org/licenses/LICENSE-2.0
0010  *
0011  * Unless required by applicable law or agreed to in writing, software
0012  * distributed under the License is distributed on an "AS IS" BASIS,
0013  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
0014  * See the License for the specific language governing permissions and
0015  * limitations under the License.
0016  *
0017  */
0018
0019 import QtQuick 2.15
0020 import QtQuick.Layouts 1.15
0021 import QtQuick.Controls 2.15 as Controls
0022 import org.kde.kirigami 2.19 as Kirigami
0023
0024
0025 Item {
0026     id: backgroundImage
0027     anchors.fill: parent
0028
0029     property Kirigami.ColumnView delegatesView
0030     property string source: delegatesView && delegatesView.currentItem && delegatesView.currentItem.contentItem ? delegatesView.currentItem.contentItem.skillBackgroundSource : ""
0031     property Image currentImage: image1
0032
0033     onSourceChanged: {
0034         if (backgroundImage.currentImage == image1) {
0035             image2.opacity = 0;
0036             image2.source = source;
0037             backgroundImage.setCurrent(image2);
0038         } else {
0039             image1.opacity = 0;
0040             image1.source = source;
0041             backgroundImage.setCurrent(image1);
0042         }
0043     }
0044
0045     function setCurrent(image) {
0046         if (image.status === Image.Ready) {
0047             backgroundImage.currentImage = image;
0048             fadeAnim.restart();
0049         }
0050     }
0051
0052     Rectangle {
0053         z: 10
0054         anchors.fill: parent
0055         color: delegatesView && delegatesView.currentItem && delegatesView.currentItem.contentItem ? delegatesView.currentItem.contentItem.skillBackgroundColorOverlay : "transparent"
0056     }
0057     Image {
0058         id: image1
0059         anchors.fill: parent
0060         z: backgroundImage.currentImage == image1 ? 1 : 0
0061         fillMode: Image.PreserveAspectCrop
0062         onStatusChanged: {
0063             if (backgroundImage.currentImage == image2 && status == Image.Ready) {
0064                 backgroundImage.setCurrent(image1);
0065             }
0066         }
0067     }
0068     Image {
0069         id: image2
0070         anchors.fill: parent
0071         z: backgroundImage.currentImage == image2 ? 1 : 0
0072         fillMode: Image.PreserveAspectCrop
0073         onStatusChanged: {
0074             if (backgroundImage.currentImage == image1 && status == Image.Ready) {
0075                 backgroundImage.setCurrent(image2);
0076             }
0077         }
0078     }
0079     SequentialAnimation {
0080         id: fadeAnim
0081         OpacityAnimator {
0082             target: backgroundImage.currentImage
0083             from: 0
0084             to: 1
0085             duration: 1000
0086             easing.type: Easing.InOutQuad
0087         }
0088         // OpacityAnimator makes the image disappear immediately
0089         PropertyAnimation {
0090             property: "opacity"
0091             target: backgroundImage.currentImage == image1 ? image2 : image1
0092             from: 1
0093             to: 0
0094             duration: 1000
0095             easing.type: Easing.InOutQuad
0096         }
0097     }
0098 }