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

more ux progress

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-10-27 15:09:36 +02:00
parent a4674ecaa1
commit b1b534a005
4 changed files with 79 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/reducers/location.ts
View File

@ -18,6 +18,7 @@ export const locationReducer = (state = initialState, action: Action): LocationS
if (action.payload.partial) {
query = _.defaults(query, state.query);
query = _.omitBy(query, _.isNull);
}
return {

9
public/app/features/dashboard/dashgrid/PanelEditor.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import classNames from 'classnames';
import { PanelModel } from '../panel_model';
import { DashboardModel } from '../dashboard_model';
import { store } from 'app/store/configureStore';
@ -55,7 +56,6 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
return (
<div className="viz-editor">
<VizTypePicker currentType={this.props.panel.type} onTypeChanged={this.props.onTypeChanged} />
<h5 className="page-heading p-t-2">Options</h5>
{this.renderPanelOptions()}
</div>
);
@ -73,7 +73,7 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
onClose = () => {
store.dispatch(
updateLocation({
query: { tab: false, fullscreen: false, edit: false },
query: { tab: null, fullscreen: null, edit: null },
partial: true,
})
);
@ -85,6 +85,11 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
return (
<div className="panel-editor-container__editor">
<div className="panel-editor-resizer">
<div className="panel-editor-resizer__handle">
<div className="panel-editor-resizer__handle-dots" />
</div>
</div>
<div className="panel-editor__aside">
<h2 className="panel-editor__aside-header">
<i className="fa fa-cog" />

39
public/app/features/dashboard/dashgrid/VizTypePicker.tsx
View File

@ -1,7 +1,9 @@
import React, { PureComponent } from 'react';
import classNames from 'classnames';
import config from 'app/core/config';
import { PanelPlugin } from 'app/types/plugins';
import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
import _ from 'lodash';
interface Props {
@ -40,30 +42,45 @@ export class VizTypePicker extends PureComponent<Props, State> {
return (
<div key={index} className={cssClass} onClick={() => this.props.onTypeChanged(plugin)} title={plugin.name}>
<img className="viz-picker__item-img" src={plugin.info.logos.small} />
<div className="viz-picker__item-name">{plugin.name}</div>
<img className="viz-picker__item-img" src={plugin.info.logos.small} />
</div>
);
};
renderFilters() {
return (
<>
<label className="gf-form--has-input-icon">
<input type="text" className="gf-form-input width-13" placeholder="" />
<i className="gf-form-input-icon fa fa-search" />
</label>
<div>
<button className="btn toggle-btn gf-form-btn active">Basic Types</button>
<button className="btn toggle-btn gf-form-btn">Master Types</button>
</div>
</>
);
}
render() {
const { currentType } = this.props;
const { pluginList } = this.state;
return (
<div className="viz-picker">
<div className="viz-picker__bar">
<label className="gf-form-label">Visualization</label>
<label className="gf-form-input width-10">{this.props.currentType}</label>
<div className="gf-form--grow" />
<label className="gf-form--has-input-icon">
<input type="text" className="gf-form-input width-13" placeholder="" />
<i className="gf-form-input-icon fa fa-search" />
<label className="gf-form-input width-10">
<span>{currentType}</span>
</label>
<div>
<button className="btn toggle-btn gf-form-btn active">Basic Types</button>
<button className="btn toggle-btn gf-form-btn">Master Types</button>
</div>
<div className="gf-form--grow" />
{this.renderFilters()}
</div>
<div className="viz-picker__items">{this.state.pluginList.map(this.renderVizPlugin)}</div>
<CustomScrollbar>
<div className="viz-picker__items">{pluginList.map(this.renderVizPlugin)}</div>
</CustomScrollbar>
</div>
);
}

61
public/sass/components/_viz_editor.scss
View File

@ -24,17 +24,14 @@
}
}
.viz-picker {
}
.viz-picker__search {
flex-grow: 0;
}
.viz-picker__items {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
// for scrollbar
margin-bottom: 10px;
}
.viz-picker__item {
@ -42,16 +39,16 @@
box-shadow: $card-shadow;
border-radius: 3px;
padding: $spacer;
height: 60px;
width: 157px;
height: 70px;
width: 130px;
flex-shrink: 0;
flex-direction: column;
text-align: center;
margin: 0 7px 7px 0;
cursor: pointer;
display: flex;
flex-shrink: 0;
margin-right: 6px;
border: 1px solid transparent;
@include left-brand-border;
align-items: center;
&:hover {
background: $card-background-hover;
@ -68,17 +65,15 @@
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: $font-size-h5;
font-size: $font-size-sm;
display: flex;
flex-direction: column;
align-self: center;
padding-left: $spacer;
font-size: $font-size-md;
color: $text-muted;
height: 20px;
}
.viz-picker__item-img {
height: 100%;
height: 40px;
}
.panel-editor-container {
@ -96,6 +91,7 @@
display: flex;
flex-direction: row;
height: 65%;
position: relative;
}
.panel-editor__content {
@ -152,9 +148,8 @@
.panel-editor__aside-header {
color: $text-muted;
font-size: $font-size-h3;
padding: 20px 20px 10px 20px;
padding: 20px 30px 10px 20px;
white-space: nowrap;
margin-bottom: $spacer;
i {
font-size: 25px;
@ -168,3 +163,33 @@
display: flex;
margin-bottom: $spacer;
}
.panel-editor-resizer {
position: absolute;
height: 2px;
width: 100%;
top: 1px;
padding-left: 32px;
}
.panel-editor-resizer__handle {
display: inline-block;
width: 100px;
position: relative;
background: $input-label-bg;
top: -12px;
border-radius: 2px;
box-shadow: 0 0 8px $black;
height: 8px;
cursor: grabbing;
}
.panel-editor-resizer__handle-dots {
border-top: 2px dotted $text-color-faint;
position: relative;
top: 3px;
}
.panel-editor {
height: calc(100% - 10px);
}