updated selected item view

* updated selected-item view to match design

* fix show bottom margin on selected item on bottom sheet

* fixed image message dimensions

* fix: selected item view issues

* fix: reviews

* fix: bottom sheet shaking when item is selected

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)})

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]

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))])))

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])

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)])

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