use the new selector for profiles

terminus-core/src/components/selectorModal.component.pug

@@ -14,6 +14,13 @@
             [class.active]='selectedIndex == i',
             *ngFor='let option of filteredOptions; let i = index'
         )
-            i(class='fa-fw fas mr-1 fa-{{option.icon}}')
+            i.icon(
-            .mr-2 {{getOptionText(option)}}
+                class='fa-fw fas fa-{{option.icon}}',
+                *ngIf='!iconIsSVG(option.icon)'
+            )
+            .icon(
+                [fastHtmlBind]='option.icon',
+                *ngIf='iconIsSVG(option.icon)'
+            )
+            .mr-2.title {{getOptionText(option)}}
             .text-muted {{option.description}}

terminus-core/src/components/selectorModal.component.scss

@@ -2,3 +2,12 @@
     max-height: 70vh;
     overflow: auto;
 }
+
+.icon {
+    width: 1.25rem;
+    margin-right: 0.25rem;
+}
+
+.title {
+    margin-left: 10px;
+}

terminus-core/src/components/selectorModal.component.ts

@@ -71,4 +71,8 @@ export class SelectorModalComponent<T> {
     close (): void {
         this.modalInstance.dismiss()
     }
+
+    iconIsSVG (icon: string): boolean {
+        return icon?.startsWith('<')
+    }
 }

terminus-terminal/src/buttonProvider.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import * as fs from 'mz/fs'
 import { Injectable } from '@angular/core'
-import { ToolbarButtonProvider, ToolbarButton, ElectronService, ConfigService } from 'terminus-core'
+import { ToolbarButtonProvider, ToolbarButton, ElectronService, ConfigService, SelectorOption, AppService } from 'terminus-core'
 
 import { TerminalService } from './services/terminal.service'
 
@@ -10,6 +10,7 @@ import { TerminalService } from './services/terminal.service'
 export class ButtonProvider extends ToolbarButtonProvider {
     constructor (
         electron: ElectronService,
+        private app: AppService,
         private config: ConfigService,
         private terminal: TerminalService,
     ) {
@@ -28,27 +29,36 @@ export class ButtonProvider extends ToolbarButtonProvider {
         }
     }
 
+    async activate () {
+        const options: SelectorOption<void>[] = []
+        const profiles = await this.terminal.getProfiles({ skipDefault: !this.config.store.terminal.showDefaultProfiles })
+
+        for (const profile of profiles) {
+            options.push({
+                icon: profile.icon,
+                name: profile.name,
+                description: '',//TODO
+                callback: () => this.terminal.openTab(profile),
+            })
+        }
+
+        await this.app.showSelector('Select profile', options)
+    }
+
     provide (): ToolbarButton[] {
         return [
             {
                 icon: require('./icons/plus.svg'),
                 title: 'New terminal',
                 touchBarNSImage: 'NSTouchBarAddDetailTemplate',
-                click: async () => {
+                click: () => {
                     this.terminal.openTab()
                 },
             },
             {
                 icon: require('./icons/profiles.svg'),
                 title: 'New terminal with profile',
-                submenu: async () => {
+                click: () => this.activate(),
-                    const profiles = await this.terminal.getProfiles({ skipDefault: !this.config.store.terminal.showDefaultProfiles })
-                    return profiles.map(profile => ({
-                        icon: profile.icon,
-                        title: profile.name,
-                        click: () => this.terminal.openTab(profile),
-                    }))
-                },
             },
         ]
     }