From caee3ecc8d3a418d8baecda1d234a8fab75164d3 Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Wed, 28 Feb 2024 12:28:48 +0100 Subject: [PATCH 1/2] Web: Shared: Fix bug when dir="auto" affects margin/padding/flex styles on text element --- packages/shared/components/text/Text.styled.ts | 7 +++++++ packages/shared/components/text/Text.tsx | 16 ++++++++++++++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/shared/components/text/Text.styled.ts b/packages/shared/components/text/Text.styled.ts index 47d055f4f6..17d3f51f46 100644 --- a/packages/shared/components/text/Text.styled.ts +++ b/packages/shared/components/text/Text.styled.ts @@ -52,4 +52,11 @@ const StyledText = styled.p` StyledText.defaultProps = { theme: Base }; +export const StyledAutoDirSpan = styled.span` + display: inherit; + white-space: inherit; + overflow: inherit; + text-overflow: inherit; +`; + export default StyledText; diff --git a/packages/shared/components/text/Text.tsx b/packages/shared/components/text/Text.tsx index b026e9149d..e6ea034ac4 100644 --- a/packages/shared/components/text/Text.tsx +++ b/packages/shared/components/text/Text.tsx @@ -1,6 +1,6 @@ import React from "react"; -import StyledText from "./Text.styled"; +import StyledText, { StyledAutoDirSpan } from "./Text.styled"; import { TextProps } from "./Text.types"; const TextPure = ({ @@ -12,8 +12,13 @@ const TextPure = ({ color, textAlign, onClick, + dir, + children, ...rest }: TextProps) => { + const isAutoDir = dir === "auto"; + const dirProp = isAutoDir ? {} : { dir }; + return ( + > + {isAutoDir ? ( + {children} + ) : ( + children + )} + ); }; From 11ea33977d090ad87b90efece9aa64f7410df8e3 Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Wed, 28 Feb 2024 15:09:09 +0100 Subject: [PATCH 2/2] Web: Client: Refactor rtl styles in accounts --- .../Groups/RowView/index.styled.js | 48 ++--- .../Groups/TableView/index.styled.js | 93 ++------- .../InsideGroup/RowView/PeopleRowContainer.js | 12 +- .../InsideGroup/RowView/SimpleUserRow.js | 35 +--- .../InsideGroup/RowView/userContent.js | 22 +-- .../InsideGroup/TableView/TableContainer.js | 29 +-- .../InsideGroup/TableView/TableRow.js | 181 +++++------------- .../People/RowView/PeopleRowContainer.js | 12 +- .../People/RowView/SimpleUserRow.js | 35 +--- .../People/RowView/userContent.js | 20 +- .../People/TableView/TableContainer.js | 27 +-- .../AccountsBody/People/TableView/TableRow.js | 181 +++++------------- 12 files changed, 168 insertions(+), 527 deletions(-) diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js b/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js index 9ff0dea958..e4ae52ecc9 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js @@ -7,24 +7,20 @@ import { mobile, tablet } from "@docspace/shared/utils/device"; import { RowContent } from "@docspace/shared/components/row-content"; const marginStyles = css` - margin-left: -24px; - margin-right: -24px; - padding-left: 24px; - padding-right: 24px; + margin-inline: -24px; + padding-inline: 24px; @media ${tablet} { - margin-left: -16px; - margin-right: -16px; - padding-left: 16px; - padding-right: 16px; + margin-inline: -16px; + padding-inline: 16px; } `; const marginStylesGroupRowContainer = css` - margin-right: -48px !important; + margin-inline-end: -48px !important; @media ${tablet} { - margin-right: -32px !important; + margin-inline-end: -32px !important; } `; @@ -62,16 +58,8 @@ export const GroupsRowContainer = styled(RowContainer)` export const GroupsRowWrapper = styled.div` .group-item { border: 1px solid transparent; - border-left: none; - border-right: none; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: 0; - ` - : css` - margin-left: 0; - `} + border-inline: none; + margin-inline-start: 0; height: 100%; group-select: none; position: relative; @@ -89,13 +77,12 @@ export const GroupsRowWrapper = styled.div` const checkedStyle = css` background: ${({ theme }) => theme.filesSection.rowView.checkedBackground}; - margin-left: -24px; - padding-left: 24px; - padding-right: 24px; + margin-inline-start: -24px; + padding-inline: 24px; + @media ${tablet} { - margin-left: -16px; - padding-left: 16px; - padding-right: 16px; + margin-inline-start: -16px; + padding-inline: 16px; } `; @@ -125,14 +112,7 @@ export const GroupsRow = styled(Row)` -webkit-tap-highlight-color: rgba(0, 0, 0, 0); .styled-element { height: 32px; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 12px; - ` - : css` - margin-right: 12px; - `} + margin-inline-end: 12px; } .group-row-element { display: flex; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.styled.js b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.styled.js index 1b12cdee2d..f56a40fa5c 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.styled.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.styled.js @@ -9,30 +9,14 @@ const marginCss = css` `; const groupTitleCss = css` - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: -24px; - padding-right: 24px; - ` - : css` - margin-left: -24px; - padding-left: 24px; - `} + margin-inline-start: -24px; + padding-inline-start: 24px; ${marginCss} `; const contextCss = css` - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: -20px; - padding-left: 20px; - ` - : css` - margin-right: -20px; - padding-right: 20px; - `} + margin-inline-end: -20px; + padding-inline-end: 20px; ${marginCss} `; @@ -60,8 +44,7 @@ export const GroupsTableContainer = styled(TableContainer)` .table-row { .table-container_group-title-cell { ${groupTitleCss} - border-left: 0; //for Safari macOS - border-right: 0; //for Safari macOS + border-inline: 0; //for Safari macOS border-image-source: ${(props) => `linear-gradient(to right, ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`}; } @@ -93,7 +76,7 @@ export const GroupsRowWrapper = styled.div` export const GroupsRow = styled(TableRow)` .table-container_cell:not(.table-container_row-checkbox-wrapper) { height: auto; - max-height: 48; + max-height: 48px; } .table-container_cell { @@ -114,49 +97,21 @@ export const GroupsRow = styled(TableRow)` .table-container_row-checkbox-wrapper { min-width: 48px; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-left: 0px; - ` - : css` - padding-right: 0px; - `} + padding-inline-end: 0; .table-container_row-checkbox { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: -4px; - padding: 16px 12px 16px 0px; - ` - : css` - margin-left: -4px; - padding: 16px 0px 16px 12px; - `} + margin-inline-start: -4px; + padding-block: 16px; + padding-inline: 12px 0; } .table-container_element { } } .table-cell_group-title { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 12px; - ` - : css` - margin-right: 12px; - `} + margin-inline-end: 12px; } .table-container_row-context-menu-wrapper { justify-content: flex-end; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-left: 0px; - ` - : css` - padding-right: 0px; - `} + padding-inline-end: 0; } :hover { .table-container_cell { @@ -165,28 +120,12 @@ export const GroupsRow = styled(TableRow)` `${props.theme.filesSection.tableView.row.backgroundActive} !important`}; } .table-container_group-title-cell { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: -24px; - padding-right: 24px; - ` - : css` - margin-left: -24px; - padding-left: 24px; - `} + margin-inline-start: -24px; + padding-inline-start: 24px; } .table-container_row-context-menu-wrapper { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: -20px; - padding-left: 20px; - ` - : css` - margin-right: -20px; - padding-right: 20px; - `} + margin-inline-end: -20px; + padding-inline-end: 20px; } } `; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/PeopleRowContainer.js b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/PeopleRowContainer.js index 92da1efaf4..06fb54bc45 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/PeopleRowContainer.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/PeopleRowContainer.js @@ -10,16 +10,12 @@ import EmptyScreen from "../../EmptyScreen"; import SimpleUserRow from "./SimpleUserRow"; const marginStyles = css` - margin-left: -24px; - margin-right: -24px; - padding-left: 24px; - padding-right: 24px; + margin-inline: -24px; + padding-inline: 24px; @media ${tablet} { - margin-left: -16px; - margin-right: -16px; - padding-left: 16px; - padding-right: 16px; + margin-inline: -16px; + padding-inline: 16px; } `; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js index 612f75a80f..5509fc87e4 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js @@ -11,22 +11,20 @@ import UserContent from "./userContent"; import { mobile, tablet } from "@docspace/shared/utils"; const marginStyles = css` - margin-left: -24px; - padding-left: 24px; - padding-right: 24px; + margin-inline-start: -24px; + padding-inline: 24px; @media ${tablet} { - margin-left: -16px; - padding-left: 16px; - padding-right: 16px; + margin-inline-start: -16px; + padding-inline: 16px; } `; const marginStylesUserRowContainer = css` - margin-right: -48px !important; + margin-inline-end: -48px !important; @media ${tablet} { - margin-right: -32px !important; + margin-inline-end: -32px !important; } `; @@ -38,16 +36,8 @@ const checkedStyle = css` const StyledWrapper = styled.div` .user-item { border: 1px solid transparent; - border-left: none; - border-right: none; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: 0; - ` - : css` - margin-left: 0; - `} + border-inline: none; + margin-inline-start: 0; height: 100%; user-select: none; @@ -98,14 +88,7 @@ const StyledSimpleUserRow = styled(Row)` .styled-element { height: 32px; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 12px; - ` - : css` - margin-right: 12px; - `} + margin-inline-end: 12px; } `; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/userContent.js b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/userContent.js index 2ad74c77b2..25e5f0edd0 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/userContent.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/userContent.js @@ -22,26 +22,10 @@ const StyledRowContent = styled(RowContent)` .badges { flex-direction: row-reverse; margin-top: 10px; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 12px; - ` - : css` - margin-right: 12px; - `} + margin-inline-end: 12px; .paid-badge { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: 8px; - margin-left: 0px; - ` - : css` - margin-left: 8px; - margin-right: 0px; - `} + margin-inline: 8px 0; } } } @@ -110,7 +94,7 @@ const UserContent = ({ t, usedSpace, quotaLimit, - isDefaultUsersQuotaSet + isDefaultUsersQuotaSet, ); return ( diff --git a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableContainer.js index f69eeb106b..0f8c6db4e1 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableContainer.js @@ -24,31 +24,15 @@ const marginCss = css` `; const userNameCss = css` - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: -24px; - padding-right: 24px; - ` - : css` - margin-left: -24px; - padding-left: 24px; - `} + margin-inline-start: -24px; + padding-inline-start: 24px; ${marginCss} `; const contextCss = css` - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: -20px; - padding-left: 20px; - ` - : css` - margin-right: -20px; - padding-right: 20px; - `} + margin-inline-end: -20px; + padding-inline-end: 20px; ${marginCss} `; @@ -86,8 +70,7 @@ const StyledTableContainer = styled(TableContainer)` } .table-container_user-name-cell { ${userNameCss} - border-left: 0; //for Safari macOS - border-right: 0; //for Safari macOS + border-inline: 0; //for Safari macOS border-image-source: ${(props) => `linear-gradient(to right, ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`}; @@ -245,7 +228,7 @@ export default inject( currentDeviceType, typeAccountsColumnIsEnabled, emailAccountsColumnIsEnabled, - setCurrentGroup:peopleStore.groupsStore.setCurrentGroup, + setCurrentGroup: peopleStore.groupsStore.setCurrentGroup, }; }, )(observer(Table)); diff --git a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableRow.js b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableRow.js index c296ce8fd8..4d69b38de4 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableRow.js @@ -28,28 +28,12 @@ const StyledPeopleRow = styled(TableRow)` } .table-container_user-name-cell { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: -24px; - padding-right: 24px; - ` - : css` - margin-left: -24px; - padding-left: 24px; - `} + margin-inline-start: -24px; + padding-inline-start: 24px; } .table-container_row-context-menu-wrapper { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: -20px; - padding-left: 20px; - ` - : css` - margin-right: -20px; - padding-right: 20px; - `} + margin-inline-end: -20px; + padding-inline-end: 20px; } } @@ -63,76 +47,33 @@ const StyledPeopleRow = styled(TableRow)` } .table-container_row-checkbox-wrapper { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-left: 0px; - ` - : css` - padding-right: 0px; - `} + padding-inline-end: 0; min-width: 48px; .table-container_row-checkbox { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: -4px; - padding: 16px 12px 16px 0px; - ` - : css` - margin-left: -4px; - padding: 16px 0px 16px 12px; - `} + margin-inline-start: -4px; + padding-block: 16px; + padding-inline: 12px 0; } } .link-with-dropdown-group { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 12px; - ` - : css` - margin-right: 12px; - `} + margin-inline-end: 12px; } .table-cell_username { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 12px; - ` - : css` - margin-right: 12px; - `} + margin-inline-end: 12px; } .table-container_row-context-menu-wrapper { justify-content: flex-end; - - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-left: 0px; - ` - : css` - padding-right: 0px; - `} + padding-inline-end: 0; } .table-cell_type, .table-cell_groups, .table-cell_room { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: -8px; - ` - : css` - margin-left: -8px; - `} + margin-inline-start: -8px; } .groups-combobox, @@ -148,14 +89,7 @@ const StyledPeopleRow = styled(TableRow)` .type-combobox, .groups-combobox, .room-combobox { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-right: 8px; - ` - : css` - padding-left: 8px; - `} + padding-inline-start: 8px; overflow: hidden; } @@ -163,16 +97,8 @@ const StyledPeopleRow = styled(TableRow)` .groups-combobox, .room-combobox { .combo-button { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-right: 8px; - margin-right: -8px; - ` - : css` - padding-left: 8px; - margin-left: -8px; - `} + padding-inline-start: 8px; + margin-inline-start: -8px; .combo-button-label { font-size: ${(props) => props.theme.getCorrectFontSize("13px")}; @@ -183,16 +109,8 @@ const StyledPeopleRow = styled(TableRow)` .groups-combobox { .combo-button { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-right: 8px; - margin-right: -8px; - ` - : css` - padding-left: 8px; - margin-left: -8px; - `} + padding-inline-start: 8px; + margin-inline-start: -8px; } } @@ -201,6 +119,10 @@ const StyledPeopleRow = styled(TableRow)` display: none; } } + + .plainTextItem { + padding-inline-start: 8px; + } `; StyledPeopleRow.defaultProps = { theme: Base }; @@ -223,11 +145,6 @@ const StyledGroupsComboBox = styled(ComboBox)` StyledGroupsComboBox.defaultProps = { theme: Base }; -const StyledTextWrapper = styled.div` - padding-inline-start: 8px; - overflow: hidden; -`; - const fakeRooms = [ { name: "Room 1", @@ -428,20 +345,19 @@ const InsideGroupTableRow = (props) => { if (groups.length === 1) return ( - - - {groups[0].name} - - + + {groups[0].name} + ); return null; @@ -469,20 +385,19 @@ const InsideGroupTableRow = (props) => { ); const text = ( - - - {typeLabel} - - + + {typeLabel} + ); const canChange = canChangeUserType(item); @@ -644,4 +559,4 @@ const InsideGroupTableRow = (props) => { export default withTranslation(["People", "Common", "Settings"])( withContent(InsideGroupTableRow), -); \ No newline at end of file +); diff --git a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/PeopleRowContainer.js b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/PeopleRowContainer.js index 134e53b114..989ee70717 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/PeopleRowContainer.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/PeopleRowContainer.js @@ -11,16 +11,12 @@ import EmptyScreen from "../../EmptyScreen"; import SimpleUserRow from "./SimpleUserRow"; const marginStyles = css` - margin-left: -24px; - margin-right: -24px; - padding-left: 24px; - padding-right: 24px; + margin-inline: -24px; + padding-inline: 24px; @media ${tablet} { - margin-left: -16px; - margin-right: -16px; - padding-left: 16px; - padding-right: 16px; + margin-inline: -16px; + padding-inline: 16px; } `; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js index 456509b0c3..5b2b12b448 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js @@ -11,22 +11,20 @@ import UserContent from "./userContent"; import { mobile, tablet } from "@docspace/shared/utils/device"; const marginStyles = css` - margin-left: -24px; - padding-left: 24px; - padding-right: 24px; + margin-inline-start: -24px; + padding-inline: 24px; @media ${tablet} { - margin-left: -16px; - padding-left: 16px; - padding-right: 16px; + margin-inline-start: -16px; + padding-inline: 16px; } `; const marginStylesUserRowContainer = css` - margin-right: -48px !important; + margin-inline-end: -48px !important; @media ${tablet} { - margin-right: -32px !important; + margin-inline-end: -32px !important; } `; @@ -38,16 +36,8 @@ const checkedStyle = css` const StyledWrapper = styled.div` .user-item { border: 1px solid transparent; - border-left: none; - border-right: none; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: 0; - ` - : css` - margin-left: 0; - `} + border-inline: none; + margin-inline-start: 0; height: 100%; user-select: none; @@ -98,14 +88,7 @@ const StyledSimpleUserRow = styled(Row)` .styled-element { height: 32px; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 12px; - ` - : css` - margin-right: 12px; - `} + margin-inline-end: 12px; } `; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/userContent.js b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/userContent.js index 6d8a5088da..119ab7e94d 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/userContent.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/userContent.js @@ -21,26 +21,10 @@ const StyledRowContent = styled(RowContent)` .badges { flex-direction: row-reverse; margin-top: 9px; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 12px; - ` - : css` - margin-right: 12px; - `} + margin-inline-end: 12px; .paid-badge { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: 8px; - margin-left: 0px; - ` - : css` - margin-left: 8px; - margin-right: 0px; - `} + margin-inline: 8px 0; } } } diff --git a/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableContainer.js index 06a62625d8..e23f3f91cf 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableContainer.js @@ -16,29 +16,13 @@ const COLUMNS_SIZE = `peopleColumnsSize_ver-${TableVersions.People}`; const INFO_PANEL_COLUMNS_SIZE = `infoPanelPeopleColumnsSize_ver-${TableVersions.People}`; const userNameCss = css` - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: -24px; - padding-right: 24px; - ` - : css` - margin-left: -24px; - padding-left: 24px; - `} + margin-inline-start: -24px; + padding-inline-start: 24px; `; const contextCss = css` - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: -20px; - padding-left: 20px; - ` - : css` - margin-right: -20px; - padding-right: 20px; - `} + margin-inline-end: -20px; + padding-inline-end: 20px; `; const StyledTableContainer = styled(TableContainer)` @@ -72,8 +56,7 @@ const StyledTableContainer = styled(TableContainer)` } .table-container_user-name-cell { ${userNameCss} - border-left: 0; //for Safari macOS - border-right: 0; //for Safari macOS + border-inline: 0; //for Safari macOS border-image-source: ${(props) => `linear-gradient(to right, ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`}; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js b/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js index 8b9b9a5c7c..c97b8de851 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js @@ -39,28 +39,12 @@ const StyledPeopleRow = styled(TableRow)` } .table-container_user-name-cell { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: -24px; - padding-right: 24px; - ` - : css` - margin-left: -24px; - padding-left: 24px; - `} + margin-inline-start: -24px; + padding-inline-start: 24px; } .table-container_row-context-menu-wrapper { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: -20px; - padding-left: 20px; - ` - : css` - margin-right: -20px; - padding-right: 20px; - `} + margin-inline-end: -20px; + padding-inline-end: 20px; } } @@ -72,7 +56,7 @@ const StyledPeopleRow = styled(TableRow)` .table-container_cell:not(.table-container_row-checkbox-wrapper) { height: auto; - max-height: 48; + max-height: 48px; } .table-container_cell { @@ -82,76 +66,33 @@ const StyledPeopleRow = styled(TableRow)` } .table-container_row-checkbox-wrapper { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-left: 0px; - ` - : css` - padding-right: 0px; - `} + padding-inline-end: 0; min-width: 48px; .table-container_row-checkbox { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: -4px; - padding: 16px 12px 16px 0px; - ` - : css` - margin-left: -4px; - padding: 16px 0px 16px 12px; - `} + margin-inline-start: -4px; + padding-block: 16px; + padding-inline: 12px 0; } } .link-with-dropdown-group { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 12px; - ` - : css` - margin-right: 12px; - `} + margin-inline-end: 12px; } .table-cell_username { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 12px; - ` - : css` - margin-right: 12px; - `} + margin-inline-end: 12px; } .table-container_row-context-menu-wrapper { justify-content: flex-end; - - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-left: 0px; - ` - : css` - padding-right: 0px; - `} + padding-inline-end: 0; } .table-cell_type, .table-cell_groups, .table-cell_room { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: -8px; - ` - : css` - margin-left: -8px; - `} + margin-inline-start: -8px; } .groups-combobox, @@ -167,14 +108,7 @@ const StyledPeopleRow = styled(TableRow)` .type-combobox, .groups-combobox, .room-combobox { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-right: 8px; - ` - : css` - padding-left: 8px; - `} + padding-inline-start: 8px; overflow: hidden; } @@ -182,16 +116,8 @@ const StyledPeopleRow = styled(TableRow)` .groups-combobox, .room-combobox { .combo-button { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-right: 8px; - margin-right: -8px; - ` - : css` - padding-left: 8px; - margin-left: -8px; - `} + padding-inline-start: 8px; + margin-inline-start: -8px; .combo-button-label { font-size: ${(props) => props.theme.getCorrectFontSize("13px")}; @@ -202,16 +128,8 @@ const StyledPeopleRow = styled(TableRow)` .groups-combobox { .combo-button { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-right: 8px; - margin-right: -8px; - ` - : css` - padding-left: 8px; - margin-left: -8px; - `} + padding-inline-start: 8px; + margin-inline-start: -8px; } } @@ -220,6 +138,10 @@ const StyledPeopleRow = styled(TableRow)` display: none; } } + + .plainTextItem { + padding-inline-start: 8px; + } `; StyledPeopleRow.defaultProps = { theme: Base }; @@ -242,11 +164,6 @@ const StyledGroupsComboBox = styled(ComboBox)` StyledGroupsComboBox.defaultProps = { theme: Base }; -const StyledTextWrapper = styled.div` - padding-inline-start: 8px; - overflow: hidden; -`; - const fakeRooms = [ { name: "Room 1", @@ -448,20 +365,19 @@ const PeopleTableRow = (props) => { if (groups.length === 1) return ( - - - {groups[0].name} - - + + {groups[0].name} + ); return null; @@ -489,20 +405,19 @@ const PeopleTableRow = (props) => { ); const text = ( - - - {typeLabel} - - + + {typeLabel} + ); const canChange = canChangeUserType(item);