diff --git a/resources/images/icons/chevron_right20@2x.png b/resources/images/icons/chevron_right20@2x.png new file mode 100644 index 0000000000..2adaa1bcc9 Binary files /dev/null and b/resources/images/icons/chevron_right20@2x.png differ diff --git a/resources/images/icons/chevron_right20@3x.png b/resources/images/icons/chevron_right20@3x.png new file mode 100644 index 0000000000..71d88184cb Binary files /dev/null and b/resources/images/icons/chevron_right20@3x.png differ diff --git a/src/quo2/components/drawers/action_drawers.cljs b/src/quo2/components/drawers/action_drawers.cljs new file mode 100644 index 0000000000..1480ccdefa --- /dev/null +++ b/src/quo2/components/drawers/action_drawers.cljs @@ -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)])]) diff --git a/src/quo2/screens/drawers/action_drawers.cljs b/src/quo2/screens/drawers/action_drawers.cljs new file mode 100644 index 0000000000..723ede7074 --- /dev/null +++ b/src/quo2/screens/drawers/action_drawers.cljs @@ -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))}]]) diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 0ba10aec71..813f1a4374 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -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}] diff --git a/src/status_im/ui/screens/communities/community_overview_redesign.cljs b/src/status_im/ui/screens/communities/community_overview_redesign.cljs index 942f5d258b..f52906bfac 100644 --- a/src/status_im/ui/screens/communities/community_overview_redesign.cljs +++ b/src/status_im/ui/screens/communities/community_overview_redesign.cljs @@ -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