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

Fix chat view indents

This commit is contained in:
virvar 2016-04-28 16:53:41 +03:00
parent f63e033e18
commit 953bc66223
3 changed files with 145 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -149,18 +149,43 @@
(let [msgs @messages (let [msgs @messages
;_ (log/debug "messages=" msgs) ;_ (log/debug "messages=" msgs)
;; temp to show first status ;; temp to show first status
msgs-clj (assoc (js->clj msgs) "-1" msgs-clj (as-> (js->clj msgs) ms
{:msg-id "-1" (assoc ms "-1"
:content (str "The brash businessman’s braggadocio " {:msg-id "-1"
"and public exchange with candidates " :content (str "The brash businessman’s braggadocio "
"in the US presidential election") "and public exchange with candidates "
:delivery-status "seen" "in the US presidential election")
:from "Status" :delivery-status "seen"
:chat-id "-" :from "Status"
:content-type content-type-status :chat-id "-"
:timestamp 1 :content-type content-type-status
:outgoing false :timestamp 1
:to nil}) "outgoing" false
:to nil})
(reduce (fn [items [n m]]
(assoc items (.parseInt js/window n) m
;; (assoc m "from" (if (< 0.5 (rand))
;; "Status"
;; "abc"))
))
{} ms)
(into (sorted-map) ms)
(map (fn [[n current] [_ next]]
[n (-> current
(assoc :same-author
(if next
(= (get current "from") (get next "from"))
true))
(assoc :same-direction
(if next
(= (get current "outgoing") (get next "outgoing"))
true))
(assoc :last-msg (= 0 n)))
current])
ms (conj (vec (rest ms)) nil))
(reduce (fn [items [n m]]
(assoc items n m))
{} ms))
msgs (clj->js msgs-clj) msgs (clj->js msgs-clj)
;; end temp ;; end temp
datasource (to-realm-datasource msgs) datasource (to-realm-datasource msgs)

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

@ -27,19 +27,31 @@
content-type-command content-type-command
content-type-command-request]])) content-type-command-request]]))
(def style-message-text {:fontSize 14
:fontFamily font
:lineHeight 21
:color text1-color})
(def style-sub-text {:top -2
:fontFamily font
:fontSize 12
:color text2-color
:lineHeight 14
:height 16})
(defn message-date [{:keys [date]}] (defn message-date [{:keys [date]}]
[view {:style {:backgroundColor color-light-blue-transparent [view {}
:height 24 [view {:style {:backgroundColor color-light-blue-transparent
:borderRadius 50 :height 24
:alignSelf "center" :borderRadius 50
:marginVertical 15 :alignSelf "center"
:paddingTop 3 :marginTop 20
:paddingHorizontal 12}} :marginBottom 20
[text {:style {:fontFamily font :paddingTop 5
:fontSize 12 :paddingHorizontal 12}}
:color text2-color [text {:style (merge style-sub-text
:textAlign "center"}} {:textAlign "center"})}
date]]) date]]])
(defn contact-photo [{:keys [photo-path]}] (defn contact-photo [{:keys [photo-path]}]
[view {:borderRadius 50} [view {:borderRadius 50}
@ -79,17 +91,16 @@
(defn message-content-status [from content] (defn message-content-status [from content]
[view {:style {:flex 1 [view {:style {:flex 1
:marginBottom 20
:alignSelf "center" :alignSelf "center"
:alignItems "center" :alignItems "center"
:width 249}} :width 249}}
[view {:style {:marginTop 20}} [view {:style {:marginTop 20}}
[contact-photo {}] [contact-photo {}]
[contact-online {:online true}]] [contact-online {:online true}]]
[text {:style {:marginTop 20 [text {:style {:marginTop 20
:fontSize 18 :fontSize 18
:fontFamily font :fontFamily font
:color text1-color}} :color text1-color}}
from] from]
[text {:style {:marginTop 10 [text {:style {:marginTop 10
:fontFamily font :fontFamily font
@ -143,7 +154,7 @@
{:keys [command content]} (parse-command-msg-content commands content)] {:keys [command content]} (parse-command-msg-content commands content)]
[view {:style {:flexDirection "column"}} [view {:style {:flexDirection "column"}}
[view {:style {:flexDirection "row" [view {:style {:flexDirection "row"
:marginRight 32}} :marginRight 32}}
[view {:style {:backgroundColor (:color command) [view {:style {:backgroundColor (:color command)
:height 24 :height 24
:borderRadius 50 :borderRadius 50
@ -159,11 +170,9 @@
:right 0 :right 0
:width 12 :width 12
:height 13}}] :height 13}}]
[text {:style {:marginTop 5 [text {:style (merge style-message-text
:marginHorizontal 0 {:marginTop 8
:fontSize 14 :marginHorizontal 0})}
:fontFamily font
:color color-black}}
;; TODO isn't smart ;; TODO isn't smart
(if (= (:command command) :keypair-password) (if (= (:command command) :keypair-password)
"******" "******"
@ -172,25 +181,24 @@
(defn set-chat-command [msg-id command] (defn set-chat-command [msg-id command]
(dispatch [:set-response-chat-command msg-id (:command command)])) (dispatch [:set-response-chat-command msg-id (:command command)]))
(defn message-content-command-request [msg-id content outgoing text-color background-color] (defn message-content-command-request [msg-id from content outgoing group-chat]
(let [commands-atom (subscribe [:get-commands])] (let [commands-atom (subscribe [:get-commands])]
(fn [msg-id content outgoing text-color background-color] (fn [msg-id from content outgoing group-chat]
(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 (fn [] [touchable-highlight {:onPress (fn []
(set-chat-command msg-id command)) (set-chat-command msg-id command))
:underlay-color :transparent} :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
(if outgoing :paddingRight 28
{:backgroundColor color-white} :backgroundColor color-white})}
{:backgroundColor background-color}))} (when (and group-chat (not outgoing))
[text {:style (merge {:fontSize 14 [text {:style (merge style-sub-text
:fontFamily font} {:marginBottom 2})}
(if outgoing from])
{:color color-black} [text {:style style-message-text}
{:color text-color}))}
content]] content]]
[view {:style {:position "absolute" [view {:style {:position "absolute"
:top 12 :top 12
@ -205,43 +213,43 @@
:left 10 :left 10
:width 12 :width 12
:height 13}}]] :height 13}}]]
[text {:style {:marginTop 2 (when (:request-text command)
:fontFamily font [view {:style {:marginTop 4
:fontSize 12 :height 14}}
:color text2-color}} [text {:style style-sub-text}
(str (:request-text command))]]])))) (:request-text command)]])]]))))
(defn message-content [{:keys [msg-id content-type content outgoing text-color background-color group-chat selected]}] (defn message-content-plain [content outgoing group-chat]
[text {:style (merge style-message-text
{:marginTop (if (and group-chat (not outgoing))
4
0)}
(when (and outgoing group-chat)
{:color color-white}))}
content])
(defn message-content [{:keys [msg-id from content-type content outgoing group-chat selected]}]
(if (= content-type content-type-command-request) (if (= content-type content-type-command-request)
[message-content-command-request msg-id content outgoing text-color background-color] [message-content-command-request msg-id from content outgoing group-chat]
[view {:style (merge {:borderRadius 14 [view {:style (merge {:borderRadius 14
:padding 12} :padding 12
:backgroundColor color-white}
(when (= content-type content-type-command)
{:paddingTop 10
:paddingBottom 14})
(if outgoing (if outgoing
(if (and group-chat (= content-type text-content-type)) (when (and group-chat (= content-type text-content-type))
{:backgroundColor color-blue} {:backgroundColor color-blue})
{:backgroundColor color-white}) (when selected
(if selected {:backgroundColor selected-message-color})))}
{:backgroundColor selected-message-color}
{:backgroundColor background-color})))}
(when (and group-chat (not outgoing)) (when (and group-chat (not outgoing))
[text {:style {:marginTop 0 [text {:style (merge style-sub-text
:fontSize 12 {:marginBottom 2})}
:fontFamily font}} from])
"Justas"])
(cond (cond
(or (= content-type text-content-type) (or (= content-type text-content-type)
(= content-type content-type-status)) (= content-type content-type-status))
[text {:style (merge {:marginTop (if (and group-chat (not outgoing)) [message-content-plain content outgoing group-chat]
4
0)
:fontSize 14
:fontFamily font}
(if outgoing
(if group-chat
{:color color-white}
{:color text1-color})
{:color text-color}))}
content]
(= content-type content-type-command) (= content-type content-type-command)
[message-content-command content] [message-content-command content]
:else [message-content-audio {:content content :else [message-content-audio {:content content
@ -249,8 +257,7 @@
(defn message-delivery-status [{:keys [delivery-status]}] (defn message-delivery-status [{:keys [delivery-status]}]
[view {:style {:flexDirection "row" [view {:style {:flexDirection "row"
:marginTop 2 :marginTop 2}}
:marginBottom 8}}
[image {:source (case delivery-status [image {:source (case delivery-status
:delivered {:uri "icon_ok_small"} :delivered {:uri "icon_ok_small"}
:seen {:uri "icon_ok_small"} :seen {:uri "icon_ok_small"}
@ -278,7 +285,9 @@
:width 24 :width 24
:height 24}}]]) :height 24}}]])
(defn incoming-group-message-body [{:keys [msg-id content content-type outgoing delivery-status text-color background-color selected]}] (defn incoming-group-message-body [{:keys [msg-id from content content-type outgoing
delivery-status selected new-day same-author
same-direction last-msg]}]
(let [delivery-status :seen-by-everyone] (let [delivery-status :seen-by-everyone]
[view {:style {:flexDirection "column"}} [view {:style {:flexDirection "column"}}
(when selected (when selected
@ -288,65 +297,78 @@
:fontSize 12 :fontSize 12
:color text2-color}} :color text2-color}}
"Mar 7th, 15:22"]) "Mar 7th, 15:22"])
[view {:style {:flexDirection "row" [view {:style (merge {:flexDirection "row"
:alignSelf "flex-start" :alignSelf "flex-start"
:paddingTop 2 :marginTop (cond
:paddingRight 8 new-day 0
:paddingBottom 2 same-author 4
:paddingLeft 8}} same-direction 20
[member-photo {}] :else 10)
:paddingRight 8
:paddingLeft 8}
(when last-msg
{:paddingBottom 20}))}
[view {:style {:width 24}}
(when (not same-author)
[member-photo {}])]
[view {:style {:flexDirection "column" [view {:style {:flexDirection "column"
:width 260 :width 260
:paddingLeft 8 :paddingLeft 8
:alignItems "flex-start"}} :alignItems "flex-start"}}
[message-content {:msg-id msg-id [message-content {:msg-id msg-id
:from from
:content-type content-type :content-type content-type
:content content :content content
:outgoing outgoing :outgoing outgoing
:text-color text-color
:background-color background-color
:group-chat true :group-chat true
:selected selected}] :selected selected}]
;; TODO show for last or selected ;; TODO show for last or selected
(when (and selected delivery-status) (when (and selected delivery-status)
[message-delivery-status {:delivery-status delivery-status}])]]])) [message-delivery-status {:delivery-status delivery-status}])]]]))
(defn message-body [{:keys [msg-id content content-type outgoing delivery-status text-color background-color group-chat]}] (defn message-body [{:keys [msg-id content content-type outgoing delivery-status
group-chat new-day same-author same-direction last-msg]}]
(let [delivery-status :seen] (let [delivery-status :seen]
[view {:style (merge {:flexDirection "column" [view {:style (merge {:flexDirection "column"
:width 260 :width 260
:paddingTop 2 :paddingTop (cond
new-day 0
same-author 4
same-direction 20
:else 10)
:paddingRight 8 :paddingRight 8
:paddingBottom 2
:paddingLeft 8} :paddingLeft 8}
(if outgoing (if outgoing
{:alignSelf "flex-end" {:alignSelf "flex-end"
:alignItems "flex-end"} :alignItems "flex-end"}
{:alignItems "flex-start" {:alignItems "flex-start"
:alignSelf "flex-start"}))} :alignSelf "flex-start"})
(when last-msg
{:paddingBottom 20}))}
[message-content {:msg-id msg-id [message-content {:msg-id msg-id
:content-type content-type :content-type content-type
:content content :content content
:outgoing outgoing :outgoing outgoing
:text-color text-color
:background-color background-color
:group-chat group-chat}] :group-chat group-chat}]
(when (and outgoing delivery-status) (when (and outgoing delivery-status)
[message-delivery-status {:delivery-status delivery-status}])])) [message-delivery-status {:delivery-status delivery-status}])]))
(defn chat-message [{:keys [msg-id from content content-type outgoing delivery-status date new-day text-color background-color group-chat selected] :as msg}] (defn chat-message [{:keys [msg-id from content content-type outgoing delivery-status date new-day group-chat selected same-author same-direction last-msg] :as msg}]
[view {} [view {}
(when new-day (when new-day
[message-date {:date date}]) [message-date {:date date}])
(let [msg-data {:msg-id msg-id (let [msg-data {:msg-id msg-id
:from from
:content content :content content
:content-type content-type :content-type content-type
:outgoing outgoing :outgoing outgoing
:text-color color-black ;text-color
:background-color color-white ;background-color
:delivery-status (keyword delivery-status) :delivery-status (keyword delivery-status)
:group-chat group-chat :group-chat group-chat
:selected selected}] :selected selected
:new-day new-day
:same-author same-author
:same-direction same-direction
:last-msg last-msg}]
[view {} [view {}
(when (= content-type content-type-status) (when (= content-type content-type-status)
[message-content-status from content]) [message-content-status from content])

1
src/syng_im/models/commands.cljs
View File

@ -28,6 +28,7 @@
{:command :phone {:command :phone
:text "!phone" :text "!phone"
:description "Send phone number" :description "Send phone number"
:request-text "Phone number request"
:color color-dark-mint :color color-dark-mint
:suggestion true} :suggestion true}
{:command :confirmation-code {:command :confirmation-code