Added support for 16-color and 1-color tty #29
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' | ||
| } | ||
| } | ||
| }; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,43 @@ | ||
| 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; | ||
|
There was a problem hiding this comment. Can the above (L6 - L15) be pulled into another module to import? Also, I think it would be clearer to use the There was a problem hiding this comment.
There was a problem hiding this comment. I think that if the logic for choosing the color level were in its own module, the module should be able to just return the theme object. That way we don't have to deal with importing/choosing themes here (i.e. the module would just export what the If you prefer to use constants, I think that's okay. I also think it would work to just use the independent flags right now similar to the first usage example they have on https://www.npmjs.com/package/supports-color. If people wanted to create themes, you would have to check what color level the terminal supports anyway. |
||
|
|
||
|
|
||
| // UI | ||
| var keyBindings = {}; | ||
|
|
||
| module.exports = { | ||
| init: function () { | ||
| var screen = blessed.screen({ | ||
| autopadding: true, | ||
| smartCSR: true, | ||
| title: 'Slack' | ||
| }); | ||
|
|
||
| var container = blessed.box({ | ||
| width: '100%', | ||
| height: '100%', | ||
| style: { | ||
| fg: colors.fg, | ||
| bg: colors.bg | ||
| } | ||
| }); | ||
|
|
||
| var sideBar = blessed.box({ | ||
| width: '30%', | ||
| height: '100%' | ||
| }); | ||
|
|
||
| var mainWindow = blessed.box({ | ||
|
|
@@ -30,18 +46,18 @@ module.exports = { | |
| left: '30%', | ||
| // scrollable: true, | ||
| border: { | ||
| type: 'line' | ||
| }, | ||
| style: { | ||
| border: { | ||
| fg: colors.boxBorderFG | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| var mainWindowTitle = blessed.text({ | ||
| width: '90%', | ||
| tags: true | ||
| }); | ||
|
|
||
| var chatWindow = blessed.box({ | ||
|
|
@@ -53,7 +69,7 @@ module.exports = { | |
| vi: true, | ||
| scrollable: true, | ||
| alwaysScroll: true, | ||
| tags: true | ||
| }); | ||
|
|
||
| var messageInput = blessed.textbox({ | ||
|
|
@@ -64,8 +80,8 @@ module.exports = { | |
| vi: true, | ||
| inputOnFocus: true, | ||
| border: { | ||
| type: 'line' | ||
| } | ||
| }); | ||
|
|
||
| function searchChannels(searchCallback) { | ||
|
|
@@ -74,7 +90,7 @@ module.exports = { | |
| left: '5%', | ||
| align: 'left', | ||
| content: '{bold}Search{/bold}', | ||
| tags: true | ||
| }); | ||
| var searchBox = blessed.textbox({ | ||
| width: '90%', | ||
|
|
@@ -85,9 +101,9 @@ module.exports = { | |
| vi: true, | ||
| inputOnFocus: true, | ||
| border: { | ||
| fg: colors.searchFG, | ||
| type: 'line' | ||
| } | ||
| }); | ||
| function removeSearchBox() { | ||
| mainWindow.remove(searchBox); | ||
|
|
@@ -124,21 +140,21 @@ module.exports = { | |
| width: '100%', | ||
| height: '60%', | ||
| border: { | ||
| type: 'line' | ||
| }, | ||
| style: { | ||
| border: { | ||
| fg: colors.boxBorderFG | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| var channelsTitle = blessed.text({ | ||
| width: '90%', | ||
| left: '5%', | ||
| align: 'center', | ||
| content: '{bold}Channels{/bold}', | ||
| tags: true | ||
| }); | ||
|
|
||
| var channelList = blessed.list({ | ||
|
|
@@ -151,33 +167,33 @@ module.exports = { | |
| search: searchChannels, | ||
| style: { | ||
| selected: { | ||
| bg: colors.listSelectedItemBG, | ||
| fg: colors.listSelectedItemFG | ||
| } | ||
| }, | ||
| tags: true | ||
| }); | ||
|
|
||
| var usersBox = blessed.box({ | ||
| width: '100%', | ||
| height: '40%', | ||
| top: '60%', | ||
| border: { | ||
| type: 'line' | ||
| }, | ||
| style: { | ||
| border: { | ||
| fg: colors.boxBorderFG | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| var usersTitle = blessed.text({ | ||
| width: '90%', | ||
| left: '5%', | ||
| align: 'center', | ||
| content: '{bold}Users{/bold}', | ||
| tags: true | ||
| }); | ||
|
|
||
| var userList = blessed.list({ | ||
|
|
@@ -190,11 +206,11 @@ module.exports = { | |
| search: searchChannels, | ||
| style: { | ||
| selected: { | ||
| bg: colors.listSelectedItemBG, | ||
| fg: colors.listSelectedItemFG | ||
| } | ||
| }, | ||
| 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: colors.focusBorder }; // eslint-disable-line no-param-reassign | ||
| screen.render(); | ||
| }; | ||
| var onBlur = function (component) { | ||
| 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 | ||
| }; | ||
| } | ||
| }; | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's a typo in
milionhereThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, I'll fix that!