Skip to content

N
nexpie-grafana-theme
Commit 5fde9771 by Torkel Ödegaard
Options

wip: style changes

parent 226e55b1
Showing with 44 additions and 55 deletions
public/app/features/dashboard/dashgrid/EditorTabBody.tsx
...@@ -88,11 +88,14 @@ export class EditorTabBody extends PureComponent<Props, State> { ...@@ -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> { ...@@ -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>
......
public/app/features/dashboard/dashgrid/QueriesTab.tsx
...@@ -336,23 +336,27 @@ export class QueriesTab extends PureComponent<Props, State> { ...@@ -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 className="gf-form-query"> <div ref={element => (this.element = element)} />
<div className="gf-form gf-form-query-letter-cell">
<label className="gf-form-label"> <div className="gf-form-query">
<span className="gf-form-query-letter-cell-carret muted"> <div className="gf-form gf-form-query-letter-cell">
<i className="fa fa-caret-down" /> <label className="gf-form-label">
</span> <span className="gf-form-query-letter-cell-carret muted">
<span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span> <i className="fa fa-caret-down" />
</label> </span>
{!isAddingMixed && ( <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
<button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}> </label>
Add Query {!isAddingMixed && (
</button> <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
)} Add Query
{isAddingMixed && this.renderMixedPicker()} </button>
)}
{isAddingMixed && this.renderMixedPicker()}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
public/app/features/dashboard/dashgrid/VisualizationTab.tsx
...@@ -105,9 +105,9 @@ export class VisualizationTab extends PureComponent<Props, State> { ...@@ -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>
......
public/sass/components/_panel_editor.scss
...@@ -63,7 +63,7 @@ ...@@ -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 @@ ...@@ -132,7 +132,6 @@
} }
.viz-picker { .viz-picker {
margin-top: -40px;
padding: 20px; padding: 20px;
position: relative; position: relative;
} }
...@@ -303,27 +302,10 @@ ...@@ -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 @@ ...@@ -333,10 +315,6 @@
} }
} }
.form-section__body { .panel-option-section__body {
padding: 0 10px; padding: 20px;
}
.panel-editor-tabs__item-popover {
background: $orange;
} }
public/sass/components/_query_editor.scss
...@@ -13,6 +13,10 @@ ...@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment