[#17393] feat: add visibility update sheet

src/quo/components/drawers/action_drawers/style.cljs

@@ -12,11 +12,14 @@
    :flex-direction   :row})
 
 (defn container
-  [sub-label disabled?]
-  {:border-radius     12
-   :height            (if sub-label 56 48)
-   :opacity           (when disabled? 0.3)
-   :margin-horizontal 8})
+  [{:keys [sub-label disabled? state customization-color theme]}]
+  (merge
+   {:border-radius     12
+    :height            (if sub-label 56 48)
+    :opacity           (when disabled? 0.3)
+    :margin-horizontal 8}
+   (when (= state :selected)
+     {:background-color (colors/resolve-color customization-color theme 5)})))
 
 (defn row-container
   [sub-label]

src/quo/components/drawers/action_drawers/view.cljs

@@ -38,13 +38,20 @@
            add-divider?
            theme
            accessibility-label
-           icon-color]}]
+           icon-color
+           no-icon-color?
+           state
+           customization-color]}]
   [:<>
    (when add-divider?
      [divider theme])
    [maybe-pressable disabled?
     {:accessibility-label accessibility-label
-     :style               (style/container sub-label disabled?)
+     :style               (style/container {:sub-label           sub-label
+                                            :disabled?           disabled?
+                                            :state               state
+                                            :customization-color customization-color
+                                            :theme               theme})
      :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
      :on-press            on-press}
     [rn/view
@@ -54,8 +61,9 @@
        :accessible          true
        :style               (style/left-icon sub-label)}
       [icon/icon icon
-       {:color (or icon-color (get-icon-color danger? theme))
-        :size  20}]]
+       {:color    (or icon-color (get-icon-color danger? theme))
+        :no-color no-icon-color?
+        :size     20}]]
      [rn/view
       {:style style/text-container}
       [text/text
@@ -72,7 +80,7 @@
           :style {:color
                   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
          sub-label])]
-     (when (or right-text right-icon)
+     (when (or right-text right-icon (= state :selected))
        [rn/view {:style style/right-side-container}
         (when right-text
           [text/text
@@ -87,6 +95,14 @@
             :accessibility-label :right-icon-for-action}
            [icon/icon right-icon
             {:color (get-icon-color danger? theme)
+             :size  20}]])
+        (when (= state :selected)
+          [rn/view
+           {:style               style/right-icon
+            :accessible          true
+            :accessibility-label :right-icon-for-action}
+           [icon/icon :i/check
+            {:color (colors/resolve-color customization-color theme)
              :size  20}]])])]]])
 
 (def ^:private action (quo.theme/with-theme action-internal))

src/quo/components/dropdowns/dropdown/view.cljs

@@ -11,7 +11,7 @@
 
 (defn- view-internal
   [{:keys [type size state background customization-color theme on-press icon-name icon? emoji?
-           accessibility-label]
+           accessibility-label no-icon-color?]
     :or   {type      :grey
            size      :size-40
            state     :default
@@ -58,6 +58,7 @@
            icon-name
            {:accessibility-label :left-icon
             :color               left-icon-color
+            :no-color            no-icon-color?
             :size                icon-size
             :container-style     style/left-icon}])
         [text/text
@@ -75,14 +76,15 @@
 
 (def view
   "Props:
-    - type:       :outline |:grey (default) | :ghost | :customization
-    - size:       :size-40 (default) | :size-32 | :size-24
-    - state:      :default (default) | :active | :disabled
-    - emoji?:     boolean
-    - icon?:      boolean
-    - background: :blur | :photo (optional)
-    - icon-name:  keyword
-    - on-press:   function
-   
+    - type:           :outline |:grey (default) | :ghost | :customization
+    - size:           :size-40 (default) | :size-32 | :size-24
+    - state:          :default (default) | :active | :disabled
+    - emoji?:         boolean
+    - icon?:          boolean
+    - no-icon-color?: boolean
+    - background:     :blur | :photo (optional)
+    - icon-name:      keyword
+    - on-press:       function
+
     Child: string - used as label or emoji (for emoji only)"
   (theme/with-theme view-internal))

src/status_im2/common/home/top_nav/view.cljs

@@ -33,7 +33,7 @@
                                            :unread-indicator/new  :mention
                                            nil)]
     [quo/top-nav
-     {:avatar-on-press          #(rf/dispatch [:navigate-to :my-profile])
+     {:avatar-on-press          #(rf/dispatch [:open-modal :settings])
       :scan-on-press            #(js/alert "to be implemented")
       :activity-center-on-press #(rf/dispatch [:activity-center/open])
       :qr-code-on-press         #(dispatch-and-chill [:open-modal :share-shell] 1000)

src/status_im2/contexts/profile/settings/header/utils.cljs

@@ -0,0 +1,21 @@
+(ns status-im2.contexts.profile.settings.header.utils
+  (:require [status-im2.constants :as constants]
+            [utils.i18n :as i18n]))
+
+(defn visibility-status-type-data
+  [status]
+  (case (:status-type status)
+    (constants/visibility-status-automatic)
+    {:title (i18n/label :t/status-automatic)
+     :icon  :i/automatic}
+
+    (constants/visibility-status-always-online)
+    {:title (i18n/label :t/online)
+     :icon  :i/online}
+
+    (constants/visibility-status-inactive)
+    {:title (i18n/label :t/offline)
+     :icon  :i/offline}
+
+    {:title (i18n/label :t/offline)
+     :icon  :i/offline}))

src/status_im2/contexts/profile/settings/header/view.cljs

@@ -3,19 +3,22 @@
             [quo.core :as quo]
             [quo.theme :as quo.theme]
             [react-native.core :as rn]
-            [status-im2.common.not-implemented :as not-implemented]
             [status-im2.contexts.profile.settings.header.avatar :as header.avatar]
             [status-im2.contexts.profile.settings.header.header-shape :as header.shape]
             [status-im2.contexts.profile.settings.header.style :as style]
+            [status-im2.contexts.profile.settings.header.utils :as header.utils]
+            [status-im2.contexts.profile.settings.visibility-sheet.view :as visibility-sheet]
             [status-im2.contexts.profile.utils :as profile.utils]
-            [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
 (defn- f-view
   [{:keys [theme scroll-y]}]
   (let [{:keys [public-key emoji-hash] :as profile} (rf/sub [:profile/profile-with-image])
         online?                                     (rf/sub [:visibility-status-updates/online?
                                                              public-key])
+        status                                      (rf/sub
+                                                     [:visibility-status-updates/visibility-status-update
+                                                      public-key])
         customization-color                         (rf/sub [:profile/customization-color])
         full-name                                   (profile.utils/displayed-name profile)
         profile-picture                             (profile.utils/photo profile)
@@ -34,13 +37,18 @@
         :profile-picture     profile-picture}]
       [rn/view {:style {:margin-bottom 4}}
        [quo/dropdown
-        {:background :blur
-         :size       :size-32
-         :type       :outline
-         :icon?      true
-         :icon-name  :i/online
-         :on-press   not-implemented/alert}
-        (i18n/label :t/online)]]]
+        {:background     :blur
+         :size           :size-32
+         :type           :outline
+         :icon?          true
+         :no-icon-color? true
+         :icon-name      (:icon (header.utils/visibility-status-type-data status))
+         :on-press       #(rf/dispatch [:show-bottom-sheet
+                                        {:content (fn [] [visibility-sheet/view
+                                                          {:customization-color customization-color
+                                                           :status-type         (:status-type
+                                                                                 status)}])}])}
+        (:title (header.utils/visibility-status-type-data status))]]]
      [quo/text-combinations
       {:container-style style/title-container
        :emoji-hash      emoji-string

src/status_im2/contexts/profile/settings/list_items.cljs

@@ -29,7 +29,7 @@
      :image-props :i/placeholder
      :image       :icon
      :action      :arrow}
-    {:title       "Browser"
+    {:title       (i18n/label :t/browser)
      :on-press    not-implemented/alert
      :image-props :i/browser
      :image       :icon

src/status_im2/contexts/profile/settings/view.cljs

@@ -42,7 +42,8 @@
         logout-press        #(rf/dispatch [:multiaccounts.logout.ui/logout-pressed])]
     [quo/overlay {:type :shell}
      [rn/view
-      {:style (style/navigation-wrapper {:customization-color customization-color
+      {:key   :header
+       :style (style/navigation-wrapper {:customization-color customization-color
                                          :inset               (:top insets)
                                          :theme               theme})}
       [quo/page-nav
@@ -54,7 +55,8 @@
                      {:icon-name :i/share
                       :on-press  #(debounce/dispatch-and-chill [:open-modal :share-shell] 1000)}]}]]
      [rn/flat-list
-      {:header                          [settings.header/view {:scroll-y scroll-y}]
+      {:key                             :list
+       :header                          [settings.header/view {:scroll-y scroll-y}]
        :data                            settings.items/items
        :key-fn                          :title
        :shows-vertical-scroll-indicator false

src/status_im2/contexts/profile/settings/visibility_sheet/view.cljs

@@ -0,0 +1,38 @@
+(ns status-im2.contexts.profile.settings.visibility-sheet.view
+  (:require [quo.core :as quo]
+            [status-im2.constants :as constants]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn change-visibility-status
+  [status-type]
+  (rf/dispatch
+   [:visibility-status-updates/delayed-visibility-status-update status-type])
+  (rf/dispatch [:hide-bottom-sheet]))
+
+(defn view
+  [{:keys [customization-color status-type]}]
+  [quo/action-drawer
+   [[{:icon                :i/online
+      :no-icon-color?      true
+      :state               (when (= status-type constants/visibility-status-always-online) :selected)
+      :customization-color customization-color
+      :accessibility-label :online
+      :label               (i18n/label :t/online)
+      :on-press            #(change-visibility-status constants/visibility-status-always-online)}
+     {:icon                :i/offline
+      :no-icon-color?      true
+      :state               (when (= status-type constants/visibility-status-inactive) :selected)
+      :accessibility-label :offline
+      :customization-color customization-color
+      :label               (i18n/label :t/offline)
+      :sub-label           (i18n/label :t/status-inactive-subtitle)
+      :on-press            #(change-visibility-status constants/visibility-status-inactive)}
+     {:icon                :i/automatic
+      :no-icon-color?      true
+      :state               (when (= status-type constants/visibility-status-automatic) :selected)
+      :accessibility-label :automatic
+      :customization-color customization-color
+      :label               (i18n/label :t/status-automatic)
+      :sub-label           (i18n/label :t/status-automatic-subtitle)
+      :on-press            #(change-visibility-status constants/visibility-status-automatic)}]]])