Web:Client:Accounts: add hover and checked styles to table view
This commit is contained in:
parent
f0e99cafd3
commit
368ebe4213
@ -143,7 +143,12 @@ export default function withContent(WrappedContent) {
|
||||
const { getTargetUser } = peopleStore.targetUserStore;
|
||||
const { selectionStore } = peopleStore;
|
||||
|
||||
const { selection, selectUser, deselectUser } = selectionStore;
|
||||
const {
|
||||
selection,
|
||||
setSelection,
|
||||
selectUser,
|
||||
deselectUser,
|
||||
} = selectionStore;
|
||||
|
||||
return {
|
||||
theme: auth.settingsStore.theme,
|
||||
@ -154,6 +159,7 @@ export default function withContent(WrappedContent) {
|
||||
checked: selection.some((el) => el.id === item.id),
|
||||
selectUser,
|
||||
deselectUser,
|
||||
setSelection,
|
||||
};
|
||||
})(observer(WithContent));
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
@ -9,6 +10,81 @@ import EmptyScreen from "../EmptyScreen";
|
||||
|
||||
import TableRow from "./TableRow";
|
||||
import TableHeader from "./TableHeader";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
|
||||
const marginCss = css`
|
||||
margin-top: -1px;
|
||||
border-top: ${(props) =>
|
||||
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
|
||||
`;
|
||||
|
||||
const userNameCss = css`
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
${marginCss}
|
||||
`;
|
||||
|
||||
const contextCss = css`
|
||||
margin-right: -20px;
|
||||
padding-right: 18px;
|
||||
${marginCss}
|
||||
`;
|
||||
|
||||
const StyledTableContainer = styled(TableContainer)`
|
||||
.table-row-selected {
|
||||
.table-container_user-name-cell {
|
||||
${userNameCss}
|
||||
}
|
||||
|
||||
.table-container_row-context-menu-wrapper {
|
||||
${contextCss}
|
||||
}
|
||||
}
|
||||
|
||||
.table-row-selected + .table-row-selected {
|
||||
.table-row {
|
||||
.table-container_user-name-cell,
|
||||
.table-container_row-context-menu-wrapper {
|
||||
margin-top: -1px;
|
||||
border-image-slice: 1;
|
||||
border-top: 1px solid;
|
||||
}
|
||||
.table-container_user-name-cell {
|
||||
${userNameCss}
|
||||
border-left: 0; //for Safari macOS
|
||||
border-right: 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)`};
|
||||
}
|
||||
.table-container_row-context-menu-wrapper {
|
||||
${contextCss}
|
||||
|
||||
border-image-source: ${(props) => `linear-gradient(to left,
|
||||
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-item:not(.table-row-selected) + .table-row-selected {
|
||||
.table-row {
|
||||
.table-container_user-name-cell {
|
||||
${userNameCss}
|
||||
}
|
||||
|
||||
.table-container_row-context-menu-wrapper {
|
||||
${contextCss}
|
||||
}
|
||||
|
||||
.table-container_user-name-cell,
|
||||
.table-container_row-context-menu-wrapper {
|
||||
border-bottom: ${(props) =>
|
||||
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledTableContainer.defaultProps = { theme: Base };
|
||||
|
||||
const Table = ({
|
||||
peopleList,
|
||||
@ -40,7 +116,7 @@ const Table = ({
|
||||
}, [sectionWidth]);
|
||||
|
||||
return peopleList.length > 0 ? (
|
||||
<TableContainer forwardedRef={ref}>
|
||||
<StyledTableContainer forwardedRef={ref}>
|
||||
<TableHeader sectionWidth={sectionWidth} containerRef={ref} />
|
||||
<TableBody>
|
||||
{peopleList.map((item) => (
|
||||
@ -55,7 +131,7 @@ const Table = ({
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
</TableContainer>
|
||||
</StyledTableContainer>
|
||||
) : (
|
||||
<EmptyScreen />
|
||||
);
|
||||
|
@ -15,11 +15,37 @@ import withContextOptions from "SRC_DIR/HOCs/withPeopleContextOptions";
|
||||
import withContent from "SRC_DIR/HOCs/withPeopleContent";
|
||||
|
||||
import Badges from "../Badges";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
display: contents;
|
||||
`;
|
||||
|
||||
const StyledPeopleRow = styled(TableRow)`
|
||||
:hover {
|
||||
.table-container_cell {
|
||||
cursor: pointer;
|
||||
background: ${(props) =>
|
||||
`${props.theme.filesSection.tableView.row.backgroundActive} !important`};
|
||||
}
|
||||
|
||||
.table-container_user-name-cell {
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
.table-container_row-context-menu-wrapper {
|
||||
margin-right: -20px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container_cell {
|
||||
height: 46px;
|
||||
max-height: 46px;
|
||||
|
||||
background: ${(props) =>
|
||||
(props.checked || props.isActive) &&
|
||||
`${props.theme.filesSection.tableView.row.backgroundActive} !important`};
|
||||
}
|
||||
|
||||
.table-container_row-checkbox-wrapper {
|
||||
@ -80,6 +106,8 @@ const StyledPeopleRow = styled(TableRow)`
|
||||
}
|
||||
`;
|
||||
|
||||
StyledPeopleRow.defaultProps = { theme: Base };
|
||||
|
||||
const fakeRooms = [
|
||||
{
|
||||
name: "Room 1",
|
||||
@ -106,8 +134,11 @@ const PeopleTableRow = (props) => {
|
||||
theme,
|
||||
changeUserType,
|
||||
userId,
|
||||
setSelection,
|
||||
} = props;
|
||||
|
||||
const [isActive, setIsActive] = React.useState(false);
|
||||
|
||||
const {
|
||||
displayName,
|
||||
email,
|
||||
@ -200,127 +231,149 @@ const PeopleTableRow = (props) => {
|
||||
|
||||
const typeLabel = getRoomTypeLabel(role);
|
||||
|
||||
return (
|
||||
<StyledPeopleRow
|
||||
key={item.id}
|
||||
sideInfoColor={sideInfoColor}
|
||||
{...contextOptionsProps}
|
||||
>
|
||||
<TableCell>
|
||||
<TableCell
|
||||
hasAccess={isAdmin}
|
||||
className="table-container_row-checkbox-wrapper"
|
||||
checked={checkedProps.checked}
|
||||
>
|
||||
<div className="table-container_element">{element}</div>
|
||||
<Checkbox
|
||||
className="table-container_row-checkbox"
|
||||
onChange={onChange}
|
||||
isChecked={checkedProps.checked}
|
||||
/>
|
||||
</TableCell>
|
||||
const isChecked = checkedProps.checked;
|
||||
|
||||
<Link
|
||||
type="page"
|
||||
title={displayName}
|
||||
fontWeight="600"
|
||||
fontSize="15px"
|
||||
color={nameColor}
|
||||
isTextOverflow
|
||||
href={`/accounts/view/${userName}`}
|
||||
onClick={onUserNameClick}
|
||||
className="table-cell_username"
|
||||
>
|
||||
{statusType === "pending" ? email : displayName}
|
||||
</Link>
|
||||
<Badges statusType={statusType} />
|
||||
</TableCell>
|
||||
<TableCell className={"table-cell_type"}>
|
||||
{((isOwner && role !== "owner") ||
|
||||
(isAdmin && !isOwner && role !== "admin")) &&
|
||||
statusType !== "disabled" &&
|
||||
userId !== item.id ? (
|
||||
<ComboBox
|
||||
className="type-combobox"
|
||||
selectedOption={getTypesOptions().find(
|
||||
(option) => option.key === role
|
||||
)}
|
||||
options={getTypesOptions()}
|
||||
onSelect={onTypeChange}
|
||||
scaled={false}
|
||||
size="content"
|
||||
displaySelectedOption
|
||||
modernView
|
||||
/>
|
||||
) : (
|
||||
<Text
|
||||
const userContextClick = React.useCallback(() => {
|
||||
setIsActive(true);
|
||||
!isChecked && setSelection([]);
|
||||
}, [isChecked, setSelection]);
|
||||
|
||||
const onHideContextMenu = React.useCallback(() => {
|
||||
setIsActive(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<StyledWrapper
|
||||
className={`user-item ${
|
||||
isChecked || isActive ? "table-row-selected" : ""
|
||||
}`}
|
||||
>
|
||||
<StyledPeopleRow
|
||||
key={item.id}
|
||||
className="table-row"
|
||||
sideInfoColor={sideInfoColor}
|
||||
checked={isChecked}
|
||||
fileContextClick={userContextClick}
|
||||
onHideContextMenu={onHideContextMenu}
|
||||
isActive={isActive}
|
||||
{...contextOptionsProps}
|
||||
>
|
||||
<TableCell className={"table-container_user-name-cell"}>
|
||||
<TableCell
|
||||
hasAccess={isAdmin}
|
||||
className="table-container_row-checkbox-wrapper"
|
||||
checked={isChecked}
|
||||
>
|
||||
<div className="table-container_element">{element}</div>
|
||||
<Checkbox
|
||||
className="table-container_row-checkbox"
|
||||
onChange={onChange}
|
||||
isChecked={isChecked}
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
<Link
|
||||
type="page"
|
||||
title={position}
|
||||
title={displayName}
|
||||
fontWeight="600"
|
||||
fontSize="15px"
|
||||
color={nameColor}
|
||||
isTextOverflow
|
||||
href={`/accounts/view/${userName}`}
|
||||
onClick={onUserNameClick}
|
||||
className="table-cell_username"
|
||||
>
|
||||
{statusType === "pending" ? email : displayName}
|
||||
</Link>
|
||||
<Badges statusType={statusType} />
|
||||
</TableCell>
|
||||
<TableCell className={"table-cell_type"}>
|
||||
{((isOwner && role !== "owner") ||
|
||||
(isAdmin && !isOwner && role !== "admin")) &&
|
||||
statusType !== "disabled" &&
|
||||
userId !== item.id ? (
|
||||
<ComboBox
|
||||
className="type-combobox"
|
||||
selectedOption={getTypesOptions().find(
|
||||
(option) => option.key === role
|
||||
)}
|
||||
options={getTypesOptions()}
|
||||
onSelect={onTypeChange}
|
||||
scaled={false}
|
||||
size="content"
|
||||
displaySelectedOption
|
||||
modernView
|
||||
/>
|
||||
) : (
|
||||
<Text
|
||||
type="page"
|
||||
title={position}
|
||||
fontSize="12px"
|
||||
fontWeight={400}
|
||||
color={sideInfoColor}
|
||||
truncate
|
||||
noSelect
|
||||
style={{ paddingLeft: "8px" }}
|
||||
>
|
||||
{typeLabel}
|
||||
</Text>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="table-cell_room">
|
||||
{!rooms?.length ? (
|
||||
<Text
|
||||
type="page"
|
||||
title={position}
|
||||
fontSize="12px"
|
||||
fontWeight={400}
|
||||
color={sideInfoColor}
|
||||
truncate
|
||||
noSelect
|
||||
style={{ paddingLeft: "8px" }}
|
||||
>
|
||||
—
|
||||
</Text>
|
||||
) : rooms?.length === 1 ? (
|
||||
<Text
|
||||
type="page"
|
||||
title={position}
|
||||
fontSize="12px"
|
||||
fontWeight={400}
|
||||
color={sideInfoColor}
|
||||
truncate
|
||||
style={{ paddingLeft: "8px" }}
|
||||
>
|
||||
{rooms[0].name} ({rooms[0].role})
|
||||
</Text>
|
||||
) : (
|
||||
<ComboBox
|
||||
className="room-combobox"
|
||||
selectedOption={{ key: "length", label: `${fakeRooms.length}` }}
|
||||
options={[]}
|
||||
onSelect={onTypeChange}
|
||||
advancedOptions={getRoomsOptions()}
|
||||
scaled={false}
|
||||
size="content"
|
||||
displaySelectedOption
|
||||
modernView
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Link
|
||||
type="page"
|
||||
title={email}
|
||||
fontSize="12px"
|
||||
fontWeight={400}
|
||||
color={sideInfoColor}
|
||||
truncate
|
||||
noSelect
|
||||
style={{ paddingLeft: "8px" }}
|
||||
onClick={onEmailClick}
|
||||
isTextOverflow
|
||||
>
|
||||
{typeLabel}
|
||||
</Text>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="table-cell_room">
|
||||
{!rooms?.length ? (
|
||||
<Text
|
||||
type="page"
|
||||
title={position}
|
||||
fontSize="12px"
|
||||
fontWeight={400}
|
||||
color={sideInfoColor}
|
||||
truncate
|
||||
noSelect
|
||||
style={{ paddingLeft: "8px" }}
|
||||
>
|
||||
—
|
||||
</Text>
|
||||
) : rooms?.length === 1 ? (
|
||||
<Text
|
||||
type="page"
|
||||
title={position}
|
||||
fontSize="12px"
|
||||
fontWeight={400}
|
||||
color={sideInfoColor}
|
||||
truncate
|
||||
style={{ paddingLeft: "8px" }}
|
||||
>
|
||||
{rooms[0].name} ({rooms[0].role})
|
||||
</Text>
|
||||
) : (
|
||||
<ComboBox
|
||||
className="room-combobox"
|
||||
selectedOption={{ key: "length", label: `${fakeRooms.length}` }}
|
||||
options={[]}
|
||||
onSelect={onTypeChange}
|
||||
advancedOptions={getRoomsOptions()}
|
||||
scaled={false}
|
||||
size="content"
|
||||
displaySelectedOption
|
||||
modernView
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Link
|
||||
type="page"
|
||||
title={email}
|
||||
fontSize="12px"
|
||||
fontWeight={400}
|
||||
color={sideInfoColor}
|
||||
onClick={onEmailClick}
|
||||
isTextOverflow
|
||||
>
|
||||
{email}
|
||||
</Link>
|
||||
</TableCell>
|
||||
</StyledPeopleRow>
|
||||
{email}
|
||||
</Link>
|
||||
</TableCell>
|
||||
</StyledPeopleRow>
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user