Fix chat view indents
This commit is contained in:
virvar
parent
f63e033e18
commit
953bc66223
|
|
@ -149,18 +149,43 @@
|
|||
(let [msgs @messages
|
||||
;_ (log/debug "messages=" msgs)
|
||||
;; temp to show first status
|
||||
msgs-clj (assoc (js->clj msgs) "-1"
|
||||
{:msg-id "-1"
|
||||
:content (str "The brash businessman’s braggadocio "
|
||||
"and public exchange with candidates "
|
||||
"in the US presidential election")
|
||||
:delivery-status "seen"
|
||||
:from "Status"
|
||||
:chat-id "-"
|
||||
:content-type content-type-status
|
||||
:timestamp 1
|
||||
:outgoing false
|
||||
:to nil})
|
||||
msgs-clj (as-> (js->clj msgs) ms
|
||||
(assoc ms "-1"
|
||||
{:msg-id "-1"
|
||||
:content (str "The brash businessman’s braggadocio "
|
||||
"and public exchange with candidates "
|
||||
"in the US presidential election")
|
||||
:delivery-status "seen"
|
||||
:from "Status"
|
||||
:chat-id "-"
|
||||
:content-type content-type-status
|
||||
:timestamp 1
|
||||
"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)
|
||||
;; end temp
|
||||
datasource (to-realm-datasource msgs)
|
||||
|
|
|
|||
|
|
@ -27,19 +27,31 @@
|
|||
content-type-command
|
||||
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]}]
|
||||
[view {:style {:backgroundColor color-light-blue-transparent
|
||||
:height 24
|
||||
:borderRadius 50
|
||||
:alignSelf "center"
|
||||
:marginVertical 15
|
||||
:paddingTop 3
|
||||
:paddingHorizontal 12}}
|
||||
[text {:style {:fontFamily font
|
||||
:fontSize 12
|
||||
:color text2-color
|
||||
:textAlign "center"}}
|
||||
date]])
|
||||
[view {}
|
||||
[view {:style {:backgroundColor color-light-blue-transparent
|
||||
:height 24
|
||||
:borderRadius 50
|
||||
:alignSelf "center"
|
||||
:marginTop 20
|
||||
:marginBottom 20
|
||||
:paddingTop 5
|
||||
:paddingHorizontal 12}}
|
||||
[text {:style (merge style-sub-text
|
||||
{:textAlign "center"})}
|
||||
date]]])
|
||||
|
||||
(defn contact-photo [{:keys [photo-path]}]
|
||||
[view {:borderRadius 50}
|
||||
|
|
@ -79,17 +91,16 @@
|
|||
|
||||
(defn message-content-status [from content]
|
||||
[view {:style {:flex 1
|
||||
:marginBottom 20
|
||||
:alignSelf "center"
|
||||
:alignItems "center"
|
||||
:width 249}}
|
||||
[view {:style {:marginTop 20}}
|
||||
[contact-photo {}]
|
||||
[contact-online {:online true}]]
|
||||
[text {:style {:marginTop 20
|
||||
[text {:style {:marginTop 20
|
||||
:fontSize 18
|
||||
:fontFamily font
|
||||
:color text1-color}}
|
||||
:color text1-color}}
|
||||
from]
|
||||
[text {:style {:marginTop 10
|
||||
:fontFamily font
|
||||
|
|
@ -143,7 +154,7 @@
|
|||
{:keys [command content]} (parse-command-msg-content commands content)]
|
||||
[view {:style {:flexDirection "column"}}
|
||||
[view {:style {:flexDirection "row"
|
||||
:marginRight 32}}
|
||||
:marginRight 32}}
|
||||
[view {:style {:backgroundColor (:color command)
|
||||
:height 24
|
||||
:borderRadius 50
|
||||
|
|
@ -159,11 +170,9 @@
|
|||
:right 0
|
||||
:width 12
|
||||
:height 13}}]
|
||||
[text {:style {:marginTop 5
|
||||
:marginHorizontal 0
|
||||
:fontSize 14
|
||||
:fontFamily font
|
||||
:color color-black}}
|
||||
[text {:style (merge style-message-text
|
||||
{:marginTop 8
|
||||
:marginHorizontal 0})}
|
||||
;; TODO isn't smart
|
||||
(if (= (:command command) :keypair-password)
|
||||
"******"
|
||||
|
|
@ -172,25 +181,24 @@
|
|||
(defn set-chat-command [msg-id 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])]
|
||||
(fn [msg-id content outgoing text-color background-color]
|
||||
(fn [msg-id from content outgoing group-chat]
|
||||
(let [commands @commands-atom
|
||||
{:keys [command content]} (parse-command-request-msg-content commands content)]
|
||||
[touchable-highlight {:onPress (fn []
|
||||
(set-chat-command msg-id command))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:paddingRight 16}}
|
||||
[view {:style (merge {:borderRadius 14
|
||||
:padding 12}
|
||||
(if outgoing
|
||||
{:backgroundColor color-white}
|
||||
{:backgroundColor background-color}))}
|
||||
[text {:style (merge {:fontSize 14
|
||||
:fontFamily font}
|
||||
(if outgoing
|
||||
{:color color-black}
|
||||
{:color text-color}))}
|
||||
[view {:style (merge {:borderRadius 14
|
||||
:padding 12
|
||||
:paddingRight 28
|
||||
:backgroundColor color-white})}
|
||||
(when (and group-chat (not outgoing))
|
||||
[text {:style (merge style-sub-text
|
||||
{:marginBottom 2})}
|
||||
from])
|
||||
[text {:style style-message-text}
|
||||
content]]
|
||||
[view {:style {:position "absolute"
|
||||
:top 12
|
||||
|
|
@ -205,43 +213,43 @@
|
|||
:left 10
|
||||
:width 12
|
||||
:height 13}}]]
|
||||
[text {:style {:marginTop 2
|
||||
:fontFamily font
|
||||
:fontSize 12
|
||||
:color text2-color}}
|
||||
(str (:request-text command))]]]))))
|
||||
(when (:request-text command)
|
||||
[view {:style {:marginTop 4
|
||||
:height 14}}
|
||||
[text {:style style-sub-text}
|
||||
(: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)
|
||||
[message-content-command-request msg-id content outgoing text-color background-color]
|
||||
[view {:style (merge {:borderRadius 14
|
||||
:padding 12}
|
||||
[message-content-command-request msg-id from content outgoing group-chat]
|
||||
[view {:style (merge {:borderRadius 14
|
||||
:padding 12
|
||||
:backgroundColor color-white}
|
||||
(when (= content-type content-type-command)
|
||||
{:paddingTop 10
|
||||
:paddingBottom 14})
|
||||
(if outgoing
|
||||
(if (and group-chat (= content-type text-content-type))
|
||||
{:backgroundColor color-blue}
|
||||
{:backgroundColor color-white})
|
||||
(if selected
|
||||
{:backgroundColor selected-message-color}
|
||||
{:backgroundColor background-color})))}
|
||||
(when (and group-chat (= content-type text-content-type))
|
||||
{:backgroundColor color-blue})
|
||||
(when selected
|
||||
{:backgroundColor selected-message-color})))}
|
||||
(when (and group-chat (not outgoing))
|
||||
[text {:style {:marginTop 0
|
||||
:fontSize 12
|
||||
:fontFamily font}}
|
||||
"Justas"])
|
||||
[text {:style (merge style-sub-text
|
||||
{:marginBottom 2})}
|
||||
from])
|
||||
(cond
|
||||
(or (= content-type text-content-type)
|
||||
(= content-type content-type-status))
|
||||
[text {:style (merge {:marginTop (if (and group-chat (not outgoing))
|
||||
4
|
||||
0)
|
||||
:fontSize 14
|
||||
:fontFamily font}
|
||||
(if outgoing
|
||||
(if group-chat
|
||||
{:color color-white}
|
||||
{:color text1-color})
|
||||
{:color text-color}))}
|
||||
content]
|
||||
[message-content-plain content outgoing group-chat]
|
||||
(= content-type content-type-command)
|
||||
[message-content-command content]
|
||||
:else [message-content-audio {:content content
|
||||
|
|
@ -249,8 +257,7 @@
|
|||
|
||||
(defn message-delivery-status [{:keys [delivery-status]}]
|
||||
[view {:style {:flexDirection "row"
|
||||
:marginTop 2
|
||||
:marginBottom 8}}
|
||||
:marginTop 2}}
|
||||
[image {:source (case delivery-status
|
||||
:delivered {:uri "icon_ok_small"}
|
||||
:seen {:uri "icon_ok_small"}
|
||||
|
|
@ -278,7 +285,9 @@
|
|||
:width 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]
|
||||
[view {:style {:flexDirection "column"}}
|
||||
(when selected
|
||||
|
|
@ -288,65 +297,78 @@
|
|||
:fontSize 12
|
||||
:color text2-color}}
|
||||
"Mar 7th, 15:22"])
|
||||
[view {:style {:flexDirection "row"
|
||||
:alignSelf "flex-start"
|
||||
:paddingTop 2
|
||||
:paddingRight 8
|
||||
:paddingBottom 2
|
||||
:paddingLeft 8}}
|
||||
[member-photo {}]
|
||||
[view {:style (merge {:flexDirection "row"
|
||||
:alignSelf "flex-start"
|
||||
:marginTop (cond
|
||||
new-day 0
|
||||
same-author 4
|
||||
same-direction 20
|
||||
: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"
|
||||
:width 260
|
||||
:paddingLeft 8
|
||||
:alignItems "flex-start"}}
|
||||
[message-content {:msg-id msg-id
|
||||
:from from
|
||||
:content-type content-type
|
||||
:content content
|
||||
:outgoing outgoing
|
||||
:text-color text-color
|
||||
:background-color background-color
|
||||
:group-chat true
|
||||
:selected selected}]
|
||||
;; TODO show for last or selected
|
||||
(when (and selected 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]
|
||||
[view {:style (merge {:flexDirection "column"
|
||||
:width 260
|
||||
:paddingTop 2
|
||||
:paddingTop (cond
|
||||
new-day 0
|
||||
same-author 4
|
||||
same-direction 20
|
||||
:else 10)
|
||||
:paddingRight 8
|
||||
:paddingBottom 2
|
||||
:paddingLeft 8}
|
||||
(if outgoing
|
||||
{:alignSelf "flex-end"
|
||||
:alignItems "flex-end"}
|
||||
{:alignItems "flex-start"
|
||||
:alignSelf "flex-start"}))}
|
||||
:alignSelf "flex-start"})
|
||||
(when last-msg
|
||||
{:paddingBottom 20}))}
|
||||
[message-content {:msg-id msg-id
|
||||
:content-type content-type
|
||||
:content content
|
||||
:outgoing outgoing
|
||||
:text-color text-color
|
||||
:background-color background-color
|
||||
:group-chat group-chat}]
|
||||
(when (and outgoing 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 {}
|
||||
(when new-day
|
||||
[message-date {:date date}])
|
||||
(let [msg-data {:msg-id msg-id
|
||||
:from from
|
||||
:content content
|
||||
:content-type content-type
|
||||
:outgoing outgoing
|
||||
:text-color color-black ;text-color
|
||||
:background-color color-white ;background-color
|
||||
:delivery-status (keyword delivery-status)
|
||||
: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 {}
|
||||
(when (= content-type content-type-status)
|
||||
[message-content-status from content])
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
{:command :phone
|
||||
:text "!phone"
|
||||
:description "Send phone number"
|
||||
:request-text "Phone number request"
|
||||
:color color-dark-mint
|
||||
:suggestion true}
|
||||
{:command :confirmation-code
|
||||
|
|
|
|||
Loading…
Reference in New Issue