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

styles

This commit is contained in:
Roman Volosovskyi 2016-05-07 16:39:03 +03:00
parent 357249a49b
commit 1ce4c1d459
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
text
image
icon
navigator
touchable-highlight
toolbar-android
list-view
list-item
android?]]
[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]]
[syng-im.components.chat-styles :as st]
[syng-im.utils.logging :as log]
[syng-im.resources :as res]
[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-new :refer [chat-message-new]]))
(defn contacts-by-identity [contacts]
(->> contacts
(map (fn [{:keys [identity] :as contact}]
@ -50,105 +41,25 @@
[image {:source (if (s/blank? photo-path)
res/user-no-photo
{:uri photo-path})
:style {:borderRadius 50
:width 36
:height 36}}]])
:style st/chat-photo-st}]])
(defn contact-online [{:keys [online]}]
(when online
[view {:position "absolute"
:top 30
:left 30
: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}]]))
[view st/online-view
[view st/online-dot-left]
[view st/online-dot-right]]))
(defn typing [member]
[view {:style {:width 260
:marginTop 10
:paddingLeft 8
: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}}
[view st/typing-view
[view st/typing-background
[text {:style st/typing-text}
(str member " is typing")]]])
(defn typing-all []
[view {:style {:marginBottom 20}}
[view st/typing-all-st
(for [member ["Geoff" "Justas"]]
^{: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]
(fn [row _ _]
(let [msg (-> row
@ -156,17 +67,6 @@
(assoc :group-chat group-chat))]
(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]
(case position
0 (dispatch [:show-add-participants #_navigator])
@ -174,43 +74,24 @@
2 (dispatch [:leave-group-chat #_navigator])))
(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 st/actions-overlay
[touchable-highlight {:on-press on-click-outside
:style st/overlay-highlight}
[view nil]]
items])
(defn action-view [action]
(defn action-view [{:keys [icon-style handler title subtitle]
icon-name :icon}]
[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
:alignItems "center"
:justifyContent "center"}
[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}}
(handler))}
[view st/action-icon-row
[view st/action-icon-view
[icon icon-name icon-style]]
[view st/action-view-st
[text {:style st/action-title} title]
(when-let [subtitle subtitle]
[text {:style st/action-subtitle}
subtitle])]]])
(defn actions-list-view []
@ -218,40 +99,33 @@
(subscribe [:chat-properties [:group-chat :name :contacts :active]])]
(when-let [actions (when (and @group-chat @active)
[{:title "Add Contact to chat"
:icon :icon_menu_group
:icon :menu_group
:icon-style {:width 25
:height 19}
:handler nil #_#(dispatch [:show-add-participants
navigator])}
{:title "Remove Contact from chat"
:subtitle "Alex, John"
:icon :icon_search_gray_copy
:icon :search_gray_copy
:icon-style {:width 17
:height 17}
:handler nil #_#(dispatch
[:show-remove-participants navigator])}
{:title "Leave Chat"
:icon :icon_muted
:icon :muted
:icon-style {:width 18
:height 21}
:handler nil #_#(dispatch [:leave-group-chat
navigator])}
{:title "Settings"
:subtitle "Not implemented"
:icon :icon_settings
:icon :settings
:icon-style {:width 20
:height 13}
:handler (fn [])}])]
[view {:style {:backgroundColor toolbar-background1
:elevation 2
:position :absolute
:top 56
:left 0
:right 0}}
[view {:style {:marginLeft 16
:height 1.5
:backgroundColor separator-color}}]
[view {:style {:marginVertical 10}}
[view st/actions-wrapper
[view st/actions-separator]
[view st/actions-view-st
(for [action actions]
^{:key action} [action-view action])]])))
@ -264,67 +138,33 @@
(subscribe [:chat-properties [:group-chat :name :contacts]])
show-actions (subscribe [:show-actions])]
(fn []
[view {:style {:flexDirection "row"
:height 56
:backgroundColor toolbar-background1
:elevation 2}}
[view st/toolbar-view
(when (not @show-actions)
[touchable-highlight {:on-press #(dispatch [:navigate-back])
: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}}
[touchable-highlight {:on-press #(dispatch [:navigate-back])}
[view st/icon-view
[icon :back st/back-icon]]])
[view (st/chat-name-view @show-actions)
[text {:style st/chat-name-text}
(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}}
[view {:flexDirection :row}
[icon :group st/group-icon]
[text {:style st/members}
(let [cnt (count @contacts)]
(str cnt
(if (< 1 cnt)
" members"
" member")
", " cnt " active"))]]
[text {:style {:marginTop 1
:color text2-color
:fontSize 12
:fontFamily font}}
"Active a minute ago"])]
[text {:style st/last-activity} "Active a minute ago"])]
(if @show-actions
[touchable-highlight
{:on-press #(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}}]]]
{:on-press #(dispatch [:set-show-actions false])}
[view st/icon-view
[icon :up st/up-icon]]]
[touchable-highlight
{:on-press #(dispatch [:set-show-actions true])
:underlay-color :transparent}
[view {:style {:width 56
:height 56}}
{:on-press #(dispatch [:set-show-actions true])}
[view st/icon-view
[chat-photo {}]
[contact-online {:online true}]]])])))
@ -343,8 +183,7 @@
group-chat (subscribe [:chat :group-chat])
show-actions-atom (subscribe [:show-actions])]
(fn []
[view {:style {:flex 1
:backgroundColor chat-background}}
[view st/chat-view
[toolbar]
[messages-view @group-chat]
(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]}]
(let [commands @commands-atom
{:keys [command content]} (parse-command-request-msg-content commands content)]
[touchable-highlight {:onPress #(set-chat-command msg-id command)
:underlay-color :transparent}
[touchable-highlight {:onPress #(set-chat-command msg-id command)}
[view {:style {:paddingRight 16}}
[view {:style (merge {:borderRadius 14
:padding 12

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

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

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

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

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

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

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

@ -20,9 +20,7 @@
(dispatch [:set-chat-command command]))
(defn suggestion-list-item [suggestion]
[touchable-highlight {:onPress (fn []
(set-command-input (keyword (:command suggestion))))
:underlay-color :transparent}
[touchable-highlight {:onPress #(set-command-input (keyword (:command suggestion)))}
[view {:style {:flexDirection "row"
:marginVertical 1
: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]))
(defn chat-list-item [chat-obj navigator]
[touchable-highlight {:on-press (fn []
(dispatch [:show-chat (aget chat-obj "chat-id") navigator :push]))
:underlay-color :transparent}
[touchable-highlight
{:on-press #(dispatch [:show-chat (aget chat-obj "chat-id") navigator :push])}
;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj
;; TODO should chat-obj be clj-map?
[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
:lineHeight 20}}
"Members"]
[touchable-highlight {:on-press (fn [])
:underlay-color :transparent}
[touchable-highlight {:on-press (fn [])}
[view {:style {:flexDirection "row"
:marginBottom 16}}
[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]}]
(let [{:keys [whisper-identity]} contact]
[touchable-highlight {:onPress (fn []
(show-chat navigator whisper-identity))
:underlay-color :transparent}
[touchable-highlight {:onPress #(show-chat navigator whisper-identity)}
[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 view (r/adapt-react-class (.-View 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 list-view (r/adapt-react-class (.-ListView 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 android? (= platform "android"))

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

@ -24,16 +24,13 @@
:height 56
:elevation 2}}
(if nav-action
[touchable-highlight {:on-press (:handler nav-action)
:underlay-color :transparent}
[touchable-highlight {:on-press (:handler nav-action)}
[view {:width 56
:height 56
:alignItems "center"
:justifyContent "center"}
[image (:image nav-action)]]]
[touchable-highlight {:on-press (fn []
(nav-pop navigator))
:underlay-color :transparent}
[touchable-highlight {:on-press #(nav-pop navigator)}
[view {:width 56
:height 56}
[image {:source {:uri "icon_back"}
@ -41,16 +38,15 @@
:marginLeft 23
:width 8
:height 14}}]]])
[view {:style {:flex 1
:alignItems "center"
[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}
[touchable-highlight {:on-press (:handler action)}
[view {:width 56
:height 56
:alignItems "center"