diff --git a/resources/images/icons2/20x20/automatic@2x.png b/resources/images/icons2/20x20/automatic@2x.png index 32fae7f797a0..a2723d294aec 100644 Binary files a/resources/images/icons2/20x20/automatic@2x.png and b/resources/images/icons2/20x20/automatic@2x.png differ diff --git a/resources/images/icons2/20x20/automatic@3x.png b/resources/images/icons2/20x20/automatic@3x.png index acdd9817678c..3a96a8a65100 100644 Binary files a/resources/images/icons2/20x20/automatic@3x.png and b/resources/images/icons2/20x20/automatic@3x.png differ diff --git a/resources/images/icons2/20x20/offline@2x.png b/resources/images/icons2/20x20/offline@2x.png new file mode 100644 index 000000000000..0f9449230086 Binary files /dev/null and b/resources/images/icons2/20x20/offline@2x.png differ diff --git a/resources/images/icons2/20x20/offline@3x.png b/resources/images/icons2/20x20/offline@3x.png new file mode 100644 index 000000000000..d8cb7791c568 Binary files /dev/null and b/resources/images/icons2/20x20/offline@3x.png differ diff --git a/src/quo/components/drawers/action_drawers/style.cljs b/src/quo/components/drawers/action_drawers/style.cljs index c9ab00185641..de9a793cce41 100644 --- a/src/quo/components/drawers/action_drawers/style.cljs +++ b/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] diff --git a/src/quo/components/drawers/action_drawers/view.cljs b/src/quo/components/drawers/action_drawers/view.cljs index cc4c5b2e369a..19cb940d3c93 100644 --- a/src/quo/components/drawers/action_drawers/view.cljs +++ b/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)) diff --git a/src/quo/components/dropdowns/dropdown/view.cljs b/src/quo/components/dropdowns/dropdown/view.cljs index 52d3d1ea1ac6..655e3b8d042e 100644 --- a/src/quo/components/dropdowns/dropdown/view.cljs +++ b/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)) diff --git a/src/status_im/common/home/top_nav/view.cljs b/src/status_im/common/home/top_nav/view.cljs index fcea870bd4c6..5833e9fb95ac 100644 --- a/src/status_im/common/home/top_nav/view.cljs +++ b/src/status_im/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) diff --git a/src/status_im/contexts/profile/settings/header/utils.cljs b/src/status_im/contexts/profile/settings/header/utils.cljs new file mode 100644 index 000000000000..2deae2ba42f9 --- /dev/null +++ b/src/status_im/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})) diff --git a/src/status_im/contexts/profile/settings/header/view.cljs b/src/status_im/contexts/profile/settings/header/view.cljs index 79e5a08a5854..1139e7905575 100644 --- a/src/status_im/contexts/profile/settings/header/view.cljs +++ b/src/status_im/contexts/profile/settings/header/view.cljs @@ -3,12 +3,12 @@ [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 @@ -16,6 +16,9 @@ (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 diff --git a/src/status_im/contexts/profile/settings/list_items.cljs b/src/status_im/contexts/profile/settings/list_items.cljs index 181437cbdcfc..9ac0a6d23034 100644 --- a/src/status_im/contexts/profile/settings/list_items.cljs +++ b/src/status_im/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 diff --git a/src/status_im/contexts/profile/settings/view.cljs b/src/status_im/contexts/profile/settings/view.cljs index 7bc542e2dffe..642e9fac0a65 100644 --- a/src/status_im/contexts/profile/settings/view.cljs +++ b/src/status_im/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 diff --git a/src/status_im/contexts/profile/settings/visibility_sheet/view.cljs b/src/status_im/contexts/profile/settings/visibility_sheet/view.cljs new file mode 100644 index 000000000000..31bf7b229e4e --- /dev/null +++ b/src/status_im/contexts/profile/settings/visibility_sheet/view.cljs @@ -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)}]]])