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

stickers polishing 2 

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2019-02-07 11:55:48 +01:00 committed by Julien Eluard
parent 6988950ea8
commit 6ab6e3f041
No known key found for this signature in database
GPG Key ID: 6FD7DB5437FCBEF6
5 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/icons/stickers/recent.svg
View File

@ -1,3 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="black" fill-opacity="0" d="M11 5V11.1716C11 11.702 11.2107 12.2107 11.5858 12.5858L16 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M14 28C21.732 28 28 21.732 28 14C28 6.26801 21.732 0 14 0C6.26801 0 0 6.26801 0 14C0 21.732 6.26801 28 14 28ZM14 7C14 6.44772 13.5523 6 13 6C12.4477 6 12 6.44772 12 7V13.1716C12 13.9672 12.3161 14.7303 12.8787 15.2929L17.2929 19.7071C17.6834 20.0976 18.3166 20.0976 18.7071 19.7071C19.0976 19.3166 19.0976 18.6834 18.7071 18.2929L14.2929 13.8787C14.1054 13.6911 14 13.4368 14 13.1716V7Z" fill=""/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 278 B

After

Width:  |  Height:  |  Size: 555 B

3
src/status_im/ui/screens/chat/message/message.cljs
View File

@ -272,7 +272,8 @@
(defn chat-message [{:keys [message-id old-message-id outgoing group-chat modal? current-public-key content-type content] :as message}] (defn chat-message [{:keys [message-id old-message-id outgoing group-chat modal? current-public-key content-type content] :as message}]
[react/view [react/view
[react/touchable-highlight {:on-press (fn [_] [react/touchable-highlight {:on-press (fn [_]
(re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true}]) (re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true
:show-stickers? false}])
(react/dismiss-keyboard!)) (react/dismiss-keyboard!))
:on-long-press #(when (= content-type constants/content-type-text) :on-long-press #(when (= content-type constants/content-type-text)
(list-selection/chat-message message-id old-message-id (:text content) (i18n/label :t/message)))} (list-selection/chat-message message-id old-message-id (:text content) (i18n/label :t/message)))}

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

@ -12,7 +12,7 @@
[react/touchable-highlight [react/touchable-highlight
{:on-press (fn [_] {: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 {:show-stickers? (not show-stickers?)}])
(react/dismiss-keyboard!))} (js/setTimeout #(react/dismiss-keyboard!) 100))}
[vector-icons/icon :main-icons/stickers {:container-style {:margin 14 :margin-right 6} [vector-icons/icon :main-icons/stickers {:container-style {:margin 14 :margin-right 6}
:color (if show-stickers? colors/blue colors/gray)}]]) :color (if show-stickers? colors/blue colors/gray)}]])
@ -27,18 +27,13 @@
[react/text {:style {:font-size 15 :color colors/blue}} [react/text {:style {:font-size 15 :color colors/blue}}
(i18n/label :t/get-stickers)]]]]) (i18n/label :t/get-stickers)]]]])
(defn- on-sticker-click [sticker]
(re-frame/dispatch [:chat.ui/set-chat-ui-props {:show-stickers? false}])
(re-frame/dispatch [:chat/send-sticker sticker])
(react/dismiss-keyboard!))
(defn- stickers-panel [stickers] (defn- stickers-panel [stickers]
[react/scroll-view {:style {:flex 1} :condtent-container-style {:flex 1}} [react/scroll-view {:style {:flex 1} :condtent-container-style {:flex 1}}
[react/view {:style styles/stickers-panel} [react/view {:style styles/stickers-panel}
(for [{:keys [uri] :as sticker} stickers] (for [{:keys [uri] :as sticker} stickers]
^{:key uri} ^{:key uri}
[react/touchable-highlight {:style {:height 75 :width 75 :margin 5} [react/touchable-highlight {:style {:height 75 :width 75 :margin 5}
:on-press #(on-sticker-click sticker)} :on-press #(re-frame/dispatch [:chat/send-sticker sticker])}
[react/image {:style {:resize-mode :cover :width "100%" :height "100%"} :source {:uri uri}}]])]]) [react/image {:style {:resize-mode :cover :width "100%" :height "100%"} :source {:uri uri}}]])]])
(defview recent-stickers-panel [] (defview recent-stickers-panel []
@ -52,8 +47,7 @@
(def icon-size 28) (def icon-size 28)
(defn pack-icon [{:keys [id on-press selected? background-color] (defn pack-icon [{:keys [id on-press selected? background-color]
:or {background-color colors/gray :or {on-press #(re-frame/dispatch [:stickers/select-pack id])}} icon]
on-press #(re-frame/dispatch [:stickers/select-pack id])}} icon]
[react/touchable-highlight {:on-press on-press} [react/touchable-highlight {:on-press on-press}
[react/view {:style {:align-items :center}} [react/view {:style {:align-items :center}}
[react/view {:style (styles/pack-icon background-color icon-size)} [react/view {:style (styles/pack-icon background-color icon-size)}
@ -75,10 +69,16 @@
(defview stickers-view [] (defview stickers-view []
(letsubs [selected-pack [:stickers/selected-pack] (letsubs [selected-pack [:stickers/selected-pack]
installed-packs [:stickers/installed-packs-vals] installed-packs [:stickers/installed-packs-vals]
input-focused? [:chats/current-chat-ui-prop :input-focused?]
bottom-anim-value (anim/create-value 0) bottom-anim-value (anim/create-value 0)
alpha-value (anim/create-value 0)] alpha-value (anim/create-value 0)]
{:component-will-mount #(show-panel-anim bottom-anim-value alpha-value)} {:component-will-mount #(if (not input-focused?)
[react/animated-view {:style {:background-color :white :height bottom-anim-value :opacity alpha-value}} (show-panel-anim bottom-anim-value alpha-value)
(do
(anim/set-value bottom-anim-value (styles/stickers-panel-height))
(anim/set-value alpha-value 1)))}
[react/animated-view {:style {:background-color :white :height (if input-focused? 0 bottom-anim-value)
:opacity alpha-value}}
(cond (cond
(= selected-pack :recent) [recent-stickers-panel] (= selected-pack :recent) [recent-stickers-panel]
(not (seq installed-packs)) [no-stickers-yet-panel] (not (seq installed-packs)) [no-stickers-yet-panel]
@ -90,10 +90,11 @@
(re-frame/dispatch [:navigate-to :stickers])) (re-frame/dispatch [:navigate-to :stickers]))
:selected? false :background-color colors/blue} :selected? false :background-color colors/blue}
[vector-icons/icon :main-icons/add {:width 20 :height 20 :color colors/white}]] [vector-icons/icon :main-icons/add {:width 20 :height 20 :color colors/white}]]
[react/view {:width 4}] [react/view {:width 2}]
[pack-icon {:id :recent :selected? (or (= :recent selected-pack) (and (nil? selected-pack) (seq installed-packs)))} [react/scroll-view {:horizontal true :style {:padding-left 2}}
[vector-icons/icon :stickers-icons/recent]] [pack-icon {:id :recent :selected? (or (= :recent selected-pack) (and (nil? selected-pack) (seq installed-packs)))
[react/scroll-view {:horizontal true} :background-color colors/white}
[vector-icons/icon :stickers-icons/recent {:color colors/gray}]]
(for [{:keys [id thumbnail]} installed-packs] (for [{:keys [id thumbnail]} installed-packs]
^{:key id} ^{:key id}
[pack-icon {:id id :selected? (= id selected-pack)} [pack-icon {:id id :selected? (= id selected-pack)}

3
src/status_im/ui/screens/chat/views.cljs
View File

@ -102,7 +102,8 @@
:preview [react/view style/message-view-preview]} :preview [react/view style/message-view-preview]}
[react/touchable-without-feedback [react/touchable-without-feedback
{:on-press (fn [_] {:on-press (fn [_]
(re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true}]) (re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true
:show-stickers? false}])
(react/dismiss-keyboard!))} (react/dismiss-keyboard!))}
[react/animated-view {:style (style/message-view-animated opacity)} [react/animated-view {:style (style/message-view-animated opacity)}
message-view]]])) message-view]]]))

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

@ -55,12 +55,11 @@
[status-bar/status-bar] [status-bar/status-bar]
[react/keyboard-avoiding-view components.styles/flex [react/keyboard-avoiding-view components.styles/flex
[toolbar/simple-toolbar (i18n/label :t/sticker-market)] [toolbar/simple-toolbar (i18n/label :t/sticker-market)]
[react/view {:style {:padding-top 8 :flex 1}} [react/scroll-view {:keyboard-should-persist-taps :handled :style {:padding 16}}
[react/scroll-view {:keyboard-should-persist-taps :handled :style {:flex 1 :padding 16}}
[react/view [react/view
(for [pack packs] (for [pack packs]
^{:key pack} ^{:key pack}
[pack-badge pack])]]]]])) [pack-badge pack])]]]]))
(def sticker-icon-size 60) (def sticker-icon-size 60)