status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-02-28 16:20:43 +00:00
Code Issues Projects Releases Wiki Activity

fix: image preview padding (#17545)

Browse Source 
* fix: image preview padding

* fix: clear icon

* fix: revert clear icon color
This commit is contained in:
BalogunofAfrica 2023-10-12 17:13:04 +01:00 committed by GitHub
parent 1b348943be
commit 6f8a7bb151
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/status_im2/contexts/chat/composer/images/style.cljs
View File

@ -6,19 +6,29 @@
:padding-bottom 8 :padding-bottom 8
:padding-right 12}) :padding-right 12})
(def remove-photo-container (defn remove-photo-container
[theme]
{:width 16
:height 16
:border-radius 8
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:position :absolute
:top 5
:right 9
:justify-content :center
:align-items :center
})
(def remove-photo-inner-container
{:width 14 {:width 14
:height 14 :height 14
:border-radius 7 :border-radius 7
:background-color colors/neutral-50 :background-color colors/neutral-50
:position :absolute
:top 5
:right 5
:justify-content :center :justify-content :center
:align-items :center}) :align-items :center})
(def small-image (def small-image
{:width 56 {:width 56
:height 56 :height 56
:border-radius 8}) :border-radius 12})

14
src/status_im2/contexts/chat/composer/images/view.cljs
View File

@ -1,6 +1,7 @@
(ns status-im2.contexts.chat.composer.images.view (ns status-im2.contexts.chat.composer.images.view
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.gesture :as gesture] [react-native.gesture :as gesture]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
@ -9,23 +10,25 @@
[status-im2.contexts.chat.composer.constants :as constants])) [status-im2.contexts.chat.composer.constants :as constants]))
(defn image (defn image
[item] [item theme]
[rn/view style/image-container [rn/view style/image-container
[rn/image [rn/image
{:source {:uri (:resized-uri (val item))} {:source {:uri (:resized-uri (val item))}
:style style/small-image}] :style style/small-image}]
[rn/touchable-opacity [rn/touchable-opacity
{:on-press #(rf/dispatch [:chat.ui/image-unselected (val item)]) {:on-press #(rf/dispatch [:chat.ui/image-unselected (val item)])
:style style/remove-photo-container :style (style/remove-photo-container theme)
:hit-slop {:right 5 :hit-slop {:right 5
:left 5 :left 5
:top 10 :top 10
:bottom 10}} :bottom 10}}
[quo/icon :i/close {:color colors/white :size 12}]]]) [rn/view {:style style/remove-photo-inner-container}
[quo/icon :i/clear {:size 20 :color colors/neutral-50 :color-2 colors/white}]]]])
(defn f-images-list (defn f-images-list
[] []
(let [images (rf/sub [:chats/sending-image]) (let [theme (quo.theme/use-theme-value)
images (rf/sub [:chats/sending-image])
height (reanimated/use-shared-value (if (seq images) constants/images-container-height 0))] height (reanimated/use-shared-value (if (seq images) constants/images-container-height 0))]
(rn/use-effect (fn [] (rn/use-effect (fn []
(reanimated/animate height (reanimated/animate height
@ -37,7 +40,8 @@
:z-index 1})} :z-index 1})}
[gesture/flat-list [gesture/flat-list
{:key-fn first {:key-fn first
:render-fn image :render-fn (fn [item]
(image item theme))
:data images :data images
:content-container-style {:padding-horizontal 20} :content-container-style {:padding-horizontal 20}
:horizontal true :horizontal true

6
src/status_im2/contexts/chat/composer/style.cljs
View File

@ -54,12 +54,12 @@
[height max-height] [height max-height]
(reanimated/apply-animations-to-style (reanimated/apply-animations-to-style
{:height height} {:height height}
{:max-height max-height {:max-height max-height}))
:overflow :hidden}))
(defn input-view (defn input-view
[{:keys [recording?]}] [{:keys [recording?]}]
{:z-index 1 {:overflow :hidden
:z-index 1
:flex 1 :flex 1
:display (if @recording? :none :flex) :display (if @recording? :none :flex)
:min-height constants/input-height}) :min-height constants/input-height})