IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

wip: style changes

Browse Source
This commit is contained in:
Torkel Ödegaard
2018-12-13 13:05:43 +01:00
parent 226e55b188
commit 5fde977185
5 changed files with 43 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/features/dashboard/dashgrid/EditorTabBody.tsx
View File

@@ -88,11 +88,14 @@ export class EditorTabBody extends PureComponent<Props, State> {
renderOpenView(view: EditorToolBarView) { renderOpenView(view: EditorToolBarView) {
return ( return (
<div className="toolbar-subview"> <div className="panel-option-section">
<button className="toolbar-subview__close" onClick={this.onCloseOpenView}> <div className="panel-option-section__header">
<i className="fa fa-chevron-up" /> {view.title}
</button> <button className="btn btn-link" onClick={this.onCloseOpenView}>
{view.render(this.onCloseOpenView)} <i className="fa fa-remove" />
</button>
</div>
<div className="panel-option-section__body">{view.render(this.onCloseOpenView)}</div>
</div> </div>
); );
} }
@@ -115,10 +118,10 @@ export class EditorTabBody extends PureComponent<Props, State> {
</div> </div>
<div className="panel-editor__scroll"> <div className="panel-editor__scroll">
<CustomScrollbar autoHide={false}> <CustomScrollbar autoHide={false}>
<FadeIn in={isOpen} duration={200} unmountOnExit={true}>
<div className="panel-editor__toolbar-view">{openView && this.renderOpenView(openView)}</div>
</FadeIn>
<div className="panel-editor__content"> <div className="panel-editor__content">
<FadeIn in={isOpen} duration={200} unmountOnExit={true}>
{openView && this.renderOpenView(openView)}
</FadeIn>
<FadeIn in={fadeIn} duration={50}> <FadeIn in={fadeIn} duration={50}>
{children} {children}
</FadeIn> </FadeIn>

36
public/app/features/dashboard/dashgrid/QueriesTab.tsx
View File

@@ -336,23 +336,27 @@ export class QueriesTab extends PureComponent<Props, State> {
renderToolbar={this.renderToolbar} renderToolbar={this.renderToolbar}
toolbarItems={[options, queryInspector, dsHelp]} toolbarItems={[options, queryInspector, dsHelp]}
> >
<div className="query-editor-rows gf-form-group"> <div className="panel-option-section">
<div ref={element => (this.element = element)} /> <div className="panel-option-section__body">
<div className="query-editor-rows gf-form-group">
<div ref={element => (this.element = element)} />
<div className="gf-form-query"> <div className="gf-form-query">
<div className="gf-form gf-form-query-letter-cell"> <div className="gf-form gf-form-query-letter-cell">
<label className="gf-form-label"> <label className="gf-form-label">
<span className="gf-form-query-letter-cell-carret muted"> <span className="gf-form-query-letter-cell-carret muted">
<i className="fa fa-caret-down" /> <i className="fa fa-caret-down" />
</span> </span>
<span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span> <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
</label> </label>
{!isAddingMixed && ( {!isAddingMixed && (
<button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}> <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
Add Query Add Query
</button> </button>
)} )}
{isAddingMixed && this.renderMixedPicker()} {isAddingMixed && this.renderMixedPicker()}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

6
public/app/features/dashboard/dashgrid/VisualizationTab.tsx
View File

@@ -105,9 +105,9 @@ export class VisualizationTab extends PureComponent<Props, State> {
for (let i = 0; i < panelCtrl.editorTabs.length; i++) { for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
template += template +=
` `
<div class="form-section" ng-cloak>` + <div class="panel-option-section" ng-cloak>` +
(i > -1 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') + (i > -1 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
`<div class="form-section__body"> `<div class="panel-option-section__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>
</div> </div>

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

@@ -63,7 +63,7 @@
} }
.panel-editor__content { .panel-editor__content {
padding: 40px 20px; padding: 0;
} }
.panel-editor__toolbar-view { .panel-editor__toolbar-view {
@@ -132,7 +132,6 @@
} }
.viz-picker { .viz-picker {
margin-top: -40px;
padding: 20px; padding: 20px;
position: relative; position: relative;
} }
@@ -303,27 +302,10 @@
width: 30px; width: 30px;
} }
.form-option-box { .panel-option-section__header {
margin-bottom: 20px; padding: 5px 20px;
}
.form-option-box__header {
border-bottom: 2px solid $dark-4;
padding: 5px 0px;
font-size: $font-size-md;
margin-bottom: 20px;
}
.form-section {
margin-bottom: 10px;
}
.form-section__header {
padding: 5px 10px;
font-size: $font-size-h5; font-size: $font-size-h5;
margin-bottom: 20px;
background: $input-label-bg; background: $input-label-bg;
border-radius: 3px;
position: relative; position: relative;
.btn { .btn {
@@ -333,10 +315,6 @@
} }
} }
.form-section__body { .panel-option-section__body {
padding: 0 10px; padding: 20px;
}
.panel-editor-tabs__item-popover {
background: $orange;
} }

4
public/sass/components/_query_editor.scss
View File

@@ -13,6 +13,10 @@
color: $orange; color: $orange;
} }
.query-editor-rows {
margin-top: 20px;
}
.gf-form-query { .gf-form-query {
display: flex; display: flex;
flex-direction: row; flex-direction: row;