Merge pull request #1141 from merico-dev/1140-show-size-info-when-resizing-a-panel

1140 able to type in width & height for a panel

Author: GerilLeto

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "10.22.0",
+  "version": "10.23.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "10.22.0",
+  "version": "10.23.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/view/layout/index.css

@@ -5,7 +5,8 @@
   padding: 0;
 }
 .react-grid-item.react-grid-placeholder {
-  /* background: none !important; */
+  background: black !important;
+  opacity: 0.3 !important;
 }
 .panel-grid-item {
   padding: 5px;

dashboard/src/dashboard-editor/ui/settings/content/edit-panel/panel-config/edit-style.tsx

@@ -1,4 +1,4 @@
-import { Switch } from '@mantine/core';
+import { Divider, Group, NumberInput, Stack, Switch, Text } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
 import { useEditPanelContext } from '~/contexts/panel-context';
 
@@ -8,11 +8,38 @@ export const EditStyle = observer(() => {
 
   return (
     <>
-      <Switch
-        label="Border"
-        checked={style.border.enabled}
-        onChange={(event) => style.border.setEnabled(event.currentTarget.checked)}
-      />
+      <Divider mb={-10} label="Style" labelPosition="center" variant="dashed" />
+      <Stack spacing={20}>
+        <Group grow align="top">
+          <NumberInput
+            label="Width"
+            min={1}
+            max={36}
+            step={1}
+            precision={0}
+            rightSection={<Text size={12}>of 36 columns</Text>}
+            styles={{ rightSection: { width: '110px' } }}
+            value={panel.layout.w}
+            onChange={(v) => {
+              v && panel.layout.setWidth(v);
+            }}
+          />
+          <NumberInput
+            label="Height"
+            rightSection={<Text size={12}>px</Text>}
+            styles={{ rightSection: { width: '40px' } }}
+            value={panel.layout.h}
+            onChange={(v) => {
+              v && panel.layout.setHeight(v);
+            }}
+          />
+        </Group>
+        <Switch
+          label="Border"
+          checked={style.border.enabled}
+          onChange={(event) => style.border.setEnabled(event.currentTarget.checked)}
+        />
+      </Stack>
     </>
   );
 });

dashboard/src/dashboard-editor/ui/settings/content/edit-panel/panel-config/index.tsx

@@ -6,7 +6,6 @@ import { EditTitle } from './title';
 export function PanelConfig() {
   return (
     <Stack sx={{ height: '100%' }}>
-      <Divider label="Style" labelPosition="center" variant="dashed" />
       <EditStyle />
       <Divider label="Info" labelPosition="center" variant="dashed" />
       <EditTitle />

dashboard/src/model/meta-model/dashboard/content/panel/layout.ts

@@ -33,4 +33,10 @@ export const PanelLayoutMeta = types
       self.moved = !!moved;
       self.static = !!layout.static;
     },
+    setWidth(w: number) {
+      self.w = w;
+    },
+    setHeight(h: number) {
+      self.h = h;
+    },
   }));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "10.22.0",
+  "version": "10.23.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "10.22.0",
+  "version": "10.23.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "10.22.0",
+  "version": "10.23.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"