fix: shell button position in chat screen (#16190)
* fix: shell button position
This commit is contained in:
parent
2df1b46975
commit
83b35f0439
|
@ -109,3 +109,19 @@
|
||||||
:blur-radius (if platform/ios? 20 10)
|
:blur-radius (if platform/ios? 20 10)
|
||||||
:blur-type (colors/theme-colors :light :dark)
|
:blur-type (colors/theme-colors :light :dark)
|
||||||
:blur-amount 20})
|
:blur-amount 20})
|
||||||
|
|
||||||
|
(defn shell-container
|
||||||
|
[bottom translate-y]
|
||||||
|
(reanimated/apply-animations-to-style
|
||||||
|
{:bottom bottom ; we use height of the input directly as bottom position
|
||||||
|
:transform [{:translate-y translate-y}]}
|
||||||
|
{:position :absolute
|
||||||
|
:left 0
|
||||||
|
:right 0}))
|
||||||
|
|
||||||
|
(defn shell-button
|
||||||
|
[translate-y opacity]
|
||||||
|
(reanimated/apply-animations-to-style
|
||||||
|
{:transform [{:translate-y translate-y}]
|
||||||
|
:opacity opacity}
|
||||||
|
{}))
|
||||||
|
|
|
@ -26,34 +26,35 @@
|
||||||
[:f> f-blur-view layout-height focused?])
|
[:f> f-blur-view layout-height focused?])
|
||||||
|
|
||||||
(defn- f-shell-button
|
(defn- f-shell-button
|
||||||
[{:keys [maximized?]} {:keys [height]} {:keys [images link-previews? reply edit]}]
|
[{:keys [maximized? focused?]} {:keys [height]} {:keys [reply edit]}]
|
||||||
(let [insets (safe-area/get-insets)
|
(let [insets (safe-area/get-insets)
|
||||||
extra-height (utils/calc-top-content-height reply edit)
|
extra-height (utils/calc-top-content-height reply edit)
|
||||||
translate-y (reanimated/use-shared-value
|
neg-y (utils/calc-shell-neg-y insets maximized? extra-height)
|
||||||
(utils/calc-shell-neg-y insets maximized? extra-height))]
|
y-container (reanimated/use-shared-value neg-y)
|
||||||
|
hide-shell? (or @focused? @messages.list/show-floating-scroll-down-button)
|
||||||
|
y-shell (reanimated/use-shared-value (if hide-shell? 35 0))
|
||||||
|
opacity (reanimated/use-shared-value (if hide-shell? 0 1))]
|
||||||
(rn/use-effect
|
(rn/use-effect
|
||||||
(fn []
|
(fn []
|
||||||
(let [extra-height (utils/calc-top-content-height reply edit)]
|
(reanimated/animate opacity (if hide-shell? 0 1))
|
||||||
(reanimated/animate translate-y
|
(reanimated/animate y-shell (if hide-shell? 35 0)))
|
||||||
(utils/calc-shell-neg-y insets maximized? extra-height))))
|
[@focused? @messages.list/show-floating-scroll-down-button])
|
||||||
[@maximized? images link-previews? reply edit])
|
(rn/use-effect #(reanimated/animate y-container neg-y) [reply edit])
|
||||||
[reanimated/view
|
[reanimated/view
|
||||||
{:style (reanimated/apply-animations-to-style
|
{:style (style/shell-container height y-container)}
|
||||||
{:bottom height ; we use height of the input directly as bottom position
|
[reanimated/view
|
||||||
:transform [{:translate-y translate-y}]} ; translate down when maximized
|
{:style (style/shell-button y-shell opacity)}
|
||||||
{:position :absolute
|
|
||||||
:left 0
|
|
||||||
:right 0})}
|
|
||||||
[quo/floating-shell-button
|
[quo/floating-shell-button
|
||||||
(merge {:jump-to
|
{:jump-to
|
||||||
{:on-press (fn []
|
{:on-press (fn []
|
||||||
(rf/dispatch [:chat/close true])
|
(rf/dispatch [:chat/close true])
|
||||||
(rf/dispatch [:shell/navigate-to-jump-to]))
|
(rf/dispatch [:shell/navigate-to-jump-to]))
|
||||||
:label (i18n/label :t/jump-to)
|
:label (i18n/label :t/jump-to)
|
||||||
:style {:align-self :center}}}
|
:style {:align-self :center}}} {}]]
|
||||||
|
[quo/floating-shell-button
|
||||||
(when @messages.list/show-floating-scroll-down-button
|
(when @messages.list/show-floating-scroll-down-button
|
||||||
{:scroll-to-bottom {:on-press messages.list/scroll-to-bottom}}))
|
{:scroll-to-bottom {:on-press messages.list/scroll-to-bottom}})
|
||||||
{}]]))
|
{:bottom 24}]]))
|
||||||
|
|
||||||
(defn shell-button
|
(defn shell-button
|
||||||
[state animations subs]
|
[state animations subs]
|
||||||
|
|
Loading…
Reference in New Issue