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:
parent
1cdcd298b0
commit
043e218320
|
@ -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?}])]]]])
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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})
|
||||
|
|
|
@ -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)}])]]]]]))])]))
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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)]
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue