feat: card to popover

Postcatlab · Jul 13, 2022 · 77d9087 · 77d9087
1 parent 99850ea
commit 77d9087
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/src/workbench/browser/src/app/pages/api/api.component.html b/src/workbench/browser/src/app/pages/api/api.component.html
@@ -60,13 +60,14 @@
               class="flex items-center justify-center mx-1 icon"
               i18n-title
               title="Quick look"
-              nz-dropdown
-              nzTrigger="click"
-              [nzDropdownMenu]="envParams"
+              nz-popover
+              [nzPopoverContent]="envParams"
+              nzPopoverPlacement="bottomRight"
+              nzPopoverTrigger="click"
             >
               <eo-iconpark-icon name="eyes"></eo-iconpark-icon>
             </span>
-            <nz-dropdown-menu #envParams="nzDropdownMenu"> <env-list></env-list> </nz-dropdown-menu>
+            <ng-template #envParams> <env-list></env-list> </ng-template>
           </div>
         </div>
         <div class="content_container {{ this.id ? 'has_tab_page' : '' }}">

diff --git a/src/workbench/browser/src/app/shared/components/env-list/env-list.component.ts b/src/workbench/browser/src/app/shared/components/env-list/env-list.component.ts
@@ -5,14 +5,14 @@ import { StorageService } from '../../services/storage';
 
 @Component({
   selector: 'env-list',
-  template: ` <nz-card style="width:300px">
+  template: ` <div style="width:300px">
     <span class="text-gray-400">Environment variable</span>
     <!-- <span class="my-2">{{ item.name }}</span> -->
     <div *ngFor="let it of envParams" class="flex items-center justify-between h-8">
       <span class="w-1/3 text-gray-500">{{ it.name }}</span>
       <span class="w-2/3 text-gray-500">{{ it.description }}</span>
     </div>
-  </nz-card>`,
+  </div>`,
   styleUrls: [],
 })
 export class EnvListComponent implements OnInit {

diff --git a/src/workbench/browser/src/app/shared/shared.module.ts b/src/workbench/browser/src/app/shared/shared.module.ts
@@ -14,6 +14,7 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzPopoverModule } from 'ng-zorro-antd/popover';
 
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
 import { NzMessageModule } from 'ng-zorro-antd/message';
@@ -56,9 +57,10 @@ const COMPONENTS = [
     EoIconparkIconModule,
     EouiModule,
     NzTreeViewModule,
+    NzPopoverModule,
   ],
   declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent, EnvListComponent],
   providers: [ModalService],
-  exports: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, EoIconparkIconModule, EnvListComponent],
+  exports: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, NzPopoverModule, EoIconparkIconModule, EnvListComponent],
 })
 export class SharedModule {}