@blocklet/ui-react 2.12.8 → 2.12.10

package/src/UserCenter/libs/locales.ts

@@ -39,7 +39,10 @@ export const translations = {
       required: '必填的',
       invalid: '无效',
       setting: '设置',
+      save: '保存',
       profile: '信息',
+      nft: 'NFTs',
+      noNFT: '暂无 NFT',
     },
     toPublic: '公开 “{name}” 页面',
     currentPassport: '当前使用的通行证',
@@ -96,6 +99,35 @@ export const translations = {
       title: '通用设置',
       locale: '偏好语言',
     },
+    userStatus: {
+      Online: '在线',
+      Meeting: '开会中',
+      Community: '通勤中',
+      Holiday: '休假',
+      OffSick: '病假',
+      WorkingRemotely: '远程工作',
+      duration: {
+        ThirtyMinutes: '30分钟',
+        OneHour: '1小时',
+        FourHours: '4小时',
+        Today: '今天',
+        ThisWeek: '本周',
+      },
+    },
+    profile: {
+      addLink: '添加连接',
+      location: '位置',
+      timezone: '时区',
+      setStatus: '设置状态',
+      localTime: '当地时间:',
+      email: '邮箱地址',
+      emailInvalid: '邮箱格式不正确',
+      phone: '电话号码',
+      phoneInvalid: '电话号码格式不正确',
+      editProfile: '编辑资料',
+      removeStatusAfter: '移除状态',
+      justForYou: '仅对您可见',
+    },
   },
   en: {
     settings: 'Settings',
@@ -137,7 +169,10 @@ export const translations = {
       required: 'Required',
       invalid: 'Invalid',
       setting: 'Settings',
+      save: 'Save',
       profile: 'Profile',
+      nft: 'NFTs',
+      noNFT: 'No NFT',
     },
     toPublic: 'Public "{name}" page',
     currentPassport: 'Passport currently in use',
@@ -194,5 +229,35 @@ export const translations = {
       title: 'Common Settings',
       locale: 'Preferred language',
     },
+    userStatus: {
+      Online: 'Online',
+      Meeting: 'In a Meeting',
+      Community: 'Commuting',
+      Holiday: 'On Holiday',
+      OffSick: 'Off Sick',
+      WorkingRemotely: 'Working Remotely',
+      duration: {
+        ThirtyMinutes: '30 minutes',
+        OneHour: '1 hour',
+        FourHours: '4 hours',
+        Today: 'Today',
+        ThisWeek: 'This Week',
+      },
+    },
+    profile: {
+      addLink: 'Add link',
+      location: 'Location',
+      timezone: 'Timezone',
+      setStatus: 'Set a Status',
+      localTime: 'Local Time: ',
+      email: 'Email',
+      emailInvalid: 'Email is invalid',
+      phone: 'Phone',
+      phoneInvalid: 'Phone number is invalid',
+      editProfile: 'Edit Profile',
+      removeStatusAfter: 'Remove status after',
+      justForYou: 'Visible to you only',
+      maxInputLength: 'Max input length is',
+    },
   },
 };

package/src/UserSessions/components/user-sessions.tsx

@@ -9,6 +9,7 @@ import sortBy from 'lodash/sortBy';
 import UAParser from 'ua-parser-js';
 import { getVisitorId } from '@arcblock/ux/lib/Util';
 import { useConfirm } from '@arcblock/ux/lib/Dialog';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
 import pAll from 'p-all';
 import PQueue from 'p-queue';
 import { Box, Button, CircularProgress, Tooltip, Typography, useMediaQuery } from '@mui/material';
@@ -34,7 +35,7 @@ const parseUa = (ua: string) => {
 
 const queue = new PQueue({ concurrency: 1 });
 
-const UserSessionIp = memo(({ userSession }: { userSession: any }) => {
+const UserSessionIp = memo(({ userSession, isMobile = false }: { userSession: any; isMobile: boolean }) => {
   const currentState = useReactive({
     loading: true,
     ipRegion: '',
@@ -53,7 +54,7 @@ const UserSessionIp = memo(({ userSession }: { userSession: any }) => {
   }, [currentState, userSession.lastLoginIp]);
 
   return (
-    <Box>
+    <Box {...(isMobile && { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 1 })}>
       {currentState.ipRegion ? (
         <>
           <Typography variant="body2">{currentState.ipRegion}</Typography>
@@ -199,7 +200,11 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           const result = parseUa(x.ua);
-          return <Box>{[result.os?.name, result.os?.version].filter(Boolean).join('/') || t('unknown')}</Box>;
+          return (
+            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+              {[result.os?.name, result.os?.version].filter(Boolean).join('/') || t('unknown')}
+            </Box>
+          );
         },
       },
     },
@@ -210,7 +215,11 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           const result = parseUa(x.ua);
-          return <Box>{[result.browser?.name, result.browser?.version].filter(Boolean).join('/') || t('unknown')}</Box>;
+          return (
+            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+              {[result.browser?.name, result.browser?.version].filter(Boolean).join('/') || t('unknown')}
+            </Box>
+          );
         },
       },
     },
@@ -220,7 +229,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          return <Box>{x.extra?.walletOS || t('unknown')}</Box>;
+          return <Box sx={isMobile ? { textAlign: 'right' } : {}}>{x.extra?.walletOS || t('unknown')}</Box>;
         },
       },
     },
@@ -231,7 +240,7 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           return (
-            <Box sx={{ minWidth: 150, maxWidth: 250 }}>
+            <Box sx={{ minWidth: 150, maxWidth: 250, ...(isMobile && { textAlign: 'right' }) }}>
               <UserSessionInfo sessionUser={x.user} user={user} />
             </Box>
           );
@@ -244,10 +253,14 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          return x.createdAt ? (
-            <RelativeTime value={x.createdAt} relativeRange={3 * 86400 * 1000} locale={locale} />
-          ) : (
-            t('unknown')
+          return (
+            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+              {x.createdAt ? (
+                <RelativeTime value={x.createdAt} relativeRange={3 * 86400 * 1000} locale={locale} />
+              ) : (
+                t('unknown')
+              )}
+            </Box>
           );
         },
       },
@@ -258,10 +271,14 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          return x.status === 'expired' ? (
-            t('expired')
-          ) : (
-            <RelativeTime value={x.updatedAt} relativeRange={3 * 86400 * 1000} locale={locale} />
+          return (
+            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+              {x.status === 'expired' ? (
+                t('expired')
+              ) : (
+                <RelativeTime value={x.updatedAt} relativeRange={3 * 86400 * 1000} locale={locale} />
+              )}
+            </Box>
           );
         },
       },
@@ -272,7 +289,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          return <UserSessionIp userSession={x} />;
+          return <UserSessionIp userSession={x} isMobile={isMobile} />;
         },
       },
     },
@@ -283,11 +300,12 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           return (
-            <Box>
+            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
               <Button
                 sx={{
                   whiteSpace: 'nowrap',
-                  fontSize: '12px',
+                  fontSize: '12px !important',
+                  lineHeight: '1.25',
                   px: 1,
                 }}
                 disabled={currentVisitorId === x.visitorId}
@@ -310,14 +328,45 @@ export default function UserSessions({
   ].filter(Boolean);
   return (
     <Box
+      className="pc-user-sessions"
       sx={{
-        maxWidth: isMobile ? 'unset' : isLg ? 'calc(100vw - 300px)' : '920px',
+        maxWidth: isMobile ? 'unset' : isLg ? 'calc(100vw - 300px)' : '100%',
+        ...(isMobile && {
+          '.pc-user-sessions-table > div:nth-child(2)': {
+            border: `1px solid ${colors.dividerColor}`,
+            borderRadius: '8px',
+          },
+        }),
         '.MuiTableCell-head': {
           whiteSpace: 'nowrap',
           fontWeight: 'bold',
         },
+        '.MuiTableRow-root': {
+          border: 'unset',
+          '&:nth-child(even)': {
+            backgroundColor: '#F9FAFB',
+            '&:hover': {
+              backgroundColor: '#F9FAFB !important',
+            },
+          },
+        },
+        '.MuiTableRow-hover': {
+          '&:hover': {
+            backgroundColor: 'inherit !important',
+          },
+        },
         '.MuiTableCell-root': {
           paddingRight: '8px',
+          paddingLeft: '8px',
+          ...(isMobile && {
+            padding: '8px !important',
+            '&:first-child': {
+              paddingTop: '20px!important',
+            },
+            '&:last-child': {
+              paddingBottom: '20px!important',
+            },
+          }),
         },
       }}>
       {confirmHolder}
@@ -330,6 +379,7 @@ export default function UserSessions({
         customButtons={customButtons}
         options={tableOptions}
         loading={pageState.loading}
+        className="pc-user-sessions-table"
       />
     </Box>
   );