From ed92561cbbbc35232b6911af75590bc8b658e77d Mon Sep 17 00:00:00 2001 From: Mohsen Date: Thu, 7 Dec 2023 18:04:02 +0300 Subject: [PATCH] [#17393] feat: add visibility update sheet --- .../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 .../drawers/action_drawers/style.cljs | 13 +++--- .../drawers/action_drawers/view.cljs | 26 +++++++++--- .../components/dropdowns/dropdown/view.cljs | 22 +++++----- src/status_im2/common/home/top_nav/view.cljs | 2 +- .../profile/settings/header/utils.cljs | 21 ++++++++++ .../profile/settings/header/view.cljs | 26 +++++++----- .../contexts/profile/settings/list_items.cljs | 2 +- .../contexts/profile/settings/view.cljs | 6 ++- .../settings/visibility_sheet/view.cljs | 38 ++++++++++++++++++ 13 files changed, 123 insertions(+), 33 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/status_im2/contexts/profile/settings/header/utils.cljs create mode 100644 src/status_im2/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 (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_im2/common/home/top_nav/view.cljs b/src/status_im2/common/home/top_nav/view.cljs index 0d7008cc2a62..1c5472ac17d9 100644 --- a/src/status_im2/common/home/top_nav/view.cljs +++ b/src/status_im2/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_im2/contexts/profile/settings/header/utils.cljs b/src/status_im2/contexts/profile/settings/header/utils.cljs new file mode 100644 index 000000000000..2deae2ba42f9 --- /dev/null +++ b/src/status_im2/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_im2/contexts/profile/settings/header/view.cljs b/src/status_im2/contexts/profile/settings/header/view.cljs index 4ddec3253d5d..a4a548d9de94 100644 --- a/src/status_im2/contexts/profile/settings/header/view.cljs +++ b/src/status_im2/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-im2.common.not-implemented :as not-implemented] [status-im2.contexts.profile.settings.header.avatar :as header.avatar] [status-im2.contexts.profile.settings.header.header-shape :as header.shape] [status-im2.contexts.profile.settings.header.style :as style] + [status-im2.contexts.profile.settings.header.utils :as header.utils] + [status-im2.contexts.profile.settings.visibility-sheet.view :as visibility-sheet] [status-im2.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_im2/contexts/profile/settings/list_items.cljs b/src/status_im2/contexts/profile/settings/list_items.cljs index 069adf8b96b9..85e02f5d3d54 100644 --- a/src/status_im2/contexts/profile/settings/list_items.cljs +++ b/src/status_im2/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_im2/contexts/profile/settings/view.cljs b/src/status_im2/contexts/profile/settings/view.cljs index 819a1243f786..e13da0213466 100644 --- a/src/status_im2/contexts/profile/settings/view.cljs +++ b/src/status_im2/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_im2/contexts/profile/settings/visibility_sheet/view.cljs b/src/status_im2/contexts/profile/settings/visibility_sheet/view.cljs new file mode 100644 index 000000000000..e08deba4d39a --- /dev/null +++ b/src/status_im2/contexts/profile/settings/visibility_sheet/view.cljs @@ -0,0 +1,38 @@ +(ns status-im2.contexts.profile.settings.visibility-sheet.view + (:require [quo.core :as quo] + [status-im2.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)}]]])