Comments (17)
@mindreeper2420 can you please take a look at this.
from fabric8-runtime-console.
@mindreeper2420 @dlabrecq I've polished the environments page a little and made it lazy loading now:
#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!
from fabric8-runtime-console.
@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.
from fabric8-runtime-console.
@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?
from fabric8-runtime-console.
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;
}
}
}
from fabric8-runtime-console.
@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;
}
}
}
}
from fabric8-runtime-console.
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.
from fabric8-runtime-console.
@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.
from fabric8-runtime-console.
Lemme try ng-bootstrap tabs actually - it might be a nicer UI anyway ;)
https://ng-bootstrap.github.io/#/components/tabs
from fabric8-runtime-console.
make that ng2-boostrap's tabs!
http://valor-software.com/ngx-bootstrap/#/tabs
from fabric8-runtime-console.
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)
from fabric8-runtime-console.
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
from fabric8-runtime-console.
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.
from fabric8-runtime-console.
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.
from fabric8-runtime-console.
@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
from fabric8-runtime-console.
Finishing the list view is high on my list to do. We plan on using that in a couple pages.
from fabric8-runtime-console.
@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 ;)
from fabric8-runtime-console.
Related Issues (20)
- Links to OpenShift console should use SSO
- the recent kebab menu fix has broken the kubernetes resource picker HOT 8
- Override provider for Namespace scope, don't directly inject DevNamespaceScope HOT 1
- Remove api-locator
- add links on the resource pages for deployments/services/configmaps et al on the openshift console
- KubernetesRestangular should inject OAuthConfigStore
- Introduce Fabric8-stack-analysis-ui NPM package into runtime console
- Remove dependency on Bootstrap HOT 4
- Environments not displaying HOT 1
- Space styles are causing css conflicts HOT 1
- Tests don't run
- Update Environments UI HOT 9
- Update the Pipelines UI HOT 5
- Linking annotations from build pipeline to bayesian npm
- should we hide resources from the environments tree if there are none? HOT 1
- add a new Apps page showing apps, versions and pods counts & status per environment HOT 2
- should the Environments page (maybe we call it 'Resources'?) - be a bit more lazy loading? HOT 5
- show environment quota information HOT 1
- pipeline approvals to generate UI notification HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fabric8-runtime-console.