From 4a8ee6e20c5d2e78bd2ea212f4006fedea8b574f Mon Sep 17 00:00:00 2001 From: DmitrySychugov Date: Mon, 17 Jun 2024 19:30:14 +0500 Subject: [PATCH] Client: corrected colors in index editing mode --- .../Section/Body/RowsView/SimpleFilesRow.js | 20 +++++++++++++++++-- .../Section/Body/TableView/StyledTable.js | 2 +- .../src/pages/Home/Section/Body/index.js | 3 ++- .../shared/components/table/Table.styled.ts | 5 +++++ packages/shared/themes/base.ts | 7 ++++--- packages/shared/themes/dark.ts | 7 ++++++- 6 files changed, 36 insertions(+), 8 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js index 4af9552a29..fd25aeec47 100644 --- a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js +++ b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js @@ -68,7 +68,10 @@ const StyledWrapper = styled.div` `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; margin-top: -1px; - ${(props) => (props.checked || props.isActive) && checkedStyle}; + ${(props) => + (props.checked || props.isActive) && + !props.isIndexEditingMode && + checkedStyle}; ${(props) => (props.checked || props.isActive) && props.isFirstElem && @@ -82,7 +85,7 @@ const StyledWrapper = styled.div` css` background: ${(props) => props.isIndexEditingMode - ? `${props.theme.filesSection.tableView.row.indexActive} !important` + ? `${props.theme.filesSection.tableView.row.indexUpdate} !important` : `${props.theme.filesSection.tableView.row.backgroundActive} !important`}; ${marginStyles} `} @@ -90,6 +93,7 @@ const StyledWrapper = styled.div` ${(props) => !isMobile && !props.isDragging && + !props.isIndexEditingMode && css` :hover { cursor: pointer; @@ -97,6 +101,18 @@ const StyledWrapper = styled.div` } `}; + ${(props) => + !isMobile && + props.isIndexEditingMode && + css` + :hover { + cursor: pointer; + background: ${(props) => + props.theme.filesSection.tableView.row.indexActive}; + ${marginStyles} + } + `}; + ${(props) => props.showHotkeyBorder && css` diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js index 8b2f58a7f1..5dd0efab64 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js @@ -161,7 +161,7 @@ const StyledTableRow = styled(TableRow)` cursor: pointer; background: ${(props) => props.isIndexEditingMode - ? `${props.theme.filesSection.tableView.row.indexActive} !important` + ? `${props.theme.filesSection.tableView.row.indexUpdate} !important` : `${props.theme.filesSection.tableView.row.backgroundActive} !important`}; } .table-container_file-name-cell, diff --git a/packages/client/src/pages/Home/Section/Body/index.js b/packages/client/src/pages/Home/Section/Body/index.js index 57f643a075..0a87bfa02e 100644 --- a/packages/client/src/pages/Home/Section/Body/index.js +++ b/packages/client/src/pages/Home/Section/Body/index.js @@ -40,7 +40,7 @@ import { isElementInViewport } from "@docspace/shared/utils/common"; import { DeviceType, VDRIndexingAction } from "@docspace/shared/enums"; -const separatorStyles = `width: 100vw; background-color: rgb(71, 129, 209); position: absolute; height: 3px; z-index: 1;`; +const separatorStyles = `width: 100vw; position: absolute; height: 3px; z-index: 1;`; const sectionClass = "section-wrapper-content"; let currentDroppable = null; @@ -206,6 +206,7 @@ const SectionBodyContent = (props) => { const tableItem = wrapperElement.closest(".table-list-item"); const styles = tableItem && window.getComputedStyle(tableItem); const indexSeparatorNode = document.createElement("div"); + indexSeparatorNode.classList.add("indexing-separator"); const parent = document.querySelector( ".ReactVirtualized__Grid__innerScrollContainer", diff --git a/packages/shared/components/table/Table.styled.ts b/packages/shared/components/table/Table.styled.ts index f0d42b7c95..c721b8a064 100644 --- a/packages/shared/components/table/Table.styled.ts +++ b/packages/shared/components/table/Table.styled.ts @@ -59,6 +59,11 @@ const StyledTableContainer = styled.div<{ useReactWindow?: boolean }>` min-width: 10%; } + .indexing-separator { + background-color: ${(props) => + props.theme.tableContainer.indexingSeparator}; + } + .resize-handle { display: block; cursor: ew-resize; diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index 1f68df0a21..66289c58b5 100644 --- a/packages/shared/themes/base.ts +++ b/packages/shared/themes/base.ts @@ -2250,6 +2250,8 @@ export const getBaseTheme = () => { hoverBorderColor: grayMain, tableCellBorder: `1px solid ${grayLightMid}`, + indexingSeparator: "#4781D1", + groupMenu: { background: white, borderBottom: "1px solid transparent", @@ -2319,9 +2321,8 @@ export const getBaseTheme = () => { contextMenuWrapperDraggingHover: `linear-gradient(to left,rgb(239, 239, 178) 24px,${grayLightMid} 24px)`, backgroundActive: `#F3F4F4`, - indexUpdate: `#ebf1f7`, - indexActive: `#dce9f7`, - indexFixed: `rgba(71, 129, 209, 0.00)`, + indexUpdate: `#F2F6FC`, + indexActive: `#E4ECF8`, borderImageCheckbox: `linear-gradient(to right, ${white} 24px, ${grayLightMid} 24px)`, borderImageContextMenu: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`, diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index 2a664a2f7f..e395e281ab 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -1011,7 +1011,8 @@ const Dark: TTheme = { hoverBackgroundColor: "#474747", disableBackgroundColor: "#282828", activeBackgroundColor: "#282828", - activeSelectedBackgroundColor: "linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18))", + activeSelectedBackgroundColor: + "linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18))", title: { padding: "4px 16px", @@ -2224,6 +2225,8 @@ const Dark: TTheme = { hoverBorderColor: "#474747", tableCellBorder: "1px solid #474747", + indexingSeparator: "#FFFFFF", + groupMenu: { background: black, borderBottom: "1px solid #474747", @@ -2295,6 +2298,8 @@ const Dark: TTheme = { "linear-gradient(to left,rgba(204, 184, 102, 0.2) 24px, #474747 24px)", backgroundActive: "#3D3D3D", + indexUpdate: `#414141`, + indexActive: `#515151`, borderImageCheckbox: "linear-gradient(to right, #474747 24px, #474747 24px)",