bootstrap 5 WIP (#7891)

New standard theme that follows your chosen terminal colors, Bootstrap 5 & Angular 15 upgrade

tabby-plugin-manager/src/components/pluginsSettingsTab.component.pug

@@ -1,6 +1,6 @@
 .d-flex.mb-3
     h3(translate) Plugins
-    button.btn.btn-secondary.btn-sm.ml-auto((click)='openPluginsFolder()')
+    button.btn.btn-secondary.btn-sm.ms-auto((click)='openPluginsFolder()')
         i.fas.fa-folder
         span(translate) Plugins folder
 
@@ -16,10 +16,9 @@ ul.nav-tabs.mb-2(ngbNav, #nav='ngbNav')
         a(ngbNavLink, translate) Available
         ng-template(ngbNavContent)
             .input-group.mb-3.mt-3
-                .input-group-prepend
-                    .input-group-text
-                        i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='!availablePluginsReady')
-                        i.fas.fa-fw.fa-search(*ngIf='availablePluginsReady')
+                .input-group-text
+                    i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='!availablePluginsReady')
+                    i.fas.fa-fw.fa-search(*ngIf='availablePluginsReady')
                 input.form-control(
                     type='text',
                     [(ngModel)]='_1',
@@ -43,14 +42,14 @@ ul.nav-tabs.mb-2(ngbNav, #nav='ngbNav')
                                     )
                                         i.fas.fa-fw.fa-cloud-download(*ngIf='busy.get(plugin.name) != BusyState.Installing')
                                         i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy.get(plugin.name) == BusyState.Installing')
-                                        span.ml-2(translate) Get
+                                        span.ms-2(translate) Get
 
                                     button.btn.btn-secondary.btn-block.justify-content-center(
                                         *ngIf='plugin.homepage',
                                         (click)='showPluginHomepage(plugin)'
                                     )
                                         i.fas.fa-fw.fa-external-link-alt
-                                        span.ml-2(translate) Homepage
+                                        span.ms-2(translate) Homepage
 
                                 .col-8
                                     ng-container(*ngTemplateOutlet='pluginInfo; context: { plugin }')
@@ -61,9 +60,8 @@ ul.nav-tabs.mb-2(ngbNav, #nav='ngbNav')
         a(ngbNavLink, translate) Installed
         ng-template(ngbNavContent)
             .input-group.mb-3.mt-3
-                .input-group-prepend
-                    .input-group-text
-                        i.fas.fa-fw.fa-search
+                .input-group-text
+                    i.fas.fa-fw.fa-search
                 input.form-control(
                     type='text',
                     [(ngModel)]='_2',
@@ -75,14 +73,14 @@ ul.nav-tabs.mb-2(ngbNav, #nav='ngbNav')
                 ng-container(*ngFor='let plugin of installedPlugins$')
                     ngb-panel
                         ng-template(ngbPanelTitle)
-                            .text-left.mr-auto
+                            .text-left.me-auto
                                 div
                                     strong {{plugin.name}}
-                                    small.text-muted.ml-2(*ngIf='plugin.isBuiltin', translate) Built-in
-                                    small.text-warning.ml-2(*ngIf='!isPluginEnabled(plugin)', translate) Disabled
+                                    small.text-muted.ms-2(*ngIf='plugin.isBuiltin', translate) Built-in
+                                    small.text-warning.ms-2(*ngIf='!isPluginEnabled(plugin)', translate) Disabled
                                 small.d-block.text-muted {{plugin.description}}
 
-                            button.btn.btn-primary.ml-2(
+                            button.btn.btn-primary.ms-2(
                                 *ngIf='knownUpgrades[plugin.name]',
                                 (click)='upgradePlugin(plugin)',
                                 [disabled]='busy.has(plugin.name)'
@@ -133,11 +131,11 @@ ng-template(#pluginInfo, let-plugin='plugin')
         .col-4
             strong(translate) Author
         .col-8
-            .badge.badge-success(*ngIf='plugin.isOfficial')
+            .badge.text-bg-success(*ngIf='plugin.isOfficial')
                 i.fas.fa-check
-                span.ml-1(translate) Official
+                span.ms-1(translate) Official
             a.btn.btn-link.px-0.w-auto((click)='showPluginInfo(plugin)', *ngIf='!plugin.isOfficial')
                 span {{plugin.author}}
-                i.fas.fa-fw.fa-external-link-alt.ml-2
+                i.fas.fa-fw.fa-external-link-alt.ms-2
 
 .mb-4([ngbNavOutlet]='nav')

tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts

@@ -15,8 +15,8 @@ _('Search plugins')
 
 /** @hidden */
 @Component({
-    template: require('./pluginsSettingsTab.component.pug'),
-    styles: [require('./pluginsSettingsTab.component.scss')],
+    templateUrl:'./pluginsSettingsTab.component.pug',
+    styleUrls: ['./pluginsSettingsTab.component.scss'],
 })
 export class PluginsSettingsTabComponent {
     BusyState = BusyState

tabby-plugin-manager/src/index.ts

@@ -1,5 +1,5 @@
+import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 
@@ -12,7 +12,7 @@ import { PluginsSettingsTabProvider } from './settings'
 
 @NgModule({
     imports: [
-        BrowserModule,
+        CommonModule,
         FormsModule,
         NgbModule,
         TabbyCorePlugin,
@@ -20,9 +20,6 @@ import { PluginsSettingsTabProvider } from './settings'
     providers: [
         { provide: SettingsTabProvider, useClass: PluginsSettingsTabProvider, multi: true },
     ],
-    entryComponents: [
-        PluginsSettingsTabComponent,
-    ],
     declarations: [
         PluginsSettingsTabComponent,
     ],

tabby-plugin-manager/webpack.config.js

@@ -1,5 +0,0 @@
-const config = require('../webpack.plugin.config')
-module.exports = config({
-    name: 'plugin-manager',
-    dirname: __dirname,
-})

tabby-plugin-manager/webpack.config.mjs

@@ -0,0 +1,10 @@
+import * as path from 'path'
+import * as url from 'url'
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
+
+import config from '../webpack.plugin.config.mjs'
+
+export default () => config({
+    name: 'plugin-manager',
+    dirname: __dirname,
+})