diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js
index 9c6d9b8e22..648f970450 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js
@@ -1,15 +1,122 @@
-import { useRef } from "react";
-import Row from "@docspace/components/row";
+import { useCallback } from "react";
+import { isMobile } from "react-device-detect";
+import { Base } from "@docspace/components/themes";
+import { tablet } from "@docspace/components/utils/device";
+import styled, { css } from "styled-components";
+
+import withContent from "SRC_DIR/HOCs/withPeopleContent";
import SessionsRowContent from "./SessionsRowContent";
+import Row from "@docspace/components/row";
import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
-const SessionsRow = (props) => {
- const { t, sectionWidth, data, isChecked, toggleSession } = props;
+const marginStyles = css`
+ margin-left: -24px;
+ margin-right: -24px;
+ padding-left: 24px;
+ padding-right: 24px;
- const ref = useRef();
+ @media ${tablet} {
+ margin-left: -16px;
+ margin-right: -16px;
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+`;
+
+const checkedStyle = css`
+ background: ${(props) => props.theme.filesSection.rowView.checkedBackground};
+ ${marginStyles}
+`;
+
+const Wrapper = 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;
+ `}
+ height: 100%;
+ user-select: none;
+
+ position: relative;
+ outline: none;
+ background: none !important;
+ }
+`;
+
+Wrapper.defaultProps = { theme: Base };
+
+const StyledRow = styled(Row)`
+ ${(props) => (props.checked || props.isActive) && checkedStyle};
+
+ ${!isMobile &&
+ css`
+ :hover {
+ cursor: pointer;
+ ${checkedStyle}
+
+ margin-top: -3px;
+ padding-bottom: 1px;
+ border-top: ${(props) =>
+ `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+ border-bottom: ${(props) =>
+ `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+ }
+ `}
+
+ position: unset;
+ margin-top: -2px;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+ .styled-checkbox-container {
+ .checkbox {
+ padding-right: 4px;
+ }
+ }
+
+ .styled-element {
+ height: 32px;
+ ${(props) =>
+ props.theme.interfaceDirection === "rtl"
+ ? css`
+ margin-left: 12px;
+ `
+ : css`
+ margin-right: 12px;
+ `}
+ }
+`;
+
+const SessionsRow = (props) => {
+ const {
+ t,
+ sectionWidth,
+ item,
+ checkedProps,
+ onContentRowSelect,
+ onContentRowClick,
+ element,
+ isActive,
+ } = props;
+
+ const isChecked = checkedProps.checked;
+
+ const onRowClick = useCallback(() => {
+ onContentRowClick && onContentRowClick(!isChecked, item);
+ }, [isChecked, item, onContentRowClick]);
+
+ const onRowContextClick = useCallback(() => {
+ onContentRowClick && onContentRowClick(!isChecked, item, false);
+ }, [isChecked, item, onContentRowClick]);
const contextOptions = [
{
@@ -36,26 +143,37 @@ const SessionsRow = (props) => {
},
];
- const handleSessionToggle = (e) => {
- e.preventDefault();
- e.stopPropagation();
- ref.current?.contains(e.target) || toggleSession(e);
- };
+ // const handleSessionToggle = (checked) => {
+ // toggleSession(checked);
+ // console.log("checked", checked);
+ // };
return (
-
-
-
+
+
+
+
+
+
);
};
-export default SessionsRow;
+export default withContent(SessionsRow);
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js
index 5150fcec69..03827ea82f 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js
@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
import Text from "@docspace/components/text";
import Box from "@docspace/components/box";
import RowContent from "@docspace/components/row-content";
-import Avatar from "@docspace/components/avatar";
+import { tablet, mobile } from "@docspace/components/utils/device";
const StyledRowContent = styled(RowContent)`
.rowMainContainer {
@@ -10,15 +10,19 @@ const StyledRowContent = styled(RowContent)`
width: 100%;
}
- .avatar {
- ${(props) =>
- props.theme.interfaceDirection === "rtl"
- ? css`
- margin-left: 10px;
- `
- : css`
- margin-right: 10px;
- `}
+ @media ${tablet} {
+ .row-main-container-wrapper {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ max-width: inherit;
+ }
+ }
+
+ @media ${mobile} {
+ .row-main-container-wrapper {
+ justify-content: flex-start;
+ }
}
.session-info-wrapper {
@@ -65,12 +69,10 @@ const StyledRowContent = styled(RowContent)`
}
`;
-const SessionsRowContent = (props) => {
- const { sectionWidth, data } = props;
-
+const SessionsRowContent = ({ sectionWidth, item }) => {
const {
- avatar,
displayName,
+
status,
platform,
browser,
@@ -78,18 +80,12 @@ const SessionsRowContent = (props) => {
city,
ip,
userId,
- } = data;
+ } = item;
const isOnline = status === "Online";
const contentData = [
-
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js
index 19cab69b13..9da4116457 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js
@@ -1,5 +1,6 @@
import { inject, observer } from "mobx-react";
import styled, { css } from "styled-components";
+import { tablet } from "@docspace/components/utils/device";
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
import RowContainer from "@docspace/components/row-container";
@@ -9,6 +10,20 @@ import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.rea
import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
+const marginStyles = css`
+ 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;
+ }
+`;
+
const StyledRowContainer = styled(RowContainer)`
margin: 0 0 24px;
@@ -47,28 +62,53 @@ const StyledRowContainer = styled(RowContainer)`
.table-container_group-menu-separator {
margin: 0 16px;
}
+ }
- .table-list-item {
- cursor: pointer;
+ .row-selected + .row-wrapper:not(.row-selected) {
+ .user-row {
+ border-top: ${(props) =>
+ `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+ margin-top: -3px;
- &:hover {
- background-color: ${(props) =>
- props.theme.filesSection.tableView.row.backgroundActive};
+ ${marginStyles}
+ }
+ }
- .table-container_cell {
- margin-top: -1px;
- border-top: ${(props) =>
- `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+ .row-wrapper:not(.row-selected) + .row-selected {
+ .user-row {
+ border-top: ${(props) =>
+ `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+ margin-top: -3px;
- margin-left: -24px;
- padding-left: 24px;
- }
+ ${marginStyles}
+ }
+ }
- .table-container_row-context-menu-wrapper {
- margin-right: -20px;
- padding-right: 20px;
- }
- }
+ .row-hotkey-border + .row-selected {
+ .user-row {
+ border-top: 1px solid #2da7db !important;
+ }
+ }
+
+ .row-selected:last-child {
+ .user-row {
+ border-bottom: ${(props) =>
+ `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+ padding-bottom: 1px;
+
+ ${marginStyles}
+ }
+ .user-row::after {
+ height: 0px;
+ }
+ }
+ .row-selected:first-child {
+ .user-row {
+ border-top: ${(props) =>
+ `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+ margin-top: -3px;
+
+ ${marginStyles}
}
}
@@ -87,21 +127,16 @@ const RowView = (props) => {
t,
sectionWidth,
sessionsData,
- allSessions,
- checkedSessions,
- toggleSession,
- toggleAllSessions,
- isSessionChecked,
+ // allSessions,
+ // checkedSessions,
+ // toggleSession,
+ // toggleAllSessions,
+ // isSessionChecked,
} = props;
- const handleToggle = (e, id) => {
- e.stopPropagation();
- toggleSession(id);
- };
-
- const handleAllToggles = (checked) => {
- toggleAllSessions(checked, allSessions);
- };
+ // const handleAllToggles = (checked) => {
+ // toggleAllSessions(checked, allSessions);
+ // };
const headerMenu = [
{
@@ -127,21 +162,22 @@ const RowView = (props) => {
},
];
- const isChecked = checkedSessions.length === allSessions.length;
+ // const isChecked = checkedSessions.length === allSessions.length;
- const isIndeterminate =
- checkedSessions.length > 0 && checkedSessions.length !== allSessions.length;
+ // const isIndeterminate =
+ // checkedSessions.length > 0 && checkedSessions.length !== allSessions.length;
return (
{}}
>
- {checkedSessions.length > 0 && (
+ {/* {checkedSessions.length > 0 && (
{
onChange={handleAllToggles}
/>
- )}
+ )} */}
- {sessionsData.map((session) => (
+ {sessionsData.map((item) => (
handleToggle(e, session.userId)}
/>
))}