From 99b1fb9bde2106a89672c884cef457b9ca8d473f Mon Sep 17 00:00:00 2001 From: Gaelle Braud Date: Tue, 31 Oct 2023 13:49:31 +0100 Subject: [PATCH] Test file for qml items : Text ComboBox TextInput Button TabBar Tooltip Carousel + fixes on this items --- Linphone/view/App/Layout/LoginLayout.qml | 6 +- Linphone/view/CMakeLists.txt | 3 + Linphone/view/Item/Button.qml | 23 +-- Linphone/view/Item/Carousel.qml | 28 ++-- Linphone/view/Item/CheckBox.qml | 8 +- Linphone/view/Item/ComboBox.qml | 25 +-- Linphone/view/Item/Form/LoginForm.qml | 8 +- Linphone/view/Item/PhoneNumberComboBox.qml | 32 ++-- Linphone/view/Item/PhoneNumberInput.qml | 8 +- Linphone/view/Item/TabBar.qml | 73 ++++++--- Linphone/view/Item/Test/ItemsTest.qml | 145 ++++++++++++++++++ Linphone/view/Item/Text.qml | 24 ++- Linphone/view/Item/TextInput.qml | 18 ++- Linphone/view/Item/ToolTip.qml | 22 +++ Linphone/view/Page/Login/LoginPage.qml | 10 +- .../view/Page/Login/RegisterCheckingPage.qml | 14 +- Linphone/view/Page/Login/RegisterPage.qml | 18 +-- Linphone/view/Page/Login/SIPLoginPage.qml | 18 +-- Linphone/view/Page/Login/WelcomePage.qml | 83 +++------- Linphone/view/Style/DefaultStyle.qml | 2 + 20 files changed, 373 insertions(+), 195 deletions(-) create mode 100644 Linphone/view/Item/Test/ItemsTest.qml create mode 100644 Linphone/view/Item/ToolTip.qml diff --git a/Linphone/view/App/Layout/LoginLayout.qml b/Linphone/view/App/Layout/LoginLayout.qml index 125f8c3d6..d083516a9 100644 --- a/Linphone/view/App/Layout/LoginLayout.qml +++ b/Linphone/view/App/Layout/LoginLayout.qml @@ -37,9 +37,9 @@ Item { Text { Layout.alignment: Qt.AlignRight | Qt.AlignVCenter - text: "About" - font.pixelSize: 12 - color: DefaultStyle.grayColor + textItem.text: "About" + textItem.font.pixelSize: 12 + textItem.color: DefaultStyle.grayColor } } RowLayout { diff --git a/Linphone/view/CMakeLists.txt b/Linphone/view/CMakeLists.txt index c96fb1b82..86951e6d0 100644 --- a/Linphone/view/CMakeLists.txt +++ b/Linphone/view/CMakeLists.txt @@ -14,9 +14,12 @@ list(APPEND _LINPHONEAPP_QML_FILES view/Item/TabBar.qml view/Item/Text.qml view/Item/TextInput.qml + view/Item/ToolTip.qml view/Item/Form/LoginForm.qml + view/Item/Test/ItemsTest.qml + view/Page/Login/LoginPage.qml view/Page/Login/RegisterPage.qml view/Page/Login/SIPLoginPage.qml diff --git a/Linphone/view/Item/Button.qml b/Linphone/view/Item/Button.qml index 1a2ab8cf0..30045abfd 100644 --- a/Linphone/view/Item/Button.qml +++ b/Linphone/view/Item/Button.qml @@ -7,7 +7,7 @@ Control.Button { property int capitalization property bool inversedColors: false property int textSize: DefaultStyle.buttonTextSize - + background: Rectangle { color: inversedColors ? DefaultStyle.buttonInversedBackground : DefaultStyle.buttonBackground radius: 24 @@ -15,19 +15,20 @@ Control.Button { } contentItem: Text { - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - leftPadding: 11 - rightPadding: 11 - topPadding: 6 - bottomPadding: 6 + textItem.horizontalAlignment: Text.AlignHCenter + textItem.verticalAlignment: Text.AlignVCenter + textItem.leftPadding: 11 + textItem.rightPadding: 11 + textItem.topPadding: 6 + textItem.bottomPadding: 6 - wrapMode: Text.WordWrap - text: mainItem.text - color: inversedColors ? DefaultStyle.buttonInversedTextColor : DefaultStyle.buttonTextColor - font { + textItem.wrapMode: Text.WordWrap + textItem.text: mainItem.text + textItem.color: inversedColors ? DefaultStyle.buttonInversedTextColor : DefaultStyle.buttonTextColor + textItem.font { bold: true pointSize: mainItem.textSize + family: DefaultStyle.defaultFont capitalization: mainItem.capitalization } } diff --git a/Linphone/view/Item/Carousel.qml b/Linphone/view/Item/Carousel.qml index 43eee0000..ee881a205 100644 --- a/Linphone/view/Item/Carousel.qml +++ b/Linphone/view/Item/Carousel.qml @@ -7,7 +7,10 @@ import Linphone ColumnLayout { id: mainItem - property list itemsList + required property list itemsList + // Items count is needed when using a repeater for itemsList + // which is part of the carouselStackLayout children list + required property int itemsCount property int currentIndex: carouselStackLayout.currentIndex property bool prevButtonVisible: true property bool nextButtonVisible: true @@ -18,8 +21,7 @@ ColumnLayout { StackLayout { id: carouselStackLayout - - property var items: children + children: mainItem.itemsList property int previousIndex: currentIndex function goToSlideAtIndex(index) { @@ -30,16 +32,23 @@ ColumnLayout { Component.onCompleted: { // The animation is not working until the slide // has been displayed once - for (var i = 0; i < mainItem.itemsList.length; ++i) { + for (var i = 0; i < mainItem.itemsCount; ++i) { // const newObject = Qt.createQmlObject(mainItem.itemsList[i], carouselStackLayout); - mainItem.itemsList[i].createObject(carouselStackLayout) + // mainItem.itemsList[i].createObject(carouselStackLayout) + // carouselStackLayout.append(itemsList[i]) var button = carouselButton.createObject(carouselButtonsLayout, {slideIndex: i, stackLayout: carouselStackLayout}) button.buttonClicked.connect(goToSlideAtIndex) currentIndex = i } currentIndex = 0 previousIndex = currentIndex - items = children + } + + onCurrentIndexChanged: { + var currentItem = children[currentIndex] + var crossFaderAnim = crossFader.createObject(parent, {fadeInTarget: currentItem, mirrored: (previousIndex > currentIndex)}) + crossFaderAnim.restart() + mainItem.currentIndex = currentIndex } Component { @@ -68,13 +77,6 @@ ColumnLayout { } } } - - onCurrentIndexChanged: { - var currentItem = items[currentIndex] - var crossFaderAnim = crossFader.createObject(parent, {fadeInTarget: currentItem, mirrored: (previousIndex > currentIndex)}) - crossFaderAnim.restart() - mainItem.currentIndex = currentIndex - } } RowLayout { id: carouselButtonsLayout diff --git a/Linphone/view/Item/CheckBox.qml b/Linphone/view/Item/CheckBox.qml index e45374e4a..d83d6f14b 100644 --- a/Linphone/view/Item/CheckBox.qml +++ b/Linphone/view/Item/CheckBox.qml @@ -16,11 +16,11 @@ Control.CheckBox { // color: checkbox.checked ? DefaultStyle.checkboxBorderColor : "transparent" Text { - anchors.centerIn: parent - text: "\u2714" - font.pointSize: 18 - color: DefaultStyle.checkboxBorderColor visible: mainItem.checked + textItem.text: "\u2714" + textItem.font.pointSize: 18 + textItem.color: DefaultStyle.checkboxBorderColor + anchors.centerIn: parent } } } diff --git a/Linphone/view/Item/ComboBox.qml b/Linphone/view/Item/ComboBox.qml index 8c82fd622..9025ea2f1 100644 --- a/Linphone/view/Item/ComboBox.qml +++ b/Linphone/view/Item/ComboBox.qml @@ -9,14 +9,14 @@ ColumnLayout { property int backgroundWidth: 200 // Usage : each item of the model list must be {text: ..., img: ...} property var modelList: [] - readonly property string currentText: selectedItemText.text + readonly property string currentText: selectedItemText.textItem.text Text { visible: label.length > 0 - verticalAlignment: Text.AlignVCenter - text: mainItem.label - color: DefaultStyle.formItemLabelColor - font { + textItem.verticalAlignment: Text.AlignVCenter + textItem.text: mainItem.label + textItem.color: DefaultStyle.formItemLabelColor + textItem.font { pointSize: DefaultStyle.formItemLabelSize bold: true } @@ -42,14 +42,15 @@ ColumnLayout { width: visible ? 20 : 0 fillMode: Image.PreserveAspectFit anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left anchors.leftMargin: visible ? 10 : 0 } Text { id: selectedItemText - elide: Text.ElideRight + textItem.elide: Text.ElideRight anchors.left: selectedItemImg.right - anchors.leftMargin: selectedItemImg.visible ? 15 : 10 + anchors.leftMargin: selectedItemImg.visible ? 5 : 10 anchors.right: parent.right anchors.rightMargin: 20 anchors.verticalCenter: parent.verticalCenter @@ -61,9 +62,9 @@ ColumnLayout { selectedItemImg.source = mainItem.modelList[0].img } if (mainItem.modelList[index].text) - selectedItemText.text = mainItem.modelList[0].text + selectedItemText.textItem.text = mainItem.modelList[0].text else if (mainItem.modelList[index]) - selectedItemText.text = mainItem.modelList[0] + selectedItemText.textItem.text = mainItem.modelList[0] } } @@ -116,12 +117,12 @@ ColumnLayout { } Text { - text: modelData.text + textItem.text: modelData.text ? modelData.text : modelData ? modelData : "" - elide: Text.ElideRight + textItem.elide: Text.ElideRight anchors.verticalCenter: parent.verticalCenter anchors.left: delegateImg.right anchors.leftMargin: delegateImg.visible ? 5 : 10 @@ -141,7 +142,7 @@ ColumnLayout { } onPressed: { combobox.state = "" - selectedItemText.text = modelData.text + selectedItemText.textItem.text = modelData.text ? modelData.text : modelData ? modelData diff --git a/Linphone/view/Item/Form/LoginForm.qml b/Linphone/view/Item/Form/LoginForm.qml index f07dc991b..51e8f8164 100644 --- a/Linphone/view/Item/Form/LoginForm.qml +++ b/Linphone/view/Item/Form/LoginForm.qml @@ -38,10 +38,10 @@ ColumnLayout { } } Text { - color: DefaultStyle.grayColor - text: "Forgotten password?" - font.underline: true - font.pointSize: DefaultStyle.defaultTextSize + textItem.color: DefaultStyle.grayColor + textItem.text: "Forgotten password?" + textItem.font.underline: true + textItem.font.pointSize: DefaultStyle.defaultTextSize } } diff --git a/Linphone/view/Item/PhoneNumberComboBox.qml b/Linphone/view/Item/PhoneNumberComboBox.qml index ac1cf883d..ed14ef486 100644 --- a/Linphone/view/Item/PhoneNumberComboBox.qml +++ b/Linphone/view/Item/PhoneNumberComboBox.qml @@ -12,10 +12,10 @@ ColumnLayout { Text { visible: label.length > 0 - verticalAlignment: Text.AlignVCenter - text: mainItem.label - color: DefaultStyle.formItemLabelColor - font { + textItem.verticalAlignment: Text.AlignVCenter + textItem.text: mainItem.label + textItem.color: DefaultStyle.formItemLabelColor + textItem.font { pointSize: DefaultStyle.formItemLabelSize bold: true } @@ -42,19 +42,19 @@ ColumnLayout { Text { visible: text.length > 0 id: selectedItemFlag - text: parent.currentItem ? parent.currentItem.flag : "" - font.family: DefaultStyle.emojiFont + textItem.text: parent.currentItem ? parent.currentItem.flag : "" + textItem.font.family: DefaultStyle.emojiFont anchors.rightMargin: 5 anchors.verticalCenter: parent.verticalCenter } Text { - leftPadding: 5 - text: parent.currentItem ? "+" + parent.currentItem.countryCallingCode : "" - color: DefaultStyle.formItemLabelColor + textItem.leftPadding: 5 + textItem.text: parent.currentItem ? "+" + parent.currentItem.countryCallingCode : "" + textItem.color: DefaultStyle.formItemLabelColor anchors.right: parent.right anchors.left: selectedItemFlag.right anchors.verticalCenter: parent.verticalCenter - elide: Text.ElideRight + textItem.elide: Text.ElideRight } } @@ -95,8 +95,8 @@ ColumnLayout { Text { id: delegateImg; visible: text.length > 0 - text: $modelData.flag - font.family: DefaultStyle.emojiFont + textItem.text: $modelData.flag + textItem.font.family: DefaultStyle.emojiFont anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter anchors.leftMargin: 15 @@ -104,13 +104,13 @@ ColumnLayout { } Text { - text: "+" + $modelData.countryCallingCode - elide: Text.ElideRight - leftPadding: 5 + textItem.text: "+" + $modelData.countryCallingCode + textItem.elide: Text.ElideRight + textItem.leftPadding: 5 anchors.left: delegateImg.right anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - color: DefaultStyle.formItemLabelColor + textItem.color: DefaultStyle.formItemLabelColor } MouseArea { diff --git a/Linphone/view/Item/PhoneNumberInput.qml b/Linphone/view/Item/PhoneNumberInput.qml index d4b04adfa..735b37b93 100644 --- a/Linphone/view/Item/PhoneNumberInput.qml +++ b/Linphone/view/Item/PhoneNumberInput.qml @@ -15,10 +15,10 @@ ColumnLayout { Text { visible: label.length > 0 - verticalAlignment: Text.AlignVCenter - text: mainItem.label + (mainItem.mandatory ? "*" : "") - color: DefaultStyle.formItemLabelColor - font { + textItem.verticalAlignment: Text.AlignVCenter + textItem.text: mainItem.label + (mainItem.mandatory ? "*" : "") + textItem.color: DefaultStyle.formItemLabelColor + textItem.font { pointSize: DefaultStyle.formItemLabelSize bold: true } diff --git a/Linphone/view/Item/TabBar.qml b/Linphone/view/Item/TabBar.qml index 07810040a..7565dff72 100644 --- a/Linphone/view/Item/TabBar.qml +++ b/Linphone/view/Item/TabBar.qml @@ -1,4 +1,4 @@ -import QtQuick 2.7 +import QtQuick 2.7 as QT import QtQuick.Layouts 1.3 import QtQuick.Controls 2.2 as Control import Linphone @@ -10,11 +10,12 @@ Control.TabBar { ? itemAt(0).x : 0 spacing: 40 - - background: Item { + wheelEnabled: true + background: QT.Item { + id: tabBarBackground anchors.fill: parent - Rectangle { + QT.Rectangle { id: barBG height: 4 color: DefaultStyle.lightGrayColor @@ -22,41 +23,63 @@ Control.TabBar { width: parent.width } - Rectangle { - height: 4 - color: DefaultStyle.orangeColor - anchors.bottom: parent.bottom - x: mainItem.currentItem - ? mainItem.currentItem.x - mainItem.originX - : 0 - width: mainItem.currentItem ? mainItem.currentItem.width : 0 - clip: true - Behavior on x { NumberAnimation {duration: 100}} - Behavior on width {NumberAnimation {duration: 100}} - } + // QT.Rectangle { + // height: 4 + // color: DefaultStyle.orangeColor + // anchors.bottom: parent.bottom + // // anchors.left: mainItem.currentItem.left + // // anchors.right: mainItem.currentItem.right + // x: mainItem.currentItem + // ? mainItem.currentItem.x - mainItem.originX + // : 0 + // width: mainItem.currentItem ? mainItem.currentItem.width : 0 + // // clip: true + // QT.Behavior on x { QT.NumberAnimation {duration: 100}} + // QT.Behavior on width {QT.NumberAnimation {duration: 100}} + // } } - Repeater { + QT.Repeater { model: mainItem.model Control.TabButton { required property string modelData - width: txtMeter. advanceWidth - - background: Item { - visible: false + required property int index + width: Math.min(txtMeter.advanceWidth, Math.max(50, mainItem.width - (x - mainItem.x))) + hoverEnabled: true + ToolTip { + visible: tabText.truncated && hovered + delay: 1000 + text: modelData } - contentItem: Text { + background: QT.Item { + anchors.fill: parent + + QT.Rectangle { + visible: mainItem.currentIndex === index + height: 4 + color: DefaultStyle.orangeColor + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.right + } + } + + contentItem: QT.Text { id: tabText anchors.fill: parent font.bold: true + color: DefaultStyle.defaultTextColor + font.family: DefaultStyle.defaultFont font.pointSize: DefaultStyle.tabButtonTextSize - text: txtMeter.text + elide: QT.Text.ElideRight + maximumLineCount: 1 + text: txtMeter.elidedText + // width: Math.min(txtMeter.advanceWidth, Math.max(50, mainItem.width - (x - mainItem.x))) bottomPadding: 5 - width: txtMeter.advanceWidth } - TextMetrics { + QT.TextMetrics { id: txtMeter font: tabText.font text: modelData diff --git a/Linphone/view/Item/Test/ItemsTest.qml b/Linphone/view/Item/Test/ItemsTest.qml new file mode 100644 index 000000000..f2113c52e --- /dev/null +++ b/Linphone/view/Item/Test/ItemsTest.qml @@ -0,0 +1,145 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.2 as Control +import QtQuick.Layouts +import Linphone + +Window { + width: 960 + height: 600 + visible: true + title: qsTr("Test") + ColumnLayout { + RowLayout { + ColumnLayout { + Text { + textItem.text: "Combobox with image" + } + ComboBox { + modelList: [ + {text: "item 1", img: AppIcons.info}, + {text: "item 2", img: AppIcons.info}, + {text: "item 3", img: AppIcons.info} + ] + } + } + ColumnLayout { + Text { + textItem.text: "Combobox without image" + } + ComboBox { + modelList: [ + {text: "item 1"}, + {text: "item 2"}, + {text: "item 3"} + ] + } + } + } + RowLayout { + Button { + text: "button" + } + Button { + capitalization: Font.AllUppercase + text: "capital button" + } + Button { + text: "inversed colors button" + inversedColors: true + } + Button { + text: "button with long tooltip" + hoverEnabled: true + ToolTip { + visible: parent.hovered + delay: 1000 + text: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices, arcu ut egestas tincidunt, nisi velit hendrerit nunc, malesuada feugiat enim ipsum eu tortor. Nam a nibh posuere, hendrerit lacus non, blandit nisi. Aliquam quis ipsum sed elit euismod consequat. Donec vitae bibendum justo. Vestibulum ornare quam sit amet velit vestibulum maximus. Curabitur venenatis convallis eros, vitae pulvinar turpis. Pellentesque consequat sodales massa, dapibus sollicitudin nunc ultricies consectetur. Cras id quam luctus, rhoncus neque vitae, aliquet nibh. Quisque placerat, ipsum eu tincidunt elementum, mauris augue rutrum sem, ac accumsan turpis tellus at turpis. Quisque sollicitudin velit vel libero rhoncus tempor. Maecenas ut turpis aliquet, auctor ante sit amet, volutpat orci. Donec purus quam, venenatis a massa in, placerat finibus nulla. Vestibulum ac nunc eu sapien sollicitudin convallis. Aliquam elit quam, scelerisque at diam sed, vestibulum dapibus ligula. Suspendisse lobortis, neque eget iaculis efficitur, lorem ligula posuere urna, id tempor ipsum mi sed lacus. Mauris faucibus fringilla dapibus. Pellentesque quis vulputate odio. Integer pretium, est non fermentum tristique, eros metus vulputate ante, eu laoreet nulla odio in justo. Mauris mollis nulla sit amet erat malesuada interdum. Donec pretium risus ut justo sodales, sed sollicitudin felis consequat. Praesent semper porta leo, nec finibus urna molestie porttitor. Etiam sagittis odio nec turpis consequat dignissim. Sed pellentesque sodales rutrum. Donec varius neque nec ex imperdiet interdum. Suspendisse dignissim elit et dignissim blandit. " + } + } + } + + Carousel { + itemsList: [ + Component { + ColumnLayout { + Text { + textItem.text: "item 1" + } + Text { + textItem.text: "item 1" + } + } + }, + Component { + RowLayout { + Text { + textItem.text: "item 2" + } + Text { + textItem.text: "item 2" + } + } + }, + Component { + Text { + textItem.text: "item 3" + } + }, + Component { + Text { + textItem.text: "item 4" + } + } + ] + } + + Text { + textItem.text: "default text" + } + Text { + id: testText + scaleLettersFactor: 2 + textItem.text: "scaled text" + } + RowLayout { + TextInput { + label: "mandatory text input" + defaultText: "default text" + mandatory: true + } + TextInput { + label: "password text input" + defaultText: "default text" + hidden: true + } + TextInput { + id: next + label: "text input with long long looooooooooooooooooooooooooooooooooooooooooooooooooooooooong label" + defaultText: "long long long default text" + } + TextInput { + label: "number text input" + validator: IntValidator{} + } + } + + ColumnLayout { + Text { + textItem.text: "4 digit inputs" + } + RowLayout { + Repeater { + model: 4 + DigitInput { + } + } + } + } + TabBar { + spacing: 10 + contentWidth: 400 + model: [qsTr("A"), qsTr("Lot"), qsTr("Of"), qsTr("Tab"), qsTr("Buttons (which one has a very long label)"), qsTr("For"), qsTr("The"), qsTr("Tab"), qsTr("Bar"), qsTr("To"), qsTr("Not"), qsTr("Have"), qsTr("Enough"), qsTr("Space"), qsTr("To"), qsTr("Display"), qsTr("Them"), qsTr("All")] + } + + } +} \ No newline at end of file diff --git a/Linphone/view/Item/Text.qml b/Linphone/view/Item/Text.qml index bbe13b4f9..69e5ca3e8 100644 --- a/Linphone/view/Item/Text.qml +++ b/Linphone/view/Item/Text.qml @@ -1,11 +1,21 @@ import QtQuick 2.7 -import QtQuick.Controls 2.2 as Control +import QtQuick.Layouts import Linphone -Text { +RowLayout { + id: mainItem + property alias textItem: innerItem property double scaleLettersFactor: 1. - font.family: DefaultStyle.defaultFont - font.pointSize: DefaultStyle.defaultFontPointSize - color: DefaultStyle.defaultTextColor - transform: Scale { yScale: scaleLettersFactor} -} + Text { + id: innerItem + font.family: DefaultStyle.defaultFont + font.pointSize: DefaultStyle.defaultFontPointSize + color: DefaultStyle.defaultTextColor + wrapMode: Text.Wrap + elide: Text.ElideRight + transformOrigin: Item.TopLeft + transform: Scale { + yScale: mainItem.scaleLettersFactor + } + } +} \ No newline at end of file diff --git a/Linphone/view/Item/TextInput.qml b/Linphone/view/Item/TextInput.qml index a547bc00e..21daf5686 100644 --- a/Linphone/view/Item/TextInput.qml +++ b/Linphone/view/Item/TextInput.qml @@ -18,16 +18,22 @@ ColumnLayout { Text { visible: label.length > 0 - verticalAlignment: Text.AlignVCenter - text: mainItem.label + (mainItem.mandatory ? "*" : "") - color: DefaultStyle.formItemLabelColor - font { + textItem.verticalAlignment: Text.AlignVCenter + textItem.text: mainItem.label + (mainItem.mandatory ? "*" : "") + textItem.color: DefaultStyle.formItemLabelColor + textItem.elide: Text.ElideRight + textItem.wrapMode: Text.Wrap + textItem.maximumLineCount: 1 + textItem.font { pointSize: DefaultStyle.formItemLabelSize + family: DefaultStyle.defaultFont bold: true } + Layout.preferredWidth: mainItem.textInputWidth } Rectangle { + id: input Component.onCompleted: { if (mainItem.fillWidth) Layout.fillWidth = true @@ -50,10 +56,6 @@ ColumnLayout { inputMethodHints: mainItem.inputMethodHints selectByMouse: true validator: mainItem.validator - // MouseArea { - // anchors.fill: parent - // // acceptedButtons: Qt.NoButton - // } background: Item { opacity: 0. } diff --git a/Linphone/view/Item/ToolTip.qml b/Linphone/view/Item/ToolTip.qml new file mode 100644 index 000000000..c128dae89 --- /dev/null +++ b/Linphone/view/Item/ToolTip.qml @@ -0,0 +1,22 @@ +import QtQuick 2.7 +import QtQuick.Controls as Control +import Linphone + +Control.ToolTip { + id: mainItem + delay: 1000 + clip: true + background: Rectangle { + id: tooltipBackground + opacity: 0.7 + color: DefaultStyle.tooltipBackgroundColor + radius: 15 + } + contentItem: Text { + textItem.text: mainItem.text + textItem.color: DefaultStyle.defaultTextColor + textItem.width: tooltipBackground.width + textItem.wrapMode: Text.Wrap + textItem.elide: Text.ElideRight + } +} \ No newline at end of file diff --git a/Linphone/view/Page/Login/LoginPage.qml b/Linphone/view/Page/Login/LoginPage.qml index 5cc94eabd..6e33dae24 100644 --- a/Linphone/view/Page/Login/LoginPage.qml +++ b/Linphone/view/Page/Login/LoginPage.qml @@ -14,9 +14,9 @@ LoginLayout { source: AppIcons.profile } Text { - text: "Login" - font.pointSize: DefaultStyle.title2FontPointSize - font.bold: true + textItem.text: "Login" + textItem.font.pointSize: DefaultStyle.title2FontPointSize + textItem.font.bold: true scaleLettersFactor: 1.1 } Item { @@ -24,8 +24,8 @@ LoginLayout { } Text { Layout.rightMargin: 15 - text: "No account yet ?" - font.pointSize: DefaultStyle.defaultTextSize + textItem.text: "No account yet ?" + textItem.font.pointSize: DefaultStyle.defaultTextSize } Button { Layout.alignment: Qt.AlignRight diff --git a/Linphone/view/Page/Login/RegisterCheckingPage.qml b/Linphone/view/Page/Login/RegisterCheckingPage.qml index 46de76a83..09b7793f6 100644 --- a/Linphone/view/Page/Login/RegisterCheckingPage.qml +++ b/Linphone/view/Page/Login/RegisterCheckingPage.qml @@ -29,12 +29,12 @@ LoginLayout { source: AppIcons.profile } Text { - text: { + textItem.text: { var completeString = (mainItem.email.length > 0) ? "email" : "phone number" text = "Register | Register with your " + completeString } - font.pointSize: DefaultStyle.title2FontPointSize - font.bold: true + textItem.font.pointSize: DefaultStyle.title2FontPointSize + textItem.font.bold: true scaleLettersFactor: 1.1 } Item { @@ -47,8 +47,8 @@ LoginLayout { Layout.fillHeight: true Text { Layout.alignment: Qt.AlignTop - font.bold: true - text: { + textItem.font.bold: true + textItem.text: { var completeString = (mainItem.email.length > 0) ? ("email" + mainItem.email) : ("phone number" + mainItem.phoneNumber) text = "We have sent a verification code on your " + completeString + "
Please enter the verification code below:" } @@ -77,8 +77,8 @@ LoginLayout { RowLayout { Text { Layout.rightMargin: 15 - text: "Didn't receive the code ?" - font.pointSize: DefaultStyle.defaultTextSize + textItem.text: "Didn't receive the code ?" + textItem.font.pointSize: DefaultStyle.defaultTextSize } Button { Layout.alignment: Qt.AlignRight diff --git a/Linphone/view/Page/Login/RegisterPage.qml b/Linphone/view/Page/Login/RegisterPage.qml index 7709b79bd..30fde7527 100644 --- a/Linphone/view/Page/Login/RegisterPage.qml +++ b/Linphone/view/Page/Login/RegisterPage.qml @@ -17,9 +17,9 @@ LoginLayout { source: AppIcons.profile } Text { - text: "Register" - font.pointSize: DefaultStyle.title2FontPointSize - font.bold: true + textItem.text: "Register" + textItem.font.pointSize: DefaultStyle.title2FontPointSize + textItem.font.bold: true scaleLettersFactor: 1.1 } Item { @@ -27,8 +27,8 @@ LoginLayout { } Text { Layout.rightMargin: 15 - text: "Already have an account ?" - font.pointSize: DefaultStyle.defaultTextSize + textItem.text: "Already have an account ?" + textItem.font.pointSize: DefaultStyle.defaultTextSize } Button { Layout.alignment: Qt.AlignRight @@ -89,14 +89,14 @@ LoginLayout { CheckBox { } Text { - text: "I would like to suscribe to the newsletter" + textItem.text: "I would like to suscribe to the newsletter" } } RowLayout { CheckBox { } Text { - text: "I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy." + textItem.text: "I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy." } } Button { @@ -158,14 +158,14 @@ LoginLayout { CheckBox { } Text { - text: "I would like to suscribe to the newsletter" + textItem.text: "I would like to suscribe to the newsletter" } } RowLayout { CheckBox { } Text { - text: "I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy." + textItem.text: "I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy." } } Button { diff --git a/Linphone/view/Page/Login/SIPLoginPage.qml b/Linphone/view/Page/Login/SIPLoginPage.qml index 80117dc5c..063e07997 100644 --- a/Linphone/view/Page/Login/SIPLoginPage.qml +++ b/Linphone/view/Page/Login/SIPLoginPage.qml @@ -28,9 +28,9 @@ LoginLayout { source: AppIcons.profile } Text { - text: "Use a SIP Account" - font.pointSize: DefaultStyle.title2FontPointSize - font.bold: true + textItem.text: "Use a SIP Account" + textItem.font.pointSize: DefaultStyle.title2FontPointSize + textItem.font.bold: true scaleLettersFactor: 1.1 } Item { @@ -38,8 +38,8 @@ LoginLayout { } Text { Layout.rightMargin: 15 - text: "No account yet ?" - font.pointSize: DefaultStyle.defaultTextSize + textItem.text: "No account yet ?" + textItem.font.pointSize: DefaultStyle.defaultTextSize } Button { Layout.alignment: Qt.AlignRight @@ -72,10 +72,10 @@ LoginLayout { Text { Layout.preferredWidth: 361 Layout.fillWidth: true - wrapMode: Text.WordWrap - color: DefaultStyle.darkGrayColor - font.pointSize: DefaultStyle.defaultTextSize - text: "

Some features require a Linphone account, such as group messaging, video conferences...

+ textItem.wrapMode: Text.WordWrap + textItem.color: DefaultStyle.darkGrayColor + textItem.font.pointSize: DefaultStyle.defaultTextSize + textItem.text: "

Some features require a Linphone account, such as group messaging, video conferences...

These features are hidden when you register with a third party SIP account.

To enable it in a commercial projet, please contact us.

" } diff --git a/Linphone/view/Page/Login/WelcomePage.qml b/Linphone/view/Page/Login/WelcomePage.qml index 43a46f871..b051f657c 100644 --- a/Linphone/view/Page/Login/WelcomePage.qml +++ b/Linphone/view/Page/Login/WelcomePage.qml @@ -11,20 +11,20 @@ LoginLayout { titleContent: RowLayout { Text { id: welcome - text: "Welcome" - color: DefaultStyle.titleColor - font.pointSize: DefaultStyle.title1FontPointSize - font.bold: true + textItem.text: "Welcome" + textItem.color: DefaultStyle.titleColor + textItem.font.pointSize: DefaultStyle.title1FontPointSize + textItem.font.bold: true scaleLettersFactor: 1.1 } Text { Layout.alignment: Qt.AlignBottom Layout.leftMargin: 10 Layout.bottomMargin: 5 - color: DefaultStyle.titleColor - text: "in Linphone" - font.pointSize: 18 - font.bold: true + textItem.color: DefaultStyle.titleColor + textItem.text: "in Linphone" + textItem.font.pointSize: 18 + textItem.font.bold: true scaleLettersFactor: 1.1 } Item { @@ -42,8 +42,8 @@ LoginLayout { radius: 48 } contentItem: Text { - text: "Skip" - font.underline: true + textItem.text: "Skip" + textItem.font.underline: true } onClicked: { console.debug("[LoginItem] User: Click skip") @@ -65,61 +65,28 @@ LoginLayout { } Carousel { id: carousel - itemsList: [carousel0, carousel1, carousel2] - Component { - id: carousel0 + itemsCount: slideRepeater.count + itemsList: Repeater { + id: slideRepeater + model: [ + {title: "Linphone", text: "Une application de communication sécurisée,
open source et française."}, + {title: "Sécurisé", text: "Vos communications sont en sécurité grâce aux
Chiffrement de bout en bout."}, + {title: "Open Source", text: "Une application open source et un service gratuit depuis 2001"}, + ] Item { ColumnLayout { anchors.verticalCenter: parent.verticalCenter Text { - text: "Linphone" - font.bold: true - font.pixelSize: 20 + textItem.text: modelData.title + textItem.font.bold: true + textItem.font.pixelSize: 20 scaleLettersFactor: 1.1 } Text { Layout.maximumWidth: 361 - wrapMode: Text.WordWrap - font.pixelSize: 11 - text: "Une application de communication sécurisée,
open source et française. " - } - } - } - } - Component { - id: carousel1 - Item { - ColumnLayout { - anchors.verticalCenter: parent.verticalCenter - Text { - text: "Sécurisé" - font.bold: true - font.pixelSize: 20 - } - Text { - Layout.maximumWidth: 361 - wrapMode: Text.WordWrap - font.pixelSize: 11 - text: "Vos communications sont en sécurité grâce aux
Chiffrement de bout en bout." - } - } - } - } - Component { - id: carousel2 - Item { - ColumnLayout { - anchors.verticalCenter: parent.verticalCenter - Text { - text: "Open Source" - font.bold: true - font.pixelSize: 20 - } - Text { - Layout.maximumWidth: 361 - wrapMode: Text.WordWrap - font.pixelSize: 11 - text: "Une application open source et un service gratuit depuis 2001" + textItem.wrapMode: Text.WordWrap + textItem.font.pixelSize: 11 + textItem.text: modelData.text } } } @@ -132,7 +99,7 @@ LoginLayout { Layout.bottomMargin: 20 Layout.leftMargin: 361 - width Layout.alignment: Qt.AlignBottom - text: carousel.currentIndex < (carousel.itemsList.length - 1) ? "Next" : "Start" + text: carousel.currentIndex < (carousel.itemsCount - 1) ? "Next" : "Start" onClicked: { if (carousel.currentIndex < 2) carousel.goToSlide(carousel.currentIndex + 1); else mainItem.startButtonPressed(); diff --git a/Linphone/view/Style/DefaultStyle.qml b/Linphone/view/Style/DefaultStyle.qml index e93322303..c78d8281c 100644 --- a/Linphone/view/Style/DefaultStyle.qml +++ b/Linphone/view/Style/DefaultStyle.qml @@ -25,6 +25,8 @@ QtObject { property color comboBoxHighlightColor: "#C0D1D9" property color comboBoxHoverColor: "#6C7A87" + property color tooltipBackgroundColor: "#DFECF2" + property color digitInputFocusedColor: "#FE5E00" property color digitInputColor: "#6C7A87"