Migrates topic-viewer-navbar-breadcrumb, subtopics-list, topic-viewer-page, practice-tab, topic-viewer-stories-list to angular components and introduces angular2+ material css.

.github/CODEOWNERS

@@ -256,6 +256,7 @@
 
 # Global stylesheet.
 /core/templates/css/oppia.css @ankita240796
+/core/templates/css/oppia-material.css @srijanreddy98 @bansalnitish
 
 
 # Interaction project.
@@ -352,6 +353,7 @@
 
 # Readme
 /core/README.md @ankita240796
+/core/templates/css/README.md @srijanreddy98 @bansalnitish
 /extensions/README.md @ankita240796
 /scripts/README.md @ankita240796
 

core/templates/components/material.module.ts

@@ -20,12 +20,22 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
-  imports: [CommonModule, BrowserAnimationsModule,
-    MatButtonModule, MatCardModule
+  imports: [
+    BrowserAnimationsModule,
+    CommonModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule
   ],
-  exports: [BrowserAnimationsModule, MatButtonModule, MatCardModule]
+  exports: [
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule
+  ]
 })
 export class MaterialModule {}

core/templates/components/shared-component.module.ts

@@ -20,6 +20,7 @@ import 'zone.js';
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 import { BackgroundBannerComponent } from
   './common-layout-directives/common-elements/background-banner.component';
@@ -34,10 +35,14 @@ import { TranslatePipe } from 'filters/translate.pipe';
 import { SafePipe } from 'filters/safe-pipe';
 import { SkillMasteryViewerComponent } from
   './skill-mastery/skill-mastery.component';
-import { SharingLinksComponent } from
-  './common-layout-directives/common-elements/sharing-links.component';
 import { ExplorationEmbedButtonModalComponent } from
   './button-directives/exploration-embed-button-modal.component';
+import { SharingLinksComponent } from
+  './common-layout-directives/common-elements/sharing-links.component';
+import { StorySummaryTileDirective } from
+  './summary-tile/story-summary-tile.directive';
+import { SubtopicSummaryTileDirective } from
+  './summary-tile/subtopic-summary-tile.directive';
 import { SocialButtonsComponent } from
   'components/button-directives/social-buttons.component';
 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
@@ -50,23 +55,50 @@ import { ProfileLinkTextComponent } from
 
 
 @NgModule({
-  imports: [CommonModule, MaterialModule, NgbModalModule],
-  declarations: [BackgroundBannerComponent, TranslatePipe,
-    SafePipe, SharingLinksComponent, ExplorationEmbedButtonModalComponent,
-    SkillMasteryViewerComponent, AttributionGuideComponent,
-    LazyLoadingComponent, LoadingDotsComponent, SocialButtonsComponent,
-    ProfileLinkImageComponent, ProfileLinkTextComponent,
-    ExplorationSummaryTileDirective],
-  entryComponents: [BackgroundBannerComponent, SharingLinksComponent,
+  imports: [CommonModule, MaterialModule, NgbModalModule, FormsModule],
+
+  declarations: [
+    AttributionGuideComponent,
+    BackgroundBannerComponent,
+    ExplorationEmbedButtonModalComponent,
+    ExplorationSummaryTileDirective,
+    LazyLoadingComponent,
+    LoadingDotsComponent,
+    ProfileLinkImageComponent,
+    ProfileLinkTextComponent,
+    SafePipe,
+    SharingLinksComponent,
+    SkillMasteryViewerComponent,
+    StorySummaryTileDirective,
+    SocialButtonsComponent,
+    SubtopicSummaryTileDirective,
+    TranslatePipe
+  ],
+
+  entryComponents: [
+    BackgroundBannerComponent,
+    SharingLinksComponent,
     SkillMasteryViewerComponent, AttributionGuideComponent,
     LazyLoadingComponent, LoadingDotsComponent, SocialButtonsComponent,
     ProfileLinkImageComponent, ProfileLinkTextComponent,
     // These elements will remain here even after migration.
     ExplorationEmbedButtonModalComponent,
+    SkillMasteryViewerComponent,
+    SocialButtonsComponent
   ],
+
   exports: [
-    BackgroundBannerComponent, TranslatePipe, SafePipe,
-    SharingLinksComponent, MaterialModule, ExplorationSummaryTileDirective
+    // Modules.
+    FormsModule,
+    MaterialModule,
+    // Components, directives, and pipes.
+    BackgroundBannerComponent,
+    ExplorationSummaryTileDirective,
+    SafePipe,
+    SharingLinksComponent,
+    StorySummaryTileDirective,
+    SubtopicSummaryTileDirective,
+    TranslatePipe
   ],
 })
 

core/templates/components/summary-tile/story-summary-tile.directive.html

@@ -1,24 +1,24 @@
 <div class="story-summary-tile">
   <div class="oppia-story-title">
     <strong class="title-text">
-      <a ng-href="<[$ctrl.getStoryLink()]>"><[$ctrl.getStorySummary().getTitle()]> </a>
+      <a ng-href="<[$ctrl.getStoryLink()]>"><[$ctrl.storySummary.getTitle()]> </a>
     </strong>
     <span style="padding-left: 10px; font-size: 0.75em; color: #404040;">
        <[$ctrl.nodeCount]> <span translate="I18N_TOPIC_VIEWER_CHAPTER"></span><[($ctrl.nodeCount > 1) ? 's' : '']>
     </span>
   </div>
   <div class="story-details">
     <div class="story-thumbnail"
-         ng-style="{background: $ctrl.getStorySummary().getThumbnailBgColor()}">
+         ng-style="{background: $ctrl.storySummary.getThumbnailBgColor()}">
       <img ng-src="<[$ctrl.thumbnailUrl]>"
            alt=""
            class="img-thumbnail"
-           ng-style="{background: $ctrl.getStorySummary().getThumbnailBgColor()}">
+           ng-style="{background: $ctrl.storySummary.getThumbnailBgColor()}">
     </div>
     <div class="chapter-details">
-      <div ng-class="{'border-bottom': $index < $ctrl.chaptersDisplayed, 'unavailable-chapter': !$ctrl.isPreviousChapterCompleted($index)}" class="chapter-title" ng-repeat="title in $ctrl.getStorySummary().getNodeTitles()">
+      <div ng-class="{'border-bottom': $index < $ctrl.chaptersDisplayed, 'unavailable-chapter': !$ctrl.isPreviousChapterCompleted($index)}" class="chapter-title" ng-repeat="title in $ctrl.storySummary.getNodeTitles()">
         <span ng-if="$index < $ctrl.chaptersDisplayed">
-          <span ng-if="$ctrl.getStorySummary().isNodeCompleted(title)" class="material-icons completed-icon">
+          <span ng-if="$ctrl.storySummary.isNodeCompleted(title)" class="material-icons completed-icon">
             done
           </span>
           <span ng-class="{'incomplete-chapter': !$ctrl.isChapterCompleted(title)}"

core/templates/components/summary-tile/story-summary-tile.directive.ts

@@ -27,10 +27,9 @@ angular.module('oppia').directive('storySummaryTile', [
       restrict: 'E',
       scope: {},
       bindToController: {
-        getStorySummary: '&storySummary'
+        storySummary: '<'
       },
-      templateUrl: UrlInterpolationService.getDirectiveTemplateUrl(
-        '/components/summary-tile/story-summary-tile.directive.html'),
+      template: require('./story-summary-tile.directive.html'),
       controllerAs: '$ctrl',
       controller: [
         'AssetsBackendApiService', 'WindowDimensionsService',
@@ -42,21 +41,21 @@ angular.module('oppia').directive('storySummaryTile', [
           ctrl.getStoryLink = function() {
             return UrlInterpolationService.interpolateUrl(
               STORY_VIEWER_URL_TEMPLATE, {
-                story_id: ctrl.getStorySummary().getId()
+                story_id: ctrl.storySummary.getId()
               });
           };
 
           ctrl.isChapterCompleted = function(title) {
-            return ctrl.getStorySummary().isNodeCompleted(title);
+            return ctrl.storySummary.isNodeCompleted(title);
           };
 
           ctrl.isPreviousChapterCompleted = function(index) {
             if (index === 0) {
               return true;
             }
             var previousNodeTitle = (
-              ctrl.getStorySummary().getNodeTitles()[index - 1]);
-            return ctrl.getStorySummary().isNodeCompleted(previousNodeTitle);
+              ctrl.storySummary.getNodeTitles()[index - 1]);
+            return ctrl.storySummary.isNodeCompleted(previousNodeTitle);
           };
 
           ctrl.showAllChapters = function() {
@@ -69,7 +68,7 @@ angular.module('oppia').directive('storySummaryTile', [
           };
 
           ctrl.$onInit = function() {
-            ctrl.nodeCount = ctrl.getStorySummary().getNodeTitles().length;
+            ctrl.nodeCount = ctrl.storySummary.getNodeTitles().length;
             ctrl.chaptersDisplayed = 3;
             if (WindowDimensionsService.getWidth() <= 800) {
               ctrl.chaptersDisplayed = 2;
@@ -79,11 +78,11 @@ angular.module('oppia').directive('storySummaryTile', [
               ctrl.showButton = true;
             }
 
-            if (ctrl.getStorySummary().getThumbnailFilename()) {
+            if (ctrl.storySummary.getThumbnailFilename()) {
               ctrl.thumbnailUrl = (
                 AssetsBackendApiService.getThumbnailUrlForPreview(
-                  ENTITY_TYPE.STORY, ctrl.getStorySummary().getId(),
-                  ctrl.getStorySummary().getThumbnailFilename()));
+                  ENTITY_TYPE.STORY, ctrl.storySummary.getId(),
+                  ctrl.storySummary.getThumbnailFilename()));
             } else {
               ctrl.thumbnailUrl = null;
             }
@@ -92,3 +91,16 @@ angular.module('oppia').directive('storySummaryTile', [
       ]
     };
   }]);
+
+import { Directive, ElementRef, Injector, Input } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+
+@Directive({
+  selector: 'story-summary-tile'
+})
+export class StorySummaryTileDirective extends UpgradeComponent {
+  @Input() storySummary;
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('storySummaryTile', elementRef, injector);
+  }
+}

core/templates/components/summary-tile/subtopic-summary-tile.directive.html

@@ -1,13 +1,13 @@
 <div class="subtopic-card" ng-click="$ctrl.openSubtopicPage()">
   <div class="subtopic-thumbnail"
-       ng-style="{background: $ctrl.getSubtopic().getThumbnailBgColor()}">
+       ng-style="{background: $ctrl.subtopic.getThumbnailBgColor()}">
     <img ng-src="<[$ctrl.thumbnailUrl]>"
          class="img-thumbnail"
          alt=""
-         ng-style="{background: $ctrl.getSubtopic().getThumbnailBgColor()}">
+         ng-style="{background: $ctrl.subtopic.getThumbnailBgColor()}">
   </div>
   <div class="subtopic-title">
-    <[$ctrl.getSubtopic().getTitle()]>
+    <[$ctrl.subtopic.getTitle()]>
   </div>
 </div>
 <style>

core/templates/components/summary-tile/subtopic-summary-tile.directive.ts

@@ -26,12 +26,11 @@ angular.module('oppia').directive('subtopicSummaryTile', [
       restrict: 'E',
       scope: {},
       bindToController: {
-        getSubtopic: '&subtopic',
-        getTopicId: '&topicId',
-        getTopicName: '&topicName'
+        subtopic: '<',
+        topicId: '<',
+        topicName: '<'
       },
-      templateUrl: UrlInterpolationService.getDirectiveTemplateUrl(
-        '/components/summary-tile/subtopic-summary-tile.directive.html'),
+      template: require('./subtopic-summary-tile.directive.html'),
       controllerAs: '$ctrl',
       controller: [
         '$window', 'AssetsBackendApiService', 'ENTITY_TYPE',
@@ -44,19 +43,19 @@ angular.module('oppia').directive('subtopicSummaryTile', [
             $window.open(
               UrlInterpolationService.interpolateUrl(
                 SUBTOPIC_VIEWER_URL_TEMPLATE, {
-                  topic_name: ctrl.getTopicName(),
-                  subtopic_id: ctrl.getSubtopic().getId().toString()
+                  topic_name: ctrl.topicName,
+                  subtopic_id: ctrl.subtopic.getId().toString()
                 }
               ), '_self'
             );
           };
 
           ctrl.$onInit = function() {
-            if (ctrl.getSubtopic().getThumbnailFilename()) {
+            if (ctrl.subtopic.getThumbnailFilename()) {
               ctrl.thumbnailUrl = (
                 AssetsBackendApiService.getThumbnailUrlForPreview(
                   ENTITY_TYPE.TOPIC, ctrl.getTopicId(),
-                  ctrl.getSubtopic().getThumbnailFilename()));
+                  ctrl.subtopic.getThumbnailFilename()));
             } else {
               ctrl.thumbnailUrl = null;
             }
@@ -65,3 +64,18 @@ angular.module('oppia').directive('subtopicSummaryTile', [
       ]
     };
   }]);
+
+import { Directive, ElementRef, Injector, Input } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+
+@Directive({
+  selector: 'subtopic-summary-tile'
+})
+export class SubtopicSummaryTileDirective extends UpgradeComponent {
+  @Input() subtopic;
+  @Input() topicId;
+  @Input() topicName;
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('subtopicSummaryTile', elementRef, injector);
+  }
+}

core/templates/css/README.md

@@ -0,0 +1,37 @@
+# CSS
+## Overview
+This folder contains all the global style sheets for the oppia frontend.
+
+## Files:
+1. oppia.css — Custom css styles written by the oppia-devs for the frontend.
+2. oppia-material.css — Material CSS for the oppia-codebase. This css file is generated and shouldn't be modified at all.
+
+## Modification procedure:
+1. oppia.css can be modified with proper reasoning in the pr that modifies the file.
+2. oppia-material.css shouldn't be changed at any cost. No changes are accepted in this file.
+   If, at any time, the oppia-material.css is overriding the styles in oppia.css, create a style tag in the directive and make the selectors more specific.
+
+## Oppia Material
+**If at any time the css file is regenerated please update the pr number here**
+
+- Introduced in: #9577
+- Updated in: N/A (Comma seperated pr numbers).
+
+### Info
+More info regarding the oppia-material.css can be found in this doc:
+Material CSS doc: https://docs.google.com/document/d/1UoCOC7XNhCZrWIMPAoR5Xex28OYWzteqXrqCU9gRUHQ/edit?usp=sharing
+
+### Steps to generate oppia-material.css file:
+
+Video: https://drive.google.com/file/d/1bRA0824CV6cDNYANcX2KT4skNilKdynh/view?usp=sharing
+
+1. Clone angular components: `git clone https://github.com/angular/components.git`
+2. `cd components`
+3. `cd src/material/core/theming/prebuilt/`
+4. `code .` (if you use vscode or open this folder in the code editor of your choice).
+5. open any of the four files present in the folder.
+6. Generate and copy a palette from http://mcg.mbitson.com/#!?oppia=%23009688 and paste it in the scss file.
+7. Change `md` - `mat` and change $primary varibale value to be mat-palette($mat-oppia) in scss file.
+8. Change $accent varibale value to be mat-pallete($mat-blue)
+9. Install node-sass (`npm i -g node-sass`)
+10. Run `node-sass ./deeppurple-amber.scss oppia-material.css`