mirror of
https://github.com/Eugeny/tabby.git
synced 2024-12-24 11:02:47 +03:00
settings redesign
This commit is contained in:
Eugene Pankov
parent
64f670bd86
commit
06d14f9bb2
@ -2,6 +2,8 @@ import 'zone.js'
|
||||
import 'core-js/es7/reflect'
|
||||
import 'core-js/core/delay'
|
||||
import 'rxjs'
|
||||
|
||||
import './global.scss'
|
||||
import './toastr.scss'
|
||||
|
||||
// Always land on the start view
|
||||
|
||||
87
app/src/global.scss
Normal file
87
app/src/global.scss
Normal file
@ -0,0 +1,87 @@
|
||||
body {
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #1D272D;
|
||||
}
|
||||
|
||||
.modal-dialog, .modal-backdrop {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
[ngbradiogroup] input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-line {
|
||||
display: flex;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
min-height: 64px;
|
||||
|
||||
.header {
|
||||
margin-right: auto;
|
||||
|
||||
.title {
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 13px;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
&>.form-control, &>.input-group {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@mixin thumb() {
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background: #aaa;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-top: -4px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
|
||||
transition: 0.25s background;
|
||||
|
||||
&:hover {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #666;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb { @include thumb(); }
|
||||
&::-moz-range-thumb { @include thumb(); }
|
||||
&::-ms-thumb { @include thumb(); }
|
||||
&::thumb { @include thumb(); }
|
||||
|
||||
@mixin track() {
|
||||
height: 4px;
|
||||
background: #111;
|
||||
margin: 3px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track { @include track(); }
|
||||
&:focus::-webkit-slider-runnable-track { @include track(); }
|
||||
&::-moz-range-track { @include track(); }
|
||||
&::-ms-track { @include track(); }
|
||||
}
|
||||
@ -58,17 +58,3 @@
|
||||
color: #842fe0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog, .modal-backdrop {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
[ngbradiogroup] input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #1D272D;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.icon((click)='click()', tabindex='0', [class.active]='model', (keyup.space)='click()')
|
||||
.icon(tabindex='0', [class.active]='model', (keyup.space)='click()')
|
||||
i.fa.fa-square-o.off
|
||||
i.fa.fa-check-square.on
|
||||
.text((click)='click()') {{text}}
|
||||
.text {{text}}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { NgZone, Component, Input } from '@angular/core'
|
||||
import { NgZone, Component, Input, HostBinding, HostListener } from '@angular/core'
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
|
||||
|
||||
@Component({
|
||||
@ -10,12 +10,12 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
|
||||
]
|
||||
})
|
||||
export class CheckboxComponent implements ControlValueAccessor {
|
||||
@Input() model: boolean
|
||||
@HostBinding('class.active') @Input() model: boolean
|
||||
@Input() disabled: boolean
|
||||
@Input() text: string
|
||||
private changed = new Array<(val: boolean) => void>()
|
||||
|
||||
click () {
|
||||
@HostListener('click') click () {
|
||||
NgZone.assertInAngularZone()
|
||||
if (this.disabled) {
|
||||
return
|
||||
|
||||
70
terminus-core/src/components/toggle.component.scss
Normal file
70
terminus-core/src/components/toggle.component.scss
Normal file
@ -0,0 +1,70 @@
|
||||
:host {
|
||||
flex: none;
|
||||
$toggle-size: 18px;
|
||||
$height: 30px;
|
||||
$padding: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
overflow: visible;
|
||||
border-radius: 3px;
|
||||
line-height: $height;
|
||||
height: $height;
|
||||
transition: 0.25s opacity;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
margin-left: -10px;
|
||||
|
||||
&:focus {
|
||||
background: rgba(255,255,255,.05);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.body {
|
||||
$border-width: 2px;
|
||||
border-radius: 5px;
|
||||
border: $border-width solid rgba(255, 255, 255, .2);
|
||||
padding: $padding;
|
||||
height: $toggle-size + $border-width * 2 + $padding * 2;
|
||||
width: $toggle-size * 2 + $border-width * 2 + $padding * 2;
|
||||
|
||||
position: relative;
|
||||
|
||||
.toggle {
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
width: $toggle-size;
|
||||
height: $toggle-size;
|
||||
background: #475158;
|
||||
top: $padding;
|
||||
left: $padding;
|
||||
transition: 0.25s left;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
|
||||
i {
|
||||
opacity: 0;
|
||||
transition: 0.25s opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active .body .toggle {
|
||||
left: $toggle-size + $padding;
|
||||
|
||||
i {
|
||||
color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(255,255,255,.1);
|
||||
}
|
||||
}
|
||||
22
terminus-core/src/components/toggle.component.ts
Normal file
22
terminus-core/src/components/toggle.component.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { Component } from '@angular/core'
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/forms'
|
||||
import { CheckboxComponent } from './checkbox.component'
|
||||
|
||||
@Component({
|
||||
selector: 'toggle',
|
||||
template: `
|
||||
<div class="switch">
|
||||
<div class="body">
|
||||
<div class="toggle" [class.bg-primary]='model'>
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [require('./toggle.component.scss')],
|
||||
providers: [
|
||||
{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true },
|
||||
]
|
||||
})
|
||||
export class ToggleComponent extends CheckboxComponent {
|
||||
}
|
||||
@ -25,6 +25,7 @@ import { SafeModeModalComponent } from './components/safeModeModal.component'
|
||||
import { StartPageComponent } from './components/startPage.component'
|
||||
import { TabHeaderComponent } from './components/tabHeader.component'
|
||||
import { TitleBarComponent } from './components/titleBar.component'
|
||||
import { ToggleComponent } from './components/toggle.component'
|
||||
import { WindowControlsComponent } from './components/windowControls.component'
|
||||
import { RenameTabModalComponent } from './components/renameTabModal.component'
|
||||
|
||||
@ -73,6 +74,7 @@ const PROVIDERS = [
|
||||
TabBodyComponent,
|
||||
TabHeaderComponent,
|
||||
TitleBarComponent,
|
||||
ToggleComponent,
|
||||
WindowControlsComponent,
|
||||
RenameTabModalComponent,
|
||||
SafeModeModalComponent,
|
||||
@ -82,7 +84,8 @@ const PROVIDERS = [
|
||||
SafeModeModalComponent,
|
||||
],
|
||||
exports: [
|
||||
CheckboxComponent
|
||||
CheckboxComponent,
|
||||
ToggleComponent,
|
||||
]
|
||||
})
|
||||
export default class AppModule {
|
||||
|
||||
@ -350,5 +350,9 @@ select.form-control {
|
||||
}
|
||||
|
||||
checkbox i.on {
|
||||
color: $blue;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
toggle.active .body .toggle {
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
@ -6,199 +6,204 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
|
||||
| Application
|
||||
ng-template(ngbTabContent)
|
||||
h3.mb-3 Application
|
||||
.row
|
||||
.col.col-lg-6
|
||||
.form-group
|
||||
label Theme
|
||||
select.form-control(
|
||||
'[(ngModel)]'='config.store.appearance.theme',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
|
||||
.form-line
|
||||
.header
|
||||
.title Theme
|
||||
select.form-control(
|
||||
[(ngModel)]='config.store.appearance.theme',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
|
||||
|
||||
.form-group
|
||||
label Show tabs
|
||||
br
|
||||
.btn-group(
|
||||
'[(ngModel)]'='config.store.appearance.tabsLocation',
|
||||
(ngModelChange)='config.save()',
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"top"'
|
||||
)
|
||||
| On the top
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"bottom"'
|
||||
)
|
||||
| At the bottom
|
||||
|
||||
.form-group(*ngIf='hostApp.platform !== Platform.Linux')
|
||||
label Vibrancy
|
||||
br
|
||||
.btn-group(
|
||||
'[(ngModel)]'='config.store.appearance.vibrancy'
|
||||
'(ngModelChange)'='config.save(); (hostApp.platform === Platform.Windows && config.requestRestart())'
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='true'
|
||||
)
|
||||
| Enable
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='false'
|
||||
)
|
||||
| Disable
|
||||
|
||||
.form-group(*ngIf='hostApp.platform !== Platform.Linux')
|
||||
label Opacity
|
||||
br
|
||||
.form-line
|
||||
.header
|
||||
.title Tabs location
|
||||
.btn-group(
|
||||
[(ngModel)]='config.store.appearance.tabsLocation',
|
||||
(ngModelChange)='config.save()',
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='range',
|
||||
'[(ngModel)]'='config.store.appearance.opacity',
|
||||
'(ngModelChange)'='config.save()',
|
||||
min='0.05',
|
||||
max='1',
|
||||
step='0.01'
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"top"'
|
||||
)
|
||||
|
||||
.col.col-lg-6
|
||||
.form-group
|
||||
label Window frame
|
||||
br
|
||||
.btn-group(
|
||||
'[(ngModel)]'='config.store.appearance.frame'
|
||||
'(ngModelChange)'='config.save(); config.requestRestart()'
|
||||
ngbRadioGroup
|
||||
| On the top
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"bottom"'
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"native"'
|
||||
)
|
||||
| Native
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"thin"'
|
||||
)
|
||||
| Thin
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"full"'
|
||||
)
|
||||
| Full
|
||||
small.form-text.text-muted Whether a custom window or an OS native window should be used
|
||||
| At the bottom
|
||||
|
||||
.row
|
||||
.col.col-auto
|
||||
.form-group
|
||||
label Dock the terminal
|
||||
br
|
||||
.btn-group(
|
||||
'[(ngModel)]'='config.store.appearance.dock'
|
||||
'(ngModelChange)'='config.save(); docking.dock()'
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"off"'
|
||||
)
|
||||
| Off
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"top"'
|
||||
)
|
||||
| Top
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"left"'
|
||||
)
|
||||
| Left
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"right"'
|
||||
)
|
||||
| Right
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"bottom"'
|
||||
)
|
||||
| Bottom
|
||||
.form-line(*ngIf='hostApp.platform !== Platform.Linux')
|
||||
.header
|
||||
.title Vibrancy
|
||||
.description Gives the window a blurred transparent background
|
||||
|
||||
.form-group(*ngIf='config.store.appearance.dock != "off"')
|
||||
label Display on
|
||||
br
|
||||
div(
|
||||
[(ngModel)]='config.store.appearance.dockScreen',
|
||||
(ngModelChange)='config.save(); docking.dock()',
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
value='current'
|
||||
)
|
||||
| Current
|
||||
label.btn.btn-secondary(*ngFor='let screen of screens', ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='screen.id'
|
||||
)
|
||||
| {{screen.name}}
|
||||
.col.col-auto
|
||||
.form-group(*ngIf='config.store.appearance.dock != "off"')
|
||||
label Docked terminal size
|
||||
br
|
||||
input(
|
||||
type='range',
|
||||
'[(ngModel)]'='config.store.appearance.dockFill',
|
||||
'(mouseup)'='config.save(); docking.dock()',
|
||||
min='0.05',
|
||||
max='1',
|
||||
step='0.01'
|
||||
)
|
||||
.btn-group(
|
||||
[(ngModel)]='config.store.appearance.vibrancy',
|
||||
(ngModelChange)='config.save(); (hostApp.platform === Platform.Windows && config.requestRestart())',
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='true'
|
||||
)
|
||||
| Enable
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='false'
|
||||
)
|
||||
| Disable
|
||||
|
||||
.form-group
|
||||
label Debugging
|
||||
div
|
||||
button.btn.btn-secondary((click)='hostApp.openDevTools()')
|
||||
i.fa.fa-bug
|
||||
span Open DevTools
|
||||
.form-line(*ngIf='hostApp.platform !== Platform.Linux')
|
||||
.header
|
||||
.title Window opacity
|
||||
input(
|
||||
type='range',
|
||||
[(ngModel)]='config.store.appearance.opacity',
|
||||
(ngModelChange)='config.save()',
|
||||
min='0.05',
|
||||
max='1',
|
||||
step='0.01'
|
||||
)
|
||||
|
||||
.form-group
|
||||
label Custom CSS
|
||||
.form-line
|
||||
.header
|
||||
.title Window frame
|
||||
.description Whether a custom window or an OS native window should be used
|
||||
|
||||
.btn-group(
|
||||
[(ngModel)]='config.store.appearance.frame',
|
||||
(ngModelChange)='config.save(); config.requestRestart()',
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"native"'
|
||||
)
|
||||
| Native
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"thin"'
|
||||
)
|
||||
| Thin
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"full"'
|
||||
)
|
||||
| Full
|
||||
|
||||
.form-line
|
||||
.header
|
||||
.title Dock the terminal
|
||||
.description Snaps the window to a side of the screen
|
||||
|
||||
.btn-group(
|
||||
[(ngModel)]='config.store.appearance.dock',
|
||||
(ngModelChange)='config.save(); docking.dock()',
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"off"'
|
||||
)
|
||||
| Off
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"top"'
|
||||
)
|
||||
| Top
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"left"'
|
||||
)
|
||||
| Left
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"right"'
|
||||
)
|
||||
| Right
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"bottom"'
|
||||
)
|
||||
| Bottom
|
||||
|
||||
.form-line(*ngIf='config.store.appearance.dock != "off"')
|
||||
.header
|
||||
.title Display on
|
||||
.description Snaps the window to a side of the screen
|
||||
|
||||
div(
|
||||
[(ngModel)]='config.store.appearance.dockScreen',
|
||||
(ngModelChange)='config.save(); docking.dock()',
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
value='current'
|
||||
)
|
||||
| Current
|
||||
label.btn.btn-secondary(*ngFor='let screen of screens', ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='screen.id'
|
||||
)
|
||||
| {{screen.name}}
|
||||
|
||||
.form-line(*ngIf='config.store.appearance.dock != "off"')
|
||||
.header
|
||||
.title Docked terminal size
|
||||
input(
|
||||
type='range',
|
||||
[(ngModel)]='config.store.appearance.dockFill',
|
||||
(mouseup)='config.save(); docking.dock()',
|
||||
min='0.05',
|
||||
max='1',
|
||||
step='0.01'
|
||||
)
|
||||
|
||||
.form-line
|
||||
.header
|
||||
.title Debugging
|
||||
|
||||
button.btn.btn-secondary((click)='hostApp.openDevTools()')
|
||||
i.fa.fa-bug
|
||||
span Open DevTools
|
||||
|
||||
.form-line
|
||||
.header
|
||||
.title Custom CSS
|
||||
textarea.form-control(
|
||||
[(ngModel)]='config.store.appearance.css',
|
||||
'(ngModelChange)'='config.save()',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
|
||||
ngb-tab(id='hotkeys')
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
template(#content)
|
||||
ng-template(#content)
|
||||
.preview(
|
||||
[style.width]='"100%"',
|
||||
[style.background]='model',
|
||||
|
||||
@ -1,33 +1,36 @@
|
||||
h3.mb-3 Appearance
|
||||
.row
|
||||
.col-md-6
|
||||
.form-group
|
||||
label Font
|
||||
.row
|
||||
.col-8
|
||||
input.form-control(
|
||||
type='text',
|
||||
[ngbTypeahead]='fontAutocomplete',
|
||||
[(ngModel)]='config.store.terminal.font',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
.col-4
|
||||
input.form-control(
|
||||
type='number',
|
||||
[(ngModel)]='config.store.terminal.fontSize',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
.form-line
|
||||
.header
|
||||
.title Font
|
||||
|
||||
div
|
||||
checkbox(
|
||||
text='Enable font ligatures',
|
||||
[(ngModel)]='config.store.terminal.ligatures',
|
||||
.d-flex.w-50
|
||||
input.form-control(
|
||||
type='text',
|
||||
[ngbTypeahead]='fontAutocomplete',
|
||||
[(ngModel)]='config.store.terminal.font',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
input.form-control(
|
||||
type='number',
|
||||
[(ngModel)]='config.store.terminal.fontSize',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
|
||||
.form-group(*ngIf='!editingColorScheme')
|
||||
label Color scheme
|
||||
.input-group
|
||||
.form-line
|
||||
.header
|
||||
.title Enable font ligatures
|
||||
toggle(
|
||||
[(ngModel)]='config.store.terminal.ligatures',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
|
||||
.form-line(*ngIf='!editingColorScheme')
|
||||
.header
|
||||
.title Color scheme
|
||||
|
||||
.input-group.w-50
|
||||
select.form-control(
|
||||
[compareWith]='equalComparator',
|
||||
[(ngModel)]='config.store.terminal.colorScheme',
|
||||
@ -53,7 +56,6 @@ h3.mb-3 Appearance
|
||||
.input-group-btn
|
||||
button.btn.btn-secondary((click)='cancelEditing()') Cancel
|
||||
|
||||
|
||||
.form-group(*ngIf='editingColorScheme')
|
||||
color-picker(
|
||||
'[(model)]'='editingColorScheme.foreground',
|
||||
@ -77,9 +79,10 @@ h3.mb-3 Appearance
|
||||
[title]='idx',
|
||||
)
|
||||
|
||||
.form-group
|
||||
label Terminal background
|
||||
br
|
||||
.form-line
|
||||
.header
|
||||
.title Terminal background
|
||||
|
||||
.btn-group(
|
||||
[(ngModel)]='config.store.terminal.background',
|
||||
(ngModelChange)='config.save()',
|
||||
@ -100,59 +103,6 @@ h3.mb-3 Appearance
|
||||
)
|
||||
| From colors
|
||||
|
||||
.d-flex
|
||||
.form-group.mr-3
|
||||
label Cursor shape
|
||||
br
|
||||
.btn-group(
|
||||
[(ngModel)]='config.store.terminal.cursor',
|
||||
(ngModelChange)='config.save()',
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"block"'
|
||||
)
|
||||
| █
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"beam"'
|
||||
)
|
||||
| |
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"underline"'
|
||||
)
|
||||
| ▁
|
||||
|
||||
.form-group
|
||||
label Blink cursor
|
||||
br
|
||||
.btn-group(
|
||||
[(ngModel)]='config.store.terminal.cursorBlink',
|
||||
(ngModelChange)='config.save()',
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='false'
|
||||
)
|
||||
| Off
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='true'
|
||||
)
|
||||
| On
|
||||
.col-md-6
|
||||
.form-group
|
||||
.appearance-preview(
|
||||
@ -240,55 +190,101 @@ h3.mb-3 Appearance
|
||||
span rm -rf /
|
||||
span([style.background-color]='config.store.terminal.colorScheme.cursor')
|
||||
|
||||
.form-line
|
||||
.header
|
||||
.title Cursor shape
|
||||
|
||||
.btn-group(
|
||||
[(ngModel)]='config.store.terminal.cursor',
|
||||
(ngModelChange)='config.save()',
|
||||
ngbRadioGroup
|
||||
)
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"block"'
|
||||
)
|
||||
| █
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"beam"'
|
||||
)
|
||||
| |
|
||||
label.btn.btn-secondary(ngbButtonLabel)
|
||||
input(
|
||||
type='radio',
|
||||
ngbButton,
|
||||
[value]='"underline"'
|
||||
)
|
||||
| ▁
|
||||
|
||||
.form-line
|
||||
.header
|
||||
.title Blink cursor
|
||||
|
||||
toggle(
|
||||
[(ngModel)]='config.store.terminal.cursorBlink',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
|
||||
h3.mt-3.mb-3 Shell
|
||||
|
||||
.d-flex
|
||||
.form-group.mr-3
|
||||
label Shell
|
||||
select.form-control(
|
||||
[(ngModel)]='config.store.terminal.shell',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
option(
|
||||
*ngFor='let shell of shells',
|
||||
[ngValue]='shell.id'
|
||||
) {{shell.name}}
|
||||
.form-line
|
||||
.header
|
||||
.title Shell
|
||||
.description Default shell for new tabs
|
||||
|
||||
select.form-control(
|
||||
[(ngModel)]='config.store.terminal.shell',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
option(
|
||||
*ngFor='let shell of shells',
|
||||
[ngValue]='shell.id'
|
||||
) {{shell.name}}
|
||||
|
||||
.form-line(*ngIf='config.store.terminal.shell == "custom"')
|
||||
.header
|
||||
.title Custom shell
|
||||
|
||||
.form-group.mr-3(*ngIf='persistenceProviders.length > 0')
|
||||
label Session persistence
|
||||
select.form-control(
|
||||
[(ngModel)]='config.store.terminal.persistence',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
option([ngValue]='null') Off
|
||||
option(
|
||||
*ngFor='let provider of persistenceProviders',
|
||||
[ngValue]='provider.id'
|
||||
) {{provider.displayName}}
|
||||
|
||||
.form-group
|
||||
label Working directory
|
||||
input.form-control(
|
||||
type='text',
|
||||
placeholder='Home directory',
|
||||
[(ngModel)]='config.store.terminal.workingDirectory',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
|
||||
.form-group(*ngIf='config.store.terminal.shell == "custom"')
|
||||
label Custom shell
|
||||
input.form-control(
|
||||
type='text',
|
||||
[(ngModel)]='config.store.terminal.customShell',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
|
||||
|
||||
.form-line(*ngIf='persistenceProviders.length > 0')
|
||||
.header
|
||||
.title Session persistence
|
||||
.description Restores tabs when Terminus is restarted
|
||||
select.form-control(
|
||||
[(ngModel)]='config.store.terminal.persistence',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
option([ngValue]='null') Off
|
||||
option(
|
||||
*ngFor='let provider of persistenceProviders',
|
||||
[ngValue]='provider.id'
|
||||
) {{provider.displayName}}
|
||||
|
||||
.form-line
|
||||
.header
|
||||
.title Working directory
|
||||
input.form-control(
|
||||
type='text',
|
||||
placeholder='Home directory',
|
||||
[(ngModel)]='config.store.terminal.workingDirectory',
|
||||
(ngModelChange)='config.save()',
|
||||
)
|
||||
|
||||
h3.mt-3.mb-3 Behaviour
|
||||
|
||||
.form-group
|
||||
label Terminal bell
|
||||
br
|
||||
.form-line
|
||||
.header
|
||||
.title Terminal bell
|
||||
.btn-group(
|
||||
[(ngModel)]='config.store.terminal.bell',
|
||||
(ngModelChange)='config.save()',
|
||||
@ -315,10 +311,10 @@ h3.mt-3.mb-3 Behaviour
|
||||
[value]='"audible"'
|
||||
)
|
||||
| Audible
|
||||
|
||||
.form-group
|
||||
label Right click
|
||||
br
|
||||
|
||||
.form-line
|
||||
.header
|
||||
.title Right click
|
||||
.btn-group(
|
||||
[(ngModel)]='config.store.terminal.rightClick',
|
||||
(ngModelChange)='config.save()',
|
||||
@ -339,28 +335,37 @@ h3.mt-3.mb-3 Behaviour
|
||||
)
|
||||
| Paste
|
||||
|
||||
.form-line
|
||||
.header
|
||||
.title Auto-open a terminal on app start
|
||||
|
||||
.form-group
|
||||
checkbox(
|
||||
toggle(
|
||||
[(ngModel)]='config.store.terminal.autoOpen',
|
||||
(ngModelChange)='config.save()',
|
||||
text='Auto-open a terminal on app start',
|
||||
)
|
||||
|
||||
checkbox(
|
||||
|
||||
.form-line
|
||||
.header
|
||||
.title Bracketed paste (requires shell support)
|
||||
.description Prevents accidental execution of pasted commands
|
||||
toggle(
|
||||
[(ngModel)]='config.store.terminal.bracketedPaste',
|
||||
(ngModelChange)='config.save()',
|
||||
text='Bracketed paste (requires shell support)',
|
||||
)
|
||||
|
||||
checkbox(
|
||||
|
||||
.form-line
|
||||
.header
|
||||
.title Copy on select
|
||||
toggle(
|
||||
[(ngModel)]='config.store.terminal.copyOnSelect',
|
||||
(ngModelChange)='config.save()',
|
||||
text='Copy on select',
|
||||
)
|
||||
|
||||
checkbox(
|
||||
.form-line
|
||||
.header
|
||||
.title Use Alt key as the Meta key
|
||||
.description Lets the shell handle Meta key instead of OS
|
||||
toggle(
|
||||
[(ngModel)]='config.store.terminal.altIsMeta',
|
||||
(ngModelChange)='config.save()',
|
||||
text='Use Alt key as the Meta key',
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user