From e2edbef3dfe5633c1d8a1fafe2ae2e9f4c0e5739 Mon Sep 17 00:00:00 2001 From: Mia ZHOU Date: Wed, 8 Aug 2018 10:22:07 +0800 Subject: [PATCH] Refine helm chart card view Changes including: 1 chart list view will have icon which from the latest version. 2 Card View will change to the option2 (large icon). 3 version list will also have icons inside the data grid. --- .../src/helm-chart/helm-chart.component.html | 21 +++---- .../src/helm-chart/helm-chart.component.scss | 57 +++++++++--------- .../helm-chart-version.component.html | 8 +-- .../helm-chart-version.component.scss | 12 ++-- src/ui_ng/lib/src/shared/shared.const.ts | 2 +- src/ui_ng/src/images/helm-gray.png | Bin 0 -> 6491 bytes src/ui_ng/src/images/helm-logo.svg | 1 - 7 files changed, 48 insertions(+), 53 deletions(-) create mode 100644 src/ui_ng/src/images/helm-gray.png delete mode 100644 src/ui_ng/src/images/helm-logo.svg diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html index a1aa64780..f9b0028a5 100644 --- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html +++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html @@ -51,24 +51,19 @@
-
+
-
-
- {{item.name}} -

{{item.home}}

-
+
+
+
{{item.name}}
-
+
- -
{{item.total_versions}}
-
-
- -
{{item.Created | date}}
+ {{item.total_versions}} + +
diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss b/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss index b28effd7f..e06eee2c1 100644 --- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss +++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.scss @@ -1,6 +1,12 @@ @import "../mixin"; -$width:24px; -$height:$width; +$size24:24px; +$size60:60px; + +@mixin flex-center { + display: flex; + justify-content: center; + align-items: center; +} .chart-tool { position: relative; .toolbar { @@ -11,7 +17,7 @@ $height:$width; display: inline-block; height: 16px; width: 2px; - background-color: #cccccc; + background-color: #ccc; padding-top: 12px; padding-bottom: 12px; position: relative; @@ -26,32 +32,20 @@ $height:$width; .card-container { margin-top: 21px; .card-header { - .card-media-block { - .card-media-description { - height: 45px; - p { - margin-top: 0; - } - .card-media-title { - overflow: hidden; - height: 24px; - } - .card-media-text { - overflow: hidden; - height: 21px - } - } + .card-icon { + @include flex-center; + } + .card-title { + @include text-overflow; + text-align:center; + margin:15px; } } - .card-block { - margin-top: 24px; - min-height: 100px; - .form-group { - display: flex; - label { - width: 100px; - } - } + .card-footer { + background-color:#d7d7d7; + .version-text { + font-size:1.1rem; + } } } @@ -62,8 +56,13 @@ $height:$width; } .size-24 { - width:$width; - height:$height; + width:$size24; + height:$size24; +} + +.size-60 { + height:$size60; + max-width:165px; } .margin-right-12 { diff --git a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html index 20ffe83c9..ae7b4039e 100644 --- a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html +++ b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html @@ -82,21 +82,21 @@
{{item.name}} -

{{item.home}}

+ {{item.home}}
- +
{{item.engine}}
- +
{{getMaintainerString(item.maintainers)}}
- +
{{item.appVersion}}
diff --git a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.scss b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.scss index cf2aae7d6..596b68a1f 100644 --- a/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.scss +++ b/src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.scss @@ -42,28 +42,30 @@ width: 45px; } .card-media-description { + width:80%; height: 45px; - p { - margin-top: 0; - } .card-media-title { overflow: hidden; height: 24px; } .card-media-text { - overflow: hidden; - height: 21px + font-size:0.8em; + color:#007cbb; + @include text-overflow; + height: 20px; } } } } .card-block { + font-size:0.9em; margin-top: 24px; min-height: 100px; .form-group { display: flex; label { width: 100px; + color:#aaa; } } margin-top: 0px; diff --git a/src/ui_ng/lib/src/shared/shared.const.ts b/src/ui_ng/lib/src/shared/shared.const.ts index 284856ab2..c2c0d3750 100644 --- a/src/ui_ng/lib/src/shared/shared.const.ts +++ b/src/ui_ng/lib/src/shared/shared.const.ts @@ -91,4 +91,4 @@ export const LabelColor = [ export const RoleMapping = { 'projectAdmin': 'MEMBER.PROJECT_ADMIN', 'developer': 'MEMBER.DEVELOPER', 'guest': 'MEMBER.GUEST' }; -export const DefaultHelmIcon = '/static/images/helm-logo.svg'; +export const DefaultHelmIcon = '/static/images/helm-gray.png'; diff --git a/src/ui_ng/src/images/helm-gray.png b/src/ui_ng/src/images/helm-gray.png new file mode 100644 index 0000000000000000000000000000000000000000..578f5f8ebfe26c8a9b941a4b164551d9e7c4343a GIT binary patch literal 6491 zcmY*;2Q-}D*8XVGiQa3X4F;pdsH685oe(XEK1LWuOF|I6iyFPR5Ya`5QNke6YxJn2 zi}v~5d;j1 ziMcOvouE2U0H8je_}UilzRzy2Zm0tQ1aJcYp>F|zzxPn+769NY3;_Ij4gf$h0026# z>{bIA007I}#mEe9rlSq9_jCu@I(XVSg8bdR?lk}a8Gp!q)7=qn%kJ;)=HUbJm*xDI z1mwQ`4=lvV{x1=@t1PFPjy}7RC(Myu93%!3=9D91XJ?mzIlO=vDy#lS{k|v5=?sT^ zL4<_-{QN+Eq99M0laPp%l$4M#SO^Rjyq6I4L3qGz{RKUI9{t5pMQ@N?(*XQGkN&@$E|w@h5q>>Bmxo^`mgPKRhfTKh#t(v z@t*k~`*I>O|C0Pa*nfCrg#ID_UxWF#r~g9lU6mt}5&G}6$q{My@R;9Ec9@1T)W{!e zFNZLLrmv}=A;We$(HQq_SQ&lqXufik9yWbi_rpR}%Ht#+5?6Wxb_00>DiM(==hrBS z*KYgtxds$(IM@}H@sJO#3G~A2!u#sB>&S72uW~SpmjU}mrl%dvl};X`KhJ;d?N>ZC z-pmfEF0HsSsWcgwpKtMzmOUO8-2*01yQHd2Yb0|QH@i;l^R2O%7#YEdLTq$(M?_Ph zw|`Qh>WLJgYCZ#fQ`%ZuZ3OZ`Uti-r;{xs07>3FOp6!;5!*ZTu!?F#x96dfIB*%@(YaLenN?mjy>3Sw zL&TiX&lw<@(A=EE?fI#&cWqcpgY(^tsLj#5^rrGbkPPpmN2_{J_wzAL@@+stDW8nr z{=5N8tc`c$qUSiw6!3C%T4trtHV5L{nA|%pW}R0ZMl#VaraccpYt=I~PoXa;!xjB@ zz?^by)=f0f^hH-@*$luHqjgKsoA?Pa68qZKCK;X_@r3Q*SB7W`C)<(0w|`J(Crbzf z;z!O(@X~~)UqWe(^zGEq`Vjfmvl>x(;Bk{tk!iw=Zw6=ZR5T60oL|ZD&LShq4Ry!F zEy+N?r%fjwuVJBs^Q>pAF>ZlZKhy-$dVKnxPDrjc=7i(n+$ERMMmoUE)r%vzNl?xW z#1gH)T-mr~{oontbJ|;WF>d1(s9Al8CvG(Ybb9G^MQ`@V(KTs9fQZ8-baUiOPiYjgi*0O{Xl10WUGrhMMc<@VC z4%bWyS0T8$KmqG>&Aaww4n9sy>BV~EQJ>Rj?#;t)VjTwTL(^qX7PyXfV0wjg#anE)sg}G zJKD#s=(imC^!o^MHqbGdq+}Gqqi%G2y!at$v-UMX^I}rCMhZA?$cXA2-14gISI#>U z2E+CuilK)uy29SZEd8SWP+&?%tn zp!!EmPRz#Uru>iNz!BkJvYIa8cS2F$hW(_|K6b&bkSaK47w-=tiIW|(BJ{J}Vq8DD~Yd!u@^*$Okr@DUo*5n3&@QkR} zvD(?8e;XT;4e_n8^zhi({IShiX30zps|%Q2Xm%)HR=ARu$Ia(zinj?^MPo zYVgvYI%7%^9;4gu8eSuaeim;Ncegy8DVoPU3)ymiDPrLEE~rIRW)Qbldg@H>2xy*D z+PBo__LnQ~*!Ks>E1^#T-4$||*;tTRW5vJ;`1EkSR@FQNkm5KDJ7-LKO#LIyAjslY zQvF&9DdG6C+Ju!T?6d$gjZ=ciKaG9tl@RWO1(BA%^5fNcv5<>UfcAe3!SmV#7p96k zKPUU9>pHn9U(n5Q!B5F+w!3*grot5ah;Xf1C#fd3i5l_C*mPj6-&sGBmi!AIdI;tS zT=s~Kz(>TM&?aw>J3ZZh7*J4eH5af3)owpWtGtgA_1bKqx$I+zAVsw4zh&9y(gRpW zy$;6uauE2DJo-VMrT*lNQD@$=sBB7Gd4B%#2*o4S$WsA*I$jjEa9U-l!Jt05;o$i1 z#2jhAkw(Xf)9yEkxOHtDqej1B-E!J>d@%-udCthpC|3ur6$C_=ttuP3>P_ zkWuxyIm~j6dcVdXtbDT^Z0E|SftxACq@$DDjz=#zhmNCD}0R%;FH z+4|4Zgx~&+VZ3G2HhiV*(u0hh{mz-QN7|D3Q9I8QJ8(dB$->r`KDy_5KOZnHM5Ms(QzOEKBRhXKQ^t0YKo_ zcnp&W$$-lQkj{{_DE#J;7)M{VW)+as2tZmia53HNxip#Ws_9f>`n@QUMPjcvipnO2 zK~%N5Oo%odQ$j-(ZQ*fQ=K$&Z{tYX2-j3y)KP(DZ9lc1+jeKe?x6WcRHu6Edl0s-s z{1tyZ;W!>y$AM!{#?MOrqS~1fovcY9Yk_TI!#uXnK6 zai#LG=41B@+%&Ar!#~K)KYTS{{z(WR7%Re4e_hF+k$c40A)$H@H`Md>ny;}1O$VR$ z;G7bvh9`o3@tMBXpq-roKs8Ab!sPnrdIPnJcdRka4?}zlVQzVwabv!d$XLt z?y1?HxXl^v>^R8r^CDWuDao%;HTG{QP8~HTF=o~#tyG|-1l;JB&+PbXeKp``YJ=nV zYAwspVoC&v*4$}!UAd^;L2~mvr6>&{k*~%ix&=#&DVu{L3O787xzLDatTog2iQ=L3 zFN}S(LiBu3vvTGY%t{_WRtwL$A;vm!B~9MHQk{O&1UEvW-q|DvKSGdtb%xub*v=*% zFgj}%yoZ7i6|H=dq<|0fT7Ug*L+dXzfpIRYrH?Ct30g)5w~_$C&9>M$4ioFSU!>y2 zM+D+1-kzX`0>u$T$LM5}S>68FjCWD-O<_ApM*QhMQxgp=6J1;nnmXxvulSjaSMaz(5LJL)t%|5j0EL3nV$ph;N8_)W&7D(Zz54 zj_-roT3ud-oPAEr0@LAAWNf5dAl@Ztx7$zu3n6qb3ujD`s>AU5XH`{|n!4w2dt$LS z7?VKSBfUYaIwZZWgoF#qBrz`IJV5?t;WFgjzIQdF0AZLrJGe*M1FC2c(_xf>mO~p zK$~Al_TrSgpRNU=K4}plaK5vK;G4g`SPsUff_Y_TR<+i$m)gcS=_h?(KjJbJr&uIy zQR|O*y8wRuy}+!p0e*t;gv85m&nc%2D4KQTHZ-%5`%+32Hk4~Fges~BNn<<0MSsAW z;5RRrK}H*{?FIMb_xqS(76KBCWBHg=#sY7irZ^VH^h7!H0Tl>$$Q zn~^%P27v(3n0vc}RV~eKlb&87=>n zJDexsqtJ53j-SDzM>Xxw#8VM|P^rK=A*nH?#SB5uT}AXUqblpsxnd1F)p@~Gdjb4@ zN7i4GK?|?5YK~@B-g3L9a4eKfktW*7sXra(flwsgWQd}7n2UFdD~=L3Nhg1L=UEbqqkt;KiuBJrtA0-iTB+=i zXqE5J4)|vr^bMPL1>clzHDs-R{jC1I^k%riv7gVw6c08J{FJ9KoSgz*tWByIvW$JQ zxAykKS~*z3$-?7{#fbXO6`BKPt6?}Y-abfOS}=s_hM1gGCeI~%h$EeUPnoXXZOxrnpk73YxlKlAY@D=|?TQDmEs$^MQ+ zuR5c5<7j-*=Ji_baLSU&3iH$L0c@LBX1$S1**E~7by2O)gO%!+oac`YCs;xlv?_{` z`e*f-qE6iIn`gkn(=>rv%Oi6^+k*a#VVm~ww(<{;y^9<$gaqAy4m@8^Ar0Uwxue+ zsm2Y7c8W_@@n(OaX&s9mw!)ncWl?&Wyg+xhwIITXtgVa(%TOrtd=7%*e5@Gqeuxq` z{jS){mmsIVnLR|pwg=aJ$L~izwlezlL6P4FQvTUy#)Q*z08;OvfaP9IAvXK4CP3mg zh)t}JQPSfYXm4KWJZsbfMpWrK20sk733a0Ct`%89vh&Vhy9^lEDiZ=Oolj==GzHVU zD%e;~0>)$6o_;aXyhy#VS)U^tIYD>4?;@S)^op2kC#QCxz|HTY|LwRdOMFRv+j%RZ z%d;_OqzFb#$dW7P_8;!au6>F#)$wGwPv4>Bjh%_OWDQ=rKkm4iT83L^R4RU$MR6M( z+xSHZr9Zz-u7C9GSSj>MNr;5~pdT61#zb>gM;9RPg3XX@&#)n%$V0KwiqEJNLOO_y zjmB_C(^ML?KrB3HJH{OR1D5!^dxRSWXS&k-`mp`NnjH}3ts!@}q6SGBlBqY9( zP6NF!ALl)>_%Slc7!WDgAICDsBt=4}XW;Tr((kWSh!fSC6koO1w%qg})}P1=Jvg(y z2%WAj9`05sX=`I-pIm-68Y-2NFuX^ou%vV!^L0k_1{i9UF6Vp_%ANTUCG? z)GRP}&c}Vo#|K%U3!LYqT(V1|Y7G&d*iXyKxrkAJcQxq1MV&)F@0Z}ooa~Rc?6>$6;&UFn}e4gmyV96VJ->kW0 zqbUX-WG70$$8lApj-C1Jc&c7LY$!`RyPzy6dp28JQi8V5Gs3zv`l*AaX)fmQT4bHP z|Fy3uvX;^s;00U>XT4zjTJfi%tMMfde*wnZ`TwnW*} z1I1=~&%XO~1m+bhDJFpvP3w?i5(*Cjz+*KuUu+%mICh|p$;KB@P2qexNf;i!P0zLZ zw`pxDJ}#CW8)~ksq#>f(Cu?14`nybi`mk zN#--(I8injAFu5l(y}8Q6-V*pok-)FwHviIRk<{K$If+}PFm_YIXP*Cw;QKtT+|?| ztuO8r)Y6@^brL3=y}v(WptsQ!y!GY8RtDIpT3~)X$w#N)5V^Z}@9|y16q3j@n>K)} zE#nE$Y~<9DV~gUaoJQ%(hLPK?cczb*lyla`DotyxCKqkE$jw9AS{TRKBO9?Bn)W}4 zG~z`sVz0J}xKO$FdCtwJQdH7N*k@u*8N1MXNuu9d)kYul$FOc%z&UIlI&Y-$AgfB( zm$uZ_qXi$WcnC@qPCHpBOZQk|sg_lnmF?FN)*bd{D@+b)hH|m?HGc})%3)PAp_5m5 zaTy&tPLZcl*$h*jVMGa6OS9C+nQG#*w;xe;YYIN5kF@KHUjGy6sct$mpW0m-iDI;9 zUF)b2SSge^CY~BB(_9rFzSlznxQ!xWoUp#!9j<)y3vdK8Kw34XK!!)f;6dV96AOKT zC2-3cuB#B>84VLY`6bCS6YcCtg%@F6G`1V7#Fz%I3)b6LFHe?H{d#uyr$xhcwr(uw zpPvoCa87(wdKcXDKvNzLj&RQWl)ZXOEhAG7uHbEmltwY48aC`F11Y->7Hk?CO zZ=VbYY>Nh%2}^P{-G_|FQSyUi4AlV}iI3E3N*(=dJz#=EjeJp?WqK|?gvO-#Li+8y zS7}*=;ndiTpOF!?uG}imz9ts-XZeZ+_ih)T7rup!yvbcl!KZb2LRd{Kiz1Mq%>x^c#>7*atdWqf1{DL$L%&r)l7|FBX)OQJ xUF6wmUJJ+Mn*?ND=tb-9vJF}L6?@;2Ysl5@7%8Uw{^wppLq%7)M)CRU{{ajbL%sk2 literal 0 HcmV?d00001 diff --git a/src/ui_ng/src/images/helm-logo.svg b/src/ui_ng/src/images/helm-logo.svg deleted file mode 100644 index 6014e6d04..000000000 --- a/src/ui_ng/src/images/helm-logo.svg +++ /dev/null @@ -1 +0,0 @@ -helm-logo \ No newline at end of file