[7715] Feature: Contextual bottom sheet on long press
Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
parent
aa7292d757
commit
4f8399a8fd
|
@ -2038,10 +2038,11 @@
|
||||||
;; bottom-sheet events
|
;; bottom-sheet events
|
||||||
(handlers/register-handler-fx
|
(handlers/register-handler-fx
|
||||||
:bottom-sheet/show-sheet
|
:bottom-sheet/show-sheet
|
||||||
(fn [cofx [_ view]]
|
(fn [cofx [_ view options]]
|
||||||
(bottom-sheet/show-bottom-sheet
|
(bottom-sheet/show-bottom-sheet
|
||||||
cofx
|
cofx
|
||||||
{:view view})))
|
{:view view
|
||||||
|
:options options})))
|
||||||
|
|
||||||
(handlers/register-handler-fx
|
(handlers/register-handler-fx
|
||||||
:bottom-sheet/hide-sheet
|
:bottom-sheet/hide-sheet
|
||||||
|
|
|
@ -52,6 +52,7 @@
|
||||||
;;bottom sheet
|
;;bottom sheet
|
||||||
(reg-root-key-sub :bottom-sheet/show? :bottom-sheet/show?)
|
(reg-root-key-sub :bottom-sheet/show? :bottom-sheet/show?)
|
||||||
(reg-root-key-sub :bottom-sheet/view :bottom-sheet/view)
|
(reg-root-key-sub :bottom-sheet/view :bottom-sheet/view)
|
||||||
|
(reg-root-key-sub :bottom-sheet/options :bottom-sheet/options)
|
||||||
|
|
||||||
;;general
|
;;general
|
||||||
(reg-root-key-sub :network-name :chain)
|
(reg-root-key-sub :network-name :chain)
|
||||||
|
|
|
@ -3,3 +3,4 @@
|
||||||
|
|
||||||
(spec/def :bottom-sheet/show? (spec/nilable boolean?))
|
(spec/def :bottom-sheet/show? (spec/nilable boolean?))
|
||||||
(spec/def :bottom-sheet/view (spec/nilable keyword?))
|
(spec/def :bottom-sheet/view (spec/nilable keyword?))
|
||||||
|
(spec/def :bottom-sheet/options (spec/nilable map?))
|
||||||
|
|
|
@ -3,10 +3,11 @@
|
||||||
[status-im.utils.handlers :as handlers]))
|
[status-im.utils.handlers :as handlers]))
|
||||||
|
|
||||||
(fx/defn show-bottom-sheet
|
(fx/defn show-bottom-sheet
|
||||||
[{:keys [db]} {:keys [view]}]
|
[{:keys [db]} {:keys [view options]}]
|
||||||
{:db (assoc db
|
{:db (assoc db
|
||||||
:bottom-sheet/show? true
|
:bottom-sheet/show? true
|
||||||
:bottom-sheet/view view)})
|
:bottom-sheet/view view
|
||||||
|
:bottom-sheet/options options)})
|
||||||
|
|
||||||
(fx/defn hide-bottom-sheet
|
(fx/defn hide-bottom-sheet
|
||||||
[{:keys [db]}]
|
[{:keys [db]}]
|
||||||
|
|
|
@ -274,6 +274,7 @@
|
||||||
:stickers/packs-pendning
|
:stickers/packs-pendning
|
||||||
:bottom-sheet/show?
|
:bottom-sheet/show?
|
||||||
:bottom-sheet/view
|
:bottom-sheet/view
|
||||||
|
:bottom-sheet/options
|
||||||
:extensions/profile
|
:extensions/profile
|
||||||
:wallet/custom-token-screen]
|
:wallet/custom-token-screen]
|
||||||
:opt-un [::modal
|
:opt-un [::modal
|
||||||
|
|
|
@ -11,8 +11,9 @@
|
||||||
:show-group-chat-profile
|
:show-group-chat-profile
|
||||||
(fn [{:keys [db] :as cofx} [_ chat-id]]
|
(fn [{:keys [db] :as cofx} [_ chat-id]]
|
||||||
(fx/merge cofx
|
(fx/merge cofx
|
||||||
{:db (assoc db
|
{:db (-> db
|
||||||
:new-chat-name (get-in db [:chats chat-id :name]))}
|
(assoc :new-chat-name (get-in db [:chats chat-id :name]))
|
||||||
|
(assoc :current-chat-id chat-id))}
|
||||||
(navigation/navigate-to-cofx :group-chat-profile nil))))
|
(navigation/navigate-to-cofx :group-chat-profile nil))))
|
||||||
|
|
||||||
(handlers/register-handler-fx
|
(handlers/register-handler-fx
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
(ns status-im.ui.screens.home.sheet.views
|
(ns status-im.ui.screens.home.sheet.views
|
||||||
|
(:require-macros [status-im.utils.views :refer [defview letsubs] :as views])
|
||||||
(:require [re-frame.core :as re-frame]
|
(:require [re-frame.core :as re-frame]
|
||||||
[status-im.i18n :as i18n]
|
[status-im.i18n :as i18n]
|
||||||
[status-im.ui.components.action-button.action-button :as action-button]
|
[status-im.ui.components.action-button.action-button :as action-button]
|
||||||
[status-im.ui.components.action-button.styles :as action-button.styles]
|
[status-im.ui.components.action-button.styles :as action-button.styles]
|
||||||
[status-im.ui.components.colors :as colors]
|
[status-im.ui.components.colors :as colors]
|
||||||
[status-im.ui.components.list-selection :as list-selection]
|
[status-im.ui.components.list-selection :as list-selection]
|
||||||
[status-im.ui.components.react :as react]))
|
[status-im.ui.components.react :as react]
|
||||||
|
[status-im.utils.universal-links.core :as universal-links]
|
||||||
|
[status-im.utils.platform :as platform]))
|
||||||
|
|
||||||
(defn hide-sheet-and-dispatch [event]
|
(defn hide-sheet-and-dispatch [event]
|
||||||
(re-frame/dispatch [:bottom-sheet/hide-sheet])
|
(re-frame/dispatch [:bottom-sheet/hide-sheet])
|
||||||
|
@ -49,6 +52,80 @@
|
||||||
(re-frame/dispatch [:bottom-sheet/hide-sheet])
|
(re-frame/dispatch [:bottom-sheet/hide-sheet])
|
||||||
(list-selection/open-share {:message (i18n/label :t/get-status-at)}))}]]])
|
(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 action-button.styles/actions-list
|
||||||
|
(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})]
|
||||||
|
[action-button/action-button
|
||||||
|
{:label (i18n/label :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}))}]))
|
||||||
|
[action-button/action-button
|
||||||
|
{:label (i18n/label :t/delete-chat)
|
||||||
|
:label-style {:color colors/red}
|
||||||
|
:accessibility-label :delete-chat-button
|
||||||
|
:icon :main-icons/delete
|
||||||
|
:icon-opts {:color colors/red}
|
||||||
|
:cyrcle-color colors/red-light
|
||||||
|
: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 action-button.styles/actions-list
|
||||||
|
[action-button/action-button
|
||||||
|
{:label (i18n/label :t/view-profile)
|
||||||
|
:accessibility-label :view-profile-button
|
||||||
|
:icon :main-icons/profile
|
||||||
|
:icon-opts {:color colors/blue}
|
||||||
|
:on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile chat-id])}]
|
||||||
|
[action-button/action-button
|
||||||
|
{:label (i18n/label :t/delete-chat)
|
||||||
|
:label-style {:color colors/red}
|
||||||
|
:accessibility-label :delete-chat-button
|
||||||
|
:icon :main-icons/delete
|
||||||
|
:icon-opts {:color colors/red}
|
||||||
|
:cyrcle-color colors/red-light
|
||||||
|
: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 action-button.styles/actions-list
|
||||||
|
[action-button/action-button
|
||||||
|
{:label (i18n/label :t/group-info)
|
||||||
|
:accessibility-label :group-info-button
|
||||||
|
:icon :main-icons/group-chat
|
||||||
|
:icon-opts {:color colors/blue}
|
||||||
|
:on-press #(hide-sheet-and-dispatch [:show-group-chat-profile chat-id])}]
|
||||||
|
[action-button/action-button
|
||||||
|
{:label (i18n/label :t/delete-and-leave-group)
|
||||||
|
:label-style {:color colors/red}
|
||||||
|
:accessibility-label :delete-and-leave-group-button
|
||||||
|
:icon :main-icons/delete
|
||||||
|
:icon-opts {:color colors/red}
|
||||||
|
:cyrcle-color colors/red-light
|
||||||
|
:on-press #(hide-sheet-and-dispatch [:group-chats.ui/remove-chat-pressed chat-id])}]]]))
|
||||||
|
|
||||||
(def add-new
|
(def add-new
|
||||||
{:content add-new-view
|
{:content add-new-view
|
||||||
:content-height 320})
|
:content-height 320})
|
||||||
|
|
||||||
|
(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})
|
||||||
|
|
|
@ -104,7 +104,7 @@
|
||||||
(views/letsubs [logging-in? [:accounts/login]]
|
(views/letsubs [logging-in? [:accounts/login]]
|
||||||
[react/view styles/action-button-container
|
[react/view styles/action-button-container
|
||||||
[react/touchable-highlight {:accessibility-label :new-chat-button
|
[react/touchable-highlight {:accessibility-label :new-chat-button
|
||||||
:on-press (when-not logging-in? #(re-frame/dispatch [:bottom-sheet/show-sheet :add-new]))}
|
:on-press (when-not logging-in? #(re-frame/dispatch [:bottom-sheet/show-sheet :add-new {}]))}
|
||||||
[react/view styles/action-button
|
[react/view styles/action-button
|
||||||
(if logging-in?
|
(if logging-in?
|
||||||
[react/activity-indicator {:color :white
|
[react/activity-indicator {:color :white
|
||||||
|
|
|
@ -87,16 +87,21 @@
|
||||||
:accessibility-label :chat-name-text}
|
:accessibility-label :chat-name-text}
|
||||||
chat-name]]]))
|
chat-name]]]))
|
||||||
|
|
||||||
(defn home-list-chat-item-inner-view
|
(defn home-list-item [[home-item-id home-item]]
|
||||||
[{:keys [chat-id chat-name
|
(let [{:keys [chat-id chat-name
|
||||||
name color online
|
name color online
|
||||||
group-chat public?
|
group-chat public?
|
||||||
public-key contact
|
public-key contact
|
||||||
timestamp
|
timestamp
|
||||||
last-message-content
|
last-message-content
|
||||||
last-message-content-type]}]
|
last-message-content-type]} home-item
|
||||||
(let [truncated-chat-name (utils/truncate-str chat-name 30)]
|
truncated-chat-name (utils/truncate-str chat-name 30)
|
||||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])}
|
chat-actions (cond
|
||||||
|
(and group-chat public?) :public-chat-actions
|
||||||
|
(and group-chat (not public?)) :group-chat-actions
|
||||||
|
:else :private-chat-actions)]
|
||||||
|
[react/touchable-highlight {:on-press #(re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])
|
||||||
|
:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet chat-actions {:chat-id chat-id}])}
|
||||||
[react/view styles/chat-container
|
[react/view styles/chat-container
|
||||||
[react/view styles/chat-icon-container
|
[react/view styles/chat-icon-container
|
||||||
[chat-icon.screen/chat-icon-view-chat-list contact group-chat truncated-chat-name color online false]]
|
[chat-icon.screen/chat-icon-view-chat-list contact group-chat truncated-chat-name color online false]]
|
||||||
|
@ -109,15 +114,3 @@
|
||||||
[message-content-text {:content last-message-content
|
[message-content-text {:content last-message-content
|
||||||
:content-type last-message-content-type}]
|
:content-type last-message-content-type}]
|
||||||
[unviewed-indicator chat-id]]]]]))
|
[unviewed-indicator chat-id]]]]]))
|
||||||
|
|
||||||
(defn home-list-item [[home-item-id home-item]]
|
|
||||||
(let [delete-action (if (and (:group-chat home-item)
|
|
||||||
(not (:public? home-item)))
|
|
||||||
:group-chats.ui/remove-chat-pressed
|
|
||||||
:chat.ui/remove-chat)]
|
|
||||||
[list/deletable-list-item {:type :chats
|
|
||||||
:id home-item-id
|
|
||||||
:on-delete #(do
|
|
||||||
(re-frame/dispatch [:set-swipe-position :chats home-item-id false])
|
|
||||||
(re-frame/dispatch [delete-action home-item-id]))}
|
|
||||||
[home-list-chat-item-inner-view home-item]]))
|
|
|
@ -31,7 +31,16 @@
|
||||||
(merge mobile-network-settings/offline-sheet)
|
(merge mobile-network-settings/offline-sheet)
|
||||||
|
|
||||||
(= view :add-new)
|
(= view :add-new)
|
||||||
(merge home.sheet/add-new))]
|
(merge home.sheet/add-new)
|
||||||
|
|
||||||
|
(= view :public-chat-actions)
|
||||||
|
(merge home.sheet/public-chat-actions)
|
||||||
|
|
||||||
|
(= view :private-chat-actions)
|
||||||
|
(merge home.sheet/private-chat-actions)
|
||||||
|
|
||||||
|
(= view :group-chat-actions)
|
||||||
|
(merge home.sheet/group-chat-actions))]
|
||||||
|
|
||||||
[bottom-sheet/bottom-sheet opts])))
|
[bottom-sheet/bottom-sheet opts])))
|
||||||
|
|
||||||
|
|
|
@ -31,6 +31,7 @@
|
||||||
"done": "Done",
|
"done": "Done",
|
||||||
"remove-from-contacts": "Remove from contacts",
|
"remove-from-contacts": "Remove from contacts",
|
||||||
"delete-chat": "Delete chat",
|
"delete-chat": "Delete chat",
|
||||||
|
"delete-and-leave-group": "Delete and leave group",
|
||||||
"new-group-chat": "New group chat",
|
"new-group-chat": "New group chat",
|
||||||
"edit-chats": "Edit chats",
|
"edit-chats": "Edit chats",
|
||||||
"sign-in": "Sign in",
|
"sign-in": "Sign in",
|
||||||
|
|
Loading…
Reference in New Issue