status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add privacy options component (#14500)

This commit is contained in:
Guilherme Devincenzi 2022-12-19 19:12:58 +00:00 committed by GitHub
parent dbd61a34a0
commit 003b0ffb1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 258 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/quo2/components/settings/privacy_option.cljs Normal file
View File

@ -0,0 +1,63 @@
(ns quo2.components.settings.privacy-option
(:require [react-native.core :as rn]
[quo2.components.icon :as icons]
[quo2.components.selectors.selectors :as selectors]
[quo2.components.settings.style :as style]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]))
(defn- bullet
[]
[rn/view {:style style/bullet-container}
[rn/view {:style (style/bullet)}]])
(defn- unordered-list
[container-style list-items]
[rn/view {:style (merge style/list-container container-style)}
(for [item list-items]
^{:key (hash item)}
[rn/view {:style style/list-item}
[bullet]
[text/text {:size :paragraph-2} item]])])
(defn- card-footer
[{:keys [active? label on-toggle]}]
[rn/touchable-without-feedback
[rn/view {:style (style/card-footer)}
[rn/view {:style style/card-footer-label-container}
[text/text {:size :paragraph-2} label]]
[rn/view {:style style/card-footer-toggle-container}
[selectors/toggle {:disabled? (not active?)
:on-change on-toggle}]]]])
(defn- selection-indicator
[active?]
[rn/view {:style (style/selection-indicator-container active?)}
[rn/view {:style (style/selection-indicator active?)}]])
(defn- card-header
[{:keys [icon label active?]}]
[rn/view {:style style/card-header-container}
[icons/icon icon {:size 20
:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
[rn/view {:style style/card-header-label-container}
[text/text {:weight :semi-bold} label]]
[selection-indicator active?]])
(defn card
[{:keys [active? header footer list-items icon on-select on-toggle]
:or {icon :i/world
active? false}}]
[rn/touchable-without-feedback
{:on-press on-select
:accessibility-label :privacy-option-card
:testID :privacy-option-card}
[rn/view (style/privacy-option-card active?)
[card-header {:active? active?
:icon icon
:label header}]
[unordered-list (when-not footer {:margin-bottom 8}) list-items]
(when footer
[card-footer {:active? active?
:label footer
:on-toggle on-toggle}])]])

93
src/quo2/components/settings/style.cljs Normal file
View File

@ -0,0 +1,93 @@
(ns quo2.components.settings.style
(:require [quo2.foundations.colors :as colors]))
(def bullet-container
{:width 20
:height 20
:margin-right 8
:align-self :flex-start})
(defn bullet
[]
{:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
:border-radius 100
:width 8
:height 8
:position :absolute
:left 6
:top 6})
(def list-container
{:margin-right 12})
(def list-item
{:flex 1
:flex-direction :row
:align-items :center
:padding-vertical 6
:padding-horizontal 12})
(defn selection-indicator-container
[active?]
{:height 20
:width 20
:border-radius 20
:border-width 1
:border-color (if active?
(colors/theme-colors colors/primary-50 colors/primary-60)
(colors/theme-colors colors/neutral-20 colors/neutral-80))})
(defn selection-indicator
[active?]
{:margin-left :auto
:height 14
:width 14
:background-color (if active?
(colors/theme-colors colors/primary-50 colors/primary-60)
(colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40))
:border-radius 20
:margin-right :auto
:margin-top :auto
:margin-bottom :auto})
(def card-footer-label-container
{:flex 0.9
:margin-left 16})
(def card-footer-toggle-container
{:flex 0.1
:margin-horizontal 12
:align-self :center})
(defn card-footer
[]
{:flex 1
:flex-direction :row
:justify-content :space-between
:margin-horizontal 12
:margin-top 8
:margin-bottom 12
:padding-vertical 12
:border-radius 12
:border-width 1
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-90)
:border-color (colors/theme-colors colors/neutral-10 colors/neutral-80)})
(def card-header-container
{:flex-direction :row
:align-items :center
:padding-top 12
:padding-bottom 8
:padding-horizontal 12})
(def card-header-label-container
{:flex 1
:margin-left 4})
(defn privacy-option-card
[active?]
{:border-radius 16
:border-width 1
:border-color (if active?
(colors/theme-colors colors/primary-50 colors/primary-60)
(colors/theme-colors colors/neutral-10 colors/neutral-80))})

4
src/quo2/core.cljs
View File

@ -42,6 +42,7 @@
quo2.components.navigation.page-nav
quo2.components.selectors.disclaimer
quo2.components.selectors.selectors
quo2.components.settings.privacy-option
quo2.components.loaders.skeleton))
(def button quo2.components.buttons.button/button)
@ -106,3 +107,6 @@
(def activity-log quo2.components.notifications.activity-log.view/view)
(def info-count quo2.components.notifications.info-count/info-count)
(def notification-dot quo2.components.notifications.notification-dot/notification-dot)
;;;; SETTINGS
(def privacy-option quo2.components.settings.privacy-option/card)

4
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -37,6 +37,7 @@
[status-im2.contexts.quo-preview.reactions.react :as react]
[status-im2.contexts.quo-preview.selectors.disclaimer :as disclaimer]
[status-im2.contexts.quo-preview.selectors.selectors :as selectors]
[status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option]
[status-im2.contexts.quo-preview.switcher.switcher-cards :as switcher-cards]
[status-im2.contexts.quo-preview.navigation.top-nav :as top-nav]
[status-im2.contexts.quo-preview.navigation.bottom-nav-tab :as bottom-nav-tab]
@ -172,6 +173,9 @@
{:name :selectors
:insets {:top false}
:component selectors/preview-selectors}]
:settings [{:name :privacy-option
:insets {:top false}
:component privacy-option/preview-options}]
:tabs [{:name :segmented
:insets {:top false}
:component segmented/preview-segmented}

94
src/status_im2/contexts/quo_preview/settings/privacy_option.cljs Normal file
View File

@ -0,0 +1,94 @@
(ns status-im2.contexts.quo-preview.settings.privacy-option
(:require [reagent.core :as reagent]
[react-native.core :as rn]
[quo2.foundations.colors :as colors]
[quo2.core :as quo]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Header:"
:key :header
:type :text}
{:label "Footer:"
:key :footer
:type :text}
{:label "Line 1:"
:key :li1
:type :text}
{:label "Line 2:"
:key :li2
:type :text}
{:label "Line 3:"
:key :li3
:type :text}])
(defn cool-preview
[]
(let [state (reagent/atom {:selected :contacts
:header "header"
:footer "footer"
:li1 "line item 1"
:li2 "line item 2"
:li3 "line item 3"})]
(fn []
(let [header (:header @state)
footer (:footer @state)
list-items (->> (select-keys @state [:li1 :li2 :li3])
vals
(remove empty?))]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:margin-horizontal 20
:padding 16
:flex 1}
[rn/view {:margin-vertical 2}
[quo/text {:size :paragraph-2} "Dynamic sample"]]
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:margin-vertical 8}
[quo/privacy-option
(cond-> {:on-select #(swap! state assoc :selected :preview)
:on-toggle #(js/alert "dynamic card toggled")
:active? (= :preview (:selected @state))}
(not-empty header) (assoc :header header)
(not-empty footer) (assoc :footer footer)
(not-empty list-items) (assoc :list-items list-items))]]
[rn/view {:margin-vertical 2}
[quo/text {:size :paragraph-2} "Static samples"]]
[rn/view {:margin-vertical 8}
[quo/privacy-option {:header "Contacts only"
:icon :i/contact-book
:on-select #(swap! state assoc :selected :contacts)
:active? (= :contacts (:selected @state))
:list-items ["Only add people from your contact list"
"Added members can add their own contacts"
"There is no link or QR for this group"
"No public information available"]}]]
[rn/view {:margin-vertical 8}
[quo/privacy-option {:icon :i/world
:header "Anyone can request to join"
:on-select #(swap! state assoc :selected :anyone)
:on-toggle #(js/alert "card toggled")
:active? (= :anyone (:selected @state))
:footer "Members can approve join requests"
:list-items ["Add people from your contact list"
"Invite prople from outside your contact list"
"Group is shareable via link"
"Group name and number of people is public"]}]]
[rn/view {:margin-vertical 8}
[quo/privacy-option {:icon :i/world
:header "Sample card with very long text to test proper overflow behavior"
:on-select #(swap! state assoc :selected :overflow)
:on-toggle #(js/alert "card toggled")
:active? (= :overflow (:selected @state))
:footer "This footer is exceedingly long to test the overflowing behavior of text in it"
:list-items ["A very, very very long text line that serves to test the overflow behavior of this component"]}]]]]))))
(defn preview-options
[]
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])