status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/syng_im/components/chat.cljs
View File

@ -7,7 +7,6 @@
icon icon
navigator navigator
touchable-highlight touchable-highlight
toolbar-android
list-view list-view
list-item list-item
android?]] android?]]
@ -18,6 +17,7 @@
[syng-im.utils.listview :refer [to-datasource [syng-im.utils.listview :refer [to-datasource
to-datasource2]] to-datasource2]]
[syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]] [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 :refer [chat-message]]
[syng-im.components.chat.chat-message-new :refer [chat-message-new]])) [syng-im.components.chat.chat-message-new :refer [chat-message-new]]))
@ -139,16 +139,11 @@
[overlay {:on-click-outside #(dispatch [:set-show-actions false])} [overlay {:on-click-outside #(dispatch [:set-show-actions false])}
[actions-list-view]]) [actions-list-view]])
(defn toolbar [] (defn toolbar-content []
(let [{:keys [group-chat name contacts]} (let [{:keys [group-chat name contacts]}
(subscribe [:chat-properties [:group-chat :name :contacts]]) (subscribe [:chat-properties [:group-chat :name :contacts]])
show-actions (subscribe [:show-actions])] show-actions (subscribe [:show-actions])]
(fn [] (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) [view (st/chat-name-view @show-actions)
[text {:style st/chat-name-text} [text {:style st/chat-name-text}
(or @name "Chat name")] (or @name "Chat name")]
@ -162,7 +157,11 @@
" members" " members"
" member") " member")
", " cnt " active"))]] ", " 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 (if @show-actions
[touchable-highlight [touchable-highlight
{:on-press #(dispatch [:set-show-actions false])} {:on-press #(dispatch [:set-show-actions false])}
@ -172,7 +171,16 @@
{:on-press #(dispatch [:set-show-actions true])} {:on-press #(dispatch [:set-show-actions true])}
[view st/icon-view [view st/icon-view
[chat-photo {}] [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] (defn messages-view [group-chat]
(let [messages (subscribe [:chat :messages]) (let [messages (subscribe [:chat :messages])
@ -191,7 +199,7 @@
show-actions-atom (subscribe [:show-actions])] show-actions-atom (subscribe [:show-actions])]
(fn [] (fn []
[view st/chat-view [view st/chat-view
[toolbar] [chat-toolbar]
[messages-view @group-chat] [messages-view @group-chat]
(when @group-chat [typing-all]) (when @group-chat [typing-all])
(when is-active [chat-message-new]) (when is-active [chat-message-new])

5
src/syng_im/components/discovery/discovery.cljs
View File

@ -26,6 +26,7 @@
[]))) [])))
(defn title-content [showSearch] (defn title-content [showSearch]
[view st/discovery-toolbar-content
(if showSearch (if showSearch
[text-input {:underlineColorAndroid "transparent" [text-input {:underlineColorAndroid "transparent"
:style st/discovery-search-input :style st/discovery-search-input
@ -36,7 +37,7 @@
hashtags (get-hashtags search)] hashtags (get-hashtags search)]
(dispatch [:broadcast-status search hashtags])))}] (dispatch [:broadcast-status search hashtags])))}]
[view [view
[text {:style st/discovery-title} "Discover"]])) [text {:style st/discovery-title} "Discover"]])])
(defn create-fake-discovery [] (defn create-fake-discovery []
(let [number (rand-int 999)] (let [number (rand-int 999)]
@ -62,7 +63,7 @@
:height 12}} :height 12}}
:handler create-fake-discovery} :handler create-fake-discovery}
:title "Add Participants" :title "Add Participants"
:content (title-content @showSearch) :custom-content [title-content @showSearch]
:action {:image {:source {:uri "icon_search"} :action {:image {:source {:uri "icon_search"}
:style {:width 17 :style {:width 17
:height 17}} :height 17}}

5
src/syng_im/components/discovery/styles.cljs
View File

@ -24,6 +24,11 @@
;; discovery.cljs ;; discovery.cljs
(def discovery-toolbar-content
{:flex 1
:alignItems :center
:justifyContent :center})
(def discovery-search-input (def discovery-search-input
{:flex 1 {:flex 1
:marginLeft 18 :marginLeft 18

16
src/syng_im/components/toolbar.cljs
View File

@ -17,12 +17,14 @@
[syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.utils.listview :refer [to-realm-datasource]]
[reagent.core :as r])) [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" (let [style (merge {:flexDirection "row"
:backgroundColor (or background-color toolbar-background1) :backgroundColor (or background-color toolbar-background1)
:height 56 :height 56
:elevation 2} style)] :elevation 2} style)]
[view {:style style} [view {:style style}
(when (not hide-nav?)
(if nav-action (if nav-action
[touchable-highlight {:on-press (:handler nav-action)} [touchable-highlight {:on-press (:handler nav-action)}
[view {:width 56 [view {:width 56
@ -37,12 +39,8 @@
:style {:marginTop 21 :style {:marginTop 21
:marginLeft 23 :marginLeft 23
:width 8 :width 8
:height 14}}]]]) :height 14}}]]]))
(if content (or custom-content
[view {:style {:flex 1
:alignItems "center"
:justifyContent "center"}}
content]
[view {:style {:flex 1 [view {:style {:flex 1
:alignItems "center" :alignItems "center"
:justifyContent "center"}} :justifyContent "center"}}
@ -51,10 +49,12 @@
:fontSize 16 :fontSize 16
:fontFamily font}} :fontFamily font}}
title]]) title]])
custom-action
(when action
[touchable-highlight {:on-press (:handler action)} [touchable-highlight {:on-press (:handler action)}
[view {:width 56 [view {:width 56
:height 56 :height 56
:alignItems "center" :alignItems "center"
:justifyContent "center"} :justifyContent "center"}
[image (:image action)]]]])) [image (:image action)]]])]))