This repository has been archived on 2024-06-03. You can view files and clone it, but cannot push or open issues or pull requests.
app/resources/qml/SettingsDialog/SettingsDialog.qml

204 lines
5.8 KiB
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}
}
}
}