diff --git a/tests/ui/modules/Common/Colors.qml b/tests/ui/modules/Common/Colors.qml index 801d68025..2c3592db8 100644 --- a/tests/ui/modules/Common/Colors.qml +++ b/tests/ui/modules/Common/Colors.qml @@ -38,4 +38,5 @@ QtObject { property color u: '#B1B1B1' property color v: '#E2E2E2' property color w: '#A1A1A1' + property color x: '#96A5B1' } diff --git a/tests/ui/modules/Common/Menu/Menu.qml b/tests/ui/modules/Common/Menu/Menu.qml index dfb3a3cbc..c59d74fb3 100644 --- a/tests/ui/modules/Common/Menu/Menu.qml +++ b/tests/ui/modules/Common/Menu/Menu.qml @@ -8,7 +8,7 @@ import Common.Styles 1.0 // Responsive flat menu with visual indicators. // =================================================================== -ColumnLayout { +Rectangle { id: menu property int entryHeight @@ -19,78 +19,95 @@ ColumnLayout { signal entrySelected (int entry) - spacing: MenuStyle.spacing + // ----------------------------------------------------------------- - Repeater { - model: entries + function resetSelectedEntry () { + _selectedEntry = -1 + } - Rectangle { - color: mouseArea.pressed - ? MenuStyle.entry.color.pressed - : (_selectedEntry === index - ? MenuStyle.entry.color.selected - : (mouseArea.containsMouse - ? MenuStyle.entry.color.hovered - : MenuStyle.entry.color.normal - ) - ) - height: menu.entryHeight - width: menu.entryWidth + // ----------------------------------------------------------------- - RowLayout { - anchors { - left: parent.left - leftMargin: MenuStyle.entry.leftMargin - right: parent.right - rightMargin: MenuStyle.entry.rightMargin - verticalCenter: parent.verticalCenter - } + color: MenuStyle.backgroundColor + implicitHeight: content.height + width: entryWidth - spacing: MenuStyle.entry.spacing + ColumnLayout { + id: content - Icon { - Layout.preferredHeight: MenuStyle.entry.iconSize - Layout.preferredWidth: MenuStyle.entry.iconSize - icon: modelData.icon + ( - _selectedEntry === index - ? '_selected' - : '_normal' - ) - } + anchors.centerIn: parent + spacing: MenuStyle.spacing - Text { - Layout.fillWidth: true - color: _selectedEntry === index - ? MenuStyle.entry.text.color.selected - : MenuStyle.entry.text.color.normal - font.pointSize: MenuStyle.entry.text.fontSize - height: parent.height - text: modelData.entryName - verticalAlignment: Text.AlignVCenter - } - } + Repeater { + model: entries Rectangle { - anchors { - left: parent.left + color: mouseArea.pressed + ? MenuStyle.entry.color.pressed + : (_selectedEntry === index + ? MenuStyle.entry.color.selected + : (mouseArea.containsMouse + ? MenuStyle.entry.color.hovered + : MenuStyle.entry.color.normal + ) + ) + height: menu.entryHeight + width: menu.entryWidth + + RowLayout { + anchors { + left: parent.left + leftMargin: MenuStyle.entry.leftMargin + right: parent.right + rightMargin: MenuStyle.entry.rightMargin + verticalCenter: parent.verticalCenter + } + + spacing: MenuStyle.entry.spacing + + Icon { + Layout.preferredHeight: MenuStyle.entry.iconSize + Layout.preferredWidth: MenuStyle.entry.iconSize + icon: modelData.icon + ( + _selectedEntry === index + ? '_selected' + : '_normal' + ) + } + + Text { + Layout.fillWidth: true + color: _selectedEntry === index + ? MenuStyle.entry.text.color.selected + : MenuStyle.entry.text.color.normal + font.pointSize: MenuStyle.entry.text.fontSize + height: parent.height + text: modelData.entryName + verticalAlignment: Text.AlignVCenter + } } - height: parent.height - color: _selectedEntry === index - ? MenuStyle.entry.indicator.color - : 'transparent' - width: MenuStyle.entry.indicator.width - } + Rectangle { + anchors { + left: parent.left + } - MouseArea { - id: mouseArea + height: parent.height + color: _selectedEntry === index + ? MenuStyle.entry.indicator.color + : 'transparent' + width: MenuStyle.entry.indicator.width + } - anchors.fill: parent - hoverEnabled: true + MouseArea { + id: mouseArea - onClicked: { - _selectedEntry = index - entrySelected(index) + anchors.fill: parent + hoverEnabled: true + + onClicked: { + _selectedEntry = index + entrySelected(index) + } } } } diff --git a/tests/ui/modules/Common/Styles/Menu/MenuStyle.qml b/tests/ui/modules/Common/Styles/Menu/MenuStyle.qml index 47a71e71f..93999d6ab 100644 --- a/tests/ui/modules/Common/Styles/Menu/MenuStyle.qml +++ b/tests/ui/modules/Common/Styles/Menu/MenuStyle.qml @@ -6,7 +6,8 @@ import Common 1.0 // =================================================================== QtObject { - property int spacing: 0 + property int spacing: 1 + property color backgroundColor: Colors.x property QtObject entry: QtObject { property int iconSize: 24 diff --git a/tests/ui/views/App/MainWindow/MainWindow.qml b/tests/ui/views/App/MainWindow/MainWindow.qml index 05cf296fe..70a1784e8 100644 --- a/tests/ui/views/App/MainWindow/MainWindow.qml +++ b/tests/ui/views/App/MainWindow/MainWindow.qml @@ -126,8 +126,10 @@ ApplicationWindow { spacing: 0 Menu { + id: menu + entryHeight: MainWindowStyle.menu.entryHeight - entryWidth: parent.width + entryWidth: MainWindowStyle.menu.width entries: [{ entryName: qsTr('homeEntry'), @@ -156,7 +158,10 @@ ApplicationWindow { Layout.fillWidth: true model: ContactsListModel {} // Use History list. - onClicked: setView('Conversation') + onClicked: { + menu.resetSelectedEntry() + setView('Conversation') + } } }