github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Clean up dashboard padding and coloring (#14811) (#15205)

Browse source 
Fixes some coloring issues with dashboards with the new margin settings. Makes everything consistent between mode / theme.
This commit is contained in:
Stacey Gammon 2017-11-28 15:45:31 -05:00 • committed by GitHub
parent 5ad0cda0d7
commit 048e7a922f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/core_plugins/kibana/public/dashboard/panel/__snapshots__/dashboard_panel.test.js.snap
View file

@ -25,7 +25,7 @@ exports[`DashboardPanel matches snapshot 1`] = `
>
<span
aria-label="Panel options"
class="kuiButton__icon kuiIcon panel-dropdown fa fa-caret-down"
class="kuiButton__icon kuiIcon panel-dropdown fa fa-gear"
data-test-subj="dashboardPanelToggleMenuIcon"
role="button"
tabindex="0"

2
src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.js
View file

@ -108,7 +108,7 @@ export class PanelOptionsMenu extends React.Component {
<KuiKeyboardAccessible>
<span
aria-label="Panel options"
className="kuiButton__icon kuiIcon panel-dropdown fa fa-caret-down"
className="kuiButton__icon kuiIcon panel-dropdown fa fa-gear"
data-test-subj="dashboardPanelToggleMenuIcon"
onClick={this.toggleMenu}
/>

58
src/core_plugins/kibana/public/dashboard/styles/index.less
View file

@ -18,6 +18,8 @@
*/
.react-resizable-handle {
z-index: 10; /* 1 */
right: 4px;
bottom: 4px;
}
}
@ -136,7 +138,7 @@
}
.panel {
border: 2px dashed transparent;
border: solid 1px transparent;
}
/**
@ -153,13 +155,26 @@
}
.panel--edit-mode {
border-color: @kibanaGray4;
border-color: @globalColorLightGray;
&:hover {
border-color: @globalColorBlue;
.panel-title:hover {
color: @globalColorBlue;
}
.panel-heading {
background-color: rgba(0,0,0,.05) !important;
}
}
.visualize-show-spy {
visibility: visible;
}
.panel-heading {
cursor: pointer;
cursor: move;
}
}
@ -184,6 +199,14 @@ dashboard-viewport-provider {
}
}
/**
* Overwrites red coloring that comes from this library by default.
*/
.react-grid-item.react-grid-placeholder {
border-radius: 4px;
background: @globalColorBlue;
}
/**
* When a single panel is expanded, all the other panels are hidden in the grid.
*/
@ -231,7 +254,7 @@ dashboard-viewport-provider {
justify-content: flex-start;
.panel-heading {
padding: 2px 10px 2px 5px;
padding: 8px;
flex: 0 0 auto;
white-space: nowrap;
display: flex;
@ -240,19 +263,11 @@ dashboard-viewport-provider {
background-color: @white;
border: none;
/**
* 1. The popover aligns with the right side of this icon, so we want the right edge as far so the right as
* possible to make the arrows line up.
*/
.dashboardPanelPopOver {
margin-right: -10px; /* 1. */
}
/**
* 1. Required to get the pop up component arrow to line up with the menu icon.
*/
.panel-dropdown {
padding: 0 20px; /* 1. */
.panel-dropdown:hover {
color: @globalColorBlue;
}
.kuiPopover__body {
@ -347,6 +362,7 @@ dashboard-viewport-provider {
flex: 1 1 100%;
height: auto;
z-index: 1; /* 1. */
padding: 0 8px 8px 8px;
}
}
@ -365,13 +381,27 @@ dashboard-viewport-provider {
*/
.layout-with-margins {
background-color: @dashboard-bg-with-margins;
.panel-heading {
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.panel-content {
background-color: @panel-bg-with-margins;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.panel {
border: 1px solid #D9D9D9;
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}
.panel--edit-mode:hover {
border-color: @globalColorBlue;
box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.1);
}
}
.dashboard-viewport {

12
src/ui/public/styles/dark-theme.less
View file

@ -143,7 +143,11 @@
}
.panel--edit-mode {
border-color: @panel-default-border;
border-color: #222;
}
.panel--edit-mode:hover {
border-color: @globalColorBlue;
}
.panel-default {
@ -533,6 +537,7 @@
color: @dashboard-panel-color;
.panel {
.panel-heading {
a {
color: @dashboard-panel-heading-link-color;
@ -549,6 +554,7 @@
}
}
.load-error {
.fa-exclamation-triangle {
color: @dashboard-panel-load-error-color;
@ -750,4 +756,8 @@
.dashboard-container-with-margins {
background-color: @dashboard-bg-with-margins;
}
.react-grid-item > .react-resizable-handle {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpolygon fill='%23EFEEEE' points='6 6 0 6 0 4.2 4 4.2 4.2 4.2 4.2 0 6 0' opacity='.302'/%3E%3C/svg%3E%0A");
}
}