shell icons

This commit is contained in:
Eugene Pankov 2019-05-17 23:48:59 +02:00
parent b54d99ff3d
commit 60e095fbc7
26 changed files with 80 additions and 16 deletions

View File

@ -44,11 +44,13 @@ title-bar(
ngbDropdownToggle,
)
div(*ngIf='button.submenu', ngbDropdownMenu)
button.dropdown-item(
button.dropdown-item.d-flex.align-items-center(
*ngFor='let item of button.submenuItems',
(click)='item.click()',
ngbDropdownItem,
) {{item.title}}
)
.icon-wrapper([innerHTML]='item.icon')
.ml-3 {{item.title}}
.drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
@ -65,11 +67,13 @@ title-bar(
ngbDropdownToggle,
)
div(*ngIf='button.submenu', ngbDropdownMenu)
button.dropdown-item(
button.dropdown-item.d-flex.align-items-center(
*ngFor='let item of button.submenuItems',
(click)='item.click()',
ngbDropdownItem,
) {{item.title}}
)
.icon-wrapper([innerHTML]='item.icon')
.ml-3 {{item.title}}
button.btn.btn-secondary.btn-tab-bar.btn-update(
*ngIf='updatesAvailable',

View File

@ -88,12 +88,20 @@ hotkey-hint {
max-width: 300px;
}
::ng-deep .btn-tab-bar svg {
::ng-deep .btn-tab-bar svg,
::ng-deep .btn-tab-bar + .dropdown-menu svg {
width: 16px;
height: 16px;
fill: white;
fill-opacity: 0.75;
}
.icon-wrapper {
display: flex;
width: 16px;
height: 17px;
}
::ng-deep .btn-update svg {
fill: cyan;
}

View File

@ -1,3 +1,4 @@
import { SafeHtml } from '@angular/platform-browser'
import { BaseTerminalTabComponent } from './components/baseTerminalTab.component'
/**
@ -36,6 +37,7 @@ export interface Profile {
name: string,
sessionOptions: SessionOptions,
isBuiltin?: boolean
icon?: SafeHtml
}
export interface ITerminalColorScheme {
@ -74,6 +76,13 @@ export interface IShell {
* Currently used for WSL only
*/
fsBase?: string
/**
* SVG icon
*/
icon?: SafeHtml
hidden?: boolean
}
/**

View File

@ -46,7 +46,7 @@ export class ButtonProvider extends ToolbarButtonProvider {
submenu: async () => {
let profiles = await this.terminal.getProfiles()
return profiles.map(profile => ({
icon: null,
icon: profile.icon,
title: profile.name,
click: () => this.terminal.openTab(profile),
}))

View File

@ -11,7 +11,7 @@ h3.mb-3 Shell
)
option(
*ngFor='let profile of profiles',
[ngValue]='slug(profile.name)'
[ngValue]='slug(profile.name).toLowerCase()'
) {{profile.name}}

View File

@ -47,7 +47,7 @@ export class ShellSettingsTabComponent {
}
async reload () {
this.profiles = await this.terminalService.getProfiles()
this.profiles = await this.terminalService.getProfiles(true)
}
pickWorkingDirectory () {

View File

@ -74,7 +74,7 @@ export class TerminalHotkeyProvider extends HotkeyProvider {
return [
...this.hotkeys,
...profiles.map(profile => ({
id: `profile.${slug(profile.name)}`,
id: `profile.${slug(profile.name).toLowerCase()}`,
name: `New tab: ${profile.name}`
})),
]

View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="windows" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-windows fa-w-14 fa-2x"><path fill="cyan" d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z" class="" stroke="none" stroke-width="1px"></path></svg>

After

Width:  |  Height:  |  Size: 410 B

View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="windows" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-windows fa-w-14 fa-2x"><path fill="#ffffff" d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z" class="" stroke="none" stroke-width="1px"></path></svg>

After

Width:  |  Height:  |  Size: 412 B

View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lambda" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-lambda fa-w-14 fa-2x"><path fill="cyan" d="M424 384h-43.5L197.6 48.68A32.018 32.018 0 0 0 169.5 32H24C10.75 32 0 42.74 0 56v48c0 13.25 10.75 24 24 24h107.5l4.63 8.49L3.25 446.55C-3.53 462.38 8.08 480 25.31 480h52.23c9.6 0 18.28-5.72 22.06-14.55l95.02-221.72L314.4 463.32A32.018 32.018 0 0 0 342.5 480H424c13.25 0 24-10.75 24-24v-48c0-13.26-10.75-24-24-24z" class="" stroke="none" stroke-width="1px"></path></svg>

After

Width:  |  Height:  |  Size: 585 B

View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lambda" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-lambda fa-w-14 fa-2x"><path fill="#8ab91d" d="M424 384h-43.5L197.6 48.68A32.018 32.018 0 0 0 169.5 32H24C10.75 32 0 42.74 0 56v48c0 13.25 10.75 24 24 24h107.5l4.63 8.49L3.25 446.55C-3.53 462.38 8.08 480 25.31 480h52.23c9.6 0 18.28-5.72 22.06-14.55l95.02-221.72L314.4 463.32A32.018 32.018 0 0 0 342.5 480H424c13.25 0 24-10.75 24-24v-48c0-13.26-10.75-24-24-24z" class="" stroke="none" stroke-width="1px"></path></svg>

After

Width:  |  Height:  |  Size: 588 B

View File

@ -0,0 +1,6 @@
<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<g stroke-linejoin='round' stroke-width='4'>
<path d='M94,19l-28-9h-39c-9,0-19,9-19,19v47c0,9,10,19,19,19h39l28-10l-28-9h-26c-9,0-13-3-13-13v-22c0-10,4-13,13-13h26z' fill='#eee' />
<path d='M94,52l-41-11h-13v3c10,0,10,16,0,16v3h13z' fill='lime'/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 322 B

View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="git-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-git-alt fa-w-14 fa-3x"><path fill="#f05033" d="M439.55 236.05L244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z" class="" stroke="none" stroke-width="1px"></path></svg>

After

Width:  |  Height:  |  Size: 736 B

View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="terminal" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-terminal fa-w-20 fa-2x"><path fill="purple" d="M257.981 272.971L63.638 467.314c-9.373 9.373-24.569 9.373-33.941 0L7.029 444.647c-9.357-9.357-9.375-24.522-.04-33.901L161.011 256 6.99 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L257.981 239.03c9.373 9.372 9.373 24.568 0 33.941zM640 456v-32c0-13.255-10.745-24-24-24H312c-13.255 0-24 10.745-24 24v32c0 13.255 10.745 24 24 24h304c13.255 0 24-10.745 24-24z" class="" stroke="none" stroke-width="1px"></path></svg>

After

Width:  |  Height:  |  Size: 680 B

View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="terminal" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-terminal fa-w-20 fa-2x"><path fill="cyan" d="M257.981 272.971L63.638 467.314c-9.373 9.373-24.569 9.373-33.941 0L7.029 444.647c-9.357-9.357-9.375-24.522-.04-33.901L161.011 256 6.99 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L257.981 239.03c9.373 9.372 9.373 24.568 0 33.941zM640 456v-32c0-13.255-10.745-24-24-24H312c-13.255 0-24 10.745-24 24v32c0 13.255 10.745 24 24 24h304c13.255 0 24-10.745 24-24z" class="" stroke="none" stroke-width="1px"></path></svg>

After

Width:  |  Height:  |  Size: 678 B

View File

@ -75,13 +75,13 @@ import { hterm } from './frontends/hterm'
{ provide: ShellProvider, useClass: MacOSDefaultShellProvider, multi: true },
{ provide: ShellProvider, useClass: LinuxDefaultShellProvider, multi: true },
{ provide: ShellProvider, useClass: WindowsStockShellsProvider, multi: true },
{ provide: ShellProvider, useClass: PowerShellCoreShellProvider, multi: true },
{ provide: ShellProvider, useClass: CmderShellProvider, multi: true },
{ provide: ShellProvider, useClass: CustomShellProvider, multi: true },
{ provide: ShellProvider, useClass: Cygwin32ShellProvider, multi: true },
{ provide: ShellProvider, useClass: Cygwin64ShellProvider, multi: true },
{ provide: ShellProvider, useClass: GitBashShellProvider, multi: true },
{ provide: ShellProvider, useClass: POSIXShellsProvider, multi: true },
{ provide: ShellProvider, useClass: PowerShellCoreShellProvider, multi: true },
{ provide: ShellProvider, useClass: WSLShellProvider, multi: true },
{ provide: TerminalContextMenuItemProvider, useClass: NewTabContextMenu, multi: true },
@ -163,7 +163,7 @@ export default class TerminalModule {
}
if (hotkey.startsWith('profile.')) {
let profiles = await config.store.terminal.getProfiles()
let profile = profiles.find(x => slug(x.name) === hotkey.split('.')[1])
let profile = profiles.find(x => slug(x.name).toLowerCase() === hotkey.split('.')[1])
if (profile) {
terminal.openTabWithOptions(profile.sessionOptions)
}

View File

@ -38,12 +38,13 @@ export class TerminalService {
return shellLists.reduce((a, b) => a.concat(b), [])
}
async getProfiles (): Promise<Profile[]> {
async getProfiles (includeHidden?: boolean): Promise<Profile[]> {
let shells = await this.shells$.toPromise()
return [
...this.config.store.terminal.profiles,
...shells.map(shell => ({
...shells.filter(x => includeHidden || !x.hidden).map(shell => ({
name: shell.name,
icon: shell.icon,
sessionOptions: this.optionsFromShell(shell),
isBuiltin: true
}))
@ -65,7 +66,7 @@ export class TerminalService {
async openTab (profile?: Profile, cwd?: string, pause?: boolean): Promise<TerminalTabComponent> {
if (!profile) {
let profiles = await this.getProfiles()
profile = profiles.find(x => slug(x.name) === this.config.store.terminal.profile) || profiles[0]
profile = profiles.find(x => slug(x.name).toLowerCase() === this.config.store.terminal.profile) || profiles[0]
}
cwd = cwd || profile.sessionOptions.cwd

View File

@ -1,5 +1,6 @@
import * as path from 'path'
import { Injectable } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'
import { HostAppService, Platform } from 'terminus-core'
import { ShellProvider, IShell } from '../api'
@ -8,6 +9,7 @@ import { ShellProvider, IShell } from '../api'
@Injectable()
export class CmderShellProvider extends ShellProvider {
constructor (
private domSanitizer: DomSanitizer,
private hostApp: HostAppService,
) {
super()
@ -31,6 +33,7 @@ export class CmderShellProvider extends ShellProvider {
'/k',
path.join(process.env.CMDER_ROOT, 'vendor', 'init.bat'),
],
icon: this.domSanitizer.bypassSecurityTrustHtml(require('../icons/cmder.svg')),
env: {
TERM: 'cygwin',
}
@ -48,6 +51,7 @@ export class CmderShellProvider extends ShellProvider {
'-command',
`Invoke-Expression '. ''${path.join(process.env.CMDER_ROOT, 'vendor', 'profile.ps1')}'''`
],
icon: this.domSanitizer.bypassSecurityTrustHtml(require('../icons/cmder-powershell.svg')),
env: {},
},
]

View File

@ -1,5 +1,6 @@
import * as path from 'path'
import { Injectable } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'
import { HostAppService, Platform } from 'terminus-core'
import { ShellProvider, IShell } from '../api'
@ -12,6 +13,7 @@ try {
@Injectable()
export class Cygwin32ShellProvider extends ShellProvider {
constructor (
private domSanitizer: DomSanitizer,
private hostApp: HostAppService,
) {
super()
@ -32,6 +34,7 @@ export class Cygwin32ShellProvider extends ShellProvider {
id: 'cygwin32',
name: 'Cygwin (32 bit)',
command: path.join(cygwinPath, 'bin', 'bash.exe'),
icon: this.domSanitizer.bypassSecurityTrustHtml(require('../icons/cygwin.svg')),
env: {
TERM: 'cygwin',
}

View File

@ -1,5 +1,6 @@
import * as path from 'path'
import { Injectable } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'
import { HostAppService, Platform } from 'terminus-core'
import { ShellProvider, IShell } from '../api'
@ -12,6 +13,7 @@ try {
@Injectable()
export class Cygwin64ShellProvider extends ShellProvider {
constructor (
private domSanitizer: DomSanitizer,
private hostApp: HostAppService,
) {
super()
@ -32,6 +34,7 @@ export class Cygwin64ShellProvider extends ShellProvider {
id: 'cygwin64',
name: 'Cygwin',
command: path.join(cygwinPath, 'bin', 'bash.exe'),
icon: this.domSanitizer.bypassSecurityTrustHtml(require('../icons/cygwin.svg')),
env: {
TERM: 'cygwin',
}

View File

@ -1,5 +1,6 @@
import * as path from 'path'
import { Injectable } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'
import { HostAppService, Platform } from 'terminus-core'
import { ShellProvider, IShell } from '../api'
@ -12,6 +13,7 @@ try {
@Injectable()
export class GitBashShellProvider extends ShellProvider {
constructor (
private domSanitizer: DomSanitizer,
private hostApp: HostAppService,
) {
super()
@ -37,6 +39,7 @@ export class GitBashShellProvider extends ShellProvider {
name: 'Git-Bash',
command: path.join(gitBashPath, 'bin', 'bash.exe'),
args: [ '--login', '-i' ],
icon: this.domSanitizer.bypassSecurityTrustHtml(require('../icons/git-bash.svg')),
env: {
TERM: 'cygwin',
}

View File

@ -37,6 +37,7 @@ export class LinuxDefaultShellProvider extends ShellProvider {
name: 'User default',
command: line.split(':')[6],
args: ['--login'],
hidden: true,
env: {},
}]
}

View File

@ -23,6 +23,7 @@ export class MacOSDefaultShellProvider extends ShellProvider {
name: 'User default',
command: shellEntry.split(' ')[1].trim(),
args: ['--login'],
hidden: true,
env: {},
}]
}

View File

@ -1,4 +1,5 @@
import { Injectable } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'
import { HostAppService, Platform } from 'terminus-core'
import { ShellProvider, IShell } from '../api'
@ -10,6 +11,7 @@ try {
@Injectable()
export class PowerShellCoreShellProvider extends ShellProvider {
constructor (
private domSanitizer: DomSanitizer,
private hostApp: HostAppService,
) {
super()
@ -31,6 +33,7 @@ export class PowerShellCoreShellProvider extends ShellProvider {
name: 'PowerShell Core',
command: pwshPath,
args: ['-nologo'],
icon: this.domSanitizer.bypassSecurityTrustHtml(require('../icons/powershell-core.svg')),
env: {
TERM: 'cygwin',
}

View File

@ -39,7 +39,8 @@ export class WindowsDefaultShellProvider extends ShellProvider {
return [{
...shell,
id: 'default',
name: 'User default',
name: `Default (${shell.name})`,
hidden: true,
env: {},
}]
}

View File

@ -1,5 +1,6 @@
import * as path from 'path'
import { Injectable } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'
import { HostAppService, Platform, ElectronService } from 'terminus-core'
import { ShellProvider, IShell } from '../api'
@ -8,6 +9,7 @@ import { ShellProvider, IShell } from '../api'
@Injectable()
export class WindowsStockShellsProvider extends ShellProvider {
constructor (
private domSanitizer: DomSanitizer,
private hostApp: HostAppService,
private electron: ElectronService,
) {
@ -35,13 +37,21 @@ export class WindowsStockShellsProvider extends ShellProvider {
'inject',
],
env: {},
icon: this.domSanitizer.bypassSecurityTrustHtml(require('../icons/clink.svg')),
},
{
id: 'cmd',
name: 'CMD (stock)',
command: 'cmd.exe',
env: {},
icon: this.domSanitizer.bypassSecurityTrustHtml(require('../icons/cmd.svg')),
},
{ id: 'cmd', name: 'CMD (stock)', command: 'cmd.exe', env: {} },
{
id: 'powershell',
name: 'PowerShell',
command: 'powershell.exe',
args: ['-nologo'],
icon: this.domSanitizer.bypassSecurityTrustHtml(require('../icons/powershell.svg')),
env: {
TERM: 'cygwin',
}