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.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?}])]]]])

View File

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

View File

@ -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})
:right 8})

View File

@ -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})

View File

@ -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)}])]]]]]))])]))

View File

@ -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))

View File

@ -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)]

View File

@ -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

View File

@ -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",