what's new: notification center icon and menu basic view (#4716)

tensorflow · Mar 4, 2021 · 24719bb · 24719bb
1 parent 3815616
commit 24719bb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/tensorboard/webapp/notification_center/_views/BUILD b/tensorboard/webapp/notification_center/_views/BUILD
@@ -22,6 +22,9 @@ tf_ng_module(
         "notification_center_component.ng.html",
     ],
     deps = [
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_menu",
         "//tensorboard/webapp/notification_center/_redux:types",
         "@npm//@angular/core",
     ],

diff --git a/tensorboard/webapp/notification_center/_views/notification_center_component.ng.html b/tensorboard/webapp/notification_center/_views/notification_center_component.ng.html
@@ -14,3 +14,10 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<button mat-icon-button [matMenuTriggerFor]="menu">
+  <mat-icon svgIcon="notifications_none_24px"></mat-icon>
+</button>
+
+<mat-menu #menu="matMenu">
+  <div mat-menu-item>notification 1</div>
+</mat-menu>
diff --git a/tensorboard/webapp/notification_center/_views/views_module.ts b/tensorboard/webapp/notification_center/_views/views_module.ts
@@ -13,6 +13,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {NgModule} from '@angular/core';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {MatMenuModule} from '@angular/material/menu';
 
 import {NotificationCenterComponent} from './notification_center_component';
 import {NotificationCenterContainer} from './notification_center_container';
@@ -23,5 +26,6 @@ import {NotificationCenterContainer} from './notification_center_container';
 @NgModule({
   declarations: [NotificationCenterContainer, NotificationCenterComponent],
   exports: [NotificationCenterContainer],
+  imports: [MatButtonModule, MatIconModule, MatMenuModule],
 })
 export class NotificationCenterViewModule {}