search

oppia / oppia

A free, online learning platform to make quality education accessible for all.
https://www.oppia.org
Apache License 2.0
5.63k stars 3.79k forks source link

Replace Material Icons with Font Awesome icons #15968

Closed JayVivarekar closed 1 year ago

JayVivarekar commented 1 year ago

The Oppia frontend uses two icon families namely Font Awesome and Material icons. It has been decided to do away with Material icons throughout the frontend code and use only Font Awesome icons. This issue requires you to replace the material icons with corresponding (or similar) Font Awesome icons.

Getting Assigned.

Select around three files from the list given below and ask @JayVivarekar or @vojtechjelinek to assign them to you.

Instructions

  1. After a file is assigned to you, go through that file and find the occurrences of Material Icons in them.
  2. For a given occurrence, run the Oppia server locally and try to find the icon in the frontend.
  3. Replace the icon to the closest Font Awesome 5 icon you can find. You can search through all available icons here . Make sure to use only "Free" icons.
  4. If you are confused regarding which icon to use, feel free to ask @JayVivarekar or @vojtechjelinek.
  5. Make sure to screenshot all the icons that you've replaced (before and after) and put these screenshots in the PR description.

NOTE : You might need to modify the relevant CSS files to get correct appearance of the replaced icon.

PR for reference

15926

List of files with material icons

github-actions[bot] commented 1 year ago

Hi @JayVivarekar, thanks for proposing this as a good first issue. I am removing the label for now and looping in @DubeySandeep to approve the label. It will be added back if approved. Thanks!

nettle790 commented 1 year ago

Hi I would like to work on the issues from files 3,4, and 5.

nettle790 commented 1 year ago

oppia/core/templates/components/question-directives/question-misconception-selector/question-misconception-selector.component.html oppia/core/templates/components/question-directives/questions-list/questions-list.component.html oppia/core/templates/components/review-material-editor/review-material-editor.component.html

JayVivarekar commented 1 year ago

@Shivkant-Chauhan @nettle790 Done.

rohitnandi12 commented 1 year ago

Hello, @JayVivarekar @vojtechjelinek
I would like to make a contribution. Please assign me these files. 6th, 7th, and 8th files from the bottom.

oppia/core/templates/pages/story-viewer-page/navbar-pre-logo-action/story-viewer-navbar-pre-logo-action.component.html oppia/core/templates/pages/subtopic-viewer-page/navbar-pre-logo-action/subtopic-viewer-navbar-pre-logo-action.component.html oppia/core/templates/pages/teach-page/teach-page.component.html

seanlip commented 1 year ago

Deassigning @nettle790 based on https://github.com/oppia/oppia/pull/15972.

@rohitnandi12 Please follow the "getting started" instructions first: https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#setting-things-up

JayVivarekar commented 1 year ago

@rohitnandi12 Done.

nettle790 commented 1 year ago

Please send the issue file. I will check it out.

Sent from my iPhone

On 04-Sep-2022, at 1:29 PM, Shivkant Chauhan @.***> wrote:

 @JayVivarekar

I am facing a problem, there is a blank box when I am trying to add a font awesome icon. I think all the dependencies of font-awesome are already added in the script file because the same file I am working in also contains some font-awesome icons and they are working fine.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

nettle790 commented 1 year ago

It is not a blank box.it is a fontawesome square icon

Sent from my iPhone

On 04-Sep-2022, at 6:32 PM, Aser Crystal @.***> wrote:

Please send the issue file. I will check it out.

Sent from my iPhone

On 04-Sep-2022, at 1:29 PM, Shivkant Chauhan @.***> wrote:

 @JayVivarekar

I am facing a problem, there is a blank box when I am trying to add a font awesome icon. I think all the dependencies of font-awesome are already added in the script file because the same file I am working in also contains some font-awesome icons and they are working fine.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

nettle790 commented 1 year ago

I must check the file.

Sent from my iPhone

On 05-Sep-2022, at 12:16 AM, Shivkant Chauhan @.***> wrote:

 Hi @nettle790. I am using a pen icon but it is showing a blank box instead. I also tried using other icons, still the same blank box was there in place of the icon.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

zaid-ismail031 commented 1 year ago

Hello @JayVivarekar @vojtechjelinek. Can I please be assigned the following files:

Thank you.

nettle790 commented 1 year ago

Hopefully this helps.

On 05-Sep-2022, at 8:02 AM, Zaid Ismail @.***> wrote:

Hello @JayVivarekar https://github.com/JayVivarekar @vojtechjelinek https://github.com/vojtechjelinek. Can I please be assigned the following files:

oppia/core/templates/pages/skill-editor-page/navbar/skill-editor-navbar.directive.html oppia/core/templates/pages/story-editor-page/editor-tab/story-node-editor.directive.html oppia/core/templates/pages/story-editor-page/navbar/story-editor-navbar.component.html Thank you.

— Reply to this email directly, view it on GitHub https://github.com/oppia/oppia/issues/15968#issuecomment-1236487796, or unsubscribe https://github.com/notifications/unsubscribe-auth/AROMJUJFVUF7KUD7S7TQJSDV4VLU3ANCNFSM6AAAAAAQBBVNEY. You are receiving this because you were mentioned.

JayVivarekar commented 1 year ago

@JayVivarekar image

I am facing a problem, there is a blank box instead of the icon when I am trying to add a font awesome icon. I think all the dependencies of font-awesome are already added in the script file because the same file I am working in also contains some font-awesome icons and they are working fine.

@Shivkant-Chauhan Which icon are you trying to replace? Can you specify the file?

JayVivarekar commented 1 year ago

@zaid-ismail031 Done

anniemacdev commented 1 year ago

Hi @vojtechjelinek @JayVivarekar. I would like to make a contribution. Can you please assign me the following files?

oppia/core/templates/components/question-directives/questions-list/questions-list.component.html oppia/core/templates/components/review-material-editor/review-material-editor.component.html oppia/core/templates/components/state-directives/answer-group-editor/answer-group-editor.component.html

Thanks!

JayVivarekar commented 1 year ago

@anniemacdev Done

SubhashThenua commented 1 year ago

Hi @vojtechjelinek @JayVivarekar. I am interested to contribute .Can you please assign issue from following files or from other files as per the requirements.

oppia/core/templates/pages/library-page/search-bar/search-bar.component.html

oppia/core/templates/pages/library-page/library-page.component.html

oppia/core/templates/pages/admin-page/navbar/admin-navbar.component.html

oppia/core/templates/pages/exploration-player-page/layout-directives/progress-nav.component.html

JayVivarekar commented 1 year ago

@SubhashThenua Done

HattieTavares commented 1 year ago

@vojtechjelinek @JayVivarekar

oppia/core/templates/components/state-directives/outcome-editor/outcome-editor.component.html

oppia/core/templates/components/state-directives/solution-editor/solution-editor.component.html

oppia/core/templates/components/state-directives/solution-editor/solution-explanation-editor.component.html

Can I be assigned these files?

JayVivarekar commented 1 year ago

@HattieTavares Done

HattieTavares commented 1 year ago

@JayVivarekar @vojtechjelinek I'm sorry I've spent the day trying to set this up locally but I think it's too far past my knowledge, and I sadly don't have anyone to help me to troubleshoot the issues I'm having, so I think I will have to take back my offer to fix them.

vojtechjelinek commented 1 year ago

@HattieTavares Feel free to ask here for help https://github.com/oppia/oppia/discussions, we have a lot of people that should be available for help.

Om-Aditya-Jain commented 1 year ago

@JayVivarekar @vojtechjelinek I am interested in contributing to this issue. Please assign me these files -

JayVivarekar commented 1 year ago

@Om-Aditya-Jain Done

amitpanwar789 commented 1 year ago

I am new to open source and want to work on this issue. please assign me this file. . oppia/core/templates/pages/contributor-dashboard-page/contributions-and-review/contributions-and-review.component.html . oppia/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-editor-modal.component.html . oppia/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-review.component.html and how can I find the occurrence of this material icon in my local oppia server ?

Shivkant-Chauhan commented 1 year ago

Hi @JayVivarekar, can you please unassign me this issue as I will be busy working on a new proposal related to CUJ testing frameworks? Also, this material icon issue would be a good issue for the new contributors!

EshaanAgg commented 1 year ago

@JayVivarekar @vojtechjelinek I would like to work on this issue. Please assign me these files.

vaibhav-1508 commented 1 year ago

@JayVivarekar @vojtechjelinek Hey there, I've selected these three files. Can I work on this issue?

abhishek-sultaniya commented 1 year ago

@JayVivarekar @vojtechjelinek I am interested in contributing to this issue. Please assign me these files -

  1. oppia/core/templates/pages/blog-admin-page/navbar/blog-admin-navbar.component.html

  2. oppia/core/templates/pages/collection-editor-page/editor-tab/collection-node-editor.component.html

  3. oppia/core/templates/pages/collection-editor-page/navbar/collection-editor-navbar.component.html

  4. oppia/core/templates/pages/collection-player-page/collection-local-nav/collection-local-nav.component.html

DecryptAG commented 1 year ago

@JayVivarekar @vojtechjelinek I would like to work on this issue. Please assign me these files.

  1. oppia/core/templates/pages/contributor-dashboard-page/modal-templates/translation-suggestion-review-modal.component.html
  2. oppia/core/templates/pages/contributor-dashboard-page/opportunities-list/opportunities-list.component.html
  3. oppia/core/templates/pages/exploration-editor-page/exploration-editor-page.component.html
JayVivarekar commented 1 year ago

Hi @JayVivarekar, can you please unassign me this issue as I will be busy working on a new proposal related to CUJ testing frameworks? Also, this would be a good issue for the new contributors!

@Shivkant-Chauhan Done

JayVivarekar commented 1 year ago

@amitpanwar789 @EshaanAgg @vaibhav-1508 @abhishek-sultaniya @DecryptAG Done

JayVivarekar commented 1 year ago

I am new to open source and want to work on this issue. please assign me this file. . oppia/core/templates/pages/contributor-dashboard-page/contributions-and-review/contributions-and-review.component.html . oppia/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-editor-modal.component.html . oppia/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-review.component.html and how can I find the occurrence of this material icon in my local oppia server ?

@amitpanwar789 You will have to first navigate to the corresponding page through the frontend. Once there, you could inspect the page source to locate the icon.

amyra98 commented 1 year ago

@JayVivarekar I'm interested to work on this issue. Please assign me these files

oppia/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.html

oppia/core/templates/pages/exploration-editor-page/editor-tab/graph-directives/exploration-graph.component.html

oppia/core/templates/pages/exploration-editor-page/editor-tab/templates/training-data-editor.template.html

Aacashh commented 1 year ago

@vojtechjelinek @JayVivarekar I am interested in working on this issue, kindly assign me these files • oppia/extensions/rich_text_components/Image/directives/image.component.html • oppia/extensions/rich_text_components/Collapsible/directives/collapsible.component.html • oppia/extensions/objects/templates/image-editor.component.html

JayVivarekar commented 1 year ago

@amyra98 @Aacashh Done

Sakshi-75 commented 1 year ago

@JayVivarekar @vojtechjelinek , I am interested on working on this issue. Can you assign the following files to me please?

  1. oppia/core/templates/components/summary-tile/collection-summary-tile.component.html
  2. oppia/core/templates/components/summary-tile/exploration-summary-tile.component.html
  3. oppia/core/templates/components/summary-tile/story-summary-tile.component.html
JayVivarekar commented 1 year ago

@Sakshi-75 Done

AsmaKacem1 commented 1 year ago

@JayVivarekar @vojtechjelinek I would like to work on this issue. Please assign me these files.

  1. oppia/core/templates/pages/exploration-editor-page/improvements-tab/improvements-tab.component.html
  2. oppia/core/templates/pages/exploration-editor-page/improvements-tab/needs-guiding-responses-task.component.html
  3. oppia/core/templates/pages/exploration-editor-page/param-changes-editor/param-changes-editor.component.html
  4. oppia/core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.html
JayVivarekar commented 1 year ago

@AsmaKacem1 Done

akshit5565 commented 1 year ago

@JayVivarekar @vojtechjelinek I want to contribute to this projrct Please assign me:- oppia/core/templates/pages/topic-editor-page/navbar/topic-editor-navbar.component.html oppia/extensions/interactions/ImageClickInput/directives/image-click-input-interaction.component.html oppia/core/templates/pages/s kill-editor-page/editor-tab/skill-prerequisite-skills-editor/skill-prerequisite-skills- editor.component.html

vcvedika commented 1 year ago

@vojtechjelinek @JayVivarekar

I am interested in working on this issue, kindly assign me the following files.

• oppia/core/templates/base-components/no-script.template.html • oppia/core/templates/components/review-material-editor/review-material-editor.component.html • oppia/core/templates/components/state-directives/answer-group-editor/answer-group-editor.component.html

SubinDuresh commented 1 year ago

@vojtechjelinek @JayVivarekar

I am interested in working on this issue. Please assign me the following files.

JayVivarekar commented 1 year ago

@akshit5565 @SubinDuresh

JayVivarekar commented 1 year ago

@vcvedika The files which you have picked are already assigned. Can you choose some which have not been assigned yet?

Valeron-T commented 1 year ago

@vojtechjelinek @JayVivarekar I would like to work on these files. Please assign me the same.

ayushanand16 commented 1 year ago

@vojtechjelinek @JayVivarekar I would like to work on this issue. Please assign the following files to me:

SubhashThenua commented 1 year ago

@vojtechjelinek @JayVivarekar Icon in the below file is already Font-awesome icon . Can you please clarify it? Thanks! oppia/core/templates/pages/library-page/search-bar/search-bar.component.html

rishabhknowss commented 1 year ago

Please assign me the task

JayVivarekar commented 1 year ago

@Valeron-T @ayushanand16 Done