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

UI corrections is stickers panel 

This adds a feel that it is opened already on the desired index

Add input margin only when there's no bottom shet

Use the right height for sticker panel

Use the stickers panel height in extensions panel

Fix indentation on stickers view

Remove extra margin on stickers indicator

Use custom panel height on android

Rename chat panel height subscription

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-01-08 15:25:39 +03:00
parent 93f8866f8d
commit fb9ea6529f
No known key found for this signature in database
GPG Key ID: C9A094959935A952
3 changed files with 51 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/status_im/subs.cljs
View File

@ -84,6 +84,7 @@
(reg-root-key-sub :ui/search :ui/search)
(reg-root-key-sub :web3-node-version :web3-node-version)
(reg-root-key-sub :keyboard-height :keyboard-height)
(reg-root-key-sub :keyboard-max-height :keyboard-max-height)
(reg-root-key-sub :sync-data :sync-data)
(reg-root-key-sub :layout-height :layout-height)
(reg-root-key-sub :mobile-network/remember-choice? :mobile-network/remember-choice?)
@ -580,13 +581,37 @@
(fn [ui-props [_ prop]]
(get ui-props prop)))
;; NOTE: The whole logic of stickers panel and input should be revised
(re-frame/reg-sub
:chats/chat-panel-height
:<- [:keyboard-max-height]
(fn [kb-height]
(cond
(and platform/iphone-x? (pos? kb-height))
(- kb-height tabs.styles/minimized-tabs-height 34)
(pos? kb-height)
(- kb-height tabs.styles/minimized-tabs-height)
platform/iphone-x? 299
platform/ios? 258
:else 272)))
(re-frame/reg-sub
:chats/input-margin
:<- [:keyboard-height]
(fn [kb-height]
:<- [:chats/current-chat-ui-prop :input-bottom-sheet]
(fn [[kb-height input-bottom-sheet]]
(cond
;; During the transition of bottom sheet and close of keyboard happens
;; The heights are summed up and input grows too much
(not (nil? input-bottom-sheet))
0
(and platform/iphone-x? (> kb-height 0))
(- kb-height (* 2 tabs.styles/minimized-tabs-height))
(- kb-height tabs.styles/minimized-tabs-height 34)
platform/ios?
(+ kb-height (- (if (> kb-height 0)

6
src/status_im/ui/screens/chat/extensions/views.cljs
View File

@ -8,8 +8,6 @@
[status-im.ui.components.animation :as anim]
[status-im.i18n :as i18n]))
(def panel-height 264)
(defn button [showing?]
[react/touchable-highlight
{:on-press (fn [_]
@ -30,7 +28,9 @@
:useNativeDriver true})])))
(views/defview extensions-view []
(views/letsubs [bottom-anim-value (anim/create-value panel-height)
(views/letsubs [panel-height [:chats/chat-panel-height]
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

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

@ -68,7 +68,7 @@
:font-size 17}}
(i18n/label :t/recently-used-stickers)]])))
(defn update-scroll-position [ref installed-packs selected-pack window-width]
(defn update-scroll-position [ref installed-packs selected-pack window-width animated?]
(when ref
;; bug on Android https://github.com/facebook/react-native/issues/24531
(js/setTimeout
@ -78,8 +78,8 @@
(* (inc (some #(when (= selected-pack (:id (second %))) (first %))
(map-indexed vector installed-packs)))
window-width))]
(.scrollTo ref #js {:x x :animated true})))
200)))
(.scrollTo ref #js {:x x :animated animated?})))
1)))
(defn on-scroll [e installed-packs window-width]
(let [num (/ (.-nativeEvent.contentOffset.x e) window-width)
@ -93,8 +93,8 @@
(letsubs [ref (atom nil)
width [:dimensions/window-width]]
{:component-will-update (fn [_ [_ installed-packs selected-pack]]
(update-scroll-position @ref installed-packs selected-pack width))
:component-did-mount #(update-scroll-position @ref installed-packs selected-pack width)}
(update-scroll-position @ref installed-packs selected-pack width true))
:component-did-mount #(update-scroll-position @ref installed-packs selected-pack width false)}
[react/scroll-view {:style {:flex 1}
:horizontal true
:paging-enabled true
@ -130,28 +130,32 @@
(defview scroll-indicator []
(letsubs [window-width [:dimensions/window-width]]
[react/view {:style {:margin-bottom 5 :height 2 :width indicator-width :border-radius 1
[react/view {:style {:height 2
:width indicator-width
:border-radius 1
:margin-left (+ dx (* icon-container (/ @scroll-x window-width)))
:background-color colors/blue}}]))
(defview stickers-view []
(letsubs [selected-pack [:stickers/selected-pack]
installed-packs [:stickers/installed-packs-vals]
bottom-anim-value (anim/create-value (styles/stickers-panel-height))
panel-height [:chats/chat-panel-height]
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 (styles/stickers-panel-height)
:height panel-height
:transform [{:translateY bottom-anim-value}]
:opacity alpha-value}}
(cond
(= selected-pack :recent) [stickers-paging-panel installed-packs selected-pack]
(= selected-pack :recent) [stickers-paging-panel installed-packs selected-pack]
(not (seq installed-packs)) [no-stickers-yet-panel]
:else [stickers-paging-panel installed-packs selected-pack])
:else [stickers-paging-panel installed-packs selected-pack])
[react/view {:style {:flex-direction :row :padding-horizontal 4}}
[pack-icon {:on-press #(do
(re-frame/dispatch [:stickers/load-packs])
(re-frame/dispatch [:navigate-to :stickers]))
[pack-icon {:on-press #(do
(re-frame/dispatch [:stickers/load-packs])
(re-frame/dispatch [:navigate-to :stickers]))
:selected? false :background-color colors/blue}
[vector-icons/icon :main-icons/add {:width 20 :height 20 :color colors/white}]]
[react/view {:width 2}]
@ -159,13 +163,13 @@
[react/view
[react/view {:style {:flex-direction :row}}
[pack-icon {:id :recent :background-color colors/white}
[vector-icons/icon :stickers-icons/recent {:color colors/gray
:width 44
[vector-icons/icon :stickers-icons/recent {:color colors/gray
:width 44
:height 44}]]
(for [{:keys [id thumbnail]} installed-packs]
^{:key id}
[pack-icon {:id id
[pack-icon {:id id
:background-color colors/white}
[react/image {:style {:width icon-size :height icon-size :border-radius (/ icon-size 2)}
[react/image {:style {:width icon-size :height icon-size :border-radius (/ icon-size 2)}
:source {:uri (contenthash/url thumbnail)}}]])]
[scroll-indicator]]]]]))