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

Assigned To

Authored By

	Trizek-WMF
	Jun 28 2019, 1:34 PM

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.

Capture d’écran_2019-06-28_15-29-07.png (80×316 px, 10 KB)

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

Details

	Project	Branch	Lines +/-	Subject
	mediawiki/extensions/GrowthExperiments	master	+26 -2	Add rtl variant of askQuestion icon

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	Trizek-WMF	T227573 Deploy Growth team experiments on Arabic Wikipedia
Resolved	Dyolf77_WMF	T225738 Setup configuration for Growth team experiments on Arabic Wikipedia
Resolved	kostajh	T226829 On the help panel CTA button, the icon should be flipped for RTL languages.

Event Timeline

Trizek-WMF created this task.Jun 28 2019, 1:34 PM

Trizek-WMF edited projects, added GrowthExperiments-Help panel; removed GrowthExperiments.

Trizek-WMF added a project: OOUI.

Trizek-WMF moved this task from Inbox to Upcoming Work on the Growth-Team board.

Trizek-WMF mentioned this in T225738: Setup configuration for Growth team experiments on Arabic Wikipedia.

kostajh edited projects, added Growth-Team (Current Sprint); removed Growth-Team.Jun 28 2019, 1:41 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>

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>

@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.

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 project: Patch-For-Review.Jul 1 2019, 3:18 PM

kostajh moved this task from In Progress to Code Review on the Growth-Team (Current Sprint) board.Jul 1 2019, 3:18 PM

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

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.13; 2019-07-09).Jul 2 2019, 9:01 PM

Maintenance_bot removed a project: Patch-For-Review.Jul 2 2019, 9:10 PM

Etonkovidova moved this task from Code Review to QA on the Growth-Team (Current Sprint) board.Jul 3 2019, 12:16 AM

Checked in betalabs:

Screen Shot 2019-07-02 at 5.17.31 PM.png (150×440 px, 18 KB)

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

Volker_E moved this task from Backlog to Resolved outside releases on the OOUI board.Jul 3 2019, 7:33 PM

Urbanecm edited subscribers, added: Urbanecm_WMF; removed: Urbanecm.Aug 26 2020, 1:51 PM

	F29677232: Screen Shot 2019-07-02 at 5.17.31 PM.png
	Jul 3 2019, 12:27 AM

	F29662238: Capture d’écran_2019-06-28_15-29-07.png
	Jun 28 2019, 1:34 PM

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

Description

Details

Related ObjectsSearch...

Event Timeline

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

Related Objects
Search...