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.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?}])]]]]])
|
|
||||||
|
|
|
@ -10,4 +10,4 @@
|
||||||
:border-width 0
|
:border-width 0
|
||||||
:border-color :transparent
|
:border-color :transparent
|
||||||
:width size
|
:width size
|
||||||
:height size}}]))
|
:height size}}]))
|
||||||
|
|
|
@ -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})
|
||||||
|
|
|
@ -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)})
|
|
||||||
|
|
|
@ -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)}])]]]]]))])]))
|
||||||
|
|
|
@ -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))
|
||||||
|
|
|
@ -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)]
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in New Issue