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:
Alexander 2023-02-10 13:59:36 +01:00 committed by GitHub
parent d1514ec52d
commit c12cab27f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 98 additions and 84 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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