From 648ac585b4efae1ebdf4e073a9c24974e45ea480 Mon Sep 17 00:00:00 2001 From: Cilibiu Bogdan Date: Sat, 26 May 2018 12:18:28 +0300 Subject: [PATCH] [ADF-2627] Icons-only mode for Info Drawer (#3398) * tab with icon * docs * test --- docs/core/info-drawer-tab.md | 51 ++++++++++++++++++ docs/core/info-drawer.component.md | 3 +- docs/docassets/images/icon-tab.png | Bin 0 -> 12827 bytes docs/docassets/images/label-tab.png | Bin 0 -> 12933 bytes .../info-drawer/info-drawer.component.html | 6 +++ .../info-drawer/info-drawer.component.spec.ts | 10 ++++ lib/core/info-drawer/info-drawer.component.ts | 5 ++ 7 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 docs/core/info-drawer-tab.md create mode 100644 docs/docassets/images/icon-tab.png create mode 100644 docs/docassets/images/label-tab.png diff --git a/docs/core/info-drawer-tab.md b/docs/core/info-drawer-tab.md new file mode 100644 index 0000000000..f2aac6cb82 --- /dev/null +++ b/docs/core/info-drawer-tab.md @@ -0,0 +1,51 @@ +# Info Drawer Tab component + +![Info drawer screenshot](../docassets/images/label-tab.png) + +## Basic usage + +Render a tab with label: + +```html + + + +
Tab1 content
+
+ + +
Tab2 content
+
+
+``` + +Render tab with icon instead of labels: + +```html + + + +
Tab1 content
+
+ + +
Tab2 content
+
+ +
+``` + +![Info drawer screenshot](../docassets/images/icon-tab.png) + +## Class members + +### Properties + +| Name | Type | Default value | Description | +| -- | -- | -- | -- | +| label | `string` | '' | Tab label. | +| icon | `string` | null | The material design icon. | + +## See also + +- [Info drawer layout component](info-drawer.component.md) diff --git a/docs/core/info-drawer.component.md b/docs/core/info-drawer.component.md index 4edde517e4..c893e84734 100644 --- a/docs/core/info-drawer.component.md +++ b/docs/core/info-drawer.component.md @@ -53,4 +53,5 @@ You can also customize the three regions (title, buttons and content) as with th ## See also -- [Info drawer layout component](info-drawer-layout.component.md) +- [Info drawer layout component](info-drawer-layout.component.md) +- [Info drawer layout component](info-drawer-tab.component.md) diff --git a/docs/docassets/images/icon-tab.png b/docs/docassets/images/icon-tab.png new file mode 100644 index 0000000000000000000000000000000000000000..8637d861ae574b7f318c33925b285bb7a53b9f5a GIT binary patch literal 12827 zcmeHsWmJ^k_b(tNNQVdlqkw><(mhJ5l%zC@bT=}j2uLU>NHH5#?u+}MwT3yIXYbFBv(G;J>?cfJRgr{Mo8J)^_GtSW00Z;s~^;muWj&5~qx<8n_wb5DlMk zaEKq##2U++PX&MCg=^6;P)0)KC@5O-DGOc>shi!CD!EC-~6Dr z@~8axy+q#o4011yZxY9OIrB)lgdLk~Ufy2FNWsGj{IVF1ixurMBqDfKjq{WwlkqWo{Ueb;^ z`)lWoQbQtfzF$6qoJU-p+5{O3oLH4L{)?j~nLL~L-`BDDjAF}T4X*Qj#-Su9aDx!U z28vHN-Qd3z_n8(RNc;r5@g5c-o-H=n*8sW7E#+vE>Oe_#ERP`HjO*92JE4rC*s6iT zPWXmc@vZLsSPnr1rnr$o%cl5^czfiyKW^NX3;GG6QKA|S?S;@jC#!=RM>A6s$wP6J z2tUbA4SM8Z-45x_e3-{{Lb?{f3)RiMx56Yyq;jt`gNz?X(^R|&*S58TpV;G-)DJ8# z67B%a?<7vVjl{e`h2IyPxO}jiNs%Fn-hL3F$|L(V&i;;S-P2D^3!&(AwCI0x6t)>;@| zbs!fBNp4@*aq;qPWJE9wwCDcV+a}oV+*#g{J#s#iz)8%w&(Bgz`GxTQebUU>L8z!A z-A!fkr7%i4l`N8>=rr8BXMcoO`ia58$5*g2~4?e_ zHq&g=qKt|YIk3Tn6})|_eZP~)%Gmw8tB_UhRif33VU{beGTXOJS^2~1a_Kzjn4iZ! zziyuO+@o8t>q=K|*X?iR=Go8p%#+O>d;Fr!y6e8R_iVhgje)U7y_<+R{4fwJ!|ngT zPd~84wD7a$H(k+BP9_vOqni7gvw2?1Wophk5A?cJIQ3QohUGt5n}^&r5L2y_J5Je+ zB~ocOX4Cm3x7gS%kRv$qF7Y$B8H(Rhi$;4+dqkT{`&4^*ta1!z%w;rbj43~6RBvr) zjcsjiO@RJ3J(p0q5WUc*Ev1lN(w(GJA(+r|Wo6aNDi5nFYZaRw8<>^jpu?zNp6rH7NM=jgm(XW0+Cc{eeZeuw_!el)KJZy@g? zZFP1tOxRIH>I(*ctJSCNjL{?NjMo&7`ZL!bFi%WS)A zhL=kX%Urg)Lkk6UFY8vlxa3H-)r5%hsr1$G@!M`cJ~`4kl0FbP=t2ED$UQFIbKLf4 z_)e`(y$w-k=a+&@C`oci=1E)ePKwovda-^LeXjZKK>c`dauCJu^F;lL%H+CD{Me~Z zRH(tLKJDKC_-zLqqK5)?n#+junb;NrHg zV4HOI%>^S1^`%wrF7Br~NbjZti3v43r@8G7g!hfPFQ zGn;46kxosq`;5}ed<{Cm?7e2no&{_h)o=J|wz$sBq|SFNfjy4Bn*s5(Vd2|ELaABH zCepfj?{oja@!6Rz-YvXOc+A8vf+w2qpmWxfgN=q7P9nG?NVhsRXg8ZHI-jZ;l|A1H znJ;VNI;@W4f3*7uv2IYaWwTm7%yRnRbmTB9_Qi)P=0Q>T>F3Vfgxwh$Rhm8m8nR7E zQP0=@RxA9cP9qebSnw33ufLJK9yI}V#y3?mG=Z$p`xMSu8YHFd%B%M*tTohVb3WscVyUT`IRL zCb`$I!uqzzst5IV4Kl|MiUsWN*t2Y8ZUixMiPuZmOBnd^pJbvU*Al}khAkud-}Nu1 z8Hl$0IJ47rnb^l`4KCYspCjW9F>D-Lm>Kc!+8h4RQxeaI5=W)AJo8-a)lM#CoOm)Z zU1DJDxKXiUdptDX8Ryq?KF**cGEGoKAWjfZmd4;hSMM}(ytHV*R8xX9c86`Neot*^ z`_abYdF;u)#Wo9jA+vCP7F0}DMz+WNK=QV4(NXOh`&@dGBDZ4yTk$BA)QIP@bt=f9JFOmR`R9n0^{B0u2$e?#F0S1 z>tHpizj2{+SBd4cGK`JHw!=zJzF2KBu&Jz@(%=av{BUcFme!aHJ75d-a|FVPsq;6Wd zxjBjR@p*cB@_GvJI=Wc$-4PQLSE+kDlgU*8i2{;QFswz(79C6TUmV{Ct0~0jnftR$SfM z%iQjXoVC5VgDa3BEg~c;`49d7@#Mb}|Kim9FXvqW!M{2Gdh#!)Bp=3rzYO}1xBi(0 z?vf^w1`yeVjn=x|@+>O8UY;FQAy-$4~TS|e5pJR{am z?;l&UDcm!{P3*7R7B&tpAvpvZ0L{fCYHc1tYfAo}!3sp zl}fySS-^vrO|ZWp{^$As_~-v_e6$sFhl)+a) z?0(aP!Url!J>&t6EFSKutb8Lo2xkirs}>|xj38Dc$;sChKZ_~@0z+KfQ$ulUX2ADE z4+=M#>eK@SZpKjfmJhK#2Dl1P=quw>K%f~70KyZN>jEg0Z$c*3vdp=`-Vo=2OnSnt zAKrone5M9kP+Rfd0P^AiAFunPVt||g;L;KOAHZfnd~#3aOoD3YM0w_uomnGlulE+>USeiL9S z!=PJ135c%&;zS*eSAar*hJ4+!+ZLl}B_Cw626>4Fz?m`u?IdH1?*Y4Mfn#WQcvQep zjEE5B`n8%Gm@*9?*_&$KB z258k1roKR4?-O9_9r)^Ha!B;+0Mm3OmRO8DJ)m>Ndm%o6JWNTxKC%{S1G3CuE%1hD z{$&jDM?n1CfEu%EOTcwY+bN8?uD~vLFO9DH32s1cq)C31Cdvw@Y+0@`WW@!kY0u?*n)tCU+YrYHmLdV8!e7}@~CW_c9jf+Vo8 zDjaPXjhumj3nW_70Imb*yznXo6Fk6kzD&Nou&XfR*Yj!2iaYx<**?CWg)p9R`^eon z=J4H@du$`A)-}{OKYu zaRSeCddRB)#jHSxI3h+PNrTJsV9*0EPjM!vtwxyjFf-RdV?VgYP} z+5l~A7#|PZ4Mgx5Wc!#;l$+%@a=w)iJBdfeJ``Jn@M}Qf%nufDfePio+Z8sJe#x8; z^@7ik2tkqRr4^2vTPOZh!_=DEVB7dU+K$6`ECsk)EXcs&E)aB=FZ=QpD)RNvd{MBw z0?&X4&%Bey-r}AXOvi|PrqsVePQ zcRvm0ba7xV)b{U3UOm67nK-{3ADM=v_Yr zBM>Nto5o&0zsrU;A(%Hs$Xd?ft)%2iT2Q!J<(=-6mH^W&RS4W0IO8D1!b&Y;5)Gx6 za46A+`tMn?2s`LWdrZs?!S+3SqTYDv>P*Ck8p}K@YQxo_CSTWF4^N5%E@LC&BUA<< zpr*3?1s6A*v8Bk*z~8_4VK>!4)NYX)AH&SddBs}IK@^XK@R~~9P6~&J$(^;z1>E<* zNimK?&#rPz@_AfrG=r_(d`+>Ul11IFfj3-gV8Y-mAtuYeH9qdm#@zAT>l$MN54+K1 zmyHk(zIyLb>(0xpVEeKov)Xx`4B=5iiv6@!$mHzh!)vEQ!u_ml;Mo{yyE4b%3<~{P zif^>Oz_5n1o4BRi&TgxJORM$#z`RqTS+7C*Ky~fb35T&yWB=l*OnS?O>&bxvgFHkG zB&fPLjuq2D=T?NKGwJwl(q|{&-`a?5MhZGf*!d3w8=4uJh7+H&8v`HtJPk8Wf`yk&x%1EG{E}^zfMSHhf*>_08G?{(ycc1Nm^4M+ ziq4&{%y-6UEY~C!Y7eHmEY7 z-BMaf3zz4wl3fUgBa%1@9g}$QU9X%o7`Awrecc&5uzmY*;J!Sr4TvD2=quK0K&1gh z_c8eQc;DrQhXyJ;ui3iV%L5iWAVVpC(brXNbe*E?$3BNh8pC4PvTn;L^KNCzGE+F> zQcK>_2D7l|l*HX|5=*(d{CdBIxV00+Q?u)k=mN0+Z7fHtOiT^ohg#P~hyr)Oso=%J zGEC0lvGsaBOh&gQ@xoC6uXu(IeQ3Oksu|)XJ8Jhor*Cg5tkOBr^L!SY>)S|ll&nj? zcs=kr@cDE7%;={$Wg6?Q z-9SY3uYz2JmRdt%r`kc{@p-U`pXH}>gQ126gRMs9!vb$_)r+jc&NnV;P+Jgyw)?at zEb6nzO|L`!O)OW=ItfvGA~o~>9@0snP=6Deq872J4{_rw{`(A%N(uP9J$)LyMOD%4 zTl;+H-tI$5=B{3{5E_s}KB(rI)qY0AXVq>LtVJc$d*A=Et(_xrds1zAsh|$jNv`ZQ zrbfX0l2~V48;~ig60X>2n{Laq&iK)_moyYAW^6cA#hOPDqk2ReAAsXptww~{B+;~G zy9O)30&FJ>slK@6&rLFK<`KU_w;sZoH|MQffEg}4j|Z`_Th9Yt`Ck?U6`;r$tM^5C z3c;{e>0i~$m13>ZxegZ9@%P{@d((9e1^zn|am5p-uqwYg$EmUphEOlWJ`&O+IH?IaFgEV86m*U4!Dg6HflKoPaR&1ZguBa2#^IP z0uKsg3*7+-??G_I*n~dA6iSVtbZgANhAG{$z&?AXJBq2-@PYU6@2Fs^xL08KDmhya zQ@R1cBAHgCVE7RnOu0xF8c?yCY6C+Hjtnt%ct0>O)%wGI0LPySvTAB_Aw~$M+_YuX z#FUM6-WW)Eh8vzC8kBqG3l)&z|=&yTNG2!8GQE#H|mRv7`aex&?E`NT%|YW zJR@n_FLms^AS0!w5qcKUkzobL5-w6Ile=$m%gr4&G*22 zw}OYj0PVT1enRFdys*=~D#E z`Wzs0-k@&B2zW>X1lSA=IRI5mk8uf6Jk}>H}75v$kE)D*&qX z7K~j^!sBiN$@UcBnjjzLP63dJ$N>_ReMk;)L-2q&qSsm&Enaa$;be85Rt&(l=rpWW zX{kpx_kk8KfoTL&Jc2|(fRYi21#wOq4CYgyb=w-5eh}b&&IT@J597Qs_)wrwpc`%< z6!6}qjCr`g zJi;a@0|w^`n7=l!Aq31Lj|S#t^k;BlR*Mz~_mo>Jp9+{qs1{(#Y@9xL6T_+1rTC%$6&?*9~dmjasHVB?xN-3)+>J{fV$^N@kaJPbQofY z9&nwV+~vPXuL92^6VVy z&v%NwLyFAyGR>!(4Hmhn9xgIf$L^c6bvY#^{cc-`x&76V+`fay*ng0*aIA?w(yptC z{=jv;Kp)oB+c#`fC%-@+OsIsCGU^+3j;P7llS=KYH=GkN`JUBQotm?XyWdB=va*Xl-XKvPg!l)RLk4DW5NFI!8 z=77(b`$xug%l;H=Rq5mBdmRjp)H80|tpv%TOx}4a8{9fNPaT)~k}a8F>vvqo^(+$) zk^ad2jTwNoy}*w@kNVGORMKRk-keGV^nR*Wlo|yu$3wva{VOs z&(loOl^dQ#TaV--Aa*FFZZ^^e-X&$7;h3@c?-^uX?4PrXv)WD&xy{KWc-XfII15UuMwWPS^iAr7(NlRGysh?xZa$5v=0itncAmHJRJ^ zS)@Qezv6Z0SE(NqL{|ILWso6TQirn@lWKnO3$Vhy;=hW_99MkLkC*!tnSG!4tQNFB zR%A3sAz)kO3qReLY80cGJSL<2zmw7NLk>(Yy4cevPl=ekzGF*hJs{CK#V2F33%PRb z*|;%mW4^ggBx!i>gRb!%s$0tZe2v>L(fYD#s7W)jU)h)5*DijFH@=(hcapz~Z1HzC zaVrg28{+5WslRvBxYut>Iq80B?PzD=O-G4Z;@x&sM0c9^TE4}IipZG3-sx7$jJwFx zbE?xRG>a<<^2Kf!d&CT#uwB9snyz8JJc3KdXN=D8!vvgntaR%AsHa)yTcNF{!!({; z>8ADap7nLbR0&Vsl0x(d4egloM%Bdh7Mb`8L}KK#C3ty|4WeyD9GjPNqc<`i#m|D{tNdD_aX8ryLV z7QD9*C4-PWKU#30Dl4sL{tf3OVZ7Kz<;b(~^JT6J<-;1J-wf+Yyna`@vDT^Q9!6e&(wcRTlX5eZgJLipvtnuUEyflz_F@z6rCebLlkmOQsM_c>{-P! z1^goP((@hNzdTipj;C!)*;K<4EZ`Gw>XP2?C0eFAs|dy$d*|Cnq+QCW*sjdgMSorN@U={e8$M~- z?dIykyK4BoKoIGF(KPief+sxvKtb2Gq+wIMVob*%v9#rUI>n`%vmJS0e41Z)*>l!8 zR7z=3n~-tex}lyjGf0Aw|NLOW#9}$sQ#hrJZ+8d(-?Oto8IoXnF{W#hXkRlozI(g3 z>3AvGBH6y$`b)7u7k$T%I2X%xZG~1{0-|#&D;llCIZu;?FQ0N8N2A}kJW6UcmVG2R zs}S)e7gb?7kftJB`V<;^-Q{)NQj+aD{CcptQP*HJBagFXgU}UuS+D(qMUV%|35Zc` z$P2lkCQ>VW68fKh)ukZABr}F*lb!3qbd^Sw#JNb^hwT)H+L0}y{uc$2D3i9J*=UxF z4&AZBOJoN-w+o9jW+PA3$e1*(CR*E<)BPRxW1rTncrr#?4e4F5L`e>#zjFOPAJoTi zT5(|)c1`{Iwkt|*VfeEyt;QnixA%`T5o610VR@NC^t+V0{U6l0CT*1>JHFVGdhytp z>|d#x$+=hy9dpsWMqLeDs@Skr*2!esRwrS*MF3M-%s-{c>KTx^up`T%PNL}+(wQqR zEkCDuSG&rKMgzsJdC0gmZ1g1xbRxJi2hOoyF|X51w;atA!#WVf%f@3{_4*l?pl=pD z&Cmx8CW`wPp$6%?zl)&^dc2o}DEfzG;1Hb2yemFa5Ks@|pwpX6o%Fis;5jXcgWvY( z(ZMA$N&ae5M#xH09VvtwD&%I?Co~bsQ^+?$gz|$%;cvZXxHt{PWNp!LV_7dZe#)97 zv(;?N3L`jQP0J8^RHgL10?!9oYr3_CywiEzEVT8j6cTz4l5}BHz54A*#nW*l(q#iO zd8*NfDc&*VAmAg{UvSkKz`mN;R;XM-R_YF{lwoMbP6o94M`sg^_R#bBpMo9b85& zjvkTxuI;RN$>rdOm(1&+xl5-6*hA$HT1Sw+{;D4S3RhbqVOuq&JQedtt=c1EHXiA5 z+zu^nw8omMaSip`E7?)gWvfF1doKu1Kd#En`PrtsX*#N?khCH)x5Iy*dzJSgwWjHU za*LtNe*7T6)Xj~7=rAjt>#KF5w5FOJrt&(d?XFf9aJ(3^}a62_s+c3ERb7b}(gEkrK{5 zTo~T)P`2XCHH}v$4%KvhM*iTX>9q9itLr^)#x6kGi4e$VWmK|~1*d%r6P}}gfntL! z+xbqZ#!7ey?51O7t^b~l+c)*;R_RS9eE$Tk{iQi8g9Yha#`XB+0wqJ(5$W&M%3}?L zylna`n0^|4L$)ZjA7R^(BsBgcJ8W^rvBh4{V}@t(WmC6u0)MM?K-Y%}+x`5!PdR@3 z6MFS-`M$O9EC#OKdG^XTAXbLtqlxfp69dji7xAM(l&-$@r(1>jZ*&cvgPRI6*b7c7 z=JHHudqtD9{mWlHyY9l941B8x9ZUj$@^yIb5x~x&4;0+U)JW!{aRa#Ov5c) zCagt{kfNN)*21gf2mX{;RfM=y>)AiFEh|CIYU_QlW}be%;Kx;Zsx3a}R%0@k;TZL~ ztlXHj)k>lP0n7eMGH(|$=i5S6OCamoxXBhLyJ+4sII!~b>`N_SZyO&Ur^oY?lC=ID zfUU9w^PG7L8`E?@Ygxtq9QsK-; zCkffc4fWM-W*T^7#pe{b1?nx15Tg9HbyC-u=aS*3tvC`g{_(slCTZU(4bQ7h*^j<`Z8cE;d<2FTe-ZUN z`nBqzORWgzw9FqjhU$iVKi9b~Pm8S?aqRoMZn^8|TNcrjXa5)=^C|Jk*Tw695OXV$ zNy=N0YhLDa!Bo^cJ}tFj$)k7LNxkQk=)Q}hP>)pq^W*kXHyX1^_|x_QXGb@9R#1?` zT)oh-p4$4@V64l=8|q^(rnP-zf7Pcy925q&V* zD|5mt-eHVfEeIy{&Wd2VGG60|T$%7u_)};^tu}P_S~P zqGcs=E8&h=Z^peK-wd;-Fp_3mJLX4Qs6na5A;;*%#EihEALf8t(-dQ*Te)04gl3TRf~Ve5 z{DB1T)5N`R7N?~Y?w%+5pqKcF_BL;rd*cU&aLLDqQL#^RF`rj2km6+h+PU^;TWJOM z2Km}P-T$f)YytpRa|=tGy=@E27uJO2WFLY1R`Qj{*6yD;OY+cK+L9|*OckrS|GOcGa2eJM zX;RRbF3G!U}&c z31rYa@P4N0zOJUGnYi1Eskq0wmAL!b^9v%)9ObfB<4gp)%1^WCukZrFM8q-LAcJ>0 zJw5IJ53gX?7wN(WUTjB8wm>G#`f$mE)_Q`mBE9dX>wGOErOb4u7sL0>ktgn z{}m~$-w9y;qHp_WuUhmb46THGuN6SS|B8_SXaWxJY{L&xha%snsP!q~$p-a-sS|#Q zXq~^PAlTsCU+bU#RmJa!XnY3Oz4x+-`pI7k5o$sMjX{%sv)A|O`Ps3*pka#XtNz|@cGxnrg`b3H`3!5}qBU%-((9xj z-Tw+frO$Y<3*VhoI*ATVPW1pS8z%SueA_4h`zz_}p6Q~T+uiQ--a-D#``@~Uzr_f22^F9hohkpKVy literal 0 HcmV?d00001 diff --git a/docs/docassets/images/label-tab.png b/docs/docassets/images/label-tab.png new file mode 100644 index 0000000000000000000000000000000000000000..612b2f9bf90a2e695d04b61296b949588fe50a7d GIT binary patch literal 12933 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 + + + {{ contentBlock.icon }} + + + diff --git a/lib/core/info-drawer/info-drawer.component.spec.ts b/lib/core/info-drawer/info-drawer.component.spec.ts index bc3d0dcfec..e063ca242c 100644 --- a/lib/core/info-drawer/info-drawer.component.spec.ts +++ b/lib/core/info-drawer/info-drawer.component.spec.ts @@ -75,6 +75,8 @@ describe('InfoDrawerComponent', () => { + + ` }) @@ -123,4 +125,12 @@ describe('Custom InfoDrawer', () => { expect(tab.length).toBe(1); expect(tab[0].nativeElement.innerText).toBe('Tab2'); }); + + it('should render a tab with icon', () => { + component.tabIndex = 2; + fixture.detectChanges(); + let tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active')); + expect(tab[0].nativeElement.innerText).not.toBe('Tab3'); + expect(tab[0].nativeElement.innerText).toContain('tab-icon'); + }); }); diff --git a/lib/core/info-drawer/info-drawer.component.ts b/lib/core/info-drawer/info-drawer.component.ts index b838467272..aa093b8b96 100644 --- a/lib/core/info-drawer/info-drawer.component.ts +++ b/lib/core/info-drawer/info-drawer.component.ts @@ -22,9 +22,14 @@ import { MatTabChangeEvent } from '@angular/material'; template: '' }) export class InfoDrawerTabComponent { + /** The title of the tab. */ @Input() label: string = 'Main tab'; + /** Icon to render for the tab. */ + @Input() + icon: string = null; + @ViewChild(TemplateRef) content: TemplateRef; }