diff --git a/src/status_im2/common/bottom_sheet/style.cljs b/src/status_im2/common/bottom_sheet/style.cljs index 1ddac1f8bc..b7509b4437 100644 --- a/src/status_im2/common/bottom_sheet/style.cljs +++ b/src/status_im2/common/bottom_sheet/style.cljs @@ -25,7 +25,7 @@ :border-top-right-radius 20 :overflow (when-not selected-item :hidden) :flex 1 - :padding-bottom (or padding-bottom-override (+ bottom 8)) + :padding-bottom (or padding-bottom-override (+ bottom)) :background-color (if shell? :transparent (colors/theme-colors colors/white colors/neutral-95 theme))}) @@ -44,14 +44,21 @@ :top 0 :bottom 0}) +(defn sheet-content + [theme padding-bottom-override insets bottom-margin] + {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) + :border-top-left-radius 20 + :border-top-right-radius 20 + :padding-bottom (or padding-bottom-override (+ (:bottom insets) bottom-margin))}) + (defn selected-item - [theme window-height sheet-height {:keys [top]}] + [theme top bottom sheet-bottom-margin border-radius] {:position :absolute - :bottom 10 - :max-height (- window-height sheet-height top) + :top (when-not sheet-bottom-margin (- 0 top)) + :bottom bottom :overflow :hidden :left 0 :right 0 - :border-radius 12 + :border-radius border-radius :margin-horizontal 8 - :background-color (colors/theme-colors colors/white colors/neutral-95 theme)}) + :background-color (colors/theme-colors colors/white colors/neutral-90 theme)}) diff --git a/src/status_im2/common/bottom_sheet/view.cljs b/src/status_im2/common/bottom_sheet/view.cljs index 2bec83c241..d60bc3d608 100644 --- a/src/status_im2/common/bottom_sheet/view.cljs +++ b/src/status_im2/common/bottom_sheet/view.cljs @@ -14,6 +14,7 @@ (def duration 450) (def timing-options #js {:duration duration}) +(def bottom-margin 8) (defn hide [translate-y bg-opacity window-height on-close] @@ -57,14 +58,25 @@ (defn- f-view [_ _] - (let [sheet-height (reagent/atom 0)] + (let [sheet-height (reagent/atom 0) + item-height (reagent/atom 0)] (fn [{:keys [hide? insets theme]} - {:keys [content selected-item padding-bottom-override on-close shell? - gradient-cover? customization-color]}] + {:keys [content selected-item padding-bottom-override border-radius on-close shell? + gradient-cover? customization-color] + :or {border-radius 12}}] (let [{window-height :height} (rn/get-window) bg-opacity (reanimated/use-shared-value 0) translate-y (reanimated/use-shared-value window-height) - sheet-gesture (get-sheet-gesture translate-y bg-opacity window-height on-close)] + sheet-gesture (get-sheet-gesture translate-y bg-opacity window-height on-close) + sheet-bottom-margin (< @item-height + (- window-height @sheet-height (:top insets) bottom-margin)) + top (- window-height (:top insets) (:bottom insets) @sheet-height) + bottom (if sheet-bottom-margin + (+ @sheet-height bottom-margin (:bottom insets)) + (:bottom insets))] + (js/console.log (str "item height " @item-height)) + (js/console.log (str "sheet height " @sheet-height)) + (js/console.log (str "sheet-bottom-margin " bottom)) (rn/use-effect #(if hide? (hide translate-y bg-opacity window-height on-close) @@ -85,15 +97,14 @@ ;; sheet [gesture/gesture-detector {:gesture sheet-gesture} [reanimated/view - {:style (reanimated/apply-animations-to-style - {:transform [{:translateY translate-y}]} - (style/sheet insets - window-height - theme - padding-bottom-override - selected-item - shell?)) - :on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))} + {:style (reanimated/apply-animations-to-style + {:transform [{:translateY translate-y}]} + (style/sheet insets + window-height + theme + padding-bottom-override + selected-item + shell?))} (when gradient-cover? [rn/view {:style style/gradient-bg} [quo/gradient-cover {:customization-color customization-color}]]) @@ -101,13 +112,16 @@ [blur/ios-view {:style style/shell-bg}]) (when selected-item [rn/view - [rn/view {:style (style/selected-item theme window-height @sheet-height insets)} - [selected-item]]]) + {:on-layout #(reset! item-height (.-nativeEvent.layout.height ^js %)) + :style + (style/selected-item theme top bottom sheet-bottom-margin border-radius)} + [selected-item]]) - ;; handle - [rn/view {:style (style/handle theme)}] - ;; content - [content]]]])))) + [rn/view + {:style (style/sheet-content theme padding-bottom-override insets bottom-margin) + :on-layout #(reset! sheet-height (.-nativeEvent.layout.height ^js %))} + [rn/view {:style (style/handle theme)}] + [content]]]]])))) (defn- internal-view [args sheet] diff --git a/src/status_im2/contexts/chat/messages/content/album/view.cljs b/src/status_im2/contexts/chat/messages/content/album/view.cljs index 673c3ca176..f6c7da84e0 100644 --- a/src/status_im2/contexts/chat/messages/content/album/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/album/view.cljs @@ -19,7 +19,7 @@ {:width (second size-arr) :height (first size-arr) :album-style album-style})) (defn album-message - [{:keys [albumize?] :as message} context on-long-press] + [{:keys [albumize?] :as message} context on-long-press message-container-data] (let [shared-element-id (rf/sub [:shared-element-id]) first-image (first (:album message)) album-style (if (> (:image-width first-image) (:image-height first-image)) @@ -74,5 +74,6 @@ (map-indexed (fn [index item] [:<> {:key (:message-id item)} - [image/image-message index item {:on-long-press #(on-long-press message context)}]]) + [image/image-message index item {:on-long-press #(on-long-press message context)} + message-container-data]]) (:album message))]))) diff --git a/src/status_im2/contexts/chat/messages/content/image/view.cljs b/src/status_im2/contexts/chat/messages/content/image/view.cljs index 7a2580754a..c0bd1e27e7 100644 --- a/src/status_im2/contexts/chat/messages/content/image/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/image/view.cljs @@ -9,17 +9,29 @@ [utils.url :as url])) (defn calculate-dimensions - [width height] - (let [max-width (if (> width height) (* 2 constants/image-size) (* 1.5 constants/image-size)) - max-height (if (> width height) (* 1.5 constants/image-size) (* 2 constants/image-size))] + [width height max-container-width max-container-height] + (let [max-width (if (> width height) max-container-width (* 1.5 constants/image-size)) + max-height (if (> width height) max-container-height (* 2 constants/image-size))] {:width (min width max-width) :height (min height max-height)})) (defn image-message - [index {:keys [content image-width image-height message-id] :as message} {:keys [on-long-press]}] - (let [insets (safe-area/get-insets) - dimensions (calculate-dimensions (or image-width 1000) (or image-height 1000)) - shared-element-id (rf/sub [:shared-element-id]) - image-local-url (url/replace-port (:image content) (rf/sub [:mediaserver/port]))] + [index {:keys [content image-width image-height message-id] :as message} {:keys [on-long-press]} + message-container-data] + (let [insets (safe-area/get-insets) + {:keys [window-width padding-left padding-right avatar-container-width + message-margin-left]} message-container-data + max-container-width (- window-width + padding-left + padding-right + avatar-container-width + message-margin-left) + max-container-height (* (/ image-height image-width) max-container-width) + dimensions (calculate-dimensions image-width + image-height + max-container-width + max-container-height) + shared-element-id (rf/sub [:shared-element-id]) + image-local-url (url/replace-port (:image content) (rf/sub [:mediaserver/port]))] [:<> (when (= index 0) [text/text-content message]) diff --git a/src/status_im2/contexts/chat/messages/content/text/view.cljs b/src/status_im2/contexts/chat/messages/content/text/view.cljs index cdc3402c64..6f606e6a2e 100644 --- a/src/status_im2/contexts/chat/messages/content/text/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/text/view.cljs @@ -104,8 +104,8 @@ (fn [acc e] (render-inline acc e chat-id style-override mention-first)) [quo/text - {:style {:size :paragraph-1 - :margin-bottom (if mention-first (if platform/ios? 4 0) 2) + {:size :paragraph-1 + :style {:margin-bottom (if mention-first (if platform/ios? 4 0) 2) :margin-top (if mention-first (if platform/ios? -4 0) 2) :color (when (seq style-override) colors/white)}}] children)]) diff --git a/src/status_im2/contexts/chat/messages/content/view.cljs b/src/status_im2/contexts/chat/messages/content/view.cljs index 44402235cf..010dcfa35e 100644 --- a/src/status_im2/contexts/chat/messages/content/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/view.cljs @@ -129,7 +129,13 @@ context keyboard-shown?)) response-to (:response-to content) - height (rf/sub [:dimensions/window-height])] + height (rf/sub [:dimensions/window-height]) + {window-width :width} (rn/get-window) + message-container-data {:window-width window-width + :padding-right 20 + :padding-left 20 + :avatar-container-width 32 + :message-margin-left 8}] [rn/touchable-highlight {:accessibility-label (if (and outgoing (= outgoing-status :sending)) :message-sending @@ -182,10 +188,10 @@ [audio/audio-message message-data context] constants/content-type-image - [image/image-message 0 message-data context] + [image/image-message 0 message-data context 0 message-container-data] constants/content-type-album - [album/album-message message-data context on-long-press] + [album/album-message message-data context on-long-press message-container-data] [not-implemented/not-implemented [content.unknown/unknown-content message-data]]) @@ -209,6 +215,7 @@ (rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:show-bottom-sheet {:content (drawers/reactions-and-actions message-data context) + :border-radius 16 :selected-item (fn [] [rn/view {:pointer-events :none} [user-message-content