status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-12 20:14:40 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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?] (defn- get-icon-color [danger?]
(if danger? (if danger?
(colors/theme-colors colors/danger-50 colors/danger-60) colors/danger-50
(colors/theme-colors colors/neutral-50 colors/neutral-40))) (colors/theme-colors colors/neutral-50 colors/neutral-40)))
(defn divider [] (defn divider []
[rn/view {:style {:border-top-width 1 [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-top 8
:margin-bottom 7 :margin-bottom 7
:align-items :center :align-items :center
@ -27,10 +28,15 @@
(when action-props (when action-props
[:<> {:key label} [:<> {:key label}
(when add-divider? [divider]) (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 [rn/view {:style
{:height (if sub-label 56 47) {:height (if sub-label 58 50)
:margin-horizontal 20
:margin-horizontal 12
:flex-direction :row}} :flex-direction :row}}
[rn/view {:style [rn/view {:style
{:height 20 {: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 (def options-with-consequences [{:icon :i/delete
:danger? true :danger? true
:label "Clear history"}]) :label "Clear history"
:add-divider? true
:on-press #(js/alert "clear history")}])
(defn render-action-sheet [state] (defn render-action-sheet [state]
[quo2/action-drawer (cond-> [[{:icon :i/friend [rn/view {:height 300
:label "View channel members and details"} :background-color (colors/theme-colors colors/white colors/neutral-95)}
{:icon :i/communities [quo2/action-drawer (cond-> [[{:icon :i/friend
:label "Mark as read"} :label "View channel members and details"
{:icon :i/muted :on-press #(js/alert "View channel members and details")}
:label (if (:muted? @state) "Unmute channel" "Mute channel") {:icon :i/communities
:right-icon :i/chevron-right :label "Mark as read"
:sub-label (when (:muted? @state) "Muted for 15 min")} :on-press #(js/alert "Mark as read")}
{:icon :i/scan {:icon :i/muted
:right-icon :i/chevron-right :label (if (:muted? @state) "Unmute channel" "Mute channel")
:label "Fetch messages"} :on-press #(js/alert (if (:muted? @state) "Unmute channel" "Mute channel"))
{:icon :i/add-user :right-icon :i/chevron-right
:label "Share link to the channel"}]] :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) (:show-red-options? @state)
(conj options-with-consequences))]) (conj options-with-consequences))]])
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:muted? true (let [state (reagent/atom {:muted? true
@ -51,10 +60,10 @@
"See in bottom sheet"] "See in bottom sheet"]
[rn/view {:padding-vertical 60} [rn/view {:padding-vertical 60}
(render-action-sheet state)]]]))) (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 [rn/flat-list {:flex 1
:nestedScrollEnabled true :nestedScrollEnabled true
:keyboardShouldPersistTaps :always :keyboardShouldPersistTaps :always