UI: refresh widget-editor toolbar/layout to match the new-menu shell

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html

@@ -15,27 +15,44 @@
     limitations under the License.
 
 -->
+
+<ng-template #widgetTitleTpl>
+  <div class="flex flex-row items-center justify-start gap-2">
+    @if ((breadcrumbs$ | async).length > 1) {
+      <span class='tb-breadcrumb-divider'> > </span>
+    }
+    <mat-form-field class="tb-widget-title tb-appearance-transparent flex-1 gt-xmd:flex-initial">
+      <input [disabled]="isReadOnly" matInput required maxlength="255"
+             [(ngModel)]="widget.widgetName" (ngModelChange)="isDirty = true"
+             placeholder="{{ 'widget.widget-title' | translate }}"/>
+    </mat-form-field>
+    <mat-form-field class="tb-appearance-transparent flex-1 gt-xmd:flex-initial">
+      <mat-select [disabled]="isReadOnly" placeholder="{{ 'widget.type' | translate }}"
+                  [(ngModel)]="widget.type" (ngModelChange)="widgetTypeChanged()">
+        @for (type of allWidgetTypes; track type) {
+          <mat-option [value]="type">
+            {{ widgetTypesDataMap.get(widgetTypes[type]).name | translate }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+</ng-template>
+
 <div class="flex flex-1 flex-col">
   <div class="flex flex-1 flex-col" tb-fullscreen [fullscreen]="fullscreen" [tb-hotkeys]="hotKeys" [cheatSheet]="cheatSheetComponent">
     <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
-    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3 gap-4 lt-xl:gap-2">
-      <mat-form-field class="tb-widget-title tb-appearance-transparent">
-        <input [disabled]="isReadOnly" matInput required maxlength="255"
-               [(ngModel)]="widget.widgetName" (ngModelChange)="isDirty = true"
-               placeholder="{{ 'widget.widget-title' | translate }}"/>
-      </mat-form-field>
-      <mat-form-field class="tb-appearance-transparent">
-        <mat-select [disabled]="isReadOnly" placeholder="{{ 'widget.type' | translate }}"
-                    [(ngModel)]="widget.type" (ngModelChange)="widgetTypeChanged()">
-          @for (type of allWidgetTypes; track type) {
-            <mat-option [value]="type">
-              {{ widgetTypesDataMap.get(widgetTypes[type]).name | translate }}
-            </mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-      <span class="flex-1"></span>
-      <button mat-button class="lt-md:!hidden" [disabled]="!iframeWidgetEditModeInited"
+    <mat-toolbar class="tb-edit-toolbar gap-4 lt-xl:gap-2">
+      <button mat-icon-button
+              [class.!hidden]="fullscreen"
+              class="-ml-2 -mr-2 gt-sm:!hidden" (click)="toggleSidenav()">
+        <mat-icon class="material-icons">menu</mat-icon>
+      </button>
+      <div class="flex flex-1 flex-row items-center overflow-hidden">
+        <tb-breadcrumb class="mat-toolbar-tools" [componentBreadcrumbsTpl]="widgetTitleTpl"></tb-breadcrumb>
+      </div>
+      <tb-github-badge class="lt-lg:!hidden"></tb-github-badge>
+      <button mat-button class="lt-lg:!hidden" [disabled]="!iframeWidgetEditModeInited"
               (click)="applyWidgetScript()"
               matTooltip="{{ 'widget.run' | translate }} (CTRL + Return)"
               matTooltipPosition="below">
@@ -43,7 +60,7 @@
         <span translate>action.run</span>
       </button>
       <button mat-raised-button
-              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || undoDisabled()"
+              class="lt-lg:!hidden" [disabled]="(isLoading$ | async) || undoDisabled()"
               (click)="undoWidget()"
               matTooltip="{{ 'widget.undo' | translate }} (CTRL + Q)"
               matTooltipPosition="below">
@@ -52,7 +69,7 @@
       </button>
       @if (!isReadOnly) {
         <button mat-raised-button
-                class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveDisabled()"
+                class="lt-lg:!hidden" [disabled]="(isLoading$ | async) || saveDisabled()"
                 (click)="saveWidget()"
                 [tb-circular-progress]="saveWidgetPending"
                 matTooltip="{{ 'widget.save' | translate }} (CTRL + S)"
@@ -62,7 +79,7 @@
         </button>
       }
       <button mat-raised-button
-              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveAsDisabled()"
+              class="lt-lg:!hidden" [disabled]="(isLoading$ | async) || saveAsDisabled()"
               (click)="saveWidgetAs()"
               [tb-circular-progress]="saveWidgetAsPending"
               matTooltip="{{ 'widget.saveAs' | translate }} (Shift + CTRL + S)"
@@ -70,24 +87,20 @@
         <mat-icon>save_as</mat-icon>
         <span translate>action.saveAs</span>
       </button>
-      <button mat-button
-              class="lt-lg:!hidden"
-              (click)="fullscreen = !fullscreen"
-              matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
-              matTooltipPosition="below">
-        <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
-        <span translate>widget.toggle-fullscreen</span>
-      </button>
-      <button mat-icon-button class="lt-md:!hidden gt-md:!hidden"
-              (click)="fullscreen = !fullscreen"
-              matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
-              matTooltipPosition="below">
-        <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
-      </button>
       <button mat-icon-button class="gt-md:!hidden"
               [matMenuTriggerFor]="widgetEditMenu">
         <mat-icon>more_vert</mat-icon>
       </button>
+      <div class="flex flex-row items-center">
+        <mat-divider vertical></mat-divider>
+        <button mat-icon-button class="lt-md:!hidden"
+                matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
+                matTooltipPosition="below"
+                (click)="fullscreen = !fullscreen">
+          <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+        </button>
+        <tb-notification-bell></tb-notification-bell>
+      </div>
       <mat-menu #widgetEditMenu="matMenu" xPosition="before">
         <button mat-menu-item
                 [disabled]="!iframeWidgetEditModeInited"
@@ -117,7 +130,12 @@
         </button>
       </mat-menu>
     </mat-toolbar>
-    <div class="flex-1" style="position: relative;">
+    @if ((homeService.hideLoadingBar$ | async) === false && (isLoading$ | async)) {
+      <mat-progress-bar color="warn" style="z-index: 10; margin-bottom: -4px; width: 100%;" mode="indeterminate"
+      >
+      </mat-progress-bar>
+    }
+    <div class="flex-1 mt-2" style="position: relative;">
       <div class="tb-editor tb-absolute-fill">
         <div #topPanel class="tb-split tb-split-vertical">
           <div #topLeftPanel class="tb-split tb-content">

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.scss

@@ -15,8 +15,6 @@
  */
 @import '../../../../../scss/constants';
 
-$edit-toolbar-height: 40px !default;
-
 tb-widget-editor {
   flex: 1;
   display: flex;
@@ -173,8 +171,34 @@ div.tb-editor-area-title-panel {
 
 mat-toolbar.tb-edit-toolbar {
 
-  min-height: $edit-toolbar-height !important;
-  max-height: $edit-toolbar-height !important;
+  height: 56px;
+  min-height: 56px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+  & > div {
+    height: 56px;
+  }
+  .mat-toolbar-tools {
+    padding: 0;
+    height: 56px;
+    width: auto;
+  }
+  .tb-breadcrumb-divider {
+    width: 20px;
+    text-align: center;
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+    overflow: hidden;
+    color: rgba(0, 0, 0, 0.76);
+    @media #{$mat-lt-md} {
+      display: none;
+    }
+  }
+
+  .mat-divider-vertical {
+    height: 100%;
+  }
 
   button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
     font-size: 12px;
@@ -193,19 +217,25 @@ mat-toolbar.tb-edit-toolbar {
   }
 
   .mat-mdc-form-field {
+    --mat-form-field-filled-input-text-color: rgba(0,0,0,0.76);
     input, .mat-mdc-select {
-      font-size: 1.1rem;
+      font-size: 16px;
       font-weight: 400;
       letter-spacing: .005em;
     }
     &.tb-widget-title {
-      min-width: 250px;
+      width: 250px;
+      @media #{$mat-lt-md} {
+        input {
+            font-size: 24px;
+        }
+      }
     }
   }
 
-  @media #{$mat-lt-lg} {
+  @media #{$mat-lt-xmd} {
     .mat-mdc-form-field.tb-widget-title {
-      min-width: 0;
+      width: auto;
     }
   }
 }

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts

@@ -18,7 +18,6 @@ import { PageComponent } from '@shared/components/page.component';
 import {
   Component,
   ElementRef,
-  EventEmitter,
   Inject,
   OnDestroy,
   OnInit,
@@ -74,6 +73,8 @@ import { JsFuncModulesComponent } from '@shared/components/js-func-modules.compo
 import { MatIconButton } from '@angular/material/button';
 import { formPropertyCompletions } from '@shared/models/dynamic-form.models';
 import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
+import { BreadcrumbService } from '@core/services/breadcrumb.service';
+import { HomeService } from '@core/services/home.service';
 import Timeout = NodeJS.Timeout;
 
 // @dynamic
@@ -172,7 +173,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
 
   hotKeys: Hotkey[] = [];
 
-  updateBreadcrumbs = new EventEmitter();
+  breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
 
   private rxSubscriptions = new Array<Subscription>();
 
@@ -188,7 +189,9 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
               private renderer: Renderer2,
               private viewContainerRef: ViewContainerRef,
               private customTranslate: CustomTranslatePipe,
-              private http: HttpClient) {
+              private http: HttpClient,
+              private breadcrumbService: BreadcrumbService,
+              public homeService: HomeService) {
     super(store);
 
     this.authUser = getCurrentAuthUser(store);
@@ -221,6 +224,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
   }
 
   ngOnInit(): void {
+    this.homeService.setHideMainToolbar(true);
     this.initSplitLayout();
     this.initAceEditors();
     this.iframe = $(this.widgetIFrameElmRef.nativeElement);
@@ -239,6 +243,10 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
     this.rxSubscriptions.length = 0;
   }
 
+  toggleSidenav() {
+    this.homeService.toggleSideBar.emit();
+  }
+
   private initHotKeys(): void {
     this.hotKeys.push(
       new Hotkey('ctrl+q', (event: KeyboardEvent) => {
@@ -628,7 +636,6 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
     this.widget.defaultConfig = JSON.stringify(config);
     this.origWidget = deepClone(this.widget);
     this.isDirty = false;
-    this.updateBreadcrumbs.emit();
   }
 
   applyWidgetScript(): void {

ui-ngx/src/app/modules/home/pages/widget/widget-library.module.ts

@@ -30,6 +30,8 @@ import { WidgetsBundleWidgetsComponent } from '@home/pages/widget/widgets-bundle
 import { WidgetTypeAutocompleteComponent } from '@home/pages/widget/widget-type-autocomplete.component';
 import { WidgetsBundleDialogComponent } from '@home/pages/widget/widgets-bundle-dialog.component';
 import { WidgetConfigComponentsModule } from '@home/components/widget/config/widget-config-components.module';
+import { GithubBadgeModule } from '@home/components/github-badge/github-badge.module';
+import { NotificationBellModule } from '@home/components/notification/notification-bell.module';
 
 @NgModule({
   declarations: [
@@ -48,6 +50,8 @@ import { WidgetConfigComponentsModule } from '@home/components/widget/config/wid
     CommonModule,
     SharedModule,
     HomeComponentsModule,
+    GithubBadgeModule,
+    NotificationBellModule,
     WidgetConfigComponentsModule,
     WidgetLibraryRoutingModule
   ]