mirror of
https://github.com/grafana/grafana.git
synced 2025-01-08 23:23:45 -06:00
refactoring & cleaning up css
This commit is contained in:
Torkel Ödegaard
parent
f74f7b017f
commit
c4ad069083
@ -40,9 +40,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
|
||||
|
||||
renderMainSelection(view: EditorToolBarView) {
|
||||
return (
|
||||
<div className="edit-section__selected" onClick={() => this.onToggleToolBarView(view)} key={view.title}>
|
||||
<img className="edit-section__selected-image" src={view.imgSrc} />
|
||||
<div className="edit-section__selected-name">{view.title}</div>
|
||||
<div className="toolbar__main" onClick={() => this.onToggleToolBarView(view)} key={view.title}>
|
||||
<img className="toolbar__main-image" src={view.imgSrc} />
|
||||
<div className="toolbar__main-name">{view.title}</div>
|
||||
<i className="fa fa-caret-down" />
|
||||
</div>
|
||||
);
|
||||
@ -60,8 +60,8 @@ export class EditorTabBody extends PureComponent<Props, State> {
|
||||
|
||||
renderOpenView(view: EditorToolBarView) {
|
||||
return (
|
||||
<div className="editor-toolbar-view">
|
||||
<button className="editor-toolbar-view__close" onClick={this.onCloseOpenView}>
|
||||
<div className="toolbar-subview">
|
||||
<button className="toolbar-subview__close" onClick={this.onCloseOpenView}>
|
||||
<i className="fa fa-chevron-up" />
|
||||
</button>
|
||||
{view.render()}
|
||||
@ -75,12 +75,10 @@ export class EditorTabBody extends PureComponent<Props, State> {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="edit-section">
|
||||
<div className="edit-section__header">
|
||||
{this.renderMainSelection(main)}
|
||||
<div className="gf-form--grow" />
|
||||
{toolbarItems.map(item => this.renderButton(item))}
|
||||
</div>
|
||||
<div className="toolbar">
|
||||
{this.renderMainSelection(main)}
|
||||
<div className="gf-form--grow" />
|
||||
{toolbarItems.map(item => this.renderButton(item))}
|
||||
</div>
|
||||
<div className="panel-editor__scroll">
|
||||
<CustomScrollbar>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
|
||||
import { EditorTabBody } from './EditorTabBody';
|
||||
import { VizTypePicker } from './VizTypePicker';
|
||||
|
||||
import { PanelModel } from '../panel_model';
|
||||
import { DashboardModel } from '../dashboard_model';
|
||||
import { PanelPlugin } from 'app/types/plugins';
|
||||
|
||||
interface Props {
|
||||
panel: PanelModel;
|
||||
dashboard: DashboardModel;
|
||||
plugin: PluginModel;
|
||||
plugin: PanelPlugin;
|
||||
onTypeChanged: (newType: PanelPlugin) => void;
|
||||
}
|
||||
|
||||
|
||||
@ -85,7 +85,7 @@ export class VizTypePicker extends PureComponent<Props, State> {
|
||||
<div className="gf-form--grow" />
|
||||
</div>
|
||||
|
||||
<div className="viz-picker__items">{pluginList.map(this.renderVizPlugin)}</div>
|
||||
<div className="viz-picker">{pluginList.map(this.renderVizPlugin)}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="gf-form-group hide">
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label">Data Source</label>
|
||||
|
||||
@ -97,7 +97,8 @@
|
||||
@import 'components/form_select_box';
|
||||
@import 'components/user-picker';
|
||||
@import 'components/description-picker';
|
||||
@import 'components/viz_editor';
|
||||
@import 'components/panel_editor';
|
||||
@import 'components/toolbar';
|
||||
@import 'components/delete_button';
|
||||
@import 'components/add_data_source.scss';
|
||||
@import 'components/page_loader';
|
||||
|
||||
@ -40,6 +40,10 @@
|
||||
}
|
||||
|
||||
.panel-in-fullscreen {
|
||||
.navbar {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.navbar-button--add-panel,
|
||||
.navbar-button--star,
|
||||
.navbar-button--tv,
|
||||
|
||||
@ -28,18 +28,10 @@
|
||||
}
|
||||
|
||||
.panel-in-fullscreen {
|
||||
// .scroll-canvas--dashboard {
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
.sidemenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// .main-view {
|
||||
// background: unset;
|
||||
// }
|
||||
|
||||
.dashboard-container {
|
||||
padding: 0;
|
||||
}
|
||||
@ -53,11 +45,49 @@
|
||||
}
|
||||
}
|
||||
|
||||
.viz-picker {
|
||||
margin-bottom: $spacer;
|
||||
.panel-editor-resizer {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
top: -23px;
|
||||
text-align: center;
|
||||
border-bottom: 2px dashed transparent;
|
||||
|
||||
&:hover {
|
||||
transition: border-color 0.2s ease-in 0.4s;
|
||||
transition-delay: 0.2s;
|
||||
border-color: $text-color-faint;
|
||||
}
|
||||
}
|
||||
|
||||
.viz-picker__items {
|
||||
.panel-editor-resizer__handle {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
height: 10px;
|
||||
cursor: grabbing;
|
||||
background: $dark-4;
|
||||
top: -8px;
|
||||
|
||||
&:hover {
|
||||
transition: background 0.2s ease-in 0.4s;
|
||||
transition-delay: 0.2s;
|
||||
background: $blue-dark;
|
||||
.panel-editor-resizer__handle-dots {
|
||||
transition: opacity 0.2s ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-editor-resizer__handle-dots {
|
||||
border-top: 2px dashed $text-color-faint;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.viz-picker {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 13px;
|
||||
@ -104,108 +134,6 @@
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.panel-editor-resizer {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
top: -23px;
|
||||
text-align: center;
|
||||
border-bottom: 2px dashed transparent;
|
||||
|
||||
&:hover {
|
||||
transition: border-color 0.2s ease-in 0.4s;
|
||||
transition-delay: 0.2s;
|
||||
border-color: $text-color-faint;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-editor-resizer__handle {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
height: 10px;
|
||||
cursor: grabbing;
|
||||
background: $dark-4;
|
||||
top: -8px;
|
||||
|
||||
&:hover {
|
||||
transition: background 0.2s ease-in 0.4s;
|
||||
transition-delay: 0.2s;
|
||||
background: $blue-dark;
|
||||
.panel-editor-resizer__handle-dots {
|
||||
transition: opacity 0.2s ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-editor-resizer__handle-dots {
|
||||
border-top: 2px dashed $text-color-faint;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.panel-editor {
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.form-option-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-option-box__header {
|
||||
border-bottom: 2px solid $blue-dark;
|
||||
padding: 5px 0px;
|
||||
font-size: $font-size-lg;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.edit-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.edit-section__header {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
background: $page-header-bg;
|
||||
box-shadow: 0 0 20px black;
|
||||
padding: 7px 30px 7px 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.edit-section__selected {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-md;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border: $input-border;
|
||||
border-radius: $input-border-radius;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.fa {
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-section__title {
|
||||
font-size: $font-size-lg;
|
||||
padding-right: 20px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.edit-section__selected-image {
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.panel-editor-tabs {
|
||||
position: relative;
|
||||
@ -213,6 +141,7 @@
|
||||
box-shadow: $page-header-shadow;
|
||||
border-bottom: 1px solid $page-header-border-color;
|
||||
padding: 0 $dashboard-padding;
|
||||
|
||||
@include clearfix();
|
||||
|
||||
.active.gf-tabs-link {
|
||||
@ -238,28 +167,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.editor-toolbar-view {
|
||||
position: relative;
|
||||
padding: 20px 20px;
|
||||
background-color: $empty-list-cta-bg;
|
||||
top: -45px;
|
||||
margin: 0 30px 20px 0px;
|
||||
}
|
||||
|
||||
.editor-toolbar-view__close {
|
||||
background: transparent;
|
||||
padding: 4px 8px 4px 9px;
|
||||
border: none;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 20px;
|
||||
font-size: $font-size-md;
|
||||
|
||||
&:hover {
|
||||
color: $text-color-strong;
|
||||
}
|
||||
}
|
||||
|
||||
.ds-picker-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -300,3 +207,14 @@
|
||||
.ds-picker-list__img {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.form-option-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-option-box__header {
|
||||
border-bottom: 2px solid $blue-dark;
|
||||
padding: 5px 0px;
|
||||
font-size: $font-size-lg;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
59
public/sass/components/_toolbar.scss
Normal file
59
public/sass/components/_toolbar.scss
Normal file
@ -0,0 +1,59 @@
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
background: $page-header-bg;
|
||||
box-shadow: 0 0 20px black;
|
||||
padding: 7px 30px 7px 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.toolbar__main {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-md;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border: $input-border;
|
||||
border-radius: $input-border-radius;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fa {
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar__main-image {
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.toolbar-subview {
|
||||
position: relative;
|
||||
padding: 20px 20px;
|
||||
background-color: $empty-list-cta-bg;
|
||||
top: -45px;
|
||||
margin: 0 30px 20px 0px;
|
||||
}
|
||||
|
||||
.toolbar-subview__close {
|
||||
background: transparent;
|
||||
padding: 4px 8px 4px 9px;
|
||||
border: none;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 20px;
|
||||
font-size: $font-size-md;
|
||||
|
||||
&:hover {
|
||||
color: $text-color-strong;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user