diff --git a/tests/assets/images/add_disabled.svg b/tests/assets/images/add_disabled.svg new file mode 100644 index 000000000..66bc70fa1 --- /dev/null +++ b/tests/assets/images/add_disabled.svg @@ -0,0 +1,14 @@ + + + + add_disabled + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/add_hovered.svg b/tests/assets/images/add_hovered.svg new file mode 100644 index 000000000..549896a26 --- /dev/null +++ b/tests/assets/images/add_hovered.svg @@ -0,0 +1,14 @@ + + + + add_over + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/add_normal.svg b/tests/assets/images/add_normal.svg new file mode 100644 index 000000000..20a647c8c --- /dev/null +++ b/tests/assets/images/add_normal.svg @@ -0,0 +1,14 @@ + + + + add_default + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/add_pressed.svg b/tests/assets/images/add_pressed.svg new file mode 100644 index 000000000..d64278c15 --- /dev/null +++ b/tests/assets/images/add_pressed.svg @@ -0,0 +1,14 @@ + + + + add_clic + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/tests/resources.qrc b/tests/resources.qrc index f4feab72c..5742c3572 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -1,5 +1,9 @@ + assets/images/add_disabled.svg + assets/images/add_hovered.svg + assets/images/add_normal.svg + assets/images/add_pressed.svg assets/images/attachment_hovered.svg assets/images/attachment_normal.svg assets/images/attachment_pressed.svg diff --git a/tests/src/components/contacts/ContactModel.cpp b/tests/src/components/contacts/ContactModel.cpp index f13612947..13aadd793 100644 --- a/tests/src/components/contacts/ContactModel.cpp +++ b/tests/src/components/contacts/ContactModel.cpp @@ -31,6 +31,15 @@ QString ContactModel::getUsername () const { ); } +bool ContactModel::setUsername (const QString &username) { + if (username.length() == 0) + return false; + + return !m_linphone_friend->setName( + Utils::qStringToLinphoneString(username) + ); +} + QString ContactModel::getAvatar () const { // Find desktop avatar. list > photos = diff --git a/tests/src/components/contacts/ContactModel.hpp b/tests/src/components/contacts/ContactModel.hpp index ade9ab88a..e35837e1a 100644 --- a/tests/src/components/contacts/ContactModel.hpp +++ b/tests/src/components/contacts/ContactModel.hpp @@ -17,6 +17,7 @@ class ContactModel : public QObject { Q_PROPERTY( QString username READ getUsername + WRITE setUsername NOTIFY contactUpdated ); @@ -56,6 +57,7 @@ signals: private: QString getUsername () const; + bool setUsername (const QString &username); QString getAvatar () const; bool setAvatar (const QString &path); diff --git a/tests/ui/modules/Common/Form/ActionButton.qml b/tests/ui/modules/Common/Form/ActionButton.qml index d36ab6248..aac19d8f5 100644 --- a/tests/ui/modules/Common/Form/ActionButton.qml +++ b/tests/ui/modules/Common/Form/ActionButton.qml @@ -7,24 +7,32 @@ import Common 1.0 // An animated (or not) button with image(s). // =================================================================== -Button { - id: button +Item { + id: wrappedButton + property bool enabled: true property bool useStates: true property int iconSize // Optionnal. + readonly property alias hovered: button.hovered // If `useStates` = true, the used icons are: // `icon`_pressed, `icon`_hovered and `icon`_normal. property string icon + signal clicked + // ----------------------------------------------------------------- function _getIcon () { if (!useStates) { - return button.icon + return wrappedButton.icon } - return button.icon + ( + if (!wrappedButton.enabled) { + return wrappedButton.icon + '_disabled' + } + + return wrappedButton.icon + ( button.down ? '_pressed' : (button.hovered ? '_hovered' : '_normal') @@ -33,21 +41,28 @@ Button { // ----------------------------------------------------------------- - background: Rectangle { - color: 'transparent' - } - hoverEnabled: true - height: iconSize || parent.iconSize || parent.height width: iconSize || parent.iconSize || parent.height - Icon { - id: icon + Button { + id: button - anchors.centerIn: parent - icon: _getIcon() - iconSize: parent.iconSize || ( - parent.width > parent.height ? parent.height : parent.width - ) + anchors.fill: parent + background: Rectangle { + color: 'transparent' + } + hoverEnabled: true + + onClicked: wrappedButton.enabled && wrappedButton.clicked() + + Icon { + id: icon + + anchors.centerIn: parent + icon: _getIcon() + iconSize: parent.iconSize || ( + parent.width > parent.height ? parent.height : parent.width + ) + } } } diff --git a/tests/ui/modules/Common/Form/ActionSwitch.qml b/tests/ui/modules/Common/Form/ActionSwitch.qml index 30a6ea9ae..cd373ab3a 100644 --- a/tests/ui/modules/Common/Form/ActionSwitch.qml +++ b/tests/ui/modules/Common/Form/ActionSwitch.qml @@ -4,11 +4,10 @@ import QtQuick 2.7 Item { property alias useStates: actionButton.useStates + property bool enabled: true property int iconSize // Optionnal. property string icon - property bool enabled: true - signal clicked // ----------------------------------------------------------------- diff --git a/tests/ui/modules/Common/Form/ListForm.qml b/tests/ui/modules/Common/Form/ListForm.qml index d33c9cd9e..5b9d7a33a 100644 --- a/tests/ui/modules/Common/Form/ListForm.qml +++ b/tests/ui/modules/Common/Form/ListForm.qml @@ -10,15 +10,16 @@ RowLayout { id: listForm property alias model: values.model + property alias placeholder: placeholder.text property alias title: text.text - property string placeholder + + // ----------------------------------------------------------------- function _addValue (value) { - if ( - model.count === 0 || - model.get(model.count - 1).$value.length !== 0 - ) { - model.append({ $value: value }) + model.append({ $value: value }) + + if (value.length === 0) { + addButton.enabled = false } } @@ -28,86 +29,102 @@ RowLayout { } else { model.set(index, { $value: text }) } + + addButton.enabled = true } + // ----------------------------------------------------------------- + spacing: 0 + // ----------------------------------------------------------------- // Title area. + // ----------------------------------------------------------------- + RowLayout { Layout.alignment: Qt.AlignTop Layout.preferredHeight: ListFormStyle.lineHeight spacing: ListFormStyle.titleArea.spacing - // Button: Add item in list. ActionButton { - Layout.preferredHeight: ListFormStyle.titleArea.iconSize - Layout.preferredWidth: ListFormStyle.titleArea.iconSize - icon: 'add_field' + id: addButton + + icon: 'add' + iconSize: ListFormStyle.titleArea.iconSize onClicked: _addValue('') } - // Title text. Text { id: text Layout.preferredWidth: ListFormStyle.titleArea.text.width color: ListFormStyle.titleArea.text.color - font.pointSize: ListFormStyle.titleArea.text.fontSize + elide: Text.ElideRight + + font { + bold: true + pointSize: ListFormStyle.titleArea.text.fontSize + } } } + // ----------------------------------------------------------------- + // Placeholder. + // ----------------------------------------------------------------- + + Text { + id: placeholder + + Layout.fillWidth: true + Layout.preferredHeight: ListFormStyle.lineHeight + color: ListFormStyle.value.placeholder.color + + font { + italic: true + pointSize: ListFormStyle.value.placeholder.fontSize + } + + padding: ListFormStyle.value.text.padding + visible: model.count === 0 + verticalAlignment: Text.AlignVCenter + } + + // ----------------------------------------------------------------- // Values. + // ----------------------------------------------------------------- + ListView { id: values Layout.fillWidth: true Layout.preferredHeight: count * ListFormStyle.lineHeight interactive: false + visible: count > 0 delegate: Item { implicitHeight: textEdit.height width: parent.width - // Background. Rectangle { color: textEdit.activeFocus ? ListFormStyle.value.backgroundColor.focused : ListFormStyle.value.backgroundColor.normal - implicitHeight: textEdit.height - implicitWidth: textEdit.width - } - - // Placeholder. - Text { anchors.fill: textEdit - color: ListFormStyle.value.placeholder.color - - font { - italic: true - pointSize: ListFormStyle.value.placeholder.fontSize - } - - padding: textEdit.padding - text: textEdit.text.length === 0 && !textEdit.activeFocus - ? listForm.placeholder - : '' - verticalAlignment: Text.AlignVCenter } - // Input. TextEdit { id: textEdit color: activeFocus ? ListFormStyle.value.text.color.focused : ListFormStyle.value.text.color.normal - font.bold: !activeFocus - height: ListFormStyle.lineHeight padding: ListFormStyle.value.text.padding selectByMouse: true text: $value verticalAlignment: TextEdit.AlignVCenter + + height: ListFormStyle.lineHeight width: !activeFocus ? parent.width : contentWidth + padding * 2 @@ -116,15 +133,18 @@ RowLayout { Keys.onReturnPressed: focus = false onEditingFinished: _handleEditionFinished(index, text) + + InvertedMouseArea { + anchors.fill: parent + enabled: textEdit.activeFocus + onPressed: textEdit.focus = false + } } - // Handle click outside `TextEdit` instance. - InvertedMouseArea { - enabled: textEdit.activeFocus - height: textEdit.height - width: textEdit.width - - onPressed: textEdit.focus = false + Component.onCompleted: { + if ($value.length === 0) { + textEdit.forceActiveFocus() + } } } } diff --git a/tests/ui/modules/Common/Image/RoundedImage.qml b/tests/ui/modules/Common/Image/RoundedImage.qml index 1e9ea5c35..cc644118d 100644 --- a/tests/ui/modules/Common/Image/RoundedImage.qml +++ b/tests/ui/modules/Common/Image/RoundedImage.qml @@ -6,9 +6,9 @@ Item { id: item property alias source: image.source - property alias status: image.status // READONLY!!! property color backgroundColor: '#00000000' property color foregroundColor: '#00000000' + readonly property alias status: image.status Item { id: imageContainer diff --git a/tests/ui/modules/Common/Styles/Form/ListFormStyle.qml b/tests/ui/modules/Common/Styles/Form/ListFormStyle.qml index 871d50ea6..173c6c7a6 100644 --- a/tests/ui/modules/Common/Styles/Form/ListFormStyle.qml +++ b/tests/ui/modules/Common/Styles/Form/ListFormStyle.qml @@ -15,7 +15,7 @@ QtObject { } property QtObject placeholder: QtObject { - property color color: Colors.d + property color color: Colors.w property int fontSize: 10 } @@ -24,18 +24,18 @@ QtObject { property QtObject color: QtObject { property color focused: Colors.l - property color normal: Colors.d + property color normal: Colors.r } } } property QtObject titleArea: QtObject { property int spacing: 10 - property int iconSize: 16 + property int iconSize: 18 property QtObject text: QtObject { - property color color: Colors.l - property int fontSize: 10 + property color color: Colors.j + property int fontSize: 9 property int width: 130 } } diff --git a/tests/ui/views/App/MainWindow/ContactEdit.qml b/tests/ui/views/App/MainWindow/ContactEdit.qml index e739f23c1..f977c873e 100644 --- a/tests/ui/views/App/MainWindow/ContactEdit.qml +++ b/tests/ui/views/App/MainWindow/ContactEdit.qml @@ -21,8 +21,6 @@ ColumnLayout { sipAddress ) || sipAddress - property var _info: {} - // ----------------------------------------------------------------- function _removeContact () { @@ -82,10 +80,8 @@ ColumnLayout { spacing: ContactEditStyle.infoBar.spacing ActionButton { - Layout.preferredHeight: ContactEditStyle.infoBar.avatarSize - Layout.preferredWidth: ContactEditStyle.infoBar.avatarSize - icon: 'contact_card_photo' + iconSize: ContactEditStyle.infoBar.avatarSize onClicked: avatarChooser.open() @@ -141,6 +137,7 @@ ColumnLayout { Flickable { Layout.fillHeight: true Layout.fillWidth: true + Layout.topMargin: 40 ScrollBar.vertical: ForceScrollBar {} boundsBehavior: Flickable.StopAtBounds