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
This commit is contained in:
John Ngei 2023-01-09 16:36:17 +03:00 committed by GitHub
parent 1cdcd298b0
commit 043e218320
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 113 additions and 113 deletions

View File

@ -5,19 +5,8 @@
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [quo2.components.community.icon :as community-icon]
[react-native.fast-image :as fast-image])) [react-native.core :as rn]))
(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}}]])
(defn notification-view (defn notification-view
[{:keys [muted? [{:keys [muted?
@ -54,27 +43,18 @@
unread-messages? unread-messages?
unread-mentions-count unread-mentions-count
community-icon community-icon
tokens tokens]}]
background-color]}]
[rn/view [rn/view
{:style (merge (style/community-card 16) {:style (merge (style/community-card 16)
{:margin-bottom 12 {:margin-bottom 12})}
:margin-horizontal 20})}
[rn/touchable-highlight [rn/touchable-highlight
(merge {:style {:height 56 (merge {:style {:height 56
:border-radius 16}} :border-radius 16}}
props) props)
[rn/view {:flex 1} [rn/view {:flex 1}
[rn/view [rn/view (style/list-info-container)
{:flex-direction :row [community-icon/community-icon
:border-radius 16 {:images community-icon} 32]
: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 [rn/view
{:flex 1 {:flex 1
:margin-horizontal 12} :margin-horizontal 12}
@ -109,39 +89,36 @@
community-icon community-icon
tokens tokens
locked?]}] locked?]}]
[rn/view {:margin-bottom 20} [rn/touchable-highlight
[rn/touchable-highlight (merge {:underlay-color (colors/theme-colors
(merge {:underlay-color colors/primary-50-opa-5 colors/neutral-5
:style {:border-radius 12}} colors/neutral-95)
props) :style {:border-radius 12}}
[rn/view {:flex 1} props)
[rn/view {:flex 1}
[rn/view (style/membership-info-container)
[community-icon/community-icon
{:images community-icon} 32]
[rn/view [rn/view
{:flex-direction :row {:flex 1
:border-radius 16 :margin-left 12
:align-items :center} :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 [rn/view
[community-icon-view community-icon]) {:justify-content :center
[rn/view :margin-right 16}
{:flex 1 (if (= status :gated)
:margin-left 12 [community-view/permission-tag-container
:justify-content :center} {:locked? locked?
[text/text :tokens tokens}]
{:accessibility-label :chat-name-text [notification-view
:number-of-lines 1 {:muted? muted?
:ellipsize-mode :tail :unread-mentions-count unread-mentions-count
:weight :semi-bold :unread-messages? unread-messages?}])]]]])
: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?}])]]]]])

View File

@ -10,4 +10,4 @@
:border-width 0 :border-width 0
:border-color :transparent :border-color :transparent
:width size :width size
:height size}}])) :height size}}]))

View File

@ -77,19 +77,20 @@
colors/white colors/white
colors/neutral-90)}) colors/neutral-90)})
(defn list-view-content-container (defn list-info-container
[] []
{:flex-direction :row {:flex-direction :row
:border-radius 16 :border-radius 16
:align-items :center :padding-horizontal 12
:background-color (colors/theme-colors :align-items :center
colors/white :padding-vertical 8})
colors/neutral-90)})
(defn list-view-chat-icon (defn membership-info-container
[] []
{:border-radius 32 {:flex-direction :row
:padding 12}) :border-radius 16
:align-items :center
:height 48})
(defn community-title-description-container (defn community-title-description-container
[margin-top] [margin-top]
@ -107,4 +108,4 @@
[] []
{:position :absolute {:position :absolute
:top 8 :top 8
:right 8}) :right 8})

View File

@ -22,14 +22,35 @@
:top 0 :top 0
:background-color colors/neutral-100}) :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 (defn background
[] []
{:position :absolute {:background-color (colors/theme-colors colors/white colors/neutral-95)
:left 0 :flex 1
:right 0
:top 0
:bottom 0
:border-top-left-radius border-radius :border-top-left-radius border-radius
:border-top-right-radius border-radius :border-top-right-radius border-radius})
:overflow :hidden
:background-color (colors/theme-colors colors/white colors/neutral-95)})

View File

@ -91,6 +91,7 @@
visible? :visible? visible? :visible?
backdrop-dismiss? :backdrop-dismiss? backdrop-dismiss? :backdrop-dismiss?
expandable? :expandable? expandable? :expandable?
selected-item :selected-item
:or {show-handle? true :or {show-handle? true
backdrop-dismiss? true backdrop-dismiss? true
expandable? false}} expandable? false}}
@ -107,9 +108,10 @@
(fn [insets] (fn [insets]
[:f> [:f>
(fn [] (fn []
(let [{window-height :height (let [{height :height
window-width :width} window-width :width}
(rn/use-window-dimensions) (rn/use-window-dimensions)
window-height (if selected-item (- height 72) height)
{:keys [keyboard-shown]} (hooks/use-keyboard) {:keys [keyboard-shown]} (hooks/use-keyboard)
bg-height-expanded (- window-height (:top insets)) bg-height-expanded (- window-height (:top insets))
bg-height (max (min @content-height bg-height-expanded) 200) bg-height (max (min @content-height bg-height-expanded) 200)
@ -205,22 +207,21 @@
{:transform [{:translateY translate-y}]} {:transform [{:translateY translate-y}]}
{:width window-width {:width window-width
:height window-height})} :height window-height})}
[rn/view {:style (styles/background)} [rn/view {:style styles/container}
[rn/keyboard-avoiding-view (when selected-item
{:behaviour (if platform/ios? :padding :height) [rn/view {:style (styles/selected-background)}
:style {:flex 1}} [selected-item]])
[rn/view [rn/view {:style (styles/background)}
{:style {:position :absolute [rn/keyboard-avoiding-view
:left 0 {:behaviour (if platform/ios? :padding :height)
:right 0 :style {:flex 1}}
:top 0 [rn/view
:padding-top styles/border-radius {:style (styles/content-style insets)
:padding-bottom (:bottom insets)} :on-layout (when-not (and
:on-layout (when-not (and (some? @content-height)
(some? @content-height) (> @content-height 0))
(> @content-height 0)) on-content-layout)}
on-content-layout)} children]]
children]]
(when show-handle? (when show-handle?
[rn/view {:style (styles/handle)}])]]]]))])])) [rn/view {:style (styles/handle)}])]]]]]))])]))

View File

@ -98,10 +98,8 @@
(i18n/label :t/leave-community)]]]) (i18n/label :t/leave-community)]]])
(defn actions (defn actions
[] [id]
(let [community-mock (rf/sub [:get-screen-params :community-overview]) ;;TODO stop using mock data and (let [community (rf/sub [:communities/community id])]
;;only pass community id
community (rf/sub [:communities/community (:id community-mock)])]
[quo/action-drawer [quo/action-drawer
[(get (if (:joined community) [(get (if (:joined community)
(joined-options (:id community)) (joined-options (:id community))

View File

@ -16,9 +16,12 @@
(rf/dispatch [:communities/load-category-states id]) (rf/dispatch [:communities/load-category-states id])
(rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:navigate-to-nav2 :community {:community-id id}])) (rf/dispatch [:navigate-to-nav2 :community {:community-id id}]))
:on-long-press #(rf/dispatch [:bottom-sheet/show-sheet :on-long-press #(rf/dispatch
{:content (fn [] [:bottom-sheet/show-sheet
[home.actions/actions community-item])}])} {:content (fn []
[home.actions/actions id])
:selected-item (fn []
[quo/communities-membership-list-item {} community-item])}])}
community-item])) community-item]))
(defn get-item-layout-js (defn get-item-layout-js
@ -56,9 +59,8 @@
(let [ids-by-user-involvement (rf/sub [:communities/community-ids-by-user-involvement]) (let [ids-by-user-involvement (rf/sub [:communities/community-ids-by-user-involvement])
tab @selected-tab] tab @selected-tab]
[rn/view [rn/view
{:style {:padding-left 20 {:style {:padding-horizontal 20
:padding-right 8 :padding-vertical 12}}
:padding-vertical 12}}
(case tab (case tab
:joined :joined
[communities-list (:joined ids-by-user-involvement)] [communities-list (:joined ids-by-user-involvement)]

View File

@ -137,7 +137,7 @@
:muted? (:muted community) :muted? (:muted community)
:unread-messages? (pos? (:unviewed-messages-count counts)) :unread-messages? (pos? (:unviewed-messages-count counts))
:unread-mentions-count (:unviewed-mentions-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 (re-frame/reg-sub
:communities/home-item :communities/home-item

View File

@ -1012,6 +1012,7 @@
"ok-got-it": "Okay, got it", "ok-got-it": "Okay, got it",
"okay": "Okay", "okay": "Okay",
"on": "On", "on": "On",
"only-mentions": "Only @mentions",
"open": "Open", "open": "Open",
"open-home": "Open...", "open-home": "Open...",
"open-dapp": "Open ÐApp", "open-dapp": "Open ÐApp",
@ -1735,7 +1736,6 @@
"sort-communities": "Sort communities", "sort-communities": "Sort communities",
"alphabetically": "Alphabetically", "alphabetically": "Alphabetically",
"active-members": "Active members", "active-members": "Active members",
"only-mentions": "Only @mentions",
"total-members": "Total members", "total-members": "Total members",
"mutal-contacts": "Mutual contacts", "mutal-contacts": "Mutual contacts",
"suggested-price-limit": "Suggested price limit", "suggested-price-limit": "Suggested price limit",