From 043e218320a2401087e928d6f3eedfc0a539a661 Mon Sep 17 00:00:00 2001 From: John Ngei Date: Mon, 9 Jan 2023 16:36:17 +0300 Subject: [PATCH] show selected list item context actions view (#14676) * show selected list item context actions view * show selected list item context actions view * fixed showing thumnails on communities --- .../community/community_list_view.cljs | 99 +++++++------------ src/quo2/components/community/icon.cljs | 2 +- src/quo2/components/community/style.cljs | 23 ++--- .../common/bottom_sheet/styles.cljs | 37 +++++-- src/status_im2/common/bottom_sheet/view.cljs | 41 ++++---- .../communities/home/actions/view.cljs | 6 +- .../contexts/communities/home/view.cljs | 14 +-- src/status_im2/subs/communities.cljs | 2 +- translations/en.json | 2 +- 9 files changed, 113 insertions(+), 113 deletions(-) diff --git a/src/quo2/components/community/community_list_view.cljs b/src/quo2/components/community/community_list_view.cljs index d22724e30a..1c4d3cb527 100644 --- a/src/quo2/components/community/community_list_view.cljs +++ b/src/quo2/components/community/community_list_view.cljs @@ -5,19 +5,8 @@ [quo2.components.icon :as icons] [quo2.components.markdown.text :as text] [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [react-native.fast-image :as fast-image])) - -(defn community-icon-view - [community-icon] - [rn/view - {:width 32 - :height 32} - [fast-image/fast-image - {:source {:uri community-icon} - :style {:height 32 - :border-radius 16 - :width 32}}]]) + [quo2.components.community.icon :as community-icon] + [react-native.core :as rn])) (defn notification-view [{:keys [muted? @@ -54,27 +43,18 @@ unread-messages? unread-mentions-count community-icon - tokens - background-color]}] + tokens]}] [rn/view {:style (merge (style/community-card 16) - {:margin-bottom 12 - :margin-horizontal 20})} + {:margin-bottom 12})} [rn/touchable-highlight (merge {:style {:height 56 :border-radius 16}} props) [rn/view {:flex 1} - [rn/view - {:flex-direction :row - :border-radius 16 - :padding-horizontal 12 - :align-items :center - :padding-vertical 8 - :background-color background-color} - [rn/view] - (when community-icon - [community-icon-view community-icon]) + [rn/view (style/list-info-container) + [community-icon/community-icon + {:images community-icon} 32] [rn/view {:flex 1 :margin-horizontal 12} @@ -109,39 +89,36 @@ community-icon tokens locked?]}] - [rn/view {:margin-bottom 20} - [rn/touchable-highlight - (merge {:underlay-color colors/primary-50-opa-5 - :style {:border-radius 12}} - props) - [rn/view {:flex 1} + [rn/touchable-highlight + (merge {:underlay-color (colors/theme-colors + colors/neutral-5 + colors/neutral-95) + :style {:border-radius 12}} + props) + [rn/view {:flex 1} + [rn/view (style/membership-info-container) + [community-icon/community-icon + {:images community-icon} 32] [rn/view - {:flex-direction :row - :border-radius 16 - :align-items :center} + {:flex 1 + :margin-left 12 + :justify-content :center} + [text/text + {:accessibility-label :chat-name-text + :number-of-lines 1 + :ellipsize-mode :tail + :weight :semi-bold + :size :paragraph-1} + name]] - (when community-icon - [community-icon-view community-icon]) - [rn/view - {:flex 1 - :margin-left 12 - :justify-content :center} - [text/text - {:accessibility-label :chat-name-text - :number-of-lines 1 - :ellipsize-mode :tail - :weight :semi-bold - :size :paragraph-1} - name]] - - [rn/view - {:justify-content :center - :margin-right 16} - (if (= status :gated) - [community-view/permission-tag-container - {:locked? locked? - :tokens tokens}] - [notification-view - {:muted? muted? - :unread-mentions-count unread-mentions-count - :unread-messages? unread-messages?}])]]]]]) + [rn/view + {:justify-content :center + :margin-right 16} + (if (= status :gated) + [community-view/permission-tag-container + {:locked? locked? + :tokens tokens}] + [notification-view + {:muted? muted? + :unread-mentions-count unread-mentions-count + :unread-messages? unread-messages?}])]]]]) diff --git a/src/quo2/components/community/icon.cljs b/src/quo2/components/community/icon.cljs index 2d1c653ce3..7da00c8dcf 100644 --- a/src/quo2/components/community/icon.cljs +++ b/src/quo2/components/community/icon.cljs @@ -10,4 +10,4 @@ :border-width 0 :border-color :transparent :width size - :height size}}])) \ No newline at end of file + :height size}}])) diff --git a/src/quo2/components/community/style.cljs b/src/quo2/components/community/style.cljs index 96d375810b..06613dc6dc 100644 --- a/src/quo2/components/community/style.cljs +++ b/src/quo2/components/community/style.cljs @@ -77,19 +77,20 @@ colors/white colors/neutral-90)}) -(defn list-view-content-container +(defn list-info-container [] - {:flex-direction :row - :border-radius 16 - :align-items :center - :background-color (colors/theme-colors - colors/white - colors/neutral-90)}) + {:flex-direction :row + :border-radius 16 + :padding-horizontal 12 + :align-items :center + :padding-vertical 8}) -(defn list-view-chat-icon +(defn membership-info-container [] - {:border-radius 32 - :padding 12}) + {:flex-direction :row + :border-radius 16 + :align-items :center + :height 48}) (defn community-title-description-container [margin-top] @@ -107,4 +108,4 @@ [] {:position :absolute :top 8 - :right 8}) \ No newline at end of file + :right 8}) diff --git a/src/status_im2/common/bottom_sheet/styles.cljs b/src/status_im2/common/bottom_sheet/styles.cljs index 4c1dc45d62..ee2fa05b23 100644 --- a/src/status_im2/common/bottom_sheet/styles.cljs +++ b/src/status_im2/common/bottom_sheet/styles.cljs @@ -22,14 +22,35 @@ :top 0 :background-color colors/neutral-100}) +(def container + {:position :absolute + :left 0 + :right 0 + :top 0 + :bottom 0 + :overflow :hidden}) + +(defn content-style + [insets] + {:position :absolute + :left 0 + :right 0 + :top 0 + :padding-top border-radius + :padding-bottom (:bottom insets)}) + +(defn selected-background + [] + {:border-radius 12 + :padding-left 12 + :margin-horizontal 8 + :margin-bottom 10 + :height 48 + :background-color (colors/theme-colors colors/white colors/neutral-90)}) + (defn background [] - {:position :absolute - :left 0 - :right 0 - :top 0 - :bottom 0 + {:background-color (colors/theme-colors colors/white colors/neutral-95) + :flex 1 :border-top-left-radius border-radius - :border-top-right-radius border-radius - :overflow :hidden - :background-color (colors/theme-colors colors/white colors/neutral-95)}) + :border-top-right-radius border-radius}) diff --git a/src/status_im2/common/bottom_sheet/view.cljs b/src/status_im2/common/bottom_sheet/view.cljs index ab0fa0f456..857be3f22e 100644 --- a/src/status_im2/common/bottom_sheet/view.cljs +++ b/src/status_im2/common/bottom_sheet/view.cljs @@ -91,6 +91,7 @@ visible? :visible? backdrop-dismiss? :backdrop-dismiss? expandable? :expandable? + selected-item :selected-item :or {show-handle? true backdrop-dismiss? true expandable? false}} @@ -107,9 +108,10 @@ (fn [insets] [:f> (fn [] - (let [{window-height :height - window-width :width} + (let [{height :height + window-width :width} (rn/use-window-dimensions) + window-height (if selected-item (- height 72) height) {:keys [keyboard-shown]} (hooks/use-keyboard) bg-height-expanded (- window-height (:top insets)) bg-height (max (min @content-height bg-height-expanded) 200) @@ -205,22 +207,21 @@ {:transform [{:translateY translate-y}]} {:width window-width :height window-height})} - [rn/view {:style (styles/background)} - [rn/keyboard-avoiding-view - {:behaviour (if platform/ios? :padding :height) - :style {:flex 1}} - [rn/view - {:style {:position :absolute - :left 0 - :right 0 - :top 0 - :padding-top styles/border-radius - :padding-bottom (:bottom insets)} - :on-layout (when-not (and - (some? @content-height) - (> @content-height 0)) - on-content-layout)} - children]] + [rn/view {:style styles/container} + (when selected-item + [rn/view {:style (styles/selected-background)} + [selected-item]]) + [rn/view {:style (styles/background)} + [rn/keyboard-avoiding-view + {:behaviour (if platform/ios? :padding :height) + :style {:flex 1}} + [rn/view + {:style (styles/content-style insets) + :on-layout (when-not (and + (some? @content-height) + (> @content-height 0)) + on-content-layout)} + children]] - (when show-handle? - [rn/view {:style (styles/handle)}])]]]]))])])) + (when show-handle? + [rn/view {:style (styles/handle)}])]]]]]))])])) diff --git a/src/status_im2/contexts/communities/home/actions/view.cljs b/src/status_im2/contexts/communities/home/actions/view.cljs index 284e620ea3..c852ca711e 100644 --- a/src/status_im2/contexts/communities/home/actions/view.cljs +++ b/src/status_im2/contexts/communities/home/actions/view.cljs @@ -98,10 +98,8 @@ (i18n/label :t/leave-community)]]]) (defn actions - [] - (let [community-mock (rf/sub [:get-screen-params :community-overview]) ;;TODO stop using mock data and - ;;only pass community id - community (rf/sub [:communities/community (:id community-mock)])] + [id] + (let [community (rf/sub [:communities/community id])] [quo/action-drawer [(get (if (:joined community) (joined-options (:id community)) diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs index 3b48e7cc2d..4f5ad2a704 100644 --- a/src/status_im2/contexts/communities/home/view.cljs +++ b/src/status_im2/contexts/communities/home/view.cljs @@ -16,9 +16,12 @@ (rf/dispatch [:communities/load-category-states id]) (rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:navigate-to-nav2 :community {:community-id id}])) - :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet - {:content (fn [] - [home.actions/actions community-item])}])} + :on-long-press #(rf/dispatch + [:bottom-sheet/show-sheet + {:content (fn [] + [home.actions/actions id]) + :selected-item (fn [] + [quo/communities-membership-list-item {} community-item])}])} community-item])) (defn get-item-layout-js @@ -56,9 +59,8 @@ (let [ids-by-user-involvement (rf/sub [:communities/community-ids-by-user-involvement]) tab @selected-tab] [rn/view - {:style {:padding-left 20 - :padding-right 8 - :padding-vertical 12}} + {:style {:padding-horizontal 20 + :padding-vertical 12}} (case tab :joined [communities-list (:joined ids-by-user-involvement)] diff --git a/src/status_im2/subs/communities.cljs b/src/status_im2/subs/communities.cljs index 611585bb62..75688660fd 100644 --- a/src/status_im2/subs/communities.cljs +++ b/src/status_im2/subs/communities.cljs @@ -137,7 +137,7 @@ :muted? (:muted community) :unread-messages? (pos? (:unviewed-messages-count counts)) :unread-mentions-count (:unviewed-mentions-count counts) - :community-icon (get-in community [:images :thumbnail :uri])}) + :community-icon (:images community)}) (re-frame/reg-sub :communities/home-item diff --git a/translations/en.json b/translations/en.json index cf4cb21b9a..d58fe11d30 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1012,6 +1012,7 @@ "ok-got-it": "Okay, got it", "okay": "Okay", "on": "On", + "only-mentions": "Only @mentions", "open": "Open", "open-home": "Open...", "open-dapp": "Open ÐApp", @@ -1735,7 +1736,6 @@ "sort-communities": "Sort communities", "alphabetically": "Alphabetically", "active-members": "Active members", - "only-mentions": "Only @mentions", "total-members": "Total members", "mutal-contacts": "Mutual contacts", "suggested-price-limit": "Suggested price limit",