chats-list & new-group views/styles

Former-commit-id: 0b3469cd64
This commit is contained in:
Roman Volosovskyi 2016-05-11 14:47:40 +03:00
parent 5cdf182192
commit fc6926cbfd
29 changed files with 424 additions and 381 deletions

View File

@ -11,13 +11,11 @@
[syng-im.components.discovery.discovery :refer [discovery]]
[syng-im.components.discovery.discovery-tag :refer [discovery-tag]]
[syng-im.chat.screen :refer [chat]]
[syng-im.components.chats.chats-list :refer [chats-list]]
[syng-im.components.chats.new-group :refer [new-group]]
[syng-im.chats-list.screen :refer [chats-list]]
[syng-im.new-group.screen :refer [new-group]]
[syng-im.participants.views.create :refer [new-participants]]
[syng-im.participants.views.remove :refer [remove-participants]]
[syng-im.utils.logging :as log]
[syng-im.utils.utils :refer [toast]]
[syng-im.navigation :as nav]
[syng-im.utils.encryption]))
(def back-button-handler (cljs/atom {:nav nil

View File

@ -1,4 +1,4 @@
(ns syng-im.components.chats.chats-list
(ns syng-im.chats-list.screen
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android?
view
@ -9,10 +9,9 @@
[syng-im.components.realm :refer [list-view]]
[syng-im.utils.logging :as log]
[syng-im.navigation :refer [nav-pop]]
[syng-im.resources :as res]
[syng-im.utils.listview :refer [to-realm-datasource]]
[reagent.core :as r]
[syng-im.components.chats.chat-list-item :refer [chat-list-item]]
[syng-im.chats-list.views.chat-list-item :refer [chat-list-item]]
[syng-im.components.action-button :refer [action-button
action-button-item]]
[syng-im.components.styles :refer [font
@ -26,43 +25,42 @@
[syng-im.components.icons.ionicons :refer [icon]]))
(defn chats-list-toolbar []
[toolbar {:nav-action {:image {:source {:uri "icon_hamburger"}
:style {:width 16
:height 12}}
[toolbar {:nav-action {:image {:source {:uri "icon_hamburger"}
:style {:width 16
:height 12}}
:handler (fn [])}
:title "Chats"
:action {:image {:source {:uri "icon_search"}
:style {:width 17
:height 17}}
:action {:image {:source {:uri "icon_search"}
:style {:width 17
:height 17}}
:handler (fn [])}}])
(defn chats-list [{:keys [navigator]}]
(defn chats-list []
(let [chats (subscribe [:get-chats])]
(fn []
(let [chats @chats
_ (log/debug "chats=" chats)
datasource (to-realm-datasource chats)]
[view {:style {:flex 1
:backgroundColor "white"}}
[view {:flex 1
:backgroundColor :white}
[chats-list-toolbar]
[list-view {:dataSource datasource
:enableEmptySections true
:renderRow (fn [row section-id row-id]
(r/as-element [chat-list-item row navigator]))
:style {:backgroundColor "white"}}]
:renderRow (fn [row _ _]
(r/as-element [chat-list-item row]))
:style {:backgroundColor :white}}]
[action-button {:buttonColor color-blue}
[action-button-item {:title "New Chat"
:buttonColor "#9b59b6"
:onPress #(dispatch [:navigate-to
:contact-list])}
[icon {:name "android-create"
[action-button-item
{:title "New Chat"
:buttonColor :#9b59b6
:onPress #(dispatch [:navigate-to :contact-list])}
[icon {:name :android-create
:style {:fontSize 20
:height 22
:color "white"}}]]
[action-button-item {:title "New Group Chat"
:buttonColor "#1abc9c"
:onPress #(dispatch [:show-group-new])}
[icon {:name "person-stalker"
:color :white}}]]
[action-button-item
{:title "New Group Chat"
:buttonColor :#1abc9c
:onPress #(dispatch [:show-group-new])}
[icon {:name :person-stalker
:style {:fontSize 20
:height 22
:color "white"}}]]]]))))
:color :white}}]]]]))))

View File

@ -0,0 +1,122 @@
(ns syng-im.chats-list.styles
(:require [syng-im.components.styles :refer [font
title-font
color-white
color-blue
online-color
text1-color
text2-color
new-messages-count-color]]))
(def contact-photo-container
{:borderRadius 50})
(def contact-photo-image
{:borderRadius 50
:width 40
:height 40})
(def online-container
{:position :absolute
:top 24
:left 24
:width 20
:height 20
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white})
(def online-dot
{:position :absolute
:top 6
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white})
(def online-dot-left
(assoc online-dot :left 3))
(def online-dot-right
(assoc online-dot :left 9))
(def chat-container
{:flexDirection :row
:paddingVertical 15
:paddingHorizontal 16
:height 90})
(def photo-container
{:marginTop 2
:width 44
:height 44})
(def item-container
{:flexDirection :column
:marginLeft 12
:flex 1})
(def name-view
{:flexDirection :row})
(def name-text
{:marginTop -2.5
:color text1-color
:fontSize 14
:fontFamily title-font})
(def group-icon
{:marginTop 4
:marginLeft 8
:width 14
:height 9})
(def memebers-text
{:marginTop -0.5
:marginLeft 4
:fontFamily font
:fontSize 12
:color text2-color})
(def last-message-text
{:marginTop 7
:marginRight 40
:color text1-color
:fontFamily font
:fontSize 14
:lineHeight 20})
(def status-container
{:flexDirection :row
:position :absolute
:top 0
:right 0})
(def status-image
{:marginTop 6
:width 9
:height 7})
(def datetime-text
{:fontFamily font
:fontSize 12
:color text2-color
:marginLeft 5})
(def new-messages-container
{:position :absolute
:top 36
:right 0
:width 24
:height 24
:backgroundColor new-messages-count-color
:borderRadius 50})
(def new-messages-text
{:top 4
:left 0
:fontFamily title-font
:fontSize 10
:color color-blue
:textAlign :center})

View File

@ -0,0 +1,21 @@
(ns syng-im.chats-list.views.chat-list-item
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view
text
image
touchable-highlight]]
[syng-im.components.styles :refer [font]]
[syng-im.chats-list.views.inner-item :refer
[chat-list-item-inner-view]]))
(defn chat-list-item [chat-obj]
[touchable-highlight
{:on-press #(dispatch [:show-chat (aget chat-obj "chat-id") :push])}
;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj
;; TODO should chat-obj be clj-map?
[view [chat-list-item-inner-view (merge (js->clj chat-obj :keywordize-keys true)
{:photo-path nil
:delivery-status :seen
:new-messages-count 3
:timestamp "13:54"
:online true})]]])

View File

@ -0,0 +1,52 @@
(ns syng-im.chats-list.views.inner-item
(:require [clojure.string :as s]
[syng-im.components.react :refer [view image icon text]]
[syng-im.chats-list.styles :as st]
[syng-im.resources :as res]))
(defn contact-photo [photo-path]
[view st/contact-photo-container
[image {:source (if (s/blank? photo-path)
res/user-no-photo
{:uri photo-path})
:style st/contact-photo-image}]])
(defn contact-online [online]
(when online
[view st/online-container
[view st/online-dot-left]
[view st/online-dot-right]]))
(defn chat-list-item-inner-view
[{:keys [name photo-path delivery-status timestamp new-messages-count online
group-chat contacts]}]
[view st/chat-container
[view st/photo-container
[contact-photo photo-path]
[contact-online online]]
[view st/item-container
[view st/name-view
[text {:style st/name-text} name]
(when group-chat
[icon :group st/group-icon])
(when group-chat
[text {:style st/memebers-text}
(if (< 1 (count contacts))
(str (count contacts) " members")
"1 member")])]
[text {:style st/last-message-text
:numberOfLines 2}
(repeatedly 5 #(str "Hi, I'm " name "! "))]]
[view
[view st/status-container
(when delivery-status
[image {:source (if (= (keyword delivery-status) :seen)
{:uri :icon_ok_small}
;; todo change icon
{:uri :icon_ok_small})
:style st/status-image}])
[text {:style st/datetime-text} timestamp]]
(when (pos? new-messages-count)
[view st/new-messages-container
[text {:style st/new-messages-text} new-messages-count]])]])

View File

@ -1,37 +0,0 @@
(ns syng-im.components.chats.chat-list-item
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view
text
image
touchable-highlight]]
[syng-im.components.styles :refer [font]]
[syng-im.components.chats.chat-list-item-inner :refer [chat-list-item-inner-view]]
[syng-im.utils.logging :as log]
[syng-im.resources :as res]))
(defn chat-list-item [chat-obj navigator]
[touchable-highlight
{:on-press #(dispatch [:show-chat (aget chat-obj "chat-id") :push])}
;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj
;; TODO should chat-obj be clj-map?
[view {} [chat-list-item-inner-view (merge (js->clj chat-obj :keywordize-keys true)
{:photo-path nil
:delivery-status :seen
:new-messages-count 3
:timestamp "13:54"
:online true})]]])
(comment [view {:style {:flexDirection "row"
:width 260
:marginVertical 5}}
[image {:source res/chat-icon
:style {:borderWidth 2
:borderColor "#FFFFFF"
:width 32
:height 30
:marginRight 5
:marginLeft 5}}]
[text {:style {:fontSize 14
:fontFamily font
:color "#4A5258"}}
(subs (aget chat-obj "name") 0 30)]])

View File

@ -1,131 +0,0 @@
(ns syng-im.components.chats.chat-list-item-inner
(:require [clojure.string :as s]
[syng-im.components.react :refer [view image text]]
[syng-im.components.styles :refer [font
title-font
color-white
color-blue
online-color
text1-color
text2-color
new-messages-count-color]]
[syng-im.resources :as res]))
(defn contact-photo [{:keys [photo-path]}]
[view {:borderRadius 50}
[image {:source (if (s/blank? photo-path)
res/user-no-photo
{:uri photo-path})
:style {:borderRadius 50
:width 40
:height 40}}]])
(defn contact-online [{:keys [online]}]
(when online
[view {:position "absolute"
:top 24
:left 24
:width 20
:height 20
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white}
[view {:position "absolute"
:top 6
:left 3
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white}]
[view {:position "absolute"
:top 6
:left 9
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white}]]))
(defn chat-list-item-inner-view
[{:keys [name photo-path delivery-status timestamp new-messages-count online
group-chat contacts]}]
[view {:style {:flexDirection "row"
:paddingVertical 15
:paddingHorizontal 16
:height 90}}
[view {:marginTop 2
:width 44
:height 44}
;;; photo
[contact-photo {:photo-path photo-path}]
;;; online
[contact-online {:online online}]]
[view {:style {:flexDirection "column"
:marginLeft 12
:flex 1}}
;;; name
[view {:style {:flexDirection "row"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 14
:fontFamily title-font}} name]
;;; group size
(when group-chat
[image {:source {:uri "icon_group"}
:style {:marginTop 4
:marginLeft 8
:width 14
:height 9}}])
(when group-chat
[text {:style {:marginTop -0.5
:marginLeft 4
:fontFamily font
:fontSize 12
:color text2-color}}
(if (< 1 (count contacts))
(str (count contacts) " members")
"1 member")])]
;;; last message
[text {:style {:marginTop 7
:marginRight 40
:color text1-color
:fontFamily font
:fontSize 14
:lineHeight 20}
:numberOfLines 2}
(repeatedly 5 #(str "Hi, I'm " name "! "))]]
[view {}
;;; delivery status
[view {:style {:flexDirection "row"
:position "absolute"
:top 0
:right 0}}
(when delivery-status
[image {:source (if (= (keyword delivery-status) :seen)
{:uri "icon_ok_small"}
{:uri "icon_ok_small"})
:style {:marginTop 6
:width 9
:height 7}}])
;;; datetime
[text {:style {:fontFamily font
:fontSize 12
:color text2-color
:marginLeft 5}}
timestamp]]
;;; new messages count
(when (pos? new-messages-count)
[view {:style {:position "absolute"
:top 36
:right 0
:width 24
:height 24
:backgroundColor new-messages-count-color
:borderRadius 50}}
[text {:style {:top 4
:left 0
:fontFamily title-font
:fontSize 10
:color color-blue
:textAlign "center"}}
new-messages-count]])]])

View File

@ -1,89 +0,0 @@
(ns syng-im.components.chats.new-group
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.resources :as res]
[syng-im.components.react :refer [view
text-input
text
image
touchable-highlight]]
[syng-im.components.styles :refer [font
title-font
color-white
color-purple
text1-color
text2-color
toolbar-background1]]
[syng-im.components.toolbar :refer [toolbar]]
[syng-im.components.realm :refer [list-view]]
[syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.chats.new-group-contact :refer [new-group-contact]]
[reagent.core :as r]
[syng-im.navigation :refer [nav-pop]]))
(defn new-group-toolbar [navigator group-name]
[toolbar {:navigator navigator
:title "New group chat"
:action {:image {:source res/v ;; {:uri "icon_search"}
:style {:width 20
:height 18}}
:handler #(dispatch [:create-new-group group-name])}}])
(defn new-group [{:keys [navigator]}]
(let [contacts (subscribe [:all-contacts])
group-name (r/atom nil)]
(fn [{:keys [navigator]}]
(let [contacts-ds (to-realm-datasource @contacts)]
[view {:style {:flex 1
:flexDirection "column"
:backgroundColor color-white}}
[new-group-toolbar navigator @group-name]
[view {:style {:marginHorizontal 16}}
[text {:style {:marginTop 24
:marginBottom 16
:color text2-color
:fontFamily font
:fontSize 14
:lineHeight 20}}
"Chat name"]
[text-input {:underlineColorAndroid color-purple
:style {:marginLeft -4
:fontSize 14
:fontFamily font
:color text1-color}
:autoFocus true
:placeholder "Group Name"
:placeholderTextColor text2-color
:onChangeText (fn [new-text]
(reset! group-name new-text)
(r/flush))
:onSubmitEditing (fn [e]
;(dispatch [:send-chat-msg @chat-id @text])
(reset! group-name nil))}
@group-name]
[text {:style {:marginTop 24
:marginBottom 16
:color text2-color
:fontFamily font
:fontSize 14
:lineHeight 20}}
"Members"]
[touchable-highlight {:on-press (fn [])}
[view {:style {:flexDirection "row"
:marginBottom 16}}
[image {:source {:uri "icon_add_gray"}
:style {:marginVertical 19
:marginHorizontal 3
:width 17
:height 17}}]
[text {:style {:marginTop 18
:marginLeft 32
:color text2-color
:fontFamily font
:fontSize 14
:lineHeight 20}}
"Add members"]]]
[list-view {:dataSource contacts-ds
:enableEmptySections true
:renderRow (fn [row section-id row-id]
(r/as-element [new-group-contact (js->clj row :keywordize-keys true) navigator]))
:style {:backgroundColor "white"}}]]]))))

View File

@ -1,20 +0,0 @@
(ns syng-im.components.chats.new-group-contact
(:require [syng-im.resources :as res]
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view]]
[syng-im.components.contact-list.contact-inner :refer [contact-inner-view]]
[syng-im.components.item-checkbox :refer [item-checkbox]]
[syng-im.utils.logging :as log]
[reagent.core :as r]))
(defn new-group-contact [{:keys [whisper-identity] :as contact} navigator]
(let [checked (r/atom false)]
(fn []
[view {:style {:flexDirection "row"
:height 56}}
[item-checkbox {:onToggle (fn [checked?]
(reset! checked checked?)
(dispatch [:select-for-new-group whisper-identity checked?]))
:checked @checked
:size 30}]
[contact-inner-view contact]])))

View File

@ -9,7 +9,6 @@
text
image]]
[reagent.core :as r]
[syng-im.components.realm :refer [list-view]]
[syng-im.components.discovery.styles :as st]
[syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.discovery.discovery-popular-list-item :refer [discovery-popular-list-item] ])

View File

@ -21,15 +21,13 @@
(defn render-separator [sectionID, rowID, adjacentRowHighlighted]
(let [elem (r/as-element [view {:style st/row-separator
:key rowID}])]
:key rowID}])]
elem))
(defn discovery-recent []
(let [discoveries (subscribe [:get-discoveries])
datasource (to-realm-datasource @discoveries)]
[list-view {:dataSource datasource
:enableEmptySections true
:renderRow render-row
datasource (to-realm-datasource @discoveries)]
[list-view {:dataSource datasource
:renderRow render-row
:renderSeparator render-separator
:style st/recent-list}]
))
:style st/recent-list}]))

View File

@ -20,7 +20,7 @@
(let [elem (discovery-popular-list-item row)]
elem)
(r/as-element [text "null"])
))
))
(defn render-separator [sectionID, rowID, adjacentRowHighlighted]
(let [elem (r/as-element [view {:style st/row-separator
@ -33,27 +33,25 @@
(str " #" tag)]])
(defn discovery-tag [{:keys [tag navigator]}]
(let [tag (subscribe [:get-current-tag])
(let [tag (subscribe [:get-current-tag])
discoveries (subscribe [:get-discoveries-by-tag @tag 0])]
(log/debug "Got discoveries: " @discoveries)
(fn []
(let [items @discoveries
(let [items @discoveries
datasource (to-realm-datasource items)]
[view {:style st/discovery-tag-container}
[toolbar {:navigator navigator
:nav-action {:image {:source {:uri "icon_back"}
:style st/icon-back}
:handler (fn [] (nav-pop navigator))}
:title "Add Participants"
:content (title-content @tag)
:action {:image {:source {:uri "icon_search"}
:style st/icon-search}
:handler (fn []
())}}]
[view {:style st/discovery-tag-container}
[toolbar {:navigator navigator
:nav-action {:image {:source {:uri "icon_back"}
:style st/icon-back}
:handler (fn [] (nav-pop navigator))}
:title "Add Participants"
:content (title-content @tag)
:action {:image {:source {:uri "icon_search"}
:style st/icon-search}
:handler (fn []
())}}]
[list-view {:dataSource datasource
:enableEmptySections true
:renderRow render-row
:renderSeparator render-separator
:style st/recent-list}]
]))))
[list-view {:dataSource datasource
:renderRow render-row
:renderSeparator render-separator
:style st/recent-list}]]))))

View File

@ -3,7 +3,10 @@
(set! js/window.RealmReactNative (js/require "realm/react-native"))
(def list-view (r/adapt-react-class (.-ListView js/RealmReactNative)))
(def list-view-class (r/adapt-react-class (.-ListView js/RealmReactNative)))
(defn list-view [props]
[list-view-class (merge {:enableEmptySections true} props)])
(comment

View File

@ -1,6 +1,5 @@
(ns syng-im.components.toolbar
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.resources :as res]
(:require [re-frame.core :refer [subscribe dispatch]]
[syng-im.components.react :refer [view
text-input
text
@ -13,12 +12,9 @@
text1-color
text2-color
toolbar-background1]]
[syng-im.components.realm :refer [list-view]]
[syng-im.utils.listview :refer [to-realm-datasource]]
[reagent.core :as r]
[syng-im.navigation :refer [nav-pop]]))
[syng-im.utils.listview :refer [to-realm-datasource]]))
(defn toolbar [{:keys [navigator title nav-action action background-color content style]}]
(defn toolbar [{:keys [title nav-action action background-color content style]}]
(let [style (merge {:flexDirection "row"
:backgroundColor (or background-color toolbar-background1)
:height 56
@ -31,7 +27,7 @@
:alignItems "center"
:justifyContent "center"}
[image (:image nav-action)]]]
[touchable-highlight {:on-press #(nav-pop navigator)}
[touchable-highlight {:on-press #(dispatch [:navigate-back])}
[view {:width 56
:height 56}
[image {:source {:uri "icon_back"}

View File

@ -1,13 +1,8 @@
(ns syng-im.contacts.views.contact
(:require [syng-im.components.react :refer [view text image touchable-highlight]]
[syng-im.resources :as res]
[syng-im.navigation :as nav]
(:require [syng-im.components.react :refer [view touchable-highlight]]
[re-frame.core :refer [dispatch]]
[syng-im.contacts.views.contact-inner :refer [contact-inner-view]]))
(defn show-chat [navigator whisper-identity]
(nav/nav-push navigator {:view-id :chat}))
(defn contact-view [{:keys [navigator contact]}]
(let [{:keys [whisper-identity]} contact]
[touchable-highlight {:onPress #(show-chat navigator whisper-identity)}
[view {} [contact-inner-view contact]]]))
(defn contact-view [{:keys [contact]}]
[touchable-highlight {:onPress #(dispatch [:navigate-to :chat])}
[view {} [contact-inner-view contact]]])

View File

@ -43,8 +43,7 @@
:borderRadius 50
:backgroundColor color-white}]]))
(defn contact-inner-view [{:keys [name photo-path delivery-status datetime new-messages-count
online whisper-identity]}]
(defn contact-inner-view [{:keys [name photo-path online]}]
[view {:style {:flexDirection "row"
:height 56}}
[view {:style {:marginTop 8

View File

@ -19,15 +19,13 @@
:show-actions false
:new-group #{}
:new-participants #{}
:signed-up false
:signed-up true
:view-id default-view
:navigation-stack (list default-view)
:name "My Name"
:current-tag nil})
(def protocol-initialized-path [:protocol-initialized])
(def identity-password-path [:identity-password])
(def updated-chats-signal-path [:chats-updated-signal])
(defn chat-input-text-path [chat-id]
[:chats chat-id :input-text])
(defn chat-staged-commands-path [chat-id]

View File

@ -57,6 +57,11 @@
;; -- Common --------------------------------------------------------------
(register-handler :set
(debug
(fn [db [_ k v]]
(assoc db k v))))
(register-handler :initialize-db
(fn [_ _] app-db))

View File

@ -7,10 +7,7 @@
[syng-im.db :as db]))
(defn signal-discoveries-updated [db]
(update-in db db/updated-discoveries-signal-path (fn [current]
(if current
(inc current)
0))))
(update-in db db/updated-discoveries-signal-path #(if % (inc %) 0)))
(defn discoveries-updated? [db]
(get-in db db/updated-discoveries-signal-path))

View File

@ -13,14 +13,14 @@
(assoc-in db db/protocol-initialized-path initialized?))
(defn update-identity [db identity]
(let [password (get-in db db/identity-password-path)
(let [password (:identity-password db)
encrypted (password-encrypt password (to-edn-string identity))]
(s/put kv/kv-store :identity encrypted)
(assoc db :user-identity identity)))
(defn stored-identity [db]
(let [encrypted (s/get kv/kv-store :identity)
password (get-in db db/identity-password-path)]
password (:identity-password db)]
(when encrypted
(read-string (password-decrypt password encrypted)))))

View File

@ -1,5 +1,5 @@
(ns syng-im.navigation.handlers
(:require [re-frame.core :refer [register-handler dispatch]]))
(:require [re-frame.core :refer [register-handler dispatch debug]]))
(defn push-view [db view-id]
(-> db
@ -35,10 +35,11 @@
(assoc :navigation-stack navigation-stack'))))))
(register-handler :show-group-new
(fn [db _]
(-> db
(push-view :new-group)
(assoc-in :new-group #{}))))
(debug
(fn [db _]
(-> db
(push-view :new-group)
(assoc :new-group #{})))))
(register-handler :show-chat
(fn [db [_ chat-id nav-type]]

View File

@ -0,0 +1,52 @@
(ns syng-im.new-group.screen
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.resources :as res]
[syng-im.components.react :refer [view
text-input
text
image
icon
touchable-highlight]]
[syng-im.components.styles :refer [color-purple]]
[syng-im.components.toolbar :refer [toolbar]]
[syng-im.components.realm :refer [list-view]]
[syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.new-group.views.contact :refer [new-group-contact]]
[reagent.core :as r]
[syng-im.new-group.styles :as st]))
(defn new-group-toolbar [group-name]
[toolbar {:title "New group chat"
:action {:image {:source res/v ;; {:uri "icon_search"}
:style st/toolbar-icon}
:handler #(dispatch [:create-new-group group-name])}}])
(defn new-group []
(let [contacts (subscribe [:all-contacts])
group-name (subscribe [:get ::group-name])]
(fn []
(let [contacts-ds (to-realm-datasource @contacts)]
[view st/new-group-container
[new-group-toolbar @group-name]
[view st/chat-name-container
[text {:style st/chat-name-text} "Chat name"]
[text-input
{:underlineColorAndroid color-purple
:style st/group-name-input
:autoFocus true
:placeholder "Group Name"
:onChangeText #(dispatch [:set ::group-name %])
:onSubmitEditing #(dispatch [:set ::group-name nil])}
@group-name]
[text {:style st/members-text} "Members"]
[touchable-highlight {:on-press (fn [])}
[view st/add-container
[icon :add_gray st/add-icon]
[text {:style st/add-text} "Add members"]]]
[list-view
{:dataSource contacts-ds
:renderRow (fn [row _ _]
(let [row' (js->clj row :keywordize-keys true)]
(r/as-element [new-group-contact row'])))
:style st/contacts-list}]]]))))

View File

@ -0,0 +1,67 @@
(ns syng-im.new-group.styles
(:require [syng-im.components.styles :refer [font
title-font
color-white
color-purple
text1-color
text2-color
toolbar-background1]]))
(def toolbar-icon
{:width 20
:height 18})
(def new-group-container
{:flex 1
:flexDirection :column
:backgroundColor color-white})
(def chat-name-container
{:marginHorizontal 16})
(def chat-name-text
{:marginTop 24
:marginBottom 16
:color text2-color
:fontFamily font
:fontSize 14
:lineHeight 20})
(def group-name-input
{:marginLeft -4
:fontSize 14
:fontFamily font
:color text1-color})
(def members-text
{:marginTop 24
:marginBottom 16
:color text2-color
:fontFamily font
:fontSize 14
:lineHeight 20})
(def add-container
{:flexDirection :row
:marginBottom 16})
(def add-icon
{:marginVertical 19
:marginHorizontal 3
:width 17
:height 17})
(def add-text
{:marginTop 18
:marginLeft 32
:color text2-color
:fontFamily font
:fontSize 14
:lineHeight 20})
(def contacts-list
{:backgroundColor :white})
(def contact-container
{:flexDirection :row
:height 56})

View File

@ -0,0 +1,19 @@
(ns syng-im.new-group.views.contact
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view]]
[syng-im.contacts.views.contact-inner :refer [contact-inner-view]]
[syng-im.components.item-checkbox :refer [item-checkbox]]
[reagent.core :as r]
[syng-im.new-group.styles :as st]))
(defn new-group-contact [{:keys [whisper-identity] :as contact}]
(let [checked (r/atom false)]
(fn []
[view st/contact-container
[item-checkbox
{:onToggle (fn [checked?]
(reset! checked checked?)
(dispatch [:select-for-new-group whisper-identity checked?]))
:checked @checked
:size 30}]
[contact-inner-view contact]])))

View File

@ -1,7 +1,7 @@
(ns syng-im.participants.views.contact
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view]]
[syng-im.components.contact-list.contact-inner :refer [contact-inner-view]]
[syng-im.contacts.views.contact-inner :refer [contact-inner-view]]
[syng-im.components.item-checkbox :refer [item-checkbox]]
[reagent.core :as r]
[syng-im.participants.styles :as st]))

View File

@ -29,7 +29,6 @@
(let [contacts-ds (to-realm-datasource @contacts)]
[view st/participants-container
[new-participants-toolbar navigator]
[list-view {:dataSource contacts-ds
:enableEmptySections true
:renderRow new-participants-row
:style st/participants-list}]]))))
[list-view {:dataSource contacts-ds
:renderRow new-participants-row
:style st/participants-list}]]))))

View File

@ -30,7 +30,6 @@
(let [contacts-ds (to-realm-datasource @contacts)]
[view st/participants-container
[remove-participants-toolbar navigator]
[list-view {:dataSource contacts-ds
:enableEmptySections true
:renderRow remove-participants-row
:style st/participants-list}]]))))
[list-view {:dataSource contacts-ds
:renderRow remove-participants-row
:style st/participants-list}]]))))

View File

@ -15,6 +15,10 @@
(fn [db _]
(reaction (:chats @db))))
(register-sub :get
(fn [db [_ k]]
(reaction (k @db))))
;; -- User data --------------------------------------------------------------
;; (register-sub