Add drawer

Author: ibrkhalil

src/quo2/components/list_items/menu_item.cljs

@@ -30,18 +30,18 @@
             (when on-press
               {:on-press on-press}))
      [rn/view
-      {:style {:flex-direction     :row
-               :flex-grow          0
-               :flex-shrink        1
-               :padding-horizontal 20
-               :align-items        :center}}
+      {:style (cond-> {:flex-direction     :row
+                       :flex-grow          0
+                       :flex-shrink        1
+                       :align-items        :center}
+                      icon (assoc :padding-horizontal 20))}
       [rn/view
-       {:style {:width           20
-                :height          20
-                :align-items     :center
-                :justify-content :center
-                :margin-right    12}}
-       [icons/icon icon {:color icon-color}]]
+       {:style (cond-> {:width           20
+                        :height          20
+                        :align-items     :center
+                        :justify-content :center}
+                       icon (assoc :margin-right 12))}
+       (when icon [icons/icon icon {:color icon-color}])]
       [rn/view
        [text/text
         {:weight          :medium

src/status_im2/common/mute_chat_drawer/style.cljs

@@ -0,0 +1,7 @@
+(ns status-im2.common.mute-chat-drawer.style 
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn header-text []
+  {:margin-left   20
+   :margin-bottom 10
+   :color         (colors/theme-colors colors/neutral-50 colors/neutral-40)})

src/status_im2/common/mute_chat_drawer/view.cljs

@@ -0,0 +1,67 @@
+(ns status-im2.common.mute-chat-drawer.view
+  (:require [utils.i18n :as i18n]
+            [quo2.core :as quo2]
+            [react-native.core :as rn]
+            [status-im2.constants :as constants]
+            [utils.re-frame :as rf]
+            [status-im2.common.mute-chat-drawer.style :as style]))
+
+(defn hide-sheet-and-dispatch
+  [event]
+  (rf/dispatch [:bottom-sheet/hide])
+  (rf/dispatch event))
+
+(defn mute-chat-drawer [chat-id accessibility-label]
+  (fn []
+    [rn/view {:accessibility-label accessibility-label}
+     [quo2/text {:weight :medium
+                 :size   :paragraph-2
+                 :style  (style/header-text)} (i18n/label :i/mute-channel)]
+     [quo2/menu-item
+      {:type                       :transparent
+       :title                      (i18n/label :i/mute-for-1-min)
+       :icon-bg-color              :transparent
+       :container-padding-vertical 12
+       :title-column-style         {:margin-left 2}
+       :on-press                   (fn []
+                                     (hide-sheet-and-dispatch [:chat.ui/mute chat-id true constants/mute-for-1-min]))}]
+     [quo2/menu-item
+      {:type                       :transparent
+       :title                      (i18n/label :i/mute-for-15-mins)
+       :icon-bg-color              :transparent
+       :container-padding-vertical 12
+       :title-column-style         {:margin-left 2}
+       :on-press                   (fn []
+                                     (hide-sheet-and-dispatch [:chat.ui/mute chat-id true constants/mute-for-15-mins-type]))}]
+     [quo2/menu-item
+      {:type                       :transparent
+       :title                      (i18n/label :i/mute-for-1-hour)
+       :icon-bg-color              :transparent
+       :container-padding-vertical 12
+       :title-column-style         {:margin-left 2}
+       :on-press                   (fn []
+                                     (hide-sheet-and-dispatch [:chat.ui/mute chat-id true constants/mute-for-1-hour-type]))}]
+     [quo2/menu-item
+      {:type                       :transparent
+       :title                      (i18n/label :i/mute-for-8-hours)
+       :icon-bg-color              :transparent
+       :container-padding-vertical 12
+       :title-column-style         {:margin-left 2}
+       :on-press                   (fn []
+                                     (hide-sheet-and-dispatch [:chat.ui/mute chat-id true constants/mute-for-8-hours-type]))}]
+     [quo2/menu-item
+      {:type                       :transparent
+       :title                      (i18n/label :i/mute-for-1-week)
+       :icon-bg-color              :transparent
+       :container-padding-vertical 12
+       :title-column-style         {:margin-left 2}
+       :on-press                   (fn []
+                                     (hide-sheet-and-dispatch [:chat.ui/mute chat-id true constants/mute-for-1-week]))}]
+     [quo2/menu-item
+      {:type                       :transparent
+       :title                      (i18n/label :i/mute-till-unmute)
+       :icon-bg-color              :transparent
+       :container-padding-vertical 12
+       :title-column-style         {:margin-left 2}
+       :on-press                   (fn []
+                                     (hide-sheet-and-dispatch [:chat.ui/mute chat-id true constants/mute-till-unmuted]))}]]))

status-go-version.json

@@ -4,6 +4,6 @@
     "owner": "status-im",
     "repo": "status-go",
     "version": "mute-for-specific-time",
-    "commit-sha1": "0d7c46e830810d76f3a645c2e17a734e40f967c2",
-    "src-sha256": "0kp1w6v1c2vxqcq54sap52ddm83filr04lmhbvaxq4qjis439nl0"
+    "commit-sha1": "3bc0b0d5274c8813f36d118c0f6f5df9f9c505cd",
+    "src-sha256": "197x90zfrk7mh0g8zg5xgx7i8r1yp2qcq98bnnij9acmbbj2ky9j"
 }

translations/en.json

@@ -1975,5 +1975,12 @@
     "strength-divider-weak-label": "Weak",
     "strength-divider-okay-label": "Okay",
     "strength-divider-strong-label": "Strong",
-    "strength-divider-very-strong-label": "Very strong"
+    "strength-divider-very-strong-label": "Very strong",
+    "mute-for-15-mins": "For 15 min",
+    "mute-for-1-hour": "For 1 hour",
+    "mute-for-8-hours": "For 8 hours",
+    "mute-for-1-week": "For 7 days",
+    "mute-till-unmute": "Until you turn it back on",
+    "mute-channel": "Mute channel",
+    "mute-for-1-min": "For 1 min"
 }