Chat view toolbar refactoring

Former-commit-id: 0e2cd2f653
This commit is contained in:
virvar 2016-05-11 13:53:38 +03:00
parent 5a63f527d3
commit 251931e794
4 changed files with 90 additions and 76 deletions

View File

@ -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])

View File

@ -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}}

View File

@ -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})

View File

@ -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)]]])]))