From f11c4211962926685ad56db41b3ebb5b2f64c789 Mon Sep 17 00:00:00 2001 From: Mohsen Date: Mon, 15 Jan 2024 23:45:49 +0300 Subject: [PATCH] [#18453] feat: implement change accent colour screen --- .../profile/edit/accent_colour/events.cljs | 24 ++++++++ .../profile/edit/accent_colour/style.cljs | 27 ++++++++ .../profile/edit/accent_colour/view.cljs | 61 +++++++++++++++++++ .../contexts/profile/edit/list_items.cljs | 2 +- src/status_im/contexts/profile/events.cljs | 1 + src/status_im/navigation/screens.cljs | 5 ++ status-go-version.json | 6 +- translations/en.json | 2 + 8 files changed, 124 insertions(+), 4 deletions(-) create mode 100644 src/status_im/contexts/profile/edit/accent_colour/events.cljs create mode 100644 src/status_im/contexts/profile/edit/accent_colour/style.cljs create mode 100644 src/status_im/contexts/profile/edit/accent_colour/view.cljs diff --git a/src/status_im/contexts/profile/edit/accent_colour/events.cljs b/src/status_im/contexts/profile/edit/accent_colour/events.cljs new file mode 100644 index 000000000000..5c6833933aa6 --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/events.cljs @@ -0,0 +1,24 @@ +(ns status-im.contexts.profile.edit.accent-colour.events + (:require [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(rf/reg-event-fx :profile/edit-accent-colour-success + (fn [_] + {:fx [[:dispatch [:navigate-back]] + [:dispatch + [:toasts/upsert + {:type :positive + :theme :dark + :text (i18n/label :t/accent-colour-updated)}]]]})) + +(defn edit-accent-colour + [{:keys [db]} [customizationColor]] + (let [key-uid (get-in db [:profile/profile :key-uid])] + {:db (assoc-in db [:profile/profile :customization-color] customizationColor) + :fx [[:json-rpc/call + [{:method "wakuext_setCustomizationColor" + :params [{:customizationColor customizationColor + :keyUid key-uid}] + :on-success [:profile/edit-accent-colour-success]}]]]})) + +(rf/reg-event-fx :profile/edit-accent-colour edit-accent-colour) diff --git a/src/status_im/contexts/profile/edit/accent_colour/style.cljs b/src/status_im/contexts/profile/edit/accent_colour/style.cljs new file mode 100644 index 000000000000..7a7d5d9c153b --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/style.cljs @@ -0,0 +1,27 @@ +(ns status-im.contexts.profile.edit.accent-colour.style + (:require [quo.foundations.colors :as colors])) + +(defn page-wrapper + [insets] + {:padding-top (:top insets) + :padding-bottom (:bottom insets) + :padding-horizontal 1 + :flex 1}) + +(def screen-container + {:flex 1 + :padding-top 14 + :padding-horizontal 20 + :justify-content :space-between}) + +(def color-title + {:color colors/white-70-blur + :margin-top 20 + :margin-bottom 16}) + +(def button-wrapper + {:margin-vertical 12}) + +(def profile-card + {:margin-top 22 + :margin-bottom 5}) diff --git a/src/status_im/contexts/profile/edit/accent_colour/view.cljs b/src/status_im/contexts/profile/edit/accent_colour/view.cljs new file mode 100644 index 000000000000..82eb4116e3e9 --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/view.cljs @@ -0,0 +1,61 @@ +(ns status-im.contexts.profile.edit.accent-colour.view + (:require [quo.core :as quo] + [react-native.core :as rn] + [react-native.safe-area :as safe-area] + [reagent.core :as reagent] + [status-im.constants :as constants] + [status-im.contexts.profile.edit.accent-colour.style :as style] + [status-im.contexts.profile.utils :as profile.utils] + [utils.i18n :as i18n] + [utils.re-frame :as rf] + [utils.responsiveness :as responsiveness])) + +(defn view + [] + (let [insets (safe-area/get-insets) + {window-width :width} (rn/get-window) + profile (rf/sub [:profile/profile-with-image]) + customization-color (rf/sub [:profile/customization-color]) + profile-picture (profile.utils/photo profile) + display-name (profile.utils/displayed-name profile) + custom-color (reagent/atom (or customization-color + constants/profile-default-color)) + on-change #(reset! custom-color %)] + (fn [] + [quo/overlay + {:type :shell + :container-style (style/page-wrapper insets)} + [quo/page-nav + {:key :header + :background :blur + :icon-name :i/arrow-left + :on-press #(rf/dispatch [:navigate-back])}] + [rn/view + {:key :content + :style style/screen-container} + [rn/view {:style {:flex 1}} + [quo/text-combinations {:title (i18n/label :t/accent-colour)}] + [quo/profile-card + {:profile-picture profile-picture + :name display-name + :card-style style/profile-card + :customization-color @custom-color}] + [quo/text + {:size :paragraph-2 + :weight :medium + :style style/color-title} + (i18n/label :t/accent-colour)] + [quo/color-picker + {:blur? true + :default-selected @custom-color + :on-change on-change + :window-width window-width + :container-style {:padding-left (responsiveness/iphone-11-Pro-20-pixel-from-width + window-width)}}]] + [rn/view {:style style/button-wrapper} + [quo/button + {:type :primary + :customization-color @custom-color + :on-press (fn [] + (rf/dispatch [:profile/edit-accent-colour @custom-color]))} + (i18n/label :t/save-colour)]]]]))) diff --git a/src/status_im/contexts/profile/edit/list_items.cljs b/src/status_im/contexts/profile/edit/list_items.cljs index da20a58e4f1c..1328fc9a8be6 100644 --- a/src/status_im/contexts/profile/edit/list_items.cljs +++ b/src/status_im/contexts/profile/edit/list_items.cljs @@ -25,7 +25,7 @@ :action :arrow :container-style style/item-container} {:title (i18n/label :t/accent-colour) - :on-press not-implemented/alert + :on-press #(rf/dispatch [:open-modal :edit-accent-colour]) :label :color :label-props (colors/resolve-color customization-color theme) :blur? true diff --git a/src/status_im/contexts/profile/events.cljs b/src/status_im/contexts/profile/events.cljs index 4826b27b47e3..efd5b7600c51 100644 --- a/src/status_im/contexts/profile/events.cljs +++ b/src/status_im/contexts/profile/events.cljs @@ -2,6 +2,7 @@ (:require [native-module.core :as native-module] [re-frame.core :as re-frame] + [status-im.contexts.profile.edit.accent-colour.events] [status-im.contexts.profile.edit.name.events] [status-im.contexts.profile.login.events :as profile.login] [status-im.contexts.profile.rpc :as profile.rpc] diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index 3d942de1381f..2d8561fdf1e1 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -34,6 +34,7 @@ [status-im.contexts.preview.quo.component-preview.view :as component-preview] [status-im.contexts.preview.quo.main :as quo.preview] [status-im.contexts.preview.status-im.main :as status-im-preview] + [status-im.contexts.profile.edit.accent-colour.view :as edit-accent-colour] [status-im.contexts.profile.edit.name.view :as edit-name] [status-im.contexts.profile.edit.view :as edit-profile] [status-im.contexts.profile.profiles.view :as profiles] @@ -172,6 +173,10 @@ :options options/transparent-screen-options :component edit-profile/view} + {:name :edit-accent-colour + :options options/transparent-screen-options + :component edit-accent-colour/view} + {:name :edit-name :options options/transparent-screen-options :component edit-name/view} diff --git a/status-go-version.json b/status-go-version.json index 5287eb287563..0af79df3d0b6 100644 --- a/status-go-version.json +++ b/status-go-version.json @@ -3,7 +3,7 @@ "_comment": "Instead use: scripts/update-status-go.sh ", "owner": "status-im", "repo": "status-go", - "version": "v0.172.2", - "commit-sha1": "5cb1972261de90fee1469ae60ffb7f25900a9850", - "src-sha256": "1z37yinlxwpzprd10h2f4vzs5k2a1k85ks9lvl067lb4rqflcwny" + "version": "feat/change-accent-colour", + "commit-sha1": "2327ccaa487c51f86aeee451cd824ba49e079fe5", + "src-sha256": "1ghw1m2wkb2kkj6r8v9l5avw62dqvnypp65fdmwjmixz1qwyvjh0" } diff --git a/translations/en.json b/translations/en.json index b398d63d3996..ca23669ff4fc 100644 --- a/translations/en.json +++ b/translations/en.json @@ -5,6 +5,7 @@ "about-names-content": "No one can pretend to be you! You’re anonymous by default and never have to reveal your real name. You can register a custom name for a small fee.", "about-names-title": "Names can’t be changed", "accent-colour": "Accent colour", + "accent-colour-updated": "Accent colour updated", "access-key": "Access key", "access-existing-keys": "Access existing keys", "accept-and-share-address": "Accept and share address", @@ -1243,6 +1244,7 @@ "revoke-access": "Revoke access", "rpc-url": "RPC URL", "save": "Save", + "save-colour": "Save colour", "save-name": "Save name", "save-password": "Save password", "save-password-unavailable": "Set device passcode to save password",