mirror of
https://github.com/grafana/grafana.git
synced 2025-02-12 16:45:43 -06:00
* WIP: First approach to scene grid layout * Flex layout * Grid layout rows * Allow passing custom props to scene object renderers * Allow nesting grid layouts * Re-layout nested grid's enclosing grids * Update public/app/features/scenes/components/layout/SceneGridLayout.tsx Co-authored-by: Torkel Ödegaard <torkel@grafana.com> * Review comments * Got rid of flex & grid child layout objects * WIP: Recreating rows behaviour (almost working) * Major progress on rows * remove nested grid example (not supported) * Remove removal damn * Trying to use children directly * Ts fixes * chore: Fix TS * Fix issue when row bboxes when not updated on layout change * Now the tricky part * working * Removing some code * needs more work * Getting some thing working * Getting some thing working * fix toggle row * Starting to work * Fix * Yay it's working * Updates * Updates * Added some sorting of children * Updated comment * Simplify sorting * removed commented code * Updated * Pushed a fix so we can move a panel out from a row and into the parent grid * simplify move logic * Minor simplification * Removed some unnesary code * fixed comment * Removed unnessary condition in findGridSceneParent * remove unnessary if * Simplify toGridCell * removed duplicate if * removed unused code * Adds grid demo with different data scenarios * Make it green * Demo grid with multiple time ranges * Move child atomically * Add tests * Cleanup * Fix unused import Co-authored-by: Torkel Ödegaard <torkel@grafana.com> Co-authored-by: Ivan Ortega <ivanortegaalba@gmail.com>
19 lines
406 B
TypeScript
19 lines
406 B
TypeScript
import React from 'react';
|
|
|
|
import { Icon } from '@grafana/ui';
|
|
|
|
export function SceneDragHandle({ layoutKey, className }: { layoutKey: string; className?: string }) {
|
|
return (
|
|
<div
|
|
className={`${className} grid-drag-handle-${layoutKey}`}
|
|
style={{
|
|
width: '20px',
|
|
height: '20px',
|
|
cursor: 'move',
|
|
}}
|
|
>
|
|
<Icon name="draggabledots" />
|
|
</div>
|
|
);
|
|
}
|