From 584ae244bec73ba7fc38a519b9f3750d8f2b24f8 Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Mon, 13 Feb 2017 11:59:27 +0100 Subject: [PATCH] feat(app): add `Switch` component --- linphone-desktop/assets/languages/en.ts | 4 ++ linphone-desktop/assets/languages/fr.ts | 4 ++ linphone-desktop/resources.qrc | 2 + .../ui/modules/Common/Form/FormGroup.qml | 1 + .../ui/modules/Common/Form/Switch.qml | 68 +++++++++++++++++++ .../ui/modules/Common/Form/Tab/TabButton.qml | 2 +- .../Common/Styles/Form/SwitchStyle.qml | 46 +++++++++++++ .../Common/Styles/Form/Tab/TabButtonStyle.qml | 2 + .../ui/modules/Common/Styles/qmldir | 1 + linphone-desktop/ui/modules/Common/qmldir | 1 + .../views/App/Settings/SettingsCallsChat.qml | 12 +++- .../ui/views/App/Settings/SettingsWindow.qml | 4 +- .../Styles/Settings/SettingsWindowStyle.qml | 4 +- 13 files changed, 143 insertions(+), 8 deletions(-) create mode 100644 linphone-desktop/ui/modules/Common/Form/Switch.qml create mode 100644 linphone-desktop/ui/modules/Common/Styles/Form/SwitchStyle.qml diff --git a/linphone-desktop/assets/languages/en.ts b/linphone-desktop/assets/languages/en.ts index fb0deede5..7dc89d4c1 100644 --- a/linphone-desktop/assets/languages/en.ts +++ b/linphone-desktop/assets/languages/en.ts @@ -548,6 +548,10 @@ Server url not configured. noEncryption None + + autoAnswerLabel + Auto answer + SettingsWindow diff --git a/linphone-desktop/assets/languages/fr.ts b/linphone-desktop/assets/languages/fr.ts index 493d9e14a..0fae4c952 100644 --- a/linphone-desktop/assets/languages/fr.ts +++ b/linphone-desktop/assets/languages/fr.ts @@ -558,6 +558,10 @@ Url du serveur non configurée. noEncryption Aucune + + autoAnswerLabel + Répondre automatiquement + SettingsWindow diff --git a/linphone-desktop/resources.qrc b/linphone-desktop/resources.qrc index 03d491e8c..6a93173a3 100644 --- a/linphone-desktop/resources.qrc +++ b/linphone-desktop/resources.qrc @@ -184,6 +184,7 @@ ui/modules/Common/Form/ListForm.qml ui/modules/Common/Form/SmallButton.qml ui/modules/Common/Form/StaticListForm.qml + ui/modules/Common/Form/Switch.qml ui/modules/Common/Form/Tab/TabBar.qml ui/modules/Common/Form/Tab/TabButton.qml ui/modules/Common/Form/Tab/TabContainer.qml @@ -221,6 +222,7 @@ ui/modules/Common/Styles/Form/FormStyle.qml ui/modules/Common/Styles/Form/ListFormStyle.qml ui/modules/Common/Styles/Form/SmallButtonStyle.qml + ui/modules/Common/Styles/Form/SwitchStyle.qml ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml ui/modules/Common/Styles/Form/Tab/TabContainerStyle.qml ui/modules/Common/Styles/Form/TextButtonAStyle.qml diff --git a/linphone-desktop/ui/modules/Common/Form/FormGroup.qml b/linphone-desktop/ui/modules/Common/Form/FormGroup.qml index 52e0f087b..a08b0425a 100644 --- a/linphone-desktop/ui/modules/Common/Form/FormGroup.qml +++ b/linphone-desktop/ui/modules/Common/Form/FormGroup.qml @@ -21,6 +21,7 @@ RowLayout { Layout.preferredWidth: FormGroupStyle.legend.width color: FormGroupStyle.legend.color + elide: Text.ElideRight font.pointSize: FormGroupStyle.legend.fontSize horizontalAlignment: Text.AlignRight diff --git a/linphone-desktop/ui/modules/Common/Form/Switch.qml b/linphone-desktop/ui/modules/Common/Form/Switch.qml new file mode 100644 index 000000000..6dd66f2ac --- /dev/null +++ b/linphone-desktop/ui/modules/Common/Form/Switch.qml @@ -0,0 +1,68 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.1 + +import Common.Styles 1.0 + +// ============================================================================= + +Switch { + id: control + + checked: false + + indicator: Rectangle { + implicitHeight: SwitchStyle.indicator.height + implicitWidth: SwitchStyle.indicator.width + + border.color: control.checked + ? SwitchStyle.indicator.border.color.checked + : SwitchStyle.indicator.border.color.normal + + color: control.checked + ? SwitchStyle.indicator.color.checked + : SwitchStyle.indicator.color.normal + + radius: SwitchStyle.indicator.radius + x: control.leftPadding + y: parent.height / 2 - height / 2 + + Rectangle { + id: sphere + + height: SwitchStyle.sphere.size + width: SwitchStyle.sphere.size + + anchors.verticalCenter: parent.verticalCenter + border.color: control.checked + ? (control.down + ? SwitchStyle.sphere.border.color.pressed + : SwitchStyle.sphere.border.color.checked + ) : SwitchStyle.sphere.border.color.normal + + color: control.down + ? SwitchStyle.sphere.color.pressed + : SwitchStyle.sphere.color.normal + + radius: width / 2 + x: control.checked ? parent.width - width : 0 + + states: State { + when: control.checked + + PropertyChanges { + target: sphere + x: parent.width - width + } + } + + transitions: Transition { + NumberAnimation { + properties: 'x' + + duration: SwitchStyle.animation.duration + easing.type: Easing.InOutQuad + } + } + } + } +} diff --git a/linphone-desktop/ui/modules/Common/Form/Tab/TabButton.qml b/linphone-desktop/ui/modules/Common/Form/Tab/TabButton.qml index b13b07bf4..d9b64716d 100644 --- a/linphone-desktop/ui/modules/Common/Form/Tab/TabButton.qml +++ b/linphone-desktop/ui/modules/Common/Form/Tab/TabButton.qml @@ -55,7 +55,7 @@ Controls.TabButton { } contentItem: RowLayout { - spacing: 8 + spacing: TabButtonStyle.spacing Icon { id: icon diff --git a/linphone-desktop/ui/modules/Common/Styles/Form/SwitchStyle.qml b/linphone-desktop/ui/modules/Common/Styles/Form/SwitchStyle.qml new file mode 100644 index 000000000..9bbd6e390 --- /dev/null +++ b/linphone-desktop/ui/modules/Common/Styles/Form/SwitchStyle.qml @@ -0,0 +1,46 @@ +pragma Singleton +import QtQuick 2.7 + +import Common 1.0 + +// ============================================================================= + +QtObject { + property QtObject animation: QtObject { + property int duration: 200 + } + + property QtObject indicator: QtObject { + property int height: 18 + property int radius: 10 + property int width: 48 + property QtObject border: QtObject { + property QtObject color: QtObject { + property color checked: Colors.i + property color normal: Colors.c + } + } + + property QtObject color: QtObject { + property color checked: Colors.i + property color normal: Colors.k + } + } + + property QtObject sphere: QtObject { + property int size: 22 + + property QtObject border: QtObject { + property QtObject color: QtObject { + property color checked: Colors.i + property color normal: Colors.w + property color pressed: Colors.w + } + } + + property QtObject color: QtObject { + property color pressed: Colors.c + property color normal: Colors.k + } + } +} diff --git a/linphone-desktop/ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml b/linphone-desktop/ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml index 9d72205e0..3cf21752c 100644 --- a/linphone-desktop/ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml +++ b/linphone-desktop/ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml @@ -6,6 +6,8 @@ import Common 1.0 // ============================================================================= QtObject { + property int spacing: 8 + property QtObject backgroundColor: QtObject { property color hovered: Colors.s property color normal: Colors.i diff --git a/linphone-desktop/ui/modules/Common/Styles/qmldir b/linphone-desktop/ui/modules/Common/Styles/qmldir index a52ecdc05..9afe1ae36 100644 --- a/linphone-desktop/ui/modules/Common/Styles/qmldir +++ b/linphone-desktop/ui/modules/Common/Styles/qmldir @@ -27,6 +27,7 @@ singleton FormStyle 1.0 Form/FormStyle.qml singleton FormGroupStyle 1.0 Form/FormGroupStyle.qml singleton ListFormStyle 1.0 Form/ListFormStyle.qml singleton SmallButtonStyle 1.0 Form/SmallButtonStyle.qml +singleton SwitchStyle 1.0 Form/SwitchStyle.qml singleton TextButtonAStyle 1.0 Form/TextButtonAStyle.qml singleton TextButtonBStyle 1.0 Form/TextButtonBStyle.qml singleton TextFieldStyle 1.0 Form/TextFieldStyle.qml diff --git a/linphone-desktop/ui/modules/Common/qmldir b/linphone-desktop/ui/modules/Common/qmldir index 7631bbf95..be374d8df 100644 --- a/linphone-desktop/ui/modules/Common/qmldir +++ b/linphone-desktop/ui/modules/Common/qmldir @@ -45,6 +45,7 @@ FormGroup 1.0 Form/FormGroup.qml LightButton 1.0 Form/LightButton.qml ListForm 1.0 Form/ListForm.qml StaticListForm 1.0 Form/StaticListForm.qml +Switch 1.0 Form/Switch.qml TextButtonA 1.0 Form/TextButtonA.qml TextButtonB 1.0 Form/TextButtonB.qml TextField 1.0 Form/TextField.qml diff --git a/linphone-desktop/ui/views/App/Settings/SettingsCallsChat.qml b/linphone-desktop/ui/views/App/Settings/SettingsCallsChat.qml index 3ba05db70..02a5c6098 100644 --- a/linphone-desktop/ui/views/App/Settings/SettingsCallsChat.qml +++ b/linphone-desktop/ui/views/App/Settings/SettingsCallsChat.qml @@ -25,6 +25,12 @@ TabContainer { ] } } + + FormGroup { + label: qsTr('autoAnswerLabel') + + Switch {} + } } Form { @@ -42,9 +48,9 @@ TabContainer { ExclusiveButtons { texts: [ - qsTr('limeDisabled'), - qsTr('limeRequired'), - qsTr('limePreferred') + qsTr('limeDisabled'), + qsTr('limeRequired'), + qsTr('limePreferred') ] } } diff --git a/linphone-desktop/ui/views/App/Settings/SettingsWindow.qml b/linphone-desktop/ui/views/App/Settings/SettingsWindow.qml index d2620544c..f9343737a 100644 --- a/linphone-desktop/ui/views/App/Settings/SettingsWindow.qml +++ b/linphone-desktop/ui/views/App/Settings/SettingsWindow.qml @@ -15,8 +15,8 @@ ApplicationWindow { height: SettingsWindowStyle.height width: SettingsWindowStyle.width - //maximumHeight: height - //maximumWidth: width + maximumHeight: height + maximumWidth: width minimumHeight: height minimumWidth: width diff --git a/linphone-desktop/ui/views/App/Styles/Settings/SettingsWindowStyle.qml b/linphone-desktop/ui/views/App/Styles/Settings/SettingsWindowStyle.qml index f258ee565..5983b124c 100644 --- a/linphone-desktop/ui/views/App/Styles/Settings/SettingsWindowStyle.qml +++ b/linphone-desktop/ui/views/App/Styles/Settings/SettingsWindowStyle.qml @@ -4,8 +4,8 @@ import QtQuick 2.7 // ============================================================================= QtObject { - property int height: 480 - property int width: 800 + property int height: 640 + property int width: 1024 property QtObject validButton: QtObject { property int bottomMargin: 30