Chat view toolbar refactoring
This commit is contained in:
virvar
parent
3dfc461924
commit
0e2cd2f653
|
|
@ -7,7 +7,6 @@
|
|||
icon
|
||||
navigator
|
||||
touchable-highlight
|
||||
toolbar-android
|
||||
list-view
|
||||
list-item
|
||||
android?]]
|
||||
|
|
@ -18,6 +17,7 @@
|
|||
[syng-im.utils.listview :refer [to-datasource
|
||||
to-datasource2]]
|
||||
[syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]]
|
||||
[syng-im.components.toolbar :refer [toolbar]]
|
||||
[syng-im.components.chat.chat-message :refer [chat-message]]
|
||||
[syng-im.components.chat.chat-message-new :refer [chat-message-new]]))
|
||||
|
||||
|
|
@ -139,40 +139,48 @@
|
|||
[overlay {:on-click-outside #(dispatch [:set-show-actions false])}
|
||||
[actions-list-view]])
|
||||
|
||||
(defn toolbar []
|
||||
(defn toolbar-content []
|
||||
(let [{:keys [group-chat name contacts]}
|
||||
(subscribe [:chat-properties [:group-chat :name :contacts]])
|
||||
show-actions (subscribe [:show-actions])]
|
||||
(fn []
|
||||
[view st/toolbar-view
|
||||
(when (not @show-actions)
|
||||
[touchable-highlight {:on-press #(dispatch [:navigate-back])}
|
||||
[view st/icon-view
|
||||
[icon :back st/back-icon]]])
|
||||
[view (st/chat-name-view @show-actions)
|
||||
[text {:style st/chat-name-text}
|
||||
(or @name "Chat name")]
|
||||
(if @group-chat
|
||||
[view {:flexDirection :row}
|
||||
[icon :group st/group-icon]
|
||||
[text {:style st/members}
|
||||
(let [cnt (count @contacts)]
|
||||
(str cnt
|
||||
(if (< 1 cnt)
|
||||
" members"
|
||||
" member")
|
||||
", " cnt " active"))]]
|
||||
[text {:style st/last-activity} "Active a minute ago"])]
|
||||
(if @show-actions
|
||||
[touchable-highlight
|
||||
{:on-press #(dispatch [:set-show-actions false])}
|
||||
[view st/icon-view
|
||||
[icon :up st/up-icon]]]
|
||||
[touchable-highlight
|
||||
{:on-press #(dispatch [:set-show-actions true])}
|
||||
[view st/icon-view
|
||||
[chat-photo {}]
|
||||
[contact-online {:online true}]]])])))
|
||||
[view (st/chat-name-view @show-actions)
|
||||
[text {:style st/chat-name-text}
|
||||
(or @name "Chat name")]
|
||||
(if @group-chat
|
||||
[view {:flexDirection :row}
|
||||
[icon :group st/group-icon]
|
||||
[text {:style st/members}
|
||||
(let [cnt (count @contacts)]
|
||||
(str cnt
|
||||
(if (< 1 cnt)
|
||||
" members"
|
||||
" member")
|
||||
", " cnt " active"))]]
|
||||
[text {:style st/last-activity} "Active a minute ago"])])))
|
||||
|
||||
(defn toolbar-action []
|
||||
(let [show-actions (subscribe [:show-actions])]
|
||||
(fn []
|
||||
(if @show-actions
|
||||
[touchable-highlight
|
||||
{:on-press #(dispatch [:set-show-actions false])}
|
||||
[view st/icon-view
|
||||
[icon :up st/up-icon]]]
|
||||
[touchable-highlight
|
||||
{:on-press #(dispatch [:set-show-actions true])}
|
||||
[view st/icon-view
|
||||
[chat-photo {}]
|
||||
[contact-online {:online true}]]]))))
|
||||
|
||||
(defn chat-toolbar []
|
||||
(let [{:keys [group-chat name contacts]}
|
||||
(subscribe [:chat-properties [:group-chat :name :contacts]])
|
||||
show-actions (subscribe [:show-actions])]
|
||||
(fn []
|
||||
[toolbar {:hide-nav? @show-actions
|
||||
:custom-content [toolbar-content]
|
||||
:custom-action [toolbar-action]}])))
|
||||
|
||||
(defn messages-view [group-chat]
|
||||
(let [messages (subscribe [:chat :messages])
|
||||
|
|
@ -191,7 +199,7 @@
|
|||
show-actions-atom (subscribe [:show-actions])]
|
||||
(fn []
|
||||
[view st/chat-view
|
||||
[toolbar]
|
||||
[chat-toolbar]
|
||||
[messages-view @group-chat]
|
||||
(when @group-chat [typing-all])
|
||||
(when is-active [chat-message-new])
|
||||
|
|
|
|||
|
|
@ -26,17 +26,18 @@
|
|||
[])))
|
||||
|
||||
(defn title-content [showSearch]
|
||||
(if showSearch
|
||||
[text-input {:underlineColorAndroid "transparent"
|
||||
:style st/discovery-search-input
|
||||
:autoFocus true
|
||||
:placeholder "Type your search tags here"
|
||||
:onSubmitEditing (fn [e]
|
||||
(let [search (aget e "nativeEvent" "text")
|
||||
hashtags (get-hashtags search)]
|
||||
(dispatch [:broadcast-status search hashtags])))}]
|
||||
[view
|
||||
[text {:style st/discovery-title} "Discover"]]))
|
||||
[view st/discovery-toolbar-content
|
||||
(if showSearch
|
||||
[text-input {:underlineColorAndroid "transparent"
|
||||
:style st/discovery-search-input
|
||||
:autoFocus true
|
||||
:placeholder "Type your search tags here"
|
||||
:onSubmitEditing (fn [e]
|
||||
(let [search (aget e "nativeEvent" "text")
|
||||
hashtags (get-hashtags search)]
|
||||
(dispatch [:broadcast-status search hashtags])))}]
|
||||
[view
|
||||
[text {:style st/discovery-title} "Discover"]])])
|
||||
|
||||
(defn create-fake-discovery []
|
||||
(let [number (rand-int 999)]
|
||||
|
|
@ -62,7 +63,7 @@
|
|||
:height 12}}
|
||||
:handler create-fake-discovery}
|
||||
:title "Add Participants"
|
||||
:content (title-content @showSearch)
|
||||
:custom-content [title-content @showSearch]
|
||||
:action {:image {:source {:uri "icon_search"}
|
||||
:style {:width 17
|
||||
:height 17}}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,11 @@
|
|||
|
||||
;; discovery.cljs
|
||||
|
||||
(def discovery-toolbar-content
|
||||
{:flex 1
|
||||
:alignItems :center
|
||||
:justifyContent :center})
|
||||
|
||||
(def discovery-search-input
|
||||
{:flex 1
|
||||
:marginLeft 18
|
||||
|
|
@ -172,4 +177,4 @@
|
|||
|
||||
(def icon-search
|
||||
{:width 17
|
||||
:height 17})
|
||||
:height 17})
|
||||
|
|
|
|||
|
|
@ -17,44 +17,44 @@
|
|||
[syng-im.utils.listview :refer [to-realm-datasource]]
|
||||
[reagent.core :as r]))
|
||||
|
||||
(defn toolbar [{:keys [navigator title nav-action action background-color content style]}]
|
||||
(defn toolbar [{:keys [navigator title nav-action hide-nav? action custom-action
|
||||
background-color custom-content style]}]
|
||||
(let [style (merge {:flexDirection "row"
|
||||
:backgroundColor (or background-color toolbar-background1)
|
||||
:height 56
|
||||
:elevation 2} style)]
|
||||
[view {:style style}
|
||||
(if nav-action
|
||||
[touchable-highlight {:on-press (:handler nav-action)}
|
||||
(when (not hide-nav?)
|
||||
(if nav-action
|
||||
[touchable-highlight {:on-press (:handler nav-action)}
|
||||
[view {:width 56
|
||||
:height 56
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}
|
||||
[image (:image nav-action)]]]
|
||||
[touchable-highlight {:on-press #(dispatch [:navigate-back])}
|
||||
[view {:width 56
|
||||
:height 56}
|
||||
[image {:source {:uri "icon_back"}
|
||||
:style {:marginTop 21
|
||||
:marginLeft 23
|
||||
:width 8
|
||||
:height 14}}]]]))
|
||||
(or custom-content
|
||||
[view {:style {:flex 1
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16
|
||||
:fontFamily font}}
|
||||
title]])
|
||||
custom-action
|
||||
(when action
|
||||
[touchable-highlight {:on-press (:handler action)}
|
||||
[view {:width 56
|
||||
:height 56
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}
|
||||
[image (:image nav-action)]]]
|
||||
[touchable-highlight {:on-press #(dispatch [:navigate-back])}
|
||||
[view {:width 56
|
||||
:height 56}
|
||||
[image {:source {:uri "icon_back"}
|
||||
:style {:marginTop 21
|
||||
:marginLeft 23
|
||||
:width 8
|
||||
:height 14}}]]])
|
||||
(if content
|
||||
[view {:style {:flex 1
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}}
|
||||
content]
|
||||
[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)}
|
||||
[view {:width 56
|
||||
:height 56
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}
|
||||
[image (:image action)]]]]))
|
||||
[image (:image action)]]])]))
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue