Commit af0c3d19 authored by Ronan Abhamon's avatar Ronan Abhamon

feat(Menu): supports background

parent cc4e0252
...@@ -38,4 +38,5 @@ QtObject { ...@@ -38,4 +38,5 @@ QtObject {
property color u: '#B1B1B1' property color u: '#B1B1B1'
property color v: '#E2E2E2' property color v: '#E2E2E2'
property color w: '#A1A1A1' property color w: '#A1A1A1'
property color x: '#96A5B1'
} }
...@@ -8,7 +8,7 @@ import Common.Styles 1.0 ...@@ -8,7 +8,7 @@ import Common.Styles 1.0
// Responsive flat menu with visual indicators. // Responsive flat menu with visual indicators.
// =================================================================== // ===================================================================
ColumnLayout { Rectangle {
id: menu id: menu
property int entryHeight property int entryHeight
...@@ -19,78 +19,95 @@ ColumnLayout { ...@@ -19,78 +19,95 @@ ColumnLayout {
signal entrySelected (int entry) signal entrySelected (int entry)
spacing: MenuStyle.spacing // -----------------------------------------------------------------
Repeater {
model: entries
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
}
spacing: MenuStyle.entry.spacing function resetSelectedEntry () {
_selectedEntry = -1
}
Icon { // -----------------------------------------------------------------
Layout.preferredHeight: MenuStyle.entry.iconSize
Layout.preferredWidth: MenuStyle.entry.iconSize
icon: modelData.icon + (
_selectedEntry === index
? '_selected'
: '_normal'
)
}
Text { color: MenuStyle.backgroundColor
Layout.fillWidth: true implicitHeight: content.height
color: _selectedEntry === index width: entryWidth
? MenuStyle.entry.text.color.selected
: MenuStyle.entry.text.color.normal ColumnLayout {
font.pointSize: MenuStyle.entry.text.fontSize id: content
height: parent.height
text: modelData.entryName anchors.centerIn: parent
verticalAlignment: Text.AlignVCenter spacing: MenuStyle.spacing
}
} Repeater {
model: entries
Rectangle { Rectangle {
anchors { color: mouseArea.pressed
left: parent.left ? 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 Rectangle {
color: _selectedEntry === index anchors {
? MenuStyle.entry.indicator.color left: parent.left
: 'transparent' }
width: MenuStyle.entry.indicator.width
} height: parent.height
color: _selectedEntry === index
? MenuStyle.entry.indicator.color
: 'transparent'
width: MenuStyle.entry.indicator.width
}
MouseArea { MouseArea {
id: mouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: { onClicked: {
_selectedEntry = index _selectedEntry = index
entrySelected(index) entrySelected(index)
}
} }
} }
} }
......
...@@ -6,7 +6,8 @@ import Common 1.0 ...@@ -6,7 +6,8 @@ import Common 1.0
// =================================================================== // ===================================================================
QtObject { QtObject {
property int spacing: 0 property int spacing: 1
property color backgroundColor: Colors.x
property QtObject entry: QtObject { property QtObject entry: QtObject {
property int iconSize: 24 property int iconSize: 24
......
...@@ -126,8 +126,10 @@ ApplicationWindow { ...@@ -126,8 +126,10 @@ ApplicationWindow {
spacing: 0 spacing: 0
Menu { Menu {
id: menu
entryHeight: MainWindowStyle.menu.entryHeight entryHeight: MainWindowStyle.menu.entryHeight
entryWidth: parent.width entryWidth: MainWindowStyle.menu.width
entries: [{ entries: [{
entryName: qsTr('homeEntry'), entryName: qsTr('homeEntry'),
...@@ -156,7 +158,10 @@ ApplicationWindow { ...@@ -156,7 +158,10 @@ ApplicationWindow {
Layout.fillWidth: true Layout.fillWidth: true
model: ContactsListModel {} // Use History list. model: ContactsListModel {} // Use History list.
onClicked: setView('Conversation') onClicked: {
menu.resetSelectedEntry()
setView('Conversation')
}
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment