From fb9ea6529f7157c85f1b8d1f2aed92843ba7665c Mon Sep 17 00:00:00 2001 From: Gheorghe Pinzaru Date: Wed, 8 Jan 2020 15:25:39 +0300 Subject: [PATCH] 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 --- src/status_im/subs.cljs | 29 +++++++++++++- .../ui/screens/chat/extensions/views.cljs | 6 +-- .../ui/screens/chat/stickers/views.cljs | 38 ++++++++++--------- 3 files changed, 51 insertions(+), 22 deletions(-) diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index 9965c8bd60..b1a10a0498 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -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) diff --git a/src/status_im/ui/screens/chat/extensions/views.cljs b/src/status_im/ui/screens/chat/extensions/views.cljs index b598101bad..f381b00c1f 100644 --- a/src/status_im/ui/screens/chat/extensions/views.cljs +++ b/src/status_im/ui/screens/chat/extensions/views.cljs @@ -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 diff --git a/src/status_im/ui/screens/chat/stickers/views.cljs b/src/status_im/ui/screens/chat/stickers/views.cljs index 4563feb2e5..0573cd5f0c 100644 --- a/src/status_im/ui/screens/chat/stickers/views.cljs +++ b/src/status_im/ui/screens/chat/stickers/views.cljs @@ -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]]]]]))