This commit is contained in:
Eugene Pankov 2023-02-06 20:57:44 +01:00
parent 1b92b71575
commit 23c6f86917
No known key found for this signature in database
GPG Key ID: 5896FCBBDD1CF4F4
13 changed files with 348 additions and 255 deletions

View File

@ -13,10 +13,6 @@ body {
user-select: text; user-select: text;
} }
[ngbradiogroup] input[type="radio"] {
display: none;
}
a, button { a, button {
&.btn { &.btn {
display: inline-flex; display: inline-flex;

View File

@ -1,4 +1,3 @@
import { Component } from '@angular/core'
import { Observable, Subscription, Subject } from 'rxjs' import { Observable, Subscription, Subject } from 'rxjs'
interface CancellableEvent { interface CancellableEvent {
@ -42,7 +41,6 @@ export class SubscriptionContainer {
} }
} }
@Component({ template: '' })
export class BaseComponent { export class BaseComponent {
protected get destroyed$ (): Observable<void> { return this._destroyed } protected get destroyed$ (): Observable<void> { return this._destroyed }
private _destroyed = new Subject<void>() private _destroyed = new Subject<void>()

View File

@ -1,7 +1,6 @@
import { HostBinding, ElementRef, Component } from '@angular/core' import { HostBinding, ElementRef } from '@angular/core'
import { BaseComponent } from './base.component' import { BaseComponent } from './base.component'
@Component({ template: '' })
export abstract class SelfPositioningComponent extends BaseComponent { export abstract class SelfPositioningComponent extends BaseComponent {
@HostBinding('style.left') cssLeft: string @HostBinding('style.left') cssLeft: string
@HostBinding('style.top') cssTop: string @HostBinding('style.top') cssTop: string

View File

@ -313,7 +313,7 @@ hotkey-input-modal {
} }
} }
[ngbradiogroup] > label.active { .btn-check:checked + label {
background: $blue; background: $blue;
} }

View File

@ -213,7 +213,7 @@ hotkey-input-modal {
margin-bottom: 2px; margin-bottom: 2px;
} }
[ngbradiogroup] > label.active { .btn-check:checked + label {
background: $blue; background: $blue;
} }

View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core' import { NgModule } from '@angular/core'
// import { BrowserModule } from '@angular/platform-browser' import { CommonModule } from '@angular/common'
import { FormsModule } from '@angular/forms' import { FormsModule } from '@angular/forms'
import { NgbModule } from '@ng-bootstrap/ng-bootstrap' import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { ToastrModule } from 'ngx-toastr' import { ToastrModule } from 'ngx-toastr'
@ -46,7 +46,7 @@ import { LocalProfilesService } from './profiles'
/** @hidden */ /** @hidden */
@NgModule({ @NgModule({
imports: [ imports: [
// BrowserModule, CommonModule,
FormsModule, FormsModule,
NgbModule, NgbModule,
ToastrModule, ToastrModule,

View File

@ -2,7 +2,7 @@
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker' import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'
import * as yaml from 'js-yaml' import * as yaml from 'js-yaml'
import { debounce } from 'utils-decorators/dist/esm/debounce/debounce' 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 { import {
ConfigService, ConfigService,
BaseTabComponent, BaseTabComponent,
@ -46,7 +46,6 @@ export class SettingsTabComponent extends BaseTabComponent {
public hostWindow: HostWindowService, public hostWindow: HostWindowService,
public homeBase: HomeBaseService, public homeBase: HomeBaseService,
public platform: PlatformService, public platform: PlatformService,
public zone: NgZone,
public locale: LocaleService, public locale: LocaleService,
public updater: UpdaterService, public updater: UpdaterService,
private app: AppService, private app: AppService,

View File

@ -34,24 +34,30 @@ h3.mb-3(translate) Window
.form-line(*ngIf='config.store.appearance.vibrancy && isFluentVibrancySupported && config.store.hacks.enableFluentBackground') .form-line(*ngIf='config.store.appearance.vibrancy && isFluentVibrancySupported && config.store.hacks.enableFluentBackground')
.header .header
.title(translate) Background type .title(translate) Background type
.btn-group( .btn-group
[(ngModel)]='config.store.appearance.vibrancyType', input.btn-check(
(ngModelChange)='saveConfiguration()', type='radio',
ngbRadioGroup name='vibracy',
) [(ngModel)]='config.store.appearance.vibrancyType',
label.btn.btn-secondary(ngbButtonLabel) (ngModelChange)='saveConfiguration()',
input( id='vibrancyTypeBlur',
type='radio', [value]='"blur"'
ngbButton, )
[value]='"blur"' label.btn.btn-secondary(
) for='vibrancyTypeBlur'
)
span(translate) Blur span(translate) Blur
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='vibracy',
ngbButton, [(ngModel)]='config.store.appearance.vibrancyType',
[value]='"fluent"' (ngModelChange)='saveConfiguration()',
) id='vibrancyTypeFluent',
[value]='"fluent"'
)
label.btn.btn-secondary(
for='vibrancyTypeFluent'
)
span Fluent span Fluent
.form-line(*ngIf='platform.supportsWindowControls') .form-line(*ngIf='platform.supportsWindowControls')
@ -71,31 +77,36 @@ h3.mb-3(translate) Window
.title(translate) Window frame .title(translate) Window frame
.description(translate) Whether a custom window or an OS native window should be used .description(translate) Whether a custom window or an OS native window should be used
.btn-group( .btn-group
[(ngModel)]='config.store.appearance.frame', input.btn-check(
(ngModelChange)='saveConfiguration(true)', type='radio',
ngbRadioGroup name='frame',
) [(ngModel)]='config.store.appearance.frame',
label.btn.btn-secondary(ngbButtonLabel) (ngModelChange)='saveConfiguration(true)',
input( id='frameNative',
type='radio', [value]='"native"'
ngbButton, )
[value]='"native"' label.btn.btn-secondary(for='frameNative')
)
span(translate) Native span(translate) Native
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='frame',
ngbButton, [(ngModel)]='config.store.appearance.frame',
[value]='"thin"' (ngModelChange)='saveConfiguration(true)',
) id='frameThin',
[value]='"thin"'
)
label.btn.btn-secondary(for='frameThin')
span(translate) Thin span(translate) Thin
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='frame',
ngbButton, [(ngModel)]='config.store.appearance.frame',
[value]='"full"' (ngModelChange)='saveConfiguration(true)',
) id='frameFull',
[value]='"full"'
)
label.btn.btn-secondary(for='frameFull')
span(translate) Full span(translate) Full
h3.mt-4(translate) Docking h3.mt-4(translate) Docking
@ -105,45 +116,56 @@ h3.mt-4(translate) Docking
.title(translate) Dock the terminal .title(translate) Dock the terminal
.description(translate) Snaps the window to a side of the screen .description(translate) Snaps the window to a side of the screen
.btn-group( .btn-group
[(ngModel)]='config.store.appearance.dock', input.btn-check(
(ngModelChange)='saveConfiguration(); docking.dock()', type='radio',
ngbRadioGroup name='docking',
) [(ngModel)]='config.store.appearance.dock',
label.btn.btn-secondary(ngbButtonLabel) (ngModelChange)='saveConfiguration(); docking.dock()',
input( id='dockingOff',
type='radio', [value]='"off"'
ngbButton, )
[value]='"off"' label.btn.btn-secondary(for='dockingOff')
)
span(translate) Off span(translate) Off
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='docking',
ngbButton, [(ngModel)]='config.store.appearance.dock',
[value]='"top"' (ngModelChange)='saveConfiguration(); docking.dock()',
) id='dockingTop',
[value]='"top"'
)
label.btn.btn-secondary(for='dockingTop')
span(translate) Top span(translate) Top
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='docking',
ngbButton, [(ngModel)]='config.store.appearance.dock',
[value]='"left"' (ngModelChange)='saveConfiguration(); docking.dock()',
) id='dockingLeft',
[value]='"left"'
)
label.btn.btn-secondary(for='dockingLeft')
span(translate) Left span(translate) Left
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='docking',
ngbButton, [(ngModel)]='config.store.appearance.dock',
[value]='"right"' (ngModelChange)='saveConfiguration(); docking.dock()',
) id='dockingRight',
[value]='"right"'
)
label.btn.btn-secondary(for='dockingRight')
span(translate) Right span(translate) Right
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='docking',
ngbButton, [(ngModel)]='config.store.appearance.dock',
[value]='"bottom"' (ngModelChange)='saveConfiguration(); docking.dock()',
) id='dockingBottom',
[value]='"bottom"'
)
label.btn.btn-secondary(for='dockingBottom')
span(translate) Bottom span(translate) Bottom
.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"') .ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
@ -151,24 +173,26 @@ h3.mt-4(translate) Docking
.title(translate) Display on .title(translate) Display on
.description(translate) Snaps the window to a side of the screen .description(translate) Snaps the window to a side of the screen
div( div
[(ngModel)]='config.store.appearance.dockScreen', input.btn-check(
(ngModelChange)='saveConfiguration(); docking.dock()', type='radio',
ngbRadioGroup name='dockScreen',
) [(ngModel)]='config.store.appearance.dockScreen',
label.btn.btn-secondary(ngbButtonLabel) (ngModelChange)='saveConfiguration(); docking.dock()',
input( id='dockScreenCurrent',
type='radio', value='current'
ngbButton, )
value='current' label.btn.btn-secondary(id='dockScreenCurrent')
)
span(translate) Current span(translate) Current
label.btn.btn-secondary(*ngFor='let screen of screens', ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='dockScreen',
ngbButton, [(ngModel)]='config.store.appearance.dockScreen',
[value]='screen.id' (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}} | {{screen.name}}
.ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"') .ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
@ -220,61 +244,71 @@ h3.mt-4(translate) Tabs
.form-line .form-line
.header .header
.title(translate) Tabs location .title(translate) Tabs location
.btn-group( .btn-group
[(ngModel)]='config.store.appearance.tabsLocation', input.btn-check(
(ngModelChange)='saveConfiguration()', type='radio',
ngbRadioGroup name='tabsLocation',
) [(ngModel)]='config.store.appearance.tabsLocation',
label.btn.btn-secondary(ngbButtonLabel) (ngModelChange)='saveConfiguration()',
input( id='tabsLocationTop',
type='radio', [value]='"top"'
ngbButton, )
[value]='"top"' label.btn.btn-secondary(for='tabsLocationTop')
)
span(translate) Top span(translate) Top
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='tabsLocation',
ngbButton, [(ngModel)]='config.store.appearance.tabsLocation',
[value]='"bottom"' (ngModelChange)='saveConfiguration()',
) id='tabsLocationBottom',
[value]='"bottom"'
)
label.btn.btn-secondary(for='tabsLocationBottom')
span(translate) Bottom span(translate) Bottom
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='tabsLocation',
ngbButton, [(ngModel)]='config.store.appearance.tabsLocation',
[value]='"left"' (ngModelChange)='saveConfiguration()',
) id='tabsLocationLeft',
[value]='"left"'
)
label.btn.btn-secondary(for='tabsLocationLeft')
span(translate) Left span(translate) Left
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='tabsLocation',
ngbButton, [(ngModel)]='config.store.appearance.tabsLocation',
[value]='"right"' (ngModelChange)='saveConfiguration()',
) id='tabsLocationRight',
[value]='"right"'
)
label.btn.btn-secondary(for='tabsLocationRight')
span(translate) Right span(translate) Right
.form-line .form-line
.header .header
.title(translate) Tabs width .title(translate) Tabs width
.btn-group( .btn-group
[(ngModel)]='config.store.appearance.flexTabs', input.btn-check(
(ngModelChange)='saveConfiguration()', type='radio',
ngbRadioGroup name='flexTabs',
) [(ngModel)]='config.store.appearance.flexTabs',
label.btn.btn-secondary(ngbButtonLabel) (ngModelChange)='saveConfiguration()',
input( id='flexTabsTrue',
type='radio', [value]='true'
ngbButton, )
[value]='true' label.btn.btn-secondary(for='flexTabsTrue')
)
span(translate, translateComment='[Dynamic] tab width') id.tab-width.dynamic span(translate, translateComment='[Dynamic] tab width') id.tab-width.dynamic
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='flexTabs',
ngbButton, [(ngModel)]='config.store.appearance.flexTabs',
[value]='false' (ngModelChange)='saveConfiguration()',
) id='flexTabsFalse',
[value]='false'
)
label.btn.btn-secondary(for='flexTabsFalse')
span(translate) Fixed span(translate) Fixed
.form-line .form-line

View File

@ -40,31 +40,41 @@ h5(translate) Add a port forward
input.form-control(type='text', placeholder='Description', [(ngModel)]='newForward.description') input.form-control(type='text', placeholder='Description', [(ngModel)]='newForward.description')
.d-flex .d-flex
.btn-group.me-auto( .btn-group.me-auto
[(ngModel)]='newForward.type', input.btn-check(
ngbRadioGroup type='radio',
) [(ngModel)]='newForward.type',
label.btn.btn-secondary.m-0(ngbButtonLabel) id='newForwardTypeLocal',
input( name='newForwardType',
type='radio', [value]='PortForwardType.Local'
ngbButton, )
[value]='PortForwardType.Local' label.btn.btn-secondary.m-0(
) for='newForwardTypeLocal',
span(translate) Local translate
label.btn.btn-secondary.m-0(ngbButtonLabel) ) Local
input( input.btn-check(
type='radio', type='radio',
ngbButton, [(ngModel)]='newForward.type',
[value]='PortForwardType.Remote' id='newForwardTypeRemote',
) name='newForwardType',
span(translate) Remote [value]='PortForwardType.Remote'
label.btn.btn-secondary.m-0(ngbButtonLabel) )
input( label.btn.btn-secondary.m-0(
type='radio', for='newForwardTypeRemote',
ngbButton, translate
[value]='PortForwardType.Dynamic' ) Remote
) input.btn-check(
span(translate, translateContext='[Dynamic] port forwarding') id.port-forwarding.dynamic 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()') button.btn.btn-primary((click)='addForward()')
i.fas.fa-check.me-2 i.fas.fa-check.me-2

View File

@ -107,28 +107,63 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
.mb-3 .mb-3
label(translate) Authentication method label(translate) Authentication method
.btn-group.mt-1.w-100( .btn-group.mt-1.w-100
[(ngModel)]='profile.options.auth', input.btn-check(
ngbRadioGroup type='radio',
) name='auth',
label.btn.btn-secondary(ngbButtonLabel) [(ngModel)]='profile.options.auth',
input(type='radio', ngbButton, [value]='null') id='authAuto',
[value]='null'
)
label.btn.btn-secondary(
for='authAuto'
)
i.far.fa-lightbulb i.far.fa-lightbulb
.m-0(translate) Auto .m-0(translate) Auto
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input(type='radio', ngbButton, [value]='"password"') type='radio',
name='auth',
[(ngModel)]='profile.options.auth',
id='authPassword',
[value]='"password"'
)
label.btn.btn-secondary(
for='authPassword'
)
i.fas.fa-font i.fas.fa-font
.m-0(translate) Password .m-0(translate) Password
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input(type='radio', ngbButton, [value]='"publicKey"') type='radio',
name='auth',
[(ngModel)]='profile.options.auth',
id='authPublicKey',
[value]='"publicKey"'
)
label.btn.btn-secondary(
for='authPublicKey'
)
i.fas.fa-key i.fas.fa-key
.m-0(translate) Key .m-0(translate) Key
label.btn.btn-secondary(ngbButtonLabel, ng:if='hostApp.platform !== Platform.Web') input.btn-check(
input(type='radio', ngbButton, [value]='"agent"') 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 i.fas.fa-user-secret
.m-0(translate) Agent .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) label.btn.btn-secondary(ngbButtonLabel)
input(type='radio', ngbButton, [value]='"keyboardInteractive"')
i.far.fa-keyboard i.far.fa-keyboard
.m-0(translate) Interactive .m-0(translate) Interactive

View File

@ -59,55 +59,72 @@ h3.mb-3(translate) Appearance
.header .header
.title(translate) Terminal background .title(translate) Terminal background
.btn-group( .btn-group(role='group')
[(ngModel)]='config.store.terminal.background', input.btn-check(
(ngModelChange)='config.save()', type='radio',
ngbRadioGroup name='background',
) [(ngModel)]='config.store.terminal.background',
label.btn.btn-secondary(ngbButtonLabel) (ngModelChange)='config.save()',
input( id='backgroundTheme',
type='radio', [value]='"theme"'
ngbButton, )
[value]='"theme"' label.btn.btn-secondary(
) for='backgroundTheme'
)
span(translate) From theme span(translate) From theme
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='background',
ngbButton, [(ngModel)]='config.store.terminal.background',
[value]='"colorScheme"' (ngModelChange)='config.save()',
) id='backgroundColorScheme',
[value]='"colorScheme"'
)
label.btn.btn-secondary(
for='backgroundColorScheme'
)
span(translate) From color scheme span(translate) From color scheme
.form-line .form-line
.header .header
.title(translate) Cursor shape .title(translate) Cursor shape
.btn-group( .btn-group(role='group')
[(ngModel)]='config.store.terminal.cursor', input.btn-check(
(ngModelChange)='config.save()', type='radio',
ngbRadioGroup name='cursor',
) [(ngModel)]='config.store.terminal.cursor',
label.btn.btn-secondary(ngbButtonLabel) (ngModelChange)='config.save()',
input( id='cursorBlock',
type='radio', [value]='"block"'
ngbButton, )
[value]='"block"' label.btn.btn-secondary(
) for='cursorBlock'
)
| █ | █
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='cursor',
ngbButton, [(ngModel)]='config.store.terminal.cursor',
[value]='"beam"' (ngModelChange)='config.save()',
) id='cursorBeam',
[value]='"beam"'
)
label.btn.btn-secondary(
for='cursorBeam'
)
| | | |
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='cursor',
ngbButton, [(ngModel)]='config.store.terminal.cursor',
[value]='"underline"' (ngModelChange)='config.save()',
) id='cursorUnderline',
[value]='"underline"'
)
label.btn.btn-secondary(
for='cursorUnderline'
)
| ▁ | ▁
.form-line .form-line

View File

@ -168,31 +168,36 @@ div.mt-4
.form-line .form-line
.header .header
.title(translate) Terminal bell .title(translate) Terminal bell
.btn-group( .btn-group
[(ngModel)]='config.store.terminal.bell', input.btn-check(
(ngModelChange)='config.save()', type='radio',
ngbRadioGroup name='bell',
) [(ngModel)]='config.store.terminal.bell',
label.btn.btn-secondary(ngbButtonLabel) (ngModelChange)='config.save()',
input( id='bellOff',
type='radio', [value]='"off"'
ngbButton, )
[value]='"off"' label.btn.btn-secondary(for='bellOff')
)
span(translate) Off span(translate) Off
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='bell',
ngbButton, [(ngModel)]='config.store.terminal.bell',
[value]='"visual"' (ngModelChange)='config.save()',
) id='bellVisual',
[value]='"visual"'
)
label.btn.btn-secondary(for='bellVisual')
span(translate) Visual span(translate) Visual
label.btn.btn-secondary(ngbButtonLabel) input.btn-check(
input( type='radio',
type='radio', name='bell',
ngbButton, [(ngModel)]='config.store.terminal.bell',
[value]='"audible"' (ngModelChange)='config.save()',
) id='bellAudible',
[value]='"audible"'
)
label.btn.btn-secondary(for='bellAudible')
span(translate) Audible span(translate) Audible
.alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.bell != "audible" && (config.store.terminal.profile || "").startsWith("wsl")') .alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.bell != "audible" && (config.store.terminal.profile || "").startsWith("wsl")')

View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core' import { NgModule } from '@angular/core'
// import { BrowserModule } from '@angular/platform-browser' import { CommonModule } from '@angular/common'
import { FormsModule } from '@angular/forms' import { FormsModule } from '@angular/forms'
import { NgbModule } from '@ng-bootstrap/ng-bootstrap' import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { ToastrModule } from 'ngx-toastr' import { ToastrModule } from 'ngx-toastr'
@ -37,7 +37,7 @@ import { TerminalCLIHandler } from './cli'
/** @hidden */ /** @hidden */
@NgModule({ @NgModule({
imports: [ imports: [
// BrowserModule, CommonModule,
FormsModule, FormsModule,
NgbModule, NgbModule,
ToastrModule, ToastrModule,