Skip to content

Commit

Permalink
first iteration
Browse files Browse the repository at this point in the history
  • Loading branch information
flexsurfer committed Nov 20, 2019
1 parent 7d1812c commit 8f62a60
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 16 deletions.
2 changes: 1 addition & 1 deletion src/status_im/subs.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -539,7 +539,7 @@
:<- [:chats/current-chat-ui-prop :input-height]
:<- [:chats/current-chat-ui-prop :input-focused?]
:<- [:keyboard-height]
:<- [:chats/current-chat-ui-prop :show-stickers?]
:<- [:chats/current-chat-ui-prop :input-bottom-sheet]
(fn [[home-content-layout-height input-height input-focused? kheight stickers?]]
(- (+ home-content-layout-height tabs.styles/tabs-height)
(if platform/iphone-x?
Expand Down
41 changes: 41 additions & 0 deletions src/status_im/ui/screens/chat/extensions/views.cljs
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
(ns status-im.ui.screens.chat.extensions.views
(:require-macros [status-im.utils.views :as views])
(:require [status-im.ui.components.react :as react]
[re-frame.core :as re-frame]
[status-im.utils.platform :as platform]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.animation :as anim]))

(def panel-height 270)

(defn button [showing?]
[react/touchable-highlight
{:on-press (fn [_]
(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-bottom-sheet (when-not showing? :extensions)}])
(when-not platform/desktop? (js/setTimeout #(react/dismiss-keyboard!) 100)))
:accessibility-label :show-extensions-icon}
[vector-icons/icon :main-icons/add {:container-style {:margin 14 :margin-right 6}
:color (if showing? colors/blue colors/gray)}]])

(defn show-panel-anim
[bottom-anim-value alpha-value]
(anim/start
(anim/parallel
[(anim/spring bottom-anim-value {:toValue 0
:useNativeDriver true})
(anim/timing alpha-value {:toValue 1
:duration 500
:useNativeDriver true})])))

(views/defview extensions-view []
(views/letsubs [bottom-anim-value (anim/create-value panel-height)
alpha-value (anim/create-value 0)]
{:component-did-mount #(show-panel-anim bottom-anim-value alpha-value)}
[react/animated-view {:style {:background-color :white
:height panel-height
:transform [{:translateY bottom-anim-value}]
:opacity alpha-value}}
[react/view {:width 127 :height 127 :align-items :center :justify-content :center
:background-color (colors/alpha "#887AF9" 0.2) :border-radius 16 :margin-left 8}
[react/text "Send transaction"]]]))
13 changes: 8 additions & 5 deletions src/status_im/ui/screens/chat/input/input.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
[status-im.utils.utils :as utils]
[status-im.utils.config :as config]
[taoensso.timbre :as log]
[status-im.ui.screens.chat.stickers.views :as stickers]))
[status-im.ui.screens.chat.stickers.views :as stickers]
[status-im.ui.screens.chat.extensions.views :as extensions]))

(defview basic-text-input [{:keys [set-container-width-fn height single-line-input?]}]
(letsubs [input-text [:chats/current-chat-input-text]
Expand All @@ -35,7 +36,7 @@
:editable (not cooldown-enabled?)
:blur-on-submit false
:on-focus #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-focused? true
:show-stickers? false
:input-bottom-sheet nil
:messages-focused? false}])
:on-blur #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-focused? false}])
:on-submit-editing #(when single-line-input?
Expand Down Expand Up @@ -66,7 +67,7 @@
:editable (not cooldown-enabled?)
:blur-on-submit false
:on-focus #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-focused? true
:show-stickers? false
:input-bottom-sheet nil
:messages-focused? false}])
:on-blur #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-focused? false}])
:submit-shortcut {:key "Enter"}
Expand Down Expand Up @@ -187,7 +188,7 @@
mainnet? [:mainnet?]
input-text [:chats/current-chat-input-text]
result-box [:chats/current-chat-ui-prop :result-box]
show-stickers? [:chats/current-chat-ui-prop :show-stickers?]
input-bottom-sheet [:chats/current-chat-ui-prop :input-bottom-sheet]
state-text (reagent/atom "")]
{:component-will-unmount #(when platform/desktop?
(re-frame/dispatch [:chat.ui/set-chat-input-text @state-text]))
Expand All @@ -209,7 +210,9 @@
[react/view {:style style/input-container}
[input-view {:single-line-input? single-line-input? :set-text set-text :state-text state-text}]
(when (and input-text-empty? mainnet?)
[stickers/button show-stickers?])
[stickers/button (= :stickers input-bottom-sheet)])
(when (and input-text-empty? mainnet?)
[extensions/button (= :extensions input-bottom-sheet)])
(if input-text-empty?
[commands-button]
(if platform/desktop?
Expand Down
2 changes: 1 addition & 1 deletion src/status_im/ui/screens/chat/message/datemark.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
{:on-press (fn [_]
(re-frame/dispatch
[:chat.ui/set-chat-ui-props {:messages-focused? true
:show-stickers? false}])
:input-bottom-sheet nil}])
(react/dismiss-keyboard!))}
[react/view style/datemark-mobile
[react/text {:style style/datemark-text}
Expand Down
2 changes: 1 addition & 1 deletion src/status_im/ui/screens/chat/message/message.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@
(when (and (= content-type constants/content-type-sticker) (:pack content))
(re-frame/dispatch [:stickers/open-sticker-pack (:pack content)]))
(re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true
:show-stickers? false}])
:input-bottom-sheet nil}])
(when-not platform/desktop?
(react/dismiss-keyboard!)))))
:on-long-press #(when (or (= content-type constants/content-type-text)
Expand Down
6 changes: 3 additions & 3 deletions src/status_im/ui/screens/chat/stickers/views.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@
(def icon-container (+ (* icon-horizontal-margin 2) icon-size))
(def scroll-x (reagent/atom 0))

(defn button [show-stickers?]
(defn button [stickers-showing?]
[react/touchable-highlight
{:on-press (fn [_]
(re-frame/dispatch [:chat.ui/set-chat-ui-props {:show-stickers? (not show-stickers?)}])
(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-bottom-sheet (when-not stickers-showing? :stickers)}])
(when-not platform/desktop? (js/setTimeout #(react/dismiss-keyboard!) 100)))
:accessibility-label :show-stickers-icon}
[vector-icons/icon :main-icons/stickers {:container-style {:margin 14 :margin-right 6}
:color (if show-stickers? colors/blue colors/gray)}]])
:color (if stickers-showing? colors/blue colors/gray)}]])

(defn- no-stickers-yet-panel []
[react/view {:style {:flex 1 :align-items :center :justify-content :center}}
Expand Down
15 changes: 10 additions & 5 deletions src/status_im/ui/screens/chat/views.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@
[status-im.ui.screens.profile.tribute-to-talk.views
:as
tribute-to-talk.views]
[status-im.utils.platform :as platform])
[status-im.utils.platform :as platform]
[status-im.ui.screens.chat.extensions.views :as extensions])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))

(defn add-contact-bar
Expand Down Expand Up @@ -288,7 +289,7 @@
:on-press (fn [_]
(re-frame/dispatch
[:chat.ui/set-chat-ui-props {:messages-focused? true
:show-stickers? false}])
:input-bottom-sheet nil}])
(react/dismiss-keyboard!))}
[react/view (style/intro-header-container height intro-status no-messages)
;; Icon section
Expand Down Expand Up @@ -397,7 +398,7 @@
(letsubs [{:keys [public? chat-id chat-name show-input? group-chat contact] :as current-chat}
[:chats/current-chat]
current-chat-id [:chats/current-chat-id]
show-stickers? [:chats/current-chat-ui-prop :show-stickers?]
input-bottom-sheet [:chats/current-chat-ui-prop :input-bottom-sheet]
two-pane-ui-enabled? [:two-pane-ui-enabled?]
anim-translate-y (animation/create-value
(if two-pane-ui-enabled? 0 connectivity/neg-connectivity-bar-height))]
Expand Down Expand Up @@ -435,8 +436,12 @@
[messages-view current-chat modal?])]]
(when show-input?
[input/container])
(when show-stickers?
[stickers/stickers-view])]))
(case input-bottom-sheet
:stickers
[stickers/stickers-view]
:extensions
[extensions/extensions-view]
nil)]))

(defview chat []
[chat-root false])
Expand Down
1 change: 1 addition & 0 deletions src/status_im/ui/screens/views.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@
;; see https://reactnavigation.org/docs/en/state-persistence.html#development-mode
:persistNavigationState (when js/goog.DEBUG persist-state)
:loadNavigationState (when js/goog.DEBUG load-state)}]
[wallet/send-transaction]
[signing/signing]
[bottom-sheet]
[popover/popover]]))})))

0 comments on commit 8f62a60

Please sign in to comment.