tabby/terminus-terminal/src/components/terminalSettingsTab.component.pug

h3.mb-3 Appearance
.row
    .col-md-6
        .form-line
            .header
                .title Font

            .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-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',
                    (ngModelChange)='config.save()',
                )
                    option(*ngFor='let scheme of config.store.terminal.customColorSchemes', [ngValue]='scheme') Custom: {{scheme.name}}
                    option(*ngFor='let scheme of colorSchemes', [ngValue]='scheme') {{scheme.name}}
                .input-group-btn
                    button.btn.btn-secondary((click)='editScheme(config.store.terminal.colorScheme)') Edit
                .input-group-btn
                    button.btn.btn-outline-danger(
                        (click)='deleteScheme(config.store.terminal.colorScheme)',
                        *ngIf='isCustomScheme(config.store.terminal.colorScheme)'
                    )
                        i.fa.fa-trash-o

        .form-group(*ngIf='editingColorScheme')
            label Editing
            .input-group
                input.form-control(type='text', [(ngModel)]='editingColorScheme.name')
                .input-group-btn
                    button.btn.btn-secondary((click)='saveScheme()') Save
                .input-group-btn
                    button.btn.btn-secondary((click)='cancelEditing()') Cancel

        .form-group(*ngIf='editingColorScheme')
            color-picker(
                '[(model)]'='editingColorScheme.foreground',
                (modelChange)='config.save(); schemeChanged = true',
                title='FG',
            )
            color-picker(
                '[(model)]'='editingColorScheme.background',
                (modelChange)='config.save(); schemeChanged = true',
                title='BG',
            )
            color-picker(
                '[(model)]'='editingColorScheme.cursor',
                (modelChange)='config.save(); schemeChanged = true',
                title='CU',
            )
            color-picker(
                *ngFor='let _ of editingColorScheme.colors; let idx = index; trackBy: colorsTrackBy',
                '[(model)]'='editingColorScheme.colors[idx]',
                (modelChange)='config.save(); schemeChanged = true',
                [title]='idx',
            )

        .form-line
            .header
                .title Terminal background

            .btn-group(
                [(ngModel)]='config.store.terminal.background',
                (ngModelChange)='config.save()',
                ngbRadioGroup
            )
                label.btn.btn-secondary(ngbButtonLabel)
                    input(
                        type='radio',
                        ngbButton,
                        [value]='"theme"'
                    )
                    | From theme
                label.btn.btn-secondary(ngbButtonLabel)
                    input(
                        type='radio',
                        ngbButton,
                        [value]='"colorScheme"'
                    )
                    | From colors

    .col-md-6
        .form-group
            .appearance-preview(
                [style.font-family]='config.store.terminal.font',
                [style.font-size]='config.store.terminal.fontSize + "px"',
                [style.background-color]='(config.store.terminal.background == "theme") ? null : config.store.terminal.colorScheme.background',
                [style.color]='config.store.terminal.colorScheme.foreground',
                [style.font-feature-settings]='\'"liga" \' + config.store.terminal.ligatures ? 1 : 0',
                [style.font-variant-ligatures]='config.store.terminal.ligatures ? "initial" : "none"',
            )
                div
                    span([style.background-color]='config.store.terminal.colorScheme.colors[0]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[1]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[2]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[3]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[4]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[5]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[6]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[7]')  
                    span   
                    span([style.color]='config.store.terminal.colorScheme.colors[0]') B
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[1]') R
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[2]') G
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[3]') Y
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[4]') B
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[5]') M
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[6]') T
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[7]') W
                div
                    span([style.background-color]='config.store.terminal.colorScheme.colors[8]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[9]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[10]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[11]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[12]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[13]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[14]')  
                    span([style.background-color]='config.store.terminal.colorScheme.colors[15]')  
                    span   
                    span([style.color]='config.store.terminal.colorScheme.colors[8]') B
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[9]') R
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[10]') G
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[11]') Y
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[12]') B
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[13]') M
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[14]') T
                    span  
                    span([style.color]='config.store.terminal.colorScheme.colors[15]') W
                div
                    span  
                div
                    span john@doe-pc
                    span([style.color]='config.store.terminal.colorScheme.colors[1]') $
                    span  ls -l
                div
                    span drwxr-xr-x  1 root 
                    span([style.color]='config.store.terminal.colorScheme.colors[4]') directory
                div
                    span -rw-r--r--  1 root file
                div
                    span -rwxr-xr-x  1 root
                    span([style.color]='config.store.terminal.colorScheme.colors[2]')  executable
                div
                    span -rwxr-xr-x  1 root
                    span([style.color]='config.store.terminal.colorScheme.colors[6]')  sym
                    span  ->
                    span([style.color]='config.store.terminal.colorScheme.colors[1]')  link
                div
                    span  
                div
                    span john@doe-pc
                    span([style.color]='config.store.terminal.colorScheme.colors[1]') $
                    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

.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

    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-line
    .header
        .title Terminal bell
    .btn-group(
        [(ngModel)]='config.store.terminal.bell',
        (ngModelChange)='config.save()',
        ngbRadioGroup
    )
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"off"'
            )
            | Off
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"visual"'
            )
            | Visual
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='"audible"'
            )
            | Audible

.form-line
    .header
        .title Right click
    .btn-group(
        [(ngModel)]='config.store.terminal.rightClick',
        (ngModelChange)='config.save()',
        ngbRadioGroup
    )
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                value='menu'
            )
            | Context menu
        label.btn.btn-secondary(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                value='paste'
            )
            | Paste
            
.form-line
    .header
        .title Auto-open a terminal on app start
            
    toggle(
        [(ngModel)]='config.store.terminal.autoOpen',
        (ngModelChange)='config.save()',
    )

.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()',
    )

.form-line
    .header
        .title Copy on select
    toggle(
        [(ngModel)]='config.store.terminal.copyOnSelect',
        (ngModelChange)='config.save()',
    )
    
.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()',
    )