mirrors/posthog
0
0
Fork 0
mirror of https://github.com/PostHog/posthog.git synced 2024-11-21 21:49:51 +01:00
Code Issues Releases Activity

fix: resizeable insights (#20701)

Browse Source
This commit is contained in:
David Newell 2024-03-05 10:49:38 +00:00 committed by GitHub
parent 59b850a0b1
commit f4bcf48fa1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 59 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx
View File

@ -38,7 +38,7 @@ export const Template: Story = () => {
<div>
<h5>basic text</h5>
<TextCard
className="react-grid-item min-h-60 min-w-[15rem]"
className="react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]"
dashboardId={1}
textTile={makeTextTile('basic text')}
/>
@ -46,7 +46,7 @@ export const Template: Story = () => {
<div>
<h5>markdown text</h5>
<TextCard
className="react-grid-item min-h-60 min-w-[15rem]"
className="react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]"
dashboardId={1}
textTile={makeTextTile('# a title \n\n **formatted** _text_')}
/>
@ -54,7 +54,7 @@ export const Template: Story = () => {
<div>
<h5>Long text</h5>
<TextCard
className="react-grid-item min-h-60 min-w-[15rem]"
className="react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]"
style={{ height: '250px', width: '300px' }}
dashboardId={1}
textTile={makeTextTile(
@ -65,7 +65,7 @@ export const Template: Story = () => {
<div>
<h5>with resize handles</h5>
<TextCard
className="react-grid-item min-h-60 min-w-[15rem]"
className="react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]"
dashboardId={1}
showResizeHandles={true}
canResizeWidth={true}
@ -76,7 +76,7 @@ export const Template: Story = () => {
<div className="w-full" style={{ height: '200px' }}>
<h5>Large Card</h5>
<TextCard
className="h-full w-full react-grid-item"
className="h-full w-full react-grid-item react-draggable cssTransforms react-resizable"
dashboardId={1}
textTile={makeTextTile('basic text')}
/>

46
frontend/src/scenes/dashboard/DashboardItems.scss
View File

@ -14,11 +14,25 @@
}
}
.react-grid-item.cssTransforms {
transition-property: transform;
}
.react-grid-item.resizing {
z-index: 1;
will-change: width, height;
}
.react-grid-item.react-draggable {
cursor: move;
}
.react-grid-item.react-draggable-dragging {
z-index: 105;
transition: none;
will-change: transform;
}
.react-grid-item.dropping {
visibility: hidden;
}
@ -34,9 +48,41 @@
transition: 100ms ease;
}
.react-resizable-hide > .react-resizable-handle {
display: none;
}
.react-grid-item {
transition: all 100ms ease;
transition-property: left, top;
& > .react-resizable-handle {
position: absolute;
right: -0.5rem;
bottom: -0.5rem;
z-index: 10;
width: 2rem;
height: 2rem;
cursor: se-resize;
}
& > .react-resizable-handle.react-resizable-handle-se {
cursor: se-resize;
}
& > .react-resizable-handle.react-resizable-handle-e {
top: 0;
bottom: 2rem;
height: auto;
cursor: ew-resize;
}
& > .react-resizable-handle.react-resizable-handle-s {
right: 2rem;
left: 0;
width: auto;
cursor: ns-resize;
}
}
// All dropdowns must be below top navigation

2
package.json
View File

@ -152,10 +152,12 @@
"rc-trigger": "^5.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.2.0",
"react-grid-layout": "^1.3.0",
"react-intersection-observer": "^9.5.3",
"react-markdown": "^5.0.3",
"react-modal": "^3.15.1",
"react-resizable": "^3.0.5",
"react-shadow": "^20.3.0",
"react-syntax-highlighter": "^15.5.0",
"react-textarea-autosize": "^8.3.3",

6
pnpm-lock.yaml
View File

@ -274,6 +274,9 @@ dependencies:
react-dom:
specifier: ^18.2.0
version: 18.2.0(react@18.2.0)
react-draggable:
specifier: ^4.2.0
version: 4.4.5(react-dom@18.2.0)(react@18.2.0)
react-grid-layout:
specifier: ^1.3.0
version: 1.3.4(react-dom@18.2.0)(react@18.2.0)
@ -286,6 +289,9 @@ dependencies:
react-modal:
specifier: ^3.15.1
version: 3.16.1(react-dom@18.2.0)(react@18.2.0)
react-resizable:
specifier: ^3.0.5
version: 3.0.5(react-dom@18.2.0)(react@18.2.0)
react-shadow:
specifier: ^20.3.0
version: 20.4.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)