Client:OAuth: fix table for rtl
This commit is contained in:
parent
10b2e65d7f
commit
341110b486
@ -66,6 +66,7 @@ export const OAuthRow = (props: RowProps) => {
|
||||
checked={isChecked}
|
||||
inProgress={inProgress}
|
||||
onSelect={() => setSelection && setSelection(item.clientId)}
|
||||
className={`oauth2-row${isChecked ? " oauth2-row-selected" : ""}`}
|
||||
>
|
||||
<RowContent
|
||||
sectionWidth={sectionWidth}
|
||||
|
@ -2,6 +2,7 @@ import styled from "styled-components";
|
||||
|
||||
import { RowContainer } from "@docspace/shared/components/row-container";
|
||||
import { RowContent } from "@docspace/shared/components/row-content";
|
||||
import { tablet } from "@docspace/shared/utils/device";
|
||||
|
||||
export const StyledRowContainer = styled(RowContainer)`
|
||||
margin-top: 0px;
|
||||
@ -22,6 +23,51 @@ export const StyledRowContainer = styled(RowContainer)`
|
||||
height: 32px;
|
||||
max-height: 32px;
|
||||
}
|
||||
|
||||
.oauth2-row-selected {
|
||||
background: ${(props) =>
|
||||
props.theme.filesSection.rowView.checkedBackground};
|
||||
|
||||
cursor: pointer;
|
||||
border-bottom: none;
|
||||
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
|
||||
@media ${tablet} {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.oauth2-row {
|
||||
margin-top: -3px;
|
||||
padding-top: 3px;
|
||||
|
||||
:hover {
|
||||
background: ${(props) =>
|
||||
props.theme.filesSection.rowView.checkedBackground};
|
||||
|
||||
cursor: pointer;
|
||||
border-bottom: none;
|
||||
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
|
||||
@media ${tablet} {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledRowContent = styled(RowContent)`
|
||||
|
@ -87,7 +87,7 @@ const Row = (props: RowProps) => {
|
||||
setSelection={setSelection}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="">
|
||||
<TableCell className="author-cell">
|
||||
<CreatorCell
|
||||
avatar={item.creatorAvatar || ""}
|
||||
displayName={item.creatorDisplayName || ""}
|
||||
|
@ -23,11 +23,11 @@ const StyledTableRow = styled(TableRow)`
|
||||
.table-container_cell {
|
||||
text-overflow: ellipsis;
|
||||
|
||||
padding-right: 8px;
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
|
||||
.mr-8 {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.textOverflow {
|
||||
@ -46,7 +46,7 @@ const StyledTableRow = styled(TableRow)`
|
||||
input {
|
||||
position: relative;
|
||||
|
||||
margin-left: -8px;
|
||||
margin-inline-start: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -9,11 +9,11 @@ import {
|
||||
|
||||
const StyledAvatar = styled(Avatar)`
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
max-width: 16px;
|
||||
margin-inline-end: 4px;
|
||||
max-width: 100%;
|
||||
height: 16px;
|
||||
|
||||
margin-right: 4px;
|
||||
min-width: unset;
|
||||
`;
|
||||
|
||||
interface CreatorCellProps {
|
||||
@ -28,9 +28,14 @@ const CreatorCell = ({ avatar, displayName }: CreatorCellProps) => {
|
||||
source={avatar}
|
||||
size={AvatarSize.min}
|
||||
role={AvatarRole.user}
|
||||
className="textOverflow"
|
||||
/>
|
||||
|
||||
<Text className="description-text" fontWeight="600" fontSize="13px">
|
||||
<Text
|
||||
className="description-text textOverflow"
|
||||
fontWeight="600"
|
||||
fontSize="13px"
|
||||
>
|
||||
{displayName}
|
||||
</Text>
|
||||
</>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import { Text } from "@docspace/shared/components/text";
|
||||
import { Checkbox } from "@docspace/shared/components/checkbox";
|
||||
@ -7,11 +7,18 @@ import { Loader, LoaderTypes } from "@docspace/shared/components/loader";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
.table-container_row-checkbox {
|
||||
margin-left: -8px;
|
||||
margin-inline-start: -8px;
|
||||
|
||||
width: 16px;
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 16px 16px 16px 8px;
|
||||
`
|
||||
: css`
|
||||
padding: 16px 8px 16px 16px;
|
||||
`}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -52,7 +59,11 @@ const NameCell = ({
|
||||
size="16px"
|
||||
/>
|
||||
) : (
|
||||
<TableCell className="table-container_element-wrapper">
|
||||
<TableCell
|
||||
className="table-container_element-wrapper"
|
||||
hasAccess
|
||||
checked={isChecked}
|
||||
>
|
||||
<StyledContainer className="table-container_element-container">
|
||||
<div className="table-container_element">
|
||||
{icon && <StyledImage src={icon} alt="App icon" />}
|
||||
|
@ -1,5 +1,5 @@
|
||||
{
|
||||
"date": "2024626_125743",
|
||||
"date": "2024626_163846",
|
||||
"checksums": {
|
||||
"api.js": "0efbae3383bf6c6b6f26d573eee164d2",
|
||||
"api.poly.js": "2a2ac2c0e4a7007b61d2d1ff7b00a22e",
|
||||
|
@ -141,7 +141,8 @@ export const revokeUserClient = async (clientId: string): Promise<void> => {
|
||||
export const onOAuthLogin = (clientId: string) => {
|
||||
const formData = new FormData();
|
||||
|
||||
formData.set("client_id", clientId);
|
||||
formData.set("username", clientId);
|
||||
formData.set("password", clientId);
|
||||
|
||||
return request({
|
||||
method: "post",
|
||||
|
Loading…
Reference in New Issue
Block a user