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

[#7374] stickers polishing 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2019-02-06 13:04:39 +01:00
parent 20550d022f
commit cf8527d147
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
7 changed files with 68 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/events.cljs
View File

@ -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

2
src/status_im/ui/screens/chat/input/input.cljs
View File

@ -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]

9
src/status_im/ui/screens/chat/stickers/styles.cljs
View File

@ -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})
@ -11,3 +12,9 @@
:border-radius (/ icon-size 2)
:align-items :center
:justify-content :center})
(defn stickers-panel-height []
(cond
platform/iphone-x? 299
platform/ios? 258
:else 272))

31
src/status_im/ui/screens/chat/stickers/views.cljs
View File

@ -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
[react/touchable-opacity {: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/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
[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}}]])]]))
:source {:uri thumbnail}}]])]]]))

7
src/status_im/ui/screens/stickers/subs.cljs
View File

@ -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]

20
src/status_im/ui/screens/stickers/views.cljs
View File

@ -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 {: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]
[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])]])
[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]]

11
src/status_im/utils/navigation.cljs
View File

@ -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?)