Merge pull request #12 from status-im/chats

initial chats/contacts layout; state & messages

main.qml

@@ -7,7 +7,7 @@ ApplicationWindow {
     id: applicationWindow
     width: 1024
     height: 768
-    title: "JSON RPC Caller"
+    title: "Nim Status Client"
     visible: true
 
     RowLayout {
@@ -160,81 +160,109 @@ ApplicationWindow {
                     height: parent.height
                     Layout.minimumWidth: 200
 
-                    Text {
+                    ColumnLayout {
-                        id: element
+                        anchors.rightMargin: 0
-                        x: 772
+                        anchors.fill: parent
-                        text: qsTr("Chat")
-                        anchors.top: parent.top
-                        anchors.topMargin: 17
-                        font.bold: true
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        font.pixelSize: 17
-                    }
 
-                    Rectangle {
+                        Item {
-                        id: searchBox
+                            Layout.preferredHeight: 100
-                        height: 36
+                            Layout.fillHeight: false
-                        color: "#EEF2F5"
+                            Layout.fillWidth: true
-                        anchors.top: parent.top
-                        anchors.topMargin: 59
-                        radius: 8
-                        anchors.right: parent.right
-                        anchors.rightMargin: 55
-                        anchors.left: parent.left
-                        anchors.leftMargin: 16
 
-                        TextField {
+                            Text {
-                            id: searchText
+                                id: element
-                            placeholderText: qsTr("Search")
+                                x: 772
-                            anchors.left: parent.left
+                                text: qsTr("Chat")
-                            anchors.leftMargin: 32
+                                anchors.top: parent.top
-                            anchors.verticalCenter: parent.verticalCenter
+                                anchors.topMargin: 17
-                            font.pixelSize: 12
+                                font.bold: true
-                            background: {
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                font.pixelSize: 17
+                            }
+
+                            Rectangle {
+                                id: searchBox
+                                height: 36
+                                color: "#EEF2F5"
+                                anchors.top: parent.top
+                                anchors.topMargin: 59
+                                radius: 8
+                                anchors.right: parent.right
+                                anchors.rightMargin: 55
+                                anchors.left: parent.left
+                                anchors.leftMargin: 16
+
+                                TextField {
+                                    id: searchText
+                                    placeholderText: qsTr("Search")
+                                    anchors.left: parent.left
+                                    anchors.leftMargin: 32
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    font.pixelSize: 12
+                                    background: {
+                                    }
+                                }
+
+                                Image {
+                                    id: image4
+                                    anchors.left: parent.left
+                                    anchors.leftMargin: 10
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    fillMode: Image.PreserveAspectFit
+                                    source: "img/search.svg"
+                                }
+
+                                MouseArea {
+                                    id: mouseArea
+                                    anchors.fill: parent
+                                    onClicked : {
+                                        searchText.forceActiveFocus(Qt.MouseFocusReason)
+                                    }
+                                }
+                            }
+
+                            Rectangle {
+                                id: addChat
+                                width: 36
+                                height: 36
+                                color: "#4360DF"
+                                radius: 50
+                                anchors.right: parent.right
+                                anchors.rightMargin: 9
+                                anchors.top: parent.top
+                                anchors.topMargin: 59
+
+                                Text {
+                                    id: element3
+                                    color: "#ffffff"
+                                    text: qsTr("+")
+                                    anchors.verticalCenterOffset: -1
+                                    anchors.horizontalCenterOffset: 1
+                                    anchors.horizontalCenter: parent.horizontalCenter
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    lineHeight: 1
+                                    fontSizeMode: Text.FixedSize
+                                    font.bold: true
+                                    font.pixelSize: 28
+                                }
                             }
                         }
 
-                        Image {
+                        Item {
-                            id: image4
+                            Layout.fillHeight: true
-                            anchors.left: parent.left
+                            Layout.fillWidth: true
-                            anchors.leftMargin: 10
-                            anchors.verticalCenter: parent.verticalCenter
-                            fillMode: Image.PreserveAspectFit
-                            source: "img/search.svg"
-                        }
 
-                        MouseArea {
+                            Component {
-                            id: mouseArea
+                                id: chatViewDelegate
-                            anchors.fill: parent
+                                Label { text: "Name:" + name }
-                            onClicked : {
-                                searchText.forceActiveFocus(Qt.MouseFocusReason)
                             }
-                        }
-                    }
 
-                    Rectangle {
+                            ListView {
-                        id: addChat
+                                id: listView
-                        width: 36
+                                anchors.fill: parent
-                        height: 36
+                                model: chatsModel
-                        color: "#4360DF"
+                                delegate: chatViewDelegate
-                        radius: 50
+                            }
-                        anchors.right: parent.right
-                        anchors.rightMargin: 9
-                        anchors.top: parent.top
-                        anchors.topMargin: 59
-
-                        Text {
-                            id: element3
-                            color: "#ffffff"
-                            text: qsTr("+")
-                            anchors.verticalCenterOffset: -1
-                            anchors.horizontalCenterOffset: 1
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            anchors.verticalCenter: parent.verticalCenter
-                            lineHeight: 1
-                            fontSizeMode: Text.FixedSize
-                            font.bold: true
-                            font.pixelSize: 28
                         }
                     }
                 }
@@ -271,14 +299,14 @@ ApplicationWindow {
 
             }
 
-                ColumnLayout {
+            ColumnLayout {
-                    anchors.fill: parent
+                anchors.fill: parent
 
-                    RowLayout {
+                RowLayout {
-                        Layout.fillHeight: true
+                    Layout.fillHeight: true
-                        TextArea { id: accountResult; Layout.fillWidth: true; text: logic.accountResult; readOnly: true }
+                    TextArea { id: accountResult; Layout.fillWidth: true; text: logic.accountResult; readOnly: true }
-                    }
                 }
+            }
 
             Item {
 
@@ -292,6 +320,6 @@ ApplicationWindow {
 
 /*##^##
 Designer {
-    D{i:9;anchors_height:40;anchors_width:40}D{i:19;anchors_y:0}D{i:23;anchors_height:100;anchors_width:100}
+    D{i:9;anchors_height:40;anchors_width:40}
 }
 ##^##*/

src/applicationLogic.nim

@@ -3,7 +3,6 @@ import status
 import libstatus
 import json
 
-
 var signalHandler: SignalCallback = proc(p0: cstring): void =
   setupForeignThreadGc()
 
@@ -20,6 +19,7 @@ QtObject:
     app: QApplication
     callResult: string
     accountResult: string
+    # chats: seq[ChatView]
 
   # Constructor
   proc newApplicationLogic*(app: QApplication): ApplicationLogic =
@@ -37,8 +37,6 @@ QtObject:
     result.accountResult = status.queryAccounts()
     status.subscribeToTest()    
 
-
-
   # ¯\_(ツ)_/¯ dunno what is this
   proc setup(self: ApplicationLogic) =
     # discard status.onMessage(self.onMessage)
@@ -98,4 +96,4 @@ QtObject:
     notify = callResultChanged
 
   # This class has the metaObject property available which lets 
-  # access all the QProperties which are stored as QVariants
+  # access all the QProperties which are stored as QVariants

src/chats.nim

@@ -0,0 +1,38 @@
+import NimQml
+import Tables
+
+type
+  RoleNames {.pure.} = enum
+    Name = UserRole + 1,
+
+QtObject:
+  type
+    ChatsModel* = ref object of QAbstractListModel
+      names*: seq[string]
+
+  proc delete(self: ChatsModel) =
+    self.QAbstractListModel.delete
+
+  proc setup(self: ChatsModel) =
+    self.QAbstractListModel.setup
+
+  proc newChatsModel*(): ChatsModel =
+    new(result, delete)
+    result.names = @["test", "test2"]
+    result.setup
+
+  proc addNameTolist*(self: ChatsModel, name: string) =
+      self.names.add(name)
+
+  method rowCount(self: ChatsModel, index: QModelIndex = nil): int =
+    return self.names.len
+
+  method data(self: ChatsModel, index: QModelIndex, role: int): QVariant =
+    if not index.isValid:
+      return
+    if index.row < 0 or index.row >= self.names.len:
+      return
+    return newQVariant(self.names[index.row])
+
+  method roleNames(self: ChatsModel): Table[int, string] =
+    { RoleNames.Name.int:"name"}.toTable

src/nim_status_client.nim

@@ -1,5 +1,7 @@
 import NimQml
 import applicationLogic
+import chats
+import state
 
 proc mainProc() =
 
@@ -11,7 +13,9 @@ proc mainProc() =
   var app = newQApplication()
   defer: app.delete()       # Defer will run this just before mainProc() function ends
 
-  
+  var chatsModel = newChatsModel();
+  defer: chatsModel.delete
+
   var engine = newQQmlApplicationEngine()
   defer: engine.delete()
 
@@ -22,7 +26,24 @@ proc mainProc() =
   let logicVariant = newQVariant(logic)
   defer: logicVariant.delete
 
+  let chatsVariant = newQVariant(chatsModel)
+  defer: chatsVariant.delete
+
+  var appState = state.newAppState()
+  echo appState.title
+
+  appState.subscribe(proc () =
+    chatsModel.names = @[]
+    for channel in appState.channels:
+      echo channel.name
+      chatsModel.addNameTolist(channel.name)
+  )
+
+  appState.addChannel("test")
+  appState.addChannel("test2")
+
   engine.setRootContextProperty("logic", logicVariant)
+  engine.setRootContextProperty("chatsModel", chatsVariant)
   engine.load("main.qml")
   
   # Qt main event loop is entered here

src/state.nim

@@ -0,0 +1,24 @@
+
+type Channel = object
+    name*: string
+type
+    Subscriber* = proc ()
+
+type AppState* = ref object
+    title*: string
+    channels*: seq[Channel]
+    subscribers*: seq[Subscriber]
+
+proc newAppState*(): AppState =
+    result = AppState(title: "hello")
+
+proc subscribe*(self: AppState, subscriber: Subscriber) =
+  self.subscribers.add(subscriber)
+
+proc dispatch*(self: AppState) =
+  for subscriber in self.subscribers:
+    subscriber()
+
+proc addChannel*(self: AppState, name: string) =
+    self.channels.add(Channel(name: name))
+    self.dispatch()