polish the environments CSS

[jstrachan]

it'd be nice to polish the CSS on the current tree widget we have.

e.g. we use a grey hover-over colour on the contents of the tree (e.g.Pods or Deployments) which doesn't look too great and we have lots of spacing around it which we should probably shrink

[joshuawilson]

@mindreeper2420 can you please take a look at this.

[jstrachan]

@mindreeper2420 @dlabrecq I've polished the environments page a little and made it lazy loading now: https://github.com/fabric8-ui/fabric8-runtime-console/pull/469

but I'm still struggling with the CSS for the expanded tree widget; right now its using grey :hover which looks kinda ugly - tried all my CSS ninja tricks but haven't found out how from something which includes the tree widget how to remove those large margins and override the :hover grey stuff for the child content.

This is what we have right now - any help greatly appreciated!

[AdamJ]

@jstrachan I tried running this locally, but am unable to. Any suggestions? I followed the README as best I could. I also loaded up prod-preview, but the Environments tab does not show anything for me.

[jstrachan]

@mindreeper2420 You running the fabric8-ui locally from a recent rebase right? You may wanna do 'npm install' too to make sure you've the latest greatest fabric8-runtime-console too.

Do you see the Environments tab on the Create page? If the page is completely blank then that sounds like you've no environments setup in your tenant. Did you upgrade your tenant recently? You can do this yourself now on the Profile page -> Update Profile then click Update Tenant

You should then see Test, Stage, Run as the environments on the Environments page. If you expand resources like Deployments and whatnot they will all be empty unless you've created an app thats managed to stage something. So testing in the Stage environment is your best bet after running an app.

Feel free to grab me in mattermost (jstrachan) if you want more interactive help to get you going?

[dlabrecq]

The grey hover color is coming from the Patternfly list view styles used by the treelist widget. If you're not using the child expansion, you can use the list view widget or just copy the HTML pattern directly. The list view supports expansion, but it's not a tree hierarchy.

(The treelist adds those margins as placeholders for the expanding node control.)

That said, you may be able to change the highlighting, but it won't match the list view used elsewhere in the UI. The CSS for treelist looks like this:

.node-content-wrapper { .list-group-item { border: none; cursor: pointer; padding-left: 0; &:hover { background-color: $color-pf-black-200; } &.tree-item-selected { background-color: $color-pf-blue-100; &:hover { background-color: $color-pf-blue-100; } } }

[jstrachan]

@dlabrecq thanks! I tried adding variants of that to the sccs file: https://github.com/jstrachan/fabric8-runtime-console/blob/2b793b7c9d918f96a99178054ba038c7939d775c/src/app/kubernetes/ui/environment/list/list.environment.component.scss

e.g. adding this - but no effect (I don't even see it show up disabled in JavaScript console)

.node-content-wrapper {
  &:hover {
    background-color: white;
  }
  .list-group-item {
    &:hover {
      background-color: white;
    }
    &.tree-item-selected {
      background-color: white;
      &:hover {
        background-color: white;
      }
    }
  }
}

[dlabrecq]

It's just a matter of specificity.

.tree-list .node-content-wrapper { ... &:hover { background-color: red; } ... }

That said, I don't believe you want to use tree list here. If you only want expansion, list view is probably a better fit.

[jstrachan]

@dlabrecq thanks - I tried that CSS too in https://github.com/jstrachan/fabric8-runtime-console/blob/2b793b7c9d918f96a99178054ba038c7939d775c/src/app/kubernetes/ui/environment/list/list.environment.component.scss with no luck either. I guess its all about where you put this CSS?

I think the longer term view was to use the horizontal tree widget (so that the resource kinds go in a horizontal line rather than a vertical tree - like this mock up https://redhat.invisionapp.com/share/3UAZNL1JQ#/screens/226251975). I guess a Tab UI might be simpler, for now - though don't see one in patternfly.

[jstrachan]

Lemme try ng-bootstrap tabs actually - it might be a nicer UI anyway ;) https://ng-bootstrap.github.io/#/components/tabs

[jstrachan]

make that ng2-boostrap's tabs! http://valor-software.com/ngx-bootstrap/#/tabs

[jstrachan]

So the tab UI feels much slicker and avoids this issue of excessive whitespace / grey hover around the list of resources.

My only issue now is that I'm not yet sure how to make the rendering of each tab lazy unless its actually visible on the page yet (which forces all the data to be eager loaded on startup)

[jstrachan]

I've gotta say I'm so much happier with the tab UI so lemme switch to that for now; its also much closer to the UX

[dlabrecq]

The list view component is intended to implement that mockup with the individual expansion toggles. Due to lack of time, I was only able to implement a single row expansion. The idea was that you could implement exactly what is shown in the mockup. The tabs look nice, too, but don't know of a way to make that lazy.

[dlabrecq]

If you're still having trouble with the CSS, try turning view encapsulation off at the component level -- that's where I overrode my treelist CSS.

[jstrachan]

@dlabrecq no worries! For now I worked around making the tabs dynamic by using the select event on a tab to prod the model to load itself which is working really nicely. Should be easy to swizzle to some other list / tab / tree widget later on if need be

[dlabrecq]

Finishing the list view is high on my list to do. We plan on using that in a couple pages.

[jstrachan]

@dlabrecq great stuff thanks! I'm very happy to switch it to the new widget later on; I'm just much happier with the Tab for now until we have a more awesome UI ;) all that whitespace & grey hover was annoying me before ;)