JanDeDobbeleer / oh-my-posh

The most customisable and low-latency cross platform/shell prompt renderer
https://ohmyposh.dev
MIT License
17.41k stars 2.38k forks source link

Horizontal offset not working #244

Closed Skaytacium closed 3 years ago

Skaytacium commented 3 years ago

Prerequisites

Description

Trying to horizontally offset any block, be it right or left aligned, vertically offset (which works) or not, doesn't work for me. I don't know if everyone can reproduce this though.

Old So I wanted to make my own theme and got pretty far, but there were 2 problems that I encountered: 1. #### Blocks overflowing to the next line So when I added the battery_icon in the battery segment, the leading diamond of this segment would cut out and be invisible until I zoomed out really far. ![image](https://user-images.githubusercontent.com/58383260/102447216-97e99e80-4055-11eb-9382-14ba4800a98b.png) ![image](https://user-images.githubusercontent.com/58383260/102448320-e4ce7480-4057-11eb-9e3a-2744da1ecb30.png) The way I fixed this is by removing the percentage sign, which worked and didn't overflow. I encountered the same issue for the Spotify segment, where it would overflow if I didn't use the default play/pause/stopped icons. This time, if I added a custom prefix, not only would it just cut out, but it would overflow to the next line, which impacted where I positioned my cursor. This leads us to issue 2. 2. #### Spotify detection oh-my-posh doesn't seem to be able to detect if Spotify has been paused or stopped on the non-windows store version. This makes the paused/stopped icons useless. I have not tried the windows store version as thoroughly as I have used the non-store one, so I will try that soon and see if anything changes.

Environment

Steps to Reproduce

  1. Try to horizontally offset a block
    Old 1. Get my theme 2. Set prompt to use that theme 3. Play a song on Spotify 4. The last character on the Spotify block will overflow to the next line and paused/stopped won't work (on non-store)

Things I tried

Expected behavior: Blocks should offset properly depending on the value given

Actual behavior: They don't

Note: Other than that your prompt theming engine is no less than epic!

Edits

  1. You can fix this by using different icons. From what I can see, oh-my-posh doesn't take into account the extra characters that are added by some symbols in nerd fonts. So that seems to be the problem and I'm 99% sure that the aforementioned reason is why it was glitching out.
  2. Final theme which doesn't glitch out. Field-tested!
  3. Issue Topic Changed
    Working Theme
{
    "console_title": true,
    "final_space": true,
    "blocks": [{
            "type": "prompt",
            "alignment": "left",
            "segments": [{
                    "type": "os",
                    "style": "diamond",
                    "leading_diamond": "\ue0b2",
                    "foreground": "#42B8B8",
                    "background": "#665c54",
                    "properties": {
                        "prefix": "<#fe8019>\ue0b3</> ",
                        "postfix": " <#fe8019>\ue621</>",
                        "windows": "\uf17a"
                    }
                },
                {
                    "type": "shell",
                    "style": "plain",
                    "foreground": "lightCyan",
                    "background": "#504945",
                    "properties": {
                        "prefix": " \ufcb5 "
                    }
                },
                {
                    "type": "root",
                    "style": "plain",
                    "foreground": "#42B8B8",
                    "background": "#665c54",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> ",
                        "postfix": " <#fe8019>\ue621</>",
                        "root_icon": "\uf2dd"
                    }
                },
                {
                    "type": "path",
                    "style": "plain",
                    "foreground": "lightCyan",
                    "background": "#504945",
                    "properties": {
                        "style": "short"
                    }
                },
                {
                    "type": "node",
                    "style": "plain",
                    "foreground": "lightCyan",
                    "background": "#504945",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> \uf898 ",
                        "display_version": true
                    }
                },
                {
                    "type": "python",
                    "style": "plain",
                    "foreground": "lightCyan",
                    "background": "#504945",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> \ue235"
                    }
                },
                {
                    "type": "exit",
                    "style": "plain",
                    "foreground": "#42B8B8",
                    "background": "#665c54",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> ",
                        "postfix": " <#fe8019>\ue621</>",
                        "always_enabled": true
                    }
                },
                {
                    "type": "executiontime",
                    "style": "diamond",
                    "trailing_diamond": "\ue0b0",
                    "foreground": "lightYellow",
                    "background": "#504945",
                    "properties": {
                        "threshold": 0,
                        "always_enabled": true,
                        "postfix": " <#fe8019>\ue0b1</>"
                    }
                }
            ]
        },
        {
            "type": "prompt",
            "alignment": "right",
            "segments": [{
                    "type": "session",
                    "style": "diamond",
                    "leading_diamond": "\ue0b2",
                    "foreground": "lightYellow",
                    "background": "#504945",
                    "properties": {
                        "user_info_separator": " on ",
                        "prefix": "<#fe8019>\ue0b3</> "
                    }
                },
                {
                    "type": "time",
                    "style": "plain",
                    "foreground": "lightCyan",
                    "background": "#504945",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> ",
                        "time_format": "Mon Jan 2 15:04:05 MST 2006"
                    }
                },
                {
                    "type": "battery",
                    "style": "diamond",
                    "trailing_diamond": "\ue0b0",
                    "foreground": "#42B8B8",
                    "background": "#665c54",
                    "properties": {
                        "prefix": "<#fe8019>\ue621</> ",
                        "display_error": true,
                        "battery_icon": "\uf8ef",
                        "charging_icon": "\uf587 ",
                        "discharging_icon": "\uf57d ",
                        "charged_icon": "\uf578 ",
                        "display_charging": true,
                        "postfix": " <#fe8019>\ue0b1</>"
                    }
                }
            ]
        },
        {
            "type": "newline"
        },
        {
            "type": "prompt",
            "alignment": "left",
            "segments": [{
                "type": "git",
                "style": "diamond",
                "trailing_diamond": "\ue0b0",
                "leading_diamond": "\ue0b2",
                "foreground": "lightCyan",
                "background": "#504945",
                "properties": {
                    "prefix": "<#fe8019>\ue0b3</> ",
                    "postfix": " <#fe8019>\ue0b1</>",
                    "branch_icon": "\ufb2b ",
                    "display_stash_count": true,
                    "status_separator_icon": " <#fe8019>\ue621</>",
                    "local_working_icon": " \uf8ea",
                    "local_staged_icon": " \uf62b",
                    "stash_count_icon": "<#fe8019>\ue621</> \uf15b ",
                    "tag_icon": "\uf02b",
                    "merge_icon": "\ufb2c",
                    "display_upstream_icon": true,
                    "github_icon": "\uf408 ",
                    "git_icon": "\uf7a1 "
                }
            }]
        },
        {
            "type": "prompt",
            "alignment": "right",
            "segments": [{
                "type": "spotify",
                "style": "diamond",
                "trailing_diamond": "\ue0b0",
                "leading_diamond": "\ue0b2",
                "foreground": "lightCyan",
                "background": "#504945",
                "properties": {
                    "playing_icon": "<lightYellow>\uf144</> ",
                    "paused_icon": "<lightYellow>\uf28b</> ",
                    "stopped_icon": "<lightYellow>\uf28d</> ",
                    "track_separator": " <#fe8019>\ue621</> ",
                    "prefix": "<#fe8019>\ue0b3</> <#42B8B8>\uf1bc</> ",
                    "postfix": " <#fe8019>\ue0b1</>"
                }
            }]
        },
        {
            "type": "newline"
        },
        {
            "type": "prompt",
            "alignment": "left",
            "segments": [{
                "type": "text",
                "style": "diamond",
                "trailing_diamond": "\ue0b0",
                "leading_diamond": "\ue0b2",
                "foreground": "lightYellow",
                "background": "#665c54",
                "properties": {
                    "text": "sk",
                    "prefix": "<#fe8019>\ue0b3</>",
                    "postfix": "<#fe8019>\ue0b1</>"
                }
            }]
        }
    ]
}

Theme ```json { "console_title": true, "final_space": true, "blocks": [{ "type": "prompt", "alignment": "left", "segments": [{ "type": "os", "style": "diamond", "leading_diamond": "\ue0b2", "foreground": "#42B8B8", "background": "#696969", "properties": { "prefix": "<#F1891B>\ue0b3 ", "windows": "\uf17a" } }, { "type": "shell", "style": "plain", "foreground": "#42B8B8", "background": "#696969", "prefix": "|", "properties": { "prefix": "<#F1891B>\ue621 \uFCB5 " } }, { "type": "root", "style": "plain", "foreground": "#42B8B8", "background": "#696969", "properties": { "prefix": "<#F1891B>\ue621 ", "root_icon": "\ue315" } }, { "type": "path", "style": "plain", "foreground": "#42B8B8", "background": "#696969", "properties": { "prefix": "<#F1891B>\ue621 \ue5fe ", "style": "short" } }, { "type": "exit", "style": "plain", "foreground": "#42B8B8", "background": "#696969", "properties": { "prefix": "<#F1891B>\ue621 ", "always_enabled": true } }, { "type": "executiontime", "style": "diamond", "trailing_diamond": "\ue0b0", "foreground": "#42B8B8", "background": "#696969", "properties": { "prefix": "<#F1891B>\ue621 ", "threshold": 0, "always_enabled": true, "postfix": " <#F1891B>\ue0b1" } } ] }, { "type": "prompt", "alignment": "right", "segments": [{ "type": "session", "style": "diamond", "leading_diamond": "\ue0b2", "foreground": "#42B8B8", "background": "#696969", "properties": { "user_info_separator": " on ", "prefix": "<#F1891B>\ue0b3 " } }, { "type": "time", "style": "plain", "foreground": "#42B8B8", "background": "#696969", "properties": { "prefix": "<#F1891B>\ue621 ", "time_format": "Mon Jan 2 15:04:05 MST 2006" } }, { "type": "battery", "style": "diamond", "trailing_diamond": "\ue0b0", "foreground": "#42B8B8", "background": "#696969", "properties": { "prefix": "<#F1891B>\ue621 ", "display_error": true, "charging_icon": "\uf587 ", "discharging_icon": "\uf57d ", "charged_icon": "\uf578 ", "display_charging": true, "postfix": " <#F1891B>\ue0b1" } } ] }, { "type": "newline" }, { "type": "prompt", "alignment": "left", "segments": [{ "type": "git", "style": "diamond", "trailing_diamond": "\ue0b0", "leading_diamond": "\ue0b2", "foreground": "#42B8B8", "background": "#696969", "properties": { "prefix": "<#F1891B>\ue0b3 ", "postfix": " <#F1891B>\ue0b1", "branch_icon": "\ufb2b ", "display_stash_count": true, "status_separator_icon": " <#F1891B>\ue621 ", "local_working_icon": " \uf8ea", "local_staged_icon": " \uf62b", "stash_count_icon": "<#F1891B>\ue621 \uf15b ", "tag_icon": "\uf02b", "merge_icon": "\ufb2c", "display_upstream_icon": true, "github_icon": "\uf408 ", "git_icon": "\uf7a1 " } }] }, { "type": "prompt", "alignment": "right", "segments": [{ "type": "spotify", "style": "diamond", "trailing_diamond": "\ue0b0", "leading_diamond": "\ue0b2", "foreground": "#42B8B8", "background": "#696969", "properties": { "playing_icon": "\uf90c ", "paused_icon": "\uf8e5 ", "stopped_icon": "\ufb66 ", "track_separator": " <#F1891B>\ue621 ", "prefix": "<#F1891B>\ue0b3 \uf1bc ", "postfix": " <#F1891B>\ue0b1" } }] }, { "type": "newline" }, { "type": "prompt", "alignment": "left", "segments": [{ "type": "text", "style": "diamond", "trailing_diamond": "\ue0b0", "leading_diamond": "\ue0b2", "foreground": "#42B8B8", "background": "#696969", "properties": { "text": "sk", "prefix": "<#F1891B>\ue0b3", "postfix": "<#F1891B>\ue0b1" } }] } ] } ```
JanDeDobbeleer commented 3 years ago
  1. oh-my-posh doesn't take into account the extra characters that are added by some symbols in nerd fonts

Yes, that seems to be really hard to do. There's one function that calculates the length, maybe if you could give one that doesn't work, I can create a proper test for it. I did try this already a lot in the past, which is why the horizontal offset property was created on a segment as a workaround.

About Spotify, indeed on Windows it's impossible to get all the context. On MacOS we can query the status from the player, this is impossible on Windows.

Skaytacium commented 3 years ago

Hey! Thanks for that fast response. It's really nice seeing someone care a lot about their projects.

About Spotify, indeed on Windows it's impossible to get all the context. On macOS we can query the status from the player, this is impossible on Windows.

This makes sense, and in my opinion, that I think is very ignorable and should not be that much of an issue.

The main thing being the character width. Now I do not program in go, but if I could I would love to work on a PR. The horizontal offset property was the first thing that came to mind when I wanted to use those exotic symbols, but for some reason, it would never work. Vertical offset works just fine, but horizontal offset never seems to work. I tried everything that I mentioned above but to no luck.

I think if the horizontal offset would have worked, I would have never created this issue. So I might rename it to "Horizontal offset doesn't work".

One last question, is the offset for blocks or for segments? Because in the docs they are used interchangeably even though the offset is in the block properties segment, and you just said segment, so just want to clarify that.

Edit 1: Also, in the JSON schema, the property is in the block and not the segment. Confusing!

JanDeDobbeleer commented 3 years ago

It's on Block level! That's a mistake then. Did you try this on Segment or Block level?

Skaytacium commented 3 years ago

Block level, didn't seem to work. For now, I have just used some other icons. But it doesn't work on right or left alignment, vertical works fine though.

JanDeDobbeleer commented 3 years ago

Seems like this works on ZSH, but not Powershell. Will investigate.

Skaytacium commented 3 years ago

Hey, any updates on the issue? If you want, I could make a PR sometime next month

JanDeDobbeleer commented 3 years ago

It's on my list after I get a POC out that hopefully results in faster command execution on Windows. Shouldn't take a month!

Skaytacium commented 3 years ago

Great! Happy to hear that Windows will be faster. Command execution also depends on the terminal emulator though, but speed is always good.

JanDeDobbeleer commented 3 years ago

@Skaytacium from what I can see, this works on both MacOS and Windows in Powershell:

image

This is achieved by using the following property on a RIGHT aligned block. I didn't mention that specifically, but that's how it's coded right now, there's no way to offset a LEFT aligned block (not sure if that matters). See the second block and "horizontal_offset": -5,.

{
  "blocks": [
    {
      "type": "prompt",
      "alignment": "left",
      "segments": [
        {
          "type": "os",
          "style": "plain",
          "foreground": "#26C6DA",
          "background": "#546E7A",
          "properties": {
            "postfix": " \uE0B1"
          }
        },
        {
          "type": "root",
          "style": "plain",
          "foreground": "#26C6DA",
          "background": "#546E7A"
        },
        {
          "type": "path",
          "style": "plain",
          "foreground": "#26C6DA",
          "background": "#546E7A",
          "properties": {
            "style": "full",
            "postfix": " "
          }
        },
        {
          "type": "git",
          "style": "plain",
          "foreground": "#D4E157",
          "background": "#546E7A",
          "properties": {
            "prefix": "<#26C6DA>\uE0B1 </>"
          }
        },
        {
          "type": "text",
          "style": "plain",
          "foreground": "#546E7A",
          "background": "transparent",
          "properties": {
            "text": "\uE0B0",
            "prefix": "",
            "postfix": ""
          }
        }
      ]
    },
    {
      "type": "prompt",
      "alignment": "right",
      "horizontal_offset": -5,
      "segments": [
        {
          "type": "session",
          "style": "diamond",
          "foreground": "#D4E157",
          "background": "#546E7A",
          "leading_diamond": "\uE0B2",
          "properties": {
            "postfix": " <#26C6DA>\uE0B3</> "
          }
        },
        {
          "type": "time",
          "style": "plain",
          "foreground": "#D4E157",
          "background": "#546E7A",
          "properties": {
            "time_format": "15:04:05",
            "postfix": " \uF017 "
          }
        }
      ]
    },
    {
      "type": "newline"
    },
    {
      "type": "prompt",
      "alignment": "left",
      "segments": [
        {
          "type": "exit",
          "style": "plain",
          "foreground": "#D4E157",
          "properties": {
            "prefix": "\u276F",
            "always_enabled": true,
            "error_color": "#FF5252",
            "display_exit_code": false
          }
        }
      ]
    }
  ]
}
Skaytacium commented 3 years ago

Oh, that makes sense I guess. It seems to work fine with the right block, but a new problem arises: image

I remember running into this before, but not really sure how I fixed it.

Edit: This goes away as soon as I take out the horizontal offset, weird

JanDeDobbeleer commented 3 years ago

That's a bug in Windows Terminal. I still need to log it. Has to do with icons and the space they take. For example, whenever I noticed this on Windows Terminal, the same issue didn't occur in the vscode terminal for example.

Skaytacium commented 3 years ago

Spot on! image

Microsoft problems

JanDeDobbeleer commented 3 years ago

@Skaytacium see here for more context on that bug. If you issue is resolved, can you close this?

Skaytacium commented 3 years ago

Sure, thanks a lot for the help

github-actions[bot] commented 6 months ago

This issue has been automatically locked since there has not been any recent activity (i.e. last half year) after it was closed. It helps our maintainers focus on the active issues. If you have found a problem that seems similar, please open a discussion first, complete the body with all the details necessary to reproduce, and mention this issue as reference.