From 1fb71bdfc8c137a36faeefbca25ca10cde2a545c Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Fri, 23 Sep 2022 15:55:34 +0100 Subject: [PATCH] Jc/add channel list item (#14040) * feat: add list item - channel component to quo2 library * fix: adjust size and position of icon for lock in channel avatar --- .../icons/channel-notification20@2x.png | Bin 0 -> 415 bytes .../icons/channel-notification20@3x.png | Bin 0 -> 594 bytes .../icons/channel-notification_dark20@2x.png | Bin 0 -> 424 bytes .../icons/channel-notification_dark20@3x.png | Bin 0 -> 637 bytes resources/images/icons/muted20@2x.png | Bin 0 -> 995 bytes resources/images/icons/muted20@3x.png | Bin 0 -> 1602 bytes .../components/avatars/channel_avatar.cljs | 17 ++--- src/quo2/components/list_items/channel.cljs | 58 ++++++++++++++ src/quo2/foundations/colors.cljs | 13 ++++ src/quo2/screens/avatars/channel_avatar.cljs | 12 +-- src/quo2/screens/list_items/channel.cljs | 72 ++++++++++++++++++ src/quo2/screens/main.cljs | 36 +++++---- 12 files changed, 178 insertions(+), 30 deletions(-) create mode 100644 resources/images/icons/channel-notification20@2x.png create mode 100644 resources/images/icons/channel-notification20@3x.png create mode 100644 resources/images/icons/channel-notification_dark20@2x.png create mode 100644 resources/images/icons/channel-notification_dark20@3x.png create mode 100644 resources/images/icons/muted20@2x.png create mode 100644 resources/images/icons/muted20@3x.png create mode 100644 src/quo2/components/list_items/channel.cljs create mode 100644 src/quo2/screens/list_items/channel.cljs diff --git a/resources/images/icons/channel-notification20@2x.png b/resources/images/icons/channel-notification20@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..916a760774689e1a106801ba31919dad27879b04 GIT binary patch literal 415 zcmV;Q0bu@#P)Y_JD)!1if<<_F9e z=?=fY;6C;_XdSjtPz5aE+z{8fd@`lH;T&2-QwS;kLCL@OLj@t#kQ|aG;09XE9fZUI6Y~m6 z?C9?U=5@A&67Sp`LgIks981ItNHH(!Tlrqr4T<+nSzqG|xJz%PMotwl-%z&cguhrPTe1Ox}8OdeRd6hq4DP3*G7-Nh%F7MIiXFS%Ps>}cY002ov JPDHLkV1nv_Bm@mOX*_*2 z&>`Hwxzmv0te9<_vn08f6aA$JC671heTncw1;>Hx@FAj z4LzM(9OC=*NJ}oH%9h#F_@%Eorj5aWp(Rqc99-OFJoep!Qk;|;^b&XZ4r|YAj4{R- gV~jDz81u6{0P>)#A2*)p82|tP07*qoM6N<$f;(CS&;S4c literal 0 HcmV?d00001 diff --git a/resources/images/icons/channel-notification_dark20@2x.png b/resources/images/icons/channel-notification_dark20@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..cc48273481afe2efa9a2f8d857532e2e15c2176b GIT binary patch literal 424 zcmV;Z0ayNsP)uE0hrDe!Y2qv0EvRq7eLvF3oIQ45|q%96C`CSv^T&U(^Y+Y7Jzf0H^>n3^sx^Jeh>4}y|WG0AP!j9 z_TUp{7$28>)wO6xPtJZoKol^Ao6uvi;)th^l_X>j0;#!G!$pPZX4u#bUe`8nVcsDU zst0#7}{D!d*>XwOz9gr$Nh7i4M04B*9{C(SO z`gK&EzEF$%%bJYMQMk*E{#p3zg08+kj7>k_MHeb=`eGc-++FD zmV||HFNf!ZHi3l{cn;yu`%9YJG;q_W?>Xnb=K#hSV~jDz7-NhvH;uz3NYkvgi)4Xs z=RI8A!Pmp*9vJZp^qq76tA2mwSDpi&^zi%OXqNyv-?Q4c+(m*h6#$Ma!ywu#ITt#Y;cc@-ZF$_6&|n1+tBj` ziu;{B8$m!;VTOH)I9!5i3K8XyZX+5u3lU}D1|pesW(vx{%Eju0(2hbxx=LRMvcRmu z0P#px=s*^j^K5{4`VbKgX)o`4CpYG61tP-daG4_#HXc_m@VFCNhgjGncdlwL%}TuC zWe5?DWSF z(=AcFP!HqdF6Ef^HTTL@H`8|Bx0$LjIV1?(*-^vdH~3ilsoL`zV~jDz7-Nhv#@sH4 Xx!j${_6vH)00000NkvXXu0mjfTc0bs literal 0 HcmV?d00001 diff --git a/resources/images/icons/muted20@2x.png b/resources/images/icons/muted20@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..b694b7967af1eb6a75cebba606e881369249df9b GIT binary patch literal 995 zcmV<9104K`P)Xn~ zUG4dp8QXDEzs9aBB$U6D$ad!O^EdN7CIDM)^>0O>2HBTR1McpcKuAMAKwMbIujWvL zNY;eZ^Bo}Cp!3!kXLYtGKXxf-XPl_TZySlh5w3i~hF1G<26Y0CCpWkJr&iE{n)f03 z3pA;RHV4}Ul}QMUe2w<4Bg2J~qG=BqlHuwG*=T&>bT;9bvkr%VGyWo7M({{{#I<}D z{f=OYKB6y_ROTME&!;9OV8<<~$u#&Cz(F$tLr=4;_vx0gzdB8#qfO$MahXnyGM3DB zk_04>dAQ$%S%#hCgDxn@zPK4sBq!k*vrc=@07VsgaS}4HoY_85oH_3JHU?bk^9Mk>(FLLK66yey`IC@v zQk>ln4P_vCid!JhBoYwejY@7V1PrQ{P(&N0wJ8J1Lrp)tY;25O1#moZ&Z4SCq_@1l ztO_YoTx3Ntw*76|tpq5mWMI8u9B@U|0tHfqlxYux{YW)9vu&qQ8juI)*fA*WWtCJ_ zAjMdWSK8ri1D<*@Iz!79%s>^B5w4VTA-9z*XBl#qsc2MIHy zd*;I_Xlzc2{(?h`z1Nh_mvkqqaL6xMC(|xB@h5mxv3{q0*vtAgcZsd`{(u*keRv!# z_}Hg;a6(G;p!BkwjjSfxT3-#Z+}6AOK~b+-4(_T-JBab`F^{jAeJWKmRh8!5{M+On zp4sQYfWj(iIaNISa_*c!HYA3Sb{^z|mN-a-GTXTP--DU&8Bml? zCO?47<-)kmi-mI$M)J0002ovPDHLkV1n$U$JYP= literal 0 HcmV?d00001 diff --git a/resources/images/icons/muted20@3x.png b/resources/images/icons/muted20@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..f4941dbe344934b6f3f6cbd4366ae80db4082209 GIT binary patch literal 1602 zcmV-I2EF--P)8F)RRlN%BY>hz&eoX;=U@SwJjp0GBs_q`ZWRU0^@)K#Xh_ zfW-!EWd)c@QbnPeZvHb8svh0k(=$r+pucKrq@Hedf9l&gr-x{!nP!@4rkSQj!X{Jo z=Y~)JMoYmLw~xp{)q`J`r55WXSQ65n=gd4tw`pa=1B}vx80@Z{2D=nIU#sVi`dnK-it{*nG(Q9S0 z2kqA->Z#cNxoI>W_~}VW3aSp48V=39>a}T43ss^#8i%^07xG~ctXxq}lH(o*n`h;MQ`6o7O>dvQ3g2y#|;8BZmod_L$)k; zc^X%8zfaEV)N%&KzRO#XKlEWv(81;kVYlXa+%l5qt51IM$x+V06h;2n=Q%+u%pF{3 ziA3+MWpb1|uo8XNPhv&wC>LnhTclf*liY!|^3AVGMaQ;gXhwxPnTD z&-?S_0v$=dPR%5EQp@BhC*ZC<>-Q4iFa(=-o5S*sfv(y>vxzASs)dhcFZ-@GwG%MB zmOb-3M&0SS{3D=+Ei~+DzDyI-*>g$_Tt8^+0x>b1bz4@hE0+m6f=wNH`^iLjPCuUP zP)el>0Cb|5iNy(#jauo!T44Pf!-EK2|Cj0r84WLY7zYLR;4N*N<&=&-qE~ZGL{`W~ z);-KIr*6pBZ04m+@0v1tS{uo6Pvbtir#Oy}*L!fzh;~Fe;A3fM^|D`DUyszA%d^fZn+Sb5gzzZD$y?K{6 z;d4cl4CYDiW3rSzaNk0uUKYxfLFi?^rG}=0Zd3<-c3gyQA7dZpdV~n$+ivpz z(M{Xx?15EuCZt^c|2tyDyVxfd@bNiiRm_47PI%3};mOc7+&`p_rG-2iN3Plo-Ydg)82M`u4#$E3^e|T1!(T-N^&Cp$@dJ zQD+imo4@YDB+v~PJ0O*5X$l8lKFvi-6xnYHsU^g`6yjSNXs4=>D3nK;p<{oNrdYir z)XwT{w)I-udz7Xcn3Xs5)C05fgq}Ds{O5RO{CZ<}gUV%13%5?m3;C4}(xdX_1wBz< zhK0%utm1`6YUOo2pK_x?3s?V;RPT_IbQ8djM8~+OOcHuxz|{lz&m_x0-R&l|_*EnT zpTVzgaT`@3^kww+Jy=uh)cc%?%Y+d;u`h>juUVmU55ybVF<@Cf+s1&sAntGyN``Y6 zNZTXB&sLo>+oOKe!r|DWF`683D32VhGCnvvM^x~5T&9uG{MJyLejitM;)@o-sb#6< zR`*q;QT1`7uh6^u!NwiykWpfIGpvQ>^;)*2_{FjtY8`9Vr~HZ&TpmAufa4i0^{H0k zj9$rOmpASZ+~eCiwY_G>2+T|~%{0?YGrey82QTac`5c7a$^ZZW07*qoM6N<$f{Zr< AKmY&$ literal 0 HcmV?d00001 diff --git a/src/quo2/components/avatars/channel_avatar.cljs b/src/quo2/components/avatars/channel_avatar.cljs index 019e7862a6..26b9bf6019 100644 --- a/src/quo2/components/avatars/channel_avatar.cljs +++ b/src/quo2/components/avatars/channel_avatar.cljs @@ -5,9 +5,8 @@ [quo2.components.markdown.text :as text] [quo.theme :as theme])) -(defn channel-avatar [{:keys [big? lock-status emoji-background-color emoji]}] - (let [locked? (= :locked lock-status) - lock-exists? (and lock-status (not= :none lock-status)) +(defn channel-avatar [{:keys [big? locked? emoji-background-color emoji]}] + (let [lock-exists? (some? locked?) dark? (theme/dark?)] [rn/view {:style {:width (if big? 32 24) :height (if big? 32 24) @@ -24,11 +23,11 @@ (when lock-exists? [rn/view {:style {:position :absolute :left (if big? - 13 - 5) - :top (if big? 14 - 5) + 8) + :top (if big? + 15 + 8) :background-color (if dark? colors/neutral-90 colors/white) @@ -40,6 +39,6 @@ {:color (if dark? colors/neutral-40 colors/neutral-50) - :container-style {:width 16 - :height 16} + :container-style {:width 12 + :height 12} :size 12}]])]])) diff --git a/src/quo2/components/list_items/channel.cljs b/src/quo2/components/list_items/channel.cljs new file mode 100644 index 0000000000..036c2735a6 --- /dev/null +++ b/src/quo2/components/list_items/channel.cljs @@ -0,0 +1,58 @@ +(ns quo2.components.list-items.channel + (:require [quo.react-native :as rn] + [quo2.foundations.colors :as colors] + [quo2.components.counter.counter :as quo2.counter] + [quo2.components.icon :as quo2.icons] + [quo2.components.avatars.channel-avatar :as channel-avatar] + [quo2.components.markdown.text :as quo2.text] + [quo.theme :as theme])) + +(defn list-item [{:keys [name locked? mentions-count unread-messages? + muted? is-active-channel? emoji channel-color] + :or {channel-color colors/primary-50}}] + [rn/view {:style (merge {:height 48 + :display :flex + :border-radius 12 + :flex-direction :row + :justify-content :space-between + :align-items :center + :width "100%" + :padding-left 12 + :padding-right 12} + (when is-active-channel? + {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))} + [rn/view {:display :flex + :flex-direction :row + :justify-content :flex-start + :align-items :center} + [channel-avatar/channel-avatar + {:big? true + :locked? locked? + :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1) + :emoji emoji}] + [quo2.text/text + {:style (merge {:margin-left 12} + (when + (and (not locked?) + muted?) + {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)})) + :weight :medium :size :paragraph-1} (str "# " name)]] + [rn/view {:style {:height 20}} + (when (and (not locked?) + muted?) + [quo2.icons/icon :main-icons2/muted? + {:size 20 + :no-color true}]) + (when (and (not locked?) + (not muted?) + (pos? (int mentions-count))) + [rn/view {:style {:margin-right 2 + :margin-top 2}} + [quo2.counter/counter {:override-bg-color channel-color} mentions-count]]) + (when (and (not locked?) + (not muted?) + (not (pos? (int mentions-count))) + unread-messages?) + [quo2.icons/theme-icon :main-icons2/channel-notification + {:size 20 + :no-color true}])]]) \ No newline at end of file diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 2446db2342..19ad4a9661 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -13,9 +13,22 @@ (let [rgb (string/split value #",")] (str (string/join "," (butlast rgb)) "," opacity ")"))))) +(def theme-alpha + (memoize + (fn + ([color light-opacity dark-opacity] + (theme-alpha color light-opacity color dark-opacity)) + ([light-color light-opacity dark-color dark-opacity] + (if (theme/dark?) + (alpha light-color light-opacity) + (alpha dark-color dark-opacity)))))) + + ;;;;Neutral ;;Solid + + (def neutral-5 "#F5F6F8") (def neutral-10 "#F0F2F5") (def neutral-20 "#E7EAEE") diff --git a/src/quo2/screens/avatars/channel_avatar.cljs b/src/quo2/screens/avatars/channel_avatar.cljs index d40b70eb10..e9b0e5ebfe 100644 --- a/src/quo2/screens/avatars/channel_avatar.cljs +++ b/src/quo2/screens/avatars/channel_avatar.cljs @@ -14,17 +14,19 @@ {:label "Avatar color" :key :emoji :type :text} - {:label "Lock status" - :key :lock-status + {:label "is Locked?" + :key :locked? :type :select - :options [{:key :unlocked + :options [{:key nil + :value "None"} + {:key false :value "Unlocked"} - {:key :locked + {:key true :value "Locked"}]}]) (defn cool-preview [] (let [state (reagent/atom {:big? true - :lock-status :none + :locked? nil :emoji "🍑" :emoji-background-color :gray})] (fn [] diff --git a/src/quo2/screens/list_items/channel.cljs b/src/quo2/screens/list_items/channel.cljs new file mode 100644 index 0000000000..0d81bff4b4 --- /dev/null +++ b/src/quo2/screens/list_items/channel.cljs @@ -0,0 +1,72 @@ +(ns quo2.screens.list-items.channel + (:require [quo.react-native :as rn] + [reagent.core :as reagent] + [quo.previews.preview :as preview] + [quo2.foundations.colors :as colors] + [quo2.components.list-items.channel :as quo2-channel])) + +(def descriptor [{:label "Muted?:" + :key :muted? + :type :boolean} + {:label "Name" + :key :name + :type :text} + {:label "Number of mentions" + :key :mentions-count + :type :text} + {:label "Unread Messages:" + :key :unread-messages? + :type :boolean} + {:label "Avatar emoji" + :key :emoji + :type :text} + {:label "is Locked?" + :key :locked? + :type :select + :options [{:key nil + :value "None"} + {:key false + :value "Unlocked"} + {:key true + :value "Locked"}]} + {:label "Is Pressed Channel:" + :key :is-active-channel? + :type :boolean} + {:label "Channel color" + :key :channel-color + :type :select + :options [{:key "#00FFFF" + :value "Blue"} + {:key "#FF00FF" + :value "Pink"} + {:key "#FFFF00" + :value "Yellow"}]}]) + +(defn cool-preview [] + (let [state (reagent/atom {:is-active-channel? false + :muted? false + :unread-messages? false + :emoji "🍑" + :channel-color "#4360DF" + :mentions-count "5" + :name "channel" + :locked? true})] + (fn [] + [rn/view {:margin-bottom 50 + :padding-bottom 16 + :padding-right 8 + :padding-left 8 + + :padding-top 16} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60 + :align-items :center} + [quo2-channel/list-item @state]]]))) + +(defn preview-channel [] + [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 ac464dcfcd..d53cc2e9cd 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -7,6 +7,7 @@ [quo.theme :as theme] [quo2.components.markdown.text :as quo2-text] [quo2.components.buttons.button :as quo2-button] + [quo2.screens.avatars.channel-avatar :as channel-avatar] [quo2.screens.avatars.icon-avatar :as icon-avatar] [quo2.screens.avatars.group-avatar :as group-avatar] [quo2.screens.avatars.user-avatar :as user-avatar] @@ -16,12 +17,18 @@ [quo2.screens.community.community-card-view :as community-card] [quo2.screens.dividers.divider-label :as divider-label] [quo2.screens.dividers.new-messages :as new-messages] + [quo2.screens.list-items.dropdown :as dropdown] [quo2.screens.info.info-message :as info-message] [quo2.screens.info.information-box :as information-box] + [quo2.screens.info.lowest-price :as lowest-price] + [quo2.screens.list-items.preview-lists :as preview-lists] + [quo2.screens.list-items.channel :as channel] [quo2.screens.markdown.text :as text] [quo2.screens.messages.gap :as messages-gap] [quo2.screens.notifications.activity-logs :as activity-logs] [quo2.screens.reactions.react :as react] + [quo2.screens.switcher.switcher-cards :as switcher-cards] + [quo2.screens.tabs.account-selector :as account-selector] [quo2.screens.tabs.segmented-tab :as segmented] [quo2.screens.tabs.tabs :as tabs] [quo2.screens.tags.context-tags :as context-tags] @@ -30,12 +37,6 @@ [quo2.screens.tags.status-tags :as status-tags] [quo2.screens.tags.token-tag :as token-tag] [quo2.screens.wallet.token-overview :as token-overview] - [quo2.screens.list-items.preview-lists :as preview-lists] - [quo2.screens.info.lowest-price :as lowest-price] - [quo2.screens.avatars.channel-avatar :as channel-avatar] - [quo2.screens.switcher.switcher-cards :as switcher-cards] - [quo2.screens.tabs.account-selector :as account-selector] - [quo2.screens.list-items.dropdown :as dropdown] [re-frame.core :as re-frame])) (def screens-categories @@ -69,6 +70,9 @@ {:name :new-messages :insets {:top false} :component new-messages/preview-new-messages}] + :dropdowns [{:name :dropdown + :insets {:top false} + :component dropdown/preview-dropdown}] :info [{:name :info-message :insets {:top false} :component info-message/preview-info-message} @@ -78,6 +82,12 @@ {:name :lowest-price :insets {:top false} :component lowest-price/preview-lowest-price}] + :list-items [{:name :channel + :insets {:top false} + :component channel/preview-channel} + {:name :preview-lists + :insets {:top false} + :component preview-lists/preview-preview-lists}] :markdown [{:name :texts :insets {:top false} :component text/preview-text}] @@ -90,6 +100,9 @@ :reactions [{:name :react :insets {:top false} :component react/preview-react}] + :switcher [{:name :switcher-cards + :insets {:top false} + :component switcher-cards/preview-switcher-cards}] :tabs [{:name :segmented :insets {:top false} :component segmented/preview-segmented} @@ -116,16 +129,7 @@ :component token-tag/preview-token-tag}] :wallet [{:name :token-overview :insets {:top false} - :component token-overview/preview-token-overview}] - :dropdowns [{:name :dropdown - :insets {:top false} - :component dropdown/preview-dropdown}] - :list-items [{:name :preview-lists - :insets {:top false} - :component preview-lists/preview-preview-lists}] - :switcher [{:name :switcher-cards - :insets {:top false} - :component switcher-cards/preview-switcher-cards}]}) + :component token-overview/preview-token-overview}]}) (def screens (flatten (map val screens-categories)))