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

Fixes for chat input; animations leftovers removed 

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
This commit is contained in:
alwxndr 2018-03-09 15:58:27 +01:00 committed by Julien Eluard
parent 4145a31a2d
commit 2864b6b4c6
No known key found for this signature in database
GPG Key ID: 6FD7DB5437FCBEF6
9 changed files with 46 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/status_im/chat/screen.cljs
View File

@ -112,14 +112,20 @@
(letsubs [{:keys [group-chat public? input-text]} [:get-current-chat] (letsubs [{:keys [group-chat public? input-text]} [:get-current-chat]
show-bottom-info? [:get-current-chat-ui-prop :show-bottom-info?] show-bottom-info? [:get-current-chat-ui-prop :show-bottom-info?]
current-view [:get :view-id]] current-view [:get :view-id]]
[react/view {:style style/chat-view ;; this scroll-view is a hack that allows us to use on-blur and on-focus on Android
:on-layout (fn [e] ;; more details here: https://github.com/facebook/react-native/issues/11071
(re-frame/dispatch [:set :layout-height (-> e .-nativeEvent .-layout .-height)]))} [react/scroll-view {:scroll-enabled false
[chat-toolbar public?] :style style/scroll-root
(when (= :chat current-view) :content-container-style style/scroll-root
[messages-view-animation :keyboard-should-persist-taps :handled}
[messages-view group-chat]]) [react/view {:style style/chat-view
[input/container {:text-empty? (string/blank? input-text)}] :on-layout (fn [e]
(when show-bottom-info? (re-frame/dispatch [:set :layout-height (-> e .-nativeEvent .-layout .-height)]))}
[bottom-info/bottom-info-view]) [chat-toolbar public?]
[connectivity/error-view {:top (get platform/platform-specific :status-bar-default-height)}]])) (when (= :chat current-view)
[messages-view-animation
[messages-view group-chat]])
[input/container {:text-empty? (string/blank? input-text)}]
(when show-bottom-info?
[bottom-info/bottom-info-view])
[connectivity/error-view {:top (get platform/platform-specific :status-bar-default-height)}]]]))

41
src/status_im/chat/styles/input/box_header.cljs
View File

@ -1,41 +0,0 @@
(ns status-im.chat.styles.input.box-header
(:require [status-im.ui.components.styles :as common]))
(def header-height 33)
(def header-container
{:background-color common/color-white
:align-items :center
:justify-content :center
:height header-height})
(def header-title-container
{:flex-direction :row
:height header-height
:border-bottom-color "rgba(193, 199, 203, 0.28)"
:border-bottom-width 1})
(defn header-title-text [back?]
{:color common/color-black
:flex 1
:font-size 15
:text-align :center
:padding-top 0
:margin-left (if back? 32 72)
:margin-right 32})
(def header-back-container
{:width 24
:height 24
:margin-left 16
:top -4})
(def header-close-container
{:width 24
:height 24
:margin-right 16
:top -4})
(def header-icon
{:width 24
:height 24})

4
src/status_im/chat/styles/screen.cljs
View File

@ -3,6 +3,10 @@
(:require [status-im.ui.components.styles :as component.styles] (:require [status-im.ui.components.styles :as component.styles]
[status-im.ui.components.colors :as colors])) [status-im.ui.components.colors :as colors]))
(def scroll-root
{:flex 1})
(def chat-view (def chat-view
{:flex 1 {:flex 1
:background-color component.styles/chat-background}) :background-color component.styles/chat-background})

8
src/status_im/chat/views/input/animations/expandable.cljs
View File

@ -16,12 +16,13 @@
:friction 10 :friction 10
:tension 60})))) :tension 60}))))
(defview expandable-view [{:keys [key custom-header]} & elements] (defview expandable-view [{:keys [key]} & elements]
(letsubs [anim-value (animation/create-value 0) (letsubs [anim-value (animation/create-value 0)
input-height [:get-current-chat-ui-prop :input-height] input-height [:get-current-chat-ui-prop :input-height]
chat-input-margin [:chat-input-margin] chat-input-margin [:chat-input-margin]
keyboard-height [:get :keyboard-height] keyboard-height [:get :keyboard-height]
chat-layout-height [:get :layout-height]] chat-layout-height [:get :layout-height]
input-focused? [:get-current-chat-ui-prop :input-focused?]]
(let [input-height (or input-height (+ input-style/padding-vertical (let [input-height (or input-height (+ input-style/padding-vertical
input-style/min-input-height input-style/min-input-height
input-style/padding-vertical input-style/padding-vertical
@ -33,4 +34,5 @@
(into [react/scroll-view {:keyboard-should-persist-taps :always (into [react/scroll-view {:keyboard-should-persist-taps :always
:on-content-size-change #(expandable-view-on-update anim-value %2) :on-content-size-change #(expandable-view-on-update anim-value %2)
:bounces false}] :bounces false}]
elements)]]))) (when input-focused?
elements))]])))

39
src/status_im/chat/views/input/box_header.cljs
View File

@ -1,39 +0,0 @@
(ns status-im.chat.views.input.box-header
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
[status-im.ui.components.react :refer [view
touchable-highlight
text
icon]]
[status-im.chat.styles.input.box-header :as style]
[taoensso.timbre :as log]))
(defn get-header [type]
(fn []
(let [parameter-box (subscribe [:chat-parameter-box])
result-box (subscribe [:get-current-chat-ui-prop :result-box])
chat-id (subscribe [:get-current-chat-id])
command (subscribe [:selected-chat-command])
index (subscribe [:current-chat-argument-position])]
(fn []
(let [{:keys [showBack title]} (if (= type :parameter-box)
@parameter-box
@result-box)]
[view {:style style/header-container}
[view style/header-title-container
(when showBack
[touchable-highlight {:on-press #(dispatch [:select-prev-argument])}
[view style/header-back-container
[icon :back_gray style/header-icon]]])
[text {:style (style/header-title-text showBack)
:number-of-lines 1
:font :medium}
title]
[touchable-highlight
{:on-press (fn []
(if (= type :parameter-box)
(let [command-name (get-in @command [:command :name])]
(dispatch [:set-in [:chats @chat-id :parameter-boxes command-name @index] nil]))
(dispatch [:set-chat-ui-props {:result-box nil}])))}
[view style/header-close-container
[icon :close_light_gray style/header-icon]]]]])))))

12
src/status_im/chat/views/input/input.cljs
View File

@ -31,7 +31,9 @@
:editable true :editable true
:blur-on-submit false :blur-on-submit false
:on-focus #(re-frame/dispatch [:set-chat-ui-props {:input-focused? true}]) :on-focus #(re-frame/dispatch [:set-chat-ui-props {:input-focused? true}])
:on-blur #(re-frame/dispatch [:set-chat-ui-props {:input-focused? false}]) :on-blur (fn []
(re-frame/dispatch [:set-chat-ui-props {:input-focused? false}])
(re-frame/dispatch [:set-chat-input-text ""]))
:on-submit-editing (fn [_] :on-submit-editing (fn [_]
(if single-line-input? (if single-line-input?
(re-frame/dispatch [:send-current-message]) (re-frame/dispatch [:send-current-message])
@ -41,7 +43,7 @@
(set-container-width-fn (.-width (.-layout (.-nativeEvent e))))) (set-container-width-fn (.-width (.-layout (.-nativeEvent e)))))
:on-change (fn [e] :on-change (fn [e]
(let [native-event (.-nativeEvent e) (let [native-event (.-nativeEvent e)
text (.-text native-event) text (.-text native-event)
content-size (.. native-event -contentSize)] content-size (.. native-event -contentSize)]
(when (and (not single-line-input?) (when (and (not single-line-input?)
content-size) content-size)
@ -58,8 +60,8 @@
h (.-height s)] h (.-height s)]
(set-container-width-fn w) (set-container-width-fn w)
(set-layout-height-fn h))) (set-layout-height-fn h)))
:on-selection-change #(let [s (-> (.-nativeEvent %) :on-selection-change #(let [s (-> (.-nativeEvent %)
(.-selection)) (.-selection))
end (.-end s)] end (.-end s)]
(re-frame/dispatch [:update-text-selection end])) (re-frame/dispatch [:update-text-selection end]))
:style (style/input-view height single-line-input?) :style (style/input-view height single-line-input?)
@ -157,7 +159,7 @@
(defn commands-button [] (defn commands-button []
[react/touchable-highlight [react/touchable-highlight
{:on-press #(do (re-frame/dispatch [:set-chat-input-text constants/command-char]) {:on-press #(do (re-frame/dispatch [:set-chat-input-text constants/command-char])
(react/dismiss-keyboard!))} (re-frame/dispatch [:chat-input-focus :input-ref]))}
[react/view [react/view
[vi/icon :icons/input-commands {:container-style style/input-commands-icon [vi/icon :icons/input-commands {:container-style style/input-commands-icon
:color :dark}]]]) :color :dark}]]])

17
src/status_im/chat/views/input/parameter_box.cljs
View File

@ -1,8 +1,6 @@
(ns status-im.chat.views.input.parameter-box (ns status-im.chat.views.input.parameter-box
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [re-frame.core :refer [subscribe dispatch]] (:require [status-im.chat.views.input.animations.expandable :as expandable]
[status-im.chat.views.input.animations.expandable :as expandable]
[status-im.chat.views.input.box-header :as box-header]
[status-im.chat.styles.input.parameter-box :as style] [status-im.chat.styles.input.parameter-box :as style]
[status-im.commands.utils :as command-utils] [status-im.commands.utils :as command-utils]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
@ -16,12 +14,7 @@
(command-utils/generate-hiccup markup (first bot-id-bot-db) (second bot-id-bot-db))])) (command-utils/generate-hiccup markup (first bot-id-bot-db) (second bot-id-bot-db))]))
(defview parameter-box-view [] (defview parameter-box-view []
(letsubs [show-parameter-box? [:show-parameter-box?] (letsubs [show-parameter-box? [:show-parameter-box?]]
parameter-box [:chat-parameter-box]] (when show-parameter-box?
(let [{:keys [title]} parameter-box] [expandable/expandable-view {:key :parameter-box}
(when show-parameter-box? [parameter-box-container]])))
[expandable/expandable-view
{:key :parameter-box
:custom-header (when title
(box-header/get-header :parameter-box))}
[parameter-box-container]]))))

23
src/status_im/chat/views/input/result_box.cljs
View File

@ -1,23 +1,14 @@
(ns status-im.chat.views.input.result-box (ns status-im.chat.views.input.result-box
(:require-macros [status-im.utils.views :refer [defview]]) (:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]] (:require [status-im.ui.components.react :as react]
[status-im.ui.components.react :refer [view [status-im.chat.views.input.animations.expandable :as expandable]
scroll-view [status-im.ui.components.connectivity.view :as connectivity]
touchable-highlight [status-im.ui.components.styles :as common-styles]))
text
icon]]
[status-im.chat.views.input.animations.expandable :refer [expandable-view]]
[status-im.chat.views.input.box-header :as box-header]
[status-im.ui.components.connectivity.view :as connectivity]))
(defview result-box-container [markup]
[view {:flex 1}
markup])
(defview result-box-view [] (defview result-box-view []
[markup [:result-box-markup]] [markup [:result-box-markup]]
(when markup (when markup
[expandable-view {:key :result-box [expandable/expandable-view {:key :result-box}
:custom-header (box-header/get-header :result-box)} [react/view common-styles/flex
[result-box-container markup] markup]
[connectivity/error-view]])) [connectivity/error-view]]))

7
src/status_im/chat/views/input/suggestions.cljs
View File

@ -19,12 +19,7 @@
(defview suggestions-view [] (defview suggestions-view []
(letsubs [commands [:get-available-commands]] (letsubs [commands [:get-available-commands]]
[expandable/expandable-view {:key :suggestions [expandable/expandable-view {:key :suggestions}
:draggable? false
:height (* (count commands)
(+ style/item-height
style/border-height))
:dynamic-height? true}
[react/view [react/view
[react/scroll-view {:keyboard-should-persist-taps :always [react/scroll-view {:keyboard-should-persist-taps :always
:bounces false} :bounces false}