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/ProfilesDialog/ProfilesDialog.qml

268 lines
6.9 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.4
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import de.itsblue.ScStw 2.0
import de.itsblue.ScStw.Styling 2.0
import de.itsblue.ScStw.Styling.Components 1.0
import de.itsblue.ScStwApp 2.0
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: Item {
RectangularGlow {
id: backgroundEffect
glowRadius: 7
spread: 0.02
color: "black"
opacity: 0.18
anchors.fill: backgroundRect
cornerRadius: backgroundRect.radius
scale: 1
}
Rectangle {
id: backgroundRect
anchors.fill: parent
radius: width * 0.1
color: appTheme.theme.colors.view
}
}
ProfilesStack {
id: profilesStack
width: headlineUnderline.width
anchors {
top: topContainerItm.bottom
left: parent.left
leftMargin: ( parent.width - width ) / 2
topMargin: headlineUnderline.anchors.topMargin * 1.2
bottom: parent.bottom
bottomMargin: topContainerItm.height * 0.3
}
Behavior on opacity {
NumberAnimation {duration: 200}
}
Component.onCompleted: {
profilesStack.init()
}
Connections {
target: root
onOpened: {
profilesStack.init()
}
}
}
Item {
id: topContainerItm
anchors {
top: parent.top
horizontalCenter: parent.horizontalCenter
}
height: parent.height * 0.15
width: backgroundRect.width
RectangularGlow {
id: headerUnderlineEffect
glowRadius: 7
spread: 0.02
color: "black"
opacity: 0.18
anchors.fill: headlineUnderline
scale: 1
}
Rectangle {
id: headlineUnderline
height: 1
width: parent.width
color: "transparent"
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
}
Canvas {
id: headerBackground
anchors.fill: parent
property color color: appTheme.theme.colors.view
onPaint: {
var ctx = getContext("2d");
var topMargin = backgroundRect.radius
ctx.beginPath();
ctx.fillStyle = headerBackground.color
ctx.moveTo(width, topMargin);
//
//ctx.lineTo(width, topMargin);
ctx.lineTo(width, height);
ctx.lineTo(0, height);
ctx.lineTo(0, topMargin)
ctx.arc(topMargin, topMargin, topMargin, 1 * Math.PI, 1.5*Math.PI, false);
ctx.lineTo(width-topMargin, 0)
ctx.arc(width-topMargin, topMargin, topMargin, 1.5*Math.PI, 0, false)
ctx.fill();
}
}
Label {
id: head_text
anchors {
centerIn: parent
}
width: parent.width * 0.8
height: parent.height * 0.8
fontSizeMode: Text.Fit
font.pixelSize: headlineUnderline.width * 0.1
minimumPixelSize: 1
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: appTheme.theme.colors.text
text: profilesStack.currentItem.title
}
}
FancyButton {
id: head_back
anchors {
left: parent.left
leftMargin: -height * 0.3
top:parent.top
topMargin: anchors.leftMargin
}
height: topContainerItm.height * 0.8
width: height
glowOpacity: Math.pow( root.opacity, 100 )
backgroundColor: appTheme.theme.colors.button
image: appTheme.theme.images.backIcon
onClicked: profilesStack.depth > 1 ? profilesStack.pop():root.close()
}
FancyButton {
id: head_add
anchors {
right: parent.right
rightMargin: -height * 0.3
top:parent.top
topMargin: anchors.rightMargin
}
height: topContainerItm.height * 0.8
width: height
opacity: root.opacity < 1 ? root.opacity : ["ok", "add"].indexOf(profilesStack.currentItem.secondButt) >= 0 ? 1:0
glowOpacity: opacity < 1 ? Math.pow( opacity, 100 ) : Math.pow( opacity, 100 )
backgroundColor: appTheme.theme.colors.button
image: appTheme.theme.images.confirmIcon
imageScale: profilesStack.currentItem.secondButt === "ok" ? 1:0
Label {
anchors {
top: parent.top
topMargin: parent.height/2 - height*0.55
left: parent.left
leftMargin: parent.width/2 - width/2
}
opacity: profilesStack.currentItem.secondButt === "add" ? 1:0
color: appTheme.theme.colors.text
text: "+"
font.pixelSize: parent.height * 0.8
}
onClicked: {
switch(profilesStack.currentItem.secondButt){
case "add":
profilesStack.createAthlete()
break
case "ok":
//speedBackend.createAthlete(fullNameTf.text, userNameTf.text)
}
}
Behavior on opacity {
enabled: root.opacity === 1
NumberAnimation {
duration: 200
}
}
}
}