From f631e1fe9da6bc61347f43edb2b9d171c6a26bc6 Mon Sep 17 00:00:00 2001 From: Mohsen Date: Wed, 20 Dec 2023 17:03:49 +0300 Subject: [PATCH] [#17393] feat: add new setting ui (#18118) --- .../images/icons2/20x20/automatic@2x.png | Bin 714 -> 609 bytes .../images/icons2/20x20/automatic@3x.png | Bin 1122 -> 873 bytes resources/images/icons2/20x20/offline@2x.png | Bin 0 -> 414 bytes resources/images/icons2/20x20/offline@3x.png | Bin 0 -> 579 bytes src/legacy/status_im/browser/core_test.cljs | 11 +++-- .../buttons/logout_button/component_spec.cljs | 31 ++++++++++++ .../buttons/logout_button/style.cljs | 15 ++++++ .../buttons/logout_button/view.cljs | 34 +++++++++++++ .../drawers/action_drawers/style.cljs | 23 +++++++-- .../drawers/action_drawers/view.cljs | 27 ++++++++-- .../components/dropdowns/dropdown/view.cljs | 22 +++++---- .../settings/category/settings/view.cljs | 4 +- .../components/settings/category/style.cljs | 2 +- .../settings/settings_item/style.cljs | 12 ++--- .../settings/settings_item/view.cljs | 4 +- .../components/text_combinations/style.cljs | 3 +- .../components/text_combinations/view.cljs | 5 +- src/quo/core.cljs | 2 + src/quo/core_spec.cljs | 1 + src/status_im/common/home/top_nav/view.cljs | 2 +- .../profile/settings/header/avatar.cljs | 2 +- .../profile/settings/header/utils.cljs | 21 ++++++++ .../profile/settings/header/view.cljs | 35 ++++++++----- .../contexts/profile/settings/list_items.cljs | 34 ++++++++++--- .../contexts/profile/settings/style.cljs | 4 +- .../contexts/profile/settings/view.cljs | 45 +++++++++++------ .../settings/visibility_sheet/view.cljs | 46 ++++++++++++++++++ 27 files changed, 309 insertions(+), 76 deletions(-) create mode 100644 resources/images/icons2/20x20/offline@2x.png create mode 100644 resources/images/icons2/20x20/offline@3x.png create mode 100644 src/quo/components/buttons/logout_button/component_spec.cljs create mode 100644 src/quo/components/buttons/logout_button/style.cljs create mode 100644 src/quo/components/buttons/logout_button/view.cljs create mode 100644 src/status_im/contexts/profile/settings/header/utils.cljs create mode 100644 src/status_im/contexts/profile/settings/visibility_sheet/view.cljs diff --git a/resources/images/icons2/20x20/automatic@2x.png b/resources/images/icons2/20x20/automatic@2x.png index 32fae7f797a05194fce9b649bbb0e03ada456ae6..a2723d294aec49eb96530fb19d2ebd995aa64a4c 100644 GIT binary patch delta 535 zcmV+y0_gq91>ppcReu5YNkl}~aH@;_ng9@e);?wNXiWJs+aMK06 zHau9e69}LXo7+tc1ob}L==1L3dysW+W*n7AkU;3UX@BD`Kf2kBb0zDK!S6_OSu7H( zb?$x$1PPDAT{AZtauU*Y=ndxX9Z4e^Zqsj(bE8ii$Wh@H?V5PW#-`lVC)JUNL?V$$By#e6 Z0i58)84zZ>5UBtF002ovPDHLkV1hbJ_fr4> delta 640 zcmV-`0)PGC1j+@FReu6sNklNpL1daVcoB9x5$++lnSV5WgPv-f>9l2k+Ac-d z>NFUOU)?ZzkU?wAk8x?pT&cMxPQc*7$Meqcm@!?uBqLWkJ*gv1gFoGi;k^dcT)>H$ ztFZu&fIy2+=WjbXbAe}Q4m?gri5e`O{BCktbCx8gumW@G=WG4;wQAtdpsP8J$LsLJ zJ`PKmyJOOZ$bZh@bT;q1n6o5n-o?$!Z_|EBa~XkNEE~I^^k`%A7Y^iOZ+o;(It8o} zmKW@;O&iY0_iW@Dv{5Z-dSVTt3pheB%l*V%rw9?WS!A1l9f*B@Z%`_Uy}J;-(H(Rb z)+(~fO#@UyK8ds=KK5vs2P!+7o7zT^_V8 zldDOO{CUqibv>36CjV<#kG@GJv!4TP*ZVll%D{}_`=f)ZlJaUc8E7m2ART=gjBSY6 zQ^+qAKbpR1@O!51X%ir}&gLIYEXy=KX$ClEEYGG5Lz^<4+@ooeJLT49fJ0+7H8nLg a&xC*RuMTI^yZ(y+0000bv diff --git a/resources/images/icons2/20x20/automatic@3x.png b/resources/images/icons2/20x20/automatic@3x.png index acdd9817678c8a66030ac7c66d4b3b2c6e156d43..3a96a8a65100b0a683f09a51f8ac1e1e528b32f4 100644 GIT binary patch delta 801 zcmV++1K#}N21yaD;vIr*tcP=Pvj*vZh({^J@LozjXzl4QW|27ma?|pe+`u*z$a2&^R z9LI4S$8j9T`QJcTk>S~8JDoz0fI38w0a7+oo*>~309}MMIe*W)TV<0@b~bD$ko1tK z1EK?v%|4p2)(y8`qzRmV@8%_}K(t{tnzg1h6r-B{6@|@w@72v>I~&bfghMvj0UgIr z66(hqPauNP=gVFas%x!Tw%e~WyKy$^wJN+em=zB0c+AG>@Et^8j_~N@@`w!->H!4h z{@(V}#paFE(SH#F6|e%7VDY27-?xl0MOY$hGRsr|OB0gFu4-1miVAC_)e)9GE6bQ8 z*4B=xi|+lNm1PVDon|Jyr#H2GS{>n5sE$l#p+357mbb*(%nI#0IrNmM3`=zR$~gcl zAsNsAE79dY2e5AV(35LT(^VJYX|)4Zcsb{9AKtxb1%GxOC9JL5%PPYyz}H}gzAd$2 zjE?f#5MOBesSFd+b1;KtO=En* z5+096Ubw48RJX zn(|l~6s(zU6;e2;{P;vFbGN!_0 zDU-Ql3+mVcl z_pBrbzg}2`B~Pvl5UwCi2XfLk>4@?B^pP_v&b|NW@U|Bn;5%HdwfmFaaU92S9LI4S f#~N`Q$C=|NI*2DNQy?BJ00000NkvXXu0mjf$^(Jf delta 1052 zcmV+%1mpYZ2I2^iReuBbNklny-v3<6bJ!g<_Q*l--c34^_rjVezf`l z9*@W4@pwEQkH=F2gFT7+gZgI^gelNqW5dNlOo=f_UYxgvaDPPDkLxx0uoeyZqT$@m zKw=2V`*t+Mo|F=-B7>>Dl*ga2;f8puZ(r05!Q6ZK{Bak1q9RW$F4>qT;-?{|t-i!r z=Ig@`Q5PlHDY*A`a0S?#T_QKEo*0WxS>a#xdsoKt4R8-%5_O4vXP5Aef+eaUP1C+S z(!fIz;WnUF)PHUzMYkoYA*H4-CGl`yBD_Z2`nw$^MK`I)C{ewj)V^~fR$+uRNnaJ+ zI{mG85m@uikys_1$a<%5+5wzb@d=*Ni%h>1XTb zSV`&l^`JpUBkLB+h@xB_f76c}Rw99lF_PZPyZJ(JR)4dp9ccQ&A-ZF~JpZ<}Y}1;R zG#&tMeQh8~iO-UDG}ennN(ZUEb}d#(t^GM~6S3Dgj95i~+#lx`S%hahvi%pXk=ng@ z{`kuk@3ZK-_qBt0YG)D7qFW7jdBex(9vtSGUsG9hq4i>0FV4Ro&aaOZ-8oXrUr;cy zO;p6PSbrt3XyS;}ES{2t;Snkz>!;VPmG~-)CG&`w*;R+L0<--uZ!?Tae3gY$G)Ov< z5S3t(yoKpte?^5z`x=td7II~EjMr>c`6^GH@QFc%k#Ip#G^_Gep0T7fC#V1!!F;}E zv-*;LJXktENoo2E6~K0V_h;fte3eButq~dKA%Ci%X!mECKOGhRlhPX9q8jSIy!pMk zY)A=J`6@+?FeI5Xjf=aYhhss_f{5G8GwPMrQd3(ejBt!K6zg%#vMoz(R4tmLf7;P#*|OG4 z>p0aKZaZxQbr3(bYlHagScDz>nlVG60x9*@W4@pwFY^A$f4 Wr>SA#dYg;@0000(R_SS5LXCfe=CnA%qY@2qA>$M(_w0|CYn1$EHHxsbU1t(dE-SQ8@;5 zKR0P_@^P(&GuOa1=xEUE!h)`Hy$F8hL7I66PjIsHce$BzIa)QWsn!3U`f~K^&%qX) zxKwy&cexFeDIOppO}~uSW+0;nw#q`w90Zc_kz^oIFO zQ@`OsF5ASgW@t?hM6?Q@SGO-Ga8RrKs#duJ0k6V+*?^P!L(;l7E${&H0Zs(+79_O5 zD*75u^lE2Dz+2MXW_9=8Bapc5w4N$vgDw%fwDGz|-Z^L>&>SfvplnL3_c1GGkWP z(Eo=g {:border-radius 12 + :margin-horizontal 8} + + sub-label + (assoc :height 56) + + (not sub-label) + (assoc :height 48) + + disabled? + (assoc :opacity 0.3) + + (= state :selected) + (assoc :background-color + (if blur? + colors/white-opa-5 + (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 cc4c5b2e36..0b27585c5d 100644 --- a/src/quo/components/drawers/action_drawers/view.cljs +++ b/src/quo/components/drawers/action_drawers/view.cljs @@ -38,13 +38,22 @@ add-divider? theme accessibility-label - icon-color]}] + icon-color + no-icon-color? + state + customization-color + blur?]}] [:<> (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 + :blur? blur? + :theme theme}) :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme) :on-press on-press} [rn/view @@ -54,8 +63,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 +82,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 +97,13 @@ :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} + [icon/icon :i/check + {:color (if blur? + colors/white + (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 52d3d1ea1a..655e3b8d04 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/quo/components/settings/category/settings/view.cljs b/src/quo/components/settings/category/settings/view.cljs index 0e736b86a9..18073c404c 100644 --- a/src/quo/components/settings/category/settings/view.cljs +++ b/src/quo/components/settings/category/settings/view.cljs @@ -8,8 +8,8 @@ [react-native.core :as rn])) (defn- category-internal - [{:keys [label data blur? theme]}] - [rn/view {:style (style/container label)} + [{:keys [label data blur? container-style theme]}] + [rn/view {:style (merge (style/container label) container-style)} (when label [text/text {:weight :medium diff --git a/src/quo/components/settings/category/style.cljs b/src/quo/components/settings/category/style.cljs index a64be4780a..dd39ddd1fe 100644 --- a/src/quo/components/settings/category/style.cljs +++ b/src/quo/components/settings/category/style.cljs @@ -17,7 +17,7 @@ :background-color (if blur? colors/white-opa-5 (colors/theme-colors colors/white colors/neutral-95 theme)) - :border-width 1 + :border-width (if blur? 0 1) :border-color (if blur? colors/white-opa-5 (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))}) diff --git a/src/quo/components/settings/settings_item/style.cljs b/src/quo/components/settings/settings_item/style.cljs index f61864949c..5f3ffac613 100644 --- a/src/quo/components/settings/settings_item/style.cljs +++ b/src/quo/components/settings/settings_item/style.cljs @@ -2,12 +2,12 @@ (:require [quo.foundations.colors :as colors])) -(defn container - [{:keys [container-style]}] - (merge {:padding 12 - :flex-direction :row - :justify-content :space-between} - container-style)) +(def container + {:padding-horizontal 12 + :padding-top 12 + :padding-bottom 14 + :flex-direction :row + :justify-content :space-between}) (defn left-sub-container [{:keys [tag description]}] diff --git a/src/quo/components/settings/settings_item/view.cljs b/src/quo/components/settings/settings_item/view.cljs index 1b4748db95..f7cdd2464f 100644 --- a/src/quo/components/settings/settings_item/view.cljs +++ b/src/quo/components/settings/settings_item/view.cljs @@ -101,9 +101,9 @@ nil)]) (defn- internal-view - [{:keys [title on-press action-props accessibility-label] :as props}] + [{:keys [title on-press action-props accessibility-label container-style] :as props}] [rn/pressable - {:style (style/container props) + {:style (merge style/container container-style) :on-press on-press :accessibility-label accessibility-label} [rn/view {:style (style/left-sub-container props)} diff --git a/src/quo/components/text_combinations/style.cljs b/src/quo/components/text_combinations/style.cljs index 37103d13f6..cfe494d236 100644 --- a/src/quo/components/text_combinations/style.cljs +++ b/src/quo/components/text_combinations/style.cljs @@ -12,5 +12,6 @@ (def emoji-hash {:margin-top 8 - :letter-spacing 0.5 + :letter-spacing 2 + :font-size 13 :line-height 20.5}) diff --git a/src/quo/components/text_combinations/view.cljs b/src/quo/components/text_combinations/view.cljs index e9bdae350c..0b3061efb8 100644 --- a/src/quo/components/text_combinations/view.cljs +++ b/src/quo/components/text_combinations/view.cljs @@ -59,8 +59,9 @@ description]) (when emoji-hash [text/text - {:number-of-lines 1 - :style style/emoji-hash} + {:number-of-lines 1 + :accessibility-label :emoji-hash + :style style/emoji-hash} emoji-hash])]) (def view (theme/with-theme view-internal)) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 18043d8708..dde141b2aa 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -14,6 +14,7 @@ quo.components.buttons.button.view quo.components.buttons.composer-button.view quo.components.buttons.dynamic-button.view + quo.components.buttons.logout-button.view quo.components.buttons.predictive-keyboard.view quo.components.buttons.slide-button.view quo.components.buttons.wallet-button.view @@ -182,6 +183,7 @@ (def button quo.components.buttons.button.view/button) (def composer-button quo.components.buttons.composer-button.view/view) (def dynamic-button quo.components.buttons.dynamic-button.view/view) +(def logout-button quo.components.buttons.logout-button.view/view) (def predictive-keyboard quo.components.buttons.predictive-keyboard.view/view) (def slide-button quo.components.buttons.slide-button.view/view) (def wallet-button quo.components.buttons.wallet-button.view/view) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index c394a907f6..dc67a4bfac 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -6,6 +6,7 @@ [quo.components.browser.browser-input.component-spec] [quo.components.buttons.button.component-spec] [quo.components.buttons.composer-button.component-spec] + [quo.components.buttons.logout-button.component-spec] [quo.components.buttons.predictive-keyboard.component-spec] [quo.components.buttons.slide-button.component-spec] [quo.components.buttons.wallet-button.component-spec] diff --git a/src/status_im/common/home/top_nav/view.cljs b/src/status_im/common/home/top_nav/view.cljs index fcea870bd4..5833e9fb95 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/avatar.cljs b/src/status_im/contexts/profile/settings/header/avatar.cljs index a5952b24b7..9b6c9a9c21 100644 --- a/src/status_im/contexts/profile/settings/header/avatar.cljs +++ b/src/status_im/contexts/profile/settings/header/avatar.cljs @@ -13,7 +13,7 @@ [{:keys [scroll-y full-name online? profile-picture customization-color]}] (let [image-scale-animation (reanimated/interpolate scroll-y scroll-animation-input-range - [1 0.5] + [1 0.4] header-extrapolation-option) image-top-margin-animation (reanimated/interpolate scroll-y scroll-animation-input-range 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 0000000000..e10d6b3bb1 --- /dev/null +++ b/src/status_im/contexts/profile/settings/header/utils.cljs @@ -0,0 +1,21 @@ +(ns status-im.contexts.profile.settings.header.utils + (:require [status-im.constants :as constants] + [utils.i18n :as i18n])) + +(defn visibility-status-type-data + [{:keys [status-type]}] + (condp = status-type + constants/visibility-status-automatic + {:status-title (i18n/label :t/status-automatic) + :status-icon :i/automatic} + + constants/visibility-status-always-online + {:status-title (i18n/label :t/online) + :status-icon :i/online} + + constants/visibility-status-inactive + {:status-title (i18n/label :t/offline) + :status-icon :i/offline} + + {:status-title (i18n/label :t/offline) + :status-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 79e5a08a58..07a4fe597c 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,10 +16,14 @@ (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) - emoji-string (string/join emoji-hash)] + emoji-string (string/join emoji-hash) + {:keys [status-title status-icon]} (header.utils/visibility-status-type-data status)] [:<> [header.shape/view {:scroll-y scroll-y @@ -34,16 +38,21 @@ :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 status-icon + :on-press #(rf/dispatch [:show-bottom-sheet + {:shell? true + :theme :dark + :content (fn [] [visibility-sheet/view])}])} + status-title]]] [quo/text-combinations - {:container-style style/title-container - :emoji-hash emoji-string - :title full-name}]])) + {:title-accessibility-label :username + :container-style style/title-container + :emoji-hash emoji-string + :title full-name}]])) (def view (quo.theme/with-theme f-view)) diff --git a/src/status_im/contexts/profile/settings/list_items.cljs b/src/status_im/contexts/profile/settings/list_items.cljs index 181437cbdc..3e86178328 100644 --- a/src/status_im/contexts/profile/settings/list_items.cljs +++ b/src/status_im/contexts/profile/settings/list_items.cljs @@ -8,73 +8,93 @@ :on-press not-implemented/alert :image-props :i/edit :image :icon + :blur? true :action :arrow} {:title (i18n/label :t/password) :on-press not-implemented/alert :image-props :i/password :image :icon + :blur? true :action :arrow}] [{:title (i18n/label :t/messages) :on-press not-implemented/alert :image-props :i/messages :image :icon + :blur? true :action :arrow} {:title (i18n/label :t/wallet) :on-press not-implemented/alert :image-props :i/wallet :image :icon + :blur? true :action :arrow} {:title (i18n/label :t/dapps) :on-press not-implemented/alert :image-props :i/placeholder :image :icon + :blur? true :action :arrow} - {:title "Browser" + {:title (i18n/label :t/browser) :on-press not-implemented/alert :image-props :i/browser :image :icon + :blur? true :action :arrow} {:title (i18n/label :t/keycard) :on-press not-implemented/alert :image-props :i/keycard :image :icon + :blur? true :action :arrow}] [{:title (i18n/label :t/syncing) - :on-press not-implemented/alert + :on-press #(rf/dispatch [:navigate-to :settings-syncing]) :image-props :i/syncing :image :icon + :blur? true :action :arrow} {:title (i18n/label :t/notifications) - :on-press not-implemented/alert - :image-props :i/notifications + :on-press #(rf/dispatch [:navigate-to :notifications]) + :image-props :i/activity-center :image :icon + :blur? true :action :arrow} {:title (i18n/label :t/appearance) - :on-press not-implemented/alert + :on-press #(rf/dispatch [:navigate-to :appearance]) :image-props :i/light :image :icon + :blur? true :action :arrow} {:title (i18n/label :t/language-and-currency) :on-press not-implemented/alert :image-props :i/globe :image :icon + :blur? true :action :arrow}] [{:title (i18n/label :t/data-usage) :on-press not-implemented/alert :image-props :i/mobile :image :icon + :blur? true :action :arrow} {:title (i18n/label :t/advanced) - :on-press not-implemented/alert + :on-press #(rf/dispatch [:navigate-to :advanced-settings]) :image-props :i/settings :image :icon + :blur? true :action :arrow}] ;; temporary link to legacy settings [{:title "Legacy settings" :on-press #(rf/dispatch [:navigate-to :my-profile]) :action :arrow :image :icon - :image-props :i/toggle}] + :blur? true + :image-props :i/toggle} + {:title "Quo preview" + :on-press #(rf/dispatch [:navigate-to :quo-preview]) + :action :arrow + :image :icon + :blur? true + :image-props :i/light}] [{:title (i18n/label :t/about) :on-press not-implemented/alert :action :arrow} diff --git a/src/status_im/contexts/profile/settings/style.cljs b/src/status_im/contexts/profile/settings/style.cljs index bb1ea855a6..d90b8ca684 100644 --- a/src/status_im/contexts/profile/settings/style.cljs +++ b/src/status_im/contexts/profile/settings/style.cljs @@ -7,5 +7,7 @@ :background-color (colors/resolve-color customization-color theme 40)}) (def footer-container - {:padding-horizontal 20 + {:margin-top 8 + :margin-bottom 50 + :padding-horizontal 20 :padding-vertical 12}) diff --git a/src/status_im/contexts/profile/settings/view.cljs b/src/status_im/contexts/profile/settings/view.cljs index 7bc542e2df..10f8258d2d 100644 --- a/src/status_im/contexts/profile/settings/view.cljs +++ b/src/status_im/contexts/profile/settings/view.cljs @@ -9,6 +9,7 @@ [status-im.contexts.profile.settings.header.view :as settings.header] [status-im.contexts.profile.settings.list-items :as settings.items] [status-im.contexts.profile.settings.style :as style] + [status-im.contexts.shell.jump-to.constants :as jump-to.constants] [utils.debounce :as debounce] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -16,9 +17,10 @@ (defn- settings-item-view [data] [quo/category - {:list-type :settings - :blur? true - :data data}]) + {:list-type :settings + :container-style {:padding-bottom 0} + :blur? true + :data data}]) (defn scroll-handler [event scroll-y] @@ -28,11 +30,11 @@ (defn- footer [logout-press] [rn/view {:style style/footer-container} - [quo/button - {:on-press logout-press - :type :danger - :icon-left :i/log-out} - (i18n/label :t/logout)]]) + [quo/logout-button {:on-press logout-press}]]) + +(defn- get-item-layout + [_ index] + #js {:length 48 :offset (* 48 index) :index index}) (defn- settings-view [theme] @@ -42,7 +44,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 @@ -50,19 +53,33 @@ :icon-name :i/close :on-press #(rf/dispatch [:navigate-back]) :right-side [{:icon-name :i/multi-profile :on-press #(rf/dispatch [:open-modal :sign-in])} - {:icon-name :i/qr-code :on-press not-implemented/alert} - {:icon-name :i/share - :on-press #(debounce/dispatch-and-chill [:open-modal :share-shell] 1000)}]}]] + {:icon-name :i/qr-code + :on-press #(debounce/dispatch-and-chill [:open-modal :share-shell] 1000)} + {:icon-name :i/share :on-press not-implemented/alert}]}]] [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 + :get-item-layout get-item-layout + :initial-num-to-render 6 + :max-to-render-per-batch 6 :shows-vertical-scroll-indicator false :render-fn settings-item-view :footer [footer logout-press] :scroll-event-throttle 16 :on-scroll #(scroll-handler % scroll-y) - :bounces false}]])) + :bounces false}] + [quo/floating-shell-button + {:key :shell + :jump-to + {:on-press (fn [] + (rf/dispatch [:navigate-back]) + (debounce/dispatch-and-chill [:shell/navigate-to-jump-to] 500)) + :customization-color customization-color + :label (i18n/label :t/jump-to)}} + {:position :absolute + :bottom jump-to.constants/floating-shell-button-height}]])) (defn- internal-view [props] 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 0000000000..a1673bb004 --- /dev/null +++ b/src/status_im/contexts/profile/settings/visibility_sheet/view.cljs @@ -0,0 +1,46 @@ +(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 + [] + (let [{:keys [public-key]} (rf/sub [:profile/profile]) + {:keys [status-type]} (rf/sub + [:visibility-status-updates/visibility-status-update + public-key]) + customization-color (rf/sub [:profile/customization-color])] + [quo/action-drawer + [[{:icon :i/online + :no-icon-color? true + :blur? 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 + :blur? 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 + :blur? 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)}]]]))