Page MenuHomePhabricator
Create Task
Maniphest T235012

42: Add icons to some buttons in GlobalWatchlist.js
Closed, ResolvedPublic
Actions

Description

The script is currently icon-less. Let's decorate it with relevant icons.

User story

As a regular user of the GlobalWatchlist, I'd like to see some icons added to some OOUI buttons that are present in the script. It will look good too.

Icon list

All of these icons are present in OOUI.

In Special:BlankPage/GlobalWatchlist

Depends on oojs-ui.styles.icons-interactions

  • Add settings icon to the Settings button.
  • Add reload icon to the Refresh button.
  • Add check icon to Mark as seen buttons.
  • Add checkAll icon to Mark all sites as seen button.

In Special:BlankPage/GlobalWatchlistConfig

Depends on oojs-ui.styles.icons-movement

  • Add previous icon to the Global Watchlist button and probably rename the label to something like Return to Global watchlist.

Depends on oojs-ui.styles.icons-interactions

  • Add add icon to Add more button.
  • Add subtract icon to Remove buttons. (Declined)
  • Add clear icon to Reset changes made button. (used historyicon instead)

Related Objects
Search...

Event Timeline

Masumrezarock100 created this task.Oct 9 2019, 2:38 AM
Restricted Application assigned this task to DannyS712. · View Herald TranscriptOct 9 2019, 2:38 AM
Masumrezarock100 updated the task description. (Show Details)Oct 9 2019, 2:45 AM
Restricted Application added a project: User-DannyS712. · View Herald TranscriptOct 9 2019, 2:45 AM
Masumrezarock100 updated the task description. (Show Details)Oct 9 2019, 2:49 AM
Masumrezarock100 updated the task description. (Show Details)Oct 9 2019, 2:55 AM
Masumrezarock100 updated the task description. (Show Details)Oct 9 2019, 2:58 AM
Masumrezarock100 renamed this task from Add icons to some buttons to Add icons to some buttons in GlobalWatchlist.js.Oct 9 2019, 3:02 AM
Masumrezarock100 updated the task description. (Show Details)
Masumrezarock100 updated the task description. (Show Details)Oct 9 2019, 3:06 AM
Masumrezarock100 moved this task from Unsorted to Global Watchlist on the User-DannyS712 board.
Masumrezarock100 added a subscriber: DannyS712.
Masumrezarock100 updated the task description. (Show Details)Oct 9 2019, 3:09 AM
Masumrezarock100 updated the task description. (Show Details)
Masumrezarock100 updated the task description. (Show Details)Oct 9 2019, 3:49 AM
Masumrezarock100 updated the task description. (Show Details)Oct 9 2019, 6:01 AM
DannyS712 renamed this task from Add icons to some buttons in GlobalWatchlist.js to 42: Add icons to some buttons in GlobalWatchlist.js.Oct 10 2019, 3:53 AM
DannyS712 moved this task from Backlog to To investigate on the DannyS712-Global_watchlist.js board.Oct 10 2019, 3:57 AM

To do list:

  • Investigate how icons are added to elements
  • Adapt OOUI helpers to allow optional icons
  • Add icons to elements
Masumrezarock100 added a comment.EditedOct 10 2019, 5:47 PM

Icons can be added to buttons and other supported OOUI widgets. See the help page for adding icons to buttons on Mediawiki. If I am not mistaken, your script uses OO.ui.ButtonWidget to add normal buttons and OO.ui.ButtonInputWidget to add buttons to the form. So you can just use the icon attribute to add icons. Your script needs to be depended on some OOUI icon packs though.

Masumrezarock100 added a comment.Oct 30 2019, 8:49 AM

I am not sure if terms such as Add more and Remove are needed. Those button label texts needs translation. IMO, they can be replaced by just icons (add and substract). I might be wrong though.

Masumrezarock100 added a comment.Nov 9 2019, 12:08 PM

@DannyS712 If you don't mind, can I claim this task and submit a pull request? If so, then what version should I fork? Development version or the stable one?

Masumrezarock100 added a comment.EditedNov 9 2019, 12:22 PM

And you have made the OOUI buttons widgets complicated functions. I will need to investigate too before submitting a patch. Lol

DannyS712 added a parent task: T237780: Release: Create and release v6.0.Nov 14 2019, 5:09 AM
DannyS712 added a comment.Nov 14 2019, 5:17 AM
In T235012#5649513, @Masumrezarock100 wrote:

@DannyS712 If you don't mind, can I claim this task and submit a pull request? If so, then what version should I fork? Development version or the stable one?

In T235012#5649528, @Masumrezarock100 wrote:

And you have made the OOUI buttons widgets complicated functions. I will need to investigate too before submitting a patch. Lol

Absolutely. I've been meaning to come up with guidelines for others to contribute. You should

  • Claim this task
  • Fork the development version
  • Figure out if any new dependencies are needed for the icons
    • If so, add it to the `mw.loader.using
  • Take a look at my OOUI helpers
    • Note: These helpers are a poor man's version of factories
    • GlobalWatchlist.OOUI.makeButtonInput, .makeButtonInputSimpleE, and .makeButtonE are the ones to focus on
    • Tip: If the function name ends with E, it returns the .$element, not the object
  • Acceptance criteria:
    • Icon is optional - it is still possible to create ooui elements without icons
    • Whatever else you wanted
Masumrezarock100 claimed this task.Nov 14 2019, 6:27 AM

Ok, let me add all dependencies to the task description first and then I will work on this.

Masumrezarock100 updated the task description. (Show Details)Nov 14 2019, 6:36 AM
Masumrezarock100 added a comment.Nov 14 2019, 6:39 AM

All instructions about dependencies and other stuffs are at https://www.mediawiki.org/wiki/OOUI/Widgets/Icons,_Indicators,_and_Labels#Icons.

DannyS712 triaged this task as Medium priority.Nov 14 2019, 6:50 AM
DannyS712 moved this task from To investigate to Ready for development on the DannyS712-Global_watchlist.js board.
DannyS712 mentioned this in T238298: 76: Write guidelines for contributing.Nov 14 2019, 6:55 AM
Masumrezarock100 updated the task description. (Show Details)Nov 14 2019, 7:45 AM
Masumrezarock100 reassigned this task from Masumrezarock100 to DannyS712.EditedNov 14 2019, 7:48 AM

All of the icons except three last ones has been added. I also renamed the Global Watchlist name. I am having trouble understanding those last three buttons. You'll have to do the rest of the work. The diff is https://meta.wikimedia.org/w/index.php?title=User%3AMasumrezarock100%2FGlobal_watchlist.js&type=revision&diff=19555961&oldid=19555873.

DannyS712 added a comment.Nov 14 2019, 7:49 AM
In T235012#5662848, @Masumrezarock100 wrote:

All of the icons except three last ones has been added. I also renamed the Global Watchlist name. I am having trouble understanding those last three buttons. You'll have to do the rest of the work. The diff is https://meta.wikimedia.org/wiki/Special:Diff/19555873...19555961.

I was just reading through your edits. I'm not sure what last 3 buttons you are referring to?

DannyS712 added a comment.Nov 14 2019, 7:51 AM
This comment was removed by DannyS712.
Masumrezarock100 added a comment.Nov 14 2019, 7:52 AM
In T235012#5662850, @DannyS712 wrote:
In T235012#5662848, @Masumrezarock100 wrote:

All of the icons except three last ones has been added. I also renamed the Global Watchlist name. I am having trouble understanding those last three buttons. You'll have to do the rest of the work. The diff is https://meta.wikimedia.org/wiki/Special:Diff/19555873...19555961.

I was just reading through your edits. I'm not sure what last 3 buttons you are referring to?

Check the task description. I marked all of the tasks as done except last three buttons. Add more, Remove, and Reset changes made

DannyS712 added a comment.Nov 14 2019, 8:01 AM
In T235012#5662853, @Masumrezarock100 wrote:
In T235012#5662850, @DannyS712 wrote:
In T235012#5662848, @Masumrezarock100 wrote:

All of the icons except three last ones has been added. I also renamed the Global Watchlist name. I am having trouble understanding those last three buttons. You'll have to do the rest of the work. The diff is https://meta.wikimedia.org/wiki/Special:Diff/19555873...19555961.

I was just reading through your edits. I'm not sure what last 3 buttons you are referring to?

Check the task description. I marked all of the tasks as done except last three buttons. Add more, Remove, and Reset changes made

Okay. https://en.wikipedia.org/w/index.php?title=User:DannyS712_test/Global_watchlist.js&oldid=926105217 should do the trick, but the "remove" icons take up a lot of room...

Masumrezarock100 added a comment.Nov 14 2019, 8:06 AM
In T235012#5662864, @DannyS712 wrote:

Okay. https://en.wikipedia.org/w/index.php?title=User:DannyS712_test/Global_watchlist.js&oldid=926105217 should do the trick, but the "remove" icons take up a lot of room...

See M289#4853 . It takes up a lot of room but if we omit the label, it would not.

DannyS712 added a comment.Nov 14 2019, 8:10 AM
In T235012#5662870, @Masumrezarock100 wrote:
In T235012#5662864, @DannyS712 wrote:

Okay. https://en.wikipedia.org/w/index.php?title=User:DannyS712_test/Global_watchlist.js&oldid=926105217 should do the trick, but the "remove" icons take up a lot of room...

See M289#4853 . It takes up a lot of room but if we omit the label, it would not.

True, but I think the text is needed.

DannyS712 closed this task as Resolved.Nov 14 2019, 8:13 AM
DannyS712 reassigned this task from DannyS712 to Masumrezarock100.
DannyS712 moved this task from Ready for development to Done (6.0) on the DannyS712-Global_watchlist.js board.

Icon for removing sites removed, everything else deployed as 5.3.0

DannyS712 added a parent task: T238033: 73: Newsletter, issue #3.Nov 14 2019, 8:14 AM
Masumrezarock100 added a comment.Nov 14 2019, 8:17 AM
In T235012#5662872, @DannyS712 wrote:
In T235012#5662870, @Masumrezarock100 wrote:
In T235012#5662864, @DannyS712 wrote:

Okay. https://en.wikipedia.org/w/index.php?title=User:DannyS712_test/Global_watchlist.js&oldid=926105217 should do the trick, but the "remove" icons take up a lot of room...

See M289#4853 . It takes up a lot of room but if we omit the label, it would not.

True, but I think the text is needed.

I see.

Masumrezarock100 updated the task description. (Show Details)Nov 14 2019, 9:31 AM
Masumrezarock100 updated the task description. (Show Details)
Masumrezarock100 added a comment.Nov 14 2019, 10:34 AM

@DannyS712 not sure history icon is the best fit for Reset changes made button.

DannyS712 added a comment.Nov 14 2019, 10:36 AM
In T235012#5663137, @Masumrezarock100 wrote:

@DannyS712 not sure history icon is the best fit for Reset changes made button.

It looks the closest, imo. Feel free to suggest another icon. Unfortunately, I have to get off for a while - real life calls

Masumrezarock100 added a comment.EditedNov 14 2019, 10:49 AM

clear icon was the most similar icon I could find and their names are kinda similar. And depending on another icon pack means, loading the whole icon pack (extra data usage). Well it's your script, you decide what to do.

DannyS712 closed subtask T238445: 79: Assign some icons to the Live updates button as Resolved.Nov 17 2019, 2:43 AM
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 · Credits