desktop no bubbles

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2018-10-10 14:01:32 +02:00
parent 4c7339f978
commit a6de279660
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
2 changed files with 101 additions and 96 deletions

View File

@ -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})

View File

@ -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