IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15332 from grafana/style-fixes

Browse Source 
Fixed issues with plus button in threshold and panel option header
This commit is contained in:
Torkel Ödegaard 2019-02-08 22:21:03 +01:00 committed by GitHub
commit 89c153d44b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
View File

@ -30,13 +30,13 @@
&:hover { &:hover {
.panel-options-group__add-circle { .panel-options-group__add-circle {
background-color: $btn-success-bg; background-color: $btn-success-bg;
color: $text-color-strong; color: $white;
} }
} }
} }
.panel-options-group__add-circle { .panel-options-group__add-circle {
@include gradientBar($btn-success-bg, $btn-success-bg-hl, $text-color); @include gradientBar($btn-success-bg, $btn-success-bg-hl);
border-radius: 50px; border-radius: 50px;
width: 20px; width: 20px;

4
packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
View File

@ -21,7 +21,7 @@
} }
.thresholds-row-add-button { .thresholds-row-add-button {
@include buttonBackground($btn-success-bg, $btn-success-bg-hl, $text-color); @include buttonBackground($btn-success-bg, $btn-success-bg-hl);
align-self: center; align-self: center;
margin-right: 5px; margin-right: 5px;
@ -34,7 +34,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $text-color-strong; color: $white;
} }
} }

20
public/app/features/dashboard/panel_editor/VisualizationTab.tsx
View File

@ -119,7 +119,12 @@ export class VisualizationTab extends PureComponent<Props, State> {
template += template +=
` `
<div class="panel-options-group" ng-cloak>` + <div class="panel-options-group" ng-cloak>` +
(i > 0 ? `<div class="panel-options-group__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') + (i > 0
? `<div class="panel-options-group__header">
<span class="panel-options-group__title">{{ctrl.editorTabs[${i}].title}}
</span>
</div>`
: '') +
`<div class="panel-options-group__body"> `<div class="panel-options-group__body">
<panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab> <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
</div> </div>
@ -228,8 +233,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
}; };
return ( return (
<EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[pluginHelp]} <EditorTabBody
scrollTop={scrollTop} setScrollTop={this.setScrollTop}> heading="Visualization"
renderToolbar={this.renderToolbar}
toolbarItems={[pluginHelp]}
scrollTop={scrollTop}
setScrollTop={this.setScrollTop}
>
<> <>
<FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}> <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
<VizTypePicker <VizTypePicker
@ -247,11 +257,11 @@ export class VisualizationTab extends PureComponent<Props, State> {
} }
const mapStateToProps = (state: StoreState) => ({ const mapStateToProps = (state: StoreState) => ({
urlOpenVizPicker: !!state.location.query.openVizPicker urlOpenVizPicker: !!state.location.query.openVizPicker,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
updateLocation updateLocation,
}; };
export default connectWithStore(VisualizationTab, mapStateToProps, mapDispatchToProps); export default connectWithStore(VisualizationTab, mapStateToProps, mapDispatchToProps);

12
public/sass/components/_panel_editor.scss
View File

@ -146,15 +146,17 @@
padding-bottom: 6px; padding-bottom: 6px;
transition: transform 1 ease; transition: transform 1 ease;
&--current {
box-shadow: 0 0 6px $orange;
border: 1px solid $orange;
}
&:hover { &:hover {
box-shadow: $panel-editor-viz-item-shadow-hover; box-shadow: $panel-editor-viz-item-shadow-hover;
background: $panel-editor-viz-item-bg-hover; background: $panel-editor-viz-item-bg-hover;
border: $panel-editor-viz-item-border-hover; border: $panel-editor-viz-item-border-hover;
}
&--current {
box-shadow: 0 0 6px $orange !important;
border: 1px solid $orange !important;
background: $panel-editor-viz-item-bg !important;
} }
} }