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

Implement menu on collectible preview page (#18651)

This commit is contained in:
Volodymyr Kozieiev 2024-02-01 12:48:48 +00:00 committed by GitHub
parent 38dbd6687e
commit a95f2a0f52
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 98 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/status_im/common/lightbox/top_view.cljs
View File

@ -9,7 +9,6 @@
[status-im.common.lightbox.animations :as anim]
[status-im.common.lightbox.constants :as constants]
[status-im.common.lightbox.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[utils.url :as url]))
@ -40,25 +39,6 @@
(anim/animate top-view-width screen-width)
(anim/animate top-view-bg colors/neutral-100-opa-0)))))
(defn drawer
[images index]
(let [{:keys [image]} (nth images index)
uri (url/replace-port image (rf/sub [:mediaserver/port]))]
[quo/action-drawer
[[{:icon :i/save
:accessibility-label :save-image
:label (i18n/label :t/save-image-library)
:on-press (fn []
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch
[:lightbox/save-image-to-gallery
uri
#(rf/dispatch [:toasts/upsert
{:id :random-id
:type :positive
:container-style {:bottom (when platform/android? 20)}
:text (i18n/label :t/photo-saved)}])]))}]]]))
(defn share-image
[images index]
(let [{:keys [image]} (nth images index)
@ -66,7 +46,7 @@
(rf/dispatch [:lightbox/share-image uri])))
(defn top-view
[images insets index animations derived landscape? screen-width]
[images insets index animations derived landscape? screen-width on-options-press]
(let [{:keys [description header]} (nth images @index)
bg-color (if landscape?
colors/neutral-100-opa-70
@ -113,7 +93,6 @@
[rn/touchable-opacity
{:active-opacity 1
:accessibility-label :image-options
:on-press #(rf/dispatch [:show-bottom-sheet
{:content (fn [] [drawer images @index])}])
:on-press #(on-options-press images @index)
:style style/close-container}
[quo/icon :options {:size 20 :color colors/white}]]]]))

11
src/status_im/common/lightbox/view.cljs
View File

@ -44,7 +44,8 @@
[rn/view {:style {:width constants/separator-width}}]])
(defn lightbox-content
[{:keys [props state animations derived images index handle-items-changed bottom-text-component]}]
[{:keys [props state animations derived images index handle-items-changed bottom-text-component
on-options-press]}]
(let [{:keys [data transparent? scroll-index
set-full-height?]} state
insets (safe-area/get-insets)
@ -69,7 +70,7 @@
{:height screen-height})}
(when-not @transparent?
[:f> top-view/top-view images insets scroll-index animations derived landscape?
screen-width])
screen-width on-options-press])
[gesture/gesture-detector
{:gesture (utils/drag-gesture animations (and landscape? platform/ios?) set-full-height?)}
[reanimated/view
@ -136,7 +137,8 @@
(defn- f-lightbox
[]
(let [{:keys [images index bottom-text-component]} (rf/sub [:get-screen-params])
(let [{:keys [images index bottom-text-component on-options-press]}
(rf/sub [:get-screen-params])
props
(utils/init-props)
state
@ -160,7 +162,8 @@
:images images
:index index
:handle-items-changed handle-items-changed
:bottom-text-component bottom-text-component}]))))
:bottom-text-component bottom-text-component
:on-options-press on-options-press}]))))
(defn lightbox
[]

7
src/status_im/contexts/chat/messenger/messages/content/album/view.cljs
View File

@ -66,7 +66,12 @@
album-messages))
:bottom-text-component
[lightbox/bottom-text-for-lightbox
first-image]}])}
first-image]
:on-options-press (fn [images index]
(rf/dispatch [:show-bottom-sheet
{:content (fn [] [lightbox/drawer
images
index])}]))}])}
[fast-image/fast-image
{:style (style/image dimensions index portrait? images-count)
:source {:uri (url/replace-port (:image (:content item)) media-server-port)}

8
src/status_im/contexts/chat/messenger/messages/content/image/view.cljs
View File

@ -57,7 +57,13 @@
:index 0
:insets insets
:bottom-text-component
[lightbox/bottom-text-for-lightbox message]}])}
[lightbox/bottom-text-for-lightbox message]
:on-options-press (fn [images index]
(rf/dispatch [:show-bottom-sheet
{:content (fn []
[lightbox/drawer
images
index])}]))}])}
[fast-image/fast-image
{:source {:uri image-local-url}
:style (merge dimensions {:border-radius 12})

26
src/status_im/contexts/chat/messenger/messages/content/lightbox/view.cljs
View File

@ -1,10 +1,15 @@
(ns status-im.contexts.chat.messenger.messages.content.lightbox.view
(:require
[oops.core :as oops]
[quo.core :as quo]
[react-native.platform :as platform]
[reagent.core :as reagent]
[status-im.common.lightbox.constants :as constants]
[status-im.contexts.chat.messenger.messages.content.lightbox.style :as style]
[status-im.contexts.chat.messenger.messages.content.text.view :as message-view]))
[status-im.contexts.chat.messenger.messages.content.text.view :as message-view]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[utils.url :as url]))
(defn bottom-text-for-lightbox
[_]
@ -16,3 +21,22 @@
:chat-id chat-id
:style-override (style/bottom-text expandable-text?)
:on-layout #(reset! text-height (oops/oget % "nativeEvent.layout.height"))}]))))
(defn drawer
[images index]
(let [{:keys [image]} (nth images index)
uri (url/replace-port image (rf/sub [:mediaserver/port]))]
[quo/action-drawer
[[{:icon :i/save
:accessibility-label :save-image
:label (i18n/label :t/save-image-library)
:on-press (fn []
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch
[:lightbox/save-image-to-gallery
uri
#(rf/dispatch [:toasts/upsert
{:id :random-id
:type :positive
:container-style {:bottom (when platform/android? 20)}
:text (i18n/label :t/photo-saved)}])]))}]]]))

65
src/status_im/contexts/wallet/collectible/view.cljs
View File

@ -3,13 +3,15 @@
[quo.core :as quo]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.platform :as platform]
[react-native.svg :as svg]
[reagent.core :as reagent]
[status-im.common.scroll-page.view :as scroll-page]
[status-im.contexts.wallet.collectible.style :as style]
[status-im.contexts.wallet.collectible.tabs.view :as tabs]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
[utils.re-frame :as rf]
[utils.url :as url]))
(defn header
[collectible-name collection-name collection-image-url]
@ -71,6 +73,32 @@
:accessibility-label :share-details
:label (i18n/label :t/share-details)}]]])
(defn options-drawer
[images index]
(let [{:keys [image]} (nth images index)
uri (url/replace-port image (rf/sub [:mediaserver/port]))]
[quo/action-drawer
[[{:icon :i/link
:accessibility-label :view-on-etherscan
:label (i18n/label :t/view-on-eth)}]
[{:icon :i/save
:accessibility-label :save-image
:label (i18n/label :t/save-image-to-photos)
:on-press (fn []
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch
[:lightbox/save-image-to-gallery
uri
#(rf/dispatch [:toasts/upsert
{:id :random-id
:type :positive
:container-style {:bottom (when platform/android? 20)}
:text (i18n/label :t/photo-saved)}])]))}]
[{:icon :i/share
:accessibility-label :share-collectible
:label (i18n/label :t/share-collectible)
:right-icon :i/external}]]]))
(defn view-internal
[{:keys [theme] :as _props}]
(let [selected-tab (reagent/atom :overview)
@ -107,20 +135,27 @@
:on-press (fn []
(if svg?
(js/alert "Can't visualize SVG images in lightbox")
(rf/dispatch [:lightbox/navigate-to-lightbox
token-id
{:images [{:image preview-uri
:image-width 300 ; collectibles don't have
; width/height but we need
; to pass something
:image-height 300 ; without it animation
; doesn't work smoothly and
; :border-radius not
; applied
:id token-id
:header collectible-name
:description collection-name}]
:index 0}])))}
(rf/dispatch
[:lightbox/navigate-to-lightbox
token-id
{:images [{:image preview-uri
:image-width 300 ; collectibles don't have
; width/height but we need
; to pass something
:image-height 300 ; without it animation
; doesn't work smoothly
; and :border-radius not
; applied
:id token-id
:header collectible-name
:description collection-name}]
:index 0
:on-options-press (fn [images index]
(rf/dispatch [:show-bottom-sheet
{:content (fn []
[options-drawer
images
index])}]))}])))}
(if svg?
[rn/view
{:style (assoc style/preview :overflow :hidden)

1
translations/en.json
View File

@ -1283,6 +1283,7 @@
"share-channel": "Share channel",
"share-address": "Share address",
"share-chat": "Share chat",
"share-collectible": "Share collectible",
"share-contact-code": "Share my chat key",
"share-community": "Share community",
"share-dapp-text": "Check out this DApp I'm using on Status: {{link}}",