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

desktop emoji 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2019-02-10 18:18:58 +01:00
parent f8dfc82dd4
commit 3efeb71a16
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
3 changed files with 100 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/status_im/ui/screens/desktop/main/chat/emoji.cljs Normal file
View File

File diff suppressed because one or more lines are too long

10
src/status_im/ui/screens/desktop/main/chat/events.cljs
View File

@ -13,3 +13,13 @@
:show-profile-desktop
(fn [cofx [_ identity]]
(show-profile-desktop identity cofx)))
(handlers/register-handler-fx
:desktop/insert-emoji
(fn [{{:keys [desktop current-chat-id chats] :as db} :db} [_ emoji]]
(let [inp-txt (get-in chats [current-chat-id :input-text])
input (:input-ref desktop)
sel (:input-selection desktop)
new-text (if sel (str (subs inp-txt 0 sel) emoji (subs inp-txt sel)) (str inp-txt emoji))]
(when input (.setNativeProps input (clj->js {:text new-text})))
{:db (assoc-in db [:chats current-chat-id :input-text] new-text)})))

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

@ -23,28 +23,30 @@
[status-im.utils.datetime :as time]
[status-im.utils.gfycat.core :as gfycat]
[status-im.utils.identicon :as identicon]
[status-im.utils.utils :as utils])
[status-im.utils.utils :as utils]
[status-im.ui.screens.desktop.main.chat.emoji :as emoji]
[status-im.ui.components.icons.vector-icons :as icons])
(:require-macros [status-im.utils.views :as views]))
(defn toolbar-chat-view
[{:keys [chat-id chat-name contact color public-key public? group-chat]
:as current-chat}]
:as current-chat}]
(let [{:keys [pending? public-key photo-path]} contact]
[react/view {:style styles/toolbar-chat-view}
[react/view {:style {:flex-direction :row
:flex 1}}
:flex 1}}
(if public?
[react/view {:style (styles/topic-image color)}
[react/text {:style styles/topic-text}
(string/capitalize (second chat-name))]]
[react/image {:style styles/chat-icon
[react/image {:style styles/chat-icon
:source {:uri photo-path}}])
[react/view {:style (styles/chat-title-and-type pending?)}
[react/text {:style styles/chat-title
:font :medium}
chat-name]
(cond pending?
[react/text {:style styles/add-contact-text
[react/text {:style styles/add-contact-text
:on-press #(re-frame/dispatch [:contact.ui/add-to-contact-pressed public-key])}
(i18n/label :t/add-to-contacts)]
public?
@ -59,7 +61,7 @@
:height 24}}]]]))
(views/defview message-author-name [{:keys [from]}]
(views/letsubs [incoming-name [:contacts/contact-name-by-identity from]]
(views/letsubs [incoming-name [:contacts/contact-name-by-identity from]]
[react/view {:flex-direction :row}
(when incoming-name
[react/text {:style styles/author} incoming-name])
@ -68,7 +70,7 @@
(views/defview member-photo [from]
(views/letsubs [current-public-key [:account/public-key]
photo-path [:chats/photo-path from]]
photo-path [:chats/photo-path from]]
[react/view {:style {:width 40 :margin-horizontal 16}}
[react/view {:style {:position :absolute}}
[react/touchable-highlight {:on-press #(when-not (= current-public-key from)
@ -101,14 +103,14 @@
[react/touchable-highlight {:on-press (fn [arg]
(when (= "right" (.-button (.-nativeEvent arg)))
(show-desktop-menu
[{:text (i18n/label :t/sharing-copy-to-clipboard)
[{:text (i18n/label :t/sharing-copy-to-clipboard)
:on-select #(do (utils/show-popup "" "Message copied to clipboard") (react/copy-to-clipboard text))}
{:text (i18n/label :t/message-reply)
{:text (i18n/label :t/message-reply)
:on-select #(when (message-sent? user-statuses current-public-key)
(re-frame/dispatch [:chat.ui/reply-to-message message-id old-message-id]))}])))}
(let [collapsible? (and (:should-collapse? content) group-chat)
char-limit (if (and collapsible? (not expanded?))
constants/chars-collapse-threshold constants/desktop-msg-chars-hard-limit)
char-limit (if (and collapsible? (not expanded?))
constants/chars-collapse-threshold constants/desktop-msg-chars-hard-limit)
message-text (core-utils/truncate-str (:text content) char-limit)]
[react/view {:style styles/message-container}
(when (:response-to content)
@ -170,7 +172,7 @@
(defmethod message constants/content-type-sticker
[_ _ {:keys [content] :as message}]
[message-wrapper message
[react/image {:style {:margin 10 :width 140 :height 140}
[react/image {:style {:margin 10 :width 140 :height 140}
:source {:uri (:uri content)}}]])
(views/defview message-content-status [text message]
@ -214,37 +216,37 @@
(reset! messages-to-load next-count)))
(views/defview messages-view [{:keys [chat-id group-chat]}]
(views/letsubs [messages [:chats/current-chat-messages-stream]
(views/letsubs [messages [:chats/current-chat-messages-stream]
current-public-key [:account/public-key]
messages-to-load (reagent/atom load-step)
chat-id* (reagent/atom nil)]
messages-to-load (reagent/atom load-step)
chat-id* (reagent/atom nil)]
{:component-did-update #(if (:messages-initialized? (second (.-argv (.-props %1))))
(load-more (count messages) messages-to-load)
(re-frame/dispatch [:chat.ui/load-more-messages]))
:component-did-mount #(if (:messages-initialized? (second (.-argv (.-props %1))))
(load-more (count messages) messages-to-load)
(re-frame/dispatch [:chat.ui/load-more-messages]))}
(let [scroll-ref (atom nil)
scroll-timer (atom nil)
(let [scroll-ref (atom nil)
scroll-timer (atom nil)
scroll-height (atom nil)
_ (when (or (not @chat-id*) (not= @chat-id* chat-id))
(do
(reset! messages-to-load load-step)
(reset! chat-id* chat-id)))]
_ (when (or (not @chat-id*) (not= @chat-id* chat-id))
(do
(reset! messages-to-load load-step)
(reset! chat-id* chat-id)))]
[react/view {:style styles/messages-view}
[react/scroll-view {:scrollEventThrottle 16
:headerHeight styles/messages-list-vertical-padding
:footerWidth styles/messages-list-vertical-padding
[react/scroll-view {:scrollEventThrottle 16
:headerHeight styles/messages-list-vertical-padding
:footerWidth styles/messages-list-vertical-padding
:enableArrayScrollingOptimization true
:inverted true
:on-scroll (fn [e]
(let [ne (.-nativeEvent e)
y (.-y (.-contentOffset ne))]
(when (<= y 0)
(when @scroll-timer (js/clearTimeout @scroll-timer))
(reset! scroll-timer (js/setTimeout #(re-frame/dispatch [:chat.ui/load-more-messages]) 300)))
(reset! scroll-height (+ y (.-height (.-layoutMeasurement ne))))))
:ref #(reset! scroll-ref %)}
:inverted true
:on-scroll (fn [e]
(let [ne (.-nativeEvent e)
y (.-y (.-contentOffset ne))]
(when (<= y 0)
(when @scroll-timer (js/clearTimeout @scroll-timer))
(reset! scroll-timer (js/setTimeout #(re-frame/dispatch [:chat.ui/load-more-messages]) 300)))
(reset! scroll-height (+ y (.-height (.-layoutMeasurement ne))))))
:ref #(reset! scroll-ref %)}
[react/view
(doall
(for [{:keys [from content] :as message-obj} (take @messages-to-load messages)]
@ -256,7 +258,7 @@
(views/defview send-button [inp-ref disconnected?]
(views/letsubs [{:keys [input-text]} [:chats/current-chat]]
(let [empty? (= "" input-text)
(let [empty? (= "" input-text)
inactive? (or empty? disconnected?)]
[react/touchable-highlight {:style styles/send-button
:disabled inactive?
@ -297,8 +299,9 @@
[vector-icons/icon :main-icons/close {:style styles/reply-close-icon}]]]])))
(views/defview chat-text-input [chat-id input-text]
(views/letsubs [inp-ref (atom nil)
disconnected? [:disconnected?]]
(views/letsubs [inp-ref (atom nil)
disconnected? [:disconnected?]
show-emoji? [:get-in [:desktop :show-emoji?]]]
{:component-will-update
(fn [e [_ new-chat-id new-input-text]]
(let [[_ old-chat-id] (.. e -props -argv)]
@ -315,9 +318,11 @@
:blur-on-submit true
:style (styles/chat-text-input container-height)
:font :default
:ref #(reset! inp-ref %)
:ref #(do (reset! inp-ref %)
(re-frame/dispatch [:set-in [:desktop :input-ref] %]))
:default-value input-text
:on-content-size-change #(set-container-height-fn (.-height (.-contentSize (.-nativeEvent %))))
:on-selection-change #(re-frame/dispatch [:set-in [:desktop :input-selection] (.-start (.-selection (.-nativeEvent %)))])
:submit-shortcut {:key "Enter"}
:on-submit-editing #(when-not disconnected?
(.clear @inp-ref)
@ -327,13 +332,35 @@
(let [native-event (.-nativeEvent e)
text (.-text native-event)]
(re-frame/dispatch [:chat.ui/set-chat-input-text text])))}]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:set-in [:desktop :show-emoji?] (not show-emoji?)])}
[icons/icon :main-icons/user-profile {:color colors/gray :height 40 :width 40
:container-style {:margin-right 14}}]]
[send-button inp-ref disconnected?]])))
(defn emoji-view []
(let [current-emoji (reagent/atom "Smileys")]
(fn []
[react/view {:margin 10}
[react/view
[react/view {:style {:flex-direction :row :flex-wrap :wrap}}
(for [emoj-key (keys emoji/emoji)]
[react/touchable-highlight {:on-press #(reset! current-emoji emoj-key)}
[react/text {:style {:color (if (= @current-emoji emoj-key) colors/black colors/gray)
:margin-right 20 :margin-bottom 5}
:number-of-lines 1}
emoj-key]])]
[react/view {:style {:flex-direction :row :flex-wrap :wrap :margin-top 5 :margin-bottom 10}}
(for [[inx emoji-code] (map-indexed vector (get emoji/emoji @current-emoji))]
^{:key (str "emoji" inx emoji-code)}
[react/touchable-highlight {:on-press #(re-frame/dispatch [:desktop/insert-emoji emoji-code])}
[react/view {:padding 2}
[react/text {:style {:font-size 20}} emoji-code]]])]]])))
(views/defview chat-view []
(views/letsubs [{:keys [input-text chat-id pending-invite-inviter-name] :as current-chat}
[:chats/current-chat]
show-emoji? [:get-in [:desktop :show-emoji?]]
current-public-key [:account/public-key]]
[react/view {:style styles/chat-view}
[toolbar-chat-view current-chat]
[react/view {:style styles/separator}]
@ -342,11 +369,13 @@
[messages-view current-chat])
[react/view {:style styles/separator}]
[reply-message-view]
(when show-emoji?
[emoji-view show-emoji?])
[chat-text-input chat-id input-text]]))
(views/defview chat-profile []
(views/letsubs [identity [:contacts/current-contact-identity]
maybe-contact [:contacts/current-contact]]
(views/letsubs [identity [:contacts/current-contact-identity]
maybe-contact [:contacts/current-contact]]
(let [contact (or maybe-contact (contact.db/public-key->new-contact identity))
{:keys [pending? public-key]} contact]
[react/view {:style styles/chat-profile-body}
@ -356,12 +385,12 @@
(if (or (nil? pending?) pending?)
[react/touchable-highlight {:on-press #(re-frame/dispatch [:contact.ui/add-to-contact-pressed public-key])}
[react/view {:style styles/chat-profile-row}
[react/view {:style styles/chat-profile-icon-container
[react/view {:style styles/chat-profile-icon-container
:accessibility-label :add-contact-link}
[vector-icons/icon :main-icons/add {:style (styles/chat-profile-icon colors/blue)}]]
[react/text {:style (styles/contact-card-text colors/blue)} (i18n/label :t/add-to-contacts)]]]
[react/view {:style styles/chat-profile-row}
[react/view {:style styles/chat-profile-icon-container
[react/view {:style styles/chat-profile-icon-container
:accessibility-label :add-contact-link}
[vector-icons/icon :main-icons/add {:style (styles/chat-profile-icon colors/gray)}]]
[react/text {:style (styles/contact-card-text colors/gray)} (i18n/label :t/in-contacts)]])
@ -369,7 +398,7 @@
{:on-press #(re-frame/dispatch
[:contact.ui/send-message-pressed {:public-key public-key}])}
[react/view {:style styles/chat-profile-row}
[react/view {:style styles/chat-profile-icon-container
[react/view {:style styles/chat-profile-icon-container
:accessibility-label :send-message-link}
[vector-icons/icon :main-icons/message {:style (styles/chat-profile-icon colors/blue)}]]
[react/text {:style (styles/contact-card-text colors/blue)}