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

PanelEdit: Display drag indicators on draggable sections (#41711)

Browse Source 
* PanelEdit: Display drag indicators on draggable sections

* Move drag indicators between the sections
This commit is contained in:
Ashley Harrison 2021-11-17 13:46:24 +00:00 committed by GitHub
parent 5498203507
commit 5452c069f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
View File

@ -134,18 +134,33 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
const paneSpacing = theme.spacing.md;
const resizer = css`
font-style: italic;
background: transparent;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
border-color: transparent;
border-style: solid;
transition: 0.2s border-color ease-in-out;
position: relative;
&::before {
content: '';
position: absolute;
transition: 0.2s border-color ease-in-out;
}
&::after {
background: ${theme.colors.panelBorder};
content: '';
position: absolute;
left: 50%;
top: 50%;
transition: 0.2s background ease-in-out;
transform: translate(-50%, -50%);
border-radius: 4px;
}
&:hover {
border-color: ${handleColor};
&::before {
border-color: ${handleColor};
}
&::after {
background: ${handleColor};
}
}
`;
@ -155,8 +170,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
css`
cursor: col-resize;
width: ${paneSpacing};
border-right-width: 1px;
margin-top: 18px;
&::before {
border-right: 1px solid transparent;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
&::after {
height: 200px;
width: 4px;
}
`
),
resizerH: cx(
@ -164,11 +189,19 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
css`
height: ${paneSpacing};
cursor: row-resize;
position: relative;
top: 0px;
z-index: 1;
border-top-width: 1px;
margin-left: ${paneSpacing};
&::before {
border-top: 1px solid transparent;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
&::after {
height: 4px;
width: 200px;
}
`
),
};