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

72
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,40 +139,48 @@
[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 [view (st/chat-name-view @show-actions)
(when (not @show-actions) [text {:style st/chat-name-text}
[touchable-highlight {:on-press #(dispatch [:navigate-back])} (or @name "Chat name")]
[view st/icon-view (if @group-chat
[icon :back st/back-icon]]]) [view {:flexDirection :row}
[view (st/chat-name-view @show-actions) [icon :group st/group-icon]
[text {:style st/chat-name-text} [text {:style st/members}
(or @name "Chat name")] (let [cnt (count @contacts)]
(if @group-chat (str cnt
[view {:flexDirection :row} (if (< 1 cnt)
[icon :group st/group-icon] " members"
[text {:style st/members} " member")
(let [cnt (count @contacts)] ", " cnt " active"))]]
(str cnt [text {:style st/last-activity} "Active a minute ago"])])))
(if (< 1 cnt)
" members" (defn toolbar-action []
" member") (let [show-actions (subscribe [:show-actions])]
", " cnt " active"))]] (fn []
[text {:style st/last-activity} "Active a minute ago"])] (if @show-actions
(if @show-actions [touchable-highlight
[touchable-highlight {:on-press #(dispatch [:set-show-actions false])}
{:on-press #(dispatch [:set-show-actions false])} [view st/icon-view
[view st/icon-view [icon :up st/up-icon]]]
[icon :up st/up-icon]]] [touchable-highlight
[touchable-highlight {: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])

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

@ -26,17 +26,18 @@
[]))) [])))
(defn title-content [showSearch] (defn title-content [showSearch]
(if showSearch [view st/discovery-toolbar-content
[text-input {:underlineColorAndroid "transparent" (if showSearch
:style st/discovery-search-input [text-input {:underlineColorAndroid "transparent"
:autoFocus true :style st/discovery-search-input
:placeholder "Type your search tags here" :autoFocus true
:onSubmitEditing (fn [e] :placeholder "Type your search tags here"
(let [search (aget e "nativeEvent" "text") :onSubmitEditing (fn [e]
hashtags (get-hashtags search)] (let [search (aget e "nativeEvent" "text")
(dispatch [:broadcast-status search hashtags])))}] hashtags (get-hashtags search)]
[view (dispatch [:broadcast-status search hashtags])))}]
[text {:style st/discovery-title} "Discover"]])) [view
[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}}

7
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
@ -172,4 +177,4 @@
(def icon-search (def icon-search
{:width 17 {:width 17
:height 17}) :height 17})

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

@ -17,44 +17,44 @@
[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}
(if nav-action (when (not hide-nav?)
[touchable-highlight {:on-press (:handler nav-action)} (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 [view {:width 56
:height 56 :height 56
:alignItems "center" :alignItems "center"
:justifyContent "center"} :justifyContent "center"}
[image (:image nav-action)]]] [image (:image 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)]]]]))