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 {
NavTree []*NavLink
BuildVersion string
BuildCommit string
Theme string
NewGrafanaVersionExists bool
NewGrafanaVersion string
}
......
pkg/api/index.go
......@@ -62,6 +62,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
HelpFlags1: c.HelpFlags1,
},
Settings: settings,
Theme: prefs.Theme,
AppUrl: appUrl,
AppSubUrl: appSubUrl,
GoogleAnalyticsId: setting.GoogleAnalyticsId,
......
public/app/features/dashboard/PanelModel.ts
......@@ -70,5 +70,9 @@ export class PanelModel {
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';
import sizeMe from 'react-sizeme';
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) {
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 (
<ReactGridLayout
width={gridWidth}
width={lastGridWidth}
className="layout"
isDraggable={true}
isResizable={true}
......@@ -33,6 +38,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize}) {
draggableHandle=".grid-drag-handle"
layout={layout}
onResize={onResize}
onResizeStop={onResizeStop}
onLayoutChange={onLayoutChange}>
{children}
</ReactGridLayout>
......@@ -56,6 +62,8 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
this.panelContainer = this.props.getPanelContainer();
this.onLayoutChange = this.onLayoutChange.bind(this);
this.onResize = this.onResize.bind(this);
this.onResizeStop = this.onResizeStop.bind(this);
this.onWidthChange = this.onWidthChange.bind(this);
// subscribe to dashboard events
this.dashboard = this.panelContainer.getDashboard();
......@@ -98,10 +106,21 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
this.forceUpdate();
}
onWidthChange() {
console.log('width change');
for (const panel of this.dashboard.panels) {
panel.resizeDone();
}
}
onResize(layout, oldItem, newItem) {
this.panelMap[newItem.i].updateGridPos(newItem);
}
onResizeStop(layout, oldItem, newItem) {
this.panelMap[newItem.i].resizeDone();
}
renderPanels() {
const panelElements = [];
......@@ -119,7 +138,12 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
render() {
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()}
</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 @@
// ---------------------
@include media-breakpoint-down(sm) {
div.panel {
width: 100% !important;
padding: 0px !important;
}
.panel-margin {
margin-right: 0;
margin-left: 0;
}
// div.panel {
// width: 100% !important;
// padding: 0px !important;
// }
// .panel-margin {
// margin-right: 0;
// margin-left: 0;
// }
body {
padding: 0;
}
......
public/sass/components/_dashboard_grid.scss
......@@ -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 {
}
}
.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-menu-toggle {
visibility: visible;
transition: opacity 0.1s ease-in 0.2s;
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 {
......
public/views/index.template.html
......@@ -10,17 +10,14 @@
<base href="[[.AppSubUrl]]/" />
[[if .User.LightTheme]]
<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="stylesheet" href="public/build/grafana.[[ .Theme ]].css?v[[ .BuildVersion ]]">
<link rel="icon" type="image/png" href="public/img/fav32.png">
<link rel="mask-icon" href="public/img/grafana_mask_icon.svg" color="#F05A28">
</head>
<body ng-cloak>
<body ng-cloak class="theme-[[ .Theme ]]">
<grafana-app class="grafana-app">
<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