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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/status_im/ui/screens/desktop/main/chat/styles.cljs
View File

@ -7,18 +7,6 @@
(def min-input-area-height 20) (def min-input-area-height 20)
(def max-input-area-height (- max-input-container-height (* 2 chat-vertical-padding))) (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}] (defn message-row [{:keys [outgoing first-in-group?] :as message}]
(let [padding-horizontal (if outgoing :padding-right :padding-left) (let [padding-horizontal (if outgoing :padding-right :padding-left)
padding-top-value (if first-in-group? 16 8)] padding-top-value (if first-in-group? 16 8)]
@ -28,36 +16,26 @@
(def message-row-column (def message-row-column
{:flex-direction :column}) {:flex-direction :column})
(defn message-timestamp-placeholder [] (def message-timestamp
{:color colors/transparent {:color colors/gray
:font-size 10 :font-size 10
:align-self :flex-end :text-align :right
:opacity 0.5 :margin-right 16
:text-align :right :width 60})
: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-command-container (def message-command-container
{:align-self :flex-start {:align-self :flex-start
:border-radius 8 :border-radius 8
:border-color colors/gray-light
:border-width 1
:padding-horizontal 12 :padding-horizontal 12
:padding-vertical 10 :padding-vertical 10
:background-color colors/white
:align-items :flex-start :align-items :flex-start
:width 230}) :width 230})
(def author (def author
{:color colors/gray {:color colors/black
:font-size 12 :font-size 14})
:margin-left 48
:margin-bottom 4})
(defn chat-box [height] (defn chat-box [height]
{:height (+ height (* 2 chat-vertical-padding)) {:height (+ height (* 2 chat-vertical-padding))
@ -78,7 +56,7 @@
(def messages-view (def messages-view
{:flex 1 {:flex 1
:background-color colors/gray-lighter}) :background-color colors/white})
(def img-container (def img-container
{:height 56 {:height 56
@ -87,10 +65,18 @@
(def messages-list-vertical-padding 46) (def messages-list-vertical-padding 46)
(def photo-style (def photo-style
{:border-radius 20 {:border-radius 19
:width 40 :width 38
:height 40 :height 38})
:margin-right 8})
(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 (def chat-icon
{:width 34 {:width 34
@ -134,7 +120,8 @@
:font-size 14}) :font-size 14})
(def message-container (def message-container
{:flex-direction :column}) {:flex-direction :column
:margin-right 16})
(def message-wrapper (def message-wrapper
{:flex-direction :row {:flex-direction :row
@ -259,3 +246,19 @@
(defn reply-icon [outgoing] (defn reply-icon [outgoing]
{:tint-color (if outgoing colors/white colors/gray)}) {: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})

118
src/status_im/ui/screens/desktop/main/chat/views.cljs
View File

@ -72,20 +72,22 @@
:on-press #(re-frame/dispatch [:chat.ui/remove-chat-pressed chat-id])} :on-press #(re-frame/dispatch [:chat.ui/remove-chat-pressed chat-id])}
(i18n/label :t/delete-chat)]]])) (i18n/label :t/delete-chat)]]]))
(views/defview message-author-name [{:keys [outgoing from] :as message}] (views/defview message-author-name [{:keys [from]}]
(views/letsubs [current-account [:get-current-account] (views/letsubs [incoming-name [:get-contact-name-by-identity from]]
incoming-name [:get-contact-name-by-identity from]]
(let [name (chat-utils/format-author from incoming-name)] (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/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] (views/defview member-photo [from]
(letsubs [photo-path [:get-photo-path from]] (views/letsubs [photo-path [:get-photo-path from]]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:show-profile-desktop from])} [react/view {:style {:width 40 :margin-horizontal 16}}
[react/image {:source {:uri (if (string/blank? photo-path) [react/view {:style {:position :absolute}}
(identicon/identicon from) [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-profile-desktop from])}
photo-path)} [react/view {:style styles/member-photo-container}
:style styles/photo-style}]])) [react/image {:source {:uri (if (string/blank? photo-path)
(identicon/identicon from)
photo-path)}
:style styles/photo-style}]]]]]))
(views/defview my-photo [from] (views/defview my-photo [from]
(views/letsubs [account [:get-current-account]] (views/letsubs [account [:get-current-account]]
@ -98,9 +100,11 @@
(views/defview quoted-message [{:keys [from text]} outgoing current-public-key] (views/defview quoted-message [{:keys [from text]} outgoing current-public-key]
(views/letsubs [username [:get-contact-name-by-identity from]] (views/letsubs [username [:get-contact-name-by-identity from]]
[react/view {:style (message.style/quoted-message-container outgoing)} [react/view {:style styles/quoted-message-container}
[react/view {:style message.style/quoted-message-author-container} [react/view {:style styles/quoted-message-author-container}
[icons/icon :icons/reply {:style (styles/reply-icon outgoing) [icons/icon :icons/reply {:style (styles/reply-icon outgoing)
:width 16
:height 16
:container-style (when outgoing {:opacity 0.4})}] :container-style (when outgoing {:opacity 0.4})}]
[react/text {:style (message.style/quoted-message-author outgoing)} [react/text {:style (message.style/quoted-message-author outgoing)}
(chat-utils/format-reply-author from username current-public-key)]] (chat-utils/format-reply-author from username current-public-key)]]
@ -136,66 +140,65 @@
(defn- message-sent? [user-statuses current-public-key] (defn- message-sent? [user-statuses current-public-key]
(not= (get-in user-statuses [current-public-key :status]) :not-sent)) (not= (get-in user-statuses [current-public-key :status]) :not-sent))
(views/defview message-with-timestamp (views/defview message-without-timestamp
[text {:keys [message-id timestamp outgoing content current-public-key user-statuses]} style] [text {:keys [message-id content current-public-key user-statuses]} style]
[react/view {:style style} [react/view {:flex 1 :margin-vertical 5}
[react/touchable-highlight {:style {} [react/touchable-highlight {:on-press #(if (= "right" (.-button (.-nativeEvent %)))
:on-press #(if (= "right" (.-button (.-nativeEvent %)))
(do (utils/show-popup "" "Message copied to clipboard") (do (utils/show-popup "" "Message copied to clipboard")
(react/copy-to-clipboard text)) (react/copy-to-clipboard text))
(when (message-sent? user-statuses current-public-key) (when (message-sent? user-statuses current-public-key)
(re-frame/dispatch [:chat.ui/reply-to-message message-id])))} (re-frame/dispatch [:chat.ui/reply-to-message message-id])))}
[react/view {:style styles/message-container} [react/view {:style styles/message-container}
(when (:response-to content) (when (:response-to content)
[quoted-message (:response-to content) outgoing current-public-key]) [quoted-message (:response-to content) false current-public-key])
[react/view {:flex-direction :column} [react/view {:flex-direction :column}
(doall (doall
(for [[index-sentence sentence] (map-indexed vector (put-links-in-vector text))] (for [[index-sentence sentence] (map-indexed vector (put-links-in-vector text))]
^{:key (str message-id index-sentence)} ^{:key (str message-id index-sentence)}
[react/view {:flex-direction :row [react/view {:style {:flex-direction :row
:flex-wrap :wrap} :flex-wrap :wrap}}
(doall (doall
(for [[index word] (map-indexed vector sentence)] (for [[index word] (map-indexed vector sentence)]
(if (vector? word) (if (vector? word)
^{:key (str message-id index-sentence index)} ^{:key (str message-id index-sentence index)}
[link-button word outgoing] [link-button word false]
^{:key (str message-id index-sentence index)} ^{:key (str message-id index-sentence index)}
[react/text {:style (styles/message-text outgoing)} [react/text {:style (styles/message-text false)}
word])))]))] 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)]])
(views/defview photo-placeholder [] (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}] (views/defview message-with-name-and-avatar [text {:keys [from first-in-group? timestamp] :as message}]
[react/view {:style (styles/message-row message)} [react/view
[react/view {:style styles/message-row-column} (when first-in-group?
(when first-in-group? [react/view {:style {:flex-direction :row :margin-top 24}}
[message-author-name message]) [member-photo from]
[react/view {:style styles/not-first-in-group-wrapper} [message-author-name message]
(if last-in-group? [react/view {:style {:flex 1}}]
[member-photo from] [react/text {:style styles/message-timestamp}
[photo-placeholder]) (time/timestamp->time timestamp)]])
[message-with-timestamp text message (styles/message-box message)]]]]) [react/view {:style styles/not-first-in-group-wrapper}
[photo-placeholder]
[message-without-timestamp text message]]])
(defmulti message (fn [_ _ {:keys [content-type]}] content-type)) (defmulti message (fn [_ _ {:keys [content-type]}] content-type))
(defmethod message constants/content-type-command (defmethod message constants/content-type-command
[_ _ message] [_ _ {:keys [from] :as message}]
[react/view {:style (styles/message-row message)} [react/view
[react/view {:style styles/message-command-container} [react/view {:style {:flex-direction :row :align-items :center :margin-top 15}}
[message/message-content-command message]]]) [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 (defmethod message :default
[text me? {:keys [message-id chat-id message-status user-statuses from [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) (when (nil? message-id)
(log/debug "nil?" message)) (log/debug "nil?" message))
(if (= type :datemark) (if (= type :datemark)
@ -216,9 +219,7 @@
(fn [] (fn []
^{:key (str "message" message-id)} ^{:key (str "message" message-id)}
[react/view [react/view
(if (and group-chat (not outgoing)) [message-with-name-and-avatar text message]
[message-with-name-and-avatar text message]
[text-only-message text message])
[react/view {:style (message.style/delivery-status outgoing)} [react/view {:style (message.style/delivery-status outgoing)}
[message/message-delivery-status message]]])})))) [message/message-delivery-status message]]])}))))
@ -258,7 +259,7 @@
:ref #(reset! scroll-ref %)} :ref #(reset! scroll-ref %)}
[react/view [react/view
(doall (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} ^{:key message-obj}
[message (:text content) (= from current-public-key) [message (:text content) (= from current-public-key)
(assoc message-obj :group-chat group-chat (assoc message-obj :group-chat group-chat
@ -285,7 +286,7 @@
[react/text {:style styles/reply-content-message} message-text]])) [react/text {:style styles/reply-content-message} message-text]]))
(views/defview reply-member-photo [from] (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) [react/image {:source {:uri (if (string/blank? photo-path)
(identicon/identicon from) (identicon/identicon from)
photo-path)} photo-path)}
@ -345,16 +346,17 @@
(views/letsubs [{:keys [input-text chat-id] :as current-chat} [:get-current-chat]] (views/letsubs [{:keys [input-text chat-id] :as current-chat} [:get-current-chat]]
[react/view {:style styles/chat-view} [react/view {:style styles/chat-view}
[toolbar-chat-view current-chat] [toolbar-chat-view current-chat]
[react/view {:style styles/separator}]
[messages-view current-chat] [messages-view current-chat]
[react/view {:style styles/separator}]
[reply-message-view] [reply-message-view]
[chat-text-input chat-id input-text]])) [chat-text-input chat-id input-text]]))
(views/defview chat-profile [] (views/defview chat-profile []
(letsubs [identity [:get-current-contact-identity] (views/letsubs [identity [:get-current-contact-identity]
maybe-contact [:get-current-contact]] maybe-contact [:get-current-contact]]
(let [contact (or maybe-contact (utils.contacts/whisper-id->new-contact identity)) (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} [react/view {:style styles/chat-profile-body}
[profile.views/profile-badge contact] [profile.views/profile-badge contact]
;; for private chat, public key will be chat-id ;; for private chat, public key will be chat-id