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

Custom toolbar for group chat views

This commit is contained in:
virvar 2016-05-04 14:35:35 +03:00
parent 902daf3963
commit cadf1b2a0b
5 changed files with 134 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,11 @@
(ns syng-im.components.chat (ns syng-im.components.chat
(:require [clojure.string :as s] (:require [clojure.string :as s]
[re-frame.core :refer [subscribe dispatch dispatch-sync]] [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android? [syng-im.components.react :refer [view
view
text text
image image
navigator navigator
touchable-highlight touchable-highlight]]
toolbar-android]]
[syng-im.components.realm :refer [list-view]] [syng-im.components.realm :refer [list-view]]
[syng-im.components.styles :refer [font [syng-im.components.styles :refer [font
title-font title-font

3
src/syng_im/components/chat/chat_message.cljs
View File

@ -6,8 +6,7 @@
text text
image image
touchable-highlight touchable-highlight
navigator navigator]]
toolbar-android]]
[syng-im.components.styles :refer [font [syng-im.components.styles :refer [font
color-light-blue-transparent color-light-blue-transparent
color-white color-white

62
src/syng_im/components/chat/new_participants.cljs
View File

@ -1,35 +1,63 @@
(ns syng-im.components.chat.new-participants (ns syng-im.components.chat.new-participants
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.resources :as res] [syng-im.resources :as res]
[syng-im.components.react :refer [view toolbar-android android? text-input]] [syng-im.components.react :refer [view android? text-input text image
touchable-highlight]]
[syng-im.components.realm :refer [list-view]] [syng-im.components.realm :refer [list-view]]
[syng-im.components.styles :refer [font
title-font
color-white
color-black
color-blue
text1-color
text2-color
toolbar-background1]]
[syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.chats.new-participant-contact :refer [new-participant-contact]] [syng-im.components.chats.new-participant-contact :refer [new-participant-contact]]
[reagent.core :as r] [reagent.core :as r]
[syng-im.navigation :refer [nav-pop]])) [syng-im.navigation :refer [nav-pop]]))
(defn toolbar [navigator]
[view {:style {:flexDirection "row"
:backgroundColor toolbar-background1
:height 56
:elevation 2}}
[touchable-highlight {:on-press (fn []
(nav-pop navigator))
:underlay-color :transparent}
[view {:width 56
:height 56}
[image {:source {:uri "icon_back"}
:style {:marginTop 21
:marginLeft 23
:width 8
:height 14}}]]]
[view {:style {:flex 1
:alignItems "center"
:justifyContent "center"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font}}
"Add Participants"]]
[touchable-highlight {:on-press (fn []
(dispatch [:add-new-participants navigator]))
:underlay-color :transparent}
[view {:width 56
:height 56}
[image {:source res/v ;; {:uri "icon_search"}
:style {:marginTop 19
:marginHorizontal 18
:width 20
:height 18}}]]]])
(defn new-participants [{:keys [navigator]}] (defn new-participants [{:keys [navigator]}]
(let [contacts (subscribe [:all-new-contacts])] (let [contacts (subscribe [:all-new-contacts])]
(fn [] (fn []
(let [contacts-ds (to-realm-datasource @contacts)] (let [contacts-ds (to-realm-datasource @contacts)]
[view {:style {:flex 1 [view {:style {:flex 1
:backgroundColor "white"}} :backgroundColor "white"}}
(when android? [toolbar navigator]
;; TODO add IOS version
[toolbar-android {:logo res/logo-icon
:title "Add Participants"
:titleColor "#4A5258"
:style {:backgroundColor "white"
:height 56
:elevation 2}
:actions [{:title "Add"
:icon res/v
:show "always"}]
:onActionSelected (fn [position]
(dispatch [:add-new-participants navigator]))
:navIcon res/nav-back-icon
:onIconClicked (fn []
(nav-pop navigator))}])
[list-view {:dataSource contacts-ds [list-view {:dataSource contacts-ds
:renderRow (fn [row section-id row-id] :renderRow (fn [row section-id row-id]
(r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator])) (r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator]))

62
src/syng_im/components/chat/remove_participants.cljs
View File

@ -1,35 +1,63 @@
(ns syng-im.components.chat.remove-participants (ns syng-im.components.chat.remove-participants
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.resources :as res] [syng-im.resources :as res]
[syng-im.components.react :refer [view toolbar-android android? text-input]] [syng-im.components.react :refer [view text-input text image
touchable-highlight]]
[syng-im.components.realm :refer [list-view]] [syng-im.components.realm :refer [list-view]]
[syng-im.components.styles :refer [font
title-font
color-white
color-black
color-blue
text1-color
text2-color
toolbar-background1]]
[syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.chats.new-participant-contact :refer [new-participant-contact]] [syng-im.components.chats.new-participant-contact :refer [new-participant-contact]]
[reagent.core :as r] [reagent.core :as r]
[syng-im.navigation :refer [nav-pop]])) [syng-im.navigation :refer [nav-pop]]))
(defn toolbar [navigator]
[view {:style {:flexDirection "row"
:backgroundColor toolbar-background1
:height 56
:elevation 2}}
[touchable-highlight {:on-press (fn []
(nav-pop navigator))
:underlay-color :transparent}
[view {:width 56
:height 56}
[image {:source {:uri "icon_back"}
:style {:marginTop 21
:marginLeft 23
:width 8
:height 14}}]]]
[view {:style {:flex 1
:alignItems "center"
:justifyContent "center"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font}}
"Remove Participants"]]
[touchable-highlight {:on-press (fn []
)
:underlay-color :transparent}
[view {:width 56
:height 56}
[image {:source res/trash-icon ;; {:uri "icon_search"}
:style {:marginTop 13
:marginHorizontal 17
:width 22
:height 30}}]]]])
(defn remove-participants [{:keys [navigator]}] (defn remove-participants [{:keys [navigator]}]
(let [contacts (subscribe [:current-chat-contacts])] (let [contacts (subscribe [:current-chat-contacts])]
(fn [] (fn []
(let [contacts-ds (to-realm-datasource @contacts)] (let [contacts-ds (to-realm-datasource @contacts)]
[view {:style {:flex 1 [view {:style {:flex 1
:backgroundColor "white"}} :backgroundColor "white"}}
(when android? [toolbar navigator]
;; TODO add IOS version
[toolbar-android {:logo res/logo-icon
:title "Remove Participants"
:titleColor "#4A5258"
:style {:backgroundColor "white"
:height 56
:elevation 2}
:actions [{:title "Remove"
:icon res/trash-icon
:show "always"}]
:onActionSelected (fn [position]
(dispatch [:remove-selected-participants navigator]))
:navIcon res/nav-back-icon
:onIconClicked (fn []
(nav-pop navigator))}])
[list-view {:dataSource contacts-ds [list-view {:dataSource contacts-ds
:renderRow (fn [row section-id row-id] :renderRow (fn [row section-id row-id]
(r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator])) (r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator]))

67
src/syng_im/components/chats/new_group.cljs
View File

@ -2,55 +2,66 @@
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.resources :as res] [syng-im.resources :as res]
[syng-im.components.react :refer [view [syng-im.components.react :refer [view
toolbar-android
android?
text-input text-input
text text
image image
touchable-highlight]] touchable-highlight]]
[syng-im.components.styles :refer [font [syng-im.components.styles :refer [font
title-font
color-white
color-purple
text1-color text1-color
text2-color text2-color
color-white toolbar-background1]]
color-purple]]
[syng-im.components.realm :refer [list-view]] [syng-im.components.realm :refer [list-view]]
[syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.chats.new-group-contact :refer [new-group-contact]] [syng-im.components.chats.new-group-contact :refer [new-group-contact]]
[reagent.core :as r] [reagent.core :as r]
[syng-im.navigation :refer [nav-pop]])) [syng-im.navigation :refer [nav-pop]]))
(defn new-group [{:keys [navigator]}] (defn toolbar [navigator group-name]
(let [contacts (subscribe [:all-contacts]) [view {:style {:flexDirection "row"
group-name (atom nil)] :backgroundColor toolbar-background1
(fn []
(let [contacts-ds (to-realm-datasource @contacts)]
[view {:style {:flex 1
:flexDirection "column"
:backgroundColor color-white}}
(when android?
;; TODO add IOS version
[toolbar-android {:navIcon {:uri "icon_back"}
:style {:backgroundColor color-white
:height 56 :height 56
:elevation 2} :elevation 2}}
:onIconClicked (fn [] [touchable-highlight {:on-press (fn []
(nav-pop navigator)) (nav-pop navigator))
:actions [{:title "Create" :underlay-color :transparent}
;; :icon res/icon-ok [view {:width 56
:show "always" :height 56}
:showWithText true}] [image {:source {:uri "icon_back"}
:onActionSelected (fn [position] :style {:marginTop 21
(dispatch [:create-new-group @group-name navigator]))} :marginLeft 23
:width 8
:height 14}}]]]
[view {:style {:flex 1 [view {:style {:flex 1
:alignItems "center" :alignItems "center"
:justifyContent "center" :justifyContent "center"}}
:marginRight 112
:backgroundColor "transparent"}}
[text {:style {:marginTop -2.5 [text {:style {:marginTop -2.5
:color text1-color :color text1-color
:fontSize 16 :fontSize 16
:fontFamily font}} :fontFamily font}}
"New group chat"]]]) "New group chat"]]
[touchable-highlight {:on-press (fn []
(dispatch [:create-new-group group-name navigator]))
:underlay-color :transparent}
[view {:width 56
:height 56}
[image {:source res/v ;; {:uri "icon_search"}
:style {:marginTop 19
:marginHorizontal 18
:width 20
:height 18}}]]]])
(defn new-group [{:keys [navigator]}]
(let [contacts (subscribe [:all-contacts])
group-name (r/atom nil)]
(fn [{:keys [navigator]}]
(let [contacts-ds (to-realm-datasource @contacts)]
[view {:style {:flex 1
:flexDirection "column"
:backgroundColor color-white}}
[toolbar navigator @group-name]
[view {:style {:marginHorizontal 16}} [view {:style {:marginHorizontal 16}}
[text {:style {:marginTop 24 [text {:style {:marginTop 24
:marginBottom 16 :marginBottom 16