diff --git a/app/config-default.js b/app/config-default.js index 322605e7..65f54ae4 100644 --- a/app/config-default.js +++ b/app/config-default.js @@ -64,7 +64,7 @@ module.exports = { // the shell to run when spawning a new session (i.e. /usr/local/bin/fish) // if left empty, your system's login shell will be used by default // make sure to use a full path if the binary name doesn't work - // (e.g `C:\\Windows\\System32\\bash.exe` instad of just `bash.exe`) + // (e.g `C:\\Windows\\System32\\bash.exe` instead of just `bash.exe`) // if you're using powershell, make sure to remove the `--login` below shell: '', diff --git a/lib/components/tab.js b/lib/components/tab.js index 7d3ef5d2..fa318c0e 100644 --- a/lib/components/tab.js +++ b/lib/components/tab.js @@ -67,7 +67,10 @@ export default class Tab extends Component { )} onClick={this.handleClick} > - + { this.props.text } @@ -143,7 +146,11 @@ export default class Tab extends Component { right: 0, top: 0, bottom: 0, - textAlign: 'center' + textAlign: 'center', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + padding: '0 25px', + overflow: 'hidden' }, icon: { diff --git a/lib/components/term.js b/lib/components/term.js index 2fc25fe2..fb754cfc 100644 --- a/lib/components/term.js +++ b/lib/components/term.js @@ -246,6 +246,11 @@ export default class Term extends Component { background: ${this.props.borderColor}; } `; + const selectCss = ` + ::selection { + background: ${Color(this.props.cursorColor).alpha(0.4).rgbString()}; + } + `; return URL.createObjectURL(new Blob([` .cursor-node[focus="false"] { border-width: 1px !important; @@ -255,6 +260,7 @@ export default class Term extends Component { } ${hyperCaret} ${scrollBarCss} + ${selectCss} ${css} `], {type: 'text/css'})); } diff --git a/package.json b/package.json index 30596344..3a9a6ef1 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,8 @@ "build": "cross-env NODE_ENV=production webpack", "lint": "xo", "test": "npm run lint", + "test:unit": "ava test/unit", + "test:unit:watch": "npm run test:unit -- --watch", "prepush": "npm test", "postinstall": "install-app-deps && npm run rebuild-node-pty", "rebuild-node-pty": "electron-rebuild -f -w app/node_modules/node-pty -m app", diff --git a/test/testUtils/is-hex-color.js b/test/testUtils/is-hex-color.js new file mode 100644 index 00000000..310f7d09 --- /dev/null +++ b/test/testUtils/is-hex-color.js @@ -0,0 +1,5 @@ +function isHexColor(color) { + return /(^#[0-9A-F]{6,8}$)|(^#[0-9A-F]{3}$)/i.test(color); // https://regex101.com/ +} + +module.exports.isHexColor = isHexColor; diff --git a/test/unit/to-electron-background-color.test.js b/test/unit/to-electron-background-color.test.js new file mode 100644 index 00000000..a7fe69b9 --- /dev/null +++ b/test/unit/to-electron-background-color.test.js @@ -0,0 +1,52 @@ +import test from 'ava'; +import toElectronBackgroundColor from '../../app/utils/to-electron-background-color'; +import {isHexColor} from '../testUtils/is-hex-color'; + +test('toElectronBackgroundColor', t => { + t.false(false); +}); + +test(`returns a color that's in hex`, t => { + const hexColor = '#BADA55'; + const rgbColor = 'rgb(0,0,0)'; + const rgbaColor = 'rgb(0,0,0, 55)'; + const hslColor = 'hsl(15, 100%, 50%)'; + const hslaColor = 'hsl(15, 100%, 50%, 1)'; + const colorKeyword = 'pink'; + + t.true( + isHexColor( + toElectronBackgroundColor(hexColor) + ) + ); + + t.true( + isHexColor( + toElectronBackgroundColor(rgbColor) + ) + ); + + t.true( + isHexColor( + toElectronBackgroundColor(rgbaColor) + ) + ); + + t.true( + isHexColor( + toElectronBackgroundColor(hslColor) + ) + ); + + t.true( + isHexColor( + toElectronBackgroundColor(hslaColor) + ) + ); + + t.true( + isHexColor( + toElectronBackgroundColor(colorKeyword) + ) + ); +});