Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature request: Add the option borderBackgroundColor #94

Open
ThornDuke opened this issue Jun 18, 2024 · 3 comments · May be fixed by #100
Open

Feature request: Add the option borderBackgroundColor #94

ThornDuke opened this issue Jun 18, 2024 · 3 comments · May be fixed by #100
Assignees
@Caesarovich
Labels
enhancement

Comments

@ThornDuke
Copy link

ThornDuke commented Jun 18, 2024 •
edited
Loading

HI.
In some applications you feel the lack of the borderBackgroundColor option, which changes the background color of the box perimeter.
Here I report the diff of the index.js file that adds that option. I did some testing and it seems to work.

diff --git a/index.js b/index.js
index ca00b36..9e6bae8 100644
--- a/index.js
+++ b/index.js
@@ -210,8 +210,11 @@ const makeContentText = (text, { padding, width, textAlignment, height }) => {
 
 const boxContent = (content, contentWidth, options) => {
   const colorizeBorder = (border) => {
-    const newBorder = options.borderColor ? getColorFn(options.borderColor)(border) : border;
-    return options.dimBorder ? chalk.dim(newBorder) : newBorder;
+    const coloredBorder = options.borderColor ? getColorFn(options.borderColor)(border) : border;
+    const bgColoredBorder = options.borderBackgroundColor
+      ? getBGColorFn(options.borderBackgroundColor)(coloredBorder)
+      : coloredBorder;
+    return options.dimBorder ? chalk.dim(bgColoredBorder) : bgColoredBorder;
   };
 
   const colorizeContent = (content) =>
@@ -243,14 +246,15 @@ const boxContent = (content, contentWidth, options) => {
 
   if (options.borderStyle !== NONE || options.title) {
     result +=
+      marginLeft +
       colorizeBorder(
-        marginLeft +
-          chars.topLeft +
+        chars.topLeft +
           (options.title
             ? makeTitle(options.title, chars.top.repeat(contentWidth), options.titleAlignment)
             : chars.top.repeat(contentWidth)) +
           chars.topRight
-      ) + NEWLINE;
+      ) +
+      NEWLINE;
   }
 
   const lines = content.split(NEWLINE);
@@ -268,9 +272,8 @@ const boxContent = (content, contentWidth, options) => {
   if (options.borderStyle !== NONE) {
     result +=
       NEWLINE +
-      colorizeBorder(
-        marginLeft + chars.bottomLeft + chars.bottom.repeat(contentWidth) + chars.bottomRight
-      );
+      marginLeft +
+      colorizeBorder(chars.bottomLeft + chars.bottom.repeat(contentWidth) + chars.bottomRight);
   }
 
   if (options.margin.bottom) {

A small test to make clearer the usefulness of the new option.

console.log(
  boxen("griffin", {
    backgroundColor: "black",
    borderStyle: "single",
    padding: 1,
    margin: 1,
  })
);

console.log(
  boxen("griffin", {
    backgroundColor: "black",
    borderBackgroundColor: "black", // <--- the new option
    borderStyle: "single",
    padding: 1,
    margin: 1,
  })
);
Screenshot 2024-06-18 alle 17 24 39 
console.log(
  boxen(`great ${chalk.yellow("griffins")}
flying all around
the ${chalk.red("whole world")}`,
    {
      title: "GRIFFINS",
      titleAlignment: "center",
      backgroundColor: "black",
      borderBackgroundColor: "black", // <---
      borderStyle: "single",
      padding: 1,
      margin: 1,
    }
  )
);
Screenshot 2024-06-19 alle 12 03 15

Consider making these changes in your code.
@ThornDuke ThornDuke changed the title New feature request: Add the option borderBackgroundColor. New feature request: Add the option borderBackgroundColor Jun 18, 2024
@ThornDuke ThornDuke changed the title New feature request: Add the option borderBackgroundColor Feature request: Add the option borderBackgroundColor Jun 19, 2024
@ThornDuke
Copy link
Author

I dedicated time and work to opening this issue and in two weeks I haven't received a single response.

I see that other issues (even recently, for example issue #95) have had a response and a solution within a few hours of opening.

If I will not have a response within 24 hours I will delete this issue.

@Caesarovich
Copy link
Collaborator

Hi @ThornDuke, thanks for your issue. I apologize for not responding to your messages faster, I did not see the notification.

I approve the addition of this feature. Do you wish to make the changes yourself and open a PR ? If you don't have the time I'll take care to implement this functionnality.

@ThornDuke
Copy link
Author

Hello @Caesarovich . I thank you for the answer.

I'm happy that you like the feature I proposed, and I'd like to follow its development by opening a PR.

Unfortunately, however, I do not have the time to do so, so I am regretfully forced to refuse your kind proposal.

However, I will be happy to see my proposal implemented by anyone who has the opportunity to do so.

@Caesarovich Caesarovich self-assigned this Jul 16, 2024
@Caesarovich Caesarovich linked a pull request Jul 16, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Caesarovich Caesarovich

Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add borderBackgroundColor option Caesarovich/boxen
2 participants
@Caesarovich @ThornDuke