Skip to content

N
nexpie-grafana-theme
Commit 3a089dd0 by Torkel Ödegaard
Options

newgrid: various fixes

parent 0d9ac4d5
Showing with 66 additions and 70 deletions
pkg/api/dtos/index.go
...@@ -10,6 +10,7 @@ type IndexViewData struct { ...@@ -10,6 +10,7 @@ type IndexViewData struct {
NavTree []*NavLink NavTree []*NavLink
BuildVersion string BuildVersion string
BuildCommit string BuildCommit string
Theme string
NewGrafanaVersionExists bool NewGrafanaVersionExists bool
NewGrafanaVersion string NewGrafanaVersion string
} }
......
pkg/api/index.go
...@@ -62,6 +62,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -62,6 +62,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
HelpFlags1: c.HelpFlags1, HelpFlags1: c.HelpFlags1,
}, },
Settings: settings, Settings: settings,
Theme: prefs.Theme,
AppUrl: appUrl, AppUrl: appUrl,
AppSubUrl: appSubUrl, AppSubUrl: appSubUrl,
GoogleAnalyticsId: setting.GoogleAnalyticsId, GoogleAnalyticsId: setting.GoogleAnalyticsId,
......
public/app/features/dashboard/PanelModel.ts
...@@ -70,5 +70,9 @@ export class PanelModel { ...@@ -70,5 +70,9 @@ export class PanelModel {
this.events.emit('panel-size-changed'); this.events.emit('panel-size-changed');
} }
} }
resizeDone() {
this.events.emit('panel-size-changed');
}
} }
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
...@@ -10,17 +10,22 @@ import classNames from 'classnames'; ...@@ -10,17 +10,22 @@ import classNames from 'classnames';
import sizeMe from 'react-sizeme'; import sizeMe from 'react-sizeme';
const COLUMN_COUNT = 12; const COLUMN_COUNT = 12;
let lastGridWidth = 1200;
function GridWrapper({size, layout, onLayoutChange, children, onResize}) { function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange}) {
if (size.width === 0) { if (size.width === 0) {
console.log('size is zero!'); console.log('size is zero!');
} }
const gridWidth = size.width > 0 ? size.width : 1200; const width = size.width > 0 ? size.width : lastGridWidth;
if (width !== lastGridWidth) {
onWidthChange();
lastGridWidth = width;
}
return ( return (
<ReactGridLayout <ReactGridLayout
width={gridWidth} width={lastGridWidth}
className="layout" className="layout"
isDraggable={true} isDraggable={true}
isResizable={true} isResizable={true}
...@@ -33,6 +38,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize}) { ...@@ -33,6 +38,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize}) {
draggableHandle=".grid-drag-handle" draggableHandle=".grid-drag-handle"
layout={layout} layout={layout}
onResize={onResize} onResize={onResize}
onResizeStop={onResizeStop}
onLayoutChange={onLayoutChange}> onLayoutChange={onLayoutChange}>
{children} {children}
</ReactGridLayout> </ReactGridLayout>
...@@ -56,6 +62,8 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> { ...@@ -56,6 +62,8 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
this.panelContainer = this.props.getPanelContainer(); this.panelContainer = this.props.getPanelContainer();
this.onLayoutChange = this.onLayoutChange.bind(this); this.onLayoutChange = this.onLayoutChange.bind(this);
this.onResize = this.onResize.bind(this); this.onResize = this.onResize.bind(this);
this.onResizeStop = this.onResizeStop.bind(this);
this.onWidthChange = this.onWidthChange.bind(this);
// subscribe to dashboard events // subscribe to dashboard events
this.dashboard = this.panelContainer.getDashboard(); this.dashboard = this.panelContainer.getDashboard();
...@@ -98,10 +106,21 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> { ...@@ -98,10 +106,21 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
this.forceUpdate(); this.forceUpdate();
} }
onWidthChange() {
console.log('width change');
for (const panel of this.dashboard.panels) {
panel.resizeDone();
}
}
onResize(layout, oldItem, newItem) { onResize(layout, oldItem, newItem) {
this.panelMap[newItem.i].updateGridPos(newItem); this.panelMap[newItem.i].updateGridPos(newItem);
} }
onResizeStop(layout, oldItem, newItem) {
this.panelMap[newItem.i].resizeDone();
}
renderPanels() { renderPanels() {
const panelElements = []; const panelElements = [];
...@@ -119,7 +138,12 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> { ...@@ -119,7 +138,12 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
render() { render() {
return ( return (
<SizedReactLayoutGrid layout={this.buildLayout()} onLayoutChange={this.onLayoutChange} onResize={this.onResize}> <SizedReactLayoutGrid
layout={this.buildLayout()}
onLayoutChange={this.onLayoutChange}
onWidthChange={this.onWidthChange}
onResize={this.onResize}
onResizeStop={this.onResizeStop}>
{this.renderPanels()} {this.renderPanels()}
</SizedReactLayoutGrid> </SizedReactLayoutGrid>
); );
......
public/img/resize-handle-white.svg 0 → 100644
<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Untitled-Page%201" viewBox="0 0 6 6" style="background-color:#ffffff00" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="6px" height="6px"
>
<g opacity="0.302">
<path d="M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z" fill="#FFFFFF"/>
</g>
</svg>
\ No newline at end of file
public/sass/_old_responsive.scss
...@@ -7,14 +7,14 @@ ...@@ -7,14 +7,14 @@
// --------------------- // ---------------------
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
div.panel { // div.panel {
width: 100% !important; // width: 100% !important;
padding: 0px !important; // padding: 0px !important;
} // }
.panel-margin { // .panel-margin {
margin-right: 0; // margin-right: 0;
margin-left: 0; // margin-left: 0;
} // }
body { body {
padding: 0; padding: 0;
} }
......
public/sass/components/_dashboard_grid.scss
...@@ -21,4 +21,13 @@ ...@@ -21,4 +21,13 @@
} }
} }
.react-grid-item {
// overflow: auto;
}
.theme-dark {
.react-grid-item > .react-resizable-handle {
background-image: url('../img/resize-handle-white.svg');
}
}
public/sass/pages/_dashboard.scss
...@@ -173,64 +173,12 @@ div.flot-text { ...@@ -173,64 +173,12 @@ div.flot-text {
} }
} }
.panel-full-edit {
}
.panel-highlight {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
}
.panel-hover-highlight { .panel-hover-highlight {
.panel-menu-toggle { .panel-menu-toggle {
visibility: visible; visibility: visible;
transition: opacity 0.1s ease-in 0.2s; transition: opacity 0.1s ease-in 0.2s;
opacity: 1; opacity: 1;
} }
.resize-panel-handle {
visibility: visible;
transition: opacity 0.1s ease-in 0.2s;
opacity: 1;
}
}
.on-drag-hover {
.panel-container {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8)
}
}
.panel-drop-zone {
display: none;
.panel-container {
border: $panel-border;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
color: $text-color-faint;
font-weight: bold;
background: $panel-drop-zone-bg;
}
}
.panel-in-fullscreen {
.panel-drop-zone {
display: none !important;
}
.grid-stack > .grid-stack-item {
position: unset;
display: none;
}
.panel-fullscreen {
display: block !important;
> .ui-resizable-handle {
display: none !important;
}
}
} }
.panel-time-info { .panel-time-info {
......
public/views/index.template.html
...@@ -10,17 +10,14 @@ ...@@ -10,17 +10,14 @@
<base href="[[.AppSubUrl]]/" /> <base href="[[.AppSubUrl]]/" />
[[if .User.LightTheme]] <link rel="stylesheet" href="public/build/grafana.[[ .Theme ]].css?v[[ .BuildVersion ]]">
<link rel="stylesheet" href="public/build/grafana.light.css?v[[ .BuildVersion ]]">
[[else]]
<link rel="stylesheet" href="public/build/grafana.dark.css?v[[ .BuildVersion ]]">
[[end]]
<link rel="icon" type="image/png" href="public/img/fav32.png"> <link rel="icon" type="image/png" href="public/img/fav32.png">
<link rel="mask-icon" href="public/img/grafana_mask_icon.svg" color="#F05A28"> <link rel="mask-icon" href="public/img/grafana_mask_icon.svg" color="#F05A28">
</head> </head>
<body ng-cloak> <body ng-cloak class="theme-[[ .Theme ]]">
<grafana-app class="grafana-app"> <grafana-app class="grafana-app">
<sidemenu class="sidemenu"></sidemenu> <sidemenu class="sidemenu"></sidemenu>
......
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