Page MenuHomePhabricator
Create Task
Maniphest T344508

[Task] Update NativeEditor related Icons, text formatting and fonts
Closed, ResolvedPublic
Actions

Assigned To
JTannerWMF
Authored By
OTichonova
Aug 18 2023, 4:03 PM
Tags
Referenced Files
F41729743: Group 427318309.png
Jan 29 2024, 11:49 PM
F41729730: IMG_3188.png
Jan 29 2024, 11:49 PM
F41534395: botfrt colotd.png
Jan 29 2024, 11:49 PM
File Not Attached
F41729718: Group 427318306.png
Jan 29 2024, 11:49 PM
F41729723: Group 427318308.png
Jan 29 2024, 11:49 PM
F41596558: Nice to have.mov
Dec 12 2023, 4:45 PM
F41596563: Full page formatting.png
Dec 12 2023, 4:45 PM
F41596586: Full page formatting.png
Dec 12 2023, 4:45 PM
View All 24 Files
Subscribers
ABorbaWMF
Aklapper
JTannerWMF
Mazevedo
OTichonova
Seddon
Tsevener

Description

V1 improvements to the native text editor

Initial improvements include updated -> icons, text formatting and fonts based on our component library.

Designs
Figma file
The icon audit and additional information can be found -> T299794

Toolbar, text formatting, and text sizes

Toolbar view 1Toolbar view: selectedToolbar view 2Text formatting sheetText formatting: sizesToolbar 3: Double tap on textSizes 2
Toolbar 1.png (667×375 px, 47 KB)
Toolbar 1 Selected.png (667×375 px, 47 KB)
Toolbar 2.png (667×375 px, 46 KB)
Text formatting.png (667×375 px, 44 KB)
Sizes 1.png (667×375 px, 42 KB)
Toolbar 3.png (667×375 px, 55 KB)
Sizes 2.png (667×375 px, 43 KB)

Syntax color

  • Don't think the purple or the red-100 were part of the earlier color update (both colors are found on desktop. Slight chance these might be updated
DefaultSepiaDarkBlack
Syntax default.png (667×375 px, 38 KB)
Syntax sepia.png (667×375 px, 41 KB)
Syntax dark.png (667×375 px, 62 KB)
Syntax black.png (667×375 px, 56 KB)

Colors

Colors.png (1×2 px, 125 KB)

Related Objects
Search...

Event Timeline

OTichonova created this task.Aug 18 2023, 4:03 PM
JTannerWMF triaged this task as Low priority.Aug 22 2023, 4:49 PM
JTannerWMF moved this task from Needs Triage to Engineering Backlog on the Wikipedia-iOS-App-Backlog board.
Seddon renamed this task from Icons, text formatting and Fonts are updated based on our component library to [Task] Update NativeEditor related Icons, text formatting and fonts.Oct 3 2023, 1:33 AM
Seddon subscribed.Oct 3 2023, 1:38 AM

Some of this work was covered in prototype prep done as part of: https://github.com/wikimedia/wikipedia-ios-components/pull/8

This task is focused on bringing alignment between the components and the design system.

Seddon mentioned this in T347925: [Task] Reading controls popover support and bold / italics formatting.Oct 3 2023, 2:40 AM
Seddon mentioned this in T347928: [Task] Add formatting options to NativeEditor tool bar.Oct 3 2023, 3:37 AM
Seddon mentioned this in T348072: [Sub Task] Add more text style formatting functions to NativeEditor toolbar.Oct 3 2023, 9:45 PM
Seddon mentioned this in T348073: [Sub Task] Add paragraph/header formatting functions to NativeEditor toolbar.
Seddon mentioned this in T348074: [Sub Task] Add template formatting functions.Oct 3 2023, 9:50 PM
Seddon mentioned this in T348088: [Sub Task] Add undo/redo buttons to NativeEditor.Oct 4 2023, 12:59 AM
Seddon mentioned this in T348089: [Sub Task] Add clear formatting functionality to NativeEditor.Oct 4 2023, 2:02 AM
Tsevener assigned this task to Mazevedo.Oct 31 2023, 7:01 PM
Tsevener moved this task from Tasks from Product Backlog to Needs Engineering Sync on the iOS Release FY2023-24 (Archive) board.
Mazevedo moved this task from Needs Engineering Sync to Doing on the iOS Release FY2023-24 (Archive) board.Nov 23 2023, 4:47 PM
Mazevedo moved this task from Doing to Needs Code Review on the iOS Release FY2023-24 (Archive) board.Dec 5 2023, 10:24 PM

PR link https://github.com/wikimedia/wikipedia-ios/pull/4690

Tsevener subscribed.Dec 5 2023, 11:03 PM

Icons work is merged, the syntax highlighting will be done as the various formatters are added. Moving back into Ready for Dev for input view changes.

Tsevener moved this task from Needs Code Review to Ready for Development on the iOS Release FY2023-24 (Archive) board.Dec 5 2023, 11:04 PM
Tsevener added a comment.EditedDec 7 2023, 10:50 PM

Input view rework PR: https://github.com/wikimedia/wikipedia-ios/pull/4696

@OTichonova as discussed between ourselves and @JTannerWMF, please update this ticket's mocks to reflect your ideal designs for the keyboard input view.

Before (two keyboard views):

IMG_0300.PNG (2×1 px, 245 KB)

IMG_0301.PNG (2×1 px, 253 KB)

Current PR (one view):

Screenshot 2023-12-07 at 4.50.23 PM.jpeg (2×1 px, 957 KB)

Tsevener removed Mazevedo as the assignee of this task.Dec 7 2023, 10:51 PM
Tsevener moved this task from Ready for Development to Needs Design on the iOS Release FY2023-24 (Archive) board.
Tsevener added a subscriber: Mazevedo.
OTichonova added a comment.Dec 12 2023, 4:45 PM

Hi @Tsevener, thank you for sharing!

The mocks below and in the Figma file

Keyboard viewSelected formattingToolbar 1
Full page formatting-2.png (667×375 px, 45 KB)
Full page formatting.png (667×375 px, 47 KB)
Full page formatting.png (667×375 px, 47 KB)

Nice to have.mov2 MBDownload

Per discussion, there is no more 'clear formatting'. One can select and deselect formatting options.

Tsevener moved this task from Needs Design to Ready for Development on the iOS Release FY2023-24 (Archive) board.Dec 14 2023, 9:10 PM

@OTichonova thanks!

Tsevener added a comment.Dec 15 2023, 9:53 PM

@Mazevedo I have made progress on this new keyboard input design in https://github.com/wikimedia/wikipedia-ios/pull/4696. Can you review and merge that, then start on a followup-PR to get closer to Olga's designs in https://phabricator.wikimedia.org/T344508#9400570? Feel free to incorporate any PR feedback you had in #4696 into your followup PR.

If you run into merge conflicts, the native-editor-prs branch might help you decide what to keep. It has all Native Editor PRs merged into one branch.

Thanks!

Tsevener assigned this task to Mazevedo.Dec 15 2023, 9:53 PM
Mazevedo moved this task from Ready for Development to Doing on the iOS Release FY2023-24 (Archive) board.Jan 16 2024, 1:13 PM
Tsevener removed Mazevedo as the assignee of this task.Jan 17 2024, 5:09 PM
Tsevener moved this task from Doing to Ready for Development on the iOS Release FY2023-24 (Archive) board.
Tsevener raised the priority of this task from Low to Medium.Jan 19 2024, 9:41 PM
Tsevener claimed this task.Jan 23 2024, 5:57 PM
Tsevener moved this task from Ready for Development to Doing on the iOS Release FY2023-24 (Archive) board.
Tsevener added a comment.EditedJan 26 2024, 11:32 PM

@OTichonova I kicked off a new build with my progress on this. I still have these small things left to do, which is why this isn't in the design review column yet:

  1. Update the icons for undo, redo, and opening the reading themes popover.
  2. Improve the top spacing in the reading themes popover.
  3. Fix bug where reading themes text circles are truncated on larger dynamic type sizes.
  4. Maybe add a shadow on top of the keyboard formatting menus so that they don't disappear as much.

Feel free to design review all other parts of this ticket. Thanks!

Tsevener added a comment.Jan 29 2024, 10:05 PM

@OTichonova Completed work on this ticket will be in Experimental build #77.

Tsevener removed Tsevener as the assignee of this task.Jan 29 2024, 10:05 PM
Tsevener moved this task from Doing to Needs Design Review on the iOS Release FY2023-24 (Archive) board.
Tsevener added a comment.Jan 29 2024, 11:17 PM

PR: https://github.com/wikimedia/wikipedia-ios/pull/4729

OTichonova added a comment.Jan 29 2024, 11:49 PM

@Tsevener, great work! This is so exciting!
I just have a couple of comments about color.

  1. Could the background colors and selected state colors in the toolbar match the colors in the text formatting sheet?
Current example from black theme
Group 427318308.png (667×792 px, 154 KB)
Updated toolbar background colors and selected state colors
Group 427318306.png (289×447 px, 68 KB)

Selected Default -> gray 200, EAECF0
Selected Sepia -> beige 400, EAECF0
Selected Dark & Black -> gray 600, 54595D

  1. The dividers in the toolbar are different thicknesses. Could they be thickness -> 0.5 and match the colors proposed in this ticket T351943?
Proposed colors
botfrt colotd.png (196×806 px, 16 KB)
Dividers currentlyNew
IMG_3188.png (61×375 px, 4 KB)
.
Group 427318309.png (60×375 px, 4 KB)
OTichonova moved this task from Needs Design Review to Ready for Development on the iOS Release FY2023-24 (Archive) board.Jan 29 2024, 11:49 PM
Tsevener claimed this task.Jan 30 2024, 9:30 PM
Tsevener moved this task from Ready for Development to Doing on the iOS Release FY2023-24 (Archive) board.
Tsevener moved this task from Doing to Needs Design Review on the iOS Release FY2023-24 (Archive) board.Jan 31 2024, 2:15 AM

@OTichonova Let me know how build #79 looks. Thanks!

Tsevener removed Tsevener as the assignee of this task.Jan 31 2024, 2:15 AM

https://github.com/wikimedia/wikipedia-ios/pull/4732

OTichonova moved this task from Needs Design Review to Needs Code Review on the iOS Release FY2023-24 (Archive) board.Jan 31 2024, 5:09 PM
Tsevener moved this task from Needs Code Review to Needs QA on the iOS Release FY2023-24 (Archive) board.Feb 2 2024, 12:18 AM
ABorbaWMF moved this task from Needs QA to Ready for PM Signoff on the iOS Release FY2023-24 (Archive) board.Feb 7 2024, 4:15 PM
ABorbaWMF subscribed.

Looks good on 7.4.7 (3152)

Tsevener mentioned this in T356461: Release 7.4.7.Feb 12 2024, 9:44 PM
JTannerWMF moved this task from Ready for PM Signoff to Ready for Release on the iOS Release FY2023-24 (Archive) board.Feb 13 2024, 12:04 AM
JTannerWMF closed this task as Resolved.Feb 13 2024, 8:59 PM
JTannerWMF claimed this task.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and 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