status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-11 11:34:45 +00:00
Code Issues Projects Releases Wiki Activity

Fix join communities design review bugs

Browse Source 
* fix: join communities design review bugs

* updated design fixes
This commit is contained in:
John Ngei 2023-09-05 15:53:59 +03:00 committed by GitHub
parent 741e40094b
commit 7d1098b5b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 84 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/status_im2/common/scroll_page/style.cljs
View File

@ -67,7 +67,9 @@
:top (- (+ picture-radius picture-border-width)) :top (- (+ picture-radius picture-border-width))
:left (- (/ picture-radius 2) picture-border-width)})) :left (- (/ picture-radius 2) picture-border-width)}))
(def display-picture (defn display-picture
{:border-radius picture-diameter [theme]
:width picture-diameter {:border-radius picture-diameter
:height picture-diameter}) :width picture-diameter
:height picture-diameter
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)})

8
src/status_im2/common/scroll_page/view.cljs
View File

@ -83,7 +83,7 @@
(defn f-display-picture (defn f-display-picture
[scroll-height cover] [scroll-height cover theme]
(let [input-range [0 150] (let [input-range [0 150]
y (reanimated/use-shared-value scroll-height) y (reanimated/use-shared-value scroll-height)
animation (reanimated/interpolate y animation (reanimated/interpolate y
@ -99,12 +99,12 @@
{:style (style/display-picture-container animation)} {:style (style/display-picture-container animation)}
[rn/image [rn/image
{:source cover {:source cover
:style style/display-picture}]])) :style (style/display-picture theme)}]]))
(defn scroll-page (defn scroll-page
[_ _ _] [_ _ _]
(let [scroll-height (reagent/atom negative-scroll-position-0)] (let [scroll-height (reagent/atom negative-scroll-position-0)]
(fn [{:keys [name cover-image logo page-nav-right-section-buttons on-scroll (fn [{:keys [name theme cover-image logo page-nav-right-section-buttons on-scroll
collapsed? collapsed?
height top-nav title-colum background-color navigate-back?]} height top-nav title-colum background-color navigate-back?]}
sticky-header sticky-header
@ -138,5 +138,5 @@
{:style (style/children-container {:border-radius (diff-with-max-min @scroll-height 16 0) {:style (style/children-container {:border-radius (diff-with-max-min @scroll-height 16 0)
:background-color background-color})} :background-color background-color})}
(when (and (not collapsed?) cover-image) (when (and (not collapsed?) cover-image)
[:f> f-display-picture @scroll-height logo]) [:f> f-display-picture @scroll-height logo theme])
children])]]))) children])]])))

4
src/status_im2/contexts/communities/actions/community_rules_list/view.cljs
View File

@ -32,13 +32,13 @@
[rn/view {:style style/community-rule} [rn/view {:style style/community-rule}
[quo/text [quo/text
{:style style/community-rule-index {:style style/community-rule-index
:weight :medium :weight :regular
:size :paragraph-2} :size :paragraph-2}
(str index ". ")] (str index ". ")]
[quo/text [quo/text
{:style style/community-rule-text {:style style/community-rule-text
:accessibility-label :communities-rule-index :accessibility-label :communities-rule-index
:weight :medium :weight :regular
:size :paragraph-2} :size :paragraph-2}
(str title ": " content)]]) (str title ": " content)]])

2
src/status_im2/contexts/communities/actions/generic_menu/view.cljs
View File

@ -12,7 +12,7 @@
[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-2}
title]] title]]
[rn/view {:style style/community-tag} [rn/view {:style style/community-tag}
[quo/context-tag [quo/context-tag

103
src/status_im2/contexts/communities/actions/request_to_join/view.cljs
View File

@ -2,19 +2,12 @@
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.gesture :as gesture] [react-native.gesture :as gesture]
[reagent.core :as reagent]
[status-im2.common.password-authentication.view :as password-authentication] [status-im2.common.password-authentication.view :as password-authentication]
[status-im2.contexts.communities.actions.community-rules-list.view :as community-rules] [status-im2.contexts.communities.actions.community-rules-list.view :as community-rules]
[status-im2.contexts.communities.actions.request-to-join.style :as style] [status-im2.contexts.communities.actions.request-to-join.style :as style]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn request-to-join-text
[open?]
(if open?
(i18n/label :t/join-open-community)
(i18n/label :t/request-to-join)))
(defn join-community-and-navigate-back (defn join-community-and-navigate-back
[id] [id]
(rf/dispatch [:password-authentication/show (rf/dispatch [:password-authentication/show
@ -25,56 +18,46 @@
(defn request-to-join (defn request-to-join
[] []
(let [agreed-to-rules? (reagent/atom false)] (fn []
(fn [] (let [{:keys [name
(let [{:keys [permissions id
name images]} (rf/sub [:get-screen-params])]
id [rn/view {:flex 1}
images]} (rf/sub [:get-screen-params]) [gesture/scroll-view {:style {:flex 1}}
open? (not= 3 (:access permissions))] [rn/view style/page-container
[rn/view {:flex 1} [rn/view {:style style/title-container}
[gesture/scroll-view {:style {:flex 1}} [quo/text
[rn/view style/page-container {:accessibility-label :communities-join-community
[rn/view {:style style/title-container} :weight :semi-bold
[quo/text :size :heading-2}
{:accessibility-label :communities-join-community (i18n/label :t/request-to-join)]]
:weight :semi-bold [rn/view {:style {:margin-right :auto :margin-top 8}}
:size :heading-1} [quo/context-tag
(request-to-join-text open?)]] {:type :community
[rn/view {:style {:margin-right :auto :margin-top 8}} :size 24
[quo/context-tag :community-logo (:thumbnail images)
{:type :community :community-name name}]]
:size 24 [quo/text
:community-logo (:thumbnail images) {:style {:margin-top 24}
:community-name name}]] :accessibility-label :communities-rules-title
[quo/text :weight :semi-bold
{:style {:margin-top 24} :size :paragraph-1}
:accessibility-label :communities-rules-title (i18n/label :t/community-rules)]
:weight :semi-bold [community-rules/view community-rules/standard-rules]
:size :paragraph-1} [rn/view {:style (style/bottom-container)}
(i18n/label :t/community-rules)] [quo/button
[community-rules/view community-rules/standard-rules] {:accessibility-label :cancel
[quo/disclaimer :on-press #(rf/dispatch [:navigate-back])
{:accessibility-label :rules-disclaimer-checkbox :type :grey
:container-style {:margin-top 20} :container-style style/cancel-button}
:on-change #(swap! agreed-to-rules? not) (i18n/label :t/cancel)]
:checked? @agreed-to-rules?} [quo/button
(i18n/label :t/accept-community-rules)] {:accessibility-label :join-community-button
[rn/view {:style (style/bottom-container)} :on-press #(join-community-and-navigate-back id)
[quo/button :container-style {:flex 1}}
{:accessibility-label :cancel (i18n/label :t/request-to-join)]]
:on-press #(rf/dispatch [:navigate-back]) [rn/view {:style style/final-disclaimer-container}
:type :grey [quo/text
:container-style style/cancel-button} {:size :paragraph-2
(i18n/label :t/cancel)] :style style/final-disclaimer-text}
[quo/button (i18n/label :t/request-to-join-disclaimer)]]]]])))
{:accessibility-label :join-community-button
:on-press #(join-community-and-navigate-back id)
:disabled? (not @agreed-to-rules?)
:container-style {:flex 1}}
(request-to-join-text open?)]]
[rn/view {:style style/final-disclaimer-container}
[quo/text
{:size :paragraph-2
:style style/final-disclaimer-text}
(i18n/label :t/request-to-join-disclaimer)]]]]]))))

30
src/status_im2/contexts/communities/discover/view.cljs
View File

@ -2,6 +2,7 @@
(:require [utils.i18n :as i18n] (:require [utils.i18n :as i18n]
[oops.core :as oops] [oops.core :as oops]
[quo2.core :as quo] [quo2.core :as quo]
[quo2.theme :as quo.theme]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -198,7 +199,7 @@
[discover-communities-segments selected-tab true]]))) [discover-communities-segments selected-tab true]])))
(defn discover-screen-content (defn discover-screen-content
[featured-communities] [featured-communities theme]
(let [view-type (reagent/atom :card-view) (let [view-type (reagent/atom :card-view)
selected-tab (reagent/atom :all) selected-tab (reagent/atom :all)
scroll-height (reagent/atom 0) scroll-height (reagent/atom 0)
@ -206,6 +207,7 @@
(fn [] (fn []
[scroll-page/scroll-page [scroll-page/scroll-page
{:name (i18n/label :t/discover-communities) {:name (i18n/label :t/discover-communities)
:theme theme
:on-scroll #(reset! scroll-height %) :on-scroll #(reset! scroll-height %)
:background-color (colors/theme-colors :background-color (colors/theme-colors
colors/white colors/white
@ -223,14 +225,18 @@
featured-communities featured-communities
@view-type]]))) @view-type]])))
(defn discover (defn f-view-internal
[] [{:keys [theme]}]
(rf/dispatch [:fetch-contract-communities]) (let [featured-communities (rf/sub [:communities/featured-contract-communities])]
(fn [] [rn/view
(let [featured-communities (rf/sub {:style (style/discover-screen-container (colors/theme-colors
[:communities/featured-contract-communities])] colors/white
[rn/view colors/neutral-95))}
{:style (style/discover-screen-container (colors/theme-colors [discover-screen-content featured-communities theme]]))
colors/white
colors/neutral-95))}
[discover-screen-content featured-communities]]))) (defn- internal-discover-view
[params]
[:f> f-view-internal params])
(def view (quo.theme/with-theme internal-discover-view))

30
src/status_im2/contexts/communities/overview/view.cljs
View File

@ -99,12 +99,6 @@
(map #(channel-chat-item community-id community-color %)) (map #(channel-chat-item community-id community-color %))
chats))]))]) chats))]))])
(defn request-to-join-text
[is-open?]
(if is-open?
(i18n/label :t/join-open-community)
(i18n/label :t/request-to-join-community)))
(defn get-access-type (defn get-access-type
[access] [access]
(case access (case access
@ -173,13 +167,11 @@
(i18n/label :t/join-open-community)]]))) (i18n/label :t/join-open-community)]])))
(defn join-community (defn join-community
[{:keys [joined can-join? color permissions token-permissions] :as community} [{:keys [joined color permissions token-permissions] :as community}
pending?] pending?]
(let [access-type (get-access-type (:access permissions)) (let [access-type (get-access-type (:access permissions))
unknown-access? (= access-type :unknown-access) unknown-access? (= access-type :unknown-access)
invite-only? (= access-type :invite-only) invite-only? (= access-type :invite-only)]
is-open? (= access-type :open)
node-offline? (and can-join? (not joined) pending?)]
[:<> [:<>
(when-not (or joined pending? invite-only? unknown-access?) (when-not (or joined pending? invite-only? unknown-access?)
(if (seq token-permissions) (if (seq token-permissions)
@ -189,20 +181,14 @@
:accessibility-label :show-request-to-join-screen-button :accessibility-label :show-request-to-join-screen-button
:customization-color color :customization-color color
:icon-left :i/communities} :icon-left :i/communities}
(request-to-join-text is-open?)])) (i18n/label :t/request-to-join-community)]))
(when (and (not (or joined pending? token-permissions)) (not (or is-open? node-offline?))) (when (not (or joined pending? token-permissions))
[quo/text [quo/text
{:size :paragraph-2 {:size :paragraph-2
:style style/review-notice} :weight :regular
(i18n/label :t/community-admins-will-review-your-request)]) :style style/review-notice}
(i18n/label :t/community-admins-will-review-your-request)])]))
(when node-offline?
[quo/information-box
{:type :informative
:icon :i/info
:style {:margin-top 12}}
(i18n/label :t/request-processed-after-node-online)])]))
(defn status-tag (defn status-tag
[pending? joined] [pending? joined]

2
src/status_im2/navigation/screens.cljs
View File

@ -102,7 +102,7 @@
:component find-sync-code/view} :component find-sync-code/view}
{:name :discover-communities {:name :discover-communities
:component communities.discover/discover} :component communities.discover/view}
{:name :community-overview {:name :community-overview
:component communities.overview/overview} :component communities.overview/overview}

2
translations/en.json
View File

@ -1209,7 +1209,7 @@
"request-processed-after-node-online": "Community control node is offline. Request will be processed once it's back online.", "request-processed-after-node-online": "Community control node is offline. Request will be processed once it's back online.",
"request-to-join-disclaimer": "Joining the community will reveal your public addresses to the owner", "request-to-join-disclaimer": "Joining the community will reveal your public addresses to the owner",
"request-to-join": "Request to join", "request-to-join": "Request to join",
"request-to-join-community": "Request to join Community", "request-to-join-community": "Request to join community",
"requested-to-join-community": "You requested to join “{{community}}”", "requested-to-join-community": "You requested to join “{{community}}”",
"request-transaction": "Request transaction", "request-transaction": "Request transaction",
"required-field": "Required field", "required-field": "Required field",