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 drawers - action drawers component to quo2 library (#14157)

This commit is contained in:
Jamie Caprani 2022-10-17 11:14:39 +01:00 committed by GitHub
parent 7f54427df4
commit 62c6a0ea72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 132 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons/chevron_right20@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 B

BIN
resources/images/icons/chevron_right20@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 447 B

68
src/quo2/components/drawers/action_drawers.cljs Normal file
View File

@ -0,0 +1,68 @@
(ns quo2.components.drawers.action-drawers
(:require [status-im.ui.components.react :as react]
[quo.react-native :as rn]
[quo2.components.markdown.text :as text]
[quo2.components.icon :as icon]
[quo2.foundations.colors :as colors]))
(defn- get-icon-color [section]
(if (= section :bottom)
(colors/theme-colors colors/danger-50 colors/danger-60)
(colors/theme-colors colors/neutral-50 colors/neutral-40)))
(defn action [section]
(fn [{:keys [icon label sub-label right-icon on-press]}]
[rn/touchable-opacity {:on-press on-press}
[react/view {:style
{:flex 1
:height (if sub-label 56 47)
:margin-horizontal 20
:flex-direction :row}}
[react/view {:style
{:height 20
:margin-top :auto
:margin-bottom :auto
:margin-right 12
:width 20}}
[icon/icon icon
{:color (get-icon-color section)
:size 20}]]
[react/view
{:style
{:flex 1
:justify-content :center}}
[text/text
{:size :paragraph-1
:weight :medium
:style
{:color (when (= section :bottom)
(colors/theme-colors colors/danger-50 colors/danger-60))}}
label]
(when sub-label [text/text
{:size :paragraph-2
:style
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
sub-label])]
(when right-icon
[react/view {:style
{:height 20
:margin-top :auto
:margin-bottom :auto
:width 20}}
[icon/icon right-icon
{:color (get-icon-color section)
:size 20}]])]]))
(defn action-drawer [{:keys [actions actions-with-consequence]}]
[:<> {:style
{:flex 1}}
(map (action :top) actions)
(when actions-with-consequence
[:<>
[rn/view {:style {:border-top-width 1
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
:margin-top 8
:margin-bottom 7
:align-items :center
:flex-direction :row}}]
(map (action :bottom) actions-with-consequence)])])

59
src/quo2/screens/drawers/action_drawers.cljs Normal file
View File

@ -0,0 +1,59 @@
(ns quo2.screens.drawers.action-drawers
(:require [quo.previews.preview :as preview]
[quo.react-native :as rn]
[quo2.components.drawers.action-drawers :as quo2]
[quo2.components.buttons.button :as button]
[quo2.foundations.colors :as colors]
[status-im.utils.handlers :refer [>evt]]
[reagent.core :as reagent]))
(def descriptor [{:label "Muted?"
:key :muted?
:type :boolean}
{:label "Show red options?"
:key :show-red-options?
:type :boolean}])
(def options-with-consequences [{:icon :main-icons2/share-context
:label "Clear history"}])
(defn render-action-sheet [state]
[quo2/action-drawer {:actions-with-consequence (when (:show-red-options? @state) options-with-consequences)
:actions [{:icon :main-icons2/share-context
:label "View channel members and details"}
{:icon :main-icons2/communities
:label "Mark as read"}
{:icon :main-icons2/muted
:label (if (:muted? @state) "Unmute channel" "Mute channel")
:right-icon :main-icons2/chevron-right
:sub-label (when (:muted? @state) "Muted for 15 min")}
{:icon :main-icons2/scanner
:right-icon :main-icons2/chevron-right
:label "Fetch messages"}
{:icon :main-icons2/add-user
:label "Share link to the channel"}]}])
(defn cool-preview []
(let [state (reagent/atom {:muted? true
:show-red-options? true})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 400}
[preview/customizer state descriptor]
[button/button
{:style {:margin-horizontal 40}
:on-press #(>evt [:bottom-sheet/show-sheet
{:content (constantly (render-action-sheet state))
:content-height 300}])}
"See in bottom sheet"]
[rn/view {:padding-vertical 60}
(render-action-sheet state)]]])))
(defn preview-action-drawers []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:nestedScrollEnabled true
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn (fn [_ index] (str "actions-drawers-" index))}]])

4
src/quo2/screens/main.cljs
View File

@ -18,6 +18,7 @@
[quo2.screens.community.community-card-view :as community-card]
[quo2.screens.dividers.divider-label :as divider-label]
[quo2.screens.dividers.new-messages :as new-messages]
[quo2.screens.drawers.action-drawers :as drawers]
[quo2.screens.dropdowns.dropdown :as dropdown]
[quo2.screens.info.info-message :as info-message]
[quo2.screens.info.information-box :as information-box]
@ -83,6 +84,9 @@
{:name :new-messages
:insets {:top false}
:component new-messages/preview-new-messages}]
:drawers [{:name :action-drawers
:insets {:top false}
:component drawers/preview-action-drawers}]
:dropdowns [{:name :dropdown
:insets {:top false}
:component dropdown/preview-dropdown}]

3
src/status_im/ui/screens/communities/community_overview_redesign.cljs
View File

@ -74,8 +74,7 @@
{:style
{:flex 1
:border-radius 20}}
[react/view (styles/community-cover-container 148)
[react/view (styles/community-cover-container 148)
[react/image
{:source cover
:style {:position :relative