desktop no bubbles
Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
parent
4c7339f978
commit
a6de279660
|
@ -7,18 +7,6 @@
|
|||
(def min-input-area-height 20)
|
||||
(def max-input-area-height (- max-input-container-height (* 2 chat-vertical-padding)))
|
||||
|
||||
(defn message-box [{:keys [outgoing] :as message}]
|
||||
(let [align (if outgoing :flex-end :flex-start)
|
||||
color (if outgoing colors/blue colors/white)]
|
||||
{:align-self align
|
||||
:background-color color
|
||||
:border-radius 8
|
||||
:padding-left 12
|
||||
:padding-right 12
|
||||
:padding-top 10
|
||||
:padding-bottom 10
|
||||
:max-width 340}))
|
||||
|
||||
(defn message-row [{:keys [outgoing first-in-group?] :as message}]
|
||||
(let [padding-horizontal (if outgoing :padding-right :padding-left)
|
||||
padding-top-value (if first-in-group? 16 8)]
|
||||
|
@ -28,36 +16,26 @@
|
|||
(def message-row-column
|
||||
{:flex-direction :column})
|
||||
|
||||
(defn message-timestamp-placeholder []
|
||||
{:color colors/transparent
|
||||
:font-size 10
|
||||
:align-self :flex-end
|
||||
:opacity 0.5
|
||||
:text-align :right
|
||||
:text-align-vertical :center
|
||||
:width 60})
|
||||
|
||||
(defn message-timestamp [outgoing]
|
||||
(merge (message-timestamp-placeholder)
|
||||
{:color (if outgoing colors/white colors/gray)
|
||||
:position :absolute
|
||||
:bottom 0
|
||||
:right -5}))
|
||||
(def message-timestamp
|
||||
{:color colors/gray
|
||||
:font-size 10
|
||||
:text-align :right
|
||||
:margin-right 16
|
||||
:width 60})
|
||||
|
||||
(def message-command-container
|
||||
{:align-self :flex-start
|
||||
:border-radius 8
|
||||
:border-color colors/gray-light
|
||||
:border-width 1
|
||||
:padding-horizontal 12
|
||||
:padding-vertical 10
|
||||
:background-color colors/white
|
||||
:align-items :flex-start
|
||||
:width 230})
|
||||
|
||||
(def author
|
||||
{:color colors/gray
|
||||
:font-size 12
|
||||
:margin-left 48
|
||||
:margin-bottom 4})
|
||||
{:color colors/black
|
||||
:font-size 14})
|
||||
|
||||
(defn chat-box [height]
|
||||
{:height (+ height (* 2 chat-vertical-padding))
|
||||
|
@ -78,7 +56,7 @@
|
|||
|
||||
(def messages-view
|
||||
{:flex 1
|
||||
:background-color colors/gray-lighter})
|
||||
:background-color colors/white})
|
||||
|
||||
(def img-container
|
||||
{:height 56
|
||||
|
@ -87,10 +65,18 @@
|
|||
(def messages-list-vertical-padding 46)
|
||||
|
||||
(def photo-style
|
||||
{:border-radius 20
|
||||
:width 40
|
||||
:height 40
|
||||
:margin-right 8})
|
||||
{:border-radius 19
|
||||
:width 38
|
||||
:height 38})
|
||||
|
||||
(def member-photo-container
|
||||
{:border-color colors/gray-light
|
||||
:border-width 1
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:border-radius 20
|
||||
:width 40
|
||||
:height 40})
|
||||
|
||||
(def chat-icon
|
||||
{:width 34
|
||||
|
@ -134,7 +120,8 @@
|
|||
:font-size 14})
|
||||
|
||||
(def message-container
|
||||
{:flex-direction :column})
|
||||
{:flex-direction :column
|
||||
:margin-right 16})
|
||||
|
||||
(def message-wrapper
|
||||
{:flex-direction :row
|
||||
|
@ -259,3 +246,19 @@
|
|||
|
||||
(defn reply-icon [outgoing]
|
||||
{:tint-color (if outgoing colors/white colors/gray)})
|
||||
|
||||
(def separator
|
||||
{:height 1
|
||||
:background-color colors/gray-light})
|
||||
|
||||
(def quoted-message-container
|
||||
{:margin 6
|
||||
:margin-left 0
|
||||
:padding 6
|
||||
:border-color colors/gray-lighter
|
||||
:border-width 1
|
||||
:border-radius 8})
|
||||
|
||||
(def quoted-message-author-container
|
||||
{:flex-direction :row
|
||||
:align-items :flex-start})
|
||||
|
|
|
@ -72,20 +72,22 @@
|
|||
:on-press #(re-frame/dispatch [:chat.ui/remove-chat-pressed chat-id])}
|
||||
(i18n/label :t/delete-chat)]]]))
|
||||
|
||||
(views/defview message-author-name [{:keys [outgoing from] :as message}]
|
||||
(views/letsubs [current-account [:get-current-account]
|
||||
incoming-name [:get-contact-name-by-identity from]]
|
||||
(views/defview message-author-name [{:keys [from]}]
|
||||
(views/letsubs [incoming-name [:get-contact-name-by-identity from]]
|
||||
(let [name (chat-utils/format-author from incoming-name)]
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:show-contact-dialog from name (boolean incoming-name)])}
|
||||
[react/text {:style styles/author} name]])))
|
||||
[react/text {:style styles/author :font :medium} name]])))
|
||||
|
||||
(views/defview member-photo [from]
|
||||
(letsubs [photo-path [:get-photo-path from]]
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:show-profile-desktop from])}
|
||||
[react/image {:source {:uri (if (string/blank? photo-path)
|
||||
(identicon/identicon from)
|
||||
photo-path)}
|
||||
:style styles/photo-style}]]))
|
||||
(views/letsubs [photo-path [:get-photo-path from]]
|
||||
[react/view {:style {:width 40 :margin-horizontal 16}}
|
||||
[react/view {:style {:position :absolute}}
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:show-profile-desktop from])}
|
||||
[react/view {:style styles/member-photo-container}
|
||||
[react/image {:source {:uri (if (string/blank? photo-path)
|
||||
(identicon/identicon from)
|
||||
photo-path)}
|
||||
:style styles/photo-style}]]]]]))
|
||||
|
||||
(views/defview my-photo [from]
|
||||
(views/letsubs [account [:get-current-account]]
|
||||
|
@ -98,9 +100,11 @@
|
|||
|
||||
(views/defview quoted-message [{:keys [from text]} outgoing current-public-key]
|
||||
(views/letsubs [username [:get-contact-name-by-identity from]]
|
||||
[react/view {:style (message.style/quoted-message-container outgoing)}
|
||||
[react/view {:style message.style/quoted-message-author-container}
|
||||
[icons/icon :icons/reply {:style (styles/reply-icon outgoing)
|
||||
[react/view {:style styles/quoted-message-container}
|
||||
[react/view {:style styles/quoted-message-author-container}
|
||||
[icons/icon :icons/reply {:style (styles/reply-icon outgoing)
|
||||
:width 16
|
||||
:height 16
|
||||
:container-style (when outgoing {:opacity 0.4})}]
|
||||
[react/text {:style (message.style/quoted-message-author outgoing)}
|
||||
(chat-utils/format-reply-author from username current-public-key)]]
|
||||
|
@ -136,66 +140,65 @@
|
|||
(defn- message-sent? [user-statuses current-public-key]
|
||||
(not= (get-in user-statuses [current-public-key :status]) :not-sent))
|
||||
|
||||
(views/defview message-with-timestamp
|
||||
[text {:keys [message-id timestamp outgoing content current-public-key user-statuses]} style]
|
||||
[react/view {:style style}
|
||||
[react/touchable-highlight {:style {}
|
||||
:on-press #(if (= "right" (.-button (.-nativeEvent %)))
|
||||
(views/defview message-without-timestamp
|
||||
[text {:keys [message-id content current-public-key user-statuses]} style]
|
||||
[react/view {:flex 1 :margin-vertical 5}
|
||||
[react/touchable-highlight {:on-press #(if (= "right" (.-button (.-nativeEvent %)))
|
||||
(do (utils/show-popup "" "Message copied to clipboard")
|
||||
(react/copy-to-clipboard text))
|
||||
(when (message-sent? user-statuses current-public-key)
|
||||
(re-frame/dispatch [:chat.ui/reply-to-message message-id])))}
|
||||
[react/view {:style styles/message-container}
|
||||
(when (:response-to content)
|
||||
[quoted-message (:response-to content) outgoing current-public-key])
|
||||
[react/view {:flex-direction :column}
|
||||
[quoted-message (:response-to content) false current-public-key])
|
||||
[react/view {:flex-direction :column}
|
||||
(doall
|
||||
(for [[index-sentence sentence] (map-indexed vector (put-links-in-vector text))]
|
||||
^{:key (str message-id index-sentence)}
|
||||
[react/view {:flex-direction :row
|
||||
:flex-wrap :wrap}
|
||||
[react/view {:style {:flex-direction :row
|
||||
:flex-wrap :wrap}}
|
||||
(doall
|
||||
(for [[index word] (map-indexed vector sentence)]
|
||||
(if (vector? word)
|
||||
^{:key (str message-id index-sentence index)}
|
||||
[link-button word outgoing]
|
||||
[link-button word false]
|
||||
^{:key (str message-id index-sentence index)}
|
||||
[react/text {:style (styles/message-text outgoing)}
|
||||
word])))]))]
|
||||
[react/text {:style (styles/message-timestamp-placeholder)}
|
||||
(time/timestamp->time timestamp)]
|
||||
[react/text {:style (styles/message-timestamp outgoing)}
|
||||
(time/timestamp->time timestamp)]]]])
|
||||
|
||||
(views/defview text-only-message [text message]
|
||||
[react/view {:style (styles/message-row message)}
|
||||
[message-with-timestamp text message (styles/message-box message)]])
|
||||
[react/text {:style (styles/message-text false)}
|
||||
word])))]))]]]])
|
||||
|
||||
(views/defview photo-placeholder []
|
||||
[react/view {:style styles/photo-style}])
|
||||
[react/view {:style {:width 40
|
||||
:margin-horizontal 16}}])
|
||||
|
||||
(views/defview message-with-name-and-avatar [text {:keys [from first-in-group? last-in-group?] :as message}]
|
||||
[react/view {:style (styles/message-row message)}
|
||||
[react/view {:style styles/message-row-column}
|
||||
(when first-in-group?
|
||||
[message-author-name message])
|
||||
[react/view {:style styles/not-first-in-group-wrapper}
|
||||
(if last-in-group?
|
||||
[member-photo from]
|
||||
[photo-placeholder])
|
||||
[message-with-timestamp text message (styles/message-box message)]]]])
|
||||
(views/defview message-with-name-and-avatar [text {:keys [from first-in-group? timestamp] :as message}]
|
||||
[react/view
|
||||
(when first-in-group?
|
||||
[react/view {:style {:flex-direction :row :margin-top 24}}
|
||||
[member-photo from]
|
||||
[message-author-name message]
|
||||
[react/view {:style {:flex 1}}]
|
||||
[react/text {:style styles/message-timestamp}
|
||||
(time/timestamp->time timestamp)]])
|
||||
[react/view {:style styles/not-first-in-group-wrapper}
|
||||
[photo-placeholder]
|
||||
[message-without-timestamp text message]]])
|
||||
|
||||
(defmulti message (fn [_ _ {:keys [content-type]}] content-type))
|
||||
|
||||
(defmethod message constants/content-type-command
|
||||
[_ _ message]
|
||||
[react/view {:style (styles/message-row message)}
|
||||
[react/view {:style styles/message-command-container}
|
||||
[message/message-content-command message]]])
|
||||
[_ _ {:keys [from] :as message}]
|
||||
[react/view
|
||||
[react/view {:style {:flex-direction :row :align-items :center :margin-top 15}}
|
||||
[member-photo from]
|
||||
[message-author-name message]]
|
||||
[react/view {:style styles/not-first-in-group-wrapper}
|
||||
[photo-placeholder]
|
||||
[react/view {:style styles/message-command-container}
|
||||
[message/message-content-command message]]]])
|
||||
|
||||
(defmethod message :default
|
||||
[text me? {:keys [message-id chat-id message-status user-statuses from
|
||||
current-public-key content-type group-chat outgoing type value] :as message}]
|
||||
current-public-key content-type outgoing type value] :as message}]
|
||||
(when (nil? message-id)
|
||||
(log/debug "nil?" message))
|
||||
(if (= type :datemark)
|
||||
|
@ -216,9 +219,7 @@
|
|||
(fn []
|
||||
^{:key (str "message" message-id)}
|
||||
[react/view
|
||||
(if (and group-chat (not outgoing))
|
||||
[message-with-name-and-avatar text message]
|
||||
[text-only-message text message])
|
||||
[message-with-name-and-avatar text message]
|
||||
[react/view {:style (message.style/delivery-status outgoing)}
|
||||
[message/message-delivery-status message]]])}))))
|
||||
|
||||
|
@ -258,7 +259,7 @@
|
|||
:ref #(reset! scroll-ref %)}
|
||||
[react/view
|
||||
(doall
|
||||
(for [[index {:keys [from content message-id type value] :as message-obj}] (map-indexed vector (take @messages-to-load messages))]
|
||||
(for [{:keys [from content] :as message-obj} (take @messages-to-load messages)]
|
||||
^{:key message-obj}
|
||||
[message (:text content) (= from current-public-key)
|
||||
(assoc message-obj :group-chat group-chat
|
||||
|
@ -285,7 +286,7 @@
|
|||
[react/text {:style styles/reply-content-message} message-text]]))
|
||||
|
||||
(views/defview reply-member-photo [from]
|
||||
(letsubs [photo-path [:get-photo-path from]]
|
||||
(views/letsubs [photo-path [:get-photo-path from]]
|
||||
[react/image {:source {:uri (if (string/blank? photo-path)
|
||||
(identicon/identicon from)
|
||||
photo-path)}
|
||||
|
@ -345,16 +346,17 @@
|
|||
(views/letsubs [{:keys [input-text chat-id] :as current-chat} [:get-current-chat]]
|
||||
[react/view {:style styles/chat-view}
|
||||
[toolbar-chat-view current-chat]
|
||||
[react/view {:style styles/separator}]
|
||||
[messages-view current-chat]
|
||||
[react/view {:style styles/separator}]
|
||||
[reply-message-view]
|
||||
[chat-text-input chat-id input-text]]))
|
||||
|
||||
(views/defview chat-profile []
|
||||
(letsubs [identity [:get-current-contact-identity]
|
||||
maybe-contact [:get-current-contact]]
|
||||
|
||||
(views/letsubs [identity [:get-current-contact-identity]
|
||||
maybe-contact [:get-current-contact]]
|
||||
(let [contact (or maybe-contact (utils.contacts/whisper-id->new-contact identity))
|
||||
{:keys [pending? whisper-identity public-key]} contact]
|
||||
{:keys [pending? whisper-identity]} contact]
|
||||
[react/view {:style styles/chat-profile-body}
|
||||
[profile.views/profile-badge contact]
|
||||
;; for private chat, public key will be chat-id
|
||||
|
|
Loading…
Reference in New Issue