Page MenuHomePhabricator
Create Task
Maniphest T226829

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

Description

In T225738#5292187, @Urbanecm wrote:
In T225738#5292151, @Dyolf77_WMF wrote:

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. :)

Related Objects
Search...

Event Timeline

kostajh added a comment.Jun 28 2019, 4:15 PM

@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>
Dyolf77_WMF added a comment.Jun 28 2019, 4:53 PM
In T226829#5292602, @kostajh wrote:

@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>
Cntlsn added a comment.Jul 1 2019, 11:26 AM

@kostajh @Dyolf77_WMF Here it is:

Icon-AskQuestion-rtl.svg2 KBDownload

<?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.
gerritbot added a comment.Jul 1 2019, 3:18 PM

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

gerritbot added a comment.Jul 2 2019, 8:35 PM

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

Content licensed under Creative Commons Attribution-ShareAlike 3.0 (CC-BY-SA) unless otherwise noted; code licensed under GNU General Public License (GPL) or other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL