Broken styling for git-view if placed on the left of the status bar

[UrsaDK]

I'm using move-status-items plugin and noticed that dragging .git-view on to the left of the status bar (inside .status-bar-left) breaks a lot of the styling.

Would be nice if .git-view could be placed on either side of the status bar...

[fv0]

@UmkaDK Could you provide a screenshot?

[UrsaDK]

Sure thing, will do! But I'm away at the moment, so it might take me a few hours... Would tomorrow be ok?

[UrsaDK]

Got back a bit earlier then expected, so ... There are three screen shots attached to this post:

1. a view of the broken styling when .git-view is on the left of the statusbar
2. the same as 1 but with Dev Tools open
3. the same as one but with my fixes applied

Broken Styling:

Locally, I managed to fix the issue by adding this to my styles.less:

status-bar {
    // TEMP: A temporary fix for native-ui theme
    @import "ui-variables";
    @import "status-bar";
    .status-bar-left {
        margin-left: 0;

        .git-view {
            padding: 0 @status-bar-spacing;
            padding-left: 0;
            margin: 0 3px;
            margin-right: 0;

            .inline-block {
                color: @text-color-selected;
                padding: 0 @status-bar-spacing;
                padding-right: 0;
                margin-right: 0;
            }
        }
        > .inline-block {
            margin: 0 0 0 3px;
            padding: 0 @status-bar-spacing;

            &:hover {
                background-color: darken(@tab-background-color, 5%);
                border-radius: @border-radius--base;
                text-decoration: none;
                color: white;
                cursor: pointer;

                a,
                span {
                    color: white;
                }
            }
        }
    }
}

which, when applied, looks like this:

[fv0]

@UmkaDK How’s your issue going with latest update?

[UrsaDK]

Just downloaded and installed version 0.21.0, disabled all custom styles and ... the spacing appears to be a lot better, but as you can see, branch name is still showing up as black on black. :(

[fv0]

@UmkaDK That’s weird. Maybe you can answer these questions for me.

1. Have you got the latest version of Atom installed?
2. Does the text color of the branch change when you’re in a repo that has modifications?
3. What does the gray symbol stand for? Maybe you can inspect this and show me the HTML code structure for this part.

[UrsaDK]

1. Atom version 1.17.2 (as of this moment, it's the latest available stable release)
2. In a repo that has modifications the colour of the branch name doesn't change (it remains dark on dark), the colour of the branch status text does change (to orange-ish).
3. The grey symbol indicates that I was editing a file which is ignored by git. :)

Sorry for a bit of a terse reply. A little bit swamped with work at the moment. If there is anything else I can do, please let me know. It might take me a day or two to reply but I'm happy to help.

[UrsaDK]

Just thought I would update this for the latest Atom / Native-UI:

• Atom: 1.27.0
• Native-UI: 0.26.1

As mentioned in the original message (at the top), dragging github status display to the left of the status bar (inside .status-bar-left) breaks some of the styling, ie:

Adding the following CSS to your .atom/styles.less resolves the issue:

.theme-native-ui {
  .status-bar-left {
    .github-StatusBarTileController {
      background-color: inherit;
      margin-right: 11px;
      &:hover {
        background-color: #a6a6a6 !important;
      }
    }
  }
}

and updates github status display to look like:

[fv0]

@UmkaDK Finally fixed this. Can you confirm with version 0.26.2 of Native UI that this solves your problem? It didn’t make sense to scope the styling to status-bar-right, so I removed this and adapted the code to handle the new Fetch link in the Git status element.

[UrsaDK]

@fv0, almost there!! :)

The colours are now spot on, the text is readable, everything works good. The only problem is the padding: there is too much of it on the left and not enough on the right, see attached screen shot: