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;
}
[ngbradiogroup] input[type="radio"] {
display: none;
}
a, button {
&.btn {
display: inline-flex;

View File

@ -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<void> { return this._destroyed }
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'
@Component({ template: '' })
export abstract class SelfPositioningComponent extends BaseComponent {
@HostBinding('style.left') cssLeft: string
@HostBinding('style.top') cssTop: string

View File

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

View File

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

View File

@ -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,

View File

@ -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,

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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")')

View File

@ -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,