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

[Fixes: #14794] Use toast instead of old pin modal 

Instead of using the old modal, we show a toast when the limit of 3
messages is reached.
This commit is contained in:
Andrea Maria Piana 2023-01-20 17:18:36 +00:00
parent d3667ad683
commit 897a5eb201
No known key found for this signature in database
GPG Key ID: AA6CCA6DE0E06424
5 changed files with 11 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/status_im/ui2/screens/chat/pin_limit_popover/style.cljs
View File

@ -1,39 +0,0 @@
(ns status-im.ui2.screens.chat.pin-limit-popover.style
(:require [quo2.foundations.colors :as colors]))
(defn pin-popover
[width]
{:width (- width 16)
:margin-left 8
:background-color (colors/theme-colors colors/neutral-80-opa-90 colors/white-opa-90)
:flex-direction :row
:border-radius 16
:padding 12})
(defn pin-alert-container
[]
{:background-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40)
:width 36
:height 36
:border-radius 18
:justify-content :center
:align-items :center})
(def pin-alert-circle
{:width 18
:height 18
:border-radius 9
:border-color colors/danger-50-opa-40
:border-width 1
:justify-content :center
:align-items :center})
(def view-pinned-messages
{:background-color colors/primary-60
:border-radius 8
:justify-content :center
:align-items :center
:padding-horizontal 8
:padding-vertical 4
:align-self :flex-start
:margin-top 10})

63
src/status_im/ui2/screens/chat/pin_limit_popover/view.cljs
View File

@ -1,63 +0,0 @@
(ns status-im.ui2.screens.chat.pin-limit-popover.view
(:require [utils.i18n :as i18n]
[quo.react :as react]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[status-im.ui2.screens.chat.pin-limit-popover.style :as style]
[utils.re-frame :as rf]))
;; TODO (flexsurfer) this should be an in-app notification component in quo2
;; https://github.com/status-im/status-mobile/issues/14527
(defn pin-limit-popover
[chat-id]
[:f>
(fn []
(let [width (rf/sub [:dimensions/window-width])
show-pin-limit-modal? (rf/sub [:chats/pin-modal chat-id])
opacity-animation (reanimated/use-shared-value 0)
z-index-animation (reanimated/use-shared-value -1)]
(react/effect!
#(do
(reanimated/set-shared-value opacity-animation
(reanimated/with-timing (if show-pin-limit-modal? 1 0)))
(reanimated/set-shared-value z-index-animation
(reanimated/with-timing (if show-pin-limit-modal? 10 -1)))))
(when show-pin-limit-modal?
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:opacity opacity-animation
:z-index z-index-animation}
(style/pin-popover width))
:accessibility-label :pin-limit-popover}
[rn/view {:style (style/pin-alert-container)}
[rn/view {:style style/pin-alert-circle}
[rn/text {:style {:color colors/danger-50}} "!"]]]
[rn/view {:style {:margin-left 8}}
[quo/text {:weight :semi-bold :color (colors/theme-colors colors/white colors/neutral-100)}
(i18n/label :t/cannot-pin-title)]
[quo/text {:size :paragraph-2 :color (colors/theme-colors colors/white colors/neutral-100)}
(i18n/label :t/cannot-pin-desc)]
[rn/touchable-opacity
{:accessibility-label :view-pinned-messages
:active-opacity 1
:on-press (fn []
(rf/dispatch [:pin-message/hide-pin-limit-modal chat-id])
(rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list
chat-id]))
:style style/view-pinned-messages}
[quo/text {:size :paragraph-2 :weight :medium :color colors/white}
(i18n/label :t/view-pinned-messages)]]]
[rn/touchable-opacity
{:accessibility-label :close-pin-limit-popover
:active-opacity 1
:on-press #(rf/dispatch [:pin-message/hide-pin-limit-modal chat-id])
:style {:position :absolute
:top 16
:right 16}}
[quo/icon :i/close
{:color (colors/theme-colors colors/white colors/neutral-100)
:size 12}]]])))])

16
src/status_im2/common/home/actions/view.cljs
View File

@ -217,17 +217,6 @@
:sub-label nil
:chevron? true}))
;; TODO(OmarBasem): Requires design input.
(defn pinned-messages-entry
[]
(entry {:icon :i/pin
:label (i18n/label :t/pinned-messages)
:on-press #(js/alert "TODO: to be implemented, requires design input")
:danger? false
:accessibility-label :pinned-messages
:sub-label nil
:chevron? true}))
(defn remove-from-contacts-entry
[contact]
(entry {:icon :i/remove-user
@ -383,9 +372,8 @@
[(mark-as-read-entry chat-id)
(mute-chat-entry chat-id)
(notifications-entry false)
(if inside-chat?
(fetch-messages-entry)
(pinned-messages-entry))
(when inside-chat?
(fetch-messages-entry))
(when (or (not group-chat) public?)
(show-qr-entry))
(when-not group-chat

15
src/status_im2/contexts/chat/messages/pin/events.cljs
View File

@ -1,6 +1,9 @@
(ns status-im2.contexts.chat.messages.pin.events
(:require [re-frame.core :as re-frame]
[utils.i18n :as i18n]
[quo2.foundations.colors :as colors]
[status-im2.contexts.chat.messages.list.events :as message-list]
[status-im2.common.toasts.events :as toasts]
[status-im2.constants :as constants]
[status-im.data-store.pin-messages :as data-store.pin-messages]
[status-im.transport.message.protocol :as protocol]
@ -99,10 +102,8 @@
(rf/defn show-pin-limit-modal
{:events [:pin-message/show-pin-limit-modal]}
[{:keys [db]} chat-id]
{:db (assoc-in db [:pin-modal chat-id] true)})
(rf/defn hide-pin-limit-modal
{:events [:pin-message/hide-pin-limit-modal]}
[{:keys [db]} chat-id]
{:db (assoc-in db [:pin-modal chat-id] false)})
[cofx]
(toasts/upsert cofx
{:icon :alert
:icon-color colors/danger-50
:text (i18n/label :t/pin-limit-reached)}))

6
src/status_im2/contexts/chat/messages/view.cljs
View File

@ -11,10 +11,8 @@
contact-requests.bottom-drawer]
[status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
[status-im2.navigation.state :as navigation.state]
[status-im2.common.not-implemented :as not-implemented]
[utils.debounce :as debounce]
[utils.re-frame :as rf]
[status-im.ui2.screens.chat.pin-limit-popover.view :as pin-limit-popover]))
[utils.re-frame :as rf]))
(defn navigate-back-handler
[]
@ -74,8 +72,6 @@
:keyboardVerticalOffset (- (:bottom insets))}
[page-nav]
[pin.banner/banner chat-id]
[not-implemented/not-implemented
[pin-limit-popover/pin-limit-popover chat-id]]
[messages.list/messages-list {:chat chat :show-input? show-input?}]
(cond (and (not show-input?)
contact-request-state)