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

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
This commit is contained in:
John Ngei 2023-10-05 01:42:53 +03:00 committed by GitHub
parent aa2345d35c
commit d5a71e2ce0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 81 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/status_im2/common/bottom_sheet/style.cljs
View File

@ -25,7 +25,7 @@
:border-top-right-radius 20 :border-top-right-radius 20
:overflow (when-not selected-item :hidden) :overflow (when-not selected-item :hidden)
:flex 1 :flex 1
:padding-bottom (or padding-bottom-override (+ bottom 8)) :padding-bottom (or padding-bottom-override (+ bottom))
:background-color (if shell? :background-color (if shell?
:transparent :transparent
(colors/theme-colors colors/white colors/neutral-95 theme))}) (colors/theme-colors colors/white colors/neutral-95 theme))})
@ -44,14 +44,21 @@
:top 0 :top 0
:bottom 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 (defn selected-item
[theme window-height sheet-height {:keys [top]}] [theme top bottom sheet-bottom-margin border-radius]
{:position :absolute {:position :absolute
:bottom 10 :top (when-not sheet-bottom-margin (- 0 top))
:max-height (- window-height sheet-height top) :bottom bottom
:overflow :hidden :overflow :hidden
:left 0 :left 0
:right 0 :right 0
:border-radius 12 :border-radius border-radius
:margin-horizontal 8 :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)})

52
src/status_im2/common/bottom_sheet/view.cljs
View File

@ -14,6 +14,7 @@
(def duration 450) (def duration 450)
(def timing-options #js {:duration duration}) (def timing-options #js {:duration duration})
(def bottom-margin 8)
(defn hide (defn hide
[translate-y bg-opacity window-height on-close] [translate-y bg-opacity window-height on-close]
@ -57,14 +58,25 @@
(defn- f-view (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]} (fn [{:keys [hide? insets theme]}
{:keys [content selected-item padding-bottom-override on-close shell? {:keys [content selected-item padding-bottom-override border-radius on-close shell?
gradient-cover? customization-color]}] gradient-cover? customization-color]
:or {border-radius 12}}]
(let [{window-height :height} (rn/get-window) (let [{window-height :height} (rn/get-window)
bg-opacity (reanimated/use-shared-value 0) bg-opacity (reanimated/use-shared-value 0)
translate-y (reanimated/use-shared-value window-height) 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 (rn/use-effect
#(if hide? #(if hide?
(hide translate-y bg-opacity window-height on-close) (hide translate-y bg-opacity window-height on-close)
@ -85,15 +97,14 @@
;; sheet ;; sheet
[gesture/gesture-detector {:gesture sheet-gesture} [gesture/gesture-detector {:gesture sheet-gesture}
[reanimated/view [reanimated/view
{:style (reanimated/apply-animations-to-style {:style (reanimated/apply-animations-to-style
{:transform [{:translateY translate-y}]} {:transform [{:translateY translate-y}]}
(style/sheet insets (style/sheet insets
window-height window-height
theme theme
padding-bottom-override padding-bottom-override
selected-item selected-item
shell?)) shell?))}
:on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))}
(when gradient-cover? (when gradient-cover?
[rn/view {:style style/gradient-bg} [rn/view {:style style/gradient-bg}
[quo/gradient-cover {:customization-color customization-color}]]) [quo/gradient-cover {:customization-color customization-color}]])
@ -101,13 +112,16 @@
[blur/ios-view {:style style/shell-bg}]) [blur/ios-view {:style style/shell-bg}])
(when selected-item (when selected-item
[rn/view [rn/view
[rn/view {:style (style/selected-item theme window-height @sheet-height insets)} {:on-layout #(reset! item-height (.-nativeEvent.layout.height ^js %))
[selected-item]]]) :style
(style/selected-item theme top bottom sheet-bottom-margin border-radius)}
[selected-item]])
;; handle [rn/view
[rn/view {:style (style/handle theme)}] {:style (style/sheet-content theme padding-bottom-override insets bottom-margin)
;; content :on-layout #(reset! sheet-height (.-nativeEvent.layout.height ^js %))}
[content]]]])))) [rn/view {:style (style/handle theme)}]
[content]]]]]))))
(defn- internal-view (defn- internal-view
[args sheet] [args sheet]

5
src/status_im2/contexts/chat/messages/content/album/view.cljs
View File

@ -19,7 +19,7 @@
{:width (second size-arr) :height (first size-arr) :album-style album-style})) {:width (second size-arr) :height (first size-arr) :album-style album-style}))
(defn album-message (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]) (let [shared-element-id (rf/sub [:shared-element-id])
first-image (first (:album message)) first-image (first (:album message))
album-style (if (> (:image-width first-image) (:image-height first-image)) album-style (if (> (:image-width first-image) (:image-height first-image))
@ -74,5 +74,6 @@
(map-indexed (map-indexed
(fn [index item] (fn [index item]
[:<> {:key (:message-id 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))]))) (:album message))])))

28
src/status_im2/contexts/chat/messages/content/image/view.cljs
View File

@ -9,17 +9,29 @@
[utils.url :as url])) [utils.url :as url]))
(defn calculate-dimensions (defn calculate-dimensions
[width height] [width height max-container-width max-container-height]
(let [max-width (if (> width height) (* 2 constants/image-size) (* 1.5 constants/image-size)) (let [max-width (if (> width height) max-container-width (* 1.5 constants/image-size))
max-height (if (> width height) (* 1.5 constants/image-size) (* 2 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)})) {:width (min width max-width) :height (min height max-height)}))
(defn image-message (defn image-message
[index {:keys [content image-width image-height message-id] :as message} {:keys [on-long-press]}] [index {:keys [content image-width image-height message-id] :as message} {:keys [on-long-press]}
(let [insets (safe-area/get-insets) message-container-data]
dimensions (calculate-dimensions (or image-width 1000) (or image-height 1000)) (let [insets (safe-area/get-insets)
shared-element-id (rf/sub [:shared-element-id]) {:keys [window-width padding-left padding-right avatar-container-width
image-local-url (url/replace-port (:image content) (rf/sub [:mediaserver/port]))] 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) (when (= index 0)
[text/text-content message]) [text/text-content message])

4
src/status_im2/contexts/chat/messages/content/text/view.cljs
View File

@ -104,8 +104,8 @@
(fn [acc e] (fn [acc e]
(render-inline acc e chat-id style-override mention-first)) (render-inline acc e chat-id style-override mention-first))
[quo/text [quo/text
{:style {:size :paragraph-1 {:size :paragraph-1
:margin-bottom (if mention-first (if platform/ios? 4 0) 2) :style {:margin-bottom (if mention-first (if platform/ios? 4 0) 2)
:margin-top (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)}}] :color (when (seq style-override) colors/white)}}]
children)]) children)])

13
src/status_im2/contexts/chat/messages/content/view.cljs
View File

@ -129,7 +129,13 @@
context context
keyboard-shown?)) keyboard-shown?))
response-to (:response-to content) 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 [rn/touchable-highlight
{:accessibility-label (if (and outgoing (= outgoing-status :sending)) {:accessibility-label (if (and outgoing (= outgoing-status :sending))
:message-sending :message-sending
@ -182,10 +188,10 @@
[audio/audio-message message-data context] [audio/audio-message message-data context]
constants/content-type-image 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 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 [not-implemented/not-implemented
[content.unknown/unknown-content message-data]]) [content.unknown/unknown-content message-data]])
@ -209,6 +215,7 @@
(rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:show-bottom-sheet (rf/dispatch [:show-bottom-sheet
{:content (drawers/reactions-and-actions message-data context) {:content (drawers/reactions-and-actions message-data context)
:border-radius 16
:selected-item (fn [] :selected-item (fn []
[rn/view {:pointer-events :none} [rn/view {:pointer-events :none}
[user-message-content [user-message-content