status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-03-01 08:40:50 +00:00
Code Issues Projects Releases Wiki Activity

Implement menu on collectible preview page (#18651)

Browse Source
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.animations :as anim]
[status-im.common.lightbox.constants :as constants] [status-im.common.lightbox.constants :as constants]
[status-im.common.lightbox.style :as style] [status-im.common.lightbox.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf] [utils.re-frame :as rf]
[utils.url :as url])) [utils.url :as url]))
@ -40,25 +39,6 @@
(anim/animate top-view-width screen-width) (anim/animate top-view-width screen-width)
(anim/animate top-view-bg colors/neutral-100-opa-0))))) (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 (defn share-image
[images index] [images index]
(let [{:keys [image]} (nth images index) (let [{:keys [image]} (nth images index)
@ -66,7 +46,7 @@
(rf/dispatch [:lightbox/share-image uri]))) (rf/dispatch [:lightbox/share-image uri])))
(defn top-view (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) (let [{:keys [description header]} (nth images @index)
bg-color (if landscape? bg-color (if landscape?
colors/neutral-100-opa-70 colors/neutral-100-opa-70
@ -113,7 +93,6 @@
[rn/touchable-opacity [rn/touchable-opacity
{:active-opacity 1 {:active-opacity 1
:accessibility-label :image-options :accessibility-label :image-options
:on-press #(rf/dispatch [:show-bottom-sheet :on-press #(on-options-press images @index)
{:content (fn [] [drawer images @index])}])
:style style/close-container} :style style/close-container}
[quo/icon :options {:size 20 :color colors/white}]]]])) [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}}]]) [rn/view {:style {:width constants/separator-width}}]])
(defn lightbox-content (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 (let [{:keys [data transparent? scroll-index
set-full-height?]} state set-full-height?]} state
insets (safe-area/get-insets) insets (safe-area/get-insets)
@ -69,7 +70,7 @@
{:height screen-height})} {:height screen-height})}
(when-not @transparent? (when-not @transparent?
[:f> top-view/top-view images insets scroll-index animations derived landscape? [:f> top-view/top-view images insets scroll-index animations derived landscape?
screen-width]) screen-width on-options-press])
[gesture/gesture-detector [gesture/gesture-detector
{:gesture (utils/drag-gesture animations (and landscape? platform/ios?) set-full-height?)} {:gesture (utils/drag-gesture animations (and landscape? platform/ios?) set-full-height?)}
[reanimated/view [reanimated/view
@ -136,7 +137,8 @@
(defn- f-lightbox (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 props
(utils/init-props) (utils/init-props)
state state
@ -160,7 +162,8 @@
:images images :images images
:index index :index index
:handle-items-changed handle-items-changed :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 (defn lightbox
[] []

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

@ -66,7 +66,12 @@
album-messages)) album-messages))
:bottom-text-component :bottom-text-component
[lightbox/bottom-text-for-lightbox [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 [fast-image/fast-image
{:style (style/image dimensions index portrait? images-count) {:style (style/image dimensions index portrait? images-count)
:source {:uri (url/replace-port (:image (:content item)) media-server-port)} :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 :index 0
:insets insets :insets insets
:bottom-text-component :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 [fast-image/fast-image
{:source {:uri image-local-url} {:source {:uri image-local-url}
:style (merge dimensions {:border-radius 12}) :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 (ns status-im.contexts.chat.messenger.messages.content.lightbox.view
(:require (:require
[oops.core :as oops] [oops.core :as oops]
[quo.core :as quo]
[react-native.platform :as platform]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.common.lightbox.constants :as constants] [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.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 (defn bottom-text-for-lightbox
[_] [_]
@ -16,3 +21,22 @@
:chat-id chat-id :chat-id chat-id
:style-override (style/bottom-text expandable-text?) :style-override (style/bottom-text expandable-text?)
:on-layout #(reset! text-height (oops/oget % "nativeEvent.layout.height"))}])))) :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)}])]))}]]]))

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

@ -3,13 +3,15 @@
[quo.core :as quo] [quo.core :as quo]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.platform :as platform]
[react-native.svg :as svg] [react-native.svg :as svg]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.common.scroll-page.view :as scroll-page] [status-im.common.scroll-page.view :as scroll-page]
[status-im.contexts.wallet.collectible.style :as style] [status-im.contexts.wallet.collectible.style :as style]
[status-im.contexts.wallet.collectible.tabs.view :as tabs] [status-im.contexts.wallet.collectible.tabs.view :as tabs]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf])) [utils.re-frame :as rf]
[utils.url :as url]))
(defn header (defn header
[collectible-name collection-name collection-image-url] [collectible-name collection-name collection-image-url]
@ -71,6 +73,32 @@
:accessibility-label :share-details :accessibility-label :share-details
:label (i18n/label :t/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 (defn view-internal
[{:keys [theme] :as _props}] [{:keys [theme] :as _props}]
(let [selected-tab (reagent/atom :overview) (let [selected-tab (reagent/atom :overview)
@ -107,20 +135,27 @@
:on-press (fn [] :on-press (fn []
(if svg? (if svg?
(js/alert "Can't visualize SVG images in lightbox") (js/alert "Can't visualize SVG images in lightbox")
(rf/dispatch [:lightbox/navigate-to-lightbox (rf/dispatch
[:lightbox/navigate-to-lightbox
token-id token-id
{:images [{:image preview-uri {:images [{:image preview-uri
:image-width 300 ; collectibles don't have :image-width 300 ; collectibles don't have
; width/height but we need ; width/height but we need
; to pass something ; to pass something
:image-height 300 ; without it animation :image-height 300 ; without it animation
; doesn't work smoothly and ; doesn't work smoothly
; :border-radius not ; and :border-radius not
; applied ; applied
:id token-id :id token-id
:header collectible-name :header collectible-name
:description collection-name}] :description collection-name}]
:index 0}])))} :index 0
:on-options-press (fn [images index]
(rf/dispatch [:show-bottom-sheet
{:content (fn []
[options-drawer
images
index])}]))}])))}
(if svg? (if svg?
[rn/view [rn/view
{:style (assoc style/preview :overflow :hidden) {:style (assoc style/preview :overflow :hidden)

1
translations/en.json
View File

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