diff --git a/app/src/entry.ts b/app/src/entry.ts index ee03e958..2a8c639e 100644 --- a/app/src/entry.ts +++ b/app/src/entry.ts @@ -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 diff --git a/app/src/global.scss b/app/src/global.scss new file mode 100644 index 00000000..9fbf606b --- /dev/null +++ b/app/src/global.scss @@ -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(); } +} diff --git a/app/src/preload.scss b/app/src/preload.scss index ad087e36..d7664cf5 100644 --- a/app/src/preload.scss +++ b/app/src/preload.scss @@ -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; -} diff --git a/terminus-core/src/components/checkbox.component.pug b/terminus-core/src/components/checkbox.component.pug index cb6b09fc..2a5115a6 100644 --- a/terminus-core/src/components/checkbox.component.pug +++ b/terminus-core/src/components/checkbox.component.pug @@ -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}} diff --git a/terminus-core/src/components/checkbox.component.ts b/terminus-core/src/components/checkbox.component.ts index b6df6b55..060f0e95 100644 --- a/terminus-core/src/components/checkbox.component.ts +++ b/terminus-core/src/components/checkbox.component.ts @@ -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 diff --git a/terminus-core/src/components/toggle.component.scss b/terminus-core/src/components/toggle.component.scss new file mode 100644 index 00000000..bbf6a805 --- /dev/null +++ b/terminus-core/src/components/toggle.component.scss @@ -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); + } +} diff --git a/terminus-core/src/components/toggle.component.ts b/terminus-core/src/components/toggle.component.ts new file mode 100644 index 00000000..91fd5878 --- /dev/null +++ b/terminus-core/src/components/toggle.component.ts @@ -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: ` +
+
+
+ +
+
+
+ `, + styles: [require('./toggle.component.scss')], + providers: [ + { provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }, + ] +}) +export class ToggleComponent extends CheckboxComponent { +} diff --git a/terminus-core/src/index.ts b/terminus-core/src/index.ts index f9fe6348..13e27df4 100644 --- a/terminus-core/src/index.ts +++ b/terminus-core/src/index.ts @@ -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 { diff --git a/terminus-core/src/theme.scss b/terminus-core/src/theme.scss index ae90fc05..15ed4e2b 100644 --- a/terminus-core/src/theme.scss +++ b/terminus-core/src/theme.scss @@ -350,5 +350,9 @@ select.form-control { } checkbox i.on { - color: $blue; + color: $blue; +} + +toggle.active .body .toggle { + background: $blue; } diff --git a/terminus-settings/src/components/settingsTab.component.pug b/terminus-settings/src/components/settingsTab.component.pug index c6c98f2e..e4a67313 100644 --- a/terminus-settings/src/components/settingsTab.component.pug +++ b/terminus-settings/src/components/settingsTab.component.pug @@ -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') diff --git a/terminus-terminal/src/components/colorPicker.component.pug b/terminus-terminal/src/components/colorPicker.component.pug index 918d25db..db063f7e 100644 --- a/terminus-terminal/src/components/colorPicker.component.pug +++ b/terminus-terminal/src/components/colorPicker.component.pug @@ -1,4 +1,4 @@ -template(#content) +ng-template(#content) .preview( [style.width]='"100%"', [style.background]='model', diff --git a/terminus-terminal/src/components/terminalSettingsTab.component.pug b/terminus-terminal/src/components/terminalSettingsTab.component.pug index e3ae2438..047a832e 100644 --- a/terminus-terminal/src/components/terminalSettingsTab.component.pug +++ b/terminus-terminal/src/components/terminalSettingsTab.component.pug @@ -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', )