diff --git a/app/src/global.scss b/app/src/global.scss index 00339b81..bb0fbd97 100644 --- a/app/src/global.scss +++ b/app/src/global.scss @@ -13,10 +13,6 @@ body { user-select: text; } -[ngbradiogroup] input[type="radio"] { - display: none; -} - a, button { &.btn { display: inline-flex; diff --git a/tabby-core/src/components/base.component.ts b/tabby-core/src/components/base.component.ts index 55e9f3c2..5c65bad3 100644 --- a/tabby-core/src/components/base.component.ts +++ b/tabby-core/src/components/base.component.ts @@ -1,4 +1,3 @@ -import { Component } from '@angular/core' import { Observable, Subscription, Subject } from 'rxjs' interface CancellableEvent { @@ -42,7 +41,6 @@ export class SubscriptionContainer { } } -@Component({ template: '' }) export class BaseComponent { protected get destroyed$ (): Observable { return this._destroyed } private _destroyed = new Subject() diff --git a/tabby-core/src/components/selfPositioning.component.ts b/tabby-core/src/components/selfPositioning.component.ts index 2a747519..f2d36d26 100644 --- a/tabby-core/src/components/selfPositioning.component.ts +++ b/tabby-core/src/components/selfPositioning.component.ts @@ -1,7 +1,6 @@ -import { HostBinding, ElementRef, Component } from '@angular/core' +import { HostBinding, ElementRef } from '@angular/core' import { BaseComponent } from './base.component' -@Component({ template: '' }) export abstract class SelfPositioningComponent extends BaseComponent { @HostBinding('style.left') cssLeft: string @HostBinding('style.top') cssTop: string diff --git a/tabby-core/src/theme.paper.scss b/tabby-core/src/theme.paper.scss index 12380266..1c478c3c 100644 --- a/tabby-core/src/theme.paper.scss +++ b/tabby-core/src/theme.paper.scss @@ -313,7 +313,7 @@ hotkey-input-modal { } } -[ngbradiogroup] > label.active { +.btn-check:checked + label { background: $blue; } diff --git a/tabby-core/src/theme.scss b/tabby-core/src/theme.scss index a18e2afc..be0e172c 100644 --- a/tabby-core/src/theme.scss +++ b/tabby-core/src/theme.scss @@ -213,7 +213,7 @@ hotkey-input-modal { margin-bottom: 2px; } -[ngbradiogroup] > label.active { +.btn-check:checked + label { background: $blue; } diff --git a/tabby-local/src/index.ts b/tabby-local/src/index.ts index c43f743a..02eb807f 100644 --- a/tabby-local/src/index.ts +++ b/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, diff --git a/tabby-settings/src/components/settingsTab.component.ts b/tabby-settings/src/components/settingsTab.component.ts index 0899bdbf..3d8e498b 100644 --- a/tabby-settings/src/components/settingsTab.component.ts +++ b/tabby-settings/src/components/settingsTab.component.ts @@ -2,7 +2,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker' import * as yaml from 'js-yaml' import { debounce } from 'utils-decorators/dist/esm/debounce/debounce' -import { Component, Inject, Input, HostBinding, NgZone, Injector } from '@angular/core' +import { Component, Inject, Input, HostBinding, Injector } from '@angular/core' import { ConfigService, BaseTabComponent, @@ -46,7 +46,6 @@ export class SettingsTabComponent extends BaseTabComponent { public hostWindow: HostWindowService, public homeBase: HomeBaseService, public platform: PlatformService, - public zone: NgZone, public locale: LocaleService, public updater: UpdaterService, private app: AppService, diff --git a/tabby-settings/src/components/windowSettingsTab.component.pug b/tabby-settings/src/components/windowSettingsTab.component.pug index 81c391bc..225fed4b 100644 --- a/tabby-settings/src/components/windowSettingsTab.component.pug +++ b/tabby-settings/src/components/windowSettingsTab.component.pug @@ -34,24 +34,30 @@ h3.mb-3(translate) Window .form-line(*ngIf='config.store.appearance.vibrancy && isFluentVibrancySupported && config.store.hacks.enableFluentBackground') .header .title(translate) Background type - .btn-group( - [(ngModel)]='config.store.appearance.vibrancyType', - (ngModelChange)='saveConfiguration()', - ngbRadioGroup - ) - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"blur"' - ) + .btn-group + input.btn-check( + type='radio', + name='vibracy', + [(ngModel)]='config.store.appearance.vibrancyType', + (ngModelChange)='saveConfiguration()', + id='vibrancyTypeBlur', + [value]='"blur"' + ) + label.btn.btn-secondary( + for='vibrancyTypeBlur' + ) span(translate) Blur - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"fluent"' - ) + input.btn-check( + type='radio', + name='vibracy', + [(ngModel)]='config.store.appearance.vibrancyType', + (ngModelChange)='saveConfiguration()', + id='vibrancyTypeFluent', + [value]='"fluent"' + ) + label.btn.btn-secondary( + for='vibrancyTypeFluent' + ) span Fluent .form-line(*ngIf='platform.supportsWindowControls') @@ -71,31 +77,36 @@ h3.mb-3(translate) Window .title(translate) Window frame .description(translate) Whether a custom window or an OS native window should be used - .btn-group( - [(ngModel)]='config.store.appearance.frame', - (ngModelChange)='saveConfiguration(true)', - ngbRadioGroup - ) - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"native"' - ) + .btn-group + input.btn-check( + type='radio', + name='frame', + [(ngModel)]='config.store.appearance.frame', + (ngModelChange)='saveConfiguration(true)', + id='frameNative', + [value]='"native"' + ) + label.btn.btn-secondary(for='frameNative') span(translate) Native - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"thin"' - ) + input.btn-check( + type='radio', + name='frame', + [(ngModel)]='config.store.appearance.frame', + (ngModelChange)='saveConfiguration(true)', + id='frameThin', + [value]='"thin"' + ) + label.btn.btn-secondary(for='frameThin') span(translate) Thin - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"full"' - ) + input.btn-check( + type='radio', + name='frame', + [(ngModel)]='config.store.appearance.frame', + (ngModelChange)='saveConfiguration(true)', + id='frameFull', + [value]='"full"' + ) + label.btn.btn-secondary(for='frameFull') span(translate) Full h3.mt-4(translate) Docking @@ -105,45 +116,56 @@ h3.mt-4(translate) Docking .title(translate) Dock the terminal .description(translate) Snaps the window to a side of the screen - .btn-group( - [(ngModel)]='config.store.appearance.dock', - (ngModelChange)='saveConfiguration(); docking.dock()', - ngbRadioGroup - ) - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"off"' - ) + .btn-group + input.btn-check( + type='radio', + name='docking', + [(ngModel)]='config.store.appearance.dock', + (ngModelChange)='saveConfiguration(); docking.dock()', + id='dockingOff', + [value]='"off"' + ) + label.btn.btn-secondary(for='dockingOff') span(translate) Off - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"top"' - ) + input.btn-check( + type='radio', + name='docking', + [(ngModel)]='config.store.appearance.dock', + (ngModelChange)='saveConfiguration(); docking.dock()', + id='dockingTop', + [value]='"top"' + ) + label.btn.btn-secondary(for='dockingTop') span(translate) Top - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"left"' - ) + input.btn-check( + type='radio', + name='docking', + [(ngModel)]='config.store.appearance.dock', + (ngModelChange)='saveConfiguration(); docking.dock()', + id='dockingLeft', + [value]='"left"' + ) + label.btn.btn-secondary(for='dockingLeft') span(translate) Left - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"right"' - ) + input.btn-check( + type='radio', + name='docking', + [(ngModel)]='config.store.appearance.dock', + (ngModelChange)='saveConfiguration(); docking.dock()', + id='dockingRight', + [value]='"right"' + ) + label.btn.btn-secondary(for='dockingRight') span(translate) Right - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"bottom"' - ) + input.btn-check( + type='radio', + name='docking', + [(ngModel)]='config.store.appearance.dock', + (ngModelChange)='saveConfiguration(); docking.dock()', + id='dockingBottom', + [value]='"bottom"' + ) + label.btn.btn-secondary(for='dockingBottom') span(translate) Bottom .ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"') @@ -151,24 +173,26 @@ h3.mt-4(translate) Docking .title(translate) Display on .description(translate) Snaps the window to a side of the screen - div( - [(ngModel)]='config.store.appearance.dockScreen', - (ngModelChange)='saveConfiguration(); docking.dock()', - ngbRadioGroup - ) - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - value='current' - ) + div + input.btn-check( + type='radio', + name='dockScreen', + [(ngModel)]='config.store.appearance.dockScreen', + (ngModelChange)='saveConfiguration(); docking.dock()', + id='dockScreenCurrent', + value='current' + ) + label.btn.btn-secondary(id='dockScreenCurrent') span(translate) Current - label.btn.btn-secondary(*ngFor='let screen of screens', ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='screen.id' - ) + input.btn-check( + type='radio', + name='dockScreen', + [(ngModel)]='config.store.appearance.dockScreen', + (ngModelChange)='saveConfiguration(); docking.dock()', + id='dockScreen{{screen.id}}', + [value]='screen.id' + ) + label.btn.btn-secondary(*ngFor='let screen of screens', for='dockScreen{{screen.id}}') | {{screen.name}} .ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"') @@ -220,61 +244,71 @@ h3.mt-4(translate) Tabs .form-line .header .title(translate) Tabs location - .btn-group( - [(ngModel)]='config.store.appearance.tabsLocation', - (ngModelChange)='saveConfiguration()', - ngbRadioGroup - ) - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"top"' - ) + .btn-group + input.btn-check( + type='radio', + name='tabsLocation', + [(ngModel)]='config.store.appearance.tabsLocation', + (ngModelChange)='saveConfiguration()', + id='tabsLocationTop', + [value]='"top"' + ) + label.btn.btn-secondary(for='tabsLocationTop') span(translate) Top - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"bottom"' - ) + input.btn-check( + type='radio', + name='tabsLocation', + [(ngModel)]='config.store.appearance.tabsLocation', + (ngModelChange)='saveConfiguration()', + id='tabsLocationBottom', + [value]='"bottom"' + ) + label.btn.btn-secondary(for='tabsLocationBottom') span(translate) Bottom - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"left"' - ) + input.btn-check( + type='radio', + name='tabsLocation', + [(ngModel)]='config.store.appearance.tabsLocation', + (ngModelChange)='saveConfiguration()', + id='tabsLocationLeft', + [value]='"left"' + ) + label.btn.btn-secondary(for='tabsLocationLeft') span(translate) Left - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"right"' - ) + input.btn-check( + type='radio', + name='tabsLocation', + [(ngModel)]='config.store.appearance.tabsLocation', + (ngModelChange)='saveConfiguration()', + id='tabsLocationRight', + [value]='"right"' + ) + label.btn.btn-secondary(for='tabsLocationRight') span(translate) Right .form-line .header .title(translate) Tabs width - .btn-group( - [(ngModel)]='config.store.appearance.flexTabs', - (ngModelChange)='saveConfiguration()', - ngbRadioGroup - ) - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='true' - ) + .btn-group + input.btn-check( + type='radio', + name='flexTabs', + [(ngModel)]='config.store.appearance.flexTabs', + (ngModelChange)='saveConfiguration()', + id='flexTabsTrue', + [value]='true' + ) + label.btn.btn-secondary(for='flexTabsTrue') span(translate, translateComment='[Dynamic] tab width') id.tab-width.dynamic - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='false' - ) + input.btn-check( + type='radio', + name='flexTabs', + [(ngModel)]='config.store.appearance.flexTabs', + (ngModelChange)='saveConfiguration()', + id='flexTabsFalse', + [value]='false' + ) + label.btn.btn-secondary(for='flexTabsFalse') span(translate) Fixed .form-line diff --git a/tabby-ssh/src/components/sshPortForwardingConfig.component.pug b/tabby-ssh/src/components/sshPortForwardingConfig.component.pug index b859220d..d497524a 100644 --- a/tabby-ssh/src/components/sshPortForwardingConfig.component.pug +++ b/tabby-ssh/src/components/sshPortForwardingConfig.component.pug @@ -40,31 +40,41 @@ h5(translate) Add a port forward input.form-control(type='text', placeholder='Description', [(ngModel)]='newForward.description') .d-flex - .btn-group.me-auto( - [(ngModel)]='newForward.type', - ngbRadioGroup - ) - label.btn.btn-secondary.m-0(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='PortForwardType.Local' - ) - span(translate) Local - label.btn.btn-secondary.m-0(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='PortForwardType.Remote' - ) - span(translate) Remote - label.btn.btn-secondary.m-0(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='PortForwardType.Dynamic' - ) - span(translate, translateContext='[Dynamic] port forwarding') id.port-forwarding.dynamic + .btn-group.me-auto + input.btn-check( + type='radio', + [(ngModel)]='newForward.type', + id='newForwardTypeLocal', + name='newForwardType', + [value]='PortForwardType.Local' + ) + label.btn.btn-secondary.m-0( + for='newForwardTypeLocal', + translate + ) Local + input.btn-check( + type='radio', + [(ngModel)]='newForward.type', + id='newForwardTypeRemote', + name='newForwardType', + [value]='PortForwardType.Remote' + ) + label.btn.btn-secondary.m-0( + for='newForwardTypeRemote', + translate + ) Remote + input.btn-check( + type='radio', + [(ngModel)]='newForward.type', + id='newForwardTypeDynamic', + name='newForwardType', + [value]='PortForwardType.Dynamic' + ) + label.btn.btn-secondary.m-0( + for='newForwardTypeDynamic', + translate, + translateContext='[Dynamic] port forwarding' + ) id.port-forwarding.dynamic button.btn.btn-primary((click)='addForward()') i.fas.fa-check.me-2 diff --git a/tabby-ssh/src/components/sshProfileSettings.component.pug b/tabby-ssh/src/components/sshProfileSettings.component.pug index b81b5c6e..1901d077 100644 --- a/tabby-ssh/src/components/sshProfileSettings.component.pug +++ b/tabby-ssh/src/components/sshProfileSettings.component.pug @@ -107,28 +107,63 @@ ul.nav-tabs(ngbNav, #nav='ngbNav') .mb-3 label(translate) Authentication method - .btn-group.mt-1.w-100( - [(ngModel)]='profile.options.auth', - ngbRadioGroup - ) - label.btn.btn-secondary(ngbButtonLabel) - input(type='radio', ngbButton, [value]='null') + .btn-group.mt-1.w-100 + input.btn-check( + type='radio', + name='auth', + [(ngModel)]='profile.options.auth', + id='authAuto', + [value]='null' + ) + label.btn.btn-secondary( + for='authAuto' + ) i.far.fa-lightbulb .m-0(translate) Auto - label.btn.btn-secondary(ngbButtonLabel) - input(type='radio', ngbButton, [value]='"password"') + input.btn-check( + type='radio', + name='auth', + [(ngModel)]='profile.options.auth', + id='authPassword', + [value]='"password"' + ) + label.btn.btn-secondary( + for='authPassword' + ) i.fas.fa-font .m-0(translate) Password - label.btn.btn-secondary(ngbButtonLabel) - input(type='radio', ngbButton, [value]='"publicKey"') + input.btn-check( + type='radio', + name='auth', + [(ngModel)]='profile.options.auth', + id='authPublicKey', + [value]='"publicKey"' + ) + label.btn.btn-secondary( + for='authPublicKey' + ) i.fas.fa-key .m-0(translate) Key - label.btn.btn-secondary(ngbButtonLabel, ng:if='hostApp.platform !== Platform.Web') - input(type='radio', ngbButton, [value]='"agent"') + input.btn-check( + type='radio', + name='auth', + [(ngModel)]='profile.options.auth', + id='authAgent', + [value]='"agent"' + ) + label.btn.btn-secondary( + for='authAgent' + , ng:if='hostApp.platform !== Platform.Web') i.fas.fa-user-secret .m-0(translate) Agent + input.btn-check( + type='radio', + name='auth', + [(ngModel)]='profile.options.auth', + id='auth"keyboardInteractive"' + [value]='"keyboardInteractive"' + ) label.btn.btn-secondary(ngbButtonLabel) - input(type='radio', ngbButton, [value]='"keyboardInteractive"') i.far.fa-keyboard .m-0(translate) Interactive diff --git a/tabby-terminal/src/components/appearanceSettingsTab.component.pug b/tabby-terminal/src/components/appearanceSettingsTab.component.pug index 0e87e562..4afee20a 100644 --- a/tabby-terminal/src/components/appearanceSettingsTab.component.pug +++ b/tabby-terminal/src/components/appearanceSettingsTab.component.pug @@ -59,55 +59,72 @@ h3.mb-3(translate) Appearance .header .title(translate) Terminal background - .btn-group( - [(ngModel)]='config.store.terminal.background', - (ngModelChange)='config.save()', - ngbRadioGroup - ) - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"theme"' - ) + .btn-group(role='group') + input.btn-check( + type='radio', + name='background', + [(ngModel)]='config.store.terminal.background', + (ngModelChange)='config.save()', + id='backgroundTheme', + [value]='"theme"' + ) + label.btn.btn-secondary( + for='backgroundTheme' + ) span(translate) From theme - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"colorScheme"' - ) + input.btn-check( + type='radio', + name='background', + [(ngModel)]='config.store.terminal.background', + (ngModelChange)='config.save()', + id='backgroundColorScheme', + [value]='"colorScheme"' + ) + label.btn.btn-secondary( + for='backgroundColorScheme' + ) span(translate) From color scheme .form-line .header .title(translate) Cursor shape - .btn-group( - [(ngModel)]='config.store.terminal.cursor', - (ngModelChange)='config.save()', - ngbRadioGroup - ) - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"block"' - ) + .btn-group(role='group') + input.btn-check( + type='radio', + name='cursor', + [(ngModel)]='config.store.terminal.cursor', + (ngModelChange)='config.save()', + id='cursorBlock', + [value]='"block"' + ) + label.btn.btn-secondary( + for='cursorBlock' + ) | █ - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"beam"' - ) + input.btn-check( + type='radio', + name='cursor', + [(ngModel)]='config.store.terminal.cursor', + (ngModelChange)='config.save()', + id='cursorBeam', + [value]='"beam"' + ) + label.btn.btn-secondary( + for='cursorBeam' + ) | | - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"underline"' - ) + input.btn-check( + type='radio', + name='cursor', + [(ngModel)]='config.store.terminal.cursor', + (ngModelChange)='config.save()', + id='cursorUnderline', + [value]='"underline"' + ) + label.btn.btn-secondary( + for='cursorUnderline' + ) | ▁ .form-line diff --git a/tabby-terminal/src/components/terminalSettingsTab.component.pug b/tabby-terminal/src/components/terminalSettingsTab.component.pug index 04eb023b..9005f12b 100644 --- a/tabby-terminal/src/components/terminalSettingsTab.component.pug +++ b/tabby-terminal/src/components/terminalSettingsTab.component.pug @@ -168,31 +168,36 @@ div.mt-4 .form-line .header .title(translate) Terminal bell - .btn-group( - [(ngModel)]='config.store.terminal.bell', - (ngModelChange)='config.save()', - ngbRadioGroup - ) - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"off"' - ) + .btn-group + input.btn-check( + type='radio', + name='bell', + [(ngModel)]='config.store.terminal.bell', + (ngModelChange)='config.save()', + id='bellOff', + [value]='"off"' + ) + label.btn.btn-secondary(for='bellOff') span(translate) Off - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"visual"' - ) + input.btn-check( + type='radio', + name='bell', + [(ngModel)]='config.store.terminal.bell', + (ngModelChange)='config.save()', + id='bellVisual', + [value]='"visual"' + ) + label.btn.btn-secondary(for='bellVisual') span(translate) Visual - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"audible"' - ) + input.btn-check( + type='radio', + name='bell', + [(ngModel)]='config.store.terminal.bell', + (ngModelChange)='config.save()', + id='bellAudible', + [value]='"audible"' + ) + label.btn.btn-secondary(for='bellAudible') span(translate) Audible .alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.bell != "audible" && (config.store.terminal.profile || "").startsWith("wsl")') diff --git a/tabby-terminal/src/index.ts b/tabby-terminal/src/index.ts index 9aee1972..99f3e225 100644 --- a/tabby-terminal/src/index.ts +++ b/tabby-terminal/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' @@ -37,7 +37,7 @@ import { TerminalCLIHandler } from './cli' /** @hidden */ @NgModule({ imports: [ - // BrowserModule, + CommonModule, FormsModule, NgbModule, ToastrModule,