diff --git a/src/status_im/chat/styles/message.cljs b/src/status_im/chat/styles/message.cljs index 6dd375acbd..120ed222c9 100644 --- a/src/status_im/chat/styles/message.cljs +++ b/src/status_im/chat/styles/message.cljs @@ -261,52 +261,6 @@ :textAlign :center :color text2-color}) -(def online-container - {:position :absolute - :top 44 - :left 44 - :width 24 - :height 24 - :borderRadius 12 - :backgroundColor online-color - :borderWidth 2 - :borderColor color-white}) - -(def online-dot - {:position :absolute - :top 8 - :width 4 - :height 4 - :borderRadius 2 - :backgroundColor color-white}) - -(def online-dot-left - (assoc online-dot :left 5)) - -(def online-dot-right - (assoc online-dot :left 11)) - -(def contact-photo-container - {:borderRadius 32}) - -(def contact-photo - {:border-radius 32 - :width 64 - :height 64}) - -(def message-date-container - {:backgroundColor color-light-blue-transparent - :height 24 - :borderRadius 12 - :alignSelf :center - :marginTop 20 - :marginBottom 20 - :paddingTop 5 - :paddingHorizontal 12}) - -(def message-date-text - (assoc style-sub-text :textAlign :center)) - (defn message-container [height] {:height height}) diff --git a/src/status_im/chat/views/message.cljs b/src/status_im/chat/views/message.cljs index 95bffe7e6b..9798a47305 100644 --- a/src/status_im/chat/views/message.cljs +++ b/src/status_im/chat/views/message.cljs @@ -24,22 +24,15 @@ content-type-status content-type-command content-type-command-request]] + [status-im.components.chat-icon.screen :refer [chat-icon-message-status]] [status-im.utils.identicon :refer [identicon]] [status-im.utils.gfycat.core :refer [generate-gfy]] [status-im.i18n :refer [label]] [status-im.chat.utils :as cu] [clojure.string :as str])) -(defn contact-photo [photo-path] - [view st/contact-photo-container - [image {:source (if (s/blank? photo-path) - res/user-no-photo - {:uri photo-path}) - :style st/contact-photo}]]) - -(defn message-content-status [{:keys [from]}] - (let [chat-photo-path (subscribe [:chat-photo from]) - {:keys [group-chat name]} (subscribe [:chat-properties [:group-chat :name]]) +(defn message-content-status [_] + (let [{:keys [chat-id group-chat name color]} (subscribe [:chat-properties [:chat-id :group-chat :name :color]]) members (subscribe [:current-chat-contacts])] (fn [{:keys [messages-count content datemark]}] (let [{:keys [photo-path @@ -48,12 +41,9 @@ {:photo-path nil :status nil :last-online 0} - (first @members)) - online? (-> (- (time/now-ms) last-online) - (< (* 60 1000)))] + (first @members))] [view st/status-container - [view st/status-image-view - [contact-photo (or photo-path @chat-photo-path)]] + [chat-icon-message-status @chat-id @group-chat @name @color false] [text {:style st/status-from :font :default :number-of-lines 1} diff --git a/src/status_im/components/chat_icon/screen.cljs b/src/status_im/components/chat_icon/screen.cljs index 7353dcf7b0..2dc5e314c4 100644 --- a/src/status_im/components/chat_icon/screen.cljs +++ b/src/status_im/components/chat_icon/screen.cljs @@ -78,6 +78,16 @@ :default-chat-icon (st/default-chat-icon-menu-item color) :default-chat-icon-text st/default-chat-icon-text}]) +(defn chat-icon-message-status [chat-id group-chat name color online] + [chat-icon-view chat-id group-chat name online + {:container st/container-message-status + :online-view st/online-view + :online-dot-left st/online-dot-left + :online-dot-right st/online-dot-right + :chat-icon st/chat-icon-message-status + :default-chat-icon (st/default-chat-icon-message-status color) + :default-chat-icon-text st/message-status-icon-text}]) + (defn contact-icon-view [contact styles] (let [photo-path (:photo-path contact) ;; TODO: stub diff --git a/src/status_im/components/chat_icon/styles.cljs b/src/status_im/components/chat_icon/styles.cljs index d94cc11f18..3695e75d7d 100644 --- a/src/status_im/components/chat_icon/styles.cljs +++ b/src/status_im/components/chat_icon/styles.cljs @@ -35,12 +35,23 @@ :height 36 :border-radius 18})) +(defn default-chat-icon-message-status [color] + (merge (default-chat-icon color) + {:width 64 + :height 64 + :border-radius 32})) + (def default-chat-icon-text {:marginTop -2 :color color-white :fontSize 16 :lineHeight 20}) +(def message-status-icon-text + {:marginTop -2 + :color color-white + :fontSize 24}) + (def chat-icon {:margin 4 :border-radius 20 @@ -70,6 +81,11 @@ :height 36 :border-radius 18})) +(def chat-icon-message-status + {:border-radius 32 + :width 64 + :height 64}) + (def online-view-wrapper {:position :absolute :bottom -1 @@ -152,3 +168,6 @@ (def container-profile {:width 72 :height 72}) + +(def container-message-status + {:margin-top 20})