Merge pull request #56 from status-im/custom-toolbar
Custom toolbar
Former-commit-id: daa2ca491c
This commit is contained in:
Jarrad
commit
79f912de24
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 684 B |
Binary file not shown.
|
After Width: | Height: | Size: 945 B |
Binary file not shown.
|
After Width: | Height: | Size: 315 B |
Binary file not shown.
|
After Width: | Height: | Size: 868 B |
Binary file not shown.
|
After Width: | Height: | Size: 829 B |
Binary file not shown.
|
After Width: | Height: | Size: 474 B |
Binary file not shown.
|
After Width: | Height: | Size: 520 B |
Binary file not shown.
|
After Width: | Height: | Size: 243 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 881 B |
Binary file not shown.
|
After Width: | Height: | Size: 969 B |
Binary file not shown.
|
After Width: | Height: | Size: 351 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 518 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
|
|
@ -1,12 +1,11 @@
|
|||
(ns syng-im.components.chat
|
||||
(:require [clojure.string :as s]
|
||||
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
|
||||
[syng-im.components.react :refer [android?
|
||||
view
|
||||
[syng-im.components.react :refer [view
|
||||
text
|
||||
image
|
||||
navigator
|
||||
toolbar-android]]
|
||||
touchable-highlight]]
|
||||
[syng-im.components.realm :refer [list-view]]
|
||||
[syng-im.components.styles :refer [font
|
||||
title-font
|
||||
|
|
@ -14,12 +13,13 @@
|
|||
chat-background
|
||||
online-color
|
||||
selected-message-color
|
||||
separator-color
|
||||
text1-color
|
||||
text2-color]]
|
||||
text2-color
|
||||
toolbar-background1]]
|
||||
[syng-im.utils.logging :as log]
|
||||
[syng-im.navigation :refer [nav-pop]]
|
||||
[syng-im.resources :as res]
|
||||
[syng-im.constants :refer [content-type-status]]
|
||||
[syng-im.utils.listview :refer [to-realm-datasource]]
|
||||
[syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]]
|
||||
[reagent.core :as r]
|
||||
|
|
@ -42,7 +42,8 @@
|
|||
:background-color background-color))))
|
||||
|
||||
(defn chat-photo [{:keys [photo-path]}]
|
||||
[view {:borderRadius 50}
|
||||
[view {:margin 10
|
||||
:borderRadius 50}
|
||||
[image {:source (if (s/blank? photo-path)
|
||||
res/user-no-photo
|
||||
{:uri photo-path})
|
||||
|
|
@ -53,8 +54,8 @@
|
|||
(defn contact-online [{:keys [online]}]
|
||||
(when online
|
||||
[view {:position "absolute"
|
||||
:top 20
|
||||
:left 20
|
||||
:top 30
|
||||
:left 30
|
||||
:width 20
|
||||
:height 20
|
||||
:borderRadius 50
|
||||
|
|
@ -78,8 +79,7 @@
|
|||
|
||||
(defn typing [member]
|
||||
[view {:style {:width 260
|
||||
:paddingTop 2
|
||||
:paddingBottom 8
|
||||
:marginTop 10
|
||||
:paddingLeft 8
|
||||
:paddingRight 8
|
||||
:alignItems "flex-start"
|
||||
|
|
@ -95,139 +95,188 @@
|
|||
(str member " is typing")]]])
|
||||
|
||||
(defn typing-all []
|
||||
[view {:style {:marginBottom 12}}
|
||||
[view {:style {:marginBottom 20}}
|
||||
(for [member ["Geoff" "Justas"]]
|
||||
^{:key member} [typing member])])
|
||||
|
||||
(defn toolbar-content-chat [chat]
|
||||
(let [group? (:group-chat chat)]
|
||||
(defn action-view [action]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(dispatch [:set-show-actions false])
|
||||
((:handler action)))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:flexDirection "row"
|
||||
:height 56}}
|
||||
[view {:width 56
|
||||
:height 56
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}
|
||||
[image {:source {:uri (:icon action)}
|
||||
:style (:icon-style action)}]]
|
||||
[view {:style {:flex 1
|
||||
:flexDirection "row"
|
||||
:backgroundColor "transparent"}}
|
||||
[view {:style {:flex 1
|
||||
:alignItems "flex-start"
|
||||
:justifyContent "center"
|
||||
:marginRight 112}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16
|
||||
:alignItems "flex-start"
|
||||
:justifyContent "center"}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 14
|
||||
:fontFamily font}}
|
||||
(:title action)]
|
||||
(when-let [subtitle (:subtitle action)]
|
||||
[text {:style {:marginTop 1
|
||||
:color text2-color
|
||||
:fontSize 12
|
||||
:fontFamily font}}
|
||||
subtitle])]]])
|
||||
|
||||
(defn actions-list-view [navigator chat]
|
||||
(when-let [actions (when (and (:group-chat chat)
|
||||
(:is-active chat))
|
||||
[{:title "Add Contact to chat"
|
||||
:icon "icon_menu_group"
|
||||
:icon-style {:width 25
|
||||
:height 19}
|
||||
:handler #(dispatch [:show-add-participants navigator])}
|
||||
{:title "Remove Contact from chat"
|
||||
:subtitle "Alex, John"
|
||||
:icon "icon_search_gray_copy"
|
||||
:icon-style {:width 17
|
||||
:height 17}
|
||||
:handler #(dispatch [:show-remove-participants navigator])}
|
||||
{:title "Leave Chat"
|
||||
:icon "icon_muted"
|
||||
:icon-style {:width 18
|
||||
:height 21}
|
||||
:handler #(dispatch [:leave-group-chat navigator])}
|
||||
{:title "Settings"
|
||||
:subtitle "Not implemented"
|
||||
:icon "icon_settings"
|
||||
:icon-style {:width 20
|
||||
:height 13}
|
||||
:handler (fn [] )}])]
|
||||
[view {:style {:backgroundColor toolbar-background1
|
||||
:elevation 2
|
||||
:position "absolute"
|
||||
:top 56
|
||||
:left 0
|
||||
:right 0}}
|
||||
[view {:style {:marginLeft 16
|
||||
:height 1.5
|
||||
:backgroundColor separator-color}}]
|
||||
[view {:style {:marginVertical 10}}
|
||||
(for [action actions]
|
||||
^{:key action} [action-view action])]]))
|
||||
|
||||
(defn overlay [{:keys [on-click-outside]} items]
|
||||
[view {:position "absolute"
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0}
|
||||
[touchable-highlight {:on-press on-click-outside
|
||||
:underlay-color :transparent
|
||||
:style {:flex 1}}
|
||||
[view nil]]
|
||||
items])
|
||||
|
||||
(defn actions-view [navigator chat]
|
||||
[overlay {:on-click-outside (fn []
|
||||
(dispatch [:set-show-actions false]))}
|
||||
[actions-list-view navigator chat]])
|
||||
|
||||
(defn toolbar [navigator chat show-actions]
|
||||
[view {:style {:flexDirection "row"
|
||||
:height 56
|
||||
:backgroundColor toolbar-background1
|
||||
:elevation 2}}
|
||||
(when (not show-actions)
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(nav-pop navigator))
|
||||
:underlay-color :transparent}
|
||||
[view {:width 56
|
||||
:height 56}
|
||||
[image {:source {:uri "icon_back"}
|
||||
:style {:marginTop 21
|
||||
:marginLeft 23
|
||||
:width 8
|
||||
:height 14}}]]])
|
||||
[view {:style {:flex 1
|
||||
:marginLeft (if show-actions 16 0)
|
||||
:alignItems "flex-start"
|
||||
:justifyContent "center"}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16
|
||||
:fontFamily font}}
|
||||
(or (chat :name)
|
||||
"Chat name")]
|
||||
(if (:group-chat chat)
|
||||
[view {:style {:flexDirection "row"}}
|
||||
[image {:source {:uri "icon_group"}
|
||||
:style {:marginTop 4
|
||||
:width 14
|
||||
:height 9}}]
|
||||
[text {:style {:marginTop -0.5
|
||||
:marginLeft 4
|
||||
:fontFamily font
|
||||
:fontSize 12
|
||||
:color text2-color}}
|
||||
(str (count (:contacts chat))
|
||||
(if (< 1 (count (:contacts chat)))
|
||||
" members"
|
||||
" member")
|
||||
", " (count (:contacts chat)) " active")]]
|
||||
[text {:style {:marginTop 1
|
||||
:color text2-color
|
||||
:fontSize 12
|
||||
:fontFamily font}}
|
||||
(or (chat :name)
|
||||
"Chat name")]
|
||||
(if group?
|
||||
[view {:style {:flexDirection "row"}}
|
||||
[image {:source {:uri "icon_group"}
|
||||
:style {:marginTop 4
|
||||
:width 14
|
||||
:height 9}}]
|
||||
[text {:style {:marginTop -0.5
|
||||
:marginLeft 4
|
||||
:fontFamily font
|
||||
:fontSize 12
|
||||
:color text2-color}}
|
||||
(str (count (:contacts chat))
|
||||
(if (< 1 (count (:contacts chat)))
|
||||
" members"
|
||||
" member")
|
||||
", " (count (:contacts chat)) " active")]]
|
||||
[text {:style {:marginTop 1
|
||||
:color text2-color
|
||||
:fontSize 12
|
||||
:fontFamily font}}
|
||||
"Active a minute ago"])]
|
||||
(when-not group?
|
||||
[view {:style {:position "absolute"
|
||||
:top 10
|
||||
:right 66}}
|
||||
[chat-photo {}]
|
||||
[contact-online {:online true}]])]))
|
||||
"Active a minute ago"])]
|
||||
(if show-actions
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(dispatch [:set-show-actions false]))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:width 56
|
||||
:height 56}}
|
||||
[image {:source {:uri "icon_up"}
|
||||
:style {:marginTop 23
|
||||
:marginLeft 21
|
||||
:width 14
|
||||
:height 8}}]]]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(dispatch [:set-show-actions true]))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:width 56
|
||||
:height 56}}
|
||||
[chat-photo {}]
|
||||
[contact-online {:online true}]]])])
|
||||
|
||||
(defn chat [{:keys [navigator]}]
|
||||
(let [messages (subscribe [:get-chat-messages])
|
||||
chat (subscribe [:get-current-chat])]
|
||||
(let [messages (subscribe [:get-chat-messages])
|
||||
chat (subscribe [:get-current-chat])
|
||||
show-actions-atom (subscribe [:show-actions])]
|
||||
(fn []
|
||||
(let [msgs @messages
|
||||
;_ (log/debug "messages=" msgs)
|
||||
;; temp to show first status
|
||||
msgs-clj (as-> (js->clj msgs) ms
|
||||
(assoc ms "-1"
|
||||
{:msg-id "-1"
|
||||
:content (str "The brash businessman’s braggadocio "
|
||||
"and public exchange with candidates "
|
||||
"in the US presidential election")
|
||||
:delivery-status "seen"
|
||||
:from "Status"
|
||||
:chat-id "-"
|
||||
:content-type content-type-status
|
||||
:timestamp 1
|
||||
"outgoing" false
|
||||
:to nil})
|
||||
(reduce (fn [items [n m]]
|
||||
(assoc items (.parseInt js/window n) m
|
||||
;; (assoc m "from" (if (< 0.5 (rand))
|
||||
;; "Status"
|
||||
;; "abc"))
|
||||
))
|
||||
{} ms)
|
||||
(into (sorted-map) ms)
|
||||
(map (fn [[n current] [_ next]]
|
||||
[n (-> current
|
||||
(assoc :same-author
|
||||
(if next
|
||||
(= (get current "from") (get next "from"))
|
||||
true))
|
||||
(assoc :same-direction
|
||||
(if next
|
||||
(= (get current "outgoing") (get next "outgoing"))
|
||||
true))
|
||||
(assoc :last-msg (= 0 n)))
|
||||
current])
|
||||
ms (conj (vec (rest ms)) nil))
|
||||
(reduce (fn [items [n m]]
|
||||
(assoc items n m))
|
||||
{} ms))
|
||||
msgs (clj->js msgs-clj)
|
||||
;; temp
|
||||
typing (:group-chat @chat)
|
||||
;; end temp
|
||||
datasource (to-realm-datasource msgs)
|
||||
contacts (:contacts @chat)
|
||||
contact-by-identity (contacts-by-identity contacts)]
|
||||
[view {:style {:flex 1
|
||||
:backgroundColor chat-background}}
|
||||
(when android?
|
||||
;; TODO add IOS version
|
||||
[toolbar-android {:navIcon {:uri "icon_back"}
|
||||
:style {:backgroundColor color-white
|
||||
:height 56
|
||||
:elevation 2}
|
||||
:actions (when (and (:group-chat @chat)
|
||||
(:is-active @chat))
|
||||
[{:title "Add Contact to chat"
|
||||
:icon res/add-icon
|
||||
:showWithText true}
|
||||
{:title "Remove Contact from chat"
|
||||
:icon res/trash-icon
|
||||
:showWithText true}
|
||||
{:title "Leave Chat"
|
||||
:icon res/leave-icon
|
||||
:showWithText true}])
|
||||
:onActionSelected (fn [position]
|
||||
(case position
|
||||
0 (dispatch [:show-add-participants navigator])
|
||||
1 (dispatch [:show-remove-participants navigator])
|
||||
2 (dispatch [:leave-group-chat navigator])))
|
||||
:onIconClicked (fn []
|
||||
(nav-pop navigator))}
|
||||
[toolbar-content-chat @chat]])
|
||||
[list-view {:dataSource datasource
|
||||
:renderScrollComponent (fn [props]
|
||||
(invertible-scroll-view (js->clj props)))
|
||||
:renderRow (fn [row section-id row-id]
|
||||
(let [msg (-> (js->clj row :keywordize-keys true)
|
||||
(add-msg-color contact-by-identity)
|
||||
(assoc :group-chat (:group-chat @chat)))]
|
||||
(r/as-element [chat-message msg])))
|
||||
:style {:backgroundColor "white"}}]
|
||||
[toolbar navigator @chat @show-actions-atom]
|
||||
(let [last-msg-id (:last-msg-id @chat)]
|
||||
[list-view {:dataSource datasource
|
||||
:renderScrollComponent (fn [props]
|
||||
(invertible-scroll-view (js->clj props)))
|
||||
:renderRow (fn [row section-id row-id]
|
||||
(let [msg (-> (js->clj row :keywordize-keys true)
|
||||
(add-msg-color contact-by-identity)
|
||||
(assoc :group-chat (:group-chat @chat))
|
||||
(assoc :typing typing))]
|
||||
(r/as-element [chat-message msg last-msg-id])))}])
|
||||
(when (:group-chat @chat)
|
||||
[typing-all])
|
||||
(when (:is-active @chat)
|
||||
[chat-message-new])]))))
|
||||
[chat-message-new])
|
||||
(when @show-actions-atom
|
||||
[actions-view navigator @chat])]))))
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
text
|
||||
image
|
||||
touchable-highlight
|
||||
navigator
|
||||
toolbar-android]]
|
||||
navigator]]
|
||||
[syng-im.components.styles :refer [font
|
||||
color-light-blue-transparent
|
||||
color-white
|
||||
|
|
@ -287,7 +286,7 @@
|
|||
|
||||
(defn incoming-group-message-body [{:keys [msg-id from content content-type outgoing
|
||||
delivery-status selected new-day same-author
|
||||
same-direction last-msg]}]
|
||||
same-direction last-msg typing]}]
|
||||
(let [delivery-status :seen-by-everyone]
|
||||
[view {:style {:flexDirection "column"}}
|
||||
(when selected
|
||||
|
|
@ -306,7 +305,7 @@
|
|||
:else 10)
|
||||
:paddingRight 8
|
||||
:paddingLeft 8}
|
||||
(when last-msg
|
||||
(when (and last-msg (not typing))
|
||||
{:paddingBottom 20}))}
|
||||
[view {:style {:width 24}}
|
||||
(when (not same-author)
|
||||
|
|
@ -327,7 +326,7 @@
|
|||
[message-delivery-status {:delivery-status delivery-status}])]]]))
|
||||
|
||||
(defn message-body [{:keys [msg-id content content-type outgoing delivery-status
|
||||
group-chat new-day same-author same-direction last-msg]}]
|
||||
group-chat new-day same-author same-direction last-msg typing]}]
|
||||
(let [delivery-status :seen]
|
||||
[view {:style (merge {:flexDirection "column"
|
||||
:width 260
|
||||
|
|
@ -343,7 +342,7 @@
|
|||
:alignItems "flex-end"}
|
||||
{:alignItems "flex-start"
|
||||
:alignSelf "flex-start"})
|
||||
(when last-msg
|
||||
(when (and last-msg (not typing))
|
||||
{:paddingBottom 20}))}
|
||||
[message-content {:msg-id msg-id
|
||||
:content-type content-type
|
||||
|
|
@ -353,22 +352,26 @@
|
|||
(when (and outgoing delivery-status)
|
||||
[message-delivery-status {:delivery-status delivery-status}])]))
|
||||
|
||||
(defn chat-message [{:keys [msg-id from content content-type outgoing delivery-status date new-day group-chat selected same-author same-direction last-msg] :as msg}]
|
||||
(defn chat-message [{:keys [msg-id from content content-type outgoing delivery-status
|
||||
date new-day group-chat selected same-author same-direction
|
||||
last-msg typing] :as msg}
|
||||
last-msg-id]
|
||||
[view {}
|
||||
(when new-day
|
||||
[message-date {:date date}])
|
||||
(let [msg-data {:msg-id msg-id
|
||||
:from from
|
||||
:content content
|
||||
:content-type content-type
|
||||
:outgoing outgoing
|
||||
:delivery-status (keyword delivery-status)
|
||||
:group-chat group-chat
|
||||
:selected selected
|
||||
:new-day new-day
|
||||
:same-author same-author
|
||||
:same-direction same-direction
|
||||
:last-msg last-msg}]
|
||||
(let [msg-data {:msg-id msg-id
|
||||
:from from
|
||||
:content content
|
||||
:content-type content-type
|
||||
:outgoing outgoing
|
||||
:delivery-status (keyword delivery-status)
|
||||
:group-chat group-chat
|
||||
:selected selected
|
||||
:new-day new-day
|
||||
:same-author same-author
|
||||
:same-direction same-direction
|
||||
:last-msg (= last-msg-id msg-id)
|
||||
:typing typing}]
|
||||
[view {}
|
||||
(when (= content-type content-type-status)
|
||||
[message-content-status from content])
|
||||
|
|
|
|||
|
|
@ -1,35 +1,39 @@
|
|||
(ns syng-im.components.chat.new-participants
|
||||
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
|
||||
[syng-im.resources :as res]
|
||||
[syng-im.components.react :refer [view toolbar-android android? text-input]]
|
||||
[syng-im.components.react :refer [view android? text-input text image
|
||||
touchable-highlight]]
|
||||
[syng-im.components.realm :refer [list-view]]
|
||||
[syng-im.components.styles :refer [font
|
||||
title-font
|
||||
color-white
|
||||
color-black
|
||||
color-blue
|
||||
text1-color
|
||||
text2-color
|
||||
toolbar-background1]]
|
||||
[syng-im.components.toolbar :refer [toolbar]]
|
||||
[syng-im.utils.listview :refer [to-realm-datasource]]
|
||||
[syng-im.components.chats.new-participant-contact :refer [new-participant-contact]]
|
||||
[reagent.core :as r]
|
||||
[syng-im.navigation :refer [nav-pop]]))
|
||||
|
||||
(defn new-participants-toolbar [navigator]
|
||||
[toolbar {:navigator navigator
|
||||
:title "Add Participants"
|
||||
:action {:image {:source res/v ;; {:uri "icon_search"}
|
||||
:style {:width 20
|
||||
:height 18}}
|
||||
:handler (fn []
|
||||
(dispatch [:add-new-participants navigator]))}}])
|
||||
|
||||
(defn new-participants [{:keys [navigator]}]
|
||||
(let [contacts (subscribe [:all-new-contacts])]
|
||||
(fn []
|
||||
(let [contacts-ds (to-realm-datasource @contacts)]
|
||||
[view {:style {:flex 1
|
||||
:backgroundColor "white"}}
|
||||
(when android?
|
||||
;; TODO add IOS version
|
||||
[toolbar-android {:logo res/logo-icon
|
||||
:title "Add Participants"
|
||||
:titleColor "#4A5258"
|
||||
:style {:backgroundColor "white"
|
||||
:height 56
|
||||
:elevation 2}
|
||||
:actions [{:title "Add"
|
||||
:icon res/v
|
||||
:show "always"}]
|
||||
:onActionSelected (fn [position]
|
||||
(dispatch [:add-new-participants navigator]))
|
||||
:navIcon res/nav-back-icon
|
||||
:onIconClicked (fn []
|
||||
(nav-pop navigator))}])
|
||||
[new-participants-toolbar navigator]
|
||||
[list-view {:dataSource contacts-ds
|
||||
:renderRow (fn [row section-id row-id]
|
||||
(r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator]))
|
||||
|
|
|
|||
|
|
@ -1,35 +1,39 @@
|
|||
(ns syng-im.components.chat.remove-participants
|
||||
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
|
||||
[syng-im.resources :as res]
|
||||
[syng-im.components.react :refer [view toolbar-android android? text-input]]
|
||||
[syng-im.components.react :refer [view text-input text image
|
||||
touchable-highlight]]
|
||||
[syng-im.components.realm :refer [list-view]]
|
||||
[syng-im.components.styles :refer [font
|
||||
title-font
|
||||
color-white
|
||||
color-black
|
||||
color-blue
|
||||
text1-color
|
||||
text2-color
|
||||
toolbar-background1]]
|
||||
[syng-im.components.toolbar :refer [toolbar]]
|
||||
[syng-im.utils.listview :refer [to-realm-datasource]]
|
||||
[syng-im.components.chats.new-participant-contact :refer [new-participant-contact]]
|
||||
[reagent.core :as r]
|
||||
[syng-im.navigation :refer [nav-pop]]))
|
||||
|
||||
(defn remove-participants-toolbar [navigator]
|
||||
[toolbar {:navigator navigator
|
||||
:title "Remove Participants"
|
||||
:action {:image {:source res/trash-icon ;; {:uri "icon_search"}
|
||||
:style {:width 22
|
||||
:height 30}}
|
||||
:handler (fn []
|
||||
(dispatch [:remove-selected-participants navigator]))}}])
|
||||
|
||||
(defn remove-participants [{:keys [navigator]}]
|
||||
(let [contacts (subscribe [:current-chat-contacts])]
|
||||
(fn []
|
||||
(let [contacts-ds (to-realm-datasource @contacts)]
|
||||
[view {:style {:flex 1
|
||||
:backgroundColor "white"}}
|
||||
(when android?
|
||||
;; TODO add IOS version
|
||||
[toolbar-android {:logo res/logo-icon
|
||||
:title "Remove Participants"
|
||||
:titleColor "#4A5258"
|
||||
:style {:backgroundColor "white"
|
||||
:height 56
|
||||
:elevation 2}
|
||||
:actions [{:title "Remove"
|
||||
:icon res/trash-icon
|
||||
:show "always"}]
|
||||
:onActionSelected (fn [position]
|
||||
(dispatch [:remove-selected-participants navigator]))
|
||||
:navIcon res/nav-back-icon
|
||||
:onIconClicked (fn []
|
||||
(nav-pop navigator))}])
|
||||
[remove-participants-toolbar navigator]
|
||||
[list-view {:dataSource contacts-ds
|
||||
:renderRow (fn [row section-id row-id]
|
||||
(r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator]))
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
view
|
||||
text
|
||||
image
|
||||
navigator
|
||||
toolbar-android]]
|
||||
touchable-highlight
|
||||
navigator]]
|
||||
[syng-im.components.realm :refer [list-view]]
|
||||
[syng-im.utils.logging :as log]
|
||||
[syng-im.navigation :refer [nav-pop]]
|
||||
|
|
@ -22,8 +22,19 @@
|
|||
color-blue
|
||||
text1-color
|
||||
text2-color]]
|
||||
[syng-im.components.toolbar :refer [toolbar]]
|
||||
[syng-im.components.icons.ionicons :refer [icon]]))
|
||||
|
||||
(defn chats-list-toolbar []
|
||||
[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}}
|
||||
:handler (fn [])}}])
|
||||
|
||||
(defn chats-list [{:keys [navigator]}]
|
||||
(let [chats (subscribe [:get-chats])]
|
||||
|
|
@ -33,27 +44,7 @@
|
|||
datasource (to-realm-datasource chats)]
|
||||
[view {:style {:flex 1
|
||||
:backgroundColor "white"}}
|
||||
(when android?
|
||||
;; TODO add IOS version
|
||||
[toolbar-android {:navIcon {:uri "icon_hamburger"}
|
||||
:style {:backgroundColor color-white
|
||||
:height 56
|
||||
:elevation 2}
|
||||
:onIconClicked (fn []
|
||||
(nav-pop navigator))
|
||||
:actions [{:title "Search"
|
||||
:icon {:uri "icon_search"}
|
||||
:show "always"}]}
|
||||
[view {:style {:flex 1
|
||||
:alignItems "center"
|
||||
:justifyContent "center"
|
||||
:marginRight 112
|
||||
:backgroundColor "transparent"}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16
|
||||
:fontFamily font}}
|
||||
"Chats"]]])
|
||||
[chats-list-toolbar]
|
||||
[list-view {:dataSource datasource
|
||||
:renderRow (fn [row section-id row-id]
|
||||
(r/as-element [chat-list-item row navigator]))
|
||||
|
|
|
|||
|
|
@ -2,55 +2,42 @@
|
|||
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
|
||||
[syng-im.resources :as res]
|
||||
[syng-im.components.react :refer [view
|
||||
toolbar-android
|
||||
android?
|
||||
text-input
|
||||
text
|
||||
image
|
||||
touchable-highlight]]
|
||||
[syng-im.components.styles :refer [font
|
||||
title-font
|
||||
color-white
|
||||
color-purple
|
||||
text1-color
|
||||
text2-color
|
||||
color-white
|
||||
color-purple]]
|
||||
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 (fn []
|
||||
(dispatch [:create-new-group group-name navigator]))}}])
|
||||
|
||||
(defn new-group [{:keys [navigator]}]
|
||||
(let [contacts (subscribe [:all-contacts])
|
||||
group-name (atom nil)]
|
||||
(fn []
|
||||
group-name (r/atom nil)]
|
||||
(fn [{:keys [navigator]}]
|
||||
(let [contacts-ds (to-realm-datasource @contacts)]
|
||||
[view {:style {:flex 1
|
||||
:flexDirection "column"
|
||||
:backgroundColor color-white}}
|
||||
(when android?
|
||||
;; TODO add IOS version
|
||||
[toolbar-android {:navIcon {:uri "icon_back"}
|
||||
:style {:backgroundColor color-white
|
||||
:height 56
|
||||
:elevation 2}
|
||||
:onIconClicked (fn []
|
||||
(nav-pop navigator))
|
||||
:actions [{:title "Create"
|
||||
;; :icon res/icon-ok
|
||||
:show "always"
|
||||
:showWithText true}]
|
||||
:onActionSelected (fn [position]
|
||||
(dispatch [:create-new-group @group-name navigator]))}
|
||||
[view {:style {:flex 1
|
||||
:alignItems "center"
|
||||
:justifyContent "center"
|
||||
:marginRight 112
|
||||
:backgroundColor "transparent"}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16
|
||||
:fontFamily font}}
|
||||
"New group chat"]]])
|
||||
[new-group-toolbar navigator @group-name]
|
||||
[view {:style {:marginHorizontal 16}}
|
||||
[text {:style {:marginTop 24
|
||||
:marginBottom 16
|
||||
|
|
|
|||
|
|
@ -4,9 +4,19 @@
|
|||
[natal-shell.core :refer [with-error-view]])
|
||||
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
|
||||
[syng-im.components.react :refer [view text image touchable-highlight
|
||||
navigator list-view toolbar-android
|
||||
navigator list-view
|
||||
list-item]]
|
||||
[syng-im.components.contact-list.contact :refer [contact-view]]
|
||||
[syng-im.components.styles :refer [font
|
||||
title-font
|
||||
color-white
|
||||
color-black
|
||||
color-blue
|
||||
text1-color
|
||||
text2-color
|
||||
toolbar-background2]]
|
||||
[syng-im.components.toolbar :refer [toolbar]]
|
||||
[syng-im.navigation :refer [nav-pop]]
|
||||
[syng-im.resources :as res]
|
||||
[syng-im.utils.logging :as log]))
|
||||
|
||||
|
|
@ -19,18 +29,22 @@
|
|||
(not= row1 row2))})
|
||||
contacts))
|
||||
|
||||
(defn contact-list-toolbar [navigator]
|
||||
[toolbar {:navigator navigator
|
||||
:title "Contacts"
|
||||
:background-color toolbar-background2
|
||||
:action {:image {:source {:uri "icon_search"}
|
||||
:style {:width 17
|
||||
:height 17}}
|
||||
:handler (fn [])}}])
|
||||
|
||||
(defn contact-list [{:keys [navigator]}]
|
||||
(let [contacts (subscribe [:get-contacts])]
|
||||
(fn []
|
||||
(let [contacts-ds (get-data-source @contacts)]
|
||||
[view {:style {:flex 1
|
||||
:backgroundColor "white"}}
|
||||
[toolbar-android {:logo res/logo-icon
|
||||
:title "Contacts"
|
||||
:titleColor "#4A5258"
|
||||
:style {:backgroundColor "white"
|
||||
:height 56
|
||||
:elevation 2}}]
|
||||
[contact-list-toolbar navigator]
|
||||
(when contacts-ds
|
||||
[list-view {:dataSource contacts-ds
|
||||
:renderRow (partial render-row navigator)
|
||||
|
|
|
|||
|
|
@ -12,10 +12,14 @@
|
|||
(def color-light-blue "#bbc4cb")
|
||||
(def color-light-blue-transparent "#bbc4cb32")
|
||||
(def color-dark-mint "#5fc48d")
|
||||
(def color-light-gray "#EEF2F5")
|
||||
|
||||
(def text1-color color-black)
|
||||
(def text2-color color-gray)
|
||||
(def online-color color-blue)
|
||||
(def new-messages-count-color "#7099e632")
|
||||
(def chat-background "#EBF0F4")
|
||||
(def chat-background color-light-gray)
|
||||
(def selected-message-color "#E4E9ED")
|
||||
(def separator-color "#0000001f")
|
||||
(def toolbar-background1 color-white)
|
||||
(def toolbar-background2 color-light-gray)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
(ns syng-im.components.toolbar
|
||||
(: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.realm :refer [list-view]]
|
||||
[syng-im.utils.listview :refer [to-realm-datasource]]
|
||||
[reagent.core :as r]
|
||||
[syng-im.navigation :refer [nav-pop]]))
|
||||
|
||||
(defn toolbar [{:keys [navigator title nav-action action background-color]}]
|
||||
[view {:style {:flexDirection "row"
|
||||
:backgroundColor (or background-color toolbar-background1)
|
||||
:height 56
|
||||
:elevation 2}}
|
||||
(if nav-action
|
||||
[touchable-highlight {:on-press (:handler nav-action)
|
||||
:underlay-color :transparent}
|
||||
[view {:width 56
|
||||
:height 56
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}
|
||||
[image (:image nav-action)]]]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(nav-pop navigator))
|
||||
:underlay-color :transparent}
|
||||
[view {:width 56
|
||||
:height 56}
|
||||
[image {:source {:uri "icon_back"}
|
||||
:style {:marginTop 21
|
||||
:marginLeft 23
|
||||
:width 8
|
||||
:height 14}}]]])
|
||||
[view {:style {:flex 1
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16
|
||||
:fontFamily font}}
|
||||
title]]
|
||||
[touchable-highlight {:on-press (:handler action)
|
||||
:underlay-color :transparent}
|
||||
[view {:width 56
|
||||
:height 56
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}
|
||||
[image (:image action)]]]])
|
||||
|
|
@ -9,9 +9,11 @@
|
|||
:identity-password "replace-me-with-user-entered-password"
|
||||
:contacts []
|
||||
:chat {:current-chat-id "0x0479a5ed1f38cadfad1db6cd56c4b659b0ebe052bbe9efa950f6660058519fa4ca6be2dda66afa80de96ab00eb97a2605d5267a1e8f4c2a166ab551f6826608cdd"
|
||||
:command nil}
|
||||
:command nil
|
||||
:last-message nil}
|
||||
:chats {}
|
||||
:chats-updated-signal 0
|
||||
:show-actions false
|
||||
:new-group #{}
|
||||
:new-participants #{}
|
||||
:signed-up false})
|
||||
|
|
@ -37,5 +39,6 @@
|
|||
[:chats chat-id :command-requests])
|
||||
(defn chat-command-request-path [chat-id msg-id]
|
||||
[:chats chat-id :command-requests msg-id])
|
||||
(def show-actions-path [:show-actions])
|
||||
(def new-group-path [:new-group])
|
||||
(def new-participants-path [:new-participants])
|
||||
|
|
|
|||
|
|
@ -119,6 +119,11 @@
|
|||
(log/debug action commands)
|
||||
(set-commands db commands)))
|
||||
|
||||
(register-handler :set-show-actions
|
||||
(fn [db [action show-actions]]
|
||||
(log/debug action)
|
||||
(assoc-in db db/show-actions-path show-actions)))
|
||||
|
||||
;; -- Protocol --------------------------------------------------------------
|
||||
|
||||
(register-handler :initialize-protocol
|
||||
|
|
@ -136,10 +141,9 @@
|
|||
(fn [db [action {chat-id :from
|
||||
msg-id :msg-id :as msg}]]
|
||||
(log/debug action "msg" msg)
|
||||
(save-message chat-id msg)
|
||||
(-> db
|
||||
(create-chat chat-id [chat-id] false)
|
||||
(signal-chat-updated chat-id))))
|
||||
(let [db (create-chat db chat-id [chat-id] false)]
|
||||
(save-message chat-id msg)
|
||||
(signal-chat-updated db chat-id))))
|
||||
|
||||
(register-handler :group-received-msg
|
||||
(fn [db [action {chat-id :group-id :as msg}]]
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
(ns syng-im.models.chats
|
||||
(:require [clojure.set :refer [difference]]
|
||||
[syng-im.persistence.realm :as r]
|
||||
[syng-im.utils.random :refer [timestamp]]
|
||||
[syng-im.utils.random :as random :refer [timestamp]]
|
||||
[clojure.string :refer [join blank?]]
|
||||
[syng-im.db :as db]
|
||||
[syng-im.utils.logging :as log]
|
||||
[syng-im.constants :refer [content-type-status]]
|
||||
[syng-im.models.messages :refer [save-message]]
|
||||
[syng-im.persistence.realm-queries :refer [include-query]]
|
||||
[syng-im.models.chat :refer [signal-chat-updated]]))
|
||||
|
||||
|
|
@ -35,6 +37,18 @@
|
|||
(defn chat-exists? [chat-id]
|
||||
(r/exists? :chats :chat-id chat-id))
|
||||
|
||||
(defn add-status-message [chat-id]
|
||||
;; TODO Get real status
|
||||
(save-message chat-id
|
||||
{:from "Status"
|
||||
:to nil
|
||||
:msg-id (random/id)
|
||||
:content (str "The brash businessman’s braggadocio "
|
||||
"and public exchange with candidates "
|
||||
"in the US presidential election")
|
||||
:content-type content-type-status
|
||||
:outgoing false}))
|
||||
|
||||
(defn create-chat
|
||||
([db chat-id identities group-chat?]
|
||||
(create-chat db chat-id identities group-chat? nil))
|
||||
|
|
@ -48,12 +62,14 @@
|
|||
(fn []
|
||||
(let [contacts (mapv (fn [ident]
|
||||
{:identity ident}) identities)]
|
||||
(r/create :chats {:chat-id chat-id
|
||||
:is-active true
|
||||
:name chat-name
|
||||
:group-chat group-chat?
|
||||
:timestamp (timestamp)
|
||||
:contacts contacts}))))
|
||||
(r/create :chats {:chat-id chat-id
|
||||
:is-active true
|
||||
:name chat-name
|
||||
:group-chat group-chat?
|
||||
:timestamp (timestamp)
|
||||
:contacts contacts
|
||||
:last-msg-id ""}))))
|
||||
(add-status-message chat-id)
|
||||
(signal-chats-updated db)))))
|
||||
|
||||
(defn chat-contacts [chat-id]
|
||||
|
|
|
|||
|
|
@ -5,21 +5,36 @@
|
|||
[syng-im.db :as db]
|
||||
[syng-im.utils.logging :as log]))
|
||||
|
||||
(defn select-chat-last-message [chat]
|
||||
(when-let [last-msg-id (:last-msg-id chat)]
|
||||
(r/single-cljs (r/get-by-field :msgs :msg-id last-msg-id))))
|
||||
|
||||
(defn save-message [chat-id {:keys [from to msg-id content content-type outgoing] :or {outgoing false
|
||||
to nil} :as msg}]
|
||||
(log/debug "save-message" chat-id msg)
|
||||
(when-not (r/exists? :msgs :msg-id msg-id)
|
||||
(r/write
|
||||
(fn []
|
||||
(r/create :msgs {:chat-id chat-id
|
||||
:msg-id msg-id
|
||||
:from from
|
||||
:to to
|
||||
:content content
|
||||
:content-type content-type
|
||||
:outgoing outgoing
|
||||
:timestamp (timestamp)
|
||||
:delivery-status nil} true)))))
|
||||
(fn []
|
||||
(let [chat (r/single-cljs (r/get-by-field :chats :chat-id chat-id))
|
||||
last-message (select-chat-last-message chat)]
|
||||
(r/create :msgs {:chat-id chat-id
|
||||
:msg-id msg-id
|
||||
:from from
|
||||
:to to
|
||||
:content content
|
||||
:content-type content-type
|
||||
:outgoing outgoing
|
||||
:timestamp (timestamp)
|
||||
:delivery-status nil
|
||||
:same-author (if last-message
|
||||
(= (:from last-message) from)
|
||||
true)
|
||||
:same-direction (if last-message
|
||||
(= (:outgoing last-message) outgoing)
|
||||
true)} true)
|
||||
(r/create :chats {:chat-id (:chat-id chat)
|
||||
:last-msg-id msg-id}
|
||||
true))))))
|
||||
|
||||
(defn get-messages [chat-id]
|
||||
(r/sorted (r/get-by-field :msgs :chat-id chat-id) :timestamp :desc))
|
||||
|
|
|
|||
|
|
@ -32,21 +32,24 @@
|
|||
:indexed true}
|
||||
:outgoing "bool"
|
||||
:delivery-status {:type "string"
|
||||
:optional true}}}
|
||||
:optional true}
|
||||
:same-author "bool"
|
||||
:same-direction "bool"}}
|
||||
{:name :chat-contact
|
||||
:properties {:identity "string"
|
||||
:is-in-chat {:type "bool"
|
||||
:default true}}}
|
||||
{:name :chats
|
||||
:primaryKey :chat-id
|
||||
:properties {:chat-id "string"
|
||||
:name "string"
|
||||
:group-chat {:type "bool"
|
||||
:properties {:chat-id "string"
|
||||
:name "string"
|
||||
:group-chat {:type "bool"
|
||||
:indexed true}
|
||||
:is-active "bool"
|
||||
:timestamp "int"
|
||||
:contacts {:type "list"
|
||||
:objectType "chat-contact"}}}]})
|
||||
:is-active "bool"
|
||||
:timestamp "int"
|
||||
:contacts {:type "list"
|
||||
:objectType "chat-contact"}
|
||||
:last-msg-id "string"}}]})
|
||||
|
||||
|
||||
(def realm (js/Realm. (clj->js opts)))
|
||||
|
|
|
|||
|
|
@ -109,6 +109,11 @@
|
|||
(reaction
|
||||
(get @db :signed-up))))
|
||||
|
||||
(register-sub
|
||||
:show-actions
|
||||
(fn [db _]
|
||||
(reaction (get-in @db db/show-actions-path))))
|
||||
|
||||
(register-sub
|
||||
:get-contacts
|
||||
(fn [db _]
|
||||
|
|
|
|||
Loading…
Reference in New Issue