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

NewPanelEditor: Make variables wrap and small layout refactor (#23862)

Browse Source 
* NewPanelEditor: Make variables wrap  and small layout refactor

* review fix
This commit is contained in:
Dominik Prokop
2020-04-25 07:55:42 +02:00
committed by GitHub
parent ef5cbee2b3
commit c7b7a08baf
4 changed files with 65 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { renderOrCallToRender, Icon, stylesFactory, useTheme } from '@grafana/ui';
import { renderOrCallToRender, Icon, stylesFactory, useTheme, HorizontalGroup } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
import { css } from 'emotion';
import { useUpdateEffect } from 'react-use';
@@ -54,17 +54,19 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
return (
<div className={styles.wrapper}>
<div className={styles.header}>
<div
className={styles.titleWrapper}
onClick={() => {
setIsContentVisible(!isContentVisible);
}}
aria-label="Query operation row title"
>
<Icon name={isContentVisible ? 'angle-down' : 'angle-right'} className={styles.collapseIcon} />
{title && <span className={styles.title}>{titleElement}</span>}
</div>
{actions && actionsElement}
<HorizontalGroup justify="space-between">
<div
className={styles.titleWrapper}
onClick={() => {
setIsContentVisible(!isContentVisible);
}}
aria-label="Query operation row title"
>
<Icon name={isContentVisible ? 'angle-down' : 'angle-right'} className={styles.collapseIcon} />
{title && <span className={styles.title}>{titleElement}</span>}
</div>
{actions && actionsElement}
</HorizontalGroup>
</div>
{isContentVisible && <div className={styles.content}>{children}</div>}
</div>