diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx index f9a56718c5e..e7778a31fdb 100644 --- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx +++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx @@ -18,13 +18,18 @@ export class DashboardRow extends React.Component { collapsed: this.props.panel.collapsed, }; - this.toggle = this.toggle.bind(this); - this.openSettings = this.openSettings.bind(this); - this.delete = this.delete.bind(this); - this.update = this.update.bind(this); + appEvents.on('template-variable-value-updated', this.onVariableUpdated); } - toggle() { + componentWillUnmount() { + appEvents.off('template-variable-value-updated', this.onVariableUpdated); + } + + onVariableUpdated = () => { + this.forceUpdate(); + } + + onToggle = () => { this.props.dashboard.toggleRow(this.props.panel); this.setState(prevState => { @@ -32,23 +37,23 @@ export class DashboardRow extends React.Component { }); } - update() { + onUpdate = () => { this.props.dashboard.processRepeats(); this.forceUpdate(); } - openSettings() { + onOpenSettings = () => { appEvents.emit('show-modal', { templateHtml: ``, modalClass: 'modal--narrow', model: { row: this.props.panel, - onUpdated: this.update.bind(this), + onUpdated: this.onUpdate, }, }); } - delete() { + onDelete = () => { appEvents.emit('confirm-modal', { title: 'Delete Row', text: 'Are you sure you want to remove this row and all its panels?', @@ -81,7 +86,7 @@ export class DashboardRow extends React.Component { return (
- + {title} @@ -90,16 +95,16 @@ export class DashboardRow extends React.Component { {canEdit && ( )} {this.state.collapsed === true && ( -
+
 
)} diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index a10fefadf10..4e9e69c4d2f 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -135,7 +135,7 @@ $input-padding-y-sm: 4px !default; $input-padding-x-lg: 20px !default; $input-padding-y-lg: 10px !default; -$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; +$input-height: 35px !default; $gf-form-margin: 0.2rem; $gf-form-input-height: 35px; diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index d4be5264d9d..6c450f7e6dd 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -40,9 +40,9 @@ background-color: $input-bg; border: 1px solid $input-border-color; border-radius: $input-border-radius; - box-sizing: content-box; display: inline-block; color: $text-color; + height: $gf-form-input-height; .label-tag { margin: 0 5px;