mirror of
https://github.com/status-im/status-react.git
synced 2025-01-11 11:34:45 +00:00
Improved desktop chat UI
Signed-off-by: Volodymyr Kozieiev <vkjr.sp@gmail.com>
This commit is contained in:
Volodymyr Kozieiev
parent
ce741d75e9
commit
c87cac252e
@ -1,6 +1,12 @@
|
||||
(ns status-im.ui.screens.desktop.main.chat.styles
|
||||
(:require [status-im.ui.components.colors :as colors]))
|
||||
|
||||
(def min-input-container-height 68)
|
||||
(def max-input-container-height 180)
|
||||
(def chat-vertical-padding 16)
|
||||
(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/hawkes-blue colors/white)]
|
||||
@ -44,19 +50,22 @@
|
||||
:margin-left 48
|
||||
:margin-bottom 4})
|
||||
|
||||
(def chat-box
|
||||
{:height 68
|
||||
:background-color :white
|
||||
:border-radius 12
|
||||
:margin-horizontal 24
|
||||
:padding-vertical 15})
|
||||
(defn chat-box [height]
|
||||
{:height (+ height (* 2 chat-vertical-padding))
|
||||
:min-height min-input-container-height
|
||||
:max-height max-input-container-height
|
||||
:padding-vertical chat-vertical-padding
|
||||
:flex-direction :row
|
||||
:overflow :hidden})
|
||||
|
||||
(def chat-box-inner
|
||||
{:flex-direction :row
|
||||
:flex 1})
|
||||
|
||||
(def chat-text-input
|
||||
{:flex 1})
|
||||
(defn chat-text-input [container-height]
|
||||
{:height container-height
|
||||
:min-height min-input-area-height
|
||||
:max-height max-input-area-height
|
||||
:margin-left 20
|
||||
:margin-right 22
|
||||
:flex 1
|
||||
:align-self :center})
|
||||
|
||||
(def messages-view
|
||||
{:flex 1
|
||||
@ -121,16 +130,26 @@
|
||||
(def not-first-in-group-wrapper
|
||||
{:flex-direction :row})
|
||||
|
||||
(def send-icon
|
||||
{:margin-left 16
|
||||
:width 30
|
||||
:height 30
|
||||
:border-radius 15
|
||||
:background-color colors/gray-lighter
|
||||
(def send-button
|
||||
{:height 34
|
||||
:width 34
|
||||
:margin-right 24
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:align-self :flex-end})
|
||||
|
||||
(defn send-icon [not-active?]
|
||||
{:height 34
|
||||
:width 34
|
||||
:border-radius 17
|
||||
:background-color (if not-active? colors/gray-lighter colors/blue)
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:transform [{:rotate "90deg"}]})
|
||||
|
||||
(defn send-icon-arrow [not-active?]
|
||||
{:tint-color (if not-active? :gray :white)})
|
||||
|
||||
(def chat-view
|
||||
{:flex 1
|
||||
:background-color :white})
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
[status-im.chat.views.message.message :as message]
|
||||
[status-im.utils.gfycat.core :as gfycat.core]
|
||||
[taoensso.timbre :as log]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.utils.gfycat.core :as gfycat]
|
||||
[status-im.constants :as constants]
|
||||
[status-im.utils.identicon :as identicon]
|
||||
@ -155,8 +156,7 @@
|
||||
scroll-timer (atom nil)
|
||||
scroll-height (atom nil)
|
||||
_ (when (or (not @chat-id*) (not= @chat-id* chat-id))
|
||||
(reset! chat-id* chat-id)
|
||||
#_(js/setTimeout #(when @scroll-ref (.scrollToEnd @scroll-ref)) 400))]
|
||||
(reset! chat-id* chat-id))]
|
||||
[react/view {:style styles/messages-view}
|
||||
[react/scroll-view {:scrollEventThrottle 16
|
||||
:headerHeight styles/messages-list-vertical-padding
|
||||
@ -182,16 +182,18 @@
|
||||
|
||||
(views/defview chat-text-input []
|
||||
(views/letsubs [inp-ref (atom nil)]
|
||||
[react/view {:style styles/chat-box}
|
||||
[react/view {:style styles/chat-box-inner}
|
||||
[react/view {:style {:flex 1}}
|
||||
(let [component (reagent/current-component)
|
||||
set-container-height-fn #(reagent/set-state component {:container-height %})
|
||||
{:keys [container-height empty?] :or {empty? true}} (reagent/state component)]
|
||||
[react/view {:style (styles/chat-box container-height)}
|
||||
[react/text-input {:placeholder (i18n/label :t/type-a-message)
|
||||
:auto-focus true
|
||||
:multiline true
|
||||
:blur-on-submit true
|
||||
:style styles/chat-text-input
|
||||
:style (styles/chat-text-input container-height)
|
||||
:font :default
|
||||
:ref #(reset! inp-ref %)
|
||||
:on-content-size-change #(set-container-height-fn (.-height (.-contentSize (.-nativeEvent %))))
|
||||
:on-key-press (fn [e]
|
||||
(let [native-event (.-nativeEvent e)
|
||||
key (.-key native-event)
|
||||
@ -204,13 +206,15 @@
|
||||
:on-change (fn [e]
|
||||
(let [native-event (.-nativeEvent e)
|
||||
text (.-text native-event)]
|
||||
(re-frame/dispatch [:set-chat-input-text text])))}]]
|
||||
[react/touchable-highlight {:on-press (fn []
|
||||
(reagent/set-state component {:empty? (= "" text)})
|
||||
(re-frame/dispatch [:set-chat-input-text text])))}]
|
||||
[react/touchable-highlight {:style styles/send-button
|
||||
:on-press (fn []
|
||||
(.clear @inp-ref)
|
||||
(.focus @inp-ref)
|
||||
(re-frame/dispatch [:send-current-message]))}
|
||||
[react/view {:style styles/send-icon}
|
||||
[icons/icon :icons/arrow-left]]]]]))
|
||||
[react/view {:style (styles/send-icon empty?)}
|
||||
[icons/icon :icons/arrow-left {:style (styles/send-icon-arrow empty?)}]]]])))
|
||||
|
||||
(views/defview chat-view []
|
||||
(views/letsubs [current-chat [:get-current-chat]]
|
||||
|
||||
@ -62,7 +62,8 @@
|
||||
|
||||
(def chat-last-message
|
||||
{:color colors/gray
|
||||
:font-size 14})
|
||||
:font-size 14
|
||||
:max-height 20})
|
||||
|
||||
(def timestamp
|
||||
{:justify-content :flex-start
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user