From 25dc5015e6abd4c5266708f0ec26d9e30a45969c Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Mon, 20 Apr 2015 22:46:15 +0200 Subject: [PATCH] better layout in the dialpad --- dialer/contents/ui/Call/CallPage.qml | 14 ++++---- dialer/contents/ui/Dialer.qml | 45 +++++++++++++++++-------- dialer/contents/ui/DialerButton.qml | 31 ++++++++++------- dialer/contents/ui/DialerIconButton.qml | 29 ++++++++++++---- dialer/contents/ui/main.qml | 2 +- 5 files changed, 79 insertions(+), 42 deletions(-) diff --git a/dialer/contents/ui/Call/CallPage.qml b/dialer/contents/ui/Call/CallPage.qml index 3710905f..13fc5ddc 100644 --- a/dialer/contents/ui/Call/CallPage.qml +++ b/dialer/contents/ui/Call/CallPage.qml @@ -30,8 +30,6 @@ Item { state: voiceCallmanager.activeVoiceCall ? voiceCallmanager.activeVoiceCall.statusText : "disconnected" property int status: voiceCallmanager.activeVoiceCall ? voiceCallmanager.activeVoiceCall.status : 0 - property color textColor: "white" - property string providerId: voiceCallmanager.providers.id(0) function secondsToTimeString(seconds) { @@ -74,29 +72,29 @@ Item { } } } - Text { + PlasmaComponents.Label { Layout.fillWidth: true Layout.minimumHeight: implicitHeight horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter - font.pixelSize: theme.defaultFont.pixelSize * 2 - color: textColor + font.pointSize: theme.defaultFont.pointSize * 2 text: voiceCallmanager.activeVoiceCall ? voiceCallmanager.activeVoiceCall.lineId : "" } - Text { + PlasmaComponents.Label { Layout.fillWidth: true Layout.minimumHeight: implicitHeight horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter - color: textColor text: { if (!voiceCallmanager.activeVoiceCall) { return ''; //STATUS_DIALING } else if (voiceCallmanager.activeVoiceCall.status == 3) { return i18n("Calling..."); - } else { + } else if (voiceCallmanager.activeVoiceCall.duration > 0) { return secondsToTimeString(voiceCallmanager.activeVoiceCall.duration); + } else { + return ''; } } } diff --git a/dialer/contents/ui/Dialer.qml b/dialer/contents/ui/Dialer.qml index 9093bae6..7a6b286e 100644 --- a/dialer/contents/ui/Dialer.qml +++ b/dialer/contents/ui/Dialer.qml @@ -27,7 +27,6 @@ import org.nemomobile.voicecall 1.0 Item { id: dialer - property color textColor: "white" property alias numberEntryText: status.text property string providerId: voiceCallmanager.providers.id(0) @@ -61,28 +60,28 @@ Item { anchors { fill: parent - margins: 20 + margins: units.largeSpacing } PlasmaComponents.Label { id: status Layout.fillWidth: true + Layout.minimumHeight: parent.height / 6 + Layout.maximumHeight: Layout.minimumHeight horizontalAlignment: Qt.AlignRight verticalAlignment: Qt.AlignVCenter - font.pixelSize: one.font.pixelSize + font.pointSize: 1024 + fontSizeMode: Text.Fit } - Grid { + GridLayout { id: pad columns: 3 - spacing: 0 - property int buttonHeight: height / 5 + + property int buttonHeight: parent.height / 6 Layout.fillWidth: true Layout.fillHeight: true - height: parent.height - status.height - width: parent.width - DialerButton { id: one; text: "1" } DialerButton { text: "2" } DialerButton { text: "3" } @@ -98,17 +97,35 @@ Item { DialerButton { text: "*"; } DialerButton { text: "0"; sub: "+"; } DialerButton { text: "#" } + } - DialerIconButton { - source: "im-user" - callback: fromContacts - } + RowLayout { + Layout.fillWidth: true + Layout.minimumHeight: parent.height / 6 + Layout.maximumHeight: Layout.minimumHeight DialerIconButton { id: callButton + Layout.minimumWidth: dialPadArea.width/3 + Layout.fillWidth: true + Layout.fillHeight: true + enabled: status.text.length > 0 + opacity: enabled ? 1 : 0.5 source: "call-start" callback: call } - DialerIconButton { + DialerButton { + Layout.minimumWidth: dialPadArea.width/3 + Layout.fillWidth: true + Layout.fillHeight: true + enabled: status.text.length > 0 + opacity: enabled ? 1 : 0.5 + text: i18n("Call") + callback: call + } + DialerIconButton { + Layout.fillWidth: true + Layout.fillHeight: true + Layout.minimumWidth: dialPadArea.width/3 source: "edit-clear" callback: function() { if (status.text.length > 0) { diff --git a/dialer/contents/ui/DialerButton.qml b/dialer/contents/ui/DialerButton.qml index f6bda28d..86954b0d 100644 --- a/dialer/contents/ui/DialerButton.qml +++ b/dialer/contents/ui/DialerButton.qml @@ -1,13 +1,20 @@ -import QtQuick 2.0 -import org.kde.plasma.core 2.0 as PlasmaCore -Text { - width: parent.width / parent.columns - height: parent.buttonHeight +import QtQuick 2.0 +import QtQuick.Layouts 1.1 +import org.kde.plasma.core 2.0 as PlasmaCore +import org.kde.plasma.components 2.0 as PlasmaComponents + +PlasmaComponents.Label { + Layout.fillWidth: true + Layout.fillHeight: true + + //This is 0 to override the Label default height that would cause a binding loop + height: 0 horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter - color: dialer.textColor - font.pixelSize: Math.floor((width - (units.largeSpacing)) / 2) + font.pointSize: 1024 + fontSizeMode: Text.VerticalFit + property alias sub: longHold.text property var callback @@ -33,19 +40,19 @@ Text { } } - Text { + PlasmaComponents.Label { id: longHold anchors { - top: parent.top + verticalCenter: parent.verticalCenter right: parent.right } - height: parent.height + height: parent.height * 0.6 width: parent.width / 3 verticalAlignment: Qt.AlignVCenter visible: text.length > 0 opacity: 0.7 - font.pixelSize: parent.pixelSize * .8 - color: parent.color + font.pointSize: 1024 + fontSizeMode: Text.Fit } } diff --git a/dialer/contents/ui/DialerIconButton.qml b/dialer/contents/ui/DialerIconButton.qml index 254fb0e0..eb1ed1a8 100644 --- a/dialer/contents/ui/DialerIconButton.qml +++ b/dialer/contents/ui/DialerIconButton.qml @@ -1,19 +1,34 @@ import QtQuick 2.0 +import QtQuick.Layouts 1.1 import org.kde.plasma.core 2.0 as PlasmaCore +import org.kde.plasma.components 2.0 as PlasmaComponents Item { - width: parent.width / parent.columns - height: parent.buttonHeight + id: buttonRoot + + Layout.fillWidth: true + Layout.fillHeight: true + property var callback - property string text property string sub property alias source: icon.source + property alias text: label.text - PlasmaCore.IconItem { - id: icon - width: units.iconSizes.medium - height: width + Row { anchors.centerIn: parent + PlasmaCore.IconItem { + id: icon + anchors.verticalCenter: parent.verticalCenter + width: height + height: buttonRoot.height * 0.6 + } + PlasmaComponents.Label { + id: label + height: buttonRoot.height + anchors.verticalCenter: parent.verticalCenter + font.pointSize: 1024 + fontSizeMode: Text.VerticalFit + } } MouseArea { diff --git a/dialer/contents/ui/main.qml b/dialer/contents/ui/main.qml index 8b7feec8..2e4e433a 100644 --- a/dialer/contents/ui/main.qml +++ b/dialer/contents/ui/main.qml @@ -31,7 +31,7 @@ ApplicationWindow { width: 600 height: 800 visible: true - color: Qt.rgba(0, 0, 0, 0.9) + //color: Qt.rgba(0, 0, 0, 0.9) property int status: voiceCallmanager.activeVoiceCall ? voiceCallmanager.activeVoiceCall.status : 0 //END PROPERTIES