From c4a723f8412e3eceabe6e14a2d1d6615841cc385 Mon Sep 17 00:00:00 2001 From: Mohsen Date: Mon, 15 Jan 2024 23:45:49 +0300 Subject: [PATCH] [#18453] feat: add change accent color screen https://github.com/status-im/status-go/compare/b83cd418...af7f5c44 --- .../messenger/messages/transport/events.cljs | 10 ++- .../profile/edit/accent_colour/events.cljs | 26 ++++++++ .../edit/accent_colour/events_test.cljs | 17 +++++ .../profile/edit/accent_colour/style.cljs | 27 ++++++++ .../profile/edit/accent_colour/view.cljs | 64 +++++++++++++++++++ .../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 + 10 files changed, 155 insertions(+), 5 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/events_test.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/chat/messenger/messages/transport/events.cljs b/src/status_im/contexts/chat/messenger/messages/transport/events.cljs index 38cd1c569540..d5d12ab94c92 100644 --- a/src/status_im/contexts/chat/messenger/messages/transport/events.cljs +++ b/src/status_im/contexts/chat/messenger/messages/transport/events.cljs @@ -55,6 +55,7 @@ ^js identity-images (.-identityImages response-js) ^js accounts (.-accounts response-js) ^js ens-username-details-js (.-ensUsernameDetails response-js) + ^js customization-color-js (.-customizationColor response-js) sync-handler (when-not process-async process-response)] (cond @@ -204,7 +205,14 @@ (js-delete response-js "ensUsernameDetails") (rf/merge cofx (process-next response-js sync-handler) - (rf/dispatch [:ens/update-usernames ens-username-details-clj])))))) + (rf/dispatch [:ens/update-usernames ens-username-details-clj]))) + + (seq customization-color-js) + (let [customization-color (types/js->clj customization-color-js)] + (js-delete response-js "customizationColor") + (rf/merge cofx + (process-next response-js sync-handler) + (rf/dispatch [:profile/edit-accent-colour customization-color])))))) (defn group-by-and-update-unviewed-counts "group messages by current chat, profile updates, transactions and update unviewed counters in db for not curent chats" 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..89efd29a5710 --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/events.cljs @@ -0,0 +1,26 @@ +(ns status-im.contexts.profile.edit.accent-colour.events + (:require [taoensso.timbre :as log] + [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]} [customization-color]] + (let [key-uid (get-in db [:profile/profile :key-uid])] + {:db (assoc-in db [:profile/profile :customization-color] customization-color) + :fx [[:json-rpc/call + [{:method "wakuext_setCustomizationColor" + :params [{:customizationColor customization-color + :keyUid key-uid}] + :on-success [:profile/edit-accent-colour-success] + :on-error #(log/error "failed to edit accent color." {:error %})}]]]})) + +(rf/reg-event-fx :profile/edit-accent-colour edit-accent-colour) diff --git a/src/status_im/contexts/profile/edit/accent_colour/events_test.cljs b/src/status_im/contexts/profile/edit/accent_colour/events_test.cljs new file mode 100644 index 000000000000..ec2b7f9ba95b --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/events_test.cljs @@ -0,0 +1,17 @@ +(ns status-im.contexts.profile.edit.accent-colour.events-test + (:require [cljs.test :refer [deftest is]] + matcher-combinators.test + [status-im.contexts.profile.edit.accent-colour.events :as sut])) + +(deftest edit-accent-color-test + (let [new-color :yellow + key-uid "key-uid" + cofx {:db {:profile/profile {:key-uid key-uid}}} + expected {:fx [[:json-rpc/call + [{:method "wakuext_setCustomizationColor" + :params [{:customizationColor new-color + :keyUid key-uid}] + :on-success [:profile/edit-accent-colour-success] + :on-error fn?}]]]}] + (is (match? expected + (sut/edit-accent-colour cofx [new-color]))))) 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..144eca0af4da --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/view.cljs @@ -0,0 +1,64 @@ +(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])) + +(defn f-view + [{:keys [customization-color]}] + (let [insets (safe-area/get-insets) + {window-width :width} (rn/get-window) + unsaved-custom-color (reagent/atom customization-color constants/profile-default-color) + on-change #(reset! unsaved-custom-color %)] + (fn [{:keys [customization-color]}] + (let [profile (rf/sub [:profile/profile-with-image]) + profile-picture (profile.utils/photo profile) + display-name (profile.utils/displayed-name profile)] + (rn/use-effect + #(on-change customization-color) + [customization-color]) + [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 @unsaved-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 @unsaved-custom-color + :on-change on-change + :window-width window-width}]] + [rn/view {:style style/button-wrapper} + [quo/button + {:type :primary + :customization-color @unsaved-custom-color + :on-press (fn [] + (rf/dispatch [:profile/edit-accent-colour @unsaved-custom-color]))} + (i18n/label :t/save-colour)]]]])))) + +(defn view + [] + (let [customization-color (rf/sub [:profile/customization-color])] + [:f> f-view {:customization-color customization-color}])) 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 2b36dd728ec7..a2b8f4df5d25 100644 --- a/src/status_im/contexts/profile/events.cljs +++ b/src/status_im/contexts/profile/events.cljs @@ -3,6 +3,7 @@ [legacy.status-im.data-store.settings :as data-store.settings] [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.header.events] [status-im.contexts.profile.edit.name.events] [status-im.contexts.profile.login.events :as profile.login] diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index 3c3deb756c40..ea03a173d57e 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] @@ -173,6 +174,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 c055e46c480e..9119195cc360 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.173.0", - "commit-sha1": "b83cd418af77ec8dabe3849bf51984a4232740d9", - "src-sha256": "00w8kqdkrv9x95dmlxy7zdm70vilh0gpnj6n81hg1124dy4gwikd" + "version": "feat/change-accent-colour", + "commit-sha1": "af7f5c4404a3edb0d2d14a91d75460b10a4cdc2c", + "src-sha256": "1bpcyjcgh0baw1pdqlm3ndm8in823pcfimn8zwdvqisxcj35sl2m" } diff --git a/translations/en.json b/translations/en.json index 7f54db4d0b2f..fcf172b08ccc 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", @@ -1245,6 +1246,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",