diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index 5575ab0495..ae354b4c09 100644 --- a/src/status_im/events.cljs +++ b/src/status_im/events.cljs @@ -1652,7 +1652,7 @@ [:stickers/load-sticker-pack-success o]) :failure-event-creator (fn [o] nil)}) ;;TODO for testing ONLY - ["https://ipfs.infura.io/ipfs/QmbgsCFEz4ubLFzF3SFfCxDEeXeMxe4yypxC3W1Ro9rLXS/"])})) + ["https://ipfs.infura.io/ipfs/QmRKmQjXyqpfznQ9Y9dTnKePJnQxoJATivPbGcCAKRsZJq/"])})) (handlers/register-handler-fx :stickers/select-pack diff --git a/src/status_im/ui/screens/chat/input/input.cljs b/src/status_im/ui/screens/chat/input/input.cljs index ff40cc8092..74bfb925f2 100644 --- a/src/status_im/ui/screens/chat/input/input.cljs +++ b/src/status_im/ui/screens/chat/input/input.cljs @@ -106,7 +106,7 @@ :accessibility-label :chat-commands-button} [react/view [vector-icons/icon :main-icons/commands {:container-style style/input-commands-icon - :color :dark}]]]))) + :color colors/gray}]]]))) (defview reply-message [from message-text] (letsubs [username [:contacts/contact-name-by-identity from] diff --git a/src/status_im/ui/screens/chat/stickers/styles.cljs b/src/status_im/ui/screens/chat/stickers/styles.cljs index cbfefa79ee..08aea383cb 100644 --- a/src/status_im/ui/screens/chat/stickers/styles.cljs +++ b/src/status_im/ui/screens/chat/stickers/styles.cljs @@ -1,4 +1,5 @@ -(ns status-im.ui.screens.chat.stickers.styles) +(ns status-im.ui.screens.chat.stickers.styles + (:require [status-im.utils.platform :as platform])) (def stickers-panel {:flex 1 :margin 5 :flex-direction :row :justify-content :flex-start :flex-wrap :wrap}) @@ -10,4 +11,10 @@ :width icon-size :border-radius (/ icon-size 2) :align-items :center - :justify-content :center}) \ No newline at end of file + :justify-content :center}) + +(defn stickers-panel-height [] + (cond + platform/iphone-x? 299 + platform/ios? 258 + :else 272)) \ No newline at end of file diff --git a/src/status_im/ui/screens/chat/stickers/views.cljs b/src/status_im/ui/screens/chat/stickers/views.cljs index 2d8f7d225c..c3342b23d6 100644 --- a/src/status_im/ui/screens/chat/stickers/views.cljs +++ b/src/status_im/ui/screens/chat/stickers/views.cljs @@ -5,7 +5,8 @@ [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.colors :as colors] [status-im.i18n :as i18n] - [status-im.ui.screens.chat.stickers.styles :as styles])) + [status-im.ui.screens.chat.stickers.styles :as styles] + [status-im.ui.components.animation :as anim])) (defn button [show-stickers?] [react/touchable-highlight @@ -19,11 +20,12 @@ [react/view {:style {:flex 1 :align-items :center :justify-content :center}} [vector-icons/icon :stickers-icons/stickers-big {:color colors/gray}] [react/text {:style {:margin-top 8 :font-size 17}} (i18n/label :t/you-dont-have-stickers)] - [react/touchable-highlight {:on-press #(do - (re-frame/dispatch [:stickers/load-packs]) - (re-frame/dispatch [:navigate-to :stickers]))} - [react/text {:style {:margin-top 17 :font-size 15 :color colors/blue}} - (i18n/label :t/get-stickers)]]]) + [react/touchable-opacity {:on-press #(do + (re-frame/dispatch [:stickers/load-packs]) + (re-frame/dispatch [:navigate-to :stickers]))} + [react/view {:margin-top 6 :height 44 :justify-content :center} + [react/text {:style {:font-size 15 :color colors/blue}} + (i18n/label :t/get-stickers)]]]]) (defn- on-sticker-click [sticker] (re-frame/dispatch [:chat.ui/set-chat-ui-props {:show-stickers? false}]) @@ -56,16 +58,27 @@ [react/view {:style {:align-items :center}} [react/view {:style (styles/pack-icon background-color icon-size)} icon] - [react/view {:style {:margin-bottom 5 :height 2 :width 16 + [react/view {:style {:margin-bottom 5 :height 2 :width 16 :border-radius 1 :background-color (if selected? colors/blue colors/white)}}]]]) (defn pack-for [packs id] (some #(when (= id (:id %)) %) packs)) +(defn show-panel-anim + [bottom-anim-value alpha-value] + (anim/start + (anim/parallel + [(anim/spring bottom-anim-value {:toValue (styles/stickers-panel-height)}) + (anim/timing alpha-value {:toValue 1 + :duration 500})]))) + (defview stickers-view [] (letsubs [selected-pack [:stickers/selected-pack] - installed-packs [:stickers/installed-packs-vals]] - [react/view {:style {:background-color :white :height "40%"}} + installed-packs [:stickers/installed-packs-vals] + bottom-anim-value (anim/create-value 0) + alpha-value (anim/create-value 0)] + {:component-will-mount #(show-panel-anim bottom-anim-value alpha-value)} + [react/animated-view {:style {:background-color :white :height bottom-anim-value :opacity alpha-value}} (cond (= selected-pack :recent) [recent-stickers-panel] (not (seq installed-packs)) [no-stickers-yet-panel] @@ -80,9 +93,9 @@ [react/view {:width 4}] [pack-icon {:id :recent :selected? (or (= :recent selected-pack) (and (nil? selected-pack) (seq installed-packs)))} [vector-icons/icon :stickers-icons/recent]] - ;; TODO make scrollable - (for [{:keys [id thumbnail]} installed-packs] - ^{:key id} - [pack-icon {:id id :selected? (= id selected-pack)} - [react/image {:style {:width icon-size :height icon-size :border-radius (/ icon-size 2)} - :source {:uri thumbnail}}]])]])) + [react/scroll-view {:horizontal true} + (for [{:keys [id thumbnail]} installed-packs] + ^{:key id} + [pack-icon {:id id :selected? (= id selected-pack)} + [react/image {:style {:width icon-size :height icon-size :border-radius (/ icon-size 2)} + :source {:uri thumbnail}}]])]]])) diff --git a/src/status_im/ui/screens/stickers/subs.cljs b/src/status_im/ui/screens/stickers/subs.cljs index 66a2f81b45..74ef4a26f5 100644 --- a/src/status_im/ui/screens/stickers/subs.cljs +++ b/src/status_im/ui/screens/stickers/subs.cljs @@ -24,6 +24,13 @@ (fn [[packs installed]] (map #(if (get installed (:id %)) (assoc % :installed true) %) (vals packs)))) +(re-frame/reg-sub + :stickers/get-current-pack + :<- [:get-screen-params] + :<- [:stickers/all-packs] + (fn [[{:keys [id]} packs]] + (first (filter #(= (:id %) id) packs)))) + (re-frame/reg-sub :stickers/recent :<- [:account/account] diff --git a/src/status_im/ui/screens/stickers/views.cljs b/src/status_im/ui/screens/stickers/views.cljs index 00b509b6b0..3175f1a1e0 100644 --- a/src/status_im/ui/screens/stickers/views.cljs +++ b/src/status_im/ui/screens/stickers/views.cljs @@ -11,10 +11,8 @@ [status-im.ui.components.icons.vector-icons :as icons] [status-im.utils.money :as money])) -(def thumbnail-icon-size 40) - -(defn- thumbnail-icon [uri] - [react/image {:style {:width thumbnail-icon-size :height thumbnail-icon-size :border-radius (/ thumbnail-icon-size 2)} +(defn- thumbnail-icon [uri size] + [react/image {:style {:width size :height size :border-radius (/ size 2)} :source {:uri uri}}]) (defn- installed-icon [] @@ -39,17 +37,17 @@ (str price))]]]))) (defn pack-badge [{:keys [name author price thumbnail preview id installed] :as pack}] - [react/view {:margin-bottom 27} - [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :stickers-pack pack])} - [react/image {:style {:height 200 :border-radius 20} :source {:uri preview}}]] - [react/view {:height 64 :align-items :center :flex-direction :row} - [thumbnail-icon thumbnail] - [react/view {:padding-horizontal 16 :flex 1} - [react/text {:style {:font-size 15}} name] - [react/text {:style {:font-size 15 :color colors/gray :margin-top 6}} author]] - (if installed - [installed-icon] - [price-badge price id])]]) + [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :stickers-pack pack])} + [react/view {:margin-bottom 27} + [react/image {:style {:height 200 :border-radius 20} :source {:uri preview}}] + [react/view {:height 64 :align-items :center :flex-direction :row} + [thumbnail-icon thumbnail 40] + [react/view {:padding-horizontal 16 :flex 1} + [react/text {:style {:font-size 15}} name] + [react/text {:style {:font-size 15 :color colors/gray :margin-top 6}} author]] + (if installed + [installed-icon] + [price-badge price id])]]]) (defview packs [] (letsubs [packs [:stickers/all-packs]] @@ -67,13 +65,13 @@ (def sticker-icon-size 60) (defview pack [] - (letsubs [{:keys [id name author price thumbnail stickers installed]} [:get-screen-params]] + (letsubs [{:keys [id name author price thumbnail stickers installed]} [:stickers/get-current-pack]] [react/view styles/screen [status-bar/status-bar] [react/keyboard-avoiding-view components.styles/flex [toolbar/simple-toolbar] - [react/view {:height 94 :align-items :center :flex-direction :row :padding-horizontal 16} - [thumbnail-icon thumbnail] + [react/view {:height 74 :align-items :center :flex-direction :row :padding-horizontal 16} + [thumbnail-icon thumbnail 64] [react/view {:padding-horizontal 16 :flex 1} [react/text {:style {:font-size 22 :font-weight :bold}} name] [react/text {:style {:font-size 15 :color colors/gray :margin-top 6}} author]] diff --git a/src/status_im/utils/navigation.cljs b/src/status_im/utils/navigation.cljs index 13134589cf..cee5830b75 100644 --- a/src/status_im/utils/navigation.cljs +++ b/src/status_im/utils/navigation.cljs @@ -1,16 +1,17 @@ (ns status-im.utils.navigation - (:require [status-im.react-native.js-dependencies :as js-dependencies])) + (:require [status-im.react-native.js-dependencies :as js-dependencies] + [status-im.utils.platform :as platform])) (def navigation-actions - (when (not status-im.utils.platform/desktop?) + (when (not platform/desktop?) (.-NavigationActions js-dependencies/react-navigation))) (def navigation-events - (when (not status-im.utils.platform/desktop?) + (when (not platform/desktop?) (.-NavigationEvents js-dependencies/react-navigation))) (def stack-actions - (when (not status-im.utils.platform/desktop?) + (when (not platform/desktop?) (.-StackActions js-dependencies/react-navigation))) (def navigator-ref (atom nil)) @@ -20,7 +21,7 @@ (defn can-be-called? [] (and @navigator-ref - (not status-im.utils.platform/desktop?))) + (not platform/desktop?))) (defn navigate-to [route] (when (can-be-called?)