From a95f2a0f5217eb4f0f819f97ddf8ee056f73f761 Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Thu, 1 Feb 2024 12:48:48 +0000 Subject: [PATCH] Implement menu on collectible preview page (#18651) --- src/status_im/common/lightbox/top_view.cljs | 25 +------ src/status_im/common/lightbox/view.cljs | 11 ++-- .../messages/content/album/view.cljs | 7 +- .../messages/content/image/view.cljs | 8 ++- .../messages/content/lightbox/view.cljs | 26 +++++++- .../contexts/wallet/collectible/view.cljs | 65 ++++++++++++++----- translations/en.json | 1 + 7 files changed, 98 insertions(+), 45 deletions(-) diff --git a/src/status_im/common/lightbox/top_view.cljs b/src/status_im/common/lightbox/top_view.cljs index 72a1fb0c7c..c94491cccd 100644 --- a/src/status_im/common/lightbox/top_view.cljs +++ b/src/status_im/common/lightbox/top_view.cljs @@ -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}]]]])) diff --git a/src/status_im/common/lightbox/view.cljs b/src/status_im/common/lightbox/view.cljs index 5c8eab8fff..2e109b4290 100644 --- a/src/status_im/common/lightbox/view.cljs +++ b/src/status_im/common/lightbox/view.cljs @@ -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 [] diff --git a/src/status_im/contexts/chat/messenger/messages/content/album/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/album/view.cljs index ea03af0446..5cb5b23c9d 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/album/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/album/view.cljs @@ -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)} diff --git a/src/status_im/contexts/chat/messenger/messages/content/image/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/image/view.cljs index 05d8410101..a364dccf16 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/image/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/image/view.cljs @@ -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}) diff --git a/src/status_im/contexts/chat/messenger/messages/content/lightbox/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/lightbox/view.cljs index 247599bcfe..c23f47023a 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/lightbox/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/lightbox/view.cljs @@ -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)}])]))}]]])) diff --git a/src/status_im/contexts/wallet/collectible/view.cljs b/src/status_im/contexts/wallet/collectible/view.cljs index ab95f7cde5..ca6a293467 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/src/status_im/contexts/wallet/collectible/view.cljs @@ -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) diff --git a/translations/en.json b/translations/en.json index 2e52b60e1e..e9f1eb29a3 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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}}",