Rename components.

qml/Contact.qml

@@ -0,0 +1,20 @@
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import "qrc:/qml/form"
+
+Page {
+    property var contactListModel
+
+    ListForm {
+        id: roomListForm
+        height: parent.height
+        width: 320
+        listModel: roomListModel
+    }
+
+    DetailForm {
+        id: detailForm
+        anchors.fill: parent
+        anchors.leftMargin: roomListForm.width
+    }
+}

qml/Room.qml

@@ -5,7 +5,7 @@ import "qrc:/qml/form"
 Page {
     property var roomListModel
 
-    RoomListForm {
+    ListForm {
         id: roomListForm
         height: parent.height
         width: 320

qml/component/ImageStatus.qml

@@ -3,6 +3,8 @@ import QtQuick.Controls 2.3
 import QtGraphicalEffects 1.0
 
 Image {
+    property bool statusIndicator
+
     id: avatar
 
     mipmap: true
@@ -30,5 +32,6 @@ Image {
         color: "transparent"
         border.color: "#4caf50"
         border.width: 4
+        visible: statusIndicator
     }
 }

qml/main.qml

@@ -51,6 +51,7 @@ ApplicationWindow {
                     height: parent.width
                     source: "qrc:/asset/img/avatar.png"
                     anchors.horizontalCenter: parent.horizontalCenter
+                    statusIndicator: true
                 }
 
                 page: Room {
@@ -80,6 +81,21 @@ ApplicationWindow {
                 }
             }
 
+            ButtonDelegate {
+                contentItem: Text {
+                    text: "\ue5d2"
+                    font.pointSize: 16
+                    font.family: materialFont.name
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+                page: Contact {
+                    id: contactPage
+                }
+            }
+
             ButtonDelegate {
                 contentItem: Text {
                     text: "\ue8b8"

res.qrc

@@ -11,8 +11,9 @@
         <file>qml/component/ImageStatus.qml</file>
         <file>qml/component/SideNav.qml</file>
         <file>qml/form/RoomForm.qml</file>
-        <file>qml/form/RoomListForm.qml</file>
         <file>qml/Room.qml</file>
-        <file>qml/form/RoomDetailForm.qml</file>
+        <file>qml/form/DetailForm.qml</file>
+        <file>qml/form/ListForm.qml</file>
+        <file>qml/Contact.qml</file>
     </qresource>
 </RCC>