From 1591a5e2da537a6069518dd053920a22d88a27a8 Mon Sep 17 00:00:00 2001 From: flexsurfer Date: Fri, 23 Jun 2023 13:41:49 +0200 Subject: [PATCH] =?UTF-8?q?[#16157]=20Pinned=20list=20button=20is=20absent?= =?UTF-8?q?=20when=20user=20is=20located=20at=20the=20top=E2=80=A6=20(#163?= =?UTF-8?q?55)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ios/Podfile.lock | 6 +- .../components/community/channel_actions.cljs | 28 +++++++++ src/quo2/components/community/style.cljs | 30 ++++++---- src/quo2/components/icon.cljs | 57 ++++++++++--------- src/quo2/core.cljs | 4 +- .../contexts/chat/messages/list/style.cljs | 5 +- .../contexts/chat/messages/list/view.cljs | 29 ++++++++-- .../chat/messages/navigation/view.cljs | 12 ++-- .../chat/messages/pin/banner/view.cljs | 37 +----------- .../contexts/chat/messages/view.cljs | 10 ++-- .../community/channel_actions.cljs | 30 ++++++++++ src/status_im2/contexts/quo_preview/main.cljs | 9 ++- src/status_im2/subs/chat/messages.cljs | 27 ++++++++- 13 files changed, 184 insertions(+), 100 deletions(-) create mode 100644 src/quo2/components/community/channel_actions.cljs create mode 100644 src/status_im2/contexts/quo_preview/community/channel_actions.cljs diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 5015695ff4..ac9c9ed201 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -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 diff --git a/src/quo2/components/community/channel_actions.cljs b/src/quo2/components/community/channel_actions.cljs new file mode 100644 index 0000000000..1bb0bb19a7 --- /dev/null +++ b/src/quo2/components/community/channel_actions.cljs @@ -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}])])]) diff --git a/src/quo2/components/community/style.cljs b/src/quo2/components/community/style.cljs index 7b7f87263b..ab350d1c11 100644 --- a/src/quo2/components/community/style.cljs +++ b/src/quo2/components/community/style.cljs @@ -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}) diff --git a/src/quo2/components/icon.cljs b/src/quo2/components/icon.cljs index bec86600cd..ca6eba1ec7 100644 --- a/src/quo2/components/icon.cljs +++ b/src/quo2/components/icon.cljs @@ -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?)))) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index cfcc304a6d..98d34fcec7 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -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) diff --git a/src/status_im2/contexts/chat/messages/list/style.cljs b/src/status_im2/contexts/chat/messages/list/style.cljs index 97161988f8..0c9b32a9b1 100644 --- a/src/status_im2/contexts/chat/messages/list/style.cljs +++ b/src/status_im2/contexts/chat/messages/list/style.cljs @@ -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] diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index 454d253e53..59699f65c0 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/src/status_im2/contexts/chat/messages/list/view.cljs @@ -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))}) diff --git a/src/status_im2/contexts/chat/messages/navigation/view.cljs b/src/status_im2/contexts/chat/messages/navigation/view.cljs index f1b12c694d..c670978a2f 100644 --- a/src/status_im2/contexts/chat/messages/navigation/view.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/view.cljs @@ -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]) diff --git a/src/status_im2/contexts/chat/messages/pin/banner/view.cljs b/src/status_im2/contexts/chat/messages/pin/banner/view.cljs index 176808d728..60cdd89d3a 100644 --- a/src/status_im2/contexts/chat/messages/pin/banner/view.cljs +++ b/src/status_im2/contexts/chat/messages/pin/banner/view.cljs @@ -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]) - diff --git a/src/status_im2/contexts/chat/messages/view.cljs b/src/status_im2/contexts/chat/messages/view.cljs index 5b4bbb6ffb..94b419bb90 100644 --- a/src/status_im2/contexts/chat/messages/view.cljs +++ b/src/status_im2/contexts/chat/messages/view.cljs @@ -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]}] diff --git a/src/status_im2/contexts/quo_preview/community/channel_actions.cljs b/src/status_im2/contexts/quo_preview/community/channel_actions.cljs new file mode 100644 index 0000000000..f657260fe8 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/community/channel_actions.cljs @@ -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}]}]]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 0bd6b7d061..514d1b03eb 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -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} diff --git a/src/status_im2/subs/chat/messages.cljs b/src/status_im2/subs/chat/messages.cljs index 187ec4e797..deaca5173f 100644 --- a/src/status_im2/subs/chat/messages.cljs +++ b/src/status_im2/subs/chat/messages.cljs @@ -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]]