webmatze / hyperborder Goto Github PK

After v1.4.0 update the entire background has now become gradient.

Per documentationm, I have the following in my hyper.js

hyperBorder: {
    borderWidth: '2px',
    animate: true
  },

Neither borderWidth nor animate take any effect.

Here is some app information:

Hyper 3.0.2 (stable)

Renderers: WebGL
Plugins: 
  hyper-search (0.4.0),
  hyper-quit (1.0.3),
  hyper-savetext (1.1.2),
  hyper-statusline (1.7.6),
  hypercwd (1.4.0),
  hyper-tabs-enhanced (0.4.2),
  hyper-dnd-tabs (0.0.1),
  hyperborder (1.2.0)

Created by Guillermo Rauch
Copyright © 2019 ZEIT, Inc.

I'm getting horizontal and vertical scrollbars when activating this plugin:

https://cl.ly/0p1n3x1S2H45

Border goes rogue in Hyper 1.2...

hey! this extension is awesome, i'm super excited to use it.

running osx (sierra, 10.12), it looks like the gradient doesn't show up on the tabs at the top.

screenshot of what's happening:
http://imgur.com/fVf50Kb

and here's my .hyperterm.js:

module.exports = {
  config: {
    hyperBorder : {
      borderColors: ['#5BCEFA', '#F5A9B8', '#FFFFFF', '#F5A9B8', '#5BCEFA'],
      borderWidth: '10px'
    },

    fontSize: 16,

    fontFamily: 'Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    cursorColor: 'rgba(248,28,229,0.75)',

    cursorShape: 'BEAM',

    foregroundColor: '#ddd',

    backgroundColor: '#222',

    borderColor: '#222',

    css: '',

    termCSS: '',

    padding: '12px 14px',

    colors: {
      black: '#000000',
      red: '#ff0000',
      green: '#33ff00',
      yellow: '#ffff00',
      blue: '#0066ff',
      magenta: '#cc00ff',
      cyan: '#00ffff',
      white: '#d0d0d0',
      lightBlack: '#808080',
      lightRed: '#ff0000',
      lightGreen: '#33ff00',
      lightYellow: '#ffff00',
      lightBlue: '#0066ff',
      lightMagenta: '#cc00ff',
      lightCyan: '#00ffff',
      lightWhite: '#ffffff'
    },

    shell: '',

    windowSize: [1000, 650]
  },

  plugins: [
    "hypercwd", "hyperborder", "hyperterm-title",
    "hyperterm-tab-icons", "hyperterm-paste"
  ],
  localPlugins: []
};

it's very possible that i'm configuring this wrong and don't know it -- if that's true i'll be pretty happy honestly. couldn't find much with a google, so i figured i'd ask y'all.

thanks!

Cool plugin! I'd love it if there was an easy way to show the border one way when the app has focus, and another way if it didnt.... Is this just css or is there something more that needs to be done?

We need more tests to prevent releases with bugs in the future.

this should include

• at least one test per function
• pull requests should contain tests for new features
• establish better code quality through linting rules

When installing on Windows 10 with the following hyper modules:

By following the instructions in the readme:

• Add to plugins list
• reload hyper
• update plugins
• reload

The reload fails and I meet the following notification:

HyperTerm official icon is top: pink, bottom: yellow.

This border (which is beautiful btw!) is top: yellow, bottom: pink. I was going to submit a PR reversing it but then I saw that in v0.3.1 you reversed it – maybe I am going mad, but after v0.3.1 it is now the opposite of the HyperTerm logo? See https://github.com/zeit/hyperterm/blob/master/static/icon.png

EDIT: I have just seen that on the homepage it is top: yellow, bottom: pink. How strange. Which is correct? When I am using HyperTerm, I see the app icon in the doc, not the website, so I think you should match the app icon?

If I have multiple windows, could we have an option to add the gradient border around the separators and tabs?

Thanks!

I use the i3 manager and use a border to indicate the active window. Unfortunately this plugin overwrites that feature. Would you be interested in a PR around this?

I'm thinking the border should turn black when the window is blurred.

Hi! I'm not sure precisely if this an issue with hyperborder, hyper-transparent, or somewhere in between, but I was curious if I could get some help dealing with it.

I'm using Hyper 2.1.0-canary.2, hyperborder 1.1.1, and hyper-transparent 1.2.2 on macOS Mojave 10.14.

By themselves, each plugin works fine. However, if they are both enabled, hyperborder's colors take over the background and both the vibrancy and transparency effects from hyper-transparent disappear. Ex:

Nothing looked suspect in the developer tools. Please let me know if I can supply any more info to help figure this out :)

Hello!

LOVE Hyperborder. I've finally got plugins working in Hyperterm, so I added a theme and Hyperborder. When I have any theme in addition to Hyperborder, Hyperborder adds a black outline on the terminal:

Could this be solved by making the black an RGBA color? e.g. rgba(0,0,0,0)?

i started using hyper but seems like there's an issue, or im doing something wrong

heres the config:
gist:2f6cb9857b47d1bb27c6f966cf3ca3aa

Thanks so much for fixing hyperborder for hyper 2. It now works fine, but for some reason the corners of the border appear to be cut (see screenshot):

I'm using hyperborder 1.0.1 with hyper 2.0.0 on MacOS 10.13.4

Hi there, I use the new hyper 2.0, the default values work. But none of the configured values are applied.

I printed out the config property from your index.js, it seems like the API changed and the config are no longer available under window.config?!

I work on win10.

hyper.js:

$ cat .hyper.js
module.exports = {
  config: {
    // choose either `'stable'` for receiving highly polished,
    // or `'canary'` for less polished but more frequent updates
    updateChannel: 'stable',

    // default font size in pixels for all tabs
    fontSize: 12,

    // font family with optional fallbacks
    fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

    // default font weight: 'normal' or 'bold'
    fontWeight: 'normal',

    // font weight for bold characters: 'normal' or 'bold'
    fontWeightBold: 'bold',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(248,28,229,0.8)',

    // terminal text color under BLOCK cursor
    cursorAccentColor: '#000',

    // `'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █
    cursorShape: 'BLOCK',

    // set to `true` (without backticks and without quotes) for blinking cursor
    cursorBlink: false,

    // color of the text
    foregroundColor: '#fff',

    // terminal background color
    // opacity is only supported on macOS
    backgroundColor: '#000',

    // terminal selection color
    selectionColor: 'rgba(248,28,229,0.3)',

    // border color (window, tabs)
    borderColor: '#333',

    // custom CSS to embed in the main window
    css: '',

    // custom CSS to embed in the terminal window
    termCSS: '',

    // if you're using a Linux setup which show native menus, set to false
    // default: `true` on Linux, `true` on Windows, ignored on macOS
    showHamburgerMenu: '',

    // set to `false` (without backticks and without quotes) if you want to hide the minimize, maximize and close buttons
    // additionally, set to `'left'` if you want them on the left, like in Ubuntu
    // default: `true` (without backticks and without quotes) on Windows and Linux, ignored on macOS
    showWindowControls: '',

    // custom padding (CSS format, i.e.: `top right bottom left`)
    padding: '12px 14px',

    // the full list. if you're going to provide the full color palette,
    // including the 6 x 6 color cubes and the grayscale map, just provide
    // an array here instead of a color map object
    colors: {
      black: '#000000',
      red: '#C51E14',
      green: '#1DC121',
      yellow: '#C7C329',
      blue: '#0A2FC4',
      magenta: '#C839C5',
      cyan: '#20C5C6',
      white: '#C7C7C7',
      lightBlack: '#686868',
      lightRed: '#FD6F6B',
      lightGreen: '#67F86F',
      lightYellow: '#FFFA72',
      lightBlue: '#6A76FB',
      lightMagenta: '#FD7CFC',
      lightCyan: '#68FDFE',
      lightWhite: '#FFFFFF',
    },

    // 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
    //
    // Windows
    // - Make sure to use a full path if the binary name doesn't work
    // - Remove `--login` in shellArgs
    //
    // Bash on Windows
    // - Example: `C:\\Windows\\System32\\bash.exe`
    //
    // PowerShell on Windows
    // - Example: `C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
    //shell: '',
    shell: 'C:\\Program Files\\Git\\git-cmd.exe',

    // for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
    // by default `['--login']` will be used
    //shellArgs: ['--login'],
    shellArgs: ['--command=usr/bin/bash.exe', '-l', '-i'],

    // for environment variables
    //env: {},
    env: { TERM: 'cygwin'},

    // set to `false` for no bell
    bell: 'SOUND',

    // if `true` (without backticks and without quotes), selected text will automatically be copied to the clipboard
    copyOnSelect: false,

    // if `true` (without backticks and without quotes), hyper will be set as the default protocol client for SSH
    defaultSSHApp: true,

    // if `true` (without backticks and without quotes), on right click selected text will be copied or pasted if no
    // selection is present (`true` by default on Windows and disables the context menu feature)
    // quickEdit: true,

    // URL to custom bell
    // bellSoundURL: 'http://example.com/bell.mp3',

    // for advanced config flags please refer to https://hyper.is/#cfg
  },

  // a list of plugins to fetch and install from npm
  // format: [@org/]project[#version]
  // examples:
  //   `hyperpower`
  //   `@company/project`
  //   `project#1.0.1`
  //
  // May add in Future:
  // 'hyperline', // Currently not usable on windows
  // 'hyper-tabs-enhanced',
  plugins: [
    'gitrocket',
    'hyperlinks',
    'hyperterm-safepaste',
    'hyper-solarized-dark',
    'hyper-sync-settings',
    'space-pull',
    'hyperfull',
    'hyperborder'
  ],

  // in development, you can create a directory under
  // `~/.hyper_plugins/local/` and include it here
  // to load it and avoid it being `npm install`ed
  localPlugins: [],

  keymaps: {
    // Example
    // 'window:devtools': 'cmd+alt+o',
   'click:right': 'ctrl+ins',
  },

  // Custom Plugin stuff
  hyperTabs: {
    border: true,
    tabIcons: true,
    tabIconsColored: true,
    activityPulse: true,
  },

  hyperBorder: {
    borderColors: ['#fd5f00', '#2c2c2c'],
    blurredColors: '#333333',
    adminBorderColors: ['#ff0000', '#999999'],
  },

  hyperline: {
    // plugins: [
    //   "hostname",
    //   "ip",
    //   "cpu",
    //   "memory",
    //   "network",
    //   "git-status",
    //   "docker",
    //   "time",
    //   "uptime",
    //   "spotify",
    // ]
  },
};

The Window is still styled in the default colors.

If I alter the index.js => https://github.com/webmatze/hyperborder/blob/master/index.js#L23

...
  const config = window.config.getConfig();
  console.log(config);

  if (config.hyperBorder && config.hyperBorder.animate) {
    unloadAnimator = createAnimator(window, browserWindow);
  }
...

It prints out the following:

There is no hyperborder object in the config. I think the new Hyper-Version offers another way to get the config?! This could be an bug from hyper?!

I added custom colours and width as suggested:
hyperBorder: { borderColors: ['#00ffff', '#00bbff'], borderWidth: '4px' },

When the window is in focus, the border appears as intended (my custom blue/darkblue gradient):

However, when tabbed out of Hyper terminal, the border reverts back to the initial purple / orange gradient:

Hi,
From what I understand hyperborder displays an extra background instead of a border which creates an issue when you have a translucent background

The border-radius is not applied on Windows. Also I noticed the border-radius on the inner element is the same as on the outer, making the corner border look wider; having the inner radius 1px less makes the border look the same width; and also, config option for border-radius would be nice 😀

I was getting scroll bars on Windows 10.

So I set

html {
  overflow: hidden;
}

which seemed to do the trick. Creating a PR. #19

I was using hyperbroder as one of the plugins and none of the themes worked for me.
The backgourd would default to black and text color would grey out.

This is what "hyper-one-light" looked like:

Here is my hyper version:

-
Hyper 1.4.8
Electron 1.7.8
darwin x64 16.7.0
node v8.9.1
npm 5.5.1
bash_profile is clean

No errors seen when theme is added to .hyper.js/plugins.

Console output showed one warning:

Unimplemented DEC Private Mode: 1034
r.VT.setDECMode @ bundle.js:47

Removing "hyperborder" fixed the issue with theme.

I am using Hyper v. 1.4.8. An update was pushed tonight and hyper now fails to load when the plugin is enabled. Cannot read property 'borderColors' of undefined.

Stack:

I've tried these setting, and not works.

  hyperBorder: {   
    borderWidth: '2px'
  },

OS: Windows 10 64-bit

Hyper: 1.4.8 (stable)
Hyperboarder: 0.11.1

Steps to reproduce: None (install Hyperboarder)

Screenshot:

With the update to hyperterm 0.8.0 the gradient now covers the whole terminal, rather than being just a border!

I cannot get the colors to change on the border. I'm not sure why. Here is my hyper config:

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.

module.exports = {
  config: {
    // choose either `'stable'` for receiving highly polished,
    // or `'canary'` for less polished but more frequent updates
    updateChannel: 'stable',

    webGLRenderer: false,

    // default font size in pixels for all tabs
    fontSize: 16,

    // font family with optional fallbacks
    fontFamily: '"Jetbrains Mono", monospace',

    // default font weight: 'normal' or 'bold'
    fontWeight: 'normal',

    // font weight for bold characters: 'normal' or 'bold'
    fontWeightBold: 'bold',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(248,28,229,0.8)',

    // terminal text color under BLOCK cursor
    cursorAccentColor: '#000',

    cursorShape: 'BLOCK',

    cursorBlink: true,

    // color of the text
    foregroundColor: '#FFF',

    // terminal background color
    // opacity is only supported on macOS
    backgroundColor: '#000',

    borderColor: '#333',

    // terminal selection color
    selectionColor: 'rgba(248,28,229,0.8)',

    // custom CSS to embed in the main window
    css: 'splitpane_divider_horizontal, splitpane_divider_vertical { border: 3px solid black; }',

    // custom CSS to embed in the terminal window
    termCSS: '',

    // if you're using a Linux setup which show native menus, set to false
    // default: `true` on Linux, `true` on Windows, ignored on macOS
    showHamburgerMenu: '',

    // set to `false` (without backticks and without quotes) if you want to hide the minimize, maximize and close buttons
    // additionally, set to `'left'` if you want them on the left, like in Ubuntu
    // default: `true` (without backticks and without quotes) on Windows and Linux, ignored on macOS
    showWindowControls: '',

    // custom padding (CSS format, i.e.: `top right bottom left`)
    padding: '12px 14px',

    // the full list. if you're going to provide the full color palette,
    // including the 6 x 6 color cubes and the grayscale map, just provide
    // an array here instead of a color map object
    colors: {
      black: '#000000',
      red: '#C51E14',
      green: '#2ECC40',
      yellow: '#C7C329',
      blue: '#0074D9',
      magenta: '#C839C5',
      cyan: '#20C5C6',
      white: '#C7C7C7',
      lightBlack: '#686868',
      lightRed: '#FD6F6B',
      lightGreen: '#67F86F',
      lightYellow: '#FFFA72',
      lightBlue: '#6A76FB',
      lightMagenta: '#FD7CFC',
      lightCyan: '#68FDFE',
      lightWhite: '#FFFFFF'
    },

    shell: '/bin/zsh',

    // for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
    // by default `['--login']` will be used
    shellArgs: ['--login'],

    // for environment variables
    env: {},

    // set to `false` for no bell
    bell: 'SOUND',

    // if `true` (without backticks and without quotes), selected text will automatically be copied to the clipboard
    copyOnSelect: false,

    // if `true` (without backticks and without quotes), hyper will be set as the default protocol client for SSH
    defaultSSHApp: true

    // if `true` (without backticks and without quotes), on right click selected text will be copied or pasted if no
    // selection is present (`true` by default on Windows and disables the context menu feature)
    // quickEdit: true,

    // URL to custom bell
    // bellSoundURL: 'http://example.com/bell.mp3',

    // for advanced config flags please refer to https://hyper.is/#cfg
  },

  hyperBorder: {
    borderColors: ['#ff0000', '#0000ff'],
    borderAngle: '180deg',
    borderWidth: '5px',
    borderRadiusInner: '2px',
  },

  plugins: [
    "hypercwd",
    "hyper-pane",
    "hyper-one-dark",
    "hyperborder"
  ],

  localPlugins: [],

  keymaps: {
    // Example
    // 'window:devtools': 'cmd+alt+o',
  }
};

Could I please have some assistance in getting this to work? I'm sure I'm missing something small.

With the new hyperborder version (v2) the CPU usage is very high when enabling animation. I ruled out any other plugin by disabling them for testing. With all other plugins enabled (see list below), the CPU usage behaves almost the same.
Is there some room for optimisation?

With animation

Without animation

Plugins

Howdy!

I was just wondering if the following could be something interesting/useful to people and if it would be possible to be implemented?

Imagine you have multiple hyper windows opened (for whichever purpose you need windows instead of tabs) and to more easily differentiate which console is showing what, you have a blue border on the first and red border on the second window. In that way you avoid mistaking them (avoiding accidental execution of the commands meant for the other window), and more easily identify them.

Idealy you would be able to "somehow" change the color quickly, without going into the preferences (maybe the desired colors/efects could be defined in the preferences and then applied via menu, or command line switch).

I might be talking rubish here, sorry. I just found myself thinking about the fact that something like this might help me while working with two ssh connected systems and configuring one according to the other, while not wanting to change/affect anything in the first one.

Anyway, thank you very much for your attention. :)

When I set animate: true in the plugin options, the cpu load for Hyper Helper goes crazy.
I'm on MacOS Sierra with hyper v.08.3.
So animation is not usable at the moment. Maybe you could look at this?

Hi, the issue is that whenever they Hyper window isn't in focus, the borders default back to the pink and yellow. When you click on the window again, the correct colors show again. I didn't see anything in the settings that would account for this, but could be mistaken. Installed on Windows 11, if that makes a difference here.

When I do not define a hyperBorder section in the hyper config I get an error.

The minimum neede config seems to be:

hyperBorder: {
  animate: true
}

The plugin should work out of the box without any configuration.

After Hyper v3.1.5 this plugin stop working.

I am assuming it is because of this PR: vercel/hyper#6128

This is the log in Hyper console.

Issue
I installed hyper-border but when starting hyper I get the following error message:

This is my hyper.js configuration

module.exports = {
// ...
             config: {
                          hyperBorder: {
                                      borderWidth: '3px',
                                      animate: false,
                           },
            },
            plugins: ["hyperborder"],
// ...
};

Platform info
Hyper version: 3.2.3 stable
OS: macOS 12.4
Apple Silicon

Expected behavior:

Using ./hyper.js plugin configuration: plugins: ['hyperborder', 'hyper-electron-highlighter'], the hyper-electron-highlighter theme should be applied, while the hyperborder border effect should remain.

Actual behavior:

hyper-electron-highlighter will not apply its theme if coexisting with hyperborder in the plugins configuration. The border applies, though.

Steps to reproduce:

1. Fresh install hyper.
2. Include hyperborder and hyper-electron-highlighter in the ~/.hyper.js plugins array.
3. Boot up hyper.

Hello!
I just downloaded and installed hyperborder for my Win 10 install of Hyper and have noticed that if you set a border-radius, you'll still see a little of the (default) black square poking over the edges of the border in the corners:

Is there anything that can be done about this?

borderRadiusOuter seems to not work on windows, because the corners aren't round.

Hello, I get the following error after installing v2 of your plugin: Plugin error: undefined: Error occurred in reduceUI.

Here's a screenshot of the console:

The TypeError and "Calling execSync" lines are repeated about once per second.

I am running Hyper on an M1 Mac on macOS Monterey (12.4). Let me know what other details you need me to provide, as well as troubleshooting actions you need me to take.

As we are using different styles for the animated gradient borders the gradient is not the same as without animation.
We should do the animation in such a way, that the gradient looks the same.

My plan is to use CSS variables and JavaScript to realize the animation because it is not possible to animate the gradient angle using CSS (at the moment).

Issue seperated from #85 (comment)
Hyperborder is completely incompatible with any plugin that enables transparency for me. I tried hyper-vibrance, hyper-transparent, hyper-material-theme and simply setting the alpha value of the background color attribute. As soon as I enable transparency, the whole window gets colorized with the border color. I only have hyper-border and hyper-transparent/hyper-vibrance enabled.

The Canvas renderer is a problem. When enabling Canvas and transparency, the error below happens. With WebGL it works, but then I cannot use transparency. I want to use vibrance, which needs transparency. Hyper-opacity works with WebGL, but not with vibrancy... Man these incompatibilities are a real pain.

WIP fix: #85 (comment)

I'm using
Hyper 3.1.5 (stable)

Self descriptive error, happens on Windows 10 and Hyper 2.0.0

Nice work! This looks really cool 😃

I noticed when adding another tab, the tab borders are set to transparent.

The width doesn't seem to change, no matter what I do. I've even edited (just to test) the actual source, and still, the width doesn't change...

I'm on macOS 10.12.3 and Hyper 1.2.1. What stupidity have I committed?