mirror of
https://github.com/dbeaver/cloudbeaver.git
synced 2026-09-24 16:04:36 +08:00
dbeaver/pro#8684 feat: unlock autoscroll when dragging in data grid (#4362)
* dbeaver/pro#8684 feat: unlock autoscroll when dragging in data grid * dbeaver/pro#8684 fix: don't select value panel and rows input in the toolbar on drag as a bonus enhance data grid context menu accessibility to improve user selection behavior when we start dragging from the menu button return selection only when the cell is edited * dbeaver/pro#8684 refactor: add selection background color for input in editing cell --------- Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>
This commit is contained in:
Sychev Andrey
@@ -6,6 +6,22 @@
|
||||
* you may not use this file except in compliance with the License.
|
||||
*/
|
||||
@layer components {
|
||||
body[data-grid-dragging] {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
.ReactCodemirror,
|
||||
[role='toolbar'] {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.data-grid__container {
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
--theme-add-status: #65974c;
|
||||
--theme-delete-status: #b55d68;
|
||||
@@ -31,8 +47,11 @@
|
||||
--data-grid-selected-row-color: var(--theme-secondary) !important;
|
||||
outline: 0;
|
||||
overflow: auto;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
& ::selection {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
& .rdg-cell-frozen {
|
||||
&:nth-last-child(1 of &) {
|
||||
@@ -51,6 +70,12 @@
|
||||
& .rdg-cell-custom-deleted {
|
||||
background-color: var(--theme-delete-status) !important;
|
||||
}
|
||||
|
||||
& .rdg-editor-container input::selection,
|
||||
& .rdg-editor-container textarea::selection {
|
||||
background-color: Highlight;
|
||||
color: HighlightText;
|
||||
}
|
||||
}
|
||||
|
||||
.data-grid__container .data-grid__grid {
|
||||
|
||||
+3
-1
@@ -8,7 +8,7 @@
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { useContext } from 'react';
|
||||
|
||||
import { Icon, MenuItemElementStyles, s, SContext, type StyleRegistry, useS } from '@cloudbeaver/core-blocks';
|
||||
import { Icon, MenuItemElementStyles, s, SContext, type StyleRegistry, useS, useTranslate } from '@cloudbeaver/core-blocks';
|
||||
import { useDataContextLink } from '@cloudbeaver/core-data-context';
|
||||
import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
|
||||
import { ContextMenu } from '@cloudbeaver/core-ui';
|
||||
@@ -52,6 +52,7 @@ const registry: StyleRegistry = [
|
||||
|
||||
export const CellMenu = observer<Props>(function CellMenu({ model, actions, spreadsheetActions, resultIndex, cellKey, simple, onStateSwitch }) {
|
||||
const style = useS(classes);
|
||||
const translate = useTranslate();
|
||||
const menu = useMenu({ menu: MENU_DV_CONTEXT_MENU });
|
||||
const cellContext = useContext(CellContext);
|
||||
|
||||
@@ -83,6 +84,7 @@ export const CellMenu = observer<Props>(function CellMenu({ model, actions, spre
|
||||
onVisibleSwitch={onStateSwitch}
|
||||
>
|
||||
<Icon className={s(style, { icon: true })} name="snack" viewBox="0 0 16 10" />
|
||||
<span className="tw:sr-only">{translate('data_grid_table_context_menu_aria_label')}</span>
|
||||
</ContextMenu>
|
||||
</div>
|
||||
</SContext>
|
||||
|
||||
@@ -40,6 +40,7 @@ interface IDraggingCallbacks {
|
||||
}
|
||||
|
||||
const THRESHOLD = 10;
|
||||
const BODY_DRAGGING_ATTRIBUTE = 'data-grid-dragging';
|
||||
|
||||
function getDelta(startPosition: IMousePosition | null, currentPosition: IMousePosition | null) {
|
||||
if (!startPosition || !currentPosition) {
|
||||
@@ -105,6 +106,7 @@ export function useGridDragging(props: IDraggingCallbacks) {
|
||||
state.mouseDown = true;
|
||||
state.startMousePosition = { x: event.pageX, y: event.pageY };
|
||||
state.startDraggingCell = { colIdx: position.colIdx, rowIdx: position.rowIdx };
|
||||
document.body.setAttribute(BODY_DRAGGING_ATTRIBUTE, '');
|
||||
}, []);
|
||||
|
||||
const onMouseMoveHandler = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
|
||||
@@ -157,6 +159,7 @@ export function useGridDragging(props: IDraggingCallbacks) {
|
||||
const onMouseUpHandler = useCallback((event: React.MouseEvent<HTMLDivElement> | MouseEvent) => {
|
||||
state.mouseDown = false;
|
||||
state.startMousePosition = null;
|
||||
document.body.removeAttribute(BODY_DRAGGING_ATTRIBUTE);
|
||||
|
||||
if (!state.dragging || !state.startDraggingCell || !state.currentDraggingCell) {
|
||||
return;
|
||||
|
||||
@@ -23,6 +23,7 @@ export default [
|
||||
['data_grid_table_disable_all_orders', 'Alle deaktivieren'],
|
||||
['data_grid_table_delete_filters_and_orders', 'Filter / Sortierung zurücksetzen'],
|
||||
['data_grid_table_context_menu_filter_dialog_title', 'Wert bearbeiten'],
|
||||
['data_grid_table_context_menu_aria_label', 'Kontextmenü'],
|
||||
['data_grid_table_index_column_tooltip', 'Wählen ganze Tabelle aus'],
|
||||
['data_grid_table_readonly_connection_tooltip', 'Schreibgeschützte Verbindung'],
|
||||
['data_grid_table_readonly_presentation_tooltip', 'Die aktive Darstellung unterstützt keine Datenbearbeitung'],
|
||||
|
||||
@@ -29,6 +29,7 @@ export default [
|
||||
['data_grid_table_context_menu_filter_dialog_title', 'Edit value'],
|
||||
['data_grid_table_context_menu_filter_clipboard_permission', 'Give access to clipboard'],
|
||||
['data_grid_table_context_menu_save_value_error', 'Failed to save value'],
|
||||
['data_grid_table_context_menu_aria_label', 'Context menu'],
|
||||
['data_grid_table_index_column_tooltip', 'Select whole table'],
|
||||
['data_grid_table_readonly_connection_tooltip', 'Read-only connection'],
|
||||
['data_grid_table_readonly_presentation_tooltip', 'Read-only: Active presentation does not support data editing'],
|
||||
|
||||
@@ -29,6 +29,7 @@ export default [
|
||||
['data_grid_table_context_menu_filter_dialog_title', 'Modifier la valeur'],
|
||||
['data_grid_table_context_menu_filter_clipboard_permission', 'Donner accès au presse-papiers'],
|
||||
['data_grid_table_context_menu_save_value_error', 'Échec de la sauvegarde de la valeur'],
|
||||
['data_grid_table_context_menu_aria_label', 'Menu contextuel'],
|
||||
['data_grid_table_index_column_tooltip', 'Sélectionner toute la table'],
|
||||
['data_grid_table_no_key_found_tooltip', "Aucune clé unique n'a été trouvée. La modification des données n'est pas possible."],
|
||||
['data_grid_table_virtual_key_tooltip', 'Clé virtuelle'],
|
||||
|
||||
@@ -28,6 +28,7 @@ export default [
|
||||
['data_grid_table_context_menu_filter_dialog_title', 'Modifica valore'],
|
||||
['data_grid_table_context_menu_filter_clipboard_permission', 'Dai accesso agli appunti'],
|
||||
['data_grid_table_context_menu_save_value_error', 'Failed to save value'],
|
||||
['data_grid_table_context_menu_aria_label', 'Menu contestuale'],
|
||||
['data_grid_table_index_column_tooltip', 'Seleziona tutta la tabella'],
|
||||
['data_grid_table_readonly_connection_tooltip', 'Connessione in sola lettura'],
|
||||
['data_grid_table_readonly_presentation_tooltip', 'La presentazione attiva non supporta la modifica dei dati'],
|
||||
|
||||
@@ -29,6 +29,7 @@ export default [
|
||||
['data_grid_table_context_menu_filter_dialog_title', 'Редактировать значение'],
|
||||
['data_grid_table_context_menu_filter_clipboard_permission', 'Дать доступ к буферу обмена'],
|
||||
['data_grid_table_context_menu_save_value_error', 'Не удалось сохранить значение'],
|
||||
['data_grid_table_context_menu_aria_label', 'Контекстное меню'],
|
||||
['data_grid_table_index_column_tooltip', 'Выбрать всю таблицу'],
|
||||
['data_grid_table_readonly_connection_tooltip', 'Подключение только для чтения'],
|
||||
['data_grid_table_readonly_presentation_tooltip', 'Активное представление не поддерживает редактирование данных'],
|
||||
|
||||
@@ -29,6 +29,7 @@ export default [
|
||||
['data_grid_table_context_menu_filter_dialog_title', 'Chỉnh sửa giá trị'],
|
||||
['data_grid_table_context_menu_filter_clipboard_permission', 'Cấp quyền truy cập vào clipboard'],
|
||||
['data_grid_table_context_menu_save_value_error', 'Không thể lưu giá trị'],
|
||||
['data_grid_table_context_menu_aria_label', 'Menu ngữ cảnh'],
|
||||
['data_grid_table_index_column_tooltip', 'Chọn toàn bộ bảng'],
|
||||
['data_grid_table_readonly_connection_tooltip', 'Kết nối chỉ đọc'],
|
||||
['data_grid_table_readonly_presentation_tooltip', 'Trình bày đang dùng không hỗ trợ chỉnh sửa dữ liệu'],
|
||||
|
||||
@@ -29,6 +29,7 @@ export default [
|
||||
['data_grid_table_context_menu_filter_dialog_title', '编辑值'],
|
||||
['data_grid_table_context_menu_filter_clipboard_permission', '授予访问剪贴板的权限'],
|
||||
['data_grid_table_context_menu_save_value_error', '保存失败'],
|
||||
['data_grid_table_context_menu_aria_label', '上下文菜单'],
|
||||
['data_grid_table_index_column_tooltip', '选择整个表'],
|
||||
['data_grid_table_no_key_found_tooltip', '未找到唯一键。无法修改数据。'],
|
||||
['data_grid_table_virtual_key_tooltip', '虚拟键'],
|
||||
|
||||
Reference in New Issue
Block a user