From bda3290cc673d5f5fb39b223bbf1572f619e5a2a Mon Sep 17 00:00:00 2001 From: Thibaut Courouble Date: Sun, 6 Aug 2017 11:01:52 -0400 Subject: [PATCH] Use an SVG icon for "dir" and "path" icons --- assets/images/icons.png | Bin 1268 -> 1079 bytes assets/images/icons@2x.png | Bin 2708 -> 2225 bytes assets/javascripts/templates/path_tmpl.coffee | 6 +++-- .../javascripts/templates/sidebar_tmpl.coffee | 12 +++++---- .../javascripts/views/list/list_fold.coffee | 1 + assets/stylesheets/components/_path.scss | 20 ++++++-------- assets/stylesheets/components/_sidebar.scss | 25 ++++++++---------- assets/stylesheets/global/_icons.scss | 11 +++----- public/icons/ui/dir-white/SOURCE | 1 - public/icons/ui/dir-white/dir-white.png | Bin 125 -> 0 bytes public/icons/ui/dir-white/dir-white@2x.png | Bin 191 -> 0 bytes public/icons/ui/dir/SOURCE | 1 - public/icons/ui/dir/dir.png | Bin 203 -> 0 bytes public/icons/ui/dir/dir@2x.png | Bin 280 -> 0 bytes public/icons/ui/path/16.png | Bin 137 -> 0 bytes public/icons/ui/path/16@2x.png | Bin 218 -> 0 bytes views/app.erb | 5 +++- 17 files changed, 39 insertions(+), 43 deletions(-) delete mode 100644 public/icons/ui/dir-white/SOURCE delete mode 100644 public/icons/ui/dir-white/dir-white.png delete mode 100644 public/icons/ui/dir-white/dir-white@2x.png delete mode 100644 public/icons/ui/dir/SOURCE delete mode 100644 public/icons/ui/dir/dir.png delete mode 100644 public/icons/ui/dir/dir@2x.png delete mode 100644 public/icons/ui/path/16.png delete mode 100644 public/icons/ui/path/16@2x.png diff --git a/assets/images/icons.png b/assets/images/icons.png index 70038ca5bec1d74c547aa4a4b43f60239eea2aed..8aba11bbc854b65e91a3d89c73941e9b7cde633a 100644 GIT binary patch delta 1071 zcmV+~1kn5R3AYH47k?lK1^@s6qMd$(000C2Nkl!?u(DL&Dg7avV5eTNxe#XkTO|g7PG4svh-=hw(zT=(KgiNajgcCluijN3o z2{nW>y0B=*=6~Os@x|k&Sm`rkFK(GT3(FjjP4W3rlbnK6d@oL+jt0)4$7w<#sVMO& z8?cFKgfa<14#~Mwu9{-B*ZloFXDFKD#lp)cCOOm2Y!AcOCY%Q07-JAb?XG})%DEM+ zB9s|yV^6pN3l&3H@^{VXi%aIOf3n;HQ>M5uVT#gal7ACJ{3iItTXAp&cm?Mb4Y~)x zMYPIcd_x&T(SY%P2TU`?`6Ev8ng%p5gl2}&&@{kLUbz|W!x}blp+)g;AQ)FSz|Yvr zM<$#If;tABnLi7{F~%T>6e~dA0GngZEWE;F%y_%;4_r=Zz!x(*zwYDsoFR%$a2flX z%icPNK7V`&Z-U`fph+(#u>!#sp5ngOgsW&j`p4jB@1EbnC(UC}JmF0+oGje?_9n#I z#LR`tjQ8{~a4pLDs6Y@wo$d zh$=R*gbDO?dch^QDJjPMYn((4LRK+{7(~`Fpnv==859s9wjvae*{udN(;YacTWk_$ zzJ{+D@y4!T!;T+J`5ietLsDju+sy_96KKE#5ILW4{SgqE3eCJz{Cm{V%y+zVnviL; zzS}qyY=BWFp#fEVO!?drYJu^BQ+zK@p^gU5pvP%KA#j~Vyv1?!;TDz=<7lubX%S@u zHh(dl(tt@2$t8?WJF`7(h;71Y`}eRNBN7F^r;5GEA%>eL>RI*1^C=CeU^V3$GuXzS zgz*^SH^DF7CJsHp?7w$$30X{G0$th_;1--$H0U0PTuc~0jBh9#qG&(^L(bR`8f`XU zz&UmVUHbdlEj|$EynR^11}?NH{tbwX2Y-G;1R`||Ix~OP{ym7g;ufeR9Dihpeg(AA z0DJB+XBJ=KF=o8o{0AVSau7<#|np>;J&Nww%tzt8CaH`8j z=QP^yz8`*vugCd4=XaiZTCII}X+6KQJ^Our&+mDjsil0~tbfH#WHF0jbfFH5KHHIp z#v}%igT^$P@hwt=1k%VEX(Y^8U`B8a^&wV1j}K^r%wf!!@pXtYF+6~_=tm6JXyZMO zV>w)M0~-5KE^W~0LG@`LJgt(0>np9inEXo=pp8!$6D8CH6(GI9PE<-3uMw1C3I53&xv&MCN4Z>q#sQSe z27JUIh(iG#|1_&ol8-mZ$vYHKL<>r3K{0dz4qIR~rZ9v3WhVa|8Xe9B_|yLMmI_W9 z8U^eUE58SXV~jx~9sVY0&la%?Be;z|-`)5#4pk`NojUV)+K=M{ia6W^$FW9S_MW|H z#4Bhd!hb&ogVTU+Oo(lBA6I=P96^XUKL+3W_WT^)xI6|&a2@sd($qrk+mq17JdQ^6 zBGe!LMJW25fHtNU{#AHkatssLhNUcJF-2>=7B`W_EQZmAx}Rb4+mVNtNemzdFVkpV z>?@zg2ekRd4r9iQudDELMsN-FY9Z6v**S{e?|4pfQKPDB}MPC&=P;h0hEl?^1xs3+$|NvO^ffRy5)i#*xEj=K_R( zFJ8R(=jF?n8v{-{i{1*qSU0@HTniAnhmDQ}WU&%4H>r@{AxLA29p(ju|CXW zMSrygn9SjvLjf7{Zzm3-7Cq>~vM(xt?eLrBq*vhOfMt9GK4MUrge>5E6$LblW1Ga} zBiRD0F@+iIFEjb)@Y113#9JU^IeshDP4LpCOTRdtc#GI`Be;z|6i~`%9E$iR_zu%$ z3`F%9lqYXMHzveodmmSQB^-(PF}UzCH-DdH;{PX6$~=x*UWBfrezCqWoA7<#G)*~jW4>&*j8Rl{-y5?@_!S? zL2G}n#KT?zW<2gtKn~hpf`9TRxu~yzxSYJbAnO$nmy@>^WG|qI7BSX>V)O;b$jMtc ztZE$A_&%G4mjZT)mEU8&-X(5~>1OD!fDi@9Dr~S1!M`1WyR3%@*=dz-UAl?RX7E06XI`yprq7NzMuRD XE5OhZUw@{o00000NkvXXu0mjf!re^b diff --git a/assets/images/icons@2x.png b/assets/images/icons@2x.png index 43838d4ddccea48713f1ae368efd7d5e8d64c55e..a27663998900bc00a0795da32a33b09098b6ada2 100644 GIT binary patch literal 2225 zcmV;i2u}BjP)1*&9I|| z?nEEUItDNUc&_@?KrXM~n~c@}3uK*+6*_k|PB4Q16kWjxzRAOMDJ2fXV)PMR@&Z_?oVU5 za^_pd1L5L;h@%#?wI79Kci8Y&Ey8emAPx}MoCienA)0(&1X9Uh-#|y(7D|-toV(Us0DhnWgp&9=Dlm(Y1cT^mM(ePz zaZF6-F>et=^dF`*ve}hyQ)Uv~Vek>e_af?;9ql!Fjxiu z*L(+sjcT<5b3{PrhA;v?fUcShzVLZ4^jcdAIF81_*i%enl%D6Bex0wk{9RuW;00GJ~6@4V9E4YnrLSJ&6349L$ zmbDn7MTmoa0o(*vPFwy?J<1j6*7p59jP^$<3BIPAYu{ut-bHuLF99k~f&e{JuNkl- zXcKzpS2|mn^S0B?=<`+d0?1di*_bFhi5{%rr!iWs$Js{kTj+vxpiKg}b_D_QWk$L; z-IOktlJ##T#twVZ8_N6)9drx&461`d9tRhZ0A>;dD2_%A?wXX%Eih0L+*s!4=+qeF z$trpw2R^?+J{_mnZ3R$P05lLAB!Xcs#y7Kpe-7^lbWvJX@ck zI`szpkFO6ff#T}}c+>*;`T)64#8hJf`1$|^tk18e1n~6%ihmf>_xSn%eX>5k3R(bP zAE5XbGKytwYF(ee*9S+`py*BY;9n~OG9r8m$` zjU>?ed?${l4jHdzfa2HZ+fkxnA`w-e;NNcQWV(jPM<&reH&Rp|hW_4zLR zrSBN2?S1H8G)a^)XR}K+jR8hb^m%;%eYZstQ1|uu4m8r!HPLl6osUjJw=`~z*Q8@B zNq``uNmhe9UqWcY34K%_U^)tmByeA!@5Tmd5mwM#$M@QfDZyoQ8`^Gv7tpt>grA@= z>I0zf>jPM>&o7=86ks#4BYL=uAo3mqxCB3tS?dD`Tt%mVN%8doMnLp%tM_9M>+=WO zpWBMm`UK<|UHt@2?g`-Q0~EhLzcOCyWe~ld&76a;4`5RC`uyT~!kEM=Y$B+r<>8Yj z>jQ|`wmyJpHR=PnP6QoHuj*mIHzK({UmU1oDxC<5=@^U2tfe#?xvzTy`1$~aug|yO zJ-RHi6DjyN*(ZRn4^a5}{3>`H?CS$m>Eqza6TsI8D0Y2*zfJ&OAHcs7=Ia9#xIVw% zw*bCAfPXFA*9Vx;@bv*aY5{zG0G|M!36lQ@`n)e{Ja92$00000NkvXXu0mjfWB49& literal 2708 zcmV;F3TyR=P)bEV40a+<~DFl!7?{|;8E=`=a{L?jA3wG=HP@G59NRy>%HfX z)!fd`%CDDXukt=KpJI5w(Sj5)wdhPHQztxtcd#0D_z#xjMf61}3M|v%7>nId8oTf) z4nhHBD#Mph9xXsS6l&ct7&EXEDa%UCz+iMMgoD2o%HcCi#6uX2Ut$%M!x|imLaH2( zBLk(8!Q&`Hpq|1yJcI=D(P8)k%H|7PhFtZ*I+w8=jzXv>QcxbH&=bC^hq5fijflF@ zP&TjQFz9NB8Yr9JBJMqi43tk9JP2PY7jNN2L{Uf7L0LY*S7jWD~<@q<1eUON*F&GITxS#!HoEy_ssg5i)LsNCgc ze;@9_YN#AG;!f;wIUSV2Q%Yke?n5!c=q)JALip`@D9aYKg8!-)j+E*}&jF}f_!k*D zvke45GMSL7+PfKm0{Ak?#Ro(DpvR$X_Tm(Lb?*SU<~aeo8Q`x@6GP>!Ee zCH(dsD4TNl@3BP<)`3OMUKus-atMS$^u#B8nSI$W10Y#5FFO=3s2eg+Hh06Ga|G+q z8TRgSITdvCKLEYg&>g;Vod5g7Z)ZT+Tm=7dFr~WYDM`*Lmmk010RrK7`5zny-9_!2 z5HDyjl*1-;&oP2EE+g-bO;8SlqZ+FQ9Uco-6hegGRA8Nfzw1Bm_?sdib<~#+YF&U)+9(^jC`5wNlYmj#QWQ#%{fCgi@fz!Yg zh%dP>0@tE5>~%*E*z1h7kzWKxa2qI;z$_@6B{&DUD#imyyS&_8k>>$mQQGn4y>Yn> z)ZFTA#)+_3jx|sYgQI^C6uj1024$1M%lHA#Mh{$y5m*A1LmjRPJb=d*?%+KC5w!G! z(Qtndbid|;ZwpR>z560~5ER{`U`K5+A1Va9aZP|Hf$wV{_&A>jBx?sj{Bn5|T#s*S zuJ*U#6bSV~I;uy(^_Y&R-gwXoW$Ij9@QrLL7?V?cjKPAVgOQ%5gFdgIfcUfpW1Ax0(-x`1wd! zyc&QEl#4X3Gam^n{Q9E-%EjUX;6tH&9aFy?BY4MrEd0Q!uVVy@(E$fgrte?}W}-bz zCX>lzGMP**Ii*x5Jb-tw8g=*&mg7bAMJdGat|kBA4#!yRhOS+B6bC_!_z$2AU&3n( z&<Zu81WmxVfX^}zQARW9Qt6L%UBMF1n?Br;UOf< z0P3xlBArWanw!OFEPsHmH=`JUQyoM2YtYkz z^>{biAc#-hV6Ot=ov+fEgwl`)@H>djop9Cwdo@wN0ywS2U6UqFY76m7DYXLGMninM z1op}xo&{?=?m|%n11P~3Y`_qlfFsZo*J(s&;6d1%@8N>#8l)Wq zD$4T!(wH3SMWEgdm;wP}auJB^1C3d*w*==vawx_FNW)$VS3u%_8|Y~OX~&n3!EK<8 z^@w#D>}BvWet@&l1D9e1mLOMkxGL5Uf{1qDBRx>Q22hWAng>CCwZ(jd(QaH5<43{o z!%Gbq6!idBVHj`X90`en^(?y@b!bYfk%3!#aD9kx22Dq6NZdvLW>D}`!ZAqVGdSCZ z7jZROVNfF@*o&J24&ZH^2#LR_-wuv|^>nKoC*v@Pi-C=dU>|OU=$Q|M#MyvGMv%sJ z5WsvStWfnw1Ke5+F$#GAK))O#cn4w>`T&5wju9+I2Z(VX3;_5Jc3>vjLyV>mz%TfXz@SMz&%oY|O&|HbXhyel3QgjgUO(hQXMDl}K4u zVg?4ITPz1aZBPr4Z#0_ zYyfA76XWsCKYww&-p3X+lPCw8oAntJFy4$QYbS6 zh|d5XhrPYH1%l&qj9@*wLU5hS2p*5e0K(4u03=ja9&hzBuy;2Ea2>%qbcWd61$!BE zGXrS(0~icvo6tSS2-ct+V$&U);B0W52B5SM*#MeY1Ou1>WN zdl%9vpaQ<~avP|*)!U2{AvWb$6ZhM|U;2#SQUM-|?W&mx2k08(=3~3w12=sq2#0=m7X8aG3T""" + app.templates.path = (doc, type, entry) -> html = """#{doc.fullName}""" - html += """#{type.name}""" if type - html += """#{$.escape entry.name}""" if entry + html += """#{arrow}#{type.name}""" if type + html += """#{arrow}#{$.escape entry.name}""" if entry html diff --git a/assets/javascripts/templates/sidebar_tmpl.coffee b/assets/javascripts/templates/sidebar_tmpl.coffee index 2b0a873a..21c1e090 100644 --- a/assets/javascripts/templates/sidebar_tmpl.coffee +++ b/assets/javascripts/templates/sidebar_tmpl.coffee @@ -1,5 +1,7 @@ templates = app.templates +arrow = """""" + templates.sidebarDoc = (doc, options = {}) -> link = """ if options.disabled link += """Enable""" else - link += """""" + link += arrow link += """#{doc.release}""" if doc.release link += """#{doc.name}""" link += " #{doc.version}" if options.fullName or options.disabled and doc.version link + "" templates.sidebarType = (type) -> - """#{type.count}#{$.escape type.name}""" + """#{arrow}#{type.count}#{$.escape type.name}""" templates.sidebarEntry = (entry) -> """#{$.escape entry.name}""" @@ -47,16 +49,16 @@ templates.sidebarLabel = (doc, options = {}) -> templates.sidebarVersionedDoc = (doc, versions, options = {}) -> html = """
#{doc.name}
#{versions}
""" + html + """" tabindex="0">#{arrow}#{doc.name}
#{versions}
""" templates.sidebarDisabled = (options) -> - """
Disabled (#{options.count})
""" + """
#{arrow}Disabled (#{options.count})
""" templates.sidebarDisabledList = (html) -> """
#{html}
""" templates.sidebarDisabledVersionedDoc = (doc, versions) -> - """#{doc.name}
#{versions}
""" + """#{arrow}#{doc.name}
#{versions}
""" templates.docPickerNote = """
Tip: for faster and better search results, select only the docs you need.
diff --git a/assets/javascripts/views/list/list_fold.coffee b/assets/javascripts/views/list/list_fold.coffee index af1ed17f..ab8ad12e 100644 --- a/assets/javascripts/views/list/list_fold.coffee +++ b/assets/javascripts/views/list/list_fold.coffee @@ -55,6 +55,7 @@ class app.views.ListFold extends app.View return if event.which isnt 1 or event.metaKey or event.ctrlKey return unless event.pageY # ignore fabricated clicks el = event.target + el = el.parentElement if el.parentElement.tagName.toUpperCase() is 'SVG' if el.classList.contains @constructor.handleClass $.stopEvent(event) diff --git a/assets/stylesheets/components/_path.scss b/assets/stylesheets/components/_path.scss index b1c3b471..1d68936f 100644 --- a/assets/stylesheets/components/_path.scss +++ b/assets/stylesheets/components/_path.scss @@ -23,7 +23,6 @@ position: relative; display: inline-block; vertical-align: top; - margin: 0 1rem 0 0; padding: 0 .375rem; color: $textColor; text-decoration: none; @@ -36,16 +35,13 @@ margin: .5rem .375rem 0 0; @extend %doc-icon; } +} - & + &:after { - content: ''; - position: absolute; - top: 50%; - right: 100%; - width: 1rem; - height: 1rem; - margin: -.5rem 0 0 0; - pointer-events: none; - @extend %icon, %icon-path; - } +._path-arrow { + display: inline-block; + vertical-align: top; + width: .75rem; + height: .75rem; + margin: .625rem .25rem; + fill: #888; } diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss index 32527986..239cab05 100644 --- a/assets/stylesheets/components/_sidebar.scss +++ b/assets/stylesheets/components/_sidebar.scss @@ -162,7 +162,7 @@ ._list-dir:not(._list-rdir), %_list-dir { - padding-left: 2.25rem; + padding-left: 2.125rem; } ._list-disabled { @@ -176,10 +176,15 @@ position: absolute; top: 0; left: .25rem; - padding: .5rem; + padding: .5rem .375rem .5rem .5rem; + width: 1rem; + height: 1rem; cursor: pointer; + fill: black; opacity: .4; + @if $style == 'dark' { fill: white; } + &:hover { opacity: .65; } ._list-rdir > & { @@ -187,18 +192,10 @@ right: .25rem; } - &:before { - @if $style == 'dark' { - @extend %icon, %icon-dir-white; - } @else { - @extend %icon, %icon-dir; - } - - .open > &, .open-title > & { - -webkit-transform: rotate(90deg); - transform: rotate(90deg); - } - } + .open > &, .open-title > & { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } } ._list-sub { diff --git a/assets/stylesheets/global/_icons.scss b/assets/stylesheets/global/_icons.scss index 0f5601c5..63a3a471 100644 --- a/assets/stylesheets/global/_icons.scss +++ b/assets/stylesheets/global/_icons.scss @@ -4,7 +4,7 @@ width: 1rem; height: 1rem; background-image: image-url('icons.png'); - background-size: 4rem 3rem; + background-size: 4rem 2rem; } %doc-icon { @@ -33,17 +33,14 @@ } } -%icon-dir { background-position: 0 0; } +%icon-clipboard { background-position: 0 0; } %icon-search { background-position: -1rem 0; } %icon-link { background-position: -2.25rem -.25rem; } %icon-clear { background-position: -3rem 0; } -%icon-path { background-position: 0 -1rem; } +%icon-clipboard-white { background-position: 0 -1rem; } %icon-search-white { background-position: -1rem -1rem; } -%icon-dir-white { background-position: -2rem -1rem; } +%icon-close-white { background-position: -2rem -1rem; } %icon-link-white { background-position: -3.25rem -1.25rem; } -%icon-clipboard { background-position: 0 -2rem; } -%icon-clipboard-white { background-position: -1rem -2rem; } -%icon-close-white { background-position: -2rem -2rem; } ._icon-jest:before { background-position: 0 0; } ._icon-liquid:before { background-position: -1rem 0; } diff --git a/public/icons/ui/dir-white/SOURCE b/public/icons/ui/dir-white/SOURCE deleted file mode 100644 index fa3cf541..00000000 --- a/public/icons/ui/dir-white/SOURCE +++ /dev/null @@ -1 +0,0 @@ -http://gemicon.net/ diff --git a/public/icons/ui/dir-white/dir-white.png b/public/icons/ui/dir-white/dir-white.png deleted file mode 100644 index 0da245207a88d4c5cd24cfaeb20bed47945eb0c0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 125 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6Ts&PILp07OCoGWvQUC4#lK)OW zL>dm<{=f5oi)m_QTxaL|JVPAIdR=Ov5jfH^2e&rZ~mXGVD2ho ZVDLFmpuOVe#a5ts44$rjF6*2UngAkgG;;s| diff --git a/public/icons/ui/dir-white/dir-white@2x.png b/public/icons/ui/dir-white/dir-white@2x.png deleted file mode 100644 index 7486a52092bd4cce1a0fc6a23f819884fa8776a3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 191 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE0wix1Z>k4UZJsWUAs)xyUfIvfm?*>cp!;&S zqKa7H43~u)I8H`BV%yQ=rK1>_eUxS2qrg}Dw=dXH-k|>TZ|*F^dhxyOb2DuN4&2=( z_TyQ~Oh%Epl}raths|av*nEmXLdU3K``$>V1DB7fFg}>XbbU+9wtb!LOFAz~EOzY* r+i9V8ykwpA^B)VB=;xmC|HNn=yS6TJ`4> diff --git a/public/icons/ui/dir/SOURCE b/public/icons/ui/dir/SOURCE deleted file mode 100644 index fa3cf541..00000000 --- a/public/icons/ui/dir/SOURCE +++ /dev/null @@ -1 +0,0 @@ -http://gemicon.net/ diff --git a/public/icons/ui/dir/dir.png b/public/icons/ui/dir/dir.png deleted file mode 100644 index 65fd86c54865d746e392829ee17aa774635bb106..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 203 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`lRRA2As=SIgoRUg3#_@^rEPHZ#*@-n4Krd6 z+F0CeuCACrGtlKhjB@rb1p|&PoE};#QzsR9Myj(3eiU24wCEX^&g^gXPO}~MJm5Gp zmnm@m8NM02ScJ+Gcza@*I=MF#aH;SeIHM_WfcXZ4@N|bqY-<`OdMgy>oqDlY#60~= z0c&skmeuY%j(*|Dy?-IBBWLLjrf)N5UF?**y|Gq7vq9)Y|p7q4SllRg6mhIgyuZ0|`OQURLH;OXk;vd$@?2>^GZG5i1k diff --git a/public/icons/ui/path/16@2x.png b/public/icons/ui/path/16@2x.png deleted file mode 100644 index 3834fe0d29e0fb8b96f25bd50915862b2cb37e0e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 218 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=ffJg`O^sArXg@6C_v{Cy4YgDLJ^i zAJk|jo RSpXf&;OXk;vd$@?2>`#uP(=U$ diff --git a/views/app.erb b/views/app.erb index 411f1e5f..509859fe 100644 --- a/views/app.erb +++ b/views/app.erb @@ -30,7 +30,7 @@ @@ -55,6 +55,9 @@ + + +