Page MenuHomePhabricator

Update style of text size dialogue box
Closed, ResolvedPublic

Description

Objective

This task aims to customize the changing story text size dialogue box design by adding some customization property to it without impacting other dialogue boxes.

en.m.wikipedia.beta.wmflabs.org_wiki_Cat_wikistories=1 (5).png (1×800 px, 473 KB)
Design
en.m.wikipedia.beta.wmflabs.org_wiki_Cat_wikistories=1 (7).png (1×800 px, 385 KB)

To achieve this design, make the following changes in css.

Change dialoge box width

  • Change dialouge box width from 50% to 75%.

Change for "Text size" title.

  • Reduce "Text size" size from 24 px to 16 px.
  • Change margin values to margin: 16px 0 0 16px;
  • Set font-weight to 700;
  • Change it's color from #000 to #202122.

Changes for "Radio buttons"

  • Change their width and height to 24px.
  • Set margin-left & margin-bottom to 16 px.
  • Align button labels in center with radio buttons.

Details

Related Changes in Gerrit:

Event Timeline

SBisson renamed this task from Enhance text size dialogue box with alignment customization to Update style of text size dialogue box.Feb 1 2023, 4:22 PM
SBisson claimed this task.
SBisson triaged this task as Medium priority.
SBisson moved this task from Definition to Dev on the Inuka-Team (Kanban) board.

Change 885884 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] Text size dialog style

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

@SGautam_WMF I've made some progress here. I tried to implement your design exactly but I landed on the version above, which looked good on my device. Further fine tuning may be done in a live session. I was also wondering if the labels should be in the actual text size they represent ( "small" would be in the small text size, "medium" in the medium text size, etc ) to make it clearer to the reader.

localhost_8080_wiki_Dog(Galaxy S III).png (1×720 px, 619 KB)

Making those changes also changed the look of the delete frame confirm dialog. See below.

BeforeAfter
localhost_8080_wiki_Special_StoryBuilder_Story_A_new_dog_has_come_frameid=1(iPhone XR).png (1×828 px, 851 KB)
localhost_8080_wiki_Special_StoryBuilder_Story_A_new_dog_has_come_frameid=1(iPhone XR) (1).png (1×828 px, 791 KB)

There is also the alert dialog that I would like to bring closer to the others but it can be a different task.

localhost_8080_wiki_Special_StoryBuilder_Story_A_new_dog_has_come_frameid=1(iPhone XR) (2).png (1×828 px, 713 KB)

should we remove the margin bottom for the last item?

image.png (460×777 px, 51 KB)

after remove:

image.png (444×785 px, 55 KB)

Thanks @SBisson & @hueitan let me have a look and get back

@SBisson Is it possible to keep delete dialog box's style as it is instead of moving it to left?

@SGautam_WMF we can customize the alignment but the other aspects of the style (font size, weight, padding, margin, etc) are managed centrally in the dialog component and will be the same for all instances.

I've updated to patch to default to make the ConfirmDialog default to center alignment but configure it to left alignment for the text size dialog.

Change 885884 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Text size dialog style

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