bootstrap 5 WIP (#7891)

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

tabby-local/src/components/commandLineEditor.component.pug

@@ -1,36 +1,34 @@
 ng-container(*ngIf='!argvMode')
-    .form-group
+    .mb-3
         label(translate) Command line
         .input-group
-            .input-group-prepend
-                a.input-group-text(
-                    (click)='switchToArgv()',
-                    ngbTooltip='Split into unescaped arguments',
-                    href='#'
-                )
-                    i.fas.fa-fw.fa-caret-right
+            a.input-group-text.text-decoration-none(
+                (click)='switchToArgv()',
+                ngbTooltip='Split into unescaped arguments',
+                href='#'
+            )
+                i.fas.fa-fw.fa-caret-right
             input.form-control.text-monospace(
                 [(ngModel)]='command',
                 (ngModelChange)='parseCommand()'
             )
 
 ng-container(*ngIf='argvMode')
-    .form-group
+    .mb-3
         label(translate) Program
         .input-group
-            .input-group-prepend
-                a.input-group-text(
-                    (click)='switchToCommand()',
-                    ngbTooltip='Combine into a single escaped command',
-                    href='#'
-                )
-                    i.fas.fa-fw.fa-caret-down
+            a.input-group-text.text-decoration-none(
+                (click)='switchToCommand()',
+                ngbTooltip='Combine into a single escaped command',
+                href='#'
+            )
+                i.fas.fa-fw.fa-caret-down
             input.form-control.text-monospace(
                 type='text',
                 [(ngModel)]='_model.command',
             )
 
-    .form-group
+    .mb-3
         label(translate) Arguments
         .input-group(
             *ngFor='let arg of _model.args; index as i; trackBy: trackByIndex',
@@ -39,11 +37,10 @@ ng-container(*ngIf='argvMode')
                 type='text',
                 [(ngModel)]='_model.args[i]',
             )
-            .input-group-append
-                button.btn.btn-secondary((click)='_model.args.splice(i, 1)')
-                    i.fas.fa-fw.fa-trash
+            button.btn.btn-secondary((click)='_model.args.splice(i, 1)')
+                i.fas.fa-fw.fa-trash
 
         .mt-2
             button.btn.btn-secondary((click)='_model.args.push("")')
-                i.fas.fa-plus.mr-2
+                i.fas.fa-plus.me-2
                 span(translate) Add

tabby-local/src/components/commandLineEditor.component.ts

@@ -6,7 +6,7 @@ import { SessionOptions } from '../api'
 /** @hidden */
 @Component({
     selector: 'command-line-editor',
-    template: require('./commandLineEditor.component.pug'),
+    templateUrl:'./commandLineEditor.component.pug',
 })
 export class CommandLineEditorComponent {
     @Input() argvMode = false

tabby-local/src/components/environmentEditor.component.pug

@@ -1,20 +1,18 @@
 .mb-2.d-flex.align-items-center(*ngFor='let pair of vars')
     .input-group
         input.form-control.w-25.text-monospace([(ngModel)]='pair.key', (blur)='emitUpdate()', placeholder='Variable name')
-        .input-group-append
-            .input-group-text =
+        .input-group-text =
         input.form-control.w-50.text-monospace([(ngModel)]='pair.value', (blur)='emitUpdate()', placeholder='Value')
-        .input-group-append
-            button.btn.btn-secondary((click)='removeEnvironmentVar(pair.key)')
-                i.fas.fa-fw.fa-trash
+        button.btn.btn-secondary((click)='removeEnvironmentVar(pair.key)')
+            i.fas.fa-fw.fa-trash
 
 .d-flex
     button.btn.btn-secondary((click)='addEnvironmentVar()')
-        i.fas.fa-plus.mr-2
+        i.fas.fa-plus.me-2
         span(translate) Add
 
-    .ml-auto
+    .ms-auto
     .text-muted(translate) Substitutions allowed.
-    .d-flex.ml-1(*ngIf='shouldShowExample()')
+    .d-flex.ms-1(*ngIf='shouldShowExample()')
         .text-muted(translate) Example:
-        a.ml-1((click)='addExample()', href='#') extend PATH
+        a.ms-1((click)='addExample()', href='#') extend PATH

tabby-local/src/components/environmentEditor.component.ts

@@ -5,8 +5,8 @@ import { Subject } from 'rxjs'
 /** @hidden */
 @Component({
     selector: 'environment-editor',
-    template: require('./environmentEditor.component.pug'),
-    styles: [require('./environmentEditor.component.scss')],
+    templateUrl:'./environmentEditor.component.pug',
+    styleUrls: ['./environmentEditor.component.scss'],
 })
 export class EnvironmentEditorComponent {
     @Output() modelChange = new Subject<any>()

tabby-local/src/components/localProfileSettings.component.pug

@@ -7,7 +7,7 @@ command-line-editor([model]='profile.options')
         [(ngModel)]='profile.options.runAsAdministrator',
     )
 
-.form-group
+.mb-3
     label(translate) Working directory
 
     .input-group
@@ -16,11 +16,10 @@ command-line-editor([model]='profile.options')
             placeholder='Home directory',
             [(ngModel)]='profile.options.cwd'
         )
-        .input-group-append
-            button.btn.btn-secondary((click)='pickWorkingDirectory()')
-                i.fas.fa-folder-open
+        button.btn.btn-secondary((click)='pickWorkingDirectory()')
+            i.fas.fa-folder-open
 
-.form-group
+.mb-3
     label(translate) Environment
     environment-editor(
         type='text',

tabby-local/src/components/localProfileSettings.component.ts

@@ -8,7 +8,7 @@ import { ProfileSettingsComponent } from 'tabby-core'
 
 /** @hidden */
 @Component({
-    template: require('./localProfileSettings.component.pug'),
+    templateUrl:'./localProfileSettings.component.pug',
 })
 export class LocalProfileSettingsComponent implements ProfileSettingsComponent<LocalProfile> {
     profile: LocalProfile

tabby-local/src/components/shellSettingsTab.component.pug

@@ -11,7 +11,7 @@ h3.mb-3(translate) Shell
     )
 
 .alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.useConPTY && isConPTYAvailable && !isConPTYStable')
-    .mr-auto(translate) Windows 10 build 18309 or above is recommended for ConPTY
+    .me-auto(translate) Windows 10 build 18309 or above is recommended for ConPTY
 
 .alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.profile.startsWith("WSL") && (!config.store.terminal.useConPTY)')
-    .mr-auto(translate) WSL terminal only supports TrueColor with ConPTY
+    .me-auto(translate) WSL terminal only supports TrueColor with ConPTY

tabby-local/src/components/shellSettingsTab.component.ts

@@ -3,7 +3,7 @@ import { WIN_BUILD_CONPTY_SUPPORTED, WIN_BUILD_CONPTY_STABLE, isWindowsBuild, Co
 
 /** @hidden */
 @Component({
-    template: require('./shellSettingsTab.component.pug'),
+    templateUrl:'./shellSettingsTab.component.pug',
 })
 export class ShellSettingsTabComponent {
     isConPTYAvailable: boolean

tabby-local/src/index.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
+import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { ToastrModule } from 'ngx-toastr'
@@ -46,7 +46,7 @@ import { LocalProfilesService } from './profiles'
 /** @hidden */
 @NgModule({
     imports: [
-        BrowserModule,
+        CommonModule,
         FormsModule,
         NgbModule,
         ToastrModule,
@@ -90,11 +90,6 @@ import { LocalProfilesService } from './profiles'
         WSLShellProvider,
         WindowsStockShellsProvider,
     ],
-    entryComponents: [
-        TerminalTabComponent,
-        ShellSettingsTabComponent,
-        LocalProfileSettingsComponent,
-    ],
     declarations: [
         TerminalTabComponent,
         ShellSettingsTabComponent,