From 142edcb27f674f3e07313eeebfe8d0d41a3b180f Mon Sep 17 00:00:00 2001 From: Ebrahim Byagowi Date: Sat, 12 May 2018 17:18:42 +0430 Subject: [PATCH] [i18n] Fix icons issues of the skin on RTL * Used nominal values of background-position so CSSJanus can apply CSS flipping correctly * Added the missed RTL search icons, optimized SVG source of the LTR search icon, optimized PNG rsvg-convert result of both SVGs using optipng Change-Id: I6a56f8ee448b60742b92d3613394a0d61b9235a1 --- resources/images/search-ltr.png | Bin 647 -> 464 bytes resources/images/search-ltr.svg | 79 ++++++-------------------------- resources/images/search-rtl.png | Bin 0 -> 561 bytes resources/images/search-rtl.svg | 44 ++++++++++++++++++ resources/screen-common.less | 6 +-- resources/screen-desktop.less | 2 +- resources/screen-mobile.less | 2 +- 7 files changed, 64 insertions(+), 69 deletions(-) create mode 100644 resources/images/search-rtl.png create mode 100644 resources/images/search-rtl.svg diff --git a/resources/images/search-ltr.png b/resources/images/search-ltr.png index 1ab7f2d3417af034a3c1dae2558ae8ea73229455..e64b6a61d78431ed575dae399c332663fd60f303 100644 GIT binary patch literal 464 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc3?z4jzqJQaGXs1=T!C~$L&K_7tAOOpnKLI% zn$+Fh-QM2b)zt+dJ3Bku+S)ogI)Dry2^55r5D_>Dl!C|t6`%p2I7AtmIE0HS_5c6> zr;pE{0XojGB*-tAfr*)gm0eLuSw+>t(#kn3JR&kGx~8_SzM-Xc+T3~TH*DH`?9AD7 z=bt`*`RetzA3uNHtT0XlYGzFGc6Tvyxa4yJ$XVg(;usMzCV_|S*E^l&Yo9;Xs00066NklM{uK8Y;N%DlY0uH0dVfx|q3LG!rjl9Hi~HJKy>Ean5khz<-uxjUWhAp-`wKN%B%e z=79;|5;(Tj?p$46?FB)Q+zGh8zFrcM1K?rK5GPveXVq%;G#A*1HG#?er2shBS}zQP zDuDg{echidg@5%#Ev3#$1n^VN~uGj06ZEU9eob$-I&l?TXDQF0~=^{b@iKwd`fE(sbn*%-a*iWaNxDD7&jdr^|oqq>3#>_b7;H!^?Lo?jpM!}Ffqm~16z*02+lYB2WSX1Mdbb8vU2qst~{%q TW>8M)00000NkvXXu0mjf^7JPV diff --git a/resources/images/search-ltr.svg b/resources/images/search-ltr.svg index 1a4e6bb..009b5bb 100644 --- a/resources/images/search-ltr.svg +++ b/resources/images/search-ltr.svg @@ -1,63 +1,17 @@ - - + id="svg2" + viewBox="0 0 20 20" + height="5.6444445mm" + width="5.6444445mm"> - - - @@ -71,23 +25,20 @@ + transform="translate(-121,-16.362221)" + id="layer1"> + d="m 129.49943,17.362699 c -1.91942,0 -3.83826,0.730845 -5.30273,2.195312 -2.92893,2.928936 -2.92893,7.678491 0,10.607422 2.92893,2.928931 7.67653,2.928934 10.60547,0 2.92894,-2.928936 2.92893,-7.67849 0,-10.607422 -1.46447,-1.464465 -3.38332,-2.195312 -5.30274,-2.195312 z m 0.0664,3 a 4.5,4.5 0 0 1 3.11523,1.316406 4.5,4.5 0 0 1 0,6.365234 4.5,4.5 0 0 1 -6.36328,0 4.5,4.5 0 0 1 0,-6.365234 4.5,4.5 0 0 1 3.24805,-1.316406 z" + style="opacity:1;fill:#888888;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + y="114.15007" + x="72.490379" + height="9.000001" + width="3" + id="rect4171" + style="opacity:1;fill:#888888;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> diff --git a/resources/images/search-rtl.png b/resources/images/search-rtl.png new file mode 100644 index 0000000000000000000000000000000000000000..c69bb147318195fb1ad39fbda6bd49628d16cbb8 GIT binary patch literal 561 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc3?z4jzqJQaw*!1aT!Hk=nKLI%n$!RT?d|RT z{r#O_0AzP{b+xv(c7Oqp-PYCyWCA52QgAkq0TcnN0?7gagbfjgNC8PW1EK&z0tJ!P z!!<$}SY;vRps7UW{{R19`@O~wp!eKMg8YIRSlKza_yi@TWE7NjboC9)ZJgbFd_zK` z64EoXa>}Y2o7&nZPhGrZ+42?ZHgDatci-{zS8m^V@aWl#m#^Nu`}q0G_a8rh{rxvB zfax;ONX8^@cNdQjOjlk3IU7A)9780+YtLU5I%FWgdO@UXcXpw6(4DU6_y7M3F1;DR zW_4%z+{wOXr*F*PG48fXI!2~mZZ5ne|=UaQ9k3tDz-OoUIzBDbHaPQ?6la@saxKbUiG}Rr!iCX+tkI)8xL*yk?dE=q+6 + + + + + + image/svg+xml + + + + + + + + + + diff --git a/resources/screen-common.less b/resources/screen-common.less index 99bdcb9..2d8c574 100644 --- a/resources/screen-common.less +++ b/resources/screen-common.less @@ -48,7 +48,7 @@ body { width: 11em; height: 11em; background-repeat: no-repeat; - background-position: 50% 50%; + background-position: center center; margin: 0.75em auto 0; } #p-logo-text { @@ -100,7 +100,7 @@ body { height: 2.5em; .icon; .background-image-svg( 'images/search-ltr.svg', 'images/search-ltr.png' ); - background-position: 50% 40%; + background-position: center 40%; box-shadow: none; } @@ -273,7 +273,7 @@ a.new, a { .background-image-svg( 'images/pencil-grey.svg', 'images/pencil-grey.png' ); background-repeat: no-repeat; - background-position: 0 0; + background-position: left bottom; display: inline-block; padding: 0.5em 0 0.25em 1.75em; } diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less index 02be0dd..5d8486a 100644 --- a/resources/screen-desktop.less +++ b/resources/screen-desktop.less @@ -85,7 +85,7 @@ font-weight: normal; font-size: 1.1em; .background-image-svg( 'images/user-grey.svg', 'images/user-grey.png' ); - background-position: 0 7px; + background-position: left 7px; background-repeat: no-repeat; .dropdown-header(); diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less index daa0aef..85c7e6b 100644 --- a/resources/screen-mobile.less +++ b/resources/screen-mobile.less @@ -93,7 +93,7 @@ padding-bottom: 0; font-size: 1em; background-repeat: no-repeat; - background-position: 50% 50%; + background-position: center center; span { display: inline-block;