From dbf8345851f39b7aa6bee56960a7bf9e1bec88b9 Mon Sep 17 00:00:00 2001 From: m4tx Date: Wed, 4 Dec 2013 23:13:30 +0100 Subject: [PATCH] Add an SVG version of watch icon The watch icon isn't in the sprite now, using separate image files for each state Bug: 35335 Change-Id: Iee3765e940cfd9784c55b6a87a678e41550032a7 --- .../mediawiki.less/mediawiki.mixins.less | 29 +++++ skins/vector/components/watchstar.less | 17 ++- skins/vector/images/unwatch-icon-hl.png | Bin 0 -> 716 bytes skins/vector/images/unwatch-icon-hl.svg | 120 ++++++++++++++++++ skins/vector/images/unwatch-icon.png | Bin 0 -> 658 bytes skins/vector/images/unwatch-icon.svg | 117 +++++++++++++++++ skins/vector/images/watch-icon-hl.png | Bin 0 -> 640 bytes skins/vector/images/watch-icon-hl.svg | 117 +++++++++++++++++ skins/vector/images/watch-icon-loading.gif | Bin 840 -> 0 bytes skins/vector/images/watch-icon-loading.png | Bin 0 -> 485 bytes skins/vector/images/watch-icon-loading.svg | 117 +++++++++++++++++ skins/vector/images/watch-icon.png | Bin 0 -> 642 bytes skins/vector/images/watch-icon.svg | 117 +++++++++++++++++ skins/vector/images/watch-icons.png | Bin 1422 -> 0 bytes 14 files changed, 627 insertions(+), 7 deletions(-) create mode 100644 skins/vector/images/unwatch-icon-hl.png create mode 100644 skins/vector/images/unwatch-icon-hl.svg create mode 100644 skins/vector/images/unwatch-icon.png create mode 100644 skins/vector/images/unwatch-icon.svg create mode 100644 skins/vector/images/watch-icon-hl.png create mode 100644 skins/vector/images/watch-icon-hl.svg delete mode 100644 skins/vector/images/watch-icon-loading.gif create mode 100644 skins/vector/images/watch-icon-loading.png create mode 100644 skins/vector/images/watch-icon-loading.svg create mode 100644 skins/vector/images/watch-icon.png create mode 100644 skins/vector/images/watch-icon.svg delete mode 100644 skins/vector/images/watch-icons.png diff --git a/resources/mediawiki.less/mediawiki.mixins.less b/resources/mediawiki.less/mediawiki.mixins.less index 5d2c27189f..e21d21b2ae 100644 --- a/resources/mediawiki.less/mediawiki.mixins.less +++ b/resources/mediawiki.less/mediawiki.mixins.less @@ -50,3 +50,32 @@ -webkit-transition: @string; transition: @string; } + +@-webkit-keyframes rotate { + from { + -webkit-transform:rotate(0deg); + } + to { + -webkit-transform:rotate(360deg); + } +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.rotation(@time) { + -webkit-animation-name: rotate; + -webkit-animation-duration: @time; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-name: rotate; + animation-duration: @time; + animation-iteration-count: infinite; + animation-timing-function: linear; +} diff --git a/skins/vector/components/watchstar.less b/skins/vector/components/watchstar.less index 6f93215988..6e4a7b35c3 100644 --- a/skins/vector/components/watchstar.less +++ b/skins/vector/components/watchstar.less @@ -13,26 +13,29 @@ margin-top: -0.8em !ie; height: 0; overflow: hidden; - .background-image('images/watch-icons.png'); + background-position: 5px 60%; } #ca-unwatch.icon a { - background-position: -43px 60%; + .background-image-svg('images/unwatch-icon.svg', 'images/unwatch-icon.png'); } #ca-watch.icon a { - background-position: 5px 60%; + .background-image-svg('images/watch-icon.svg', 'images/watch-icon.png'); } #ca-unwatch.icon a:hover, #ca-unwatch.icon a:focus { - background-position: -67px 60%; + .background-image-svg('images/unwatch-icon-hl.svg', 'images/unwatch-icon-hl.png'); } #ca-watch.icon a:hover, #ca-watch.icon a:focus { - background-position: -19px 60%; + .background-image-svg('images/watch-icon-hl.svg', 'images/watch-icon-hl.png'); } #ca-unwatch.icon a.loading, #ca-watch.icon a.loading { - .background-image('images/watch-icon-loading.gif'); - background-position: 5px 60%; + .background-image-svg('images/watch-icon-loading.svg', 'images/watch-icon-loading.png'); + .rotation(700ms); + background-position: 50% 60%; + -webkit-transform-origin: 50% 57%; + transform-origin: 50% 57%; } #ca-unwatch.icon a span, #ca-watch.icon a span { diff --git a/skins/vector/images/unwatch-icon-hl.png b/skins/vector/images/unwatch-icon-hl.png new file mode 100644 index 0000000000000000000000000000000000000000..6b2b50279be7a115490664527820cc6047e94ae4 GIT binary patch literal 716 zcmV;-0yF)IP)5r00004b3#c}2nYxW zd;l+a1A{a0&sai{GAP{3}Q-ZijLemJYL>Df_ zjsL>|#2+B;+JzkwE7FC*AT|ooo$JkTdb7N%rYn&!~TS(`;+MKb2v0zs0$p!p#Yjk z0-Cjl3F|#Z#fIR_xFtnWD@Bvccy0G%vv&9c2R#>RUHpe?7ZA`eEbSv8J~RL`9!aef z*l_fb|=xlAE8jq3(RS zuqgc$9CZP-48WrR9)*ys-Z7bNgs;u7?hO2bW%0JbhuYOHN39EVO+Z(F!>cm%_?Z@Q zZaBYDrl~p)P^}9PS(vup*;lM}+ozb&H9)vV8El$5M(Iz8DWUH)rjJ_%nm&5fk;y0l zz<6shS{u3Rw)HU|Yj1@BEDaRs!5f=2R>`*1&z#ziucw#G0I-?QMn?8uKbI^KCB+?e yyud|`Z%ncik! literal 0 HcmV?d00001 diff --git a/skins/vector/images/unwatch-icon-hl.svg b/skins/vector/images/unwatch-icon-hl.svg new file mode 100644 index 0000000000..346e072d0a --- /dev/null +++ b/skins/vector/images/unwatch-icon-hl.svg @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + Mateusz "m4tx" Maćkowski + + + + + + + + + diff --git a/skins/vector/images/unwatch-icon.png b/skins/vector/images/unwatch-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..9fd9436ad9b24fa48f97addcb3d91b391534eab3 GIT binary patch literal 658 zcmV;D0&V??P)5r00004b3#c}2nYxW zdQV)Bpeg8FWQhbW?9;ba!ELWdL_~cP?peYja~^ zaAhuUa%Y?FJQ@H10uM<g)O(YfWpF(oP&l#i{`$m3+pM2tYZGBjSMNt@<5X(KTDit1Fw{{HYBbOFW$! zDY&<;6kMs)^HUkDY}f8eA#R+_=8;L~A*CFByj{OHh)YYa_U=n5%SnqS+2DH5m?0sE zr$&aIOgaZY1RCuQzJ6~U8Doe^d;#!@z#eP;Q3;}^Abxc7Lf#%9ItLO797Y0u2s8u0 z4}nl*q0ST?KQz$M@u*{3qq5gt5JU^a%vj#=rV^HXJ3DqclXJ81LkwIZAdL>xQKMsY zw6I>8+@-%gSlZevC8XLJyEvRxc8>fI@Q+V~2O(f9z~KX??&l6^F}GSNdH_KEMXJ8> zimXMgaA{olA;AxU!ye#RK*|Epu1AKb{A6*wHZTRr+!aD~n*pI206_$}iGM3);!tSx zVq@&Fm@qQQ%>dBM$a2d#re$1<;o5+0+eD-%`ZfPmnLwq0Q*M%faw6D2BJc+d;8*wC zw0*vi%A}pl?{23A;N?IACOMOgelQvFo^|watuna_0LvTRRI9oF!e}$Cl$?(LfOUhI s=T{et@A~iSCq}oco3+^}G7tK(Kcgk(CmQtwI{*Lx07*qoM6N<$f~|BPlmGw# literal 0 HcmV?d00001 diff --git a/skins/vector/images/unwatch-icon.svg b/skins/vector/images/unwatch-icon.svg new file mode 100644 index 0000000000..9e13769449 --- /dev/null +++ b/skins/vector/images/unwatch-icon.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + Mateusz "m4tx" Maćkowski + + + + + + + + + diff --git a/skins/vector/images/watch-icon-hl.png b/skins/vector/images/watch-icon-hl.png new file mode 100644 index 0000000000000000000000000000000000000000..4cb87cda65a7c5e05dac5fa83fc2b07fedda6432 GIT binary patch literal 640 zcmV-`0)PF9P)5r00004b3#c}2nYxW zd^plm$UULQdlFQNxvO0Gqv77m2=^u-)Zj_Im>uc*kY32-z{C(2fk6;z23IT zPQ^#3%OD~U5scYvtWuiT+N>`~a*56Qf;37KTY4ck_?P=9AR-v~8|U==xFewiR-jM?n4ZQ1ua ad%pplu@0XndNE1>0000 + + + + + + + + + + + + + + + + + image/svg+xml + + + + + Mateusz "m4tx" Maćkowski + + + + + + + + + diff --git a/skins/vector/images/watch-icon-loading.gif b/skins/vector/images/watch-icon-loading.gif deleted file mode 100644 index 618c308e0b0a95912a39e2e303523efc2c08facc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 840 zcmZ?wbhEHb6krfwI3mw*>(;GDj~;#a@Zr;^PcL4)c=P7XwQJXY{P^+h+qZM)&fU3l z=gO5U@7}$8@ZiD4ix*$LdiD43-+TA&{rU6f_wV2T{{6dr`SOh$H-7#4b@S%U=g*&i z{rdIk)2Gj#J^S+I%YQIX{Lk&@8WQa67~pE8XTZ$Jz`&sRlZBI+L7qVe$Obw>fPsNE z`+<62e85DFsKTgOd2^@lSn;^>;6txlk7dj~nl4Z5(3$4pRlQAW4ZiH*%6c z@3c^fT;pia^ykndu9+rczA`}gmblZnN(Os1=s}{nNq|w zCHeSRSY!oxIw@myPb1JhPs*p7jBtY&N7wZtzf34%?Tcs%#2!w z6D!td&JtkY(F_tW$Yp5gba{R8jSJiHNpBh%_!coOyRakRM#Du%p+J#E>`ZdvjFsxb ze1U@8f@}+~R)fB7AJji#2#-{lHFQMN2r957g@f0(_HK z)wMCK+3-+Mnx+5lGsi|J7HOZvlEh4#6NlQ2GhFPZDaBPY$HC1AwP%_Pmnz#yh2!p6#1q9nyC Sqs=DDZmubiyjWh5!5RSd-6zoi diff --git a/skins/vector/images/watch-icon-loading.png b/skins/vector/images/watch-icon-loading.png new file mode 100644 index 0000000000000000000000000000000000000000..5f0c490fbd47bfed1bfd8f73e2d00a37f8eaf43b GIT binary patch literal 485 zcmV|{IVbAlt_csC-A3&d7+{xnlba#Id@T2Rb%mPFQ}>t&bgAAr%@Em{v?wmiL)$o&N-F_ zIp^3~>*n)$w6{Z=rVp&OHS>Okwe~v8vWJboAR?EZ=Ux83oqy%~{tp1xjR2+8al74? z9SlWLa8VR2A^?C^t3`EPA2*&d5yhQOr?=T`B+v6J5%~fD%jI$shGD1M?cOTOG6wK* zFFpM9_4xdfte>->q+ATbzLt+00000NkvXXu0mjf8ol8K literal 0 HcmV?d00001 diff --git a/skins/vector/images/watch-icon-loading.svg b/skins/vector/images/watch-icon-loading.svg new file mode 100644 index 0000000000..3423979453 --- /dev/null +++ b/skins/vector/images/watch-icon-loading.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + Mateusz "m4tx" Maćkowski + + + + + + + + + diff --git a/skins/vector/images/watch-icon.png b/skins/vector/images/watch-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..39daff23e7cd1cf4ebf8c65b549904ed41241633 GIT binary patch literal 642 zcmV-|0)737P)5r00004b3#c}2nYxW zd?@6a}YjFT$*1gP50BX*;j>(5Ms>muu)Qo zI7$r(&L|Tf_D91Z0KoQ-242{eR!1r3;e3yA>>N8}ODQ+m{GvS}1bbr*o%3G5cme1A zI&{(hGDj*LwA%Pku3@usa3Uq8cy1=1cRDIr{C4=O-fFv=0l*_T>PKyCeLZYA9hJ<@ z#PjU52eZos%h0s7Ol)}Isu^Pa03WMA>1DCpa2!6FOGoXVPkb`jm?Z zcy5>FF|p*Sxd#9Mf~XlVv?gc&2Ve{sF!bMC!s(v(03716aL^zCkVM$nt*Q0hnv&{o zqHxg57?ZJXPfwKvXO@~07*qoM6N<$f*JH9$N&HU literal 0 HcmV?d00001 diff --git a/skins/vector/images/watch-icon.svg b/skins/vector/images/watch-icon.svg new file mode 100644 index 0000000000..c7a50810e7 --- /dev/null +++ b/skins/vector/images/watch-icon.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + Mateusz "m4tx" Maćkowski + + + + + + + + + diff --git a/skins/vector/images/watch-icons.png b/skins/vector/images/watch-icons.png deleted file mode 100644 index 03aa7d54c4d213a3d85f4deab14b0b88ee5a6e63..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1422 zcmX9-X-v}x94!)$xuBaGog>jLPN!2hKH%J<17R@5$sv*nPJsoODB@&Xq99Bs1yPVg zL_k2$fnb3aD5Ir?9<)L)C`V}vl(Q|ppeOu${C^`^@{UjM%gcMYK>?>-Hh;PqgTc7? zo$(1?^UyVZw8?o*-<&$L5rc8Y1f2``n~tX8CI3@Szd%Y{-QB+{Uy zhfl>Np{V*H)5Iji)K0><0or6xCW85qycZHkU_w7JTB$MSGIXR_plboop1DVyo0BV4 zTJ0kuOQT0JxG*%e%uoT3lV?UDn*(ivCLD#H%QTGWAfL=16HvRkC9nD=C4}zOJ^b(2=Hk~eDs9^-E7Bv6d-H;($gGpC3&D`m&!;7Ip7W)m1dl|vpM21Z7; zcA(&5dkES1w@(FJ)(tACRSLth)@)gcr2y)1=$BMD8BmF@4TfcznERd(WU-hVC1AJP zsLiRgww$YEC=|fWUKkbf6vL@X`OIq(uzQ;Y|Z-Qg(eT`r~#wlmq22ow&j^|{zbjUAfMR1R7ReNz4+f|KZ^ z(=!USMj)1?ko2RoM#R8fvIB#X2zEgh7xW8FbYZatu|H{}XOcA|lZ#!r_&XiS5v{gS zG}gO-jP|7^(SRx@NC(o>JBDTydh=otVoQUn5EffK9*1;piPKgJ{mgd<59Gl%< z)IzcvSVgssivTqPGM2*L*Kw%@vcmm0 z_TIZ5+OVpBenO~sfMcGuh~%~Pu=%24anl$xu?$C_6b}kUMP=k^0BaXt$t7La=yYJ8 z(5jXFCa~GjauJxdT|9ccR-^3gW0Cv0s|Zpr2D8cdL%M6t+9jNlf&(sKPRYlA$6(f- z^z-owxgFjyeBtpCuTQdPP%KMAjF(#WNZ0g#lvS0NYs*c37J2%`m&XIq5&sJk$M`vX zbINuLY6?C^N%#Kfu)Aiwq=Qr062hsTaK0+OjBSaF!<&<5D#BZ>PrQW+XH(SOOD^K_)_-TA|{*mD_2pIINpki9+B zh&C*Snz!}y%v+(s*448?fd>Nu3B^${!sHh=O$aG7bPly&anhmqYf)V@FN{ zfzp!wbPYrIKZ#!7?hJC(iCyYX1X5L7ocu+p z^<-L~e5X&uys=cbPP`*Z_=ne2kQy5@UA;YH`j|U=g==%OO}nLkb3^Cp0BOY3&NqcF T`}l{}MuqY74e)99j=cXL_PnR@ -- 2.20.1