added additional conditions for country and city

This commit is contained in:
Elyor Djalilov 2024-05-27 12:58:49 +05:00
parent cb43a107f4
commit f3ab0dae5a
6 changed files with 38 additions and 25 deletions

View File

@ -49,10 +49,14 @@ const SessionsRowContent = ({ sectionWidth, item }) => {
{platform} {platform}
{` ${browser}`} {` ${browser}`}
</Text> </Text>
<Text fontSize="12px" fontWeight="600">
{country} {(country || city) && (
{` ${city}`} <Text fontSize="12px" fontWeight="600">
</Text> {country}
{country && city && ` ${city}`}
</Text>
)}
<Text fontSize="12px" fontWeight="600" containerWidth="160px"> <Text fontSize="12px" fontWeight="600" containerWidth="160px">
{ip} {ip}
</Text> </Text>

View File

@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import { TableHeader } from "@docspace/shared/components/table"; import { TableHeader } from "@docspace/shared/components/table";
const TABLE_VERSION = "5"; const TABLE_VERSION = "4";
const TABLE_COLUMNS = `SecuritySessionsColumns_ver-${TABLE_VERSION}`; const TABLE_COLUMNS = `SecuritySessionsColumns_ver-${TABLE_VERSION}`;
const getColumns = (defaultColumns, userId) => { const getColumns = (defaultColumns, userId) => {
@ -62,19 +62,12 @@ const SessionsTableHeader = (props) => {
onChange: onColumnChange, onChange: onColumnChange,
}, },
{ {
key: "Country", key: "Location",
title: t("Common:Country"), title: t("Common:Location"),
enable: true, enable: true,
resizable: true, resizable: true,
onChange: onColumnChange, onChange: onColumnChange,
}, },
{
key: "IpAddress",
title: t("Common:IpAddress"),
enable: false,
resizable: true,
onChange: onColumnChange,
},
]; ];
const [columns, setColumns] = useState(getColumns(defaultColumns, userId)); const [columns, setColumns] = useState(getColumns(defaultColumns, userId));

View File

@ -117,6 +117,15 @@ const StyledTableRow = styled(TableRow)`
color: ${(props) => props.theme.profile.activeSessions.tableCellColor}; color: ${(props) => props.theme.profile.activeSessions.tableCellColor};
} }
.divider {
display: inline-block;
height: 12px;
width: 2px;
background-color: ${(props) =>
props.theme.profile.activeSessions.dividerColor};
margin: -2px 5px;
}
.online { .online {
font-weight: 600; font-weight: 600;
color: ${(props) => props.theme.profile.activeSessions.textOnlineColor}; color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
@ -282,15 +291,14 @@ const SessionsTableRow = (props) => {
<TableCell> <TableCell>
<Text className="session-info" truncate> <Text className="session-info" truncate>
{country},&nbsp; {(country || city) && (
</Text> <>
<Text className="session-info" truncate> {country}
{city} {country && city && ", "}
</Text> {city}
</TableCell> <span className="divider"></span>
</>
<TableCell> )}
<Text className="session-info" truncate>
{ip} {ip}
</Text> </Text>
</TableCell> </TableCell>

View File

@ -9,7 +9,7 @@ import SessionsTableRow from "./SessionsTableRow";
import { TableContainer } from "@docspace/shared/components/table"; import { TableContainer } from "@docspace/shared/components/table";
import { TableBody } from "@docspace/shared/components/table"; import { TableBody } from "@docspace/shared/components/table";
const TABLE_VERSION = "5"; const TABLE_VERSION = "4";
const COLUMNS_SIZE = `securitySessionsColumnsSize_ver-${TABLE_VERSION}`; const COLUMNS_SIZE = `securitySessionsColumnsSize_ver-${TABLE_VERSION}`;
const INFO_PANEL_COLUMNS_SIZE = `infoPanelSessionsColumnsSize_ver-${TABLE_VERSION}`; const INFO_PANEL_COLUMNS_SIZE = `infoPanelSessionsColumnsSize_ver-${TABLE_VERSION}`;

View File

@ -3229,13 +3229,17 @@ export const getBaseTheme = () => {
textDescriptionColor: "#A3A9AE", textDescriptionColor: "#A3A9AE",
}, },
activeSessions: { activeSessions: {
color: "#333", color: "#333333",
borderColor: "#eceef1", borderColor: "#eceef1",
tickIconColor: "#35AD17", tickIconColor: "#35AD17",
removeIconColor: "#A3A9AE", removeIconColor: "#A3A9AE",
sortHeaderColor: "#d0d5da", sortHeaderColor: "#d0d5da",
textOnlineColor: "#35ad17",
boxShadowColor: "rgba(4, 15, 27, 0.07) 0px 5px 20px",
tableCellColor: "#a3a9ae", tableCellColor: "#a3a9ae",
dividerColor: "#D0D5DA", dividerColor: "#D0D5DA",
iconColor: "#657077",
subtitleColor: "#657077",
}, },
}, },

View File

@ -3211,8 +3211,12 @@ const Dark: TTheme = {
tickIconColor: "#3BA420", tickIconColor: "#3BA420",
removeIconColor: "#A3A9AE", removeIconColor: "#A3A9AE",
sortHeaderColor: "#474747", sortHeaderColor: "#474747",
textOnlineColor: "#3BA420",
boxShadowColor: "rgba(0, 0, 0, 0.12) 0px 40px 60px",
tableCellColor: "#858585", tableCellColor: "#858585",
dividerColor: "#474747", dividerColor: "#474747",
iconColor: "#858585",
subtitleColor: "#858585",
}, },
}, },