Fixes for chat input; animations leftovers removed
Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
This commit is contained in:
parent
4145a31a2d
commit
2864b6b4c6
|
@ -112,6 +112,12 @@
|
|||
(letsubs [{:keys [group-chat public? input-text]} [:get-current-chat]
|
||||
show-bottom-info? [:get-current-chat-ui-prop :show-bottom-info?]
|
||||
current-view [:get :view-id]]
|
||||
;; this scroll-view is a hack that allows us to use on-blur and on-focus on Android
|
||||
;; more details here: https://github.com/facebook/react-native/issues/11071
|
||||
[react/scroll-view {:scroll-enabled false
|
||||
:style style/scroll-root
|
||||
:content-container-style style/scroll-root
|
||||
:keyboard-should-persist-taps :handled}
|
||||
[react/view {:style style/chat-view
|
||||
:on-layout (fn [e]
|
||||
(re-frame/dispatch [:set :layout-height (-> e .-nativeEvent .-layout .-height)]))}
|
||||
|
@ -122,4 +128,4 @@
|
|||
[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)}]]))
|
||||
[connectivity/error-view {:top (get platform/platform-specific :status-bar-default-height)}]]]))
|
||||
|
|
|
@ -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})
|
|
@ -3,6 +3,10 @@
|
|||
(:require [status-im.ui.components.styles :as component.styles]
|
||||
[status-im.ui.components.colors :as colors]))
|
||||
|
||||
|
||||
(def scroll-root
|
||||
{:flex 1})
|
||||
|
||||
(def chat-view
|
||||
{:flex 1
|
||||
:background-color component.styles/chat-background})
|
||||
|
|
|
@ -16,12 +16,13 @@
|
|||
:friction 10
|
||||
:tension 60}))))
|
||||
|
||||
(defview expandable-view [{:keys [key custom-header]} & elements]
|
||||
(defview expandable-view [{:keys [key]} & elements]
|
||||
(letsubs [anim-value (animation/create-value 0)
|
||||
input-height [:get-current-chat-ui-prop :input-height]
|
||||
chat-input-margin [:chat-input-margin]
|
||||
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
|
||||
input-style/min-input-height
|
||||
input-style/padding-vertical
|
||||
|
@ -33,4 +34,5 @@
|
|||
(into [react/scroll-view {:keyboard-should-persist-taps :always
|
||||
:on-content-size-change #(expandable-view-on-update anim-value %2)
|
||||
:bounces false}]
|
||||
elements)]])))
|
||||
(when input-focused?
|
||||
elements))]])))
|
||||
|
|
|
@ -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]]]]])))))
|
|
@ -31,7 +31,9 @@
|
|||
:editable true
|
||||
:blur-on-submit false
|
||||
: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 [_]
|
||||
(if single-line-input?
|
||||
(re-frame/dispatch [:send-current-message])
|
||||
|
@ -157,7 +159,7 @@
|
|||
(defn commands-button []
|
||||
[react/touchable-highlight
|
||||
{: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
|
||||
[vi/icon :icons/input-commands {:container-style style/input-commands-icon
|
||||
:color :dark}]]])
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
(ns status-im.chat.views.input.parameter-box
|
||||
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
||||
(:require [re-frame.core :refer [subscribe dispatch]]
|
||||
[status-im.chat.views.input.animations.expandable :as expandable]
|
||||
[status-im.chat.views.input.box-header :as box-header]
|
||||
(:require [status-im.chat.views.input.animations.expandable :as expandable]
|
||||
[status-im.chat.styles.input.parameter-box :as style]
|
||||
[status-im.commands.utils :as command-utils]
|
||||
[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))]))
|
||||
|
||||
(defview parameter-box-view []
|
||||
(letsubs [show-parameter-box? [:show-parameter-box?]
|
||||
parameter-box [:chat-parameter-box]]
|
||||
(let [{:keys [title]} parameter-box]
|
||||
(letsubs [show-parameter-box? [:show-parameter-box?]]
|
||||
(when show-parameter-box?
|
||||
[expandable/expandable-view
|
||||
{:key :parameter-box
|
||||
:custom-header (when title
|
||||
(box-header/get-header :parameter-box))}
|
||||
[parameter-box-container]]))))
|
||||
[expandable/expandable-view {:key :parameter-box}
|
||||
[parameter-box-container]])))
|
||||
|
|
|
@ -1,23 +1,14 @@
|
|||
(ns status-im.chat.views.input.result-box
|
||||
(:require-macros [status-im.utils.views :refer [defview]])
|
||||
(:require [re-frame.core :refer [subscribe dispatch]]
|
||||
[status-im.ui.components.react :refer [view
|
||||
scroll-view
|
||||
touchable-highlight
|
||||
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])
|
||||
(:require [status-im.ui.components.react :as react]
|
||||
[status-im.chat.views.input.animations.expandable :as expandable]
|
||||
[status-im.ui.components.connectivity.view :as connectivity]
|
||||
[status-im.ui.components.styles :as common-styles]))
|
||||
|
||||
(defview result-box-view []
|
||||
[markup [:result-box-markup]]
|
||||
(when markup
|
||||
[expandable-view {:key :result-box
|
||||
:custom-header (box-header/get-header :result-box)}
|
||||
[result-box-container markup]
|
||||
[expandable/expandable-view {:key :result-box}
|
||||
[react/view common-styles/flex
|
||||
markup]
|
||||
[connectivity/error-view]]))
|
||||
|
|
|
@ -19,12 +19,7 @@
|
|||
|
||||
(defview suggestions-view []
|
||||
(letsubs [commands [:get-available-commands]]
|
||||
[expandable/expandable-view {:key :suggestions
|
||||
:draggable? false
|
||||
:height (* (count commands)
|
||||
(+ style/item-height
|
||||
style/border-height))
|
||||
:dynamic-height? true}
|
||||
[expandable/expandable-view {:key :suggestions}
|
||||
[react/view
|
||||
[react/scroll-view {:keyboard-should-persist-taps :always
|
||||
:bounces false}
|
||||
|
|
Loading…
Reference in New Issue