app/resources/qml/SettingsDialog/SettingsDialog.qml

/*
    Speed Climbing Stopwatch - Simple Stopwatch for Climbers
    Copyright (C) 2018  Itsblue Development - Dorian Zeder

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
    by the Free Software Foundation, version 3 of the License.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

import QtQuick 2.9
import QtMultimedia 5.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.4
import "../components"

Popup {
    id: root
    modal: true
    dim: false
    opacity: 0

    enter: Transition {
        NumberAnimation { properties: "opacity"; to: 1; duration: 300; easing.type: Easing.InOutQuad }
        NumberAnimation { properties: "scale"; from: 0.9; to: 1; duration: 300; easing.type: Easing.InOutQuad }
    }

    exit: Transition {
        NumberAnimation { properties: "opacity"; to: 0; duration: 300; easing.type: Easing.InOutQuad }
        NumberAnimation { properties: "scale"; from: 1; to: 0.9; duration: 300; easing.type: Easing.InOutQuad }
    }

    background: Rectangle {
        radius: width * 0.5
        color: appTheme.theme.colors.view
        border.color: appTheme.theme.colors.line
        border.width: 0

        Behavior on color {
            ColorAnimation {
                duration: 200
            }
        }

        RectangularGlow {
            id: headerUnderlineEffect
            glowRadius: 7
            spread: 0.02
            color: "black"
            opacity: 0.18
            anchors.fill: headlineUnderline
            scale: 1
        }

        Canvas {

            id: headerBackground

            anchors {
                left: parent.left
                right: parent.right
                top: parent.top
                bottom: headlineUnderline.bottom
            }

            height: header.height
            width: header.width

            property color color: appTheme.theme.colors.view

            Behavior on color {
                ColorAnimation {
                    duration: 200
                }
            }

            onColorChanged: {
                requestPaint()
            }

            onPaint: {
                var ctx = getContext("2d");
                ctx.reset();

                var centreX = root.width / 2;
                var centreY = root.height / 2;

                ctx.beginPath();
                ctx.fillStyle = headerBackground.color
                ctx.moveTo(centreX, centreY);
                ctx.arc(centreX, centreY, root.width / 2, 1 * Math.PI, 2*Math.PI, false);
                //ctx.lineTo(centreX, centreY);
                ctx.fill();
            }
        }

        Item {
            id: header

            anchors {
                left: parent.left
                right: parent.right
                top: parent.top
                bottom: headlineUnderline.bottom
            }

            Label {
                id: head_text

                anchors {
                    centerIn: parent
                }

                width: headlineUnderline.width * 0.4
                height: parent.height

                fontSizeMode: Text.Fit
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter

                text: options_stack.currentItem.title
                font.pixelSize: headlineUnderline.width * 0.1
                color: enabled ? appTheme.theme.colors.text:appTheme.theme.colors.disabledText
            }
        }

        Rectangle {
            id: headlineUnderline
            height: 1
            width: parent.width
            color: appTheme.theme.colors.line
            visible: false
            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
                topMargin: parent.height * 0.15
                rightMargin: parent.radius - Math.sqrt(Math.pow(parent.radius,2)-Math.pow(parent.radius-anchors.topMargin,2))
                leftMargin: parent.radius - Math.sqrt(Math.pow(parent.radius,2)-Math.pow(parent.radius-anchors.topMargin,2))
            }
        }

        FancyButton {
            id: head_back
            anchors {
                left: parent.left
                leftMargin: parent.width * 0.17
                top:parent.top
                topMargin: parent.height * 0.01
            }

            height: parent.height * 0.13
            width: height
            //opacity: root.closePolicy === Popup.NoAutoClose ? 0:1
            enabled: opacity > 0

            glowOpacity: Math.pow( root.opacity, 100 )

            image: appTheme.theme.images.backIcon

            onClicked: {
                options_stack.depth > 1 ? options_stack.pop():root.close()
            }

            Behavior on opacity {
                NumberAnimation {
                    duration: 200
                }
            }
        }
    }

    SettingsStack {
        id: options_stack

        width: headlineUnderline.width

        enabled: opacity !== 0 //disable when not visible

        anchors  {
            top: parent.top
            left: parent.left
            leftMargin: ( parent.width - headlineUnderline.width ) / 2
            topMargin: headlineUnderline.anchors.topMargin * 0.95
            bottom: parent.bottom
            bottomMargin: anchors.topMargin
        }

        Behavior on opacity {
            NumberAnimation {duration: 200}
        }
    }

}