From 7b639f2ffedad68dcc4d01a38c24357ad372c41f Mon Sep 17 00:00:00 2001 From: Mohsen Date: Wed, 7 Feb 2024 19:49:21 +0300 Subject: [PATCH] [#18453] feat: implement change accent colour screen (#18517) --- .../components/colors/color_picker/view.cljs | 2 +- .../messenger/messages/transport/events.cljs | 10 ++- .../profile/edit/accent_colour/events.cljs | 30 +++++++++ .../edit/accent_colour/events_test.cljs | 17 +++++ .../profile/edit/accent_colour/style.cljs | 30 +++++++++ .../profile/edit/accent_colour/view.cljs | 66 +++++++++++++++++++ .../contexts/profile/edit/list_items.cljs | 2 +- src/status_im/contexts/profile/events.cljs | 1 + src/status_im/navigation/options.cljs | 10 ++- src/status_im/navigation/screens.cljs | 9 ++- status-go-version.json | 6 +- translations/en.json | 2 + 12 files changed, 176 insertions(+), 9 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/quo/components/colors/color_picker/view.cljs b/src/quo/components/colors/color_picker/view.cljs index fa02a7d3a7..14579fc044 100644 --- a/src/quo/components/colors/color_picker/view.cljs +++ b/src/quo/components/colors/color_picker/view.cljs @@ -35,7 +35,7 @@ (when (and @ref (>= index 0)) (some-> ^js @ref (.scrollToIndex #js - {:animated true + {:animated false :index index :viewPosition 0.5}))))) 50))) 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 38cd1c5695..754d76f419 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/save-local-accent-color (keyword 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 0000000000..8ce5ec7298 --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/events.cljs @@ -0,0 +1,30 @@ +(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 [_ [customization-color]] + {:fx [[:dispatch [:profile/save-local-accent-color customization-color]] + [:dispatch [:navigate-back]] + [:dispatch + [:toasts/upsert + {:type :positive + :theme :dark + :text (i18n/label :t/accent-colour-updated)}]]]})) + +(rf/reg-event-fx :profile/save-local-accent-color + (fn [{:keys [db]} [customization-color]] + {:db (assoc-in db [:profile/profile :customization-color] customization-color)})) + +(defn edit-accent-colour + [{:keys [db]} [customization-color]] + (let [key-uid (get-in db [:profile/profile :key-uid])] + {:fx [[:json-rpc/call + [{:method "wakuext_setCustomizationColor" + :params [{:customizationColor customization-color + :keyUid key-uid}] + :on-success [:profile/edit-accent-colour-success customization-color] + :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 0000000000..af1642666c --- /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 new-color] + :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 0000000000..571bf77eb2 --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/style.cljs @@ -0,0 +1,30 @@ +(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 + :justify-content :space-between}) + +(def padding-horizontal + {:padding-horizontal 20}) + +(def color-title + {:color colors/white-70-blur + :margin-top 20 + :margin-bottom 16}) + +(def button-wrapper + {:margin-vertical 12 + :padding-horizontal 20}) + +(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 0000000000..e0f8db4a0e --- /dev/null +++ b/src/status_im/contexts/profile/edit/accent_colour/view.cljs @@ -0,0 +1,66 @@ +(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}} + [rn/view {:style style/padding-horizontal} + [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 + :container-style style/padding-horizontal + :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 da20a58e4f..1328fc9a8b 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 2b36dd728e..a2b8f4df5d 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/options.cljs b/src/status_im/navigation/options.cljs index 93b67c20be..db545150d2 100644 --- a/src/status_im/navigation/options.cljs +++ b/src/status_im/navigation/options.cljs @@ -2,7 +2,8 @@ (:require [quo.foundations.colors :as colors] [quo.theme :as quo.theme] - [react-native.platform :as platform])) + [react-native.platform :as platform] + [status-im.navigation.transitions :as transitions])) (defn default-options [] @@ -88,6 +89,13 @@ :orientation ["portrait"] :backgroundColor :transparent}})) +(def transparent-modal-screen-options + (merge + transparent-screen-options + {:animations (merge + transitions/new-to-status-modal-animations + transitions/push-animations-for-transparent-background)})) + (def sheet-options {:layout {:componentBackgroundColor :transparent :orientation ["portrait"] diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index 2a3da37c86..2cd5e60e2a 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -35,6 +35,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,11 +174,15 @@ :component profiles/view} {:name :edit-profile - :options options/transparent-screen-options + :options options/transparent-modal-screen-options :component edit-profile/view} + {:name :edit-accent-colour + :options options/transparent-modal-screen-options + :component edit-accent-colour/view} + {:name :edit-name - :options options/transparent-screen-options + :options options/transparent-modal-screen-options :component edit-name/view} {:name :new-to-status diff --git a/status-go-version.json b/status-go-version.json index c055e46c48..59f4e81d7a 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": "v0.174.1", + "commit-sha1": "70ee70a19aeafb34e51db1e771b5472fd2568ba9", + "src-sha256": "1v2mg106r4dzl0hf36nr0jz5wnszk03nmasqvwsvzsrypkcd01c4" } diff --git a/translations/en.json b/translations/en.json index 9b119a1ae0..edd2a9add7 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",