From b6b8b8ad5a5c2eada2117f804cf521fed84966b2 Mon Sep 17 00:00:00 2001 From: Peter Perron Date: Thu, 19 Jan 2017 19:32:22 -0500 Subject: [PATCH 1/2] Start script --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 710b260..b4b44b2 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "eslint-plugin-jsx-a11y": "^2.2.3", "eslint-plugin-react": "^6.5.0" }, - "scripts": { + "scripts": { + "start": "node .", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { From e07f1794d68c42c89a396207b9416eda782f7fa0 Mon Sep 17 00:00:00 2001 From: Peter Perron Date: Thu, 19 Jan 2017 23:16:50 -0500 Subject: [PATCH 2/2] Added basic color support for restricted tty. --- package.json | 7 ++-- themes.js | 47 ++++++++++++++++++++++++ userInterface.js | 94 ++++++++++++++++++++++++++++-------------------- 3 files changed, 106 insertions(+), 42 deletions(-) create mode 100644 themes.js diff --git a/package.json b/package.json index b4b44b2..9d6c2d8 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,10 @@ "description": "A terminal client for slack", "main": "main.js", "dependencies": { - "ws": "^0.7.1", + "blessed": "^0.1.56", "request": "^2.55.0", - "blessed": "^0.1.56" + "supports-color": "^3.2.3", + "ws": "^0.7.1" }, "devDependencies": { "eslint": "^3.9.1", @@ -15,7 +16,7 @@ "eslint-plugin-jsx-a11y": "^2.2.3", "eslint-plugin-react": "^6.5.0" }, - "scripts": { + "scripts": { "start": "node .", "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/themes.js b/themes.js new file mode 100644 index 0000000..27e3a74 --- /dev/null +++ b/themes.js @@ -0,0 +1,47 @@ + + +module.exports = { + + default: { + name: "Default color theme", + level: 3, // 16 milion colors + palette: { + fg: '#bbb', + bg: '#1d1f21', + boxBorderFG: '#888', + searchFG: '#cc6666', + listSelectedItemFG: '#c5c8c6', + listSelectedItemBG: '#373b41', + focusBorder: '#cc6666' + } + }, + + tty16Default: { + name: "TTY 16-color theme", + level: 1, // 16 colors + palette: { + fg: 'white', + bg: 'black', + boxBorderFG: 'white', + searchFG: 'cyan', + listSelectedItemFG: 'yellow', + listSelectedItemBG: 'black', + focusBorder: 'red' + } + }, + + tty1Default: { + name: "TTY no color theme", + level: 0, // 1 color + palette: { + fg: 'white', + bg: 'black', + boxBorderFG: 'white', + searchFG: 'white', + listSelectedItemFG: 'white', + listSelectedItemBG: 'black', + focusBorder: 'white' + } + } +}; + diff --git a/userInterface.js b/userInterface.js index e2a4cff..360d7d7 100644 --- a/userInterface.js +++ b/userInterface.js @@ -1,5 +1,21 @@ var blessed = require('blessed'); +var colorPal = require('./themes.js'); +var supportsColor = require('supports-color'); +// Colors +var colorSupportLevel = supportsColor ? supportsColor.level : 0; +var defaultThemesByColorLevel = { + 3: colorPal.default, + 2: colorPal.default, // Not tested yet + 1: colorPal.tty16Default, + 0: colorPal.tty1Default // Can be "tested" by passing --no-color argument +}; + +var theme = defaultThemesByColorLevel[colorSupportLevel]; +var colors = theme.palette; + + +// UI var keyBindings = {}; module.exports = { @@ -7,21 +23,21 @@ module.exports = { var screen = blessed.screen({ autopadding: true, smartCSR: true, - title: 'Slack', + title: 'Slack' }); var container = blessed.box({ width: '100%', height: '100%', style: { - fg: '#bbb', - bg: '#1d1f21', - }, + fg: colors.fg, + bg: colors.bg + } }); var sideBar = blessed.box({ width: '30%', - height: '100%', + height: '100%' }); var mainWindow = blessed.box({ @@ -30,18 +46,18 @@ module.exports = { left: '30%', // scrollable: true, border: { - type: 'line', + type: 'line' }, style: { border: { - fg: '#888', - }, - }, + fg: colors.boxBorderFG + } + } }); var mainWindowTitle = blessed.text({ width: '90%', - tags: true, + tags: true }); var chatWindow = blessed.box({ @@ -53,7 +69,7 @@ module.exports = { vi: true, scrollable: true, alwaysScroll: true, - tags: true, + tags: true }); var messageInput = blessed.textbox({ @@ -64,8 +80,8 @@ module.exports = { vi: true, inputOnFocus: true, border: { - type: 'line', - }, + type: 'line' + } }); function searchChannels(searchCallback) { @@ -74,7 +90,7 @@ module.exports = { left: '5%', align: 'left', content: '{bold}Search{/bold}', - tags: true, + tags: true }); var searchBox = blessed.textbox({ width: '90%', @@ -85,9 +101,9 @@ module.exports = { vi: true, inputOnFocus: true, border: { - fg: '#cc6666', - type: 'line', - }, + fg: colors.searchFG, + type: 'line' + } }); function removeSearchBox() { mainWindow.remove(searchBox); @@ -124,13 +140,13 @@ module.exports = { width: '100%', height: '60%', border: { - type: 'line', + type: 'line' }, style: { border: { - fg: '#888', - }, - }, + fg: colors.boxBorderFG + } + } }); var channelsTitle = blessed.text({ @@ -138,7 +154,7 @@ module.exports = { left: '5%', align: 'center', content: '{bold}Channels{/bold}', - tags: true, + tags: true }); var channelList = blessed.list({ @@ -151,11 +167,11 @@ module.exports = { search: searchChannels, style: { selected: { - bg: '#373b41', - fg: '#c5c8c6', - }, + bg: colors.listSelectedItemBG, + fg: colors.listSelectedItemFG + } }, - tags: true, + tags: true }); var usersBox = blessed.box({ @@ -163,13 +179,13 @@ module.exports = { height: '40%', top: '60%', border: { - type: 'line', + type: 'line' }, style: { border: { - fg: '#888', - }, - }, + fg: colors.boxBorderFG + } + } }); var usersTitle = blessed.text({ @@ -177,7 +193,7 @@ module.exports = { left: '5%', align: 'center', content: '{bold}Users{/bold}', - tags: true, + tags: true }); var userList = blessed.list({ @@ -190,11 +206,11 @@ module.exports = { search: searchChannels, style: { selected: { - bg: '#373b41', - fg: '#c5c8c6', - }, + bg: colors.listSelectedItemBG, + fg: colors.listSelectedItemFG + } }, - tags: true, + tags: true }); channelsBox.append(channelsTitle); @@ -249,11 +265,11 @@ module.exports = { // event handlers for focus and blur of inputs var onFocus = function (component) { - component.style.border = { fg: '#cc6666' }; // eslint-disable-line no-param-reassign + component.style.border = { fg: colors.focusBorder }; // eslint-disable-line no-param-reassign screen.render(); }; var onBlur = function (component) { - component.style.border = { fg: '#888' }; // eslint-disable-line no-param-reassign + component.style.border = { fg: colors.boxBorderFG }; // eslint-disable-line no-param-reassign screen.render(); }; userList.on('focus', onFocus.bind(null, usersBox)); @@ -276,7 +292,7 @@ module.exports = { mainWindow: mainWindow, mainWindowTitle: mainWindowTitle, chatWindow: chatWindow, - messageInput: messageInput, + messageInput: messageInput }; - }, + } };