Page MenuHomePhabricator

On the help panel CTA button, the icon should be flipped for RTL languages.
Closed, ResolvedPublic

Description

While testing the help panel on beta, I see

. Is it possible to move the question mark to the end of the sentence (to the left)?

Note: The question mark is at the start of a sentence in English version of the Help pane too.

The position seems to be correct compared to left-to-right display.

But the icon it should be flipped for Arabic. :)

Event Timeline

@Cntlsn we'll need a RTL version of extensions/GrowthExperiments/images/askQuestion.svg, would you be able to create one please?

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon-AskQuestion</title><defs><path d="M38 14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H24l-4 4V16a2 2 0 0 1 2-2h16zm-7.962 2.605a3 3 0 0 0-.33 0 2.826 2.826 0 0 0-2.706 2.934h1.524v-.102a1.38 1.38 0 0 1 1.428-1.332h.102a1.26 1.26 0 0 1 1.248 1.284c0 .708-.27 1.086-1.074 1.626a2.304 2.304 0 0 0-1.2 2.304v.486h1.506v-.408c0-.708.24-1.074 1.092-1.626a2.754 2.754 0 0 0 1.374-2.448c0-1.584-1.2-2.718-2.964-2.718zm-1.236 9.6a1.128 1.128 0 0 0 1.2 1.2 1.122 1.122 0 0 0 1.2-1.2 1.122 1.122 0 0 0-1.2-1.2h-.138c-.624.038-1.1.575-1.062 1.2z" id="a"/></defs><g transform="translate(-20 -14)" fill="none" fill-rule="evenodd"><use fill="#FFF" xlink:href="#a"/></g></svg>

@Cntlsn we'll need a RTL version of extensions/GrowthExperiments/images/askQuestion.svg, would you be able to create one please?

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon-AskQuestion</title><defs><path d="M38 14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H24l-4 4V16a2 2 0 0 1 2-2h16zm-7.962 2.605a3 3 0 0 0-.33 0 2.826 2.826 0 0 0-2.706 2.934h1.524v-.102a1.38 1.38 0 0 1 1.428-1.332h.102a1.26 1.26 0 0 1 1.248 1.284c0 .708-.27 1.086-1.074 1.626a2.304 2.304 0 0 0-1.2 2.304v.486h1.506v-.408c0-.708.24-1.074 1.092-1.626a2.754 2.754 0 0 0 1.374-2.448c0-1.584-1.2-2.718-2.964-2.718zm-1.236 9.6a1.128 1.128 0 0 0 1.2 1.2 1.122 1.122 0 0 0 1.2-1.2 1.122 1.122 0 0 0-1.2-1.2h-.138c-.624.038-1.1.575-1.062 1.2z" id="a"/></defs><g transform="translate(-20 -14)" fill="none" fill-rule="evenodd"><use fill="#FFF" xlink:href="#a"/></g></svg>

@kostajh If it could help, I created this SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   id="svg824"
   version="1.1"
   viewBox="0 0 20 20"
   height="20"
   width="20">
  <metadata
     id="metadata828">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title>Icon-AskQuestion</dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <title
     id="title815">Icon-AskQuestion</title>
  <defs
     id="defs818">
    <path
       id="a"
       d="M38 14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H24l-4 4V16a2 2 0 0 1 2-2h16zm-7.962 2.605a3 3 0 0 0-.33 0 2.826 2.826 0 0 0-2.706 2.934h1.524v-.102a1.38 1.38 0 0 1 1.428-1.332h.102a1.26 1.26 0 0 1 1.248 1.284c0 .708-.27 1.086-1.074 1.626a2.304 2.304 0 0 0-1.2 2.304v.486h1.506v-.408c0-.708.24-1.074 1.092-1.626a2.754 2.754 0 0 0 1.374-2.448c0-1.584-1.2-2.718-2.964-2.718zm-1.236 9.6a1.128 1.128 0 0 0 1.2 1.2 1.122 1.122 0 0 0 1.2-1.2 1.122 1.122 0 0 0-1.2-1.2h-.138c-.624.038-1.1.575-1.062 1.2z" />
  </defs>
  <g
     style="fill:none;fill-rule:evenodd"
     id="g822"
     transform="matrix(-1,0,0,1,40,-14)">
    <use
       height="100%"
       width="100%"
       y="0"
       x="0"
       style="fill:#ffffff"
       id="use820"
       xlink:href="#a" />
  </g>
</svg>

@kostajh @Dyolf77_WMF Here it is:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Icon-AskQuestion-rtl</title>
    <defs>
        <path d="M2,0 L18,0 C19.1045699,0 20,0.89543 20,2 L20,20 L16,16 L2,16 C0.89543,16 0,15.104569 0,14 L0,2 C0,0.89543 0.89543,0 2,0 Z M9.96475336,2.6045405 C8.20075336,2.6045405 7.00075336,3.7385405 7.00075336,5.3225405 C6.97727536,6.3282425 7.50402736,7.2667325 8.37475336,7.7705405 C9.22675336,8.3225405 9.46675336,8.6885399 9.46675336,9.3965405 L9.46675336,9.8045405 L10.9727534,9.8045405 L10.9727534,9.3185405 C11.0851166,8.3767529 10.6088576,7.4623325 9.77275336,7.0145405 C8.96875336,6.4745405 8.69875336,6.0965405 8.69875336,5.3885405 C8.69233336,5.0523005 8.82059536,4.7274425 9.05499136,4.4862845 C9.28938736,4.2451265 9.61046536,4.1076845 9.94675336,4.1045405 L10.0487534,4.1045405 C10.4148128,4.0915865 10.771004,4.2246965 11.0388554,4.4745365 C11.3067068,4.7243825 11.4642416,5.0704685 11.4767534,5.4365405 L11.4767534,5.5385405 L13.0007534,5.5385405 C13.0616444,3.9818585 11.8512704,2.6695025 10.2947534,2.6045405 C10.184837,2.5984865 10.0746698,2.5984865 9.96475336,2.6045405 Z M11.2007534,12.2045405 C11.2383548,11.5800809 10.7631524,11.0431295 10.1387534,11.0045405 L10.0007534,11.0045405 C9.38275936,10.9598459 8.84552536,11.4245531 8.80075336,12.0425405 C8.79475936,12.0963743 8.79475936,12.1507061 8.80075336,12.2045405 C8.75605936,12.8225327 9.22076536,13.3597655 9.83875336,13.4045393 C9.89258536,13.4105349 9.94692136,13.4105349 10.0007534,13.4045405 C10.6219778,13.4456775 11.1590624,12.9757283 11.2007534,12.3545393 C11.2070282,12.3047369 11.2070282,12.2543441 11.2007534,12.2045405 Z" id="path-1"></path>
    </defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Icon-AskQuestion-RTL">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <use id="Icon-AskQuestion" fill="#FFFFFF" xlink:href="#path-1"></use>
        </g>
    </g>
</svg>
kostajh claimed this task.Jul 1 2019, 3:12 PM
kostajh moved this task from Incoming to In Progress on the Growth-Team (Current Sprint) board.

Change 520030 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Add rtl variant of askQuestion icon

https://gerrit.wikimedia.org/r/520030

Change 520030 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Add rtl variant of askQuestion icon

https://gerrit.wikimedia.org/r/520030

Etonkovidova closed this task as Resolved.Jul 3 2019, 12:27 AM

Checked in betalabs:

@kostajh - additional issues are filed as T227154: HelpPanel search icon for RTL