The [Cancel] and [Join] buttons are hidden within 'Join Community' overlay (#14971)
* The [Cancel] and [Join] buttons are hidden within 'Join Community' overlay * Lint * Fixes * Lint fix
This commit is contained in:
parent
d1514ec52d
commit
c12cab27f4
|
@ -3,8 +3,7 @@
|
||||||
|
|
||||||
(defn container
|
(defn container
|
||||||
[]
|
[]
|
||||||
{:flex 1
|
{:flex-direction :row
|
||||||
:flex-direction :row
|
|
||||||
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40)
|
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40)
|
||||||
:padding 11
|
:padding 11
|
||||||
:align-self :stretch
|
:align-self :stretch
|
||||||
|
|
|
@ -31,13 +31,13 @@
|
||||||
:overflow :hidden})
|
:overflow :hidden})
|
||||||
|
|
||||||
(defn content-style
|
(defn content-style
|
||||||
[insets]
|
[insets bottom-safe-area-spacing?]
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
:left 0
|
:left 0
|
||||||
:right 0
|
:right 0
|
||||||
:top 0
|
:top 0
|
||||||
:padding-top border-radius
|
:padding-top border-radius
|
||||||
:padding-bottom (:bottom insets)})
|
:padding-bottom (if bottom-safe-area-spacing? (:bottom insets) 0)})
|
||||||
|
|
||||||
(defn selected-background
|
(defn selected-background
|
||||||
[]
|
[]
|
||||||
|
|
|
@ -81,23 +81,25 @@
|
||||||
|
|
||||||
(defn bottom-sheet
|
(defn bottom-sheet
|
||||||
[props children]
|
[props children]
|
||||||
(let [{on-cancel :on-cancel
|
(let [{on-cancel :on-cancel
|
||||||
disable-drag? :disable-drag?
|
disable-drag? :disable-drag?
|
||||||
show-handle? :show-handle?
|
show-handle? :show-handle?
|
||||||
visible? :visible?
|
visible? :visible?
|
||||||
backdrop-dismiss? :backdrop-dismiss?
|
backdrop-dismiss? :backdrop-dismiss?
|
||||||
expandable? :expandable?
|
expandable? :expandable?
|
||||||
selected-item :selected-item
|
bottom-safe-area-spacing? :bottom-safe-area-spacing?
|
||||||
is-initially-expaned? :expanded?
|
selected-item :selected-item
|
||||||
:or {show-handle? true
|
is-initially-expanded? :expanded?
|
||||||
backdrop-dismiss? true
|
:or {show-handle? true
|
||||||
expandable? false
|
backdrop-dismiss? true
|
||||||
is-initially-expaned? false}}
|
expandable? false
|
||||||
|
bottom-safe-area-spacing? true
|
||||||
|
is-initially-expanded? false}}
|
||||||
props
|
props
|
||||||
content-height (reagent/atom nil)
|
content-height (reagent/atom nil)
|
||||||
show-bottom-sheet? (reagent/atom nil)
|
show-bottom-sheet? (reagent/atom nil)
|
||||||
keyboard-was-shown? (reagent/atom false)
|
keyboard-was-shown? (reagent/atom false)
|
||||||
expanded? (reagent/atom is-initially-expaned?)
|
expanded? (reagent/atom is-initially-expanded?)
|
||||||
gesture-running? (reagent/atom false)
|
gesture-running? (reagent/atom false)
|
||||||
reset-atoms (fn []
|
reset-atoms (fn []
|
||||||
(reset! show-bottom-sheet? nil)
|
(reset! show-bottom-sheet? nil)
|
||||||
|
@ -226,7 +228,7 @@
|
||||||
{:behaviour (if platform/ios? :padding :height)
|
{:behaviour (if platform/ios? :padding :height)
|
||||||
:style {:flex 1}}
|
:style {:flex 1}}
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (styles/content-style insets)
|
{:style (styles/content-style insets bottom-safe-area-spacing?)
|
||||||
:on-layout (when-not (and
|
:on-layout (when-not (and
|
||||||
(some? @content-height)
|
(some? @content-height)
|
||||||
(> @content-height 0))
|
(> @content-height 0))
|
||||||
|
|
|
@ -36,8 +36,7 @@
|
||||||
:margin-bottom 20})
|
:margin-bottom 20})
|
||||||
|
|
||||||
(def title-container
|
(def title-container
|
||||||
{:flex 1
|
{:flex-direction :row
|
||||||
:flex-direction :row
|
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:justify-content :space-between})
|
:justify-content :space-between})
|
||||||
|
|
||||||
|
@ -56,10 +55,10 @@
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:margin-right 12})
|
:margin-right 12})
|
||||||
|
|
||||||
(def request-button
|
(defn bottom-container
|
||||||
{:margin-top 32
|
[safe-area-insets]
|
||||||
:margin-bottom 16
|
{:padding-top 32
|
||||||
:flex 1
|
:padding-bottom (:bottom safe-area-insets)
|
||||||
:flex-direction :row
|
:flex-direction :row
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:justify-content :space-evenly})
|
:justify-content :space-evenly})
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
(ns status-im2.contexts.communities.menus.request-to-join.view
|
(ns status-im2.contexts.communities.menus.request-to-join.view
|
||||||
(:require [quo.react-native :as rn]
|
(:require [react-native.core :as rn]
|
||||||
[quo2.core :as quo]
|
[react-native.safe-area :as safe-area]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[utils.i18n :as i18n]
|
|
||||||
[status-im2.contexts.communities.menus.request-to-join.style :as style]
|
[status-im2.contexts.communities.menus.request-to-join.style :as style]
|
||||||
|
[quo2.core :as quo]
|
||||||
|
[utils.i18n :as i18n]
|
||||||
[utils.re-frame :as rf]
|
[utils.re-frame :as rf]
|
||||||
[utils.requests :as requests]))
|
[utils.requests :as requests]))
|
||||||
|
|
||||||
|
@ -73,60 +74,72 @@
|
||||||
:render-fn community-rule-item}])
|
:render-fn community-rule-item}])
|
||||||
|
|
||||||
(defn request-to-join
|
(defn request-to-join
|
||||||
[{:keys [permissions name id images
|
[{:keys [permissions
|
||||||
can-join? can-request-access?
|
name
|
||||||
|
id
|
||||||
|
images
|
||||||
|
can-join?
|
||||||
|
can-request-access?
|
||||||
requested-to-join-at]}]
|
requested-to-join-at]}]
|
||||||
(let [agreed-to-rules? (reagent/atom false)
|
(let [agreed-to-rules? (reagent/atom false)]
|
||||||
is-open? (not= 3 (:access permissions))]
|
[safe-area/consumer
|
||||||
(fn []
|
(fn [insets]
|
||||||
[rn/scroll-view {:style style/page-container}
|
[:f>
|
||||||
[rn/view
|
(fn []
|
||||||
{:style style/title-container}
|
(let [{window-height :height} (rn/use-window-dimensions)
|
||||||
|
is-open? (not= 3 (:access permissions))]
|
||||||
|
[rn/scroll-view {:style {:max-height (- window-height (:top insets))}}
|
||||||
|
[rn/view style/page-container
|
||||||
|
[rn/view
|
||||||
|
{:style style/title-container}
|
||||||
|
|
||||||
[quo/text
|
[quo/text
|
||||||
{:accessibility-label :communities-join-community
|
{:accessibility-label :communities-join-community
|
||||||
:weight :semi-bold
|
:weight :semi-bold
|
||||||
:size :heading-1}
|
:size :heading-1}
|
||||||
(request-to-join-text is-open?)]
|
(request-to-join-text is-open?)]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style style/request-icon}
|
{:style style/request-icon}
|
||||||
[quo/icon :i/info]]]
|
[quo/icon :i/info]]]
|
||||||
[quo/context-tag
|
[quo/context-tag
|
||||||
{:style
|
{:style
|
||||||
{:margin-right :auto
|
{:margin-right :auto
|
||||||
:margin-top 8}}
|
:margin-top 8}}
|
||||||
(:thumbnail images) name]
|
(:thumbnail images) name]
|
||||||
[quo/text
|
[quo/text
|
||||||
{:style {:margin-top 24}
|
{:style {:margin-top 24}
|
||||||
:accessibility-label :communities-rules-title
|
:accessibility-label :communities-rules-title
|
||||||
:weight :semi-bold
|
:weight :semi-bold
|
||||||
:size :paragraph-1}
|
:size :paragraph-1}
|
||||||
(i18n/label :t/community-rules)]
|
(i18n/label :t/community-rules)]
|
||||||
[community-rules-list community-rules]
|
|
||||||
|
|
||||||
[quo/disclaimer
|
[community-rules-list community-rules]
|
||||||
{:accessibility-label :rules-disclaimer-checkbox
|
|
||||||
:container-style {:margin-top 20}
|
[quo/disclaimer
|
||||||
:on-change #(swap! agreed-to-rules? not)}
|
{:accessibility-label :rules-disclaimer-checkbox
|
||||||
(i18n/label :t/accept-community-rules)]
|
:container-style {:margin-top 20}
|
||||||
[rn/view
|
:on-change #(swap! agreed-to-rules? not)}
|
||||||
{:style style/request-button}
|
(i18n/label :t/accept-community-rules)]
|
||||||
[quo/button
|
|
||||||
{:accessibility-label :cancel
|
[rn/view {:style (style/bottom-container insets)}
|
||||||
:on-press #(rf/dispatch [:bottom-sheet/hide])
|
[quo/button
|
||||||
:type :grey
|
{:accessibility-label :cancel
|
||||||
:style style/cancel-button} (i18n/label :t/cancel)]
|
:on-press #(rf/dispatch [:bottom-sheet/hide])
|
||||||
[quo/button
|
:type :grey
|
||||||
{:accessibility-label :join-community-button
|
:style style/cancel-button} (i18n/label :t/cancel)]
|
||||||
:on-press (fn []
|
|
||||||
(if can-join?
|
[quo/button
|
||||||
(do
|
{:accessibility-label :join-community-button
|
||||||
(rf/dispatch [:communities/join id])
|
:on-press (fn []
|
||||||
(rf/dispatch [:bottom-sheet/hide]))
|
(if can-join?
|
||||||
(do (and can-request-access?
|
(do
|
||||||
(not (pos? requested-to-join-at))
|
(rf/dispatch [:communities/join id])
|
||||||
(requests/can-request-access-again? requested-to-join-at))
|
(rf/dispatch [:bottom-sheet/hide]))
|
||||||
(rf/dispatch [:communities/request-to-join id])
|
(do (and can-request-access?
|
||||||
(rf/dispatch [:bottom-sheet/hide]))))
|
(not (pos? requested-to-join-at))
|
||||||
:disabled (not @agreed-to-rules?)
|
(requests/can-request-access-again?
|
||||||
:style {:flex 1}} (request-to-join-text is-open?)]]])))
|
requested-to-join-at))
|
||||||
|
(rf/dispatch [:communities/request-to-join id])
|
||||||
|
(rf/dispatch [:bottom-sheet/hide]))))
|
||||||
|
:disabled (not @agreed-to-rules?)
|
||||||
|
:style {:flex 1}} (request-to-join-text is-open?)]]]]))])]))
|
||||||
|
|
|
@ -119,9 +119,10 @@
|
||||||
[quo/button
|
[quo/button
|
||||||
{:on-press #(rf/dispatch
|
{:on-press #(rf/dispatch
|
||||||
[:bottom-sheet/show-sheet
|
[:bottom-sheet/show-sheet
|
||||||
{:content (fn [] [join-menu/request-to-join
|
{:content (fn [] [join-menu/request-to-join
|
||||||
community])
|
community])
|
||||||
:content-height 300}])
|
:bottom-safe-area-spacing? false
|
||||||
|
:content-height 300}])
|
||||||
:accessibility-label :show-request-to-join-screen-button
|
:accessibility-label :show-request-to-join-screen-button
|
||||||
:override-background-color community-color
|
:override-background-color community-color
|
||||||
:style style/join-button
|
:style style/join-button
|
||||||
|
|
Loading…
Reference in New Issue