Merge pull request #1859 from merico-dev/avoid-show-title-hack

avoid show title hack

Author: ZeekoZhu

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.58.4",
+  "version": "14.58.5",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-dev/table"

dashboard/src/components/panel/panel-render/panel-render-base.css

@@ -43,6 +43,11 @@
   top: 16px;
   right: 16px;
 }
+
+.panel-root .panel-top-right-actions-placeholder {
+  width: 1px;
+  height: 24px;
+}
 .panel-root .panel-viz-section {
   height: 100%;
 }

dashboard/src/components/panel/panel-render/top-right-actions/index.tsx

@@ -14,22 +14,26 @@ export const PanelTopRightActions = observer(({ dropdownContent, showDropdownMen
 
   const showDropdown = withPanelTitle && showDropdownMenu;
 
+  const hasTopRightActions = panelAddonSlotId || dropdownContent;
   return (
-    <Group
-      className="panel-top-right-actions"
-      gap="xs"
-      wrap="nowrap"
-      justify="flex-end"
-      pos="absolute"
-      sx={{
-        zIndex: 410,
-      }}
-    >
-      {/* Panel addons portal target */}
-      {withAddon && panelAddonSlotId && <div id={panelAddonSlotId}></div>}
+    <>
+      {hasTopRightActions && <div className="panel-top-right-actions-placeholder"></div>}
+      <Group
+        className="panel-top-right-actions"
+        gap="xs"
+        wrap="nowrap"
+        justify="flex-end"
+        pos="absolute"
+        sx={{
+          zIndex: 410,
+        }}
+      >
+        {/* Panel addons portal target */}
+        {withAddon && panelAddonSlotId && <div id={panelAddonSlotId}></div>}
 
-      {/* Panel dropdown menu */}
-      {showDropdown && dropdownContent}
-    </Group>
+        {/* Panel dropdown menu */}
+        {showDropdown && dropdownContent}
+      </Group>
+    </>
   );
 });

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

@@ -17,7 +17,6 @@ export const EditTitle = observer(() => {
           label={t('panel.show_title')}
           sx={{ userSelect: 'none' }}
         />
-        <Checkbox size="sm" checked disabled label={t('panel.use_name_as_title')} />
       </Group>
     </Stack>
   );

dashboard/src/i18n/en.ts

@@ -403,7 +403,7 @@ export const en = {
       panel_name: 'Panel Name',
       panel_description: 'Description',
       panel_description_click: 'Click to see description',
-      show_title: 'Show title',
+      show_title: 'Show as Panel title',
       use_name_as_title: 'Use name as title',
       settings: {
         change_view: 'Move into Another View',

dashboard/src/i18n/zh.ts

@@ -403,7 +403,7 @@ export const zh = {
       panel_name: '卡片名',
       panel_description: '卡片描述',
       panel_description_click: '点击查看卡片描述',
-      show_title: '展示卡片标题',
+      show_title: '作为卡片标题展示',
       use_name_as_title: '使用卡片名作为标题',
       settings: {
         change_view: '移至另一个视图下',

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.58.4",
+  "version": "14.58.5",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-dev/table"

website/src/utils/install-dashboard-website-plugin.tsx

@@ -1,6 +1,6 @@
 import { IPanelAddonRenderProps, pluginManager, useVisibleFilters } from '@devtable/dashboard';
 import { ActionIcon, Tooltip } from '@mantine/core';
-import { IconBug, IconCode } from '@tabler/icons-react';
+import { IconCode } from '@tabler/icons-react';
 import React from 'react';
 
 export const PrintEChartsOptionAddon = ({ viz, isInEditMode }: IPanelAddonRenderProps) => {
@@ -20,22 +20,20 @@ export const PrintEChartsOptionAddon = ({ viz, isInEditMode }: IPanelAddonRender
     return null;
   }
   return (
-    <div style={{ position: 'absolute', bottom: 2, right: 2, zIndex: 400 }}>
-      <Tooltip label="Print ECharts option to console">
-        <ActionIcon
-          onClick={(ev) => {
-            ev.stopPropagation();
-            ev.preventDefault();
-            console.log('debug', renderOptions, 'filters', formattedFilters);
-          }}
-          size="sm"
-          variant="white"
-          color="gray"
-        >
-          <IconCode />
-        </ActionIcon>
-      </Tooltip>
-    </div>
+    <Tooltip label="Print ECharts option to console">
+      <ActionIcon
+        onClick={(ev) => {
+          ev.stopPropagation();
+          ev.preventDefault();
+          console.log('debug', renderOptions, 'filters', formattedFilters);
+        }}
+        variant="subtle"
+        color="black"
+        size="md"
+      >
+        <IconCode size={14} style={{ width: '70%', height: '70%' }} />
+      </ActionIcon>
+    </Tooltip>
   );
 };
 pluginManager.install({