mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-10-20 07:21:07 +08:00
1c90e62189
* feat: dashboard layout is updated * feat: onClick is made fixed * feat: layout is updated * feat: layout is updated * feat: layout is updated * fix: memo is removed and grid layout component is refactored to use use query * fix: saveDashboard is updated * feat: layout is fixed * fix: tsc error are fixed * fix: delete widgets is updated * fix: useMount once is added * fix: useMount once is removed * chore: removed the commented code Co-authored-by: Ankit Nayan <ankit@signoz.io>
82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import { Button as ButtonComponent, Card as CardComponent, Space } from 'antd';
|
|
import { StyledCSS } from 'container/GantChart/Trace/styles';
|
|
import RGL, { WidthProvider } from 'react-grid-layout';
|
|
import styled, { css } from 'styled-components';
|
|
|
|
const ReactGridLayoutComponent = WidthProvider(RGL);
|
|
|
|
export const Card = styled(CardComponent)`
|
|
&&& {
|
|
height: 100%;
|
|
}
|
|
|
|
.ant-card-body {
|
|
height: 95%;
|
|
padding: 0;
|
|
}
|
|
`;
|
|
|
|
interface Props {
|
|
isDarkMode: boolean;
|
|
}
|
|
|
|
export const CardContainer = styled.div<Props>`
|
|
:hover {
|
|
.react-resizable-handle {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-position: bottom right;
|
|
padding: 0 3px 3px 0;
|
|
background-repeat: no-repeat;
|
|
background-origin: content-box;
|
|
box-sizing: border-box;
|
|
cursor: se-resize;
|
|
|
|
${({ isDarkMode }): StyledCSS => {
|
|
const uri = `data:image/svg+xml,%3Csvg viewBox='0 0 6 6' style='background-color:%23ffffff00' 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'%0A%3E%3Cg opacity='0.302'%3E%3Cpath 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='${
|
|
isDarkMode ? 'white' : 'grey'
|
|
}'/%3E%3C/g%3E%3C/svg%3E`;
|
|
|
|
return css`
|
|
background-image: ${(): string => `url("${uri}")`};
|
|
`;
|
|
}}
|
|
}
|
|
`;
|
|
|
|
export const ReactGridLayout = styled(ReactGridLayoutComponent)`
|
|
border: 1px solid #434343;
|
|
margin-top: 1rem;
|
|
position: relative;
|
|
min-height: 40vh;
|
|
|
|
.react-grid-item.react-grid-placeholder {
|
|
background: grey;
|
|
opacity: 0.2;
|
|
transition-duration: 100ms;
|
|
z-index: 2;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;
|
|
}
|
|
`;
|
|
|
|
export const ButtonContainer = styled(Space)`
|
|
display: flex;
|
|
justify-content: end;
|
|
margin-top: 1rem;
|
|
`;
|
|
|
|
export const Button = styled(ButtonComponent)`
|
|
&&& {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
`;
|