Skip to content

Commit

Permalink
[#17393] feat: add visibility update sheet
Browse files Browse the repository at this point in the history
  • Loading branch information
mohsen-ghafouri committed Dec 20, 2023
1 parent 32cfd21 commit 2a3772d
Show file tree
Hide file tree
Showing 13 changed files with 123 additions and 33 deletions.
Binary file modified resources/images/icons2/20x20/automatic@2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/icons2/20x20/automatic@3x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons2/20x20/offline@2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons2/20x20/offline@3x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 8 additions & 5 deletions src/quo/components/drawers/action_drawers/style.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
26 changes: 21 additions & 5 deletions src/quo/components/drawers/action_drawers/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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))
Expand Down
22 changes: 12 additions & 10 deletions src/quo/components/dropdowns/dropdown/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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))
2 changes: 1 addition & 1 deletion src/status_im/common/home/top_nav/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
21 changes: 21 additions & 0 deletions src/status_im/contexts/profile/settings/header/utils.cljs
Original file line number Diff line number Diff line change
@@ -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}))
26 changes: 17 additions & 9 deletions src/status_im/contexts/profile/settings/header/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,22 @@
[quo.core :as quo]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[status-im.common.not-implemented :as not-implemented]
[status-im.contexts.profile.settings.header.avatar :as header.avatar]
[status-im.contexts.profile.settings.header.header-shape :as header.shape]
[status-im.contexts.profile.settings.header.style :as style]
[status-im.contexts.profile.settings.header.utils :as header.utils]
[status-im.contexts.profile.settings.visibility-sheet.view :as visibility-sheet]
[status-im.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)
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/status_im/contexts/profile/settings/list_items.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 4 additions & 2 deletions src/status_im/contexts/profile/settings/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
38 changes: 38 additions & 0 deletions src/status_im/contexts/profile/settings/visibility_sheet/view.cljs
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
(ns status-im.contexts.profile.settings.visibility-sheet.view
(:require [quo.core :as quo]
[status-im.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)}]]])

0 comments on commit 2a3772d

Please sign in to comment.