From 40c12241e0ed23c66c28d23877c38fedd11f5eab Mon Sep 17 00:00:00 2001 From: Gheorghe Pinzaru Date: Tue, 21 Jan 2020 11:41:44 +0300 Subject: [PATCH] Add bottom sheet to chat top bar options MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add bottom sheet to message long press Make whole bottom sheet panel dragable Fixes #9846 Use spring animation for bottom size of bottom sheet Remove extra border height from bottom sheet The height is already added to content height Remove extra set value for animation Timing and spring already mutates the animation value Reuse chat bottom sheet in chat list Update the size of new chat bottom sheet Add remove to group chat add chat id for clear history to be reused outside of current chat Fix public chat bottom sheet missing destructoring Replace icon for chat fetch history Could be rotated arrow up, but this requires special handling in icons or list item Fix remove public chat event Dismiss keyboard on sheet mount iOs rename arrow down icon Fix unusable screen after close of bottom shet The callback is called after 1.5 seconds after the animation starts. This happens because spring animation takes more time on animating post animation oscillations. Add accessibility labels Fix bad message destructoring add view profile on long message press Reset bottom value after animation Remove pending circle from avatar in chat sheets Do not show open profile on own messages Signed-off-by: Gheorghe Pinzaru --- .../src/main/res/drawable-mdpi/arrow_down.png | Bin 0 -> 202 bytes .../main/res/drawable-xhdpi/arrow_down.png | Bin 0 -> 286 bytes .../main/res/drawable-xxhdpi/arrow_down.png | Bin 0 -> 380 bytes .../arrow-down.imageset/Contents.json | 23 +++ .../arrow-down.imageset/arrow_down.png | Bin 0 -> 202 bytes .../arrow-down.imageset/arrow_down@2x.png | Bin 0 -> 286 bytes .../arrow-down.imageset/arrow_down@3x.png | Bin 0 -> 380 bytes src/status_im/events.cljs | 8 +- .../ui/components/bottom_sheet/styles.cljs | 2 +- .../ui/components/bottom_sheet/view.cljs | 32 +-- .../ui/components/chat_icon/screen.cljs | 13 ++ .../ui/components/list_selection.cljs | 19 -- .../ui/components/popup_menu/views.cljs | 2 +- src/status_im/ui/screens/chat/actions.cljs | 74 ------- .../ui/screens/chat/message/message.cljs | 35 ++-- .../ui/screens/chat/message/sheets.cljs | 37 +++- src/status_im/ui/screens/chat/sheets.cljs | 192 ++++++++++++++++++ src/status_im/ui/screens/chat/views.cljs | 12 +- .../ui/screens/home/sheet/views.cljs | 71 +------ .../ui/screens/home/views/inner_item.cljs | 18 +- .../ui/screens/profile/group_chat/views.cljs | 2 +- src/status_im/ui/screens/views.cljs | 9 - 22 files changed, 317 insertions(+), 232 deletions(-) create mode 100644 android/app/src/main/res/drawable-mdpi/arrow_down.png create mode 100644 android/app/src/main/res/drawable-xhdpi/arrow_down.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/arrow_down.png create mode 100644 ios/StatusIm/Images.xcassets/arrow-down.imageset/Contents.json create mode 100644 ios/StatusIm/Images.xcassets/arrow-down.imageset/arrow_down.png create mode 100644 ios/StatusIm/Images.xcassets/arrow-down.imageset/arrow_down@2x.png create mode 100644 ios/StatusIm/Images.xcassets/arrow-down.imageset/arrow_down@3x.png delete mode 100644 src/status_im/ui/screens/chat/actions.cljs create mode 100644 src/status_im/ui/screens/chat/sheets.cljs diff --git a/android/app/src/main/res/drawable-mdpi/arrow_down.png b/android/app/src/main/res/drawable-mdpi/arrow_down.png new file mode 100644 index 0000000000000000000000000000000000000000..a966063873e886b6be37b72c92909d5aa4838bdc GIT binary patch literal 202 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#cuyC{kP61Pmo9Q1P~c&?uz2#Ff2T`Y`X(u9 zObKzl@}rcW#qfn7k3!L{$>9>Gvv0H}a7FNG1RwU&oqIQ8&Z?4|c8aN8FS0JbkTcqz sUurI!q}Otz-DWf$<*1Fd54boFyt=akR{0IhsMA^-pY literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xhdpi/arrow_down.png b/android/app/src/main/res/drawable-xhdpi/arrow_down.png new file mode 100644 index 0000000000000000000000000000000000000000..c197a93ba09c782bf8fd24cef475e4bf57024bc3 GIT binary patch literal 286 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?2=RS;(M3{v?36l5$8 za(7}_cTVOdki(Mh=>&xDHtq*zQ{7Yyt)6(KxM}~uT9r_ow1K7UT zeB%7qk`VLggk|n|4%HXz)<#W}1yuO*Svn6(J3jj0Ho;<#Ac%WjKE(CV2Nxiayu)a3 W)~xu#S3?=-d(RV@L(#+Z%y=2OUIOA0Fmu4@l79)-nffEW792J@!*cy45BoP9SqZ`9^=^Sk1eHb;re1D_Q_5V4? zZnPPQo-3bu(o;EocGTs*Tn_Jvahy|(($zOMu9?a`r8`7gL-d@PXvX3{y*;k0IH#P+ ze|Kd@K&^`SiKCpRS|Q>qMKZP(vMI{HoclgaFkL|F{tIj2Su+I+*C3+_{lypNb5DJ2 wvh~=HX?r_@ue862H*06T;dg`);;jpFgg1UxT=XUETP#Sx)78&qol`;+0N10BhyVZp literal 0 HcmV?d00001 diff --git a/ios/StatusIm/Images.xcassets/arrow-down.imageset/Contents.json b/ios/StatusIm/Images.xcassets/arrow-down.imageset/Contents.json new file mode 100644 index 0000000000..4ea6f2b86d --- /dev/null +++ b/ios/StatusIm/Images.xcassets/arrow-down.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "idiom" : "universal", + "filename" : "arrow_down.png", + "scale" : "1x" + }, + { + "idiom" : "universal", + "filename" : "arrow_down@2x.png", + "scale" : "2x" + }, + { + "idiom" : "universal", + "filename" : "arrow_down@3x.png", + "scale" : "3x" + } + ], + "info" : { + "version" : 1, + "author" : "xcode" + } +} \ No newline at end of file diff --git a/ios/StatusIm/Images.xcassets/arrow-down.imageset/arrow_down.png b/ios/StatusIm/Images.xcassets/arrow-down.imageset/arrow_down.png new file mode 100644 index 0000000000000000000000000000000000000000..a966063873e886b6be37b72c92909d5aa4838bdc GIT binary patch literal 202 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#cuyC{kP61Pmo9Q1P~c&?uz2#Ff2T`Y`X(u9 zObKzl@}rcW#qfn7k3!L{$>9>Gvv0H}a7FNG1RwU&oqIQ8&Z?4|c8aN8FS0JbkTcqz sUurI!q}Otz-DWf$<*1Fd54boFyt=akR{0IhsMA^-pY literal 0 HcmV?d00001 diff --git a/ios/StatusIm/Images.xcassets/arrow-down.imageset/arrow_down@2x.png b/ios/StatusIm/Images.xcassets/arrow-down.imageset/arrow_down@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..c197a93ba09c782bf8fd24cef475e4bf57024bc3 GIT binary patch literal 286 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?2=RS;(M3{v?36l5$8 za(7}_cTVOdki(Mh=>&xDHtq*zQ{7Yyt)6(KxM}~uT9r_ow1K7UT zeB%7qk`VLggk|n|4%HXz)<#W}1yuO*Svn6(J3jj0Ho;<#Ac%WjKE(CV2Nxiayu)a3 W)~xu#S3?=-d(RV@L(#+Z%y=2OUIOA0Fmu4@l79)-nffEW792J@!*cy45BoP9SqZ`9^=^Sk1eHb;re1D_Q_5V4? zZnPPQo-3bu(o;EocGTs*Tn_Jvahy|(($zOMu9?a`r8`7gL-d@PXvX3{y*;k0IH#P+ ze|Kd@K&^`SiKCpRS|Q>qMKZP(vMI{HoclgaFkL|F{tIj2Su+I+*C3+_{lypNb5DJ2 wvh~=HX?r_@ue862H*06T;dg`);;jpFgg1UxT=XUETP#Sx)78&qol`;+0N10BhyVZp literal 0 HcmV?d00001 diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index 5e815080e0..67a60b79df 100644 --- a/src/status_im/events.cljs +++ b/src/status_im/events.cljs @@ -401,11 +401,11 @@ (handlers/register-handler-fx :chat.ui/clear-history-pressed - (fn [_ _] + (fn [_ [_ chat-id]] {:ui/show-confirmation {:title (i18n/label :t/clear-history-title) :content (i18n/label :t/clear-history-confirmation-content) :confirm-button-text (i18n/label :t/clear-history-action) - :on-accept #(re-frame/dispatch [:chat.ui/clear-history])}})) + :on-accept #(re-frame/dispatch [:chat.ui/clear-history chat-id])}})) (handlers/register-handler-fx :chat.ui/fetch-history-pressed @@ -513,8 +513,8 @@ (handlers/register-handler-fx :chat.ui/clear-history - (fn [{{:keys [current-chat-id]} :db :as cofx} _] - (chat/clear-history cofx current-chat-id))) + (fn [cofx [_ chat-id]] + (chat/clear-history cofx chat-id))) (handlers/register-handler-fx :chat.ui/resend-message diff --git a/src/status_im/ui/components/bottom_sheet/styles.cljs b/src/status_im/ui/components/bottom_sheet/styles.cljs index 42c4ff5e61..08ccaabf8e 100644 --- a/src/status_im/ui/components/bottom_sheet/styles.cljs +++ b/src/status_im/ui/components/bottom_sheet/styles.cljs @@ -30,7 +30,7 @@ {:background-color colors/white :border-top-left-radius border-radius :border-top-right-radius border-radius - :height (+ content-height border-radius bottom-view-height) + :height (+ content-height bottom-view-height) :bottom (- bottom-view-height) :align-self :stretch :transform [{:translateY bottom-value}] diff --git a/src/status_im/ui/components/bottom_sheet/view.cljs b/src/status_im/ui/components/bottom_sheet/view.cljs index b6f7852143..36e7e13f07 100644 --- a/src/status_im/ui/components/bottom_sheet/view.cljs +++ b/src/status_im/ui/components/bottom_sheet/view.cljs @@ -17,20 +17,22 @@ [{:keys [opacity new-opacity-value bottom new-bottom-value duration callback]}] + (when (fn? callback) + (js/setTimeout callback duration)) (animation/start (animation/parallel [(animation/timing opacity {:toValue new-opacity-value :duration duration :useNativeDriver true}) - (animation/timing bottom + (animation/spring bottom {:toValue new-bottom-value :duration duration - :useNativeDriver true})]) - (when (fn? callback) callback))) + :tension 40 + :friction 6 + :useNativeDriver true})]))) -(defn animate-sign-panel - [opacity-value bottom-value] +(defn animate-panel-open [opacity-value bottom-value] (animate {:bottom bottom-value :new-bottom-value 0 :opacity opacity-value @@ -63,7 +65,6 @@ :duration cancellation-animation-duration :callback #(do (reset! show-sheet? false) (animation/set-value bottom-value height) - (animation/set-value opacity-value 0) (when (fn? callback) (callback)))}))) (defn- on-release @@ -96,10 +97,12 @@ [{:keys [opacity-value bottom-value]}] (reagent.core/create-class {:component-did-mount - #(animate-sign-panel opacity-value bottom-value) + (fn [] + (react/dismiss-keyboard!) + (animate-panel-open opacity-value bottom-value)) :reagent-render - (fn [{:keys [opacity-value bottom-value - height content on-cancel] + (fn [{:keys [opacity-value bottom-value height + content on-cancel disable-drag?] :or {on-cancel #(re-frame/dispatch [:bottom-sheet/hide])} :as opts}] [react/keyboard-avoiding-view {:style styles/container} @@ -108,12 +111,11 @@ :style styles/container} [react/animated-view (styles/shadow opacity-value)]] - [react/animated-view - {:style (styles/content-container height bottom-value)} - [react/view - (merge - (pan-handlers (swipe-pan-responder opts)) - {:style styles/content-header}) + [react/animated-view (merge + {:style (styles/content-container height bottom-value)} + (when-not disable-drag? + (pan-handlers (swipe-pan-responder opts)))) + [react/view {:style styles/content-header} [react/view styles/handle]] [react/view {:style {:flex 1 :height height}} diff --git a/src/status_im/ui/components/chat_icon/screen.cljs b/src/status_im/ui/components/chat_icon/screen.cljs index de86d00104..4172d211b6 100644 --- a/src/status_im/ui/components/chat_icon/screen.cljs +++ b/src/status_im/ui/components/chat_icon/screen.cljs @@ -69,6 +69,19 @@ :default-chat-icon (styles/default-chat-icon-chat-list color) :default-chat-icon-text styles/default-chat-icon-text}]) +(defn chat-icon-view-chat-sheet + [contact group-chat name color online] + [chat-icon-view contact group-chat name online + {:container styles/container-chat-list + :online-view-wrapper styles/online-view-wrapper + :online-view styles/online-view + :online-dot-left styles/online-dot-left + :online-dot-right styles/online-dot-right + :size 40 + :chat-icon styles/chat-icon-chat-list + :default-chat-icon (styles/default-chat-icon-chat-list color) + :default-chat-icon-text styles/default-chat-icon-text}]) + (defn custom-icon-view-list [name color & [size]] [react/view (styles/container-list-size (or size 40)) diff --git a/src/status_im/ui/components/list_selection.cljs b/src/status_im/ui/components/list_selection.cljs index 57e7eecb19..ae560aab10 100644 --- a/src/status_im/ui/components/list_selection.cljs +++ b/src/status_im/ui/components/list_selection.cljs @@ -13,31 +13,12 @@ (:url content)) (.share react/sharing (clj->js content)))) -(defn- message-options [message-id text from outgoing] - (into - [] - (concat - (when (and from (not outgoing)) - [{:label (i18n/label :t/view-profile) - :action #(re-frame/dispatch [:chat.ui/show-profile from])}]) - [{:label (i18n/label :t/message-reply) - :action #(re-frame/dispatch [:chat.ui/reply-to-message message-id])} - {:label (i18n/label :t/sharing-copy-to-clipboard) - :action #(react/copy-to-clipboard text)} - {:label (i18n/label :t/sharing-share) - :action #(open-share {:message text})}]))) - (defn show [options] (cond platform/ios? (action-sheet/show options) platform/android? (dialog/show options) platform/desktop? (show-desktop-menu (->> (:options options) (remove nil?))))) -(defn chat-message [message-id text from outgoing dialog-title] - (show {:title dialog-title - :options (message-options message-id text from outgoing) - :cancel-text (i18n/label :t/message-options-cancel)})) - (defn- platform-web-browser [] (if platform/ios? :t/browsing-open-in-ios-web-browser :t/browsing-open-in-android-web-browser)) diff --git a/src/status_im/ui/components/popup_menu/views.cljs b/src/status_im/ui/components/popup_menu/views.cljs index 6e34bba99c..81a8878fca 100644 --- a/src/status_im/ui/components/popup_menu/views.cljs +++ b/src/status_im/ui/components/popup_menu/views.cljs @@ -21,7 +21,7 @@ {:text (i18n/label :t/group-info) :on-select #(re-frame/dispatch [:show-group-chat-profile])}) {:text (i18n/label :t/clear-history) - :on-select #(re-frame/dispatch [:chat.ui/clear-history-pressed])} + :on-select #(re-frame/dispatch [:chat.ui/clear-history-pressed chat-id])} {:text (i18n/label :t/fetch-history) :on-select #(re-frame/dispatch [:chat.ui/fetch-history-pressed chat-id])} #_{:text "Fetch 48-60h" diff --git a/src/status_im/ui/screens/chat/actions.cljs b/src/status_im/ui/screens/chat/actions.cljs deleted file mode 100644 index 41e36f1b1c..0000000000 --- a/src/status_im/ui/screens/chat/actions.cljs +++ /dev/null @@ -1,74 +0,0 @@ -(ns status-im.ui.screens.chat.actions - (:require [re-frame.core :as re-frame] - [status-im.i18n :as i18n] - [status-im.ui.components.list-selection :as list-selection] - [status-im.utils.universal-links.core :as universal-links] - [status-im.utils.platform :as platform])) - -(defn view-profile [chat-id] - {:label (i18n/label :t/view-profile) - :action #(re-frame/dispatch [:chat.ui/show-profile chat-id])}) - -(defn group-info [chat-id] - {:label (i18n/label :t/group-info) - :action #(re-frame/dispatch [:show-group-chat-profile chat-id])}) - -(defn- share-chat [chat-id] - (let [link (universal-links/generate-link :public-chat :external chat-id) - message (i18n/label :t/share-public-chat-text {:link link})] - (when-not platform/desktop? - {:label (i18n/label :t/share-chat) - :action #(list-selection/open-share {:message message})}))) - -(defn- clear-history [] - {:label (i18n/label :t/clear-history) - :action #(re-frame/dispatch [:chat.ui/clear-history-pressed])}) - -(defn fetch-history [chat-id] - {:label (i18n/label :t/fetch-history) - :action #(re-frame/dispatch [:chat.ui/fetch-history-pressed chat-id])}) - -(defn fetch-history48-60 [chat-id] - {:label "Fetch 48-60h" - :action #(re-frame/dispatch [:chat.ui/fetch-history-pressed48-60 chat-id])}) - -(defn fetch-history84-96 [chat-id] - {:label "Fetch 84-96h" - :action #(re-frame/dispatch [:chat.ui/fetch-history-pressed84-96 chat-id])}) - -(defn- delete-chat [chat-id group?] - {:label (i18n/label :t/delete-chat) - :action #(re-frame/dispatch [(if group? - :group-chats.ui/remove-chat-pressed - :chat.ui/remove-chat-pressed) - chat-id])}) - -(defn- chat-actions [chat-id] - [(view-profile chat-id) - (clear-history) - (fetch-history chat-id) - #_(fetch-history48-60 chat-id) - #_(fetch-history84-96 chat-id) - (delete-chat chat-id false)]) - -(defn- group-chat-actions [chat-id] - [(group-info chat-id) - (clear-history) - (fetch-history chat-id) - #_(fetch-history48-60 chat-id) - #_(fetch-history84-96 chat-id) - (delete-chat chat-id true)]) - -(defn- public-chat-actions [chat-id] - [(share-chat chat-id) - (clear-history) - (fetch-history chat-id) - #_(fetch-history48-60 chat-id) - #_(fetch-history84-96 chat-id) - (delete-chat chat-id false)]) - -(defn actions [group-chat? chat-id public?] - (cond - public? (public-chat-actions chat-id) - group-chat? (group-chat-actions chat-id) - :else (chat-actions chat-id))) diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs index df45f339e1..1f10d69595 100644 --- a/src/status_im/ui/screens/chat/message/message.cljs +++ b/src/status_im/ui/screens/chat/message/message.cljs @@ -9,13 +9,12 @@ [status-im.ui.components.colors :as colors] [status-im.utils.security :as security] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.list-selection :as list-selection] [status-im.ui.components.popup-menu.views :as desktop.pop-up] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.react :as react] [status-im.utils.money :as money] [status-im.ethereum.transactions.core :as transactions] - [status-im.ui.screens.chat.message.sheets :as sheets] + [status-im.ui.screens.chat.sheets :as sheets] [status-im.ui.screens.chat.photos :as photos] [status-im.ui.screens.chat.styles.message.message :as style] [status-im.ui.screens.chat.utils :as chat.utils] @@ -520,40 +519,34 @@ [react/view (style/delivery-status outgoing) [message-delivery-status message]]]) -(defn open-chat-context-menu - [{:keys [message-id content from outgoing]}] - (list-selection/chat-message message-id (:text content) from outgoing (i18n/label :t/message))) - -(defn open-sticker-context-menu - [{:keys [from outgoing]}] - (when (and from (not outgoing)) - (list-selection/show - {:title (i18n/label :t/message) - :options [{:label (i18n/label :t/view-profile) - :action #(re-frame/dispatch [:chat.ui/show-profile from])}] - :cancel-text (i18n/label :t/message-options-cancel)}))) - (defn chat-message - [{:keys [outgoing group-chat modal? current-public-key content-type content] :as message}] + [{:keys [outgoing from group-chat modal? current-public-key content-type content] :as message}] (let [sticker (:sticker content)] [react/view [react/touchable-highlight {:on-press (fn [arg] (if (and platform/desktop? (= "right" (.-button (.-nativeEvent arg)))) - (open-chat-context-menu message) + (re-frame/dispatch [:bottom-sheet/show-sheet + {:content (sheets/message-long-press message) + :height 192}]) (do (when (and (= content-type constants/content-type-sticker) (:pack sticker)) (re-frame/dispatch [:stickers/open-sticker-pack (:pack sticker)])) - (re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true + (re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true :input-bottom-sheet nil}]) (when-not platform/desktop? (react/dismiss-keyboard!))))) :on-long-press #(cond (or (= content-type constants/content-type-text) (= content-type constants/content-type-emoji)) - (open-chat-context-menu message) + (re-frame/dispatch [:bottom-sheet/show-sheet + {:content (sheets/message-long-press message) + :height 192}]) - (= content-type constants/content-type-sticker) - (open-sticker-context-menu message))} + (and (= content-type constants/content-type-sticker) + from (not outgoing)) + (re-frame/dispatch [:bottom-sheet/show-sheet + {:content (sheets/sticker-long-press message) + :height 64}]))} [react/view {:accessibility-label :chat-item} (let [incoming-group (and group-chat (not outgoing))] [message-content message-body (merge message diff --git a/src/status_im/ui/screens/chat/message/sheets.cljs b/src/status_im/ui/screens/chat/message/sheets.cljs index c5052235a9..175ce3866a 100644 --- a/src/status_im/ui/screens/chat/message/sheets.cljs +++ b/src/status_im/ui/screens/chat/message/sheets.cljs @@ -2,6 +2,8 @@ (:require [re-frame.core :as re-frame] [status-im.ui.components.react :as react] [status-im.ui.screens.chat.styles.message.sheets :as sheets.styles] + [status-im.utils.platform :as platform] + [status-im.ui.components.list-selection :as list-selection] [status-im.ui.components.list-item.views :as list-item])) (defn hide-sheet-and-dispatch [event] @@ -23,4 +25,37 @@ :title :t/delete-message :icon :main-icons/delete :accessibility-label :delete-transaction-button - :on-press #(hide-sheet-and-dispatch [:chat.ui/delete-message chat-id message-id])}]])) \ No newline at end of file + :on-press #(hide-sheet-and-dispatch [:chat.ui/delete-message chat-id message-id])}]])) + +(defn message-long-press [{:keys [message-id content]}] + (fn [] + [react/view + [list-item/list-item + {:theme :action + :title :t/message-reply + :icon :main-icons/reply + :on-press #(hide-sheet-and-dispatch [:chat.ui/reply-to-message message-id])}] + [list-item/list-item + {:theme :action + :title :t/sharing-copy-to-clipboard + :icon :main-icons/copy + :on-press (fn [] + (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (react/copy-to-clipboard (:text content)))}] + (when-not platform/desktop? + [list-item/list-item + {:theme :action + :title :t/sharing-share + :icon :main-icons/share + :on-press (fn [] + (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (list-selection/open-share {:message (:text content)}))}])])) + +(defn sticker-long-press [{:keys [message-id]}] + (fn [] + [react/view + [list-item/list-item + {:theme :action + :title :t/message-reply + :icon :main-icons/reply + :on-press #(hide-sheet-and-dispatch [:chat.ui/reply-to-message message-id])}]])) diff --git a/src/status_im/ui/screens/chat/sheets.cljs b/src/status_im/ui/screens/chat/sheets.cljs new file mode 100644 index 0000000000..b7cfa0c90e --- /dev/null +++ b/src/status_im/ui/screens/chat/sheets.cljs @@ -0,0 +1,192 @@ +(ns status-im.ui.screens.chat.sheets + (:require [re-frame.core :as re-frame] + [status-im.i18n :as i18n] + [status-im.ui.components.react :as react] + [status-im.ui.components.list-selection :as list-selection] + [status-im.utils.universal-links.core :as universal-links] + [status-im.multiaccounts.core :as multiaccounts] + [status-im.ui.components.chat-icon.screen :as chat-icon] + [status-im.ui.components.colors :as colors] + [status-im.utils.platform :as platform] + [status-im.ui.screens.chat.styles.message.sheets :as sheets.styles] + [status-im.ui.components.list-item.views :as list-item])) + +(defn hide-sheet-and-dispatch [event] + (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (re-frame/dispatch event)) + +(defn view-profile [{:keys [name helper]}] + [react/view + [react/text {:style {:font-weight "500" + :line-height 22 + :font-size 15 + :color :black}} + name] + [react/text {:style {:line-height 22 + :font-size 15 + :color colors/gray}} + (i18n/label helper)]]) + +(defn chat-actions [{:keys [chat-id contact chat-name]}] + [react/view + [list-item/list-item + {:theme :action + :icon (multiaccounts/displayed-photo contact) + :title [view-profile {:name chat-name + :helper :t/view-profile}] + :accessibility-label :view-chat-details-button + :accessories [:chevron] + :on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile chat-id])}] + [list-item/list-item + {:theme :action + :title :t/clear-history + :accessibility-label :clear-history-button + :icon :main-icons/close + :on-press #(hide-sheet-and-dispatch [:chat.ui/clear-history-pressed chat-id])}] + [list-item/list-item + {:theme :action + :title :t/fetch-history + :accessibility-label :fetch-history-button + :icon :main-icons/arrow-down + :on-press #(hide-sheet-and-dispatch [:chat.ui/fetch-history-pressed chat-id])}] + [list-item/list-item + {:theme :action-destructive + :title :t/delete-chat + :accessibility-label :delete-chat-button + :icon :main-icons/delete + :on-press #(hide-sheet-and-dispatch [:chat.ui/remove-chat-pressed chat-id])}]]) + +(defn public-chat-actions [{:keys [chat-id]}] + (let [link (universal-links/generate-link :public-chat :external chat-id) + message (i18n/label :t/share-public-chat-text {:link link})] + [react/view + (when-not platform/desktop? + [list-item/list-item + {:theme :action + :title :t/share-chat + :accessibility-label :share-chat-button + :icon :main-icons/share + :on-press (fn [] + (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (list-selection/open-share {:message message}))}]) + [list-item/list-item + {:theme :action + :title :t/clear-history + :accessibility-label :clear-history-button + :icon :main-icons/close + :on-press #(hide-sheet-and-dispatch [:chat.ui/clear-history-pressed chat-id])}] + [list-item/list-item + {:theme :action + :title :t/fetch-history + :accessibility-label :fetch-history-button + :icon :main-icons/arrow-down + :on-press #(hide-sheet-and-dispatch [:chat.ui/fetch-history-pressed chat-id])}] + [list-item/list-item + {:theme :action-destructive + :title :t/delete-chat + :accessibility-label :delete-chat-button + :icon :main-icons/delete + :on-press #(hide-sheet-and-dispatch [:chat.ui/remove-chat-pressed chat-id])}]])) + +(defn group-chat-actions + [{:keys [chat-id contact group-chat chat-name color online]}] + [react/view + [list-item/list-item + {:theme :action + :title [view-profile {:name chat-name + :helper :t/group-info}] + :icon [chat-icon/chat-icon-view-chat-sheet + contact group-chat chat-name color online] + :accessories [:chevron] + :on-press #(hide-sheet-and-dispatch [:show-group-chat-profile chat-id])}] + [list-item/list-item + {:theme :action + :title :t/clear-history + :accessibility-label :clear-history-button + :icon :main-icons/close + :on-press #(hide-sheet-and-dispatch [:chat.ui/clear-history-pressed chat-id])}] + [list-item/list-item + {:theme :action + :title :t/fetch-history + :accessibility-label :fetch-history-button + :icon :main-icons/arrow-down + :on-press #(hide-sheet-and-dispatch [:chat.ui/fetch-history-pressed chat-id])}] + [list-item/list-item + {:theme :action-destructive + :title :t/delete-chat + :accessibility-label :delete-chat-button + :icon :main-icons/delete + :on-press #(hide-sheet-and-dispatch [:group-chats.ui/remove-chat-pressed chat-id])}]]) + +(defn actions [{:keys [public? group-chat] + :as current-chat}] + (cond + public? [public-chat-actions current-chat] + group-chat [group-chat-actions current-chat] + :else [chat-actions current-chat])) + +(defn options [chat-id message-id] + (fn [] + [react/view + [react/i18n-text {:style sheets.styles/sheet-text :key :message-not-sent}] + [list-item/list-item + {:theme :action + :title :t/resend-message + :icon :main-icons/refresh + :accessibility-label :resend-message-button + :on-press #(hide-sheet-and-dispatch [:chat.ui/resend-message chat-id message-id])}] + [list-item/list-item + {:theme :action-destructive + :title :t/delete-message + :icon :main-icons/delete + :accessibility-label :delete-transaction-button + :on-press #(hide-sheet-and-dispatch [:chat.ui/delete-message chat-id message-id])}]])) + +(defn message-long-press [{:keys [message-id content identicon from outgoing]}] + (fn [] + (let [{:keys [ens-name alias]} @(re-frame/subscribe [:contacts/contact-name-by-identity from])] + [react/view + (when-not outgoing + [list-item/list-item + {:theme :action + :icon (multiaccounts/displayed-photo {:identicon identicon + :public-key from}) + :title [view-profile {:name (or ens-name alias) + :helper :t/view-profile}] + :accessibility-label :view-chat-details-button + :accessories [:chevron] + :on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile from])}]) + [list-item/list-item + {:theme :action + :title :t/message-reply + :icon :main-icons/reply + :on-press #(hide-sheet-and-dispatch [:chat.ui/reply-to-message message-id])}] + [list-item/list-item + {:theme :action + :title :t/sharing-copy-to-clipboard + :icon :main-icons/copy + :on-press (fn [] + (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (react/copy-to-clipboard (:text content)))}] + (when-not platform/desktop? + [list-item/list-item + {:theme :action + :title :t/sharing-share + :icon :main-icons/share + :on-press (fn [] + (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (list-selection/open-share {:message (:text content)}))}])]))) + +(defn sticker-long-press [{:keys [from identicon]}] + (fn [] + (let [{:keys [ens-name alias]} @(re-frame/subscribe [:contacts/contact-name-by-identity from])] + [react/view + [list-item/list-item + {:theme :action + :icon (multiaccounts/displayed-photo {:identicon identicon + :public-key from}) + :title [view-profile {:name (or ens-name alias) + :helper :t/view-profile}] + :accessibility-label :view-chat-details-button + :accessories [:chevron] + :on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile from])}]]))) diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index 5a1b747d17..a7b9c7f970 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -15,7 +15,7 @@ [status-im.ui.components.react :as react] [status-im.ui.components.toolbar.actions :as toolbar.actions] [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.screens.chat.actions :as actions] + [status-im.ui.screens.chat.sheets :as sheets] [status-im.ui.screens.chat.input.input :as input] [status-im.ui.screens.chat.message.datemark :as message-datemark] [status-im.ui.screens.chat.message.gap :as gap] @@ -43,11 +43,6 @@ {:color colors/blue}] [react/i18n-text {:style style/add-contact-text :key :add-to-contacts}]]]) -(defn- on-options - [chat-id chat-name group-chat? public?] - (list-selection/show {:title chat-name - :options (actions/actions group-chat? chat-id public?)})) - (defmulti message-row (fn [{{:keys [type]} :row}] type)) @@ -430,7 +425,10 @@ [{:icon :main-icons/more :icon-opts {:color :black :accessibility-label :chat-menu-button} - :handler #(on-options chat-id chat-name group-chat public?)}]])] + :handler #(re-frame/dispatch [:bottom-sheet/show-sheet + {:content (fn [] + [sheets/actions current-chat]) + :height 256}])}]])] (when-not two-pane-ui-enabled? [connectivity/connectivity-view anim-translate-y]) [connectivity/connectivity-animation-wrapper diff --git a/src/status_im/ui/screens/home/sheet/views.cljs b/src/status_im/ui/screens/home/sheet/views.cljs index ed7418ba07..39fadd47f2 100644 --- a/src/status_im/ui/screens/home/sheet/views.cljs +++ b/src/status_im/ui/screens/home/sheet/views.cljs @@ -45,75 +45,6 @@ (re-frame/dispatch [:bottom-sheet/hide-sheet]) (list-selection/open-share {:message (i18n/label :t/get-status-at)}))}]]]) -(defview public-chat-actions-view [] - (letsubs [{:keys [chat-id]} [:bottom-sheet/options]] - [react/view {:flex 1 :flex-direction :row} - [react/view {:flex 1} - (when-not platform/desktop? - (let [link (universal-links/generate-link :public-chat :external chat-id) - message (i18n/label :t/share-public-chat-text {:link link})] - [list-item/list-item - {:theme :action - :title :t/share-chat - :accessibility-label :share-chat-button - :icon :main-icons/share - :icon-opts {:color colors/blue} - :on-press #(do - (re-frame/dispatch [:bottom-sheet/hide-sheet]) - (list-selection/open-share {:message message}))}])) - [list-item/list-item - {:theme :action-destructive - :title :t/delete-chat - :accessibility-label :delete-chat-button - :icon :main-icons/delete - :on-press #(hide-sheet-and-dispatch [:chat.ui/remove-chat-pressed chat-id])}]]])) - -(defview private-chat-actions-view [] - (letsubs [{:keys [chat-id]} [:bottom-sheet/options]] - [react/view {:flex 1 :flex-direction :row} - [react/view {:flex 1} - [list-item/list-item - {:theme :action - :title :t/view-profile - :accessibility-label :view-profile-button - :icon :main-icons/profile - :on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile chat-id])}] - [list-item/list-item - {:theme :action-destructive - :title :t/delete-chat - :accessibility-label :delete-chat-button - :icon :main-icons/delete - :on-press #(hide-sheet-and-dispatch [:chat.ui/remove-chat-pressed chat-id])}]]])) - -(defview group-chat-actions-view [] - (letsubs [{:keys [chat-id]} [:bottom-sheet/options]] - [react/view {:flex 1 :flex-direction :row} - [react/view {:flex 1} - [list-item/list-item - {:theme :action - :title :t/group-info - :accessibility-label :group-info-button - :icon :main-icons/group-chat - :on-press #(hide-sheet-and-dispatch [:show-group-chat-profile chat-id])}] - [list-item/list-item - {:theme :action-destructive - :title :t/delete-and-leave-group - :accessibility-label :delete-and-leave-group-button - :icon :main-icons/delete - :on-press #(hide-sheet-and-dispatch [:group-chats.ui/remove-chat-pressed chat-id])}]]])) - (def add-new {:content add-new-view - :content-height (if config/group-chat-enabled? 280 220)}) - -(def public-chat-actions - {:content public-chat-actions-view - :content-height 128}) - -(def private-chat-actions - {:content private-chat-actions-view - :content-height 128}) - -(def group-chat-actions - {:content group-chat-actions-view - :content-height 128}) + :content-height (if config/group-chat-enabled? 256 192)}) diff --git a/src/status_im/ui/screens/home/views/inner_item.cljs b/src/status_im/ui/screens/home/views/inner_item.cljs index b71fa2dd6c..ecf24c4874 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -5,6 +5,7 @@ [status-im.i18n :as i18n] [status-im.ui.components.chat-icon.screen :as chat-icon.screen] [status-im.ui.components.common.common :as components.common] + [status-im.ui.screens.chat.sheets :as sheets] [status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.badge :as badge] [status-im.ui.components.react :as react] @@ -55,14 +56,10 @@ color online group-chat public? contact timestamp - last-message]} home-item - private-group? (and group-chat (not public?)) - public-group? (and group-chat public?) - truncated-chat-name (utils/truncate-str chat-name 30) - chat-actions (cond - (and group-chat public?) :public-chat-actions - (and group-chat (not public?)) :group-chat-actions - :else :private-chat-actions)] + last-message]} home-item + private-group? (and group-chat (not public?)) + public-group? (and group-chat public?) + truncated-chat-name (utils/truncate-str chat-name 30)] [list-item/list-item {:icon [chat-icon.screen/chat-icon-view-chat-list contact group-chat truncated-chat-name color online false] @@ -86,4 +83,7 @@ (re-frame/dispatch [:dismiss-keyboard]) (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id]) (re-frame/dispatch [:chat.ui/mark-messages-seen :chat])) - :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet chat-actions {:chat-id chat-id}])}])) + :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet + {:content (fn [] + [sheets/actions home-item]) + :height 256}])}])) diff --git a/src/status_im/ui/screens/profile/group_chat/views.cljs b/src/status_im/ui/screens/profile/group_chat/views.cljs index 17c99b6cd6..f625159b5b 100644 --- a/src/status_im/ui/screens/profile/group_chat/views.cljs +++ b/src/status_im/ui/screens/profile/group_chat/views.cljs @@ -89,7 +89,7 @@ {:title :t/clear-history :icon :main-icons/close :theme :action - :on-press #(re-frame/dispatch [:chat.ui/clear-history-pressed]) + :on-press #(re-frame/dispatch [:chat.ui/clear-history-pressed chat-id]) :accessibility-label :clear-history-button}] [list-item/list-item {:title :t/delete-chat diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index feed75e74a..1503cdae42 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -62,21 +62,12 @@ (= view :add-new) (merge home.sheet/add-new) - (= view :public-chat-actions) - (merge home.sheet/public-chat-actions) - (= view :keycard.login/more) (merge keycard/more-sheet) (= view :learn-more) (merge about-app/learn-more) - (= view :private-chat-actions) - (merge home.sheet/private-chat-actions) - - (= view :group-chat-actions) - (merge home.sheet/group-chat-actions) - (= view :recover-sheet) (merge (recover.views/bottom-sheet))) height-atom (reagent/atom (if (:content-height opts) (:content-height opts) nil))]