Page MenuHomePhabricator

Add 'cut', 'copy' and 'paste' icons to WikimediaUI collection, DSG & libraries
Closed, ResolvedPublic

Assigned To
Authored By
Volker_E
Nov 4 2021, 3:57 PM
Referenced Files
F35224724: Frame 2.png
Jun 10 2022, 12:25 PM
F35050224: image.png
Apr 13 2022, 7:51 PM
F35049913: LTR_RTL_Icon (1).png
Apr 13 2022, 2:05 PM
F35049906: Copy_Cut_Paste.png
Apr 13 2022, 2:03 PM
F34973955: Copy.png
Mar 3 2022, 4:08 PM
F34973954: Paste.png
Mar 3 2022, 4:08 PM
F34973956: Cut.png
Mar 3 2022, 4:07 PM

Description

Preamble

We've been in demand for 'copy' icon in the past. In current “Registration Creation Prototype for Campaign Organizers” user-interface this request has come up again.

Proposal

Design 'cut', 'copy' and 'paste' icons.
Iteration 2022-04-13:

LTR_RTL_Icon (1).png (322×218 px, 3 KB)

Acceptance criteria

Event Timeline

gonyeahialam changed the task status from Open to In Progress.Mar 2 2022, 3:06 PM

Explored some concepts for the icons. I would love some feedback.

Latest versions of the Cut, Copy, and Paste Icons:

Copy_Cut_Paste.png (270×328 px, 7 KB)

The latest iteration connects the three icons with each other pretty well. I still see some issues with them:

  • At 20x20 dp they are hard to recognize, specifically the scissor and the +. Non-retina display or low-vision users might end up with a hard time understanding either

image.png (171×113 px, 5 KB)

  • the paste is very similar to the copy. Asking as user without the context of the discussion leading to the icons: Does the '+' stand for adding to clipboard (copy) or adding into context?

Hi @gonyeahialam. I’ve created a branch in the Design System Icon Library where I’ve added the three new icons to the Editing / Advanced category.

@bmartinezcalvo As this is the first time I’ve added icons to the library would you mind QA’ing the branch and merging it if you are happy with how they have been created? Thank you :)

Hi @gonyeahialam. I’ve created a branch in the Design System Icon Library where I’ve added the three new icons to the Editing / Advanced category.

@bmartinezcalvo As this is the first time I’ve added icons to the library would you mind QA’ing the branch and merging it if you are happy with how they have been created? Thank you :)

@KieranMcCann reviewed the Figma branch with the 3 new icons. It's all right so you could merge the branch with the main file and publish the new icons in he library.

Thanks @bmartinezcalvo. That’s the branch merged and the new icons published.

Do you or @gonyeahialam no what is meant by the task “add optimized SVG to icons folder and replace ZIP file”?

Thanks @bmartinezcalvo. That’s the branch merged and the new icons published.

Do you or @gonyeahialam no what is meant by the task “add optimized SVG to icons folder and replace ZIP file”?

cc @Volker_E

Change 812859 had a related patch set uploaded (by Esanders; author: Esanders):

[oojs/ui@master] Add copy/cut/paste icons to editing-advanced

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

Change 812859 merged by jenkins-bot:

[oojs/ui@master] icons: Add 'copy'/'cut'/'paste' icons to 'editing-advanced'

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

Change 812969 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] icons: Add 'copy'/'cut'/'paste'

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

Change 813630 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/core@master] Update OOUI to v0.44.1

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

Change 813630 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.44.1

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

Change 812969 merged by jenkins-bot:

[design/codex@main] icons: Add 'copy'/'cut'/'paste'

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

Thanks @gonyeahialam for all your inputs and work throughout the process. The icons are now available in both OOUI via MediaWiki core and Codex (see current demo)

Resolved successfully!