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

chore: update action drawer with designer feedback (#14465)

This commit is contained in:
Jamie Caprani 2022-12-01 11:58:50 +00:00 committed by GitHub
parent d4897de205
commit 5947769881
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/quo2/components/drawers/action_drawers.cljs
View File

@ -6,12 +6,13 @@
(defn- get-icon-color [danger?]
(if danger?
(colors/theme-colors colors/danger-50 colors/danger-60)
colors/danger-50
(colors/theme-colors colors/neutral-50 colors/neutral-40)))
(defn divider []
[rn/view {:style {:border-top-width 1
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
:border-top-color (colors/theme-colors
colors/neutral-10 colors/neutral-90)
:margin-top 8
:margin-bottom 7
:align-items :center
@ -27,10 +28,15 @@
(when action-props
[:<> {:key label}
(when add-divider? [divider])
[rn/touchable-opacity {:on-press on-press}
[rn/touchable-highlight {:style {:border-radius 12
:height (if sub-label 58 50)
:margin-horizontal 8}
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90)
:on-press on-press}
[rn/view {:style
{:height (if sub-label 56 47)
:margin-horizontal 20
{:height (if sub-label 58 50)
:margin-horizontal 12
:flex-direction :row}}
[rn/view {:style
{:height 20

47
src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
View File

@ -16,25 +16,34 @@
(def options-with-consequences [{:icon :i/delete
:danger? true
:label "Clear history"}])
:label "Clear history"
:add-divider? true
:on-press #(js/alert "clear history")}])
(defn render-action-sheet [state]
[quo2/action-drawer (cond-> [[{:icon :i/friend
:label "View channel members and details"}
{:icon :i/communities
:label "Mark as read"}
{:icon :i/muted
:label (if (:muted? @state) "Unmute channel" "Mute channel")
:right-icon :i/chevron-right
:sub-label (when (:muted? @state) "Muted for 15 min")}
{:icon :i/scan
:right-icon :i/chevron-right
:label "Fetch messages"}
{:icon :i/add-user
:label "Share link to the channel"}]]
[rn/view {:height 300
:background-color (colors/theme-colors colors/white colors/neutral-95)}
[quo2/action-drawer (cond-> [[{:icon :i/friend
:label "View channel members and details"
:on-press #(js/alert "View channel members and details")}
{:icon :i/communities
:label "Mark as read"
:on-press #(js/alert "Mark as read")}
{:icon :i/muted
:label (if (:muted? @state) "Unmute channel" "Mute channel")
:on-press #(js/alert (if (:muted? @state) "Unmute channel" "Mute channel"))
:right-icon :i/chevron-right
:sub-label (when (:muted? @state) "Muted for 15 min")}
{:icon :i/scan
:on-press #(js/alert "Fetch messages")
:right-icon :i/chevron-right
:label "Fetch messages"}
{:icon :i/add-user
:on-press #(js/alert "Share link to the channel")
:label "Share link to the channel"}]]
(:show-red-options? @state)
(conj options-with-consequences))])
(:show-red-options? @state)
(conj options-with-consequences))]])
(defn cool-preview []
(let [state (reagent/atom {:muted? true
@ -51,10 +60,10 @@
"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}
(defn preview-action-drawers []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[rn/flat-list {:flex 1
:nestedScrollEnabled true
:keyboardShouldPersistTaps :always