Chat view toolbar refactoring

This commit is contained in:
virvar 2016-05-11 13:53:38 +03:00
parent 3dfc461924
commit 0e2cd2f653
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,16 +139,11 @@
[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")]
@ -162,7 +157,11 @@
" members"
" member")
", " cnt " active"))]]
[text {:style st/last-activity} "Active a minute ago"])]
[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])}
@ -172,7 +171,16 @@
{:on-press #(dispatch [:set-show-actions true])}
[view st/icon-view
[chat-photo {}]
[contact-online {:online true}]]])])))
[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,6 +26,7 @@
[])))
(defn title-content [showSearch]
[view st/discovery-toolbar-content
(if showSearch
[text-input {:underlineColorAndroid "transparent"
:style st/discovery-search-input
@ -36,7 +37,7 @@
hashtags (get-hashtags search)]
(dispatch [:broadcast-status search hashtags])))}]
[view
[text {:style st/discovery-title} "Discover"]]))
[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

View File

@ -17,12 +17,14 @@
[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}
(when (not hide-nav?)
(if nav-action
[touchable-highlight {:on-press (:handler nav-action)}
[view {:width 56
@ -37,12 +39,8 @@
:style {:marginTop 21
:marginLeft 23
:width 8
:height 14}}]]])
(if content
[view {:style {:flex 1
:alignItems "center"
:justifyContent "center"}}
content]
:height 14}}]]]))
(or custom-content
[view {:style {:flex 1
:alignItems "center"
:justifyContent "center"}}
@ -51,10 +49,12 @@
: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 action)]]]]))
[image (:image action)]]])]))