Start custom toolbar
This commit is contained in:
virvar
parent
c81b0dfc8c
commit
1b3c788ec7
|
|
@ -6,6 +6,7 @@
|
|||
text
|
||||
image
|
||||
navigator
|
||||
touchable-highlight
|
||||
toolbar-android]]
|
||||
[syng-im.components.realm :refer [list-view]]
|
||||
[syng-im.components.styles :refer [font
|
||||
|
|
@ -14,6 +15,7 @@
|
|||
chat-background
|
||||
online-color
|
||||
selected-message-color
|
||||
separator-color
|
||||
text1-color
|
||||
text2-color]]
|
||||
[syng-im.utils.logging :as log]
|
||||
|
|
@ -41,7 +43,8 @@
|
|||
:background-color background-color))))
|
||||
|
||||
(defn chat-photo [{:keys [photo-path]}]
|
||||
[view {:borderRadius 50}
|
||||
[view {:margin 10
|
||||
:borderRadius 50}
|
||||
[image {:source (if (s/blank? photo-path)
|
||||
res/user-no-photo
|
||||
{:uri photo-path})
|
||||
|
|
@ -52,8 +55,8 @@
|
|||
(defn contact-online [{:keys [online]}]
|
||||
(when online
|
||||
[view {:position "absolute"
|
||||
:top 20
|
||||
:left 20
|
||||
:top 30
|
||||
:left 30
|
||||
:width 20
|
||||
:height 20
|
||||
:borderRadius 50
|
||||
|
|
@ -97,48 +100,117 @@
|
|||
(for [member ["Geoff" "Justas"]]
|
||||
^{:key member} [typing member])])
|
||||
|
||||
(defn toolbar-content-chat [chat]
|
||||
(let [group? (:group-chat chat)]
|
||||
(defn action-view [action]
|
||||
[touchable-highlight {:on-press (:handler action)
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:flexDirection "row"
|
||||
:height 56}}
|
||||
[view {:width 56
|
||||
:height 56}
|
||||
[image {:source {:uri (:icon action)}
|
||||
:style (merge (:icon-style action)
|
||||
{:marginTop 21
|
||||
:marginLeft 23})}]]
|
||||
[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 (chat :name)
|
||||
"Chat name")]
|
||||
(if group?
|
||||
[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
|
||||
: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])]]])
|
||||
|
||||
(defn actions-view [navigator chat]
|
||||
(when-let [actions (when (or true (and (:group-chat chat) ;; temp
|
||||
(:is-active chat)))
|
||||
[{:title "Add Contact to chat"
|
||||
:icon "icon_group"
|
||||
:icon-style {:width 14
|
||||
:height 9}
|
||||
:handler #(dispatch [:show-add-participants navigator])}
|
||||
{:title "Remove Contact from chat"
|
||||
:subtitle "Alex, John"
|
||||
:icon "icon_search"
|
||||
:icon-style {:width 14
|
||||
:height 9}
|
||||
:handler #(dispatch [:show-remove-participants navigator])}
|
||||
{:title "Leave Chat"
|
||||
:icon "icon_search"
|
||||
:icon-style {:width 14
|
||||
:height 9}
|
||||
:handler #(dispatch [:leave-group-chat navigator])}])]
|
||||
[view nil
|
||||
[view {:style {:marginLeft 16
|
||||
:height 1.5
|
||||
:backgroundColor separator-color}}]
|
||||
[view {:style {:marginVertical 10}}
|
||||
(for [action actions]
|
||||
^{:key action} [action-view action])]]))
|
||||
|
||||
(defn toolbar [navigator chat]
|
||||
(let [show-actions true]
|
||||
[view {:style {:flexDirection "column"
|
||||
:backgroundColor color-white
|
||||
:elevation 2}}
|
||||
[view {:style {:flexDirection "row"
|
||||
:height 56}}
|
||||
(when (not show-actions)
|
||||
[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
|
||||
:marginLeft (if show-actions 16 0)
|
||||
:alignItems "flex-start"
|
||||
:justifyContent "center"}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16
|
||||
:fontFamily font}}
|
||||
(or (chat :name)
|
||||
"Chat name")]
|
||||
(if (:group-chat 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}}
|
||||
(str (count (:contacts chat))
|
||||
(if (< 1 (count (:contacts chat)))
|
||||
" members"
|
||||
" member")
|
||||
", " (count (:contacts chat)) " active")]]
|
||||
[text {:style {:marginTop 1
|
||||
:color text2-color
|
||||
:fontSize 12
|
||||
:color text2-color}}
|
||||
(str (count (:contacts chat))
|
||||
(if (< 1 (count (:contacts chat)))
|
||||
" members"
|
||||
" member")
|
||||
", " (count (:contacts chat)) " active")]]
|
||||
[text {:style {:marginTop 1
|
||||
:color text2-color
|
||||
:fontSize 12
|
||||
:fontFamily font}}
|
||||
"Active a minute ago"])]
|
||||
(when-not group?
|
||||
[view {:style {:position "absolute"
|
||||
:top 10
|
||||
:right 66}}
|
||||
[chat-photo {}]
|
||||
[contact-online {:online true}]])]))
|
||||
:fontFamily font}}
|
||||
"Active a minute ago"])]
|
||||
(when-not (:group-chat chat)
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(nav-pop navigator))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:width 56
|
||||
:height 56}}
|
||||
[chat-photo {}]
|
||||
[contact-online {:online true}]]])]
|
||||
[actions-view navigator chat]]))
|
||||
|
||||
(defn chat [{:keys [navigator]}]
|
||||
(let [messages (subscribe [:get-chat-messages])
|
||||
|
|
@ -154,31 +226,7 @@
|
|||
contact-by-identity (contacts-by-identity contacts)]
|
||||
[view {:style {:flex 1
|
||||
:backgroundColor chat-background}}
|
||||
(when android?
|
||||
;; TODO add IOS version
|
||||
[toolbar-android {:navIcon {:uri "icon_back"}
|
||||
:style {:backgroundColor color-white
|
||||
:height 56
|
||||
:elevation 2}
|
||||
:actions (when (and (:group-chat @chat)
|
||||
(:is-active @chat))
|
||||
[{: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}])
|
||||
:onActionSelected (fn [position]
|
||||
(case position
|
||||
0 (dispatch [:show-add-participants navigator])
|
||||
1 (dispatch [:show-remove-participants navigator])
|
||||
2 (dispatch [:leave-group-chat navigator])))
|
||||
:onIconClicked (fn []
|
||||
(nav-pop navigator))}
|
||||
[toolbar-content-chat @chat]])
|
||||
[toolbar navigator @chat]
|
||||
(let [last-msg-id (:last-msg-id @chat)]
|
||||
[list-view {:dataSource datasource
|
||||
:renderScrollComponent (fn [props]
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
view
|
||||
text
|
||||
image
|
||||
navigator
|
||||
toolbar-android]]
|
||||
touchable-highlight
|
||||
navigator]]
|
||||
[syng-im.components.realm :refer [list-view]]
|
||||
[syng-im.utils.logging :as log]
|
||||
[syng-im.navigation :refer [nav-pop]]
|
||||
|
|
@ -24,6 +24,38 @@
|
|||
text2-color]]
|
||||
[syng-im.components.icons.ionicons :refer [icon]]))
|
||||
|
||||
(defn toolbar []
|
||||
[view {:style {:flexDirection "row"
|
||||
:backgroundColor color-white
|
||||
: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 [{:keys [navigator]}]
|
||||
(let [chats (subscribe [:get-chats])]
|
||||
|
|
@ -33,27 +65,7 @@
|
|||
datasource (to-realm-datasource chats)]
|
||||
[view {:style {:flex 1
|
||||
:backgroundColor "white"}}
|
||||
(when android?
|
||||
;; TODO add IOS version
|
||||
[toolbar-android {:navIcon {:uri "icon_hamburger"}
|
||||
:style {:backgroundColor color-white
|
||||
:height 56
|
||||
:elevation 2}
|
||||
:onIconClicked (fn []
|
||||
(nav-pop navigator))
|
||||
:actions [{:title "Search"
|
||||
:icon {:uri "icon_search"}
|
||||
:show "always"}]}
|
||||
[view {:style {:flex 1
|
||||
:alignItems "center"
|
||||
:justifyContent "center"
|
||||
:marginRight 112
|
||||
:backgroundColor "transparent"}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16
|
||||
:fontFamily font}}
|
||||
"Chats"]]])
|
||||
[toolbar]
|
||||
[list-view {:dataSource datasource
|
||||
:renderRow (fn [row section-id row-id]
|
||||
(r/as-element [chat-list-item row navigator]))
|
||||
|
|
|
|||
|
|
@ -19,3 +19,4 @@
|
|||
(def new-messages-count-color "#7099e632")
|
||||
(def chat-background "#EBF0F4")
|
||||
(def selected-message-color "#E4E9ED")
|
||||
(def separator-color "#0000001f")
|
||||
|
|
|
|||
Loading…
Reference in New Issue