feat(NodeIcon): Add edit badge to choose icon button #1369

WISE-Community · Jul 31, 2023 · 8cf4aaf · 8cf4aaf
1 parent 215ea58
commit 8cf4aaf
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 18 deletions.
diff --git a/src/app/teacher/authoring-tool.module.ts b/src/app/teacher/authoring-tool.module.ts
@@ -37,6 +37,7 @@ import { ChooseAutomatedAssessmentComponent } from '../../assets/wise5/authoring
 import { ConfigureAutomatedAssessmentComponent } from '../../assets/wise5/authoringTool/addNode/configure-automated-assessment/configure-automated-assessment.component';
 import { ProjectListComponent } from '../../assets/wise5/authoringTool/project-list/project-list.component';
 import { AddProjectComponent } from '../../assets/wise5/authoringTool/add-project/add-project.component';
+import { MatBadgeModule } from '@angular/material/badge';
 
 @NgModule({
   declarations: [
@@ -72,6 +73,7 @@ import { AddProjectComponent } from '../../assets/wise5/authoringTool/add-projec
     StudentTeacherCommonModule,
     ComponentAuthoringModule,
     ComponentStudentModule,
+    MatBadgeModule,
     MatChipsModule,
     ImportComponentModule,
     NodeAdvancedAuthoringModule,

diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.scss b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.scss
@@ -3,7 +3,7 @@
   'style/abstracts/functions';
 
 .top-button-bar {
-  padding: 8px 8px 4px;
+  padding: 16px 8px 4px;
   background-color: white;
   position: sticky;
   top: 26px;

diff --git a/src/assets/wise5/vle/node-icon/node-icon.component.html b/src/assets/wise5/vle/node-icon/node-icon.component.html
@@ -1,14 +1,14 @@
 <ng-template #iconContent>
   <img
     *ngIf="isImage()"
-    class="{{ isGroup ? 'avatar--square ' : '' }}{{ customClass }} {{ sizeClass }} avatar"
+    class="{{ isGroup ? 'avatar--square ' : '' }}{{ customClass }} {{ sizeClass }} avatar node-icon"
     [src]="icon.imgSrc"
     [alt]="icon.imgAlt"
   />
   <div
     *ngIf="isFont()"
     style="background-color: {{ icon.color }}"
-    class="{{ isGroup ? 'avatar--square ' : '' }}{{ customClass }} avatar"
+    class="{{ isGroup ? 'avatar--square ' : '' }}{{ customClass }} avatar node-icon"
   >
     <mat-icon class="{{ sizeClass }} {{ icon.fontSet }}">{{ icon.fontName }}</mat-icon>
   </div>
@@ -19,7 +19,8 @@
   mat-button
   matTooltip="Choose an Icon"
   matTooltipPosition="above"
-  class="mdc-text-field--filled"
+  matBadge="edit"
+  class="node-icon mdc-text-field--filled"
   (click)="openNodeIconChooserDialog()"
 >
   <div class="mat-form-field-flex" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="4px">

diff --git a/src/assets/wise5/vle/node-icon/node-icon.component.scss b/src/assets/wise5/vle/node-icon/node-icon.component.scss
@@ -1,15 +1,16 @@
-.mat-icon {
-  color: #ffffff;
-  margin: 8px !important;
-}
+.node-icon {
+  .mat-icon {
+    color: #ffffff;
+    margin: 8px !important;
+  }
 
-.mat-mdc-button {
-  text-transform: none;
-  padding: 8px;
-  height: 100%;
-}
+  &.mat-mdc-button {
+    text-transform: none;
+    padding: 8px;
+    height: 100%;
+  }
 
-/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-.mat-form-field-appearance-fill .mat-form-field-flex {
-  padding: .6em
+  .mat-badge-content {
+    font-family: 'Material Icons';
+  }
 }
diff --git a/src/assets/wise5/vle/node-icon/node-icon.component.ts b/src/assets/wise5/vle/node-icon/node-icon.component.ts
@@ -1,14 +1,15 @@
 'use strict';
 
 import { ProjectService } from '../../services/projectService';
-import { Component, Input, SimpleChanges } from '@angular/core';
+import { Component, Input, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Node } from '../../common/Node';
 
 @Component({
   selector: 'node-icon',
   templateUrl: 'node-icon.component.html',
-  styleUrls: ['node-icon.component.scss']
+  styleUrls: ['node-icon.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class NodeIconComponent {
   @Input()