Menu items icons. Hide actions menu on click outside.
virvar
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 684 B |
|
After Width: | Height: | Size: 945 B |
|
After Width: | Height: | Size: 315 B |
|
After Width: | Height: | Size: 868 B |
|
After Width: | Height: | Size: 829 B |
|
After Width: | Height: | Size: 474 B |
|
After Width: | Height: | Size: 520 B |
|
After Width: | Height: | Size: 243 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 881 B |
|
After Width: | Height: | Size: 969 B |
|
After Width: | Height: | Size: 351 B |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 518 B |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 679 B |
|
|
@ -101,16 +101,18 @@
|
|||
^{:key member} [typing member])])
|
||||
|
||||
(defn action-view [action]
|
||||
[touchable-highlight {:on-press (:handler action)
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(dispatch [:set-show-actions false])
|
||||
((:handler action)))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:flexDirection "row"
|
||||
:height 56}}
|
||||
[view {:width 56
|
||||
:height 56}
|
||||
:height 56
|
||||
:alignItems "center"
|
||||
:justifyContent "center"}
|
||||
[image {:source {:uri (:icon action)}
|
||||
:style (merge (:icon-style action)
|
||||
{:marginTop 21
|
||||
:marginLeft 23})}]]
|
||||
:style (:icon-style action)}]]
|
||||
[view {:style {:flex 1
|
||||
:alignItems "flex-start"
|
||||
:justifyContent "center"}}
|
||||
|
|
@ -126,95 +128,133 @@
|
|||
:fontFamily font}}
|
||||
subtitle])]]])
|
||||
|
||||
(defn actions-view [navigator chat]
|
||||
(when-let [actions (when (or true (and (:group-chat chat) ;; temp
|
||||
(:is-active chat)))
|
||||
(defn actions-list-view [navigator chat]
|
||||
(when-let [actions (when (and (:group-chat chat)
|
||||
(:is-active chat))
|
||||
[{:title "Add Contact to chat"
|
||||
:icon "icon_group"
|
||||
:icon-style {:width 14
|
||||
:height 9}
|
||||
:icon "icon_menu_group"
|
||||
:icon-style {:width 25
|
||||
:height 19}
|
||||
:handler #(dispatch [:show-add-participants navigator])}
|
||||
{:title "Remove Contact from chat"
|
||||
:subtitle "Alex, John"
|
||||
:icon "icon_search"
|
||||
:icon-style {:width 14
|
||||
:height 9}
|
||||
:icon "icon_search_gray_copy"
|
||||
:icon-style {:width 17
|
||||
:height 17}
|
||||
: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
|
||||
:icon "icon_muted"
|
||||
:icon-style {:width 18
|
||||
:height 21}
|
||||
:handler #(dispatch [:leave-group-chat navigator])}
|
||||
{:title "Settings"
|
||||
:subtitle "Not implemented"
|
||||
:icon "icon_settings"
|
||||
:icon-style {:width 20
|
||||
:height 13}
|
||||
:handler (fn [] )}])]
|
||||
[view {:style {:backgroundColor color-white
|
||||
:elevation 2
|
||||
:position "absolute"
|
||||
:top 56
|
||||
:left 0
|
||||
:right 0}}
|
||||
[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
|
||||
(defn overlay [{:keys [on-click-outside]} items]
|
||||
[view {:position "absolute"
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0}
|
||||
[touchable-highlight {:on-press on-click-outside
|
||||
:underlay-color :transparent
|
||||
:style {:flex 1}}
|
||||
[view nil]]
|
||||
items])
|
||||
|
||||
(defn actions-view [navigator chat]
|
||||
[overlay {:on-click-outside (fn []
|
||||
(dispatch [:set-show-actions false]))}
|
||||
[actions-list-view navigator chat]])
|
||||
|
||||
(defn toolbar [navigator chat show-actions]
|
||||
[view {:style {:flex (if show-actions 1 0)}}
|
||||
[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
|
||||
: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]]))
|
||||
: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"])]
|
||||
(if show-actions
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(dispatch [:set-show-actions false]))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:width 56
|
||||
:height 56}}
|
||||
[image {:source {:uri "icon_up"}
|
||||
:style {:marginTop 23
|
||||
:marginLeft 21
|
||||
:width 14
|
||||
:height 8}}]]]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(dispatch [:set-show-actions true]))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:width 56
|
||||
:height 56}}
|
||||
[chat-photo {}]
|
||||
[contact-online {:online true}]]])]]])
|
||||
|
||||
(defn chat [{:keys [navigator]}]
|
||||
(let [messages (subscribe [:get-chat-messages])
|
||||
chat (subscribe [:get-current-chat])]
|
||||
chat (subscribe [:get-current-chat])
|
||||
show-actions-atom (subscribe [:show-actions])]
|
||||
(fn []
|
||||
(let [msgs @messages
|
||||
;_ (log/debug "messages=" msgs)
|
||||
|
|
@ -226,7 +266,7 @@
|
|||
contact-by-identity (contacts-by-identity contacts)]
|
||||
[view {:style {:flex 1
|
||||
:backgroundColor chat-background}}
|
||||
[toolbar navigator @chat]
|
||||
[toolbar navigator @chat @show-actions-atom]
|
||||
(let [last-msg-id (:last-msg-id @chat)]
|
||||
[list-view {:dataSource datasource
|
||||
:renderScrollComponent (fn [props]
|
||||
|
|
@ -240,4 +280,6 @@
|
|||
(when (:group-chat @chat)
|
||||
[typing-all])
|
||||
(when (:is-active @chat)
|
||||
[chat-message-new])]))))
|
||||
[chat-message-new])
|
||||
(when @show-actions-atom
|
||||
[actions-view navigator @chat])]))))
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
:last-message nil}
|
||||
:chats {}
|
||||
:chats-updated-signal 0
|
||||
:show-actions false
|
||||
:new-group #{}
|
||||
:new-participants #{}
|
||||
:signed-up false})
|
||||
|
|
@ -38,5 +39,6 @@
|
|||
[:chats chat-id :command-requests])
|
||||
(defn chat-command-request-path [chat-id msg-id]
|
||||
[:chats chat-id :command-requests msg-id])
|
||||
(def show-actions-path [:show-actions])
|
||||
(def new-group-path [:new-group])
|
||||
(def new-participants-path [:new-participants])
|
||||
|
|
|
|||
|
|
@ -117,6 +117,11 @@
|
|||
(log/debug action commands)
|
||||
(set-commands db commands)))
|
||||
|
||||
(register-handler :set-show-actions
|
||||
(fn [db [action show-actions]]
|
||||
(log/debug action)
|
||||
(assoc-in db db/show-actions-path show-actions)))
|
||||
|
||||
;; -- Protocol --------------------------------------------------------------
|
||||
|
||||
(register-handler :initialize-protocol
|
||||
|
|
|
|||
|
|
@ -109,6 +109,11 @@
|
|||
(reaction
|
||||
(get @db :signed-up))))
|
||||
|
||||
(register-sub
|
||||
:show-actions
|
||||
(fn [db _]
|
||||
(reaction (get-in @db db/show-actions-path))))
|
||||
|
||||
(register-sub
|
||||
:get-contacts
|
||||
(fn [db _]
|
||||
|
|
|
|||