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

264 lines
6.8 KiB
QML
Raw Normal View History

/*
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 com.itsblue.speedclimbingstopwatch 1.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.style.viewColor
}
}
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: "grey"
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
}
Canvas {
id: headerBackground
anchors.fill: parent
property color color: appTheme.style.viewColor
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: 0
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: appTheme.style.textColor
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.style.buttonColor
image: appTheme.style.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.style.buttonColor
image: appTheme.style.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.style.textColor
text: "+"
font.pixelSize: parent.height * 0.8
}
onClicked: {
switch(profilesStack.currentItem.secondButt){
case "add":
profilesStack.push(addProfileComp)
break
case "ok":
//speedBackend.createAthlete(fullNameTf.text, userNameTf.text)
}
}
Behavior on opacity {
enabled: root.opacity === 1
NumberAnimation {
duration: 200
}
}
}
}