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

new chat fixes and improvements, sheet modal screen improvements (#15993)

This commit is contained in:
flexsurfer 2023-05-23 16:46:16 +02:00 committed by GitHub
parent b1aec54e4c
commit 446d71063c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 196 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/ui2/no-contacts-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
resources/images/ui2/no-contacts-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

6
src/quo2/components/buttons/button.cljs
View File

@ -204,17 +204,13 @@
(when disabled
{:opacity 0.3})))
(defn community-themed?
[type community-color]
(and (= type :community) (string? community-color)))
(defn button
"with label
[button opts \"label\"]
opts
{:type :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
:danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
:size 40/32/24
:size 40 [default] /32/24
:icon true/false
:community-color '#FFFFFF'
:community-text-color '#000000'

7
src/quo2/components/drawers/action_drawers/style.cljs
View File

@ -1,11 +1,10 @@
(ns quo2.components.drawers.action-drawers.style
(:require [quo2.foundations.colors :as colors]))
(def divider
(defn divider
[]
{:border-top-width 1
:border-top-color (colors/theme-colors
colors/neutral-10
colors/neutral-90)
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90)
:margin-top 8
:margin-bottom 7
:align-items :center

8
src/quo2/components/drawers/action_drawers/view.cljs
View File

@ -11,9 +11,10 @@
colors/danger-60
(colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))
(def divider
(defn divider
[]
[rn/view
{:style style/divider
{:style (style/divider)
:accessible true
:accessibility-label :divider}])
@ -30,7 +31,8 @@
:as action-props}]
(when action-props
[:<> {:key label}
(when add-divider? divider)
(when add-divider?
[divider])
[rn/touchable-highlight
{:accessibility-label accessibility-label
:style (style/container sub-label)

3
src/status_im/events.cljs
View File

@ -63,7 +63,8 @@
[react-native.core :as rn]
[react-native.platform :as platform]
status-im2.contexts.chat.home.events
status-im2.contexts.communities.home.events))
status-im2.contexts.communities.home.events
status-im.ui.components.invite.events))
(re-frame/reg-fx
:dismiss-keyboard

2
src/status_im/ui/components/invite/events.cljs
View File

@ -11,7 +11,7 @@
(.share ^js react/sharing (clj->js content))))
(rf/defn share-link
{:events [::share-link]}
{:events [:invite.events/share-link]}
[{:keys [db]}]
(let [{:keys [public-key preferred-name]} (get db :multiaccount)
profile-link (universal-links/generate-link :user

7
src/status_im/ui/components/invite/views.cljs
View File

@ -1,13 +1,12 @@
(ns status-im.ui.components.invite.views
(:require [quo.core :as quo]
[re-frame.core :as re-frame]
[utils.i18n :as i18n]
[status-im.ui.components.invite.events :as invite.events]))
[utils.i18n :as i18n]))
(defn button
[]
[quo/button
{:on-press #(re-frame/dispatch [::invite.events/share-link nil])
{:on-press #(re-frame/dispatch [:invite.events/share-link nil])
:accessibility-label :invite-friends-button}
(i18n/label :t/invite-friends)])
@ -21,7 +20,7 @@
:on-press (fn []
(re-frame/dispatch [:bottom-sheet/hide-old])
(js/setTimeout
#(re-frame/dispatch [::invite.events/share-link nil])
#(re-frame/dispatch [:invite.events/share-link nil])
250))}])

3
src/status_im2/common/bottom_sheet_screen/style.cljs
View File

@ -22,7 +22,8 @@
:border-top-left-radius 20
:border-top-right-radius 20
:flex 1
:overflow :hidden}))
:overflow :hidden
:padding-top 20}))
(def handle-container
{:left 0

35
src/status_im2/common/bottom_sheet_screen/view.cljs
View File

@ -11,10 +11,10 @@
[reagent.core :as reagent]
[utils.re-frame :as rf]))
(def ^:const drag-threshold 100)
(def ^:const drag-threshold 200)
(defn drag-gesture
[translate-y opacity scroll-enabled curr-scroll]
[translate-y opacity scroll-enabled curr-scroll close]
(->
(gesture/gesture-pan)
(gesture/on-start (fn [e]
@ -28,12 +28,10 @@
(reanimated/set-shared-value opacity (- 1 (/ progress 5)))))))
(gesture/on-end (fn [e]
(if (> (oops/oget e "translationY") drag-threshold)
(close)
(do
(reanimated/set-shared-value opacity (reanimated/with-timing-duration 0 100))
(rf/dispatch [:navigate-back]))
(do
(reanimated/set-shared-value opacity (reanimated/with-timing 1))
(reanimated/set-shared-value translate-y (reanimated/with-timing 0))
(reanimated/animate translate-y 0 300)
(reanimated/animate opacity 1 300)
(reset! scroll-enabled true)))))
(gesture/on-finalize (fn [e]
(when (and (>= (oops/oget e "velocityY") 0)
@ -50,17 +48,20 @@
(let [scroll-enabled (reagent/atom true)
curr-scroll (atom 0)]
(fn []
(let [insets (safe-area/get-insets)
padding-top (:top insets)
padding-top (if platform/ios? padding-top (+ padding-top 10))
opacity (reanimated/use-shared-value 0)
translate-y (reanimated/use-shared-value 0)
close (fn []
(reanimated/set-shared-value opacity (reanimated/with-timing-duration 0 100))
(rf/dispatch [:navigate-back]))]
(let [insets (safe-area/get-insets)
{:keys [height]} (rn/get-window)
padding-top (:top insets)
padding-top (if platform/ios? padding-top (+ padding-top 10))
opacity (reanimated/use-shared-value 0)
translate-y (reanimated/use-shared-value height)
close (fn []
(reanimated/animate translate-y height 300)
(reanimated/animate opacity 0 300)
(rf/dispatch [:navigate-back]))]
(rn/use-effect
(fn []
(reanimated/animate-delay opacity 1 (if platform/ios? 300 100))))
(reanimated/animate translate-y 0 300)
(reanimated/animate opacity 1 300)))
(hooks/use-back-handler close)
[rn/view
{:style {:flex 1
@ -68,7 +69,7 @@
(when-not skip-background?
[reanimated/view {:style (style/background opacity)}])
[gesture/gesture-detector
{:gesture (drag-gesture translate-y opacity scroll-enabled curr-scroll)}
{:gesture (drag-gesture translate-y opacity scroll-enabled curr-scroll close)}
[reanimated/view {:style (style/main-view translate-y)}
[rn/view {:style style/handle-container}
[rn/view {:style (style/handle)}]]

11
src/status_im2/common/resources.cljs
View File

@ -1,4 +1,5 @@
(ns status-im2.common.resources)
(ns status-im2.common.resources
(:require [quo2.foundations.colors :as colors]))
(def ui
{:add-new-contact (js/require "../resources/images/ui2/add-contact.png")
@ -20,7 +21,9 @@
:keycard-chip-dark (js/require "../resources/images/ui2/keycard-chip-dark.png")
:keycard-watermark (js/require "../resources/images/ui2/keycard-watermark.png")
:discover (js/require "../resources/images/ui2/discover.png")
:invite-friends (js/require "../resources/images/ui2/invite-friends.png")})
:invite-friends (js/require "../resources/images/ui2/invite-friends.png")
:no-contacts-light (js/require "../resources/images/ui2/no-contacts-light.png")
:no-contacts-dark (js/require "../resources/images/ui2/no-contacts-dark.png")})
(def mock-images
{:coinbase (js/require "../resources/images/mock2/coinbase.png")
@ -62,6 +65,10 @@
[k]
(get ui k))
(defn get-themed-image
[k k2]
(get ui (if (colors/dark?) k k2)))
(defn get-token
[k]
(get tokens k))

22
src/status_im2/contexts/chat/new_chat/styles.cljs Normal file
View File

@ -0,0 +1,22 @@
(ns status-im2.contexts.chat.new-chat.styles
(:require [react-native.safe-area :as safe-area]))
(def contact-selection-heading
{:flex-direction :row
:justify-content :space-between
:align-items :flex-end
:margin-top 24
:margin-bottom 16})
(def chat-button
{:position :absolute
:bottom (+ 12 (safe-area/get-bottom))
:left 20
:right 20})
(defn no-contacts
[]
{:margin-bottom (+ 96 (safe-area/get-bottom))
:flex 1
:justify-content :center
:align-items :center})

109
src/status_im2/contexts/chat/new_chat/view.cljs Normal file
View File

@ -0,0 +1,109 @@
(ns status-im2.contexts.chat.new-chat.view
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[re-frame.core :as re-frame]
[react-native.gesture :as gesture]
[status-im2.constants :as constants]
[utils.i18n :as i18n]
[react-native.core :as rn]
[utils.re-frame :as rf]
[status-im2.common.contact-list.view :as contact-list]
[status-im2.common.resources :as resources]
[status-im2.common.contact-list-item.view :as contact-list-item]
[status-im2.contexts.chat.new-chat.styles :as style]))
(defn- no-contacts-view
[]
[rn/view
{:style (style/no-contacts)}
[rn/image {:source (resources/get-themed-image :no-contacts-dark :no-contacts-light)}]
[quo/text
{:weight :semi-bold
:size :paragraph-1
:style {:margin-bottom 2
:margin-top 12}}
(i18n/label :t/you-have-no-contacts)]
[quo/text
{:weight :regular
:size :label}
(i18n/label :t/dont-yell-at-me)]
[quo/button
{:type :primary
:size 32
:style {:margin-top 20
:margin-bottom 12}
:on-press #(rf/dispatch [:invite.events/share-link])}
(i18n/label :t/invite-friends)]
[quo/button
{:type :grey
:size 32
:on-press #(do
(rf/dispatch [:navigate-back])
(rf/dispatch [:open-modal :new-contact]))}
(i18n/label :t/add-a-contact)]])
(defn contact-item-render
[_]
(fn [{:keys [public-key] :as item}]
(let [user-selected? (rf/sub [:is-contact-selected? public-key])
on-toggle #(if user-selected?
(re-frame/dispatch [:deselect-contact public-key])
(re-frame/dispatch [:select-contact public-key]))]
[contact-list-item/contact-list-item
{:on-press on-toggle
:accessory {:type :checkbox
:checked? user-selected?
:on-check on-toggle}}
item])))
(defn view
[{:keys [scroll-enabled on-scroll close]}]
(let [contacts (rf/sub [:contacts/sorted-and-grouped-by-first-letter])
selected-contacts-count (rf/sub [:selected-contacts-count])
selected-contacts (rf/sub [:group/selected-contacts])
one-contact-selected? (= selected-contacts-count 1)
contacts-selected? (pos? selected-contacts-count)
{:keys [primary-name public-key]} (when one-contact-selected?
(rf/sub [:contacts/contact-by-identity
(first selected-contacts)]))]
[rn/view {:flex 1}
[rn/view {:padding-horizontal 20}
[quo/button {:type :grey :size 32 :icon true :on-press close} :i/close]
[rn/view {:style style/contact-selection-heading}
[quo/text
{:weight :semi-bold
:size :heading-1
:style {:color (colors/theme-colors colors/neutral-100 colors/white)}}
(i18n/label :t/new-chat)]
(when (seq contacts)
[quo/text
{:size :paragraph-2
:weight :regular
:style {:margin-bottom 2
:color (colors/theme-colors colors/neutral-40 colors/neutral-50)}}
(i18n/label :t/selected-count-from-max
{:selected selected-contacts-count
:max constants/max-group-chat-participants})])]]
(if (empty? contacts)
[no-contacts-view]
[gesture/section-list
{:key-fn :title
:sticky-section-headers-enabled false
:sections (rf/sub [:contacts/filtered-active-sections])
:render-section-header-fn contact-list/contacts-section-header
:content-container-style {:padding-bottom 70}
:render-fn contact-item-render
:scroll-enabled @scroll-enabled
:on-scroll on-scroll}])
(when contacts-selected?
[quo/button
{:type :primary
:accessibility-label :next-button
:style style/chat-button
:on-press (fn []
(if one-contact-selected?
(rf/dispatch [:chat.ui/start-chat public-key])
(rf/dispatch [:navigate-to :new-group])))}
(if one-contact-selected?
(i18n/label :t/chat-with {:selected-user primary-name})
(i18n/label :t/setup-group-chat))])]))

2
src/status_im2/contexts/chat/photo_selector/style.cljs
View File

@ -15,7 +15,7 @@
:flex-direction :row
:left 0
:right 0
:top 20
:top 0
:justify-content :center
:z-index 1})

10
src/status_im2/contexts/chat/photo_selector/view.cljs
View File

@ -80,7 +80,7 @@
(inc (utils/first-index #(= (:uri item) (:uri %)) @selected))])])
(defn album-title
[photos? selected temporary-selected insets]
[photos? selected temporary-selected insets close]
(fn []
(let [selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent))]
[rn/touchable-opacity
@ -94,9 +94,7 @@
(do
(reset! temporary-selected @selected)
(rf/dispatch [:open-modal :album-selector {:insets insets}]))
(rf/dispatch [:navigate-back])))}
(close)))}
[quo/text
{:weight :medium
:ellipsize-mode :tail
@ -108,7 +106,7 @@
{:color (colors/theme-colors colors/neutral-100 colors/white)}]]])))
(defn photo-selector
[{:keys [scroll-enabled on-scroll]}]
[{:keys [scroll-enabled on-scroll close]}]
[:f>
(let [temporary-selected (reagent/atom [])
{:keys [insets]} (rf/sub [:get-screen-params])] ; used when switching albums
@ -133,7 +131,7 @@
[rn/view {:style {:flex 1}}
[rn/view
{:style style/buttons-container}
[album-title true selected temporary-selected insets]
[album-title true selected temporary-selected insets close]
[clear-button selected]]
[gesture/flat-list
{:key-fn identity

9
src/status_im2/navigation/core.cljs
View File

@ -110,7 +110,8 @@
;; MODAL
(defn open-modal
[comp]
(let [{:keys [options]} (get views/screens comp)]
(let [{:keys [options]} (get views/screens comp)
sheet? (:sheet? options)]
(if @state/dissmissing
(reset! state/dissmissing comp)
(do
@ -120,10 +121,10 @@
{:component
{:name comp
:id comp
:options (merge (options/statusbar-and-navbar)
(options/default-root)
:options (merge (options/default-root)
(options/statusbar-and-navbar)
options
(when (:sheet? options)
(when sheet?
options/sheet-options))}})))))
(re-frame/reg-fx :open-modal-fx open-modal)

5
src/status_im2/navigation/options.cljs
View File

@ -53,7 +53,6 @@
{:statusBar {:style style}})))
([] (statusbar nil)))
(defn statusbar-and-navbar
([dark?]
(merge (navbar dark?) (statusbar dark?)))
@ -87,7 +86,9 @@
{:layout {:componentBackgroundColor :transparent
:orientation ["portrait"]
:backgroundColor :transparent}
:modalPresentationStyle :overCurrentContext})
:modalPresentationStyle :overCurrentContext
:animations {:showModal {:alpha {:from 1 :to 1 :duration 300}}
:dismissModal {:alpha {:from 1 :to 1 :duration 300}}}})
(def lightbox
{:topBar {:visible false}

7
src/status_im2/navigation/screens.cljs
View File

@ -33,7 +33,8 @@
[status-im2.contexts.syncing.setup-syncing.view :as settings-setup-syncing]
[status-im2.contexts.share.view :as share]
[status-im2.contexts.onboarding.syncing.results.view :as syncing-results]
[status-im2.contexts.onboarding.syncing.progress.view :as syncing-devices]))
[status-im2.contexts.onboarding.syncing.progress.view :as syncing-devices]
[status-im2.contexts.chat.new-chat.view :as new-chat]))
(defn screens
[]
@ -55,6 +56,10 @@
:options {:insets {:top? true}}
:component chat/chat}
{:name :start-a-new-chat
:options {:sheet? true}
:component new-chat/view}
{:name :group-add-manage-members
:options {:sheet? true}
:component group-details/add-manage-members}

3
translations/en.json
View File

@ -2174,5 +2174,6 @@
"you-hold-number-of-hold-tokens-of-these": "You hold {{number-of-hold-tokens}} of these:",
"token-gated-communities": "Token gated communities",
"read-more": "Read more",
"token-gated-communities-info": "Here will be something relevant about this topic. This will help the user get more context and therefore have a better understanding of it."
"token-gated-communities-info": "Here will be something relevant about this topic. This will help the user get more context and therefore have a better understanding of it.",
"dont-yell-at-me": "Don’t yell at me"
}