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

styles 

Former-commit-id: 1ce4c1d459
This commit is contained in:
Roman Volosovskyi 2016-05-07 16:39:03 +03:00
parent 459893a95c
commit 2e8d87322d
12 changed files with 248 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,22 +4,14 @@
[syng-im.components.react :refer [view [syng-im.components.react :refer [view
text text
image image
icon
navigator navigator
touchable-highlight touchable-highlight
toolbar-android toolbar-android
list-view list-view
list-item list-item
android?]] android?]]
[syng-im.components.styles :refer [font [syng-im.components.chat-styles :as st]
title-font
color-white
chat-background
online-color
selected-message-color
separator-color
text1-color
text2-color
toolbar-background1]]
[syng-im.utils.logging :as log] [syng-im.utils.logging :as log]
[syng-im.resources :as res] [syng-im.resources :as res]
[syng-im.constants :refer [content-type-status]] [syng-im.constants :refer [content-type-status]]
@ -29,7 +21,6 @@
[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]]))
(defn contacts-by-identity [contacts] (defn contacts-by-identity [contacts]
(->> contacts (->> contacts
(map (fn [{:keys [identity] :as contact}] (map (fn [{:keys [identity] :as contact}]
@ -50,105 +41,25 @@
[image {:source (if (s/blank? photo-path) [image {:source (if (s/blank? photo-path)
res/user-no-photo res/user-no-photo
{:uri photo-path}) {:uri photo-path})
:style {:borderRadius 50 :style st/chat-photo-st}]])
:width 36
:height 36}}]])
(defn contact-online [{:keys [online]}] (defn contact-online [{:keys [online]}]
(when online (when online
[view {:position "absolute" [view st/online-view
:top 30 [view st/online-dot-left]
:left 30 [view st/online-dot-right]]))
:width 20
:height 20
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white}
[view {:position "absolute"
:top 6
:left 3
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white}]
[view {:position "absolute"
:top 6
:left 9
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white}]]))
(defn typing [member] (defn typing [member]
[view {:style {:width 260 [view st/typing-view
:marginTop 10 [view st/typing-background
:paddingLeft 8 [text {:style st/typing-text}
:paddingRight 8
:alignItems "flex-start"
:alignSelf "flex-start"}}
[view {:style {:borderRadius 14
:padding 12
:height 38
:backgroundColor selected-message-color}}
[text {:style {:marginTop -2
:fontSize 12
:fontFamily font
:color text2-color}}
(str member " is typing")]]]) (str member " is typing")]]])
(defn typing-all [] (defn typing-all []
[view {:style {:marginBottom 20}} [view st/typing-all-st
(for [member ["Geoff" "Justas"]] (for [member ["Geoff" "Justas"]]
^{:key member} [typing member])]) ^{:key member} [typing member])])
(defn toolbar-content-chat [group-chat]
(let
[contacts (subscribe [:chat :contacts])
name (subscribe [:chat :name])]
(fn [group-chat]
[view {:style {:flex 1
:flexDirection "row"
:backgroundColor "transparent"}}
[view {:style {:flex 1
:alignItems "flex-start"
:justifyContent "center"
:marginRight 112}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font}}
(or @name "Chat name")]
(if group-chat
[view {:style {:flexDirection "row"}}
[image {:source {:uri :icon_group}
:style {:marginTop 4
:width 14
:height 9}}]
[text {:style {:marginTop -0.5
:marginLeft 4
:fontFamily font
:fontSize 12
:color text2-color}}
(let [cnt (count @contacts)]
(str cnt
(if (< 1 cnt)
;; TODO https://github.com/r0man/inflections-clj
" members"
" member")
", " cnt " active"))]]
[text {:style {:marginTop 1
:color text2-color
:fontSize 12
:fontFamily font}}
"Active a minute ago"])]
(when-not group-chat
[view {:style {:position "absolute"
:top 10
:right 66}}
[chat-photo {}]
[contact-online {:online true}]])])))
(defn message-row [contact-by-identity group-chat] (defn message-row [contact-by-identity group-chat]
(fn [row _ _] (fn [row _ _]
(let [msg (-> row (let [msg (-> row
@ -156,17 +67,6 @@
(assoc :group-chat group-chat))] (assoc :group-chat group-chat))]
(list-item [chat-message msg])))) (list-item [chat-message msg]))))
(def group-caht-actions
[{:title "Add Contact to chat"
:icon res/add-icon
:showWithText true}
{:title "Remove Contact from chat"
:icon res/trash-icon
:showWithText true}
{:title "Leave Chat"
:icon res/leave-icon
:showWithText true}])
(defn on-action-selected [position] (defn on-action-selected [position]
(case position (case position
0 (dispatch [:show-add-participants #_navigator]) 0 (dispatch [:show-add-participants #_navigator])
@ -174,43 +74,24 @@
2 (dispatch [:leave-group-chat #_navigator]))) 2 (dispatch [:leave-group-chat #_navigator])))
(defn overlay [{:keys [on-click-outside]} items] (defn overlay [{:keys [on-click-outside]} items]
[view {:position :absolute [view st/actions-overlay
:top 0 [touchable-highlight {:on-press on-click-outside
:bottom 0 :style st/overlay-highlight}
:left 0
:right 0}
[touchable-highlight {:on-press on-click-outside
:underlay-color :transparent
:style {:flex 1}}
[view nil]] [view nil]]
items]) items])
(defn action-view [action] (defn action-view [{:keys [icon-style handler title subtitle]
icon-name :icon}]
[touchable-highlight {:on-press (fn [] [touchable-highlight {:on-press (fn []
(dispatch [:set-show-actions false]) (dispatch [:set-show-actions false])
((:handler action))) (handler))}
:underlay-color :transparent} [view st/action-icon-row
[view {:style {:flexDirection "row" [view st/action-icon-view
:height 56}} [icon icon-name icon-style]]
[view {:width 56 [view st/action-view-st
:height 56 [text {:style st/action-title} title]
:alignItems "center" (when-let [subtitle subtitle]
:justifyContent "center"} [text {:style st/action-subtitle}
[image {:source {:uri (:icon action)}
:style (:icon-style action)}]]
[view {:style {:flex 1
:alignItems "flex-start"
:justifyContent "center"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 14
:fontFamily font}}
(:title action)]
(when-let [subtitle (:subtitle action)]
[text {:style {:marginTop 1
:color text2-color
:fontSize 12
:fontFamily font}}
subtitle])]]]) subtitle])]]])
(defn actions-list-view [] (defn actions-list-view []
@ -218,40 +99,33 @@
(subscribe [:chat-properties [:group-chat :name :contacts :active]])] (subscribe [:chat-properties [:group-chat :name :contacts :active]])]
(when-let [actions (when (and @group-chat @active) (when-let [actions (when (and @group-chat @active)
[{:title "Add Contact to chat" [{:title "Add Contact to chat"
:icon :icon_menu_group :icon :menu_group
:icon-style {:width 25 :icon-style {:width 25
:height 19} :height 19}
:handler nil #_#(dispatch [:show-add-participants :handler nil #_#(dispatch [:show-add-participants
navigator])} navigator])}
{:title "Remove Contact from chat" {:title "Remove Contact from chat"
:subtitle "Alex, John" :subtitle "Alex, John"
:icon :icon_search_gray_copy :icon :search_gray_copy
:icon-style {:width 17 :icon-style {:width 17
:height 17} :height 17}
:handler nil #_#(dispatch :handler nil #_#(dispatch
[:show-remove-participants navigator])} [:show-remove-participants navigator])}
{:title "Leave Chat" {:title "Leave Chat"
:icon :icon_muted :icon :muted
:icon-style {:width 18 :icon-style {:width 18
:height 21} :height 21}
:handler nil #_#(dispatch [:leave-group-chat :handler nil #_#(dispatch [:leave-group-chat
navigator])} navigator])}
{:title "Settings" {:title "Settings"
:subtitle "Not implemented" :subtitle "Not implemented"
:icon :icon_settings :icon :settings
:icon-style {:width 20 :icon-style {:width 20
:height 13} :height 13}
:handler (fn [])}])] :handler (fn [])}])]
[view {:style {:backgroundColor toolbar-background1 [view st/actions-wrapper
:elevation 2 [view st/actions-separator]
:position :absolute [view st/actions-view-st
:top 56
:left 0
:right 0}}
[view {:style {:marginLeft 16
:height 1.5
:backgroundColor separator-color}}]
[view {:style {:marginVertical 10}}
(for [action actions] (for [action actions]
^{:key action} [action-view action])]]))) ^{:key action} [action-view action])]])))
@ -264,67 +138,33 @@
(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 {:style {:flexDirection "row" [view st/toolbar-view
:height 56
:backgroundColor toolbar-background1
:elevation 2}}
(when (not @show-actions) (when (not @show-actions)
[touchable-highlight {:on-press #(dispatch [:navigate-back]) [touchable-highlight {:on-press #(dispatch [:navigate-back])}
:underlay-color :transparent} [view st/icon-view
[view {:width 56 [icon :back st/back-icon]]])
:height 56} [view (st/chat-name-view @show-actions)
[image {:source {:uri "icon_back"} [text {:style st/chat-name-text}
:style {:marginTop 21
:marginLeft 23
:width 8
:height 14}}]]])
[view {:style {:flex 1
:marginLeft (if @show-actions 16 0)
:alignItems "flex-start"
:justifyContent "center"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font}}
(or @name "Chat name")] (or @name "Chat name")]
(if @group-chat (if @group-chat
[view {:style {:flexDirection :row}} [view {:flexDirection :row}
[image {:source {:uri :icon_group} [icon :group st/group-icon]
:style {:marginTop 4 [text {:style st/members}
:width 14
:height 9}}]
[text {:style {:marginTop -0.5
:marginLeft 4
:fontFamily font
:fontSize 12
:color text2-color}}
(let [cnt (count @contacts)] (let [cnt (count @contacts)]
(str cnt (str cnt
(if (< 1 cnt) (if (< 1 cnt)
" members" " members"
" member") " member")
", " cnt " active"))]] ", " cnt " active"))]]
[text {:style {:marginTop 1 [text {:style st/last-activity} "Active a minute ago"])]
:color text2-color
:fontSize 12
:fontFamily font}}
"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])}
:underlay-color :transparent} [view st/icon-view
[view {:style {:width 56 [icon :up st/up-icon]]]
:height 56}}
[image {:source {:uri :icon_up}
:style {:marginTop 23
:marginLeft 21
:width 14
:height 8}}]]]
[touchable-highlight [touchable-highlight
{:on-press #(dispatch [:set-show-actions true]) {:on-press #(dispatch [:set-show-actions true])}
:underlay-color :transparent} [view st/icon-view
[view {:style {:width 56
:height 56}}
[chat-photo {}] [chat-photo {}]
[contact-online {:online true}]]])]))) [contact-online {:online true}]]])])))
@ -343,8 +183,7 @@
group-chat (subscribe [:chat :group-chat]) group-chat (subscribe [:chat :group-chat])
show-actions-atom (subscribe [:show-actions])] show-actions-atom (subscribe [:show-actions])]
(fn [] (fn []
[view {:style {:flex 1 [view st/chat-view
:backgroundColor chat-background}}
[toolbar] [toolbar]
[messages-view @group-chat] [messages-view @group-chat]
(when @group-chat [typing-all]) (when @group-chat [typing-all])

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

@ -187,8 +187,7 @@
(fn [{:keys [msg-id content outgoing group-chat from]}] (fn [{:keys [msg-id content outgoing group-chat from]}]
(let [commands @commands-atom (let [commands @commands-atom
{:keys [command content]} (parse-command-request-msg-content commands content)] {:keys [command content]} (parse-command-request-msg-content commands content)]
[touchable-highlight {:onPress #(set-chat-command msg-id command) [touchable-highlight {:onPress #(set-chat-command msg-id command)}
:underlay-color :transparent}
[view {:style {:paddingRight 16}} [view {:style {:paddingRight 16}}
[view {:style (merge {:borderRadius 14 [view {:style (merge {:borderRadius 14
:padding 12 :padding 12

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

@ -62,8 +62,7 @@
message] message]
(if (pos? (count message)) (if (pos? (count message))
[touchable-highlight [touchable-highlight
{:on-press send-command {:on-press send-command}
:underlay-color :transparent}
[view {:style {:marginTop 10 [view {:style {:marginTop 10
:marginRight 10 :marginRight 10
:width 36 :width 36
@ -75,8 +74,7 @@
:marginLeft 12 :marginLeft 12
:width 15 :width 15
:height 15}}]]] :height 15}}]]]
[touchable-highlight {:on-press cancel-command-input [touchable-highlight {:on-press cancel-command-input}
:underlay-color :transparent}
[view {:style {:marginTop 10 [view {:style {:marginTop 10
:marginRight 10 :marginRight 10
:width 36 :width 36

22
src/syng_im/components/chat/input/simple_command_staged.cljs
View File

@ -23,8 +23,8 @@
(fn [staged-command] (fn [staged-command]
(let [chat-id @chat-id-atom (let [chat-id @chat-id-atom
command (:command staged-command)] command (:command staged-command)]
[view {:style {:flex 1 [view {:style {:flex 1
:alignItems "flex-start" :alignItems "flex-start"
:flexDirection "column" :flexDirection "column"
:backgroundColor color-white}} :backgroundColor color-white}}
[view {:style {:flexDirection "column" [view {:style {:flexDirection "column"
@ -36,19 +36,17 @@
[view {:style {:backgroundColor (:color command) [view {:style {:backgroundColor (:color command)
:height 24 :height 24
:borderRadius 50 :borderRadius 50
:marginRight 32 :marginRight 32
:paddingTop 3 :paddingTop 3
:paddingHorizontal 12}} :paddingHorizontal 12}}
[text {:style {:fontSize 12 [text {:style {:fontSize 12
:fontFamily font :fontFamily font
:color color-white}} :color color-white}}
(:text command)]] (:text command)]]
[touchable-highlight {:style {:position "absolute" [touchable-highlight {:style {:position "absolute"
:top 7 :top 7
:right 4} :right 4}
:onPress #(cancel-command-input :onPress #(cancel-command-input staged-command)}
staged-command)
:underlay-color :transparent}
[image {:source res/icon-close-gray [image {:source res/icon-close-gray
:style {:width 10 :style {:width 10
:height 10}}]]] :height 10}}]]]

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

@ -62,8 +62,7 @@
:height 20}}] :height 20}}]
(when (or (pos? (count input-message)) (when (or (pos? (count input-message))
(pos? (count @staged-commands-atom))) (pos? (count @staged-commands-atom)))
[touchable-highlight {:on-press #(send @chat input-message) [touchable-highlight {:on-press #(send @chat input-message)}
:underlay-color :transparent}
[view {:style {:marginTop 10 [view {:style {:marginTop 10
:marginRight 10 :marginRight 10
:width 36 :width 36

4
src/syng_im/components/chat/suggestions.cljs
View File

@ -20,9 +20,7 @@
(dispatch [:set-chat-command command])) (dispatch [:set-chat-command command]))
(defn suggestion-list-item [suggestion] (defn suggestion-list-item [suggestion]
[touchable-highlight {:onPress (fn [] [touchable-highlight {:onPress #(set-command-input (keyword (:command suggestion)))}
(set-command-input (keyword (:command suggestion))))
:underlay-color :transparent}
[view {:style {:flexDirection "row" [view {:style {:flexDirection "row"
:marginVertical 1 :marginVertical 1
:marginHorizontal 0 :marginHorizontal 0

168
src/syng_im/components/chat_styles.cljs Normal file
View File

@ -0,0 +1,168 @@
(ns syng-im.components.chat-styles
(:require [syng-im.components.styles :refer [font
title-font
color-white
chat-background
online-color
selected-message-color
separator-color
text1-color
text2-color
toolbar-background1]]))
(def chat-view
{:flex 1
:backgroundColor chat-background})
(def toolbar-view
{:flexDirection :row
:height 56
:backgroundColor toolbar-background1
:elevation 2})
(def icon-view
{:width 56
:height 56})
(def back-icon
{:marginTop 21
:marginLeft 23
:width 8
:height 14})
(defn chat-name-view [show-actions]
{:flex 1
:marginLeft (if show-actions 16 0)
:alignItems :flex-start
:justifyContent :center})
(def chat-name-text
{:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font})
(def group-icon
{:marginTop 4
:width 14
:height 9})
(def up-icon
{:marginTop 23
:marginLeft 21
:width 14
:height 8})
(def members
{:marginTop -0.5
:marginLeft 4
:fontFamily font
:fontSize 12
:color text2-color})
(def last-activity
{:marginTop 1
:color text2-color
:fontSize 12
:fontFamily font})
(def actions-wrapper
{:backgroundColor toolbar-background1
:elevation 2
:position :absolute
:top 56
:left 0
:right 0})
(def actions-separator
{:marginLeft 16
:height 1.5
:backgroundColor separator-color})
(def actions-view-st
{:marginVertical 10})
(def action-icon-row
{:flexDirection :row
:height 56})
(def action-icon-view
(merge icon-view
{:alignItems :center
:justifyContent :center}))
(def action-view-st
{:flex 1
:alignItems :flex-start
:justifyContent :center})
(def action-title
{:marginTop -2.5
:color text1-color
:fontSize 14
:fontFamily font})
(def action-subtitle
{:marginTop 1
:color text2-color
:fontSize 12
:fontFamily font})
(def online-view
{:position :absolute
:top 30
:left 30
:width 20
:height 20
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white})
(def online-dot
{:position :absolute
:top 6
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white})
(def online-dot-left (merge online-dot {:left 3}))
(def online-dot-right (merge online-dot {:left 9}))
(def typing-all-st
{:marginBottom 20})
(def typing-view
{:width 260
:marginTop 10
:paddingLeft 8
:paddingRight 8
:alignItems :flex-start
:alignSelf :flex-start})
(def typing-background
{:borderRadius 14
:padding 12
:height 38
:backgroundColor selected-message-color})
(def typing-text
{:marginTop -2
:fontSize 12
:fontFamily font
:color text2-color})
(def chat-photo-st
{:borderRadius 50
:width 36
:height 36})
(def actions-overlay
{:position :absolute
:top 0
:bottom 0
:left 0
:right 0})
(def overlay-highlight
{:flex 1})

5
src/syng_im/components/chats/chat_list_item.cljs
View File

@ -10,9 +10,8 @@
[syng-im.resources :as res])) [syng-im.resources :as res]))
(defn chat-list-item [chat-obj navigator] (defn chat-list-item [chat-obj navigator]
[touchable-highlight {:on-press (fn [] [touchable-highlight
(dispatch [:show-chat (aget chat-obj "chat-id") navigator :push])) {:on-press #(dispatch [:show-chat (aget chat-obj "chat-id") navigator :push])}
:underlay-color :transparent}
;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj ;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj
;; TODO should chat-obj be clj-map? ;; TODO should chat-obj be clj-map?
[view {} [chat-list-item-inner-view (merge (js->clj chat-obj :keywordize-keys true) [view {} [chat-list-item-inner-view (merge (js->clj chat-obj :keywordize-keys true)

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

@ -68,8 +68,7 @@
:fontSize 14 :fontSize 14
:lineHeight 20}} :lineHeight 20}}
"Members"] "Members"]
[touchable-highlight {:on-press (fn []) [touchable-highlight {:on-press (fn [])}
:underlay-color :transparent}
[view {:style {:flexDirection "row" [view {:style {:flexDirection "row"
:marginBottom 16}} :marginBottom 16}}
[image {:source {:uri "icon_add_gray"} [image {:source {:uri "icon_add_gray"}

4
src/syng_im/components/contact_list/contact.cljs
View File

@ -9,7 +9,5 @@
(defn contact-view [{:keys [navigator contact]}] (defn contact-view [{:keys [navigator contact]}]
(let [{:keys [whisper-identity]} contact] (let [{:keys [whisper-identity]} contact]
[touchable-highlight {:onPress (fn [] [touchable-highlight {:onPress #(show-chat navigator whisper-identity)}
(show-chat navigator whisper-identity))
:underlay-color :transparent}
[view {} [contact-inner-view contact]]])) [view {} [contact-inner-view contact]]]))

11
src/syng_im/components/react.cljs
View File

@ -8,11 +8,20 @@
(def text (r/adapt-react-class (.-Text js/React))) (def text (r/adapt-react-class (.-Text js/React)))
(def view (r/adapt-react-class (.-View js/React))) (def view (r/adapt-react-class (.-View js/React)))
(def image (r/adapt-react-class (.-Image js/React))) (def image (r/adapt-react-class (.-Image js/React)))
(def touchable-highlight (r/adapt-react-class (.-TouchableHighlight js/React))) (def touchable-highlight-class (r/adapt-react-class (.-TouchableHighlight js/React)))
(defn touchable-highlight [props content]
[touchable-highlight-class
(merge {:underlay-color :transparent} props)
content])
(def toolbar-android (r/adapt-react-class (.-ToolbarAndroid js/React))) (def toolbar-android (r/adapt-react-class (.-ToolbarAndroid js/React)))
(def list-view (r/adapt-react-class (.-ListView js/React))) (def list-view (r/adapt-react-class (.-ListView js/React)))
(def text-input (r/adapt-react-class (.-TextInput js/React))) (def text-input (r/adapt-react-class (.-TextInput js/React)))
(defn icon [n style]
[image {:source {:uri (keyword (str "icon_" (name n)))}
:style style}])
(def platform (.. js/React -Platform -OS)) (def platform (.. js/React -Platform -OS))
(def android? (= platform "android")) (def android? (= platform "android"))

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

@ -24,16 +24,13 @@
:height 56 :height 56
:elevation 2}} :elevation 2}}
(if nav-action (if nav-action
[touchable-highlight {:on-press (:handler nav-action) [touchable-highlight {:on-press (:handler nav-action)}
:underlay-color :transparent}
[view {:width 56 [view {:width 56
:height 56 :height 56
:alignItems "center" :alignItems "center"
:justifyContent "center"} :justifyContent "center"}
[image (:image nav-action)]]] [image (:image nav-action)]]]
[touchable-highlight {:on-press (fn [] [touchable-highlight {:on-press #(nav-pop navigator)}
(nav-pop navigator))
:underlay-color :transparent}
[view {:width 56 [view {:width 56
:height 56} :height 56}
[image {:source {:uri "icon_back"} [image {:source {:uri "icon_back"}
@ -41,16 +38,15 @@
:marginLeft 23 :marginLeft 23
:width 8 :width 8
:height 14}}]]]) :height 14}}]]])
[view {:style {:flex 1 [view {:style {:flex 1
:alignItems "center" :alignItems "center"
:justifyContent "center"}} :justifyContent "center"}}
[text {:style {:marginTop -2.5 [text {:style {:marginTop -2.5
:color text1-color :color text1-color
:fontSize 16 :fontSize 16
:fontFamily font}} :fontFamily font}}
title]] title]]
[touchable-highlight {:on-press (:handler action) [touchable-highlight {:on-press (:handler action)}
:underlay-color :transparent}
[view {:width 56 [view {:width 56
:height 56 :height 56
:alignItems "center" :alignItems "center"