Commit 2694ff45 authored by Devin Lin's avatar Devin Lin 🎨 Committed by Han Young
Browse files

Add page transitions

parent 765fa49a
......@@ -7,6 +7,11 @@ import QtQuick 2.0
import org.kde.kirigami 2.13 as Kirigami
Kirigami.AboutPage {
id: aboutPage
property real mainOpacity: 1
property int yTranslate: 0
opacity: mainOpacity
visible: false
title: i18n("About")
aboutData: {
......
......@@ -17,6 +17,9 @@ Kirigami.Page {
rightPadding: 0
bottomPadding: 0
property int yTranslate: 0
property real mainOpacity: 1
property color dropShadowColor: Qt.darker(Kirigami.Theme.backgroundColor, 1.15)
property int keypadHeight: {
let rows = 6, columns = 5;
......@@ -71,118 +74,125 @@ Kirigami.Page {
anchors.fill: parent
}
// top panel drop shadow
RectangularGlow {
anchors.fill: topPanelBackground
anchors.topMargin: 1
glowRadius: 4
spread: 0.2
color: dropShadowColor
}
Rectangle {
id: topPanelBackground
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
color: Kirigami.Theme.backgroundColor
implicitHeight: outputScreen.height
}
ColumnLayout {
Item {
anchors.fill: parent
spacing: 0
opacity: mainOpacity
transform: Translate { y: yTranslate }
// top panel drop shadow
RectangularGlow {
anchors.fill: topPanelBackground
anchors.topMargin: 1
glowRadius: 4
spread: 0.2
color: dropShadowColor
}
Rectangle {
id: topPanelBackground
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
color: Kirigami.Theme.backgroundColor
implicitHeight: outputScreen.height
}
Item {
id: outputScreen
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
Layout.preferredHeight: initialPage.height - initialPage.keypadHeight
ColumnLayout {
id: mainScreen
anchors.fill: parent
spacing: 0
Column {
id: outputColumn
anchors.fill: parent
anchors.margins: Kirigami.Units.largeSpacing
spacing: Kirigami.Units.gridUnit
Item {
id: outputScreen
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
Layout.preferredHeight: initialPage.height - initialPage.keypadHeight
Flickable {
anchors.right: parent.right
height: Kirigami.Units.gridUnit * 1.5
width: Math.min(parent.width, contentWidth)
contentHeight: expressionRow.height
contentWidth: expressionRow.width
flickableDirection: Flickable.HorizontalFlick
Controls.Label {
id: expressionRow
horizontalAlignment: Text.AlignRight
font.pointSize: Kirigami.Units.gridUnit
font.weight: Font.Light
text: inputManager.expression
color: Kirigami.Theme.disabledTextColor
}
onContentWidthChanged: {
if(contentWidth > width)
contentX = contentWidth - width;
}
}
Flickable {
anchors.right: parent.right
height: Kirigami.Units.gridUnit * 4
width: Math.min(parent.width, contentWidth)
contentHeight: result.height
contentWidth: result.width
flickableDirection: Flickable.HorizontalFlick
Controls.Label {
id: result
horizontalAlignment: Text.AlignRight
font.pointSize: Kirigami.Units.gridUnit * 2
font.weight: Font.Light
text: inputManager.result
NumberAnimation on opacity {
id: resultFadeInAnimation
from: 0.5
to: 1
duration: Kirigami.Units.shortDuration
Column {
id: outputColumn
anchors.fill: parent
anchors.margins: Kirigami.Units.largeSpacing
spacing: Kirigami.Units.gridUnit
Flickable {
anchors.right: parent.right
height: Kirigami.Units.gridUnit * 1.5
width: Math.min(parent.width, contentWidth)
contentHeight: expressionRow.height
contentWidth: expressionRow.width
flickableDirection: Flickable.HorizontalFlick
Controls.Label {
id: expressionRow
horizontalAlignment: Text.AlignRight
font.pointSize: Kirigami.Units.gridUnit
font.weight: Font.Light
text: inputManager.expression
color: Kirigami.Theme.disabledTextColor
}
NumberAnimation on opacity {
id: resultFadeOutAnimation
from: 1
to: 0
duration: Kirigami.Units.shortDuration
onContentWidthChanged: {
if(contentWidth > width)
contentX = contentWidth - width;
}
}
Flickable {
anchors.right: parent.right
height: Kirigami.Units.gridUnit * 4
width: Math.min(parent.width, contentWidth)
contentHeight: result.height
contentWidth: result.width
flickableDirection: Flickable.HorizontalFlick
Controls.Label {
id: result
horizontalAlignment: Text.AlignRight
font.pointSize: Kirigami.Units.gridUnit * 2
font.weight: Font.Light
text: inputManager.result
NumberAnimation on opacity {
id: resultFadeInAnimation
from: 0.5
to: 1
duration: Kirigami.Units.shortDuration
}
NumberAnimation on opacity {
id: resultFadeOutAnimation
from: 1
to: 0
duration: Kirigami.Units.shortDuration
}
onTextChanged: resultFadeInAnimation.start()
onTextChanged: resultFadeInAnimation.start()
}
}
}
}
}
// Binary Input Pad
Item {
property string expression: ""
id: binaryInputPad
Layout.fillHeight: true
Layout.preferredWidth: initialPage.width
Layout.alignment: Qt.AlignLeft
BinaryPad {
id: binaryPad
anchors.fill: parent
anchors.margins: Kirigami.Units.smallSpacing
// Uncomment next line for function overlay
// anchors.rightMargin: Kirigami.Units.gridUnit * 1.5
onPressed: {
if (text == "DEL") {
inputManager.backspace();
} else if (text == "=") {
inputManager.equal();
resultFadeOutAnimation.start();
} else {
inputManager.append(text, true);
// Binary Input Pad
Item {
property string expression: ""
id: binaryInputPad
Layout.fillHeight: true
Layout.preferredWidth: initialPage.width
Layout.alignment: Qt.AlignLeft
BinaryPad {
id: binaryPad
anchors.fill: parent
anchors.margins: Kirigami.Units.smallSpacing
// Uncomment next line for function overlay
// anchors.rightMargin: Kirigami.Units.gridUnit * 1.5
onPressed: {
if (text == "DEL") {
inputManager.backspace();
} else if (text == "=") {
inputManager.equal();
resultFadeOutAnimation.start();
} else {
inputManager.append(text, true);
}
}
onClear: inputManager.clear()
}
onClear: inputManager.clear()
}
}
}
......
......@@ -18,6 +18,9 @@ Kirigami.Page {
rightPadding: 0
bottomPadding: 0
property int yTranslate: 0
property real mainOpacity: 1
property color dropShadowColor: Qt.darker(Kirigami.Theme.backgroundColor, 1.15)
readonly property bool inPortrait: initialPage.width < initialPage.height
property int keypadHeight: {
......@@ -84,187 +87,201 @@ Kirigami.Page {
}
background: Rectangle {
opacity: mainOpacity
Kirigami.Theme.colorSet: Kirigami.Theme.View
Kirigami.Theme.inherit: false
color: Kirigami.Theme.backgroundColor
anchors.fill: parent
}
// top panel drop shadow
RectangularGlow {
anchors.fill: topPanelBackground
anchors.topMargin: 1
glowRadius: 4
spread: 0.2
color: dropShadowColor
}
Rectangle {
id: topPanelBackground
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
color: Kirigami.Theme.backgroundColor
implicitHeight: outputScreen.height
}
ColumnLayout {
Item {
anchors.fill: parent
spacing: 0
opacity: mainOpacity
transform: Translate { y: yTranslate }
Item {
id: outputScreen
z: 1
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
Layout.preferredHeight: initialPage.height - initialPage.keypadHeight
// top panel drop shadow
RectangularGlow {
opacity: mainOpacity
Column {
id: outputColumn
anchors.fill: parent
anchors.margins: Kirigami.Units.largeSpacing
spacing: Kirigami.Units.gridUnit
Flickable {
anchors.right: parent.right
height: Kirigami.Units.gridUnit * 1.5
width: Math.min(parent.width, contentWidth)
contentHeight: expressionRow.height
contentWidth: expressionRow.width
flickableDirection: Flickable.HorizontalFlick
Controls.Label {
id: expressionRow
horizontalAlignment: Text.AlignRight
font.pointSize: Kirigami.Units.gridUnit
font.weight: Font.Light
text: inputManager.expression
color: Kirigami.Theme.disabledTextColor
}
onContentWidthChanged: {
if(contentWidth > width)
contentX = contentWidth - width;
}
}
anchors.fill: topPanelBackground
anchors.topMargin: 1
glowRadius: 4
spread: 0.2
color: dropShadowColor
}
Rectangle {
id: topPanelBackground
opacity: mainOpacity
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
color: Kirigami.Theme.backgroundColor
implicitHeight: outputScreen.height
}
ColumnLayout {
opacity: mainOpacity
transform: Translate { y: yTranslate }
anchors.fill: parent
spacing: 0
Item {
id: outputScreen
z: 1
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
Layout.preferredHeight: initialPage.height - initialPage.keypadHeight
Flickable {
anchors.right: parent.right
height: Kirigami.Units.gridUnit * 4
width: Math.min(parent.width, contentWidth)
contentHeight: result.height
contentWidth: result.width
flickableDirection: Flickable.HorizontalFlick
Controls.Label {
id: result
horizontalAlignment: Text.AlignRight
font.pointSize: Kirigami.Units.gridUnit * 2
font.weight: Font.Light
text: inputManager.result
NumberAnimation on opacity {
id: resultFadeInAnimation
from: 0.5
to: 1
duration: Kirigami.Units.shortDuration
Column {
id: outputColumn
anchors.fill: parent
anchors.margins: Kirigami.Units.largeSpacing
spacing: Kirigami.Units.gridUnit
Flickable {
anchors.right: parent.right
height: Kirigami.Units.gridUnit * 1.5
width: Math.min(parent.width, contentWidth)
contentHeight: expressionRow.height
contentWidth: expressionRow.width
flickableDirection: Flickable.HorizontalFlick
Controls.Label {
id: expressionRow
horizontalAlignment: Text.AlignRight
font.pointSize: Kirigami.Units.gridUnit
font.weight: Font.Light
text: inputManager.expression
color: Kirigami.Theme.disabledTextColor
}
NumberAnimation on opacity {
id: resultFadeOutAnimation
from: 1
to: 0
duration: Kirigami.Units.shortDuration
onContentWidthChanged: {
if(contentWidth > width)
contentX = contentWidth - width;
}
}
Flickable {
anchors.right: parent.right
height: Kirigami.Units.gridUnit * 4
width: Math.min(parent.width, contentWidth)
contentHeight: result.height
contentWidth: result.width
flickableDirection: Flickable.HorizontalFlick
Controls.Label {
id: result
horizontalAlignment: Text.AlignRight
font.pointSize: Kirigami.Units.gridUnit * 2
font.weight: Font.Light
text: inputManager.result
NumberAnimation on opacity {
id: resultFadeInAnimation
from: 0.5
to: 1
duration: Kirigami.Units.shortDuration
}
NumberAnimation on opacity {
id: resultFadeOutAnimation
from: 1
to: 0
duration: Kirigami.Units.shortDuration
}
onTextChanged: resultFadeInAnimation.start()
onTextChanged: resultFadeInAnimation.start()
}
}
}
}
}
// keypad area
Item {
property string expression: ""
id: inputPad
Layout.fillHeight: true
Layout.preferredWidth: inPortrait ? initialPage.width : initialPage.width * 0.5
Layout.alignment: Qt.AlignLeft
NumberPad {
id: numberPad
anchors.fill: parent
anchors.topMargin: Kirigami.Units.gridUnit * 0.7
anchors.bottomMargin: Kirigami.Units.smallSpacing
anchors.leftMargin: Kirigami.Units.smallSpacing
anchors.rightMargin: Kirigami.Units.gridUnit * 1.5 // for right side drawer indicator
inPortrait: initialPage.inPortrait
onPressed: {
if (text == "DEL") {
inputManager.backspace();
} else if (text == "=") {
inputManager.equal();
resultFadeOutAnimation.start();
} else {
inputManager.append(text);
// keypad area
Item {
property string expression: ""
id: inputPad
Layout.fillHeight: true
Layout.preferredWidth: inPortrait ? initialPage.width : initialPage.width * 0.5
Layout.alignment: Qt.AlignLeft
NumberPad {
id: numberPad
anchors.fill: parent
anchors.topMargin: Kirigami.Units.gridUnit * 0.7
anchors.bottomMargin: Kirigami.Units.smallSpacing
anchors.leftMargin: Kirigami.Units.smallSpacing
anchors.rightMargin: Kirigami.Units.gridUnit * 1.5 // for right side drawer indicator
inPortrait: initialPage.inPortrait
onPressed: {
if (text == "DEL") {
inputManager.backspace();
} else if (text == "=") {
inputManager.equal();
resultFadeOutAnimation.start();
} else {
inputManager.append(text);
}
}
onClear: inputManager.clear()
}
onClear: inputManager.clear()
}
// fast drop shadow
RectangularGlow {
anchors.rightMargin: 1
anchors.fill: drawerIndicator
glowRadius: 4
spread: 0.2
color: initialPage.dropShadowColor
}
Rectangle {
id: drawerIndicator
anchors.top: parent.top
anchors.bottom: parent.bottom
width: Kirigami.Units.gridUnit
x: parent.width - this.width
Kirigami.Theme.colorSet: Kirigami.Theme.View
Kirigami.Theme.inherit: false
color: Kirigami.Theme.backgroundColor
// fast drop shadow
RectangularGlow {
anchors.rightMargin: 1
anchors.fill: drawerIndicator
glowRadius: 4
spread: 0.2
color: initialPage.dropShadowColor
}
Rectangle {
anchors.centerIn: parent
height: parent.height / 20
width: parent.width / 4
radius: 3
color: Kirigami.Theme.textColor
}
}
Controls.Drawer {
id: functionDrawer
parent: initialPage
y: initialPage.height - inputPad.height
height: inputPad.height
width: inPortrait? initialPage.width * 0.8 : initialPage.width * 0.5
modal: inPortrait
interactive: inPortrait
position: inPortrait ? 0 : 1
visible: !inPortrait
dragMargin: drawerIndicator.width
edge: Qt.RightEdge
dim: false
onXChanged: drawerIndicator.x = this.x - drawerIndicator.width + drawerIndicator.radius
opacity: 1 // for plasma style
FunctionPad {
anchors.fill: parent
anchors.bottom: parent.Bottom
anchors.leftMargin: Kirigami.Units.largeSpacing
anchors.rightMargin: Kirigami.Units.largeSpacing
anchors.topMargin: Kirigami.Units.largeSpacing
anchors.bottomMargin: parent.height / 4
onPressed: inputManager.append(text)
}
// for plasma style
background: Rectangle {
id: drawerIndicator
anchors.top: parent.top
anchors.bottom: parent.bottom
width: Kirigami.Units.gridUnit
x: parent.width - this.width
Kirigami.Theme.colorSet: Kirigami.Theme.View
Kirigami.Theme.inherit: false
color: Kirigami.Theme.backgroundColor
anchors.fill: parent
Rectangle {
anchors.centerIn: parent
height: parent.height / 20
width: parent.width / 4
radius: 3
color: Kirigami.Theme.textColor
}
}
Controls.Drawer {
id: functionDrawer
parent: initialPage
y: initialPage.height - inputPad.height
height: inputPad.height
width: inPortrait? initialPage.width * 0.8 : initialPage.width * 0.5
modal: inPortrait
interactive: inPortrait
position: inPortrait ? 0 : 1
visible: !inPortrait
dragMargin: drawerIndicator.width
edge: Qt.RightEdge
dim: false
onXChanged: drawerIndicator.x = this.x - drawerIndicator.width + drawerIndicator.radius
opacity: 1 // for plasma style
FunctionPad {
anchors.fill: parent
anchors.bottom: parent.Bottom
anchors.leftMargin: Kirigami.Units.largeSpacing
anchors.rightMargin: Kirigami.Units.largeSpacing
anchors.topMargin: Kirigami.Units.largeSpacing
anchors.bottomMargin: parent.height / 4
onPressed: inputManager.append(text)
}
// for plasma style
background: Rectangle {
Kirigami.Theme.colorSet: Kirigami.Theme.View