style: details width and tooltips for buttons (#374)

* style: init responsive details width * style: tables details * style: details min width * style(tables): icons width and margin * feat(tables): add tooltip for action buttons * style: settings buttons in menu
GreptimeTeam · Dec 4, 2023 · 584b528 · 584b528
1 parent 84b527c
commit 584b528
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 83 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -39,7 +39,6 @@
 
   if (import.meta.env.MODE === 'development' || import.meta.env.MODE === 'production') {
     // Assuming local greptimeDB is up and running
-    // TODO: Refresh databases if needed
     fetchDatabases()
   }
 </script>
diff --git a/src/api/editor.ts b/src/api/editor.ts
@@ -42,7 +42,6 @@ const makePromParams = (code: string, promForm: PromForm) => {
   let end
   const appStore = useAppStore()
   if (promForm.time !== 0) {
-    // TODO: move this into a function?
     const now = dayjs()
     end = now.unix().toString()
     start = now.subtract(promForm.time, 'minute').unix().toString()

diff --git a/src/assets/style/global.less b/src/assets/style/global.less
@@ -123,6 +123,11 @@ body {
   border-radius: 6px;
 }
 
+.arco-tooltip-mini {
+  padding: 4px 6px;
+  border-radius: 4px;
+}
+
 .arco-trigger-arrow {
   display: none;
 }

diff --git a/src/components/navbar/index.vue b/src/components/navbar/index.vue
@@ -24,14 +24,19 @@ a-layout.navbar
   a-layout-footer
     ul.footer
       li
-        a-button(style="width: 100%" :class="{ hover: globalSettings }" @click="setVisible")
+        a-button(
+          style="width: 100%"
+          type="text"
+          :class="{ hover: globalSettings }"
+          @click="setVisible"
+        )
           template(#icon)
             svg.icon-20
               use(href="#settings")
           | {{ $t('settings.title') }}
       li
         a-dropdown.menu-dropdown(trigger="hover" position="right" :popup-max-height="false")
-          a-button(style="width: 100%")
+          a-button(style="width: 100%" type="text")
             template(#icon)
               svg.icon-18
                 use(href="#menu")
@@ -122,6 +127,7 @@ a-layout.navbar
       margin-bottom: 2px;
       border-left: 2px solid transparent;
       border-radius: 0;
+      line-height: 44px;
     }
     :deep(.arco-menu-vertical .arco-menu-inner) {
       padding: 0;
@@ -185,25 +191,22 @@ a-layout.navbar
     display: flex;
     list-style: none;
     flex-direction: column;
-    padding: 0 24px;
-    .arco-btn-secondary[type='button'] {
-      background: var(--th-bg-color);
+    padding: 0;
+    margin: 0;
+    .arco-btn-text[type='button'] {
       color: var(--small-font-color);
       font-size: 16px;
       display: flex;
       justify-content: flex-start;
-      padding-left: 62px;
+      padding-left: 86px;
       height: 44px;
+      border-top: 1px solid var(--border-color);
+      border-radius: 0;
     }
-    .arco-btn-secondary[type='button']:hover,
-    .arco-btn-secondary.hover,
-    .arco-btn-secondary.arco-dropdown-open {
-      border-color: inherit;
-      background: var(--light-brand-color);
-      color: var(--brand-color);
-      :deep(.arco-btn-icon) {
-        color: var(--brand-color);
-      }
+    .arco-btn-text[type='button']:hover,
+    .arco-btn-text.hover,
+    .arco-btn-text.arco-dropdown-open {
+      background: var(--th-bg-color);
     }
     :deep(.arco-btn-icon) {
       width: 20px;
@@ -213,9 +216,6 @@ a-layout.navbar
     li {
       display: flex;
       align-items: center;
-      &:first-of-type {
-        margin-bottom: 10px;
-      }
     }
 
     .arco-link {

diff --git a/src/components/text-copyable.vue b/src/components/text-copyable.vue
@@ -6,6 +6,7 @@ a-typography-text(
   @copy="emit('copy')"
   :class="class"
   :copy-delay="1000"
+  :copy-tooltip-props="{ 'mini' : true }"
 )
   span(v-if="showData") {{ data }}
   template(#copy-icon="{ copied }")

diff --git a/src/hooks/data-chart.ts b/src/hooks/data-chart.ts
@@ -11,10 +11,6 @@ export default function useDataChart(data: ResultType) {
   const hasTimestamp = data.dimensionsAndXName.xAxis !== ''
   const schemaInRecords = data.records.schema
 
-  // TODO: Add support for more data types not just numbers.
-
-  // TODO: Use one computed for all options.
-
   const yOptions = computed(() => {
     if (!schemaInRecords || !hasTimestamp) return []
     return schemaInRecords.column_schemas

diff --git a/src/views/dashboard/locale/en-US.ts b/src/views/dashboard/locale/en-US.ts
@@ -60,4 +60,7 @@ export default {
   'dashboard.maxTime': 'Latest timestamp',
   'dashboard.rowCount': 'Row count',
   'dashboard.createTable': 'Create table SQL',
+  'dashboard.columns': 'Columns',
+  'dashboard.details': 'Information',
+  'dashboard.quickSelect': 'Quick Query',
 }