5

I am using blessed and I am trying to add a prompt to my application. It works fine, but I can't read its text. I have prepared a minimal example, that illustrates, what I see.

I would like to know how I can style the text in the inputs. The style-Attributes as mentioned in the docs seem to have no effect.

Here's what I see (there is text in the input and on the two buttons, but it is black on black).

enter image description here

Here's code that reproduces the error on Debian 9 with standard terminal and standard theme:

var blessed = require('blessed');
var screen = blessed.screen({});

var prompt = blessed.prompt({
    left: 'center',
    top: 'center',
    height: 'shrink',
    width: 'shrink',
    border: 'line',
});

screen.append(prompt);

screen.key(['q', 'C-c'], function quit() {
    return process.exit(0);
});

screen.render();

prompt.input('Search:', 'test', function() {});
4

2 回答 2

1

我在 Win 10 和 Ubuntu 16 上尝试了这个示例。我对您的代码所做的唯一更改是screen定义已在promt定义之前移动（没有它我得到“无活动屏幕”错误），并且我根据文档添加了样式。我的复制品：

1）npm install blessed在一个空文件夹中运行

2）index.js使用以下代码在该文件夹中创建

var blessed = require('blessed');
var screen = blessed.screen({});

var prompt = blessed.prompt({
  left: 'center',
  top: 'center',
  height: 'shrink',
  width: 'shrink',
  border: 'line',
  style: {
    fg: 'blue',
    bg: 'black',
    bold: true,
    border: {
      fg: 'blue',
      bg: 'red'
    }
  }
});

screen.append(prompt);
screen.key(['q', 'C-c'], function quit() {
  return process.exit(0);
});

screen.render();
prompt.input('Search:', 'test', function() {});

3) 运行node index

4) 得到

在此处输入图像描述

那是你想要的吗？

于 2017-09-28T16:52:56.113 回答
1

免责声明：我对blessed代码库不是很熟悉，所以可能有一种更本地的方式来做这件事。如果没有，那么听起来应该请求/实施此功能。

观察 1 - 您的终端的颜色设置导致问题

根据您提供的屏幕截图，您的终端的默认颜色在白色背景下具有黑色前景。如果您在终端设置中反转它，您应该能够看到预期的行为。

但！无论用户的设置是什么，您的应用程序都应该如此，所以这不是一个好的解决方案......

观察 2 -Prompt构造函数硬编码它是黑色背景的孩子

如有疑问，请前往源头！以下是prompt.js截至 2017 年 9 月 30 日的部分内容：

// ...
function Prompt(options) {
  // ...
  Box.call(this, options);

  this._.input = new Textbox({
    // ...
    bg: 'black'
  });

  this._.okay = new Button({
    // ...
    bg: 'black',
    hoverBg: 'blue',
  });

  this._.cancel = new Button({
    // ...
    bg: 'black',
    hoverBg: 'blue',
  });
}
// ...

因此，似乎解决问题的唯一方法是Prompt在创建后覆盖这些子样式属性。

解决方案 1 - 创建后覆盖子样式属性

创建提示后，您可以覆盖每个孩子的样式。将前景设为白色（应该是）可能是最简单的......

此外，为了可维护性，这个 hack 真的应该在它自己的功能中。

function createBlessedPrompt(options) {
    var prompt = blessed.prompt(options);

    // NOTE - Not sure if blessed has some sortof `children()` selector.
    //        If not, we probably should create one.
    //        Nevertheless, temporarily hardcoding the children here...
    //
    var promptChildren = [prompt._.input, prompt._.okay, prompt._.cancel];

    promptChildren.forEach(x => {
        Object.assign(x.style, {
            fg: 'white',
            bg: 'black'
        });
    });

    return prompt;
}

解决方案 2 - 向祝福存储库提交错误修复

这似乎真的是祝福本身的问题。如果您能想出一种Prompt应该正确处理这种情况的方法，那么您应该完全帮助您的编码人员并编写一个问题/拉取请求来解决这个问题。

祝你好运！

于 2017-09-30T23:58:38.300 回答