Merge pull request #344 from dbeaver/fix/small-ui-changes

Fix/small UI changes
2026-09-24 16:04:36 +08:00 · 2021-04-09 11:58:40 +03:00
parent 448d113522 6440b3360d
commit 5dbff80253
17 changed files with 65 additions and 30 deletions
@@ -30,7 +30,7 @@
  </symbol>

  <symbol id="arrow" viewBox="0 0 16 16">
-    <path class="icon-fill" d="M9.45939791,6.31596408 L10.160304,9.99078745 C10.2637771,10.5332925 9.90787129,11.0569613 9.3653662,11.1604343 C9.24157151,11.1840459 9.11442925,11.1840445 8.9906351,11.1604301 L5.31603606,10.4594812 C4.77353329,10.355996 4.41763926,9.83231921 4.52112449,9.28981644 C4.55868393,9.09291783 4.65454981,8.91185096 4.79628428,8.77010783 L7.76997718,5.7962334 C8.16048955,5.40569718 8.79365453,5.40567786 9.18419074,5.79619023 C9.325954,5.93794483 9.42183756,6.11903666 9.45939791,6.31596408 Z" transform="translate(7.242641, 8.242641) rotate(-45.000000) translate(-7.242641, -8.242641) "></path>
+    <path class="icon-fill" d="M8.245 10.66L4 6.4155L5.41567 5.001L8.245 7.831L11.0743 5L12.49 6.4155L8.245 10.66Z" />
  </symbol>

  <symbol id="cross" viewBox="0 0 24 24">
@@ -32,7 +32,7 @@ export const settingsMenuStyles = css`
      margin-left: auto;
    }
    & Icon {
-      transform: rotate(-180deg);
+      transform: rotate(90deg);
    }
  }
 `;
@@ -32,6 +32,10 @@ const style = css`
    padding-right: 16px;
    text-overflow: ellipsis;
  }
+  Link {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
  Link:hover {
    cursor: pointer;
  }
@@ -50,7 +54,7 @@ export const LogEntry = observer(function LogEntry({ item }: LogEntryProps) {
      <td>{item.time}</td>
      <td>
        <message-cell as="div">
-          <message as="div">
+          <message as="div" title={item.message}>
            {item.stackTrace ? <Link onClick={controller.showDetails}>{item.message}</Link> : item.message}
          </message>
        </message-cell>
@@ -70,12 +70,8 @@ const styles = composes(
      height: 16px;
      display: block;
    }
-    MenuButton Icon {
-      transform: rotate(90deg);
-
-      &[|focus] {
-        transform: rotate(-90deg);
-      }
+    MenuButton Icon[|focus] {
+      transform: rotate(180deg);
    }
    input-box {
      flex: 1;
@@ -85,12 +85,8 @@ const styles = composes(
      height: 16px;
      display: block;
    }
-    MenuButton Icon {
-      transform: rotate(90deg);
-
-      &[|focus] {
-        transform: rotate(-90deg);
-      }
+    MenuButton Icon[|focus] {
+      transform: rotate(180deg);
    }
    input-box {
      flex: 1;
@@ -22,18 +22,20 @@ const formFieldDescriptionNewStyles = css`

 interface Props {
  label?: string;
+  title?: string;
  className?: string;
 }

 export const FormFieldDescriptionNew: React.FC<Props> = function FormFieldDescriptionNew({
  label,
+  title,
  children,
  className,
 }) {
  const styles = useStyles(baseFormControlStylesNew, formFieldDescriptionNewStyles);

  return styled(styles)(
-    <field as='div' className={className}>
+    <field title={title} as='div' className={className}>
      {label && <field-label as='label'>{label}</field-label>}
      <field-description as='div'>
        {children}
@@ -66,7 +66,7 @@ const RenderField: React.FC<RenderFieldProps> = observer(function RenderField({
      return null;
    }
    return (
-      <FormFieldDescriptionNew label={property.displayName} className={className}>
+      <FormFieldDescriptionNew title={property.description} label={property.displayName} className={className}>
        {state[property.id!]}
      </FormFieldDescriptionNew>
    );
@@ -92,10 +92,8 @@ const styles = composes(
      display: block;
    }
    property-select Icon {
-      transform: rotate(90deg);
-
      &[|focus] {
-        transform: rotate(-90deg);
+        transform: rotate(180deg);
      }
    }
    button {
@@ -19,10 +19,6 @@ const styles = css`
    cursor: pointer;
    height: 100%;
    width: 100%;
-
-    &[name="angle"] {
-      transform: rotate(-90deg);
-    }
  }
 `;

@@ -28,7 +28,7 @@ export const TREE_NODE_STYLES = composes(
        }

        & > TreeNodeControl > TreeNodeExpand {
-          transform: rotate(90deg);
+          transform: rotate(0deg);
        }
      }

@@ -64,7 +64,7 @@ export const TREE_NODE_STYLES = composes(
      opacity: 0.5;
      width: 16px;
      height: 16px;
-
+      transform: rotate(-90deg);
      & [|size='small'] {
        display: block;
      }
@@ -105,6 +105,7 @@ export const menuPanelStyles = composes(
        width: 16px;
        height: 16px;
        opacity: 0.5;
+        transform: rotate(-90deg);
      }
      & IconOrImage {
        width: 14px;
@@ -60,7 +60,7 @@ export const CellFormatter: React.FC<FormatterProps> = function CellFormatter({
  }

  return (
-    <cell-formatter ref={cellRef} as='div' className={`cell-formatter ${classes}`}>
+    <cell-formatter ref={cellRef} title={value} as='div' className={`cell-formatter ${classes}`}>
      {value}
    </cell-formatter>
  );
@@ -12,6 +12,7 @@ import type { HeaderRendererProps } from 'react-data-grid';
 import styled, { css, use } from 'reshadow';

 import { StaticImage, Icon } from '@cloudbeaver/core-blocks';
+import { useTranslate } from '@cloudbeaver/core-localization';
 import type { SqlResultSet } from '@cloudbeaver/core-sdk';
 import { composes, useStyles } from '@cloudbeaver/core-theming';
 import type { SortMode } from '@cloudbeaver/plugin-data-viewer';
@@ -103,6 +104,7 @@ export const TableColumnHeader: React.FC<HeaderRendererProps<any>> = observer(fu
  const dataGridContext = useContext(DataGridContext);
  const gridSortingContext = useContext(DataGridSortingContext);
  const gridSelectionContext = useContext(DataGridSelectionContext);
+  const translate = useTranslate();

  if (!dataGridContext || !gridSortingContext || !gridSelectionContext) {
    throw new Error('One of the following contexts are missed(data grid context, grid sorting context, grid selection context)');
@@ -117,6 +119,7 @@ export const TableColumnHeader: React.FC<HeaderRendererProps<any>> = observer(fu
  // TODO we want to get "sortable" property from SqlResultColumn data
  const sortable = model.source.results.length === 1;
  const currentSortMode = gridSortingContext.getSortMode(columnName);
+  const columnTooltip = columnName + (column?.fullTypeName ? ': ' + column.fullTypeName : '');

  const handleSort = (e: React.MouseEvent<HTMLDivElement>) => {
    e.stopPropagation();
@@ -144,14 +147,14 @@ export const TableColumnHeader: React.FC<HeaderRendererProps<any>> = observer(fu

  return styled(headerStyles)(
    <table-header as="div" onClick={handleColumnSelection}>
-      <shrink-container as='div'>
+      <shrink-container as='div' title={columnTooltip}>
        <icon as="div">
          <StaticImage icon={column?.icon} />
        </icon>
        <name as="div">{columnName}</name>
      </shrink-container>
      {sortable && (
-        <sort-icons as="div" onClick={handleSort} {...use({ disabled: loading })}>
+        <sort-icons title={translate('data_grid_table_tooltip_column_header_sort')} as="div" onClick={handleSort} {...use({ disabled: loading })}>
          <SortIcon active={currentSortMode === 'asc'} />
          <SortIcon active={currentSortMode === 'desc'} />
        </sort-icons>
@@ -0,0 +1,32 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { Bootstrap, injectable } from '@cloudbeaver/core-di';
+import { LocalizationService } from '@cloudbeaver/core-localization';
+
+@injectable()
+export class LocaleService extends Bootstrap {
+  constructor(private localizationService: LocalizationService) {
+    super();
+  }
+
+  register(): void | Promise<void> {
+    this.localizationService.addProvider(this.provider.bind(this));
+  }
+
+  load(): void | Promise<void> { }
+
+  private async provider(locale: string) {
+    switch (locale) {
+      case 'ru':
+        return (await import('./locales/ru')).default;
+      default:
+        return (await import('./locales/en')).default;
+    }
+  }
+}
@@ -0,0 +1,3 @@
+export default [
+  ['data_grid_table_tooltip_column_header_sort', 'Sort by column'],
+];
@@ -0,0 +1,3 @@
+export default [
+  ['data_grid_table_tooltip_column_header_sort', 'Сортировка по колонке'],
+];
@@ -9,9 +9,10 @@
 import type { PluginManifest } from '@cloudbeaver/core-di';

 import { DataGridSettingsService } from './DataGridSettingsService';
+import { LocaleService } from './LocaleService';
 import { SpreadsheetService } from './SpreadsheetService';

 export const manifest: PluginManifest = {
  info: { name: 'New spreadsheet implementation' },
-  providers: [SpreadsheetService, DataGridSettingsService],
+  providers: [SpreadsheetService, DataGridSettingsService, LocaleService],
 };