From 6fb4969a0d6195673d422ee22c5751cd36065998 Mon Sep 17 00:00:00 2001 From: Andrea Maria Piana Date: Mon, 18 Jul 2022 12:21:38 +0100 Subject: [PATCH] Add context tags --- resources/images/icons/total_members12@2x.png | Bin 0 -> 384 bytes resources/images/icons/total_members12@3x.png | Bin 0 -> 582 bytes resources/images/icons/total_members16@2x.png | Bin 0 -> 488 bytes resources/images/icons/total_members16@3x.png | Bin 0 -> 684 bytes resources/images/icons/total_members20@2x.png | Bin 0 -> 597 bytes resources/images/icons/total_members20@3x.png | Bin 0 -> 842 bytes src/quo2/components/activity_logs.cljs | 81 ++++++++++++++++ src/quo2/components/button.cljs | 15 ++- src/quo2/components/context_tags.cljs | 61 ++++++++++++ src/quo2/components/group_avatar.cljs | 27 ++++++ src/quo2/components/icon.cljs | 14 ++- src/quo2/components/status_tags.cljs | 63 ++++++++----- src/quo2/foundations/colors.cljs | 61 ++++++++++++ src/quo2/foundations/typography.cljs | 13 +-- src/quo2/screens/activity_logs.cljs | 87 ++++++++++++++++++ src/quo2/screens/context_tags.cljs | 70 ++++++++++++++ src/quo2/screens/group_avatar.cljs | 50 ++++++++++ src/quo2/screens/main.cljs | 12 +++ src/quo2/screens/status_tags.cljs | 21 +++-- 19 files changed, 531 insertions(+), 44 deletions(-) create mode 100644 resources/images/icons/total_members12@2x.png create mode 100644 resources/images/icons/total_members12@3x.png create mode 100644 resources/images/icons/total_members16@2x.png create mode 100644 resources/images/icons/total_members16@3x.png create mode 100644 resources/images/icons/total_members20@2x.png create mode 100644 resources/images/icons/total_members20@3x.png create mode 100644 src/quo2/components/activity_logs.cljs create mode 100644 src/quo2/components/context_tags.cljs create mode 100644 src/quo2/components/group_avatar.cljs create mode 100644 src/quo2/screens/activity_logs.cljs create mode 100644 src/quo2/screens/context_tags.cljs create mode 100644 src/quo2/screens/group_avatar.cljs diff --git a/resources/images/icons/total_members12@2x.png b/resources/images/icons/total_members12@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..a400e2ed01cd41cce9981687c1a7f255c1cf5d2d GIT binary patch literal 384 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9E$svykh8Km+7D9BhG zJ|1!d}9EWF7-i`~{l z&Ze$z-hQJm7iPQnhX*lPzq__uhvSgny5Y2(zXi}hTjcAhqU9LPTDeMq0WOLgkQy?0Whe4XkHI2ZE? zyyf-QJwg`m?niD^VmdKI;Vst01FY93IG5A literal 0 HcmV?d00001 diff --git a/resources/images/icons/total_members12@3x.png b/resources/images/icons/total_members12@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..4b76d4176a89a7654e270445b72ab63b5aae0fb7 GIT binary patch literal 582 zcmV-M0=fN(P)gbWovu}1_B)$R#svTk{PQ|NIIxx52MgNlL z{Er~SUi_y6K55P)p_F(SJc-R4IT};)kGh=&87qmJb2pb<_GP~w zFyhkDpc2C{7?|1~@ zLXE)5e|%@wk3ztcxQ(p)^jJ+>7S{mhlyeJLh@Iq|Q(=VAu0EhZO&dPJReKETHmn^) z+bH1gAmZpOPdbPqWG3R=Y8{X8sHuUL9&KXTYL&5wKtcgi;96jfU}fCkPy%veR=^fI zu=9r;iAL!>RKOIxGI|p8>JA|SbDn-;o#MZ{;J?|vy*VxLGoR(Rc*N4)SNx9T9yJ6C z5irh>r%LQ==xp{Y*~R^m;>fk9utO&4yeJa0je$fO9zYOrmrUh4oMh e^;8^j7W@EUm7Nk+=()830000o&ZGdDq zA^$BvB9TZW6tuvY)9KX4mm!WP938%$w_2?n3^5G=ogd-L7)QItB*U@5AXZ?6 zSpeufIX?C@ryv$!z#SNX&c8yn^G6)}iu+^UEj8*L;GCbqIp2vT6sw%G4b4%2Lt#U6 z6Kzdc>_8tbonN6-bLkkq&u~zXOJP?Qy9$c{UYzTu+;-=lK#4^F590lvR=duScjYK< zbwG(p5eptYY`(z|ivZ+`ceto4;bN9)qi$*z0UVs`re5IAZ9s`d0Mu3GN{(=)r@Y#~ z(5~Q^z~#RV?c5ram~>)pN|TByYGRa9-HN%Hg`~K7DPb+Gkpa585&YjzP{^1=2z_l}lzp`T*QWv3e zdg@%0G?7q7?2&!IyCL3#Kk_)Fi+M_#-%8t)!%=5MApuaK^~Dc< z!1eg@H4I51YB1MG9T!Tat*>!RBcooR)jxFv>!MgKM1iQ!H65~8L6=A*ZkQjT3$^+i SI+JYx0000IqP)m%Izshk`sC$S|ACV(Pcp+tv$+Ue2~y1B8U=5;#kQ!<(37$LBS0a zNI)2IySg}r=JqI0l}TmK{|H1Ct<0fgUDmS48?8W_yN+kSh(s&U&T+Gjb&oB3yip01 zBy7w#C;yt)*T|fi&$Nj1H#Bts; zfxu=vplY$2%=kcqqukDkENI5u%P5+q6yW<3+baF$~7n%^%#D=z8 zKZwU}Vx1@G^Hpb?l)uo_RRN_S+xMLB@=7zc6w?<6@=0gF`I?wt^ojl`@~F?k&{D?% jGoU-nvL|hfM{j0_ z*}XfCf7;baT8M%m2!bH^U-YOT>-GAKKQ6d^kfCR8PrY967Zsw2U=}*yj|sQoo>MAr z4=ntioN*N_7QN;+O1uPu?^yUBa>7lph@Eo#NXPM$+pU*qPr<}{Q{J;;eQo7b@1Bf@;J)fVQ9Am;oP>p6H6DV0 ztA3x-(aYhPjPVe>QvFei^ATrvp@xrH4oR2`7UxrK4b|c0A+A)v@<=MY*6>{QVdWdK z;tsGrj#1MiKac~Sp=Fy0fLBjFRr_*|p7Qr>-5ELHojiP_rXxDUX(kUqL}P7^6EA6v zw=F4E0H~9RmkI!Lk7Pkpy2OJuiWhf9F{hs=VXA1;5`*eYZfdzrBw7H zodvU4L{gV6hY(C)N`ii;=Xr{n)thsRD7kTv%}8B zf-=b#EY{Fd%rx+qdm!uDPC)S8*SU_YOFrCY*{NliD57p@x72e+9ctEDg5}9;C-uYS zy}5aSdfkq5Yu33I9;iNogcUg<{-9FBS#O10!Jk#%r5vNsd&kG_O8z5Pu&zy2 @state + (and (seq button-1-label) + button-1-type) + (assoc :button-1 {:label button-1-label + :type button-1-type}) + + (and (seq button-2-label) + button-2-type) + (assoc :button-2 {:label button-2-label + :type button-2-type}))] + [rn/view {:margin-bottom 50 + :padding 16} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view {:padding-vertical 60 + :background-color colors/neutral-95-opa-80 + :flex-direction :row + :justify-content :center} + [activity-logs/activity-logs props]]])))) + +(defn preview-activity-logs [] + [rn/view {:flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [preview] + :key-fn str}]]) diff --git a/src/quo2/screens/context_tags.cljs b/src/quo2/screens/context_tags.cljs new file mode 100644 index 0000000000..b769e29e53 --- /dev/null +++ b/src/quo2/screens/context_tags.cljs @@ -0,0 +1,70 @@ +(ns quo2.screens.context-tags + (:require [reagent.core :as reagent] + [re-frame.core :as re-frame] + [status-im.multiaccounts.core :as multiaccounts] + [quo.react-native :as rn] + [quo.previews.preview :as preview] + [quo2.foundations.colors :as colors] + [quo2.components.context-tags :as quo2])) + +(def group-avatar-default-params + {:size :small + :color :purple}) + +(def example-pk "0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917") + +(def descriptor [{:label "Type" + :key :type + :type :select + :options [{:key :public-key + :value "Public key"} + {:key :avatar + :value "Avatar"} + {:key :group-avatar + :value "Group avatar"}]}]) + +(defn cool-preview [] + (let [state (reagent/atom {:label "Name" + :type :group-avatar})] + (fn [] + (let [contacts @(re-frame/subscribe [:contacts/contacts]) + descriptor + (cond-> descriptor + (= (:type @state) :group-avatar) + (conj {:label "Label" + :key :label + :type :text}) + (= (:type @state) :avatar) + (conj {:label "Contacts" + :key :contact + :type :select + :options + (map (fn [{:keys [public-key]}] + {:key public-key + :value (multiaccounts/displayed-name + (get contacts public-key))}) + (vals contacts))}))] + [rn/view {:margin-bottom 50 + :padding 16} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view {:padding-vertical 60 + :flex-direction :row + :justify-content :center} + (case (:type @state) + :group-avatar + [quo2/group-avatar-tag (:label @state) group-avatar-default-params] + :public-key + [quo2/public-key-tag {} example-pk] + + :avatar + [quo2/user-avatar-tag {} (:contact @state)])]])))) + +(defn preview-context-tags [] + [rn/view {:background-color (colors/theme-colors colors/white + colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/quo2/screens/group_avatar.cljs b/src/quo2/screens/group_avatar.cljs new file mode 100644 index 0000000000..61ff4b96d4 --- /dev/null +++ b/src/quo2/screens/group_avatar.cljs @@ -0,0 +1,50 @@ +(ns quo2.screens.group-avatar + (:require [reagent.core :as reagent] + [quo.react-native :as rn] + [quo.previews.preview :as preview] + [quo2.foundations.colors :as colors] + [quo2.components.group-avatar :as quo2])) + +(def descriptor [{:label "Size" + :key :size + :type :select + :options [{:key :small + :value "Small"} + {:key :medium + :value "Medium"} + {:key :large + :value "Large"}]} + {:label "Color" + :key :color + :type :select + :options + (map + (fn [c] + {:key c + :value c}) + (-> colors/customization + :light + keys))}]) + +(defn cool-preview [] + (let [state (reagent/atom {:theme :light + :color :purple + :size :small})] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view {:padding-vertical 60 + :flex-direction :row + :justify-content :center} + [quo2/group-avatar @state]]]))) + +(defn preview-group-avatar [] + [rn/view {:background-color (colors/theme-colors colors/white + colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 0147618b1d..f01ecc74bc 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -7,6 +7,9 @@ [quo2.screens.text :as text] [quo2.screens.tabs :as tabs] [quo2.screens.status-tags :as status-tags] + [quo2.screens.context-tags :as context-tags] + [quo2.screens.group-avatar :as group-avatar] + [quo2.screens.activity-logs :as activity-logs] [quo2.screens.counter :as counter] [quo2.screens.segmented :as segmented] [quo.components.safe-area :as safe-area] @@ -21,6 +24,15 @@ {:name :quo2-status-tags :insets {:top false} :component status-tags/preview-status-tags} + {:name :quo2-context-tags + :insets {:top false} + :component context-tags/preview-context-tags} + {:name :quo2-group-avatar + :insets {:top false} + :component group-avatar/preview-group-avatar} + {:name :quo2-activity-logs + :insets {:top false} + :component activity-logs/preview-activity-logs} {:name :quo2-tabs :insets {:top false} :component tabs/preview-tabs} diff --git a/src/quo2/screens/status_tags.cljs b/src/quo2/screens/status_tags.cljs index 29b4da7011..1c87b3d1df 100644 --- a/src/quo2/screens/status_tags.cljs +++ b/src/quo2/screens/status_tags.cljs @@ -5,15 +5,18 @@ [quo2.foundations.colors :as colors] [quo2.components.status-tags :as quo2])) -(def descriptor [{:label "Status" - :key :status - :type :select - :options [{:value "Positive" - :key :positive} - {:value "Negative" - :key :negative} - {:value "Pending" - :key :pending}]} +(def status-tags-options + {:label "Status" + :key :status + :type :select + :options [{:value "Positive" + :key :positive} + {:value "Negative" + :key :negative} + {:value "Pending" + :key :pending}]}) + +(def descriptor [status-tags-options {:label "Size" :key :size :type :select