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

[#16157] Pinned list button is absent when user is located at the top… (#16355)

This commit is contained in:
flexsurfer 2023-06-23 13:41:49 +02:00 committed by GitHub
parent 3bb3fefea7
commit 1591a5e2da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 184 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ios/Podfile.lock
View File

@ -707,7 +707,7 @@ SPEC CHECKSUMS:
FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991 FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991
FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8 FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
glog: 3a2d032685329b68abb308254142e4c875b6e40d glog: d93527a855523adb8c113837db4be68fb00e230d
HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352 HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8 Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@ -772,7 +772,7 @@ SPEC CHECKSUMS:
RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467 RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071 RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
RNReanimated: 3e375fc41870cc66c5152a38514c450f7adbc3e1 RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8 RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f
@ -787,4 +787,4 @@ SPEC CHECKSUMS:
PODFILE CHECKSUM: a7c3cb360cf217ab90667d67deeab588677d540a PODFILE CHECKSUM: a7c3cb360cf217ab90667d67deeab588677d540a
COCOAPODS: 1.12.0 COCOAPODS: 1.12.1

28
src/quo2/components/community/channel_actions.cljs Normal file
View File

@ -0,0 +1,28 @@
(ns quo2.components.community.channel-actions
(:require [react-native.core :as rn]
[quo2.components.icon :as icons]
[quo2.components.counter.counter :as counter]
[quo2.components.markdown.text :as text]
[quo2.components.community.style :as style]))
(defn channel-action
[{:keys [big? color label counter-value icon on-press accessibility-label]}]
[rn/touchable-opacity
{:on-press on-press
:style (style/channel-action-touch big?)
:accessibility-label accessibility-label}
[rn/view {:style (style/channel-action color)}
[rn/view {:style style/channel-action-row}
[icons/icon icon]
(when counter-value
[counter/counter {:type :secondary} counter-value])]
[text/text {:size :paragraph-1 :weight :medium :number-of-lines 2} label]]])
(defn channel-actions
[{:keys [style actions]}]
[rn/view {:style (merge {:flex-direction :row :flex 1} style)}
(for [action actions]
[:<>
[channel-action action]
(when (not= action (last actions))
[rn/view {:width 16}])])])

30
src/quo2/components/community/style.cljs
View File

@ -1,13 +1,6 @@
(ns quo2.components.community.style (ns quo2.components.community.style
(:require [quo2.foundations.colors :as colors])) (:require [quo2.foundations.colors :as colors]))
(def category-item
{:flex 1
:flex-direction :row
:align-items :center
:height 52
:padding-left 18})
(defn community-card (defn community-card
[radius] [radius]
{:shadow-offset {:width 0 {:shadow-offset {:width 0
@ -126,11 +119,6 @@
(when padding? (when padding?
{:padding-horizontal 12}))) {:padding-horizontal 12})))
(def token-row-container
{:flex-direction :row
:align-items :center
:margin-bottom 12})
(defn token-row-or-text (defn token-row-or-text
[padding?] [padding?]
(merge (merge
@ -148,3 +136,21 @@
colors/neutral-20 colors/neutral-20
colors/neutral-80)}) colors/neutral-80)})
(defn channel-action-touch
[big?]
{:flex 1
:max-width (if big? 216 104)})
(defn channel-action
[color]
{:padding 12
:height 102
:flex 1
:border-radius 16
:background-color (colors/custom-color color 50 10)
:justify-content :space-between})
(def channel-action-row
{:flex-direction :row
:justify-content :space-between
:align-items :center})

57
src/quo2/components/icon.cljs
View File

@ -12,32 +12,37 @@
(not (string/blank? color))))) (not (string/blank? color)))))
(defn memo-icon-fn (defn memo-icon-fn
([icon-name] (memo-icon-fn icon-name nil)) [icon-name
([icon-name {:keys [color color-2 no-color
{:keys [color color-2 no-color container-style size accessibility-label]
container-style size accessibility-label] :or {accessibility-label :icon}}
:or {accessibility-label :icon}}] _]
(let [size (or size 20)] (let [size (or size 20)]
^{:key icon-name} ^{:key icon-name}
(if-let [svg-icon (icons.svg/get-icon icon-name size)] (if-let [svg-icon (icons.svg/get-icon icon-name size)]
[svg-icon [svg-icon
{:size size {:size size
:color (when (valid-color? color) color) :color (when (valid-color? color) color)
:color-2 (when (valid-color? color-2) color-2) :color-2 (when (valid-color? color-2) color-2)
:accessibility-label accessibility-label :accessibility-label accessibility-label
:style container-style}] :style container-style}]
[rn/image [rn/image
{:style {:style
(merge {:width size (merge {:width size
:height size} :height size}
(when (not no-color) (when (not no-color)
{:tint-color (if (and (string? color) (not (string/blank? color))) {:tint-color (if (and (string? color) (not (string/blank? color)))
color color
(colors/theme-colors colors/neutral-100 colors/white))}) (colors/theme-colors colors/neutral-100 colors/white))})
container-style) container-style)
:accessibility-label accessibility-label :accessibility-label accessibility-label
:source (icons/icon-source (str (name icon-name) size))}])))) :source (icons/icon-source (str (name icon-name) size))}])))
(def icon (memoize memo-icon-fn)) (def themed-icon (memoize memo-icon-fn))
(defn icon
([icon-name] (icon icon-name nil))
([icon-name params]
(themed-icon icon-name params (colors/dark?))))

4
src/quo2/core.cljs
View File

@ -88,7 +88,8 @@
quo2.components.tags.token-tag quo2.components.tags.token-tag
quo2.components.text-combinations.title.view quo2.components.text-combinations.title.view
quo2.components.settings.settings-list.view quo2.components.settings.settings-list.view
quo2.components.settings.reorder-item.view)) quo2.components.settings.reorder-item.view
quo2.components.community.channel-actions))
(def text quo2.components.markdown.text/text) (def text quo2.components.markdown.text/text)
(def icon quo2.components.icon/icon) (def icon quo2.components.icon/icon)
@ -155,6 +156,7 @@
(def discover-card quo2.components.community.banner.view/view) (def discover-card quo2.components.community.banner.view/view)
(def community-icon quo2.components.community.icon/community-icon) (def community-icon quo2.components.community.icon/community-icon)
(def token-requirement-list quo2.components.community.token-gating/token-requirement-list) (def token-requirement-list quo2.components.community.token-gating/token-requirement-list)
(def channel-actions quo2.components.community.channel-actions/channel-actions)
;;;; COUNTER ;;;; COUNTER
(def counter quo2.components.counter.counter/counter) (def counter quo2.components.counter.counter/counter)

5
src/status_im2/contexts/chat/messages/list/style.cljs
View File

@ -28,8 +28,9 @@
[cover-bg-color] [cover-bg-color]
{:flex 1 {:flex 1
:height (+ overscroll-cover-height cover-height) :height (+ overscroll-cover-height cover-height)
:background-color (colors/theme-colors (:light cover-bg-color) :background-color (colors/theme-colors
(:dark cover-bg-color))}) (colors/custom-color cover-bg-color 50 20)
(colors/custom-color cover-bg-color 50 40))})
(defn header-bottom-part (defn header-bottom-part
[animation] [animation]

29
src/status_im2/contexts/chat/messages/list/view.cljs
View File

@ -17,7 +17,8 @@
[status-im2.contexts.chat.messages.list.style :as style] [status-im2.contexts.chat.messages.list.style :as style]
[status-im2.contexts.chat.messages.navigation.style :as navigation.style] [status-im2.contexts.chat.messages.navigation.style :as navigation.style]
[status-im2.contexts.chat.composer.constants :as composer.constants] [status-im2.contexts.chat.composer.constants :as composer.constants]
[utils.re-frame :as rf])) [utils.re-frame :as rf]
[utils.i18n :as i18n]))
(defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75) (defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75)
(defonce ^:const loading-indicator-extra-spacing 250) (defonce ^:const loading-indicator-extra-spacing 250)
@ -171,6 +172,23 @@
platform/android? platform/android?
(assoc :scale-y -1))) (assoc :scale-y -1)))
(defn actions
[chat-id cover-bg-color]
(let [latest-pin-text (rf/sub [:chats/last-pinned-message-text chat-id])
pins-count (rf/sub [:chats/pin-messages-count chat-id])]
[quo/channel-actions
{:style {:margin-top 16}
:actions [{:accessibility-label :action-button-pinned
:big? true
:label (or latest-pin-text (i18n/label :t/no-pinned-messages))
:color cover-bg-color
:icon :i/pin
:counter-value pins-count
:on-press (fn []
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:pin-message/show-pins-bottom-sheet
chat-id]))}]}]))
(defn f-list-footer (defn f-list-footer
[{:keys [chat scroll-y cover-bg-color on-layout shell-animation-complete?]}] [{:keys [chat scroll-y cover-bg-color on-layout shell-animation-complete?]}]
(let [{:keys [chat-id chat-name emoji chat-type (let [{:keys [chat-id chat-name emoji chat-type
@ -213,7 +231,8 @@
[contact-icon contact]]] [contact-icon contact]]]
(when bio (when bio
[quo/text {:style style/bio} [quo/text {:style style/bio}
bio])]]] bio])
[actions chat-id cover-bg-color]]]]
[loading-view chat-id shell-animation-complete?]])) [loading-view chat-id shell-animation-complete?]]))
(defn list-footer (defn list-footer
@ -224,7 +243,6 @@
[{:keys [chat-id invitation-admin]}] [{:keys [chat-id invitation-admin]}]
[rn/view [rn/view
[chat.group/group-chat-footer chat-id invitation-admin]]) [chat.group/group-chat-footer chat-id invitation-admin]])
(defn footer-on-layout (defn footer-on-layout
[e] [e]
(let [height (oops/oget e "nativeEvent.layout.height") (let [height (oops/oget e "nativeEvent.layout.height")
@ -302,8 +320,9 @@
(on-scroll event))) (on-scroll event)))
:style (add-inverted-y-android :style (add-inverted-y-android
{:background-color (if all-loaded? {:background-color (if all-loaded?
(colors/theme-colors (:light cover-bg-color) (colors/theme-colors
(:dark cover-bg-color)) (colors/custom-color cover-bg-color 50 20)
(colors/custom-color cover-bg-color 50 40))
(colors/theme-colors (colors/theme-colors
colors/white colors/white
colors/neutral-95))}) colors/neutral-95))})

12
src/status_im2/contexts/chat/messages/navigation/view.cljs
View File

@ -34,8 +34,8 @@
{:extrapolateLeft "clamp" {:extrapolateLeft "clamp"
:extrapolateRight "extend"}) :extrapolateRight "extend"})
banner-opacity-animation (reanimated/interpolate scroll-y banner-opacity-animation (reanimated/interpolate scroll-y
[(+ style/navigation-bar-height 50) [(+ style/navigation-bar-height 150)
(+ style/navigation-bar-height 100)] (+ style/navigation-bar-height 200)]
[0 1] [0 1]
{:extrapolateLeft "clamp" {:extrapolateLeft "clamp"
:extrapolateRight "extend"}) :extrapolateRight "extend"})
@ -106,13 +106,9 @@
(rf/dispatch [:show-bottom-sheet (rf/dispatch [:show-bottom-sheet
{:content (fn [] [actions/chat-actions chat true])}]))} {:content (fn [] [actions/chat-actions chat true])}]))}
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]] [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]]
[:f>
[pin.banner/banner pin.banner/f-banner
{:chat-id chat-id {:chat-id chat-id
:opacity-animation banner-opacity-animation :opacity-animation banner-opacity-animation
:all-loaded? all-loaded? :all-loaded? all-loaded?
:top-offset style/navigation-bar-height}]]])) :top-offset style/navigation-bar-height}]]]))
(defn navigation-view
[props]
[:f> f-navigation-view props])

37
src/status_im2/contexts/chat/messages/pin/banner/view.cljs
View File

@ -3,46 +3,20 @@
[react-native.blur :as blur] [react-native.blur :as blur]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[status-im2.contexts.chat.messages.resolver.message-resolver :as resolver]
[status-im2.contexts.chat.messages.pin.banner.style :as style] [status-im2.contexts.chat.messages.pin.banner.style :as style]
[status-im2.constants :as constants]
[utils.i18n :as i18n]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn message-text
[{:keys [content-type] :as message}]
(cond (= content-type constants/content-type-audio)
(i18n/label :audio-message)
:else
(get-in message [:content :parsed-text])))
(defn f-blur-view (defn f-blur-view
[top-offset opacity-animation enabled?] [top-offset opacity-animation enabled?]
[reanimated/view {:style (style/blur-container-style top-offset opacity-animation enabled?)} [reanimated/view {:style (style/blur-container-style top-offset opacity-animation enabled?)}
[blur/view (style/blur-view-style)]]) [blur/view (style/blur-view-style)]])
(defn blur-view
[top-offset opacity-animation enabled?]
[:f> f-blur-view top-offset opacity-animation enabled?])
(defn f-banner (defn f-banner
[{:keys [chat-id opacity-animation all-loaded? top-offset]}] [{:keys [chat-id opacity-animation all-loaded? top-offset]}]
(let [pinned-message (rf/sub [:chats/last-pinned-message chat-id]) (let [latest-pin-text (rf/sub [:chats/last-pinned-message-text chat-id])
latest-pin-text (message-text pinned-message) pins-count (rf/sub [:chats/pin-messages-count chat-id])]
{:keys [deleted? deleted-for-me?]} pinned-message
pins-count (rf/sub [:chats/pin-messages-count chat-id])
latest-pin-text
(cond deleted? (i18n/label :t/message-deleted-for-everyone)
deleted-for-me? (i18n/label :t/message-deleted-for-you)
(#{constants/content-type-text
constants/content-type-image
constants/content-type-sticker
constants/content-type-emoji}
(:content-type pinned-message))
(resolver/resolve-message latest-pin-text)
:else latest-pin-text)]
[rn/view [rn/view
[blur-view top-offset opacity-animation (> pins-count 0)] [:f> f-blur-view top-offset opacity-animation (> pins-count 0)]
[reanimated/view {:style (style/animated-pinned-banner top-offset all-loaded? opacity-animation)} [reanimated/view {:style (style/animated-pinned-banner top-offset all-loaded? opacity-animation)}
[quo/banner [quo/banner
{:latest-pin-text latest-pin-text {:latest-pin-text latest-pin-text
@ -50,8 +24,3 @@
:on-press (fn [] :on-press (fn []
(rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}]]])) (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}]]]))
(defn banner
[props]
[:f> f-banner props])

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

@ -1,7 +1,5 @@
(ns status-im2.contexts.chat.messages.view (ns status-im2.contexts.chat.messages.view
(:require [quo2.foundations.colors :as colors] (:require [status-im2.contexts.chat.composer.view :as composer]
[re-frame.db]
[status-im2.contexts.chat.composer.view :as composer]
[status-im2.contexts.chat.messages.contact-requests.bottom-drawer :as [status-im2.contexts.chat.messages.contact-requests.bottom-drawer :as
contact-requests.bottom-drawer] contact-requests.bottom-drawer]
[status-im2.contexts.chat.messages.list.view :as messages.list] [status-im2.contexts.chat.messages.list.view :as messages.list]
@ -23,11 +21,11 @@
able-to-send-message?] able-to-send-message?]
:as chat} (rf/sub [:chats/current-chat-chat-view])] :as chat} (rf/sub [:chats/current-chat-chat-view])]
[messages.list/messages-list [messages.list/messages-list
{:cover-bg-color {:light (colors/custom-color :turquoise 50 20) {:cover-bg-color :turquoise
:dark (colors/custom-color :turquoise 50 40)}
:chat chat :chat chat
:header-comp (fn [{:keys [scroll-y shared-all-loaded?]}] :header-comp (fn [{:keys [scroll-y shared-all-loaded?]}]
[messages.navigation/navigation-view [:f>
messages.navigation/f-navigation-view
{:scroll-y scroll-y {:scroll-y scroll-y
:shared-all-loaded? shared-all-loaded?}]) :shared-all-loaded? shared-all-loaded?}])
:footer-comp (fn [{:keys [insets]}] :footer-comp (fn [{:keys [insets]}]

30
src/status_im2/contexts/quo_preview/community/channel_actions.cljs Normal file
View File

@ -0,0 +1,30 @@
(ns status-im2.contexts.quo-preview.community.channel-actions
(:require [react-native.core :as rn]
[quo2.components.community.channel-actions :as channel-actions]))
(defn preview-channel-actions
[]
[rn/view {:flex 1}
[rn/scroll-view {:style {:flex 1 :padding-horizontal 20}}
[channel-actions/channel-actions
{:actions [{:big? true
:label "Pinned Messages"
:color :blue
:icon :i/pin
:counter-value 0}]}]
[rn/view {:height 50}]
[channel-actions/channel-actions
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}]}]
[rn/view {:height 50}]
[channel-actions/channel-actions
{:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}]}]
[rn/view {:height 50}]
[channel-actions/channel-actions
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}
{:label "Something else" :color :blue :icon :i/placeholder}]}]]])

9
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -96,7 +96,8 @@
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
[status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown] [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
[status-im2.contexts.quo-preview.wallet.token-overview :as token-overview] [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
[status-im2.contexts.quo-preview.keycard.keycard :as keycard])) [status-im2.contexts.quo-preview.keycard.keycard :as keycard]
[status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]))
(def screens-categories (def screens-categories
{:foundations [{:name :shadows {:foundations [{:name :shadows
@ -159,7 +160,11 @@
{:name :token-gating {:name :token-gating
:options {:insets {:bottom? true} :options {:insets {:bottom? true}
:topBar {:visible true}} :topBar {:visible true}}
:component token-gating/preview-token-gating}] :component token-gating/preview-token-gating}
{:name :channel-actions
:options {:insets {:bottom? true}
:topBar {:visible true}}
:component channel-actions/preview-channel-actions}]
:counter [{:name :counter :counter [{:name :counter
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component counter/preview-counter} :component counter/preview-counter}

27
src/status_im2/subs/chat/messages.cljs
View File

@ -4,7 +4,8 @@
[status-im2.constants :as constants] [status-im2.constants :as constants]
[status-im2.contexts.chat.messages.list.events :as models.message-list] [status-im2.contexts.chat.messages.list.events :as models.message-list]
[utils.datetime :as datetime] [utils.datetime :as datetime]
[utils.i18n :as i18n])) [utils.i18n :as i18n]
[status-im2.contexts.chat.messages.resolver.message-resolver :as resolver]))
(defn intersperse-datemark (defn intersperse-datemark
"Reduce step which expects the input list of messages to be sorted by clock value. "Reduce step which expects the input list of messages to be sorted by clock value.
@ -182,6 +183,30 @@
(fn [pin-messages _] (fn [pin-messages _]
(last pin-messages))) (last pin-messages)))
(defn message-text
[{:keys [content-type] :as message}]
(cond (= content-type constants/content-type-audio)
(i18n/label :audio-message)
:else
(get-in message [:content :parsed-text])))
(re-frame/reg-sub
:chats/last-pinned-message-text
(fn [[_ chat-id]]
(re-frame/subscribe [:chats/last-pinned-message chat-id]))
(fn [pinned-message _]
(let [latest-pin-text (message-text pinned-message)
{:keys [deleted? deleted-for-me?]} pinned-message]
(cond deleted? (i18n/label :t/message-deleted-for-everyone)
deleted-for-me? (i18n/label :t/message-deleted-for-you)
(#{constants/content-type-text
constants/content-type-image
constants/content-type-sticker
constants/content-type-emoji}
(:content-type pinned-message))
(resolver/resolve-message latest-pin-text)
:else latest-pin-text))))
(re-frame/reg-sub (re-frame/reg-sub
:chats/pin-messages-count :chats/pin-messages-count
(fn [[_ chat-id]] (fn [[_ chat-id]]