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 refactoring 

Former-commit-id: 161356928c
This commit is contained in:
virvar 2016-05-04 15:13:31 +03:00
parent 3b9c738714
commit 99456f7b1b
6 changed files with 111 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,44 +12,20 @@
text1-color
text2-color
toolbar-background1]]
[syng-im.components.toolbar :refer [toolbar]]
[syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.chats.new-participant-contact :refer [new-participant-contact]]
[reagent.core :as r]
[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-toolbar [navigator]
[toolbar {:navigator navigator
:title "Add Participants"
:action {:image {:source res/v ;; {:uri "icon_search"}
:style {:width 20
:height 18}}
:handler (fn []
(dispatch [:add-new-participants navigator]))}}])
(defn new-participants [{:keys [navigator]}]
(let [contacts (subscribe [:all-new-contacts])]
@ -57,7 +33,7 @@
(let [contacts-ds (to-realm-datasource @contacts)]
[view {:style {:flex 1
:backgroundColor "white"}}
[toolbar navigator]
[new-participants-toolbar navigator]
[list-view {:dataSource contacts-ds
:renderRow (fn [row section-id row-id]
(r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator]))

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

@ -12,44 +12,20 @@
text1-color
text2-color
toolbar-background1]]
[syng-im.components.toolbar :refer [toolbar]]
[syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.chats.new-participant-contact :refer [new-participant-contact]]
[reagent.core :as r]
[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-toolbar [navigator]
[toolbar {:navigator navigator
:title "Remove Participants"
:action {:image {:source res/trash-icon ;; {:uri "icon_search"}
:style {:width 22
:height 30}}
:handler (fn []
(dispatch [:remove-selected-participants navigator]))}}])
(defn remove-participants [{:keys [navigator]}]
(let [contacts (subscribe [:current-chat-contacts])]
@ -57,7 +33,7 @@
(let [contacts-ds (to-realm-datasource @contacts)]
[view {:style {:flex 1
:backgroundColor "white"}}
[toolbar navigator]
[remove-participants-toolbar navigator]
[list-view {:dataSource contacts-ds
:renderRow (fn [row section-id row-id]
(r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator]))

48
src/syng_im/components/chats/chats_list.cljs
View File

@ -21,42 +21,20 @@
color-black
color-blue
text1-color
text2-color
toolbar-background1]]
text2-color]]
[syng-im.components.toolbar :refer [toolbar]]
[syng-im.components.icons.ionicons :refer [icon]]))
(defn toolbar []
[view {:style {:flexDirection "row"
:backgroundColor toolbar-background1
:height 56
:elevation 2}}
[touchable-highlight {:on-press (fn []
)
:underlay-color :transparent}
[view {:width 56
:height 56}
[image {:source {:uri "icon_hamburger"}
:style {:marginTop 22
:marginLeft 20
:width 16
:height 12}}]]]
[view {:style {:flex 1
:alignItems "center"
:justifyContent "center"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font}}
"Chats"]]
[touchable-highlight {:on-press (fn []
)
:underlay-color :transparent}
[view {:width 56
:height 56}
[image {:source {:uri "icon_search"}
:style {:margin 19.5
:width 17
:height 17}}]]]])
(defn chats-list-toolbar []
[toolbar {:nav-action {:image {:source {:uri "icon_hamburger"}
:style {:width 16
:height 12}}
:handler (fn [])}
:title "Chats"
:action {:image {:source {:uri "icon_search"}
:style {:width 17
:height 17}}
:handler (fn [])}}])
(defn chats-list [{:keys [navigator]}]
(let [chats (subscribe [:get-chats])]
@ -66,7 +44,7 @@
datasource (to-realm-datasource chats)]
[view {:style {:flex 1
:backgroundColor "white"}}
[toolbar]
[chats-list-toolbar]
[list-view {:dataSource datasource
:renderRow (fn [row section-id row-id]
(r/as-element [chat-list-item row navigator]))

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

@ -13,45 +13,21 @@
text1-color
text2-color
toolbar-background1]]
[syng-im.components.toolbar :refer [toolbar]]
[syng-im.components.realm :refer [list-view]]
[syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.chats.new-group-contact :refer [new-group-contact]]
[reagent.core :as r]
[syng-im.navigation :refer [nav-pop]]))
(defn toolbar [navigator group-name]
[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}}
"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-toolbar [navigator group-name]
[toolbar {:navigator navigator
:title "New group chat"
:action {:image {:source res/v ;; {:uri "icon_search"}
:style {:width 20
:height 18}}
:handler (fn []
(dispatch [:create-new-group group-name navigator]))}}])
(defn new-group [{:keys [navigator]}]
(let [contacts (subscribe [:all-contacts])
@ -61,7 +37,7 @@
[view {:style {:flex 1
:flexDirection "column"
:backgroundColor color-white}}
[toolbar navigator @group-name]
[new-group-toolbar navigator @group-name]
[view {:style {:marginHorizontal 16}}
[text {:style {:marginTop 24
:marginBottom 16

43
src/syng_im/components/contact_list/contact_list.cljs
View File

@ -15,6 +15,7 @@
text1-color
text2-color
toolbar-background2]]
[syng-im.components.toolbar :refer [toolbar]]
[syng-im.navigation :refer [nav-pop]]
[syng-im.resources :as res]
[syng-im.utils.logging :as log]))
@ -28,38 +29,14 @@
(not= row1 row2))})
contacts))
(defn toolbar [navigator]
[view {:style {:flexDirection "row"
:backgroundColor toolbar-background2
: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}}
"Contacts"]]
[touchable-highlight {:on-press (fn []
)
:underlay-color :transparent}
[view {:width 56
:height 56}
[image {:source {:uri "icon_search"}
:style {:margin 19.5
:width 17
:height 17}}]]]])
(defn contact-list-toolbar [navigator]
[toolbar {:navigator navigator
:title "Contacts"
:background-color toolbar-background2
:action {:image {:source {:uri "icon_search"}
:style {:width 17
:height 17}}
:handler (fn [])}}])
(defn contact-list [{:keys [navigator]}]
(let [contacts (subscribe [:get-contacts])]
@ -67,7 +44,7 @@
(let [contacts-ds (get-data-source @contacts)]
[view {:style {:flex 1
:backgroundColor "white"}}
[toolbar navigator]
[contact-list-toolbar navigator]
(when contacts-ds
[list-view {:dataSource contacts-ds
:renderRow (partial render-row navigator)

58
src/syng_im/components/toolbar.cljs Normal file
View File

@ -0,0 +1,58 @@
(ns syng-im.components.toolbar
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.resources :as res]
[syng-im.components.react :refer [view
text-input
text
image
touchable-highlight]]
[syng-im.components.styles :refer [font
title-font
color-white
color-purple
text1-color
text2-color
toolbar-background1]]
[syng-im.components.realm :refer [list-view]]
[syng-im.utils.listview :refer [to-realm-datasource]]
[reagent.core :as r]
[syng-im.navigation :refer [nav-pop]]))
(defn toolbar [{:keys [navigator title nav-action action background-color]}]
[view {:style {:flexDirection "row"
:backgroundColor (or background-color toolbar-background1)
:height 56
:elevation 2}}
(if nav-action
[touchable-highlight {:on-press (:handler nav-action)
:underlay-color :transparent}
[view {:width 56
:height 56
:alignItems "center"
:justifyContent "center"}
[image (:image nav-action)]]]
[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}}
title]]
[touchable-highlight {:on-press (:handler action)
:underlay-color :transparent}
[view {:width 56
:height 56
:alignItems "center"
:justifyContent "center"}
[image (:image action)]]]])