[Graph] Style fixes #47667
[Graph] Style fixes #47667
Conversation
flash1293
added
Feature:Graph
💔 Build Failed |
| @@ -22,6 +22,8 @@ | |||
| } | |||
|
|
|||
| .gphGraph__container { | |||
| display: flex; | |||
There was a problem hiding this comment.
By making this a flex container, the svg grows to the correct size in Safari (otherwise it falls back to the default height of 150px)
| @@ -27,7 +27,7 @@ | |||
|
|
|||
| .gphSidebar__panel{ | |||
| max-height: $euiSizeL * 10; | |||
| overflow-y: auto; | |||
| overflow-y: hidden auto; | |||
There was a problem hiding this comment.
Somehow setting overflow-y to auto also set overflow-x to auto which causes a horizontal scroll bar here because of the way the bootstrap forms are working.
| @@ -49,6 +49,10 @@ | |||
| margin-bottom: 0; | |||
| } | |||
|
|
|||
| .gphSelectionList__icon { | |||
There was a problem hiding this comment.
As the circle in the sidebar selection list is much smaller, the icon should also be smaller, otherwise the icon overlaps the circle in some cases.
| @@ -7,7 +7,8 @@ | |||
| <graph-inspect ng-show="menus.showInspect"></graph-inspect> | |||
| </div> | |||
|
|
|||
| <graph-app | |||
| <div | |||
There was a problem hiding this comment.
Safari and IE don't like the custom elements (like graph-app) in the DOM - by using attribute directives here they behave like regular divs.
| x="12" | ||
| y="16" | ||
| ng-click="workspace.deselectNode(n)" | ||
| ng-class="{'gphNode__text--inverse': isColorDark(n.color)}" |
There was a problem hiding this comment.
Adding the additional class to change the icon color if the vertex color becomes too dark
| <FieldManager pickerOpen={pickerOpen} setPickerOpen={setPickerOpen} /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| <SearchBar {...searchBarProps} /> |
There was a problem hiding this comment.
Using a spacer instead of a vertical flex group because IE is not able to layout them correctly
| @@ -1,3 +1,14 @@ | |||
| .gphVisualization { | |||
There was a problem hiding this comment.
Making sure the growing flex property is propagated to the svg element. This became necessary because there is an additional wrapper element (introduced by the ngreact-directive). I wasn't able to remove the element (somehow replace: true) doesn't work for ngreact directives, thus I chose this solution. The unnecessary wrappers can be removed together with angular.
|
|
||
| .gphGraph { | ||
| flex: 1; | ||
| overflow: hidden; |
There was a problem hiding this comment.
Set overflow hidden to the graph for IE (other browsers do this by default).
At least this one was also released in the last version (didn't check others):
|
Jenkins, test this |
💚 Build Succeeded |
| @@ -49,6 +49,10 @@ | |||
| margin-bottom: 0; | |||
| } | |||
|
|
|||
| .gphSelectionList__icon { | |||
| font-size: 0.7rem; | |||
There was a problem hiding this comment.
Please use the appropriate $euiFontSizeX var here.
flash1293
added
the
Team:Visualizations
|
Pinging @elastic/kibana-app (Team:KibanaApp) |
💔 Build Failed |
|
Jenkins, test this. |
💚 Build Succeeded |
Summary
This PR fixes various styling issues in Graph, partially introduced by the migration, partially already existing in legacy UI.
The comments in the code explain what the various changes are doing.
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.- [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support- [ ] Documentation was added for features that require explanation or tutorials- [ ] Unit or functional tests were updated or added to match the most common scenarios- [ ] This was checked for keyboard-only and screenreader accessibilityFor maintainers
- [ ] This includes a feature addition or change that requires a release note and was labeled appropriately