Fix part of oppia#15968: Replaces Material icons with Font Awesome ic…

…ons in some "skill editor" and "story editor" pages. (oppia#16023) * Replaced Material Icons with Font Awesome icons. * Update core/templates/pages/story-editor-page/navbar/story-editor-navbar.component.html Co-authored-by: Rijuta Singh <[email protected]> * Update core/templates/pages/skill-editor-page/navbar/skill-editor-navbar.directive.html Co-authored-by: Rijuta Singh <[email protected]> Co-authored-by: Rijuta Singh <[email protected]>
heyimShivam · Sep 14, 2022 · 84bba23 · 84bba23
1 parent 69638d7
commit 84bba23
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 24 deletions.
diff --git a/core/templates/pages/skill-editor-page/navbar/skill-editor-navbar.directive.html b/core/templates/pages/skill-editor-page/navbar/skill-editor-navbar.directive.html
@@ -8,9 +8,8 @@
               ng-disabled="!isSkillSaveable()">
         <span ng-if="!isSaveInProgress()">
           <span title="Publish Changes">
-            <i class="material-icons md-18 md-dark oppia-save-publish-button-icon"
+            <i class="fas fa-save md-18 md-dark oppia-save-publish-button-icon"
                alt="Publish Changes">
-              &#xE161;
             </i>
             <span class="oppia-save-publish-button-label float-left">Publish Changes</span>
             <span class="d-none d-md-block float-left oppia-changes-count-text e2e-test-changes-count-text"
@@ -41,18 +40,18 @@
       <div class="skill-nav-dropdown-container">
         <div class="skill-nav-skill-nav-dropdown-options" ng-if="showNavigationOptions">
           <div class="skill-nav-dropdown-option" ng-click="selectMainTab()">
-            <i class="material-icons">&#xE254;</i><span>Editor</span>
+            <i class="fas fa-pen navbar-tab-icon"></i><span>Editor</span>
           </div>
           <div class="skill-nav-dropdown-option" ng-click="selectQuestionsTab()">
-            <i class="material-icons">&#xE254;</i><span>Questions</span>
+            <i class="fas fa-book-open navbar-tab-icon"></i><span>Questions</span>
           </div>
           <div class="skill-nav-dropdown-option" ng-click="selectPreviewTab()">
-            <i class="material-icons">&#xE037;</i><span>Preview</span>
+            <i class="fas fa-play navbar-tab-icon"></i><span>Preview</span>
           </div>
         </div>
         <div class="skill-nav-dropdown-content">
           <div class="skill-nav-dropdown-text" ng-click="toggleWarningText()">
-            <i ng-if="!getTotalWarningsCount()" class="material-icons">&#xE254;</i>
+            <i ng-if="!getTotalWarningsCount()" class="fas fa-pen"></i>
             <span><[activeTab]></span>
           </div>
           <div class="skill-nav-dropdown-icon" ng-click="toggleNavigationOptions()">
@@ -63,7 +62,7 @@
       <div class="skill-nav-dropdown-container save-options-dropdown">
         <div class="skill-nav-skill-nav-dropdown-options" ng-if="showSkillEditOptions">
           <div class="skill-nav-dropdown-option" ng-click="saveChanges()">
-            <i class="material-icons">&#xE254;</i>
+            <i class="fas fa-save navbar-tab-icon"></i>
             <span>Save Changes</span>
           </div>
         </div>
@@ -165,7 +164,9 @@
       flex-wrap: wrap;
       justify-content: space-between;
     }
-
+    .skill-editor-nav-mobile .navbar-tab-icon {
+      padding: 5px;
+    }
      .right-container {
       background-color: #419889;
       color: #fff;

diff --git a/core/templates/pages/story-editor-page/editor-tab/story-node-editor.directive.html b/core/templates/pages/story-editor-page/editor-tab/story-node-editor.directive.html
@@ -117,8 +117,8 @@
           </div>
           <div class="chapter-card-inputs oppia-mobile-collapsible-card-content" ng-if="chapterOutlineIsShown">
             Outline Finalized
-            <i ng-if="!isOutlineFinalized()" ng-click="finalizeOutline()" class="material-icons md-18 e2e-test-finalize-outline" aria-label="Finalize outline">check_box_outline_blank</i>
-            <i ng-if="isOutlineFinalized()" ng-click="unfinalizeOutline()" class="material-icons md-18" aria-label="Unfinalize outline">check_box</i>
+            <i ng-if="!isOutlineFinalized()" ng-click="finalizeOutline()" class="far fa-square md-18 e2e-test-finalize-outline" aria-label="Finalize outline"></i>
+            <i ng-if="isOutlineFinalized()" ng-click="unfinalizeOutline()" class="fas fa-check-square md-18" aria-label="Unfinalize outline"></i>
             <div tabindex="-1" ng-blur="toggleChapterOutlineButtons()" ng-click="toggleChapterOutlineButtons()">
               <schema-based-editor id="storyNodeOutline"
                                    [schema]="OUTLINE_SCHEMA"
@@ -159,7 +159,7 @@
                 <div class="skill-description-card e2e-test-prerequisite-skill-description-card">
                   <a ng-href="<[getSkillEditorUrl(skillId)]>" target="_blank" rel="noopener"><[skillIdToSummaryMap[skillId]]></a>
                   <span class="e2e-test-remove-prerequisite-skill" ng-click="removePrerequisiteSkillId(skillId)" aria-hidden="true">
-                    <i class="material-icons md-18">&#xE14C;</i>
+                    <i class="fas fa-times md-18"></i>
                   </span>
                 </div>
               </div>
@@ -175,7 +175,7 @@
                 <div class="skill-description-card e2e-test-acquired-skill-description-card">
                   <a ng-href="<[getSkillEditorUrl(skillId)]>" target="_blank" rel="noopener"><[skillIdToSummaryMap[skillId]]></a>
                   <span class="e2e-test-remove-acquired-skill" ng-click="removeAcquiredSkillId(skillId)" aria-hidden="true">
-                    <i class="material-icons md-18">&#xE14C;</i>
+                    <i class="fas fa-times md-18"></i>
                   </span>
                 </div>
               </div>
@@ -212,7 +212,7 @@
                   <div class="skill-description-card">
                     <a ng-href="<[getSkillEditorUrl(skillId)]>" target="_blank" rel="noopener"><[skillIdToSummaryMap[skillId]]></a>
                     <span class="e2e-test-remove-prerequisite-skill" ng-click="removePrerequisiteSkillId(skillId)" aria-hidden="true">
-                      <i class="material-icons md-18">&#xE14C;</i>
+                      <i class="fas fa-times md-18"></i>
                     </span>
                   </div>
                 </div>
@@ -248,7 +248,7 @@
                   <div class="skill-description-card">
                     <a ng-href="<[getSkillEditorUrl(skillId)]>" target="_blank" rel="noopener"><[skillIdToSummaryMap[skillId]]></a>
                     <span class="e2e-test-remove-acquired-skill" ng-click="removeAcquiredSkillId(skillId)" aria-hidden="true">
-                      <i class="material-icons md-18">&#xE14C;</i>
+                      <i class="fas fa-times md-18"></i>
                     </span>
                   </div>
                 </div>

diff --git a/core/templates/pages/story-editor-page/navbar/story-editor-navbar.component.html b/core/templates/pages/story-editor-page/navbar/story-editor-navbar.component.html
@@ -51,9 +51,8 @@
             (click)="publishStory()"
             [ngClass]="{'btn-success': !isStorySaveable() && getWarningsCount() === 0 && validationIssues.length === 0 && explorationValidationIssues.length === 0 && prepublishValidationIssues.length === 0}"
             [disabled]="isStorySaveable() || getWarningsCount() > 0 || validationIssues.length > 0 || explorationValidationIssues.length > 0 || prepublishValidationIssues.length > 0">
-      <i class="material-icons md-18 md-dark oppia-save-publish-button-icon"
+      <i class="fas fa-save md-18 md-dark oppia-save-publish-button-icon"
          alt="Publish to Oppia Library">
-        &#xE2C3;
       </i>
       <span class="oppia-save-publish-button-label">
         Publish Story
@@ -75,14 +74,13 @@
            *ngIf="showNavigationOptions">
         <div class="story-nav-dropdown-option"
              (click)="selectMainTab()">
-          <i class="material-icons">
-            &#xE254;
+          <i class="fas fa-pen navbar-tab-icon">
           </i>
           <span>Editor</span>
         </div>
         <div class="story-nav-dropdown-option"
              (click)="selectPreviewTab()">
-          <i class="material-icons">&#xE037;</i>
+          <i class="fas fa-play navbar-tab-icon"></i>
           <span>Preview</span>
         </div>
       </div>
@@ -101,8 +99,7 @@
       </div>
       <div class="story-nav-dropdown-content">
         <div class="story-nav-dropdown-text" (click)="toggleWarningText()">
-          <i *ngIf="!getTotalWarningsCount()" class="material-icons">
-            &#xE254;
+          <i *ngIf="!getTotalWarningsCount()" class="fas fa-pen navbar-tab-icon">
           </i>
           <span>{{ activeTab }}</span>
           <span *ngIf="getTotalWarningsCount()">
@@ -120,20 +117,20 @@
            *ngIf="showStoryEditOptions">
         <div class="story-nav-dropdown-option"
              (click)="discardChanges()">
-          <i class="material-icons">&#xE254;</i>
+          <i class="fas fa-pen navbar-tab-icon"></i>
           <span>Discard Changes</span>
         </div>
         <div class="story-nav-dropdown-option">
           <div *ngIf="!isStoryPublished()"
                (click)="publishStory()"
                [attr.disabled]="isStorySaveable() || getWarningsCount() > 0 || prepublishValidationIssues.length > 0">
-            <i class="material-icons">&#xE254;</i>
+            <i class="fas fa-pen navbar-tab-icon"></i>
             <span>Publish Story</span>
           </div>
           <div (click)="unpublishStory()"
                *ngIf="isStoryPublished()"
                [attr.disabled]="isStorySaveable()">
-            <i class="material-icons">&#xE254;</i>
+            <i class="fas fa-pen navbar-tab-icon"></i>
             <span>Unpublish Story</span>
           </div>
         </div>
@@ -175,6 +172,9 @@
   .story-nav-mobile {
     display: none;
   }
+  .story-nav-mobile .navbar-tab-icon {
+      padding: 5px;
+  }
   .oppia-dropdown-menu-container {
     margin-right: 5px;
     margin-top: 8px;