status-im
/
status-react
mirror of https://github.com/status-im/status-react.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
FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
glog: 3a2d032685329b68abb308254142e4c875b6e40d
glog: d93527a855523adb8c113837db4be68fb00e230d
HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@ -772,7 +772,7 @@ SPEC CHECKSUMS:
RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
RNReanimated: 3e375fc41870cc66c5152a38514c450f7adbc3e1
RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f
@ -787,4 +787,4 @@ SPEC CHECKSUMS:
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
(: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
[radius]
{:shadow-offset {:width 0
@ -126,11 +119,6 @@
(when padding?
{:padding-horizontal 12})))
(def token-row-container
{:flex-direction :row
:align-items :center
:margin-bottom 12})
(defn token-row-or-text
[padding?]
(merge
@ -148,3 +136,21 @@
colors/neutral-20
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)))))
(defn memo-icon-fn
([icon-name] (memo-icon-fn icon-name nil))
([icon-name
{:keys [color color-2 no-color
container-style size accessibility-label]
:or {accessibility-label :icon}}]
(let [size (or size 20)]
^{:key icon-name}
(if-let [svg-icon (icons.svg/get-icon icon-name size)]
[svg-icon
{:size size
:color (when (valid-color? color) color)
:color-2 (when (valid-color? color-2) color-2)
:accessibility-label accessibility-label
:style container-style}]
[rn/image
{:style
(merge {:width size
:height size}
[icon-name
{:keys [color color-2 no-color
container-style size accessibility-label]
:or {accessibility-label :icon}}
_]
(let [size (or size 20)]
^{:key icon-name}
(if-let [svg-icon (icons.svg/get-icon icon-name size)]
[svg-icon
{:size size
:color (when (valid-color? color) color)
:color-2 (when (valid-color? color-2) color-2)
:accessibility-label accessibility-label
:style container-style}]
[rn/image
{:style
(merge {:width size
:height size}
(when (not no-color)
{:tint-color (if (and (string? color) (not (string/blank? color)))
color
(colors/theme-colors colors/neutral-100 colors/white))})
(when (not no-color)
{:tint-color (if (and (string? color) (not (string/blank? color)))
color
(colors/theme-colors colors/neutral-100 colors/white))})
container-style)
:accessibility-label accessibility-label
:source (icons/icon-source (str (name icon-name) size))}]))))
container-style)
:accessibility-label accessibility-label
: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.text-combinations.title.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 icon quo2.components.icon/icon)
@ -155,6 +156,7 @@
(def discover-card quo2.components.community.banner.view/view)
(def community-icon quo2.components.community.icon/community-icon)
(def token-requirement-list quo2.components.community.token-gating/token-requirement-list)
(def channel-actions quo2.components.community.channel-actions/channel-actions)
;;;; 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]
{:flex 1
:height (+ overscroll-cover-height cover-height)
:background-color (colors/theme-colors (:light cover-bg-color)
(:dark cover-bg-color))})
:background-color (colors/theme-colors
(colors/custom-color cover-bg-color 50 20)
(colors/custom-color cover-bg-color 50 40))})
(defn header-bottom-part
[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.navigation.style :as navigation.style]
[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 loading-indicator-extra-spacing 250)
@ -171,6 +172,23 @@
platform/android?
(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
[{:keys [chat scroll-y cover-bg-color on-layout shell-animation-complete?]}]
(let [{:keys [chat-id chat-name emoji chat-type
@ -213,7 +231,8 @@
[contact-icon contact]]]
(when bio
[quo/text {:style style/bio}
bio])]]]
bio])
[actions chat-id cover-bg-color]]]]
[loading-view chat-id shell-animation-complete?]]))
(defn list-footer
@ -224,7 +243,6 @@
[{:keys [chat-id invitation-admin]}]
[rn/view
[chat.group/group-chat-footer chat-id invitation-admin]])
(defn footer-on-layout
[e]
(let [height (oops/oget e "nativeEvent.layout.height")
@ -302,8 +320,9 @@
(on-scroll event)))
:style (add-inverted-y-android
{:background-color (if all-loaded?
(colors/theme-colors (:light cover-bg-color)
(:dark cover-bg-color))
(colors/theme-colors
(colors/custom-color cover-bg-color 50 20)
(colors/custom-color cover-bg-color 50 40))
(colors/theme-colors
colors/white
colors/neutral-95))})

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

@ -34,8 +34,8 @@
{:extrapolateLeft "clamp"
:extrapolateRight "extend"})
banner-opacity-animation (reanimated/interpolate scroll-y
[(+ style/navigation-bar-height 50)
(+ style/navigation-bar-height 100)]
[(+ style/navigation-bar-height 150)
(+ style/navigation-bar-height 200)]
[0 1]
{:extrapolateLeft "clamp"
:extrapolateRight "extend"})
@ -106,13 +106,9 @@
(rf/dispatch [:show-bottom-sheet
{:content (fn [] [actions/chat-actions chat true])}]))}
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]]
[pin.banner/banner
[:f>
pin.banner/f-banner
{:chat-id chat-id
:opacity-animation banner-opacity-animation
:all-loaded? all-loaded?
: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.core :as rn]
[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.constants :as constants]
[utils.i18n :as i18n]
[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
[top-offset opacity-animation enabled?]
[reanimated/view {:style (style/blur-container-style top-offset opacity-animation enabled?)}
[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
[{:keys [chat-id opacity-animation all-loaded? top-offset]}]
(let [pinned-message (rf/sub [:chats/last-pinned-message chat-id])
latest-pin-text (message-text pinned-message)
{: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)]
(let [latest-pin-text (rf/sub [:chats/last-pinned-message-text chat-id])
pins-count (rf/sub [:chats/pin-messages-count chat-id])]
[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)}
[quo/banner
{:latest-pin-text latest-pin-text
@ -50,8 +24,3 @@
:on-press (fn []
(rf/dispatch [:dismiss-keyboard])
(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
(:require [quo2.foundations.colors :as colors]
[re-frame.db]
[status-im2.contexts.chat.composer.view :as composer]
(:require [status-im2.contexts.chat.composer.view :as composer]
[status-im2.contexts.chat.messages.contact-requests.bottom-drawer :as
contact-requests.bottom-drawer]
[status-im2.contexts.chat.messages.list.view :as messages.list]
@ -23,11 +21,11 @@
able-to-send-message?]
:as chat} (rf/sub [:chats/current-chat-chat-view])]
[messages.list/messages-list
{:cover-bg-color {:light (colors/custom-color :turquoise 50 20)
:dark (colors/custom-color :turquoise 50 40)}
{:cover-bg-color :turquoise
:chat chat
:header-comp (fn [{:keys [scroll-y shared-all-loaded?]}]
[messages.navigation/navigation-view
[:f>
messages.navigation/f-navigation-view
{:scroll-y scroll-y
:shared-all-loaded? shared-all-loaded?}])
: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-breakdown :as network-breakdown]
[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
{:foundations [{:name :shadows
@ -159,7 +160,11 @@
{:name :token-gating
:options {:insets {:bottom? 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
:options {:topBar {:visible true}}
: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.contexts.chat.messages.list.events :as models.message-list]
[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
"Reduce step which expects the input list of messages to be sorted by clock value.
@ -182,6 +183,30 @@
(fn [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
:chats/pin-messages-count
(fn [[_ chat-id]]