ETM-Schurig/powersync-app
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix OSK overlapping input fields in login view and setup wizards

Browse Source
This commit is contained in:
Michael Zanetti 2022-01-20 14:49:16 +01:00
parent 3be00d1887
commit 751d90b77f
3 changed files with 127 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
nymea-app/ui/KeyboardLoader.qml
View File

@ -29,16 +29,20 @@
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
import QtQuick 2.4 import QtQuick 2.4
import QtQuick.Window 2.15
Item { Item {
id: root id: root
implicitHeight: active ? childrenRect.height : 0 implicitHeight: d.active
property bool active: d.kbd && d.kbd.active ? d.kbd.height
: (Qt.inputMethod.visible ? Qt.inputMethod.keyboardRectangle.height / Screen.devicePixelRatio : 0)
Behavior on implicitHeight { NumberAnimation { duration: 130; easing.type: Easing.InOutQuad } } Behavior on implicitHeight { NumberAnimation { duration: 130; easing.type: Easing.InOutQuad } }
QtObject { QtObject {
id: d id: d
property bool active: d.kbd && d.kbd.active
property var kbd: null property var kbd: null
property string virtualKeyboardString: property string virtualKeyboardString:
' '

35
nymea-app/ui/components/WizardPageBase.qml
View File

@ -21,6 +21,8 @@ Page {
signal back(); signal back();
signal extraButtonPressed(); signal extraButtonPressed();
readonly property int visibleContentHeight: contentFlickable.height - contentContainer.y
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
spacing: Style.margins spacing: Style.margins
@ -46,19 +48,30 @@ Page {
} }
} }
Flickable {
Label { id: contentFlickable
id: textLabel
Layout.fillWidth: true
Layout.margins: Style.margins
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter
}
Item {
id: contentContainer
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
clip: true
interactive: contentHeight > height
contentHeight: outerContentContainer.childrenRect.height
Column {
id: outerContentContainer
width: parent.width
spacing: Style.margins
Label {
id: textLabel
width: parent.width - Style.margins * 2
anchors.horizontalCenter: parent.horizontalCenter
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter
}
ColumnLayout {
id: contentContainer
width: parent.width
}
}
} }
RowLayout { RowLayout {

182
nymea-app/ui/connection/NewConnectionWizard.qml
View File

@ -19,51 +19,63 @@ WizardPageBase {
} }
content: ColumnLayout { content: ColumnLayout {
anchors.fill: parent Layout.fillWidth: true
anchors.leftMargin: Style.margins Layout.leftMargin: Style.margins
anchors.rightMargin: Style.margins Layout.rightMargin: Style.margins
Layout.preferredHeight: root.visibleContentHeight
Item { Item { Layout.fillHeight: true }
Layout.fillWidth: true
Layout.fillHeight: true ColumnLayout {
Layout.preferredHeight: Style.hugeIconSize * 2 Layout.fillHeight: false
ColorIcon { Item {
anchors.centerIn: parent Layout.fillWidth: true
size: Math.min(parent.width, parent.height, Style.hugeIconSize * 2) Layout.fillHeight: true
name: "nymea-logo" Layout.preferredHeight: Style.hugeIconSize * 2
ColorIcon {
anchors.centerIn: parent
size: Math.min(parent.width, parent.height, Style.hugeIconSize * 2)
name: "nymea-logo"
}
}
Label {
Layout.fillWidth: true
Layout.fillHeight: true
horizontalAlignment: Text.AlignHCenter
text: "nymea"
font: Style.hugeFont
} }
} }
Item { Layout.fillHeight: true }
Label { ColumnLayout {
Layout.fillWidth: true Layout.fillHeight: false
Layout.fillHeight: true Label {
horizontalAlignment: Text.AlignHCenter Layout.fillWidth: true
text: "nymea" Layout.fillHeight: true
font: Style.hugeFont wrapMode: Text.WordWrap
} font: Style.smallFont
text: qsTr("In order to use nymea, you will need to install nymea:core on a computer in your network. This can be a Raspberry Pi or any generic Linux computer.")
Label { horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true }
Layout.fillHeight: true Label {
wrapMode: Text.WordWrap Layout.fillWidth: true
font: Style.smallFont Layout.fillHeight: true
text: qsTr("In order to use nymea, you will need to install nymea:core on a computer in your network. This can be a Raspberry Pi or any generic Linux computer.") wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter font: Style.smallFont
} text: qsTr("Please follow the installation instructions on %1 to install a nymea system.").arg('<a href="https://nymea.io/documentation/users/installation/core">nymea.io</a>')
Label { horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true onLinkActivated: Qt.openUrlExternally(link)
Layout.fillHeight: true }
wrapMode: Text.WordWrap
font: Style.smallFont
text: qsTr("Please follow the installation instructions on %1 to install a nymea system.").arg('<a href="https://nymea.io/documentation/users/installation/core">nymea.io</a>')
horizontalAlignment: Text.AlignHCenter
onLinkActivated: Qt.openUrlExternally(link)
} }
Item { Layout.fillHeight: true }
} }
Component { Component {
id: connectionSelectionComponent id: connectionSelectionComponent
WizardPageBase { WizardPageBase {
id: connectionSelectionPage
title: qsTr("Connectivity") title: qsTr("Connectivity")
text: qsTr("How would you like to connect nymea to your network?") text: qsTr("How would you like to connect nymea to your network?")
@ -73,13 +85,10 @@ WizardPageBase {
onBack: pageStack.pop() onBack: pageStack.pop()
content: ColumnLayout { content: ColumnLayout {
anchors { Layout.fillWidth: true
top: parent.top; Layout.maximumWidth: 500
bottom: parent.bottom; Layout.preferredHeight: connectionSelectionPage.visibleContentHeight
horizontalCenter: parent.horizontalCenter Layout.alignment: Qt.AlignHCenter
margins: Style.margins
}
width: Math.min(500, parent.width)
BigTile { BigTile {
Layout.fillWidth: true Layout.fillWidth: true
@ -158,17 +167,10 @@ WizardPageBase {
onBack: pageStack.pop() onBack: pageStack.pop()
content: ColumnLayout { content: ColumnLayout {
anchors { Layout.maximumWidth: 500
top: parent.top Layout.alignment: Qt.AlignHCenter
bottom: parent.bottom
horizontalCenter: parent.horizontalCenter
}
width: Math.min(500, parent.width)
ListView { Repeater {
Layout.fillWidth: true
Layout.fillHeight: true
clip: true
model: NymeaHostsFilterModel { model: NymeaHostsFilterModel {
id: hostsProxy id: hostsProxy
discovery: nymeaDiscovery discovery: nymeaDiscovery
@ -197,7 +199,7 @@ WizardPageBase {
delegate: NymeaSwipeDelegate { delegate: NymeaSwipeDelegate {
id: nymeaHostDelegate id: nymeaHostDelegate
width: parent.width Layout.fillWidth: true
property var nymeaHost: hostsProxy.get(index) property var nymeaHost: hostsProxy.get(index)
property string defaultConnectionIndex: { property string defaultConnectionIndex: {
if (!nymeaHost) { if (!nymeaHost) {
@ -314,12 +316,11 @@ WizardPageBase {
} }
content: ColumnLayout { content: ColumnLayout {
anchors { Layout.fillWidth: true
top: parent.top Layout.margins: Style.margins
bottom: parent.bottom Layout.maximumWidth: 500
horizontalCenter: parent.horizontalCenter Layout.alignment: Qt.AlignHCenter
}
width: Math.min(500, parent.width - Style.margins * 2)
GridLayout { GridLayout {
columns: 2 columns: 2
@ -365,15 +366,17 @@ WizardPageBase {
Component { Component {
id: wiredInstructionsComponent id: wiredInstructionsComponent
WizardPageBase { WizardPageBase {
id: wiredInstructionsPage
title: qsTr("Wired connection") title: qsTr("Wired connection")
text: qsTr("Connect the nymea system to your network using an ethernet cable and turn it on.") text: qsTr("Connect the nymea system to your network using an ethernet cable and turn it on.")
onNext: pageStack.push(selectInstanceComponent) onNext: pageStack.push(selectInstanceComponent)
onBack: pageStack.pop() onBack: pageStack.pop()
content: Image { content:Image {
anchors.fill: parent Layout.fillWidth: true
anchors.margins: Style.margins Layout.preferredHeight: wiredInstructionsPage.visibleContentHeight - Style.margins * 2
Layout.margins: Style.margins
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
sourceSize.width: width sourceSize.width: width
source: "/ui/images/setupwizard/wired-connection.svg" source: "/ui/images/setupwizard/wired-connection.svg"
@ -384,6 +387,7 @@ WizardPageBase {
Component { Component {
id: wirelessInstructionsComponent id: wirelessInstructionsComponent
WizardPageBase { WizardPageBase {
id: wirelessInstructionsPage
title: qsTr("Wireless connection") title: qsTr("Wireless connection")
text: qsTr("Turn the nymea system on by connecting the power cable and wait for it to start up.") text: qsTr("Turn the nymea system on by connecting the power cable and wait for it to start up.")
@ -391,8 +395,9 @@ WizardPageBase {
onBack: pageStack.pop() onBack: pageStack.pop()
content: Image { content: Image {
anchors.fill: parent Layout.fillWidth: true
anchors.margins: Style.margins Layout.preferredHeight: wirelessInstructionsPage.visibleContentHeight - Style.margins * 2
Layout.margins: Style.margins
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
sourceSize.width: width sourceSize.width: width
source: "/ui/images/setupwizard/wireless-connection.svg" source: "/ui/images/setupwizard/wireless-connection.svg"
@ -458,12 +463,10 @@ WizardPageBase {
} }
content: ListView { content: ListView {
anchors { Layout.fillWidth: true
top: parent.top Layout.preferredHeight: visibleContentHeight
bottom: parent.bottom Layout.maximumWidth: 500
horizontalCenter: parent.horizontalCenter Layout.alignment: Qt.AlignHCenter
}
width: Math.min(500, parent.width)
model: BluetoothDeviceInfosProxy { model: BluetoothDeviceInfosProxy {
id: deviceInfosProxy id: deviceInfosProxy
@ -524,8 +527,12 @@ WizardPageBase {
text: qsTr("Connecting to the nymea system...") text: qsTr("Connecting to the nymea system...")
showNextButton: false showNextButton: false
content: BusyIndicator { content: Item {
anchors.centerIn: parent Layout.fillWidth: true
Layout.preferredHeight: visibleContentHeight
BusyIndicator {
anchors.centerIn: parent
}
} }
} }
} }
@ -540,12 +547,10 @@ WizardPageBase {
property var wifiSetup: null property var wifiSetup: null
content: ListView { content: ListView {
anchors { Layout.fillWidth: true
top: parent.top Layout.maximumWidth: 500
bottom: parent.bottom Layout.alignment: Qt.AlignHCenter
horizontalCenter: parent.horizontalCenter Layout.preferredHeight: visibleContentHeight
}
width: Math.min(500, parent.width)
model: wifiSetup.accessPoints model: wifiSetup.accessPoints
clip: true clip: true
@ -618,8 +623,10 @@ WizardPageBase {
property string ssid: "" property string ssid: ""
content: ColumnLayout { content: ColumnLayout {
anchors.centerIn: parent Layout.fillWidth: true
width: Math.min(500, parent.width - Style.margins * 2) Layout.maximumWidth: 500
Layout.alignment: Qt.AlignHCenter
Layout.margins: Style.margins
Label { Label {
Layout.fillWidth: true Layout.fillWidth: true
@ -658,8 +665,12 @@ WizardPageBase {
showNextButton: false showNextButton: false
onBack: pageStack.pop() onBack: pageStack.pop()
content: BusyIndicator { content: Item {
anchors.centerIn: parent Layout.fillWidth: true
Layout.preferredHeight: visibleContentHeight
BusyIndicator {
anchors.centerIn: parent
}
} }
} }
} }
@ -709,9 +720,10 @@ WizardPageBase {
} }
content: ColumnLayout { content: ColumnLayout {
width: Math.min(500, parent.width - Style.margins * 2) Layout.fillWidth: true
anchors.centerIn: parent Layout.maximumWidth: 500
spacing: Style.margins Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: visibleContentHeight
Label { Label {
Layout.fillWidth: true Layout.fillWidth: true
wrapMode: Text.WordWrap wrapMode: Text.WordWrap