diff --git a/public/locales/en.json b/public/locales/en.json index d09c3b6..cabbc29 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -341,9 +341,11 @@ "blockHashCopyButtons": "Show copy buttons next to all block hashes", "showRelativeDates": "Show relative dates instead of absolute ones if recent", "showRelativeDatesDescription": "Everywhere on the site, if a date is less than 7 days ago, it will show as a relative date instead.", + "showNativeDates": "Show dates in a native date format from the language", + "showNativeDatesDescription": "If disabled, dates will always be shown as YYYY/MM/DD HH:mm:ss", "transactionDefaultRaw": "Default to the 'Raw' tab instead of 'CommonMeta' on the transaction page", "defaultPageSize": "Default page size for table listings", - "tableHotkeys": "Enable table navigation hotkeys (left and right arrows).", + "tableHotkeys": "Enable table navigation hotkeys (left and right arrows)", "subMenuDebug": "Debug settings", "advancedWalletFormats": "Advanced wallet formats", diff --git a/src/components/DateTime.tsx b/src/components/DateTime.tsx index 85ca12d..2739fb2 100644 --- a/src/components/DateTime.tsx +++ b/src/components/DateTime.tsx @@ -41,6 +41,7 @@ const formatter = useContext(TimeagoFormatterContext); const showRelativeDates = useBooleanSetting("showRelativeDates"); + const showNativeDates = useBooleanSetting("showNativeDates"); if (!date) return null; @@ -69,7 +70,9 @@ {isTimeAgo ? - : dayjs(realDate).format("YYYY/MM/DD HH:mm:ss")} + : dayjs(realDate).format(showNativeDates + ? "ll LTS" + : "YYYY/MM/DD HH:mm:ss")} ); diff --git a/src/pages/blocks/BlocksTable.tsx b/src/pages/blocks/BlocksTable.tsx index 7eac690..97e63f1 100644 --- a/src/pages/blocks/BlocksTable.tsx +++ b/src/pages/blocks/BlocksTable.tsx @@ -9,7 +9,9 @@ import { KristBlock } from "@api/types"; import { lookupBlocks, LookupBlocksOptions, LookupBlocksResponse } from "@api/lookup"; -import { useMalleablePagination, useTableHistory } from "@utils/table"; +import { + useMalleablePagination, useTableHistory, useDateColumnWidth +} from "@utils/table"; import { ContextualAddress } from "@comp/addresses/ContextualAddress"; import { BlockHash } from "./BlockHash"; @@ -44,6 +46,8 @@ options, setOptions, setPagination ); + const dateColumnWidth = useDateColumnWidth(); + // Fetch the blocks from the API, mapping the table options useEffect(() => { debug("looking up blocks"); @@ -134,7 +138,7 @@ title: t("blocks.columnTime"), dataIndex: "time", key: "time", render: time => , - width: 200, + width: dateColumnWidth, sorter: true, defaultSortOrder: lowest ? undefined : "descend" diff --git a/src/pages/names/NamesTable.tsx b/src/pages/names/NamesTable.tsx index f653f8d..5fad00c 100644 --- a/src/pages/names/NamesTable.tsx +++ b/src/pages/names/NamesTable.tsx @@ -8,7 +8,9 @@ import { KristName } from "@api/types"; import { lookupNames, LookupNamesOptions, LookupNamesResponse } from "@api/lookup"; -import { useMalleablePagination, useTableHistory } from "@utils/table"; +import { + useMalleablePagination, useTableHistory, useDateColumnWidth +} from "@utils/table"; import { KristNameLink } from "@comp/names/KristNameLink"; import { ContextualAddress } from "@comp/addresses/ContextualAddress"; @@ -46,6 +48,8 @@ options, setOptions, setPagination ); + const dateColumnWidth = useDateColumnWidth(); + // Fetch the names from the API, mapping the table options useEffect(() => { debug("looking up names for %s", addresses ? addresses.join(",") : "network"); @@ -144,7 +148,7 @@ dataIndex: "registered", key: "registered", render: time => , - width: 200, + width: dateColumnWidth, sorter: true, defaultSortOrder: sortNew ? "descend" : undefined @@ -156,7 +160,7 @@ dataIndex: "updated", key: "updated", render: time => , - width: 200, + width: dateColumnWidth, sorter: true } diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx index ca211e4..660dd71 100644 --- a/src/pages/settings/SettingsPage.tsx +++ b/src/pages/settings/SettingsPage.tsx @@ -98,6 +98,15 @@ /> + {/* Show native dates */} + + + + {/* Default to 'Raw' on transaction page */} diff --git a/src/pages/transactions/TransactionsTable.tsx b/src/pages/transactions/TransactionsTable.tsx index 931b58a..294e466 100644 --- a/src/pages/transactions/TransactionsTable.tsx +++ b/src/pages/transactions/TransactionsTable.tsx @@ -12,7 +12,9 @@ lookupTransactions, LookupTransactionsOptions, LookupTransactionsResponse, LookupTransactionType } from "@api/lookup"; -import { useMalleablePagination, useTableHistory } from "@utils/table"; +import { + useMalleablePagination, useTableHistory, useDateColumnWidth +} from "@utils/table"; import { ListingType } from "./TransactionsPage"; @@ -90,6 +92,8 @@ options, setOptions, setPagination ); + const dateColumnWidth = useDateColumnWidth(); + // Fetch the transactions from the API, mapping the table options useEffect(() => { debug( @@ -222,7 +226,7 @@ title: t("transactions.columnTime"), dataIndex: "time", key: "time", render: time => , - width: 200, + width: dateColumnWidth, sorter: true, defaultSortOrder: "descend" diff --git a/src/pages/wallets/WalletsTable.tsx b/src/pages/wallets/WalletsTable.tsx index 019eae7..79a60d0 100644 --- a/src/pages/wallets/WalletsTable.tsx +++ b/src/pages/wallets/WalletsTable.tsx @@ -13,6 +13,7 @@ import { WalletActions } from "./WalletActions"; import { keyedNullSort, localeSort } from "@utils"; +import { useDateColumnWidth } from "@utils/table"; export function WalletsTable(): JSX.Element { const { t } = useTranslation(); @@ -24,6 +25,8 @@ .map(w => w.category) as string[])]; localeSort(categories); + const dateColumnWidth = useDateColumnWidth(); + return , + width: dateColumnWidth, + sorter: keyedNullSort("firstSeen") }, diff --git a/src/utils/settings.ts b/src/utils/settings.ts index f9ac8fc..c2edd03 100644 --- a/src/utils/settings.ts +++ b/src/utils/settings.ts @@ -44,6 +44,8 @@ readonly blockHashCopyButtons: boolean; /** Show relative dates instead of absolute ones when they are recent. */ readonly showRelativeDates: boolean; + /** Show dates in a native date format from the language. */ + readonly showNativeDates: boolean; /** Default to the 'Raw' tab instead of 'CommonMeta' on the transaction page. */ readonly transactionDefaultRaw: boolean; /** Default page size for table listings. */ @@ -69,6 +71,7 @@ nameCopyButtons: false, blockHashCopyButtons: false, showRelativeDates: false, + showNativeDates: false, transactionDefaultRaw: false, defaultPageSize: 15, tableHotkeys: true, diff --git a/src/utils/table.tsx b/src/utils/table.tsx index 7080f08..45c9121 100644 --- a/src/utils/table.tsx +++ b/src/utils/table.tsx @@ -303,3 +303,10 @@ hotkeys: enableHotkeys ? hotkeys : null }; } + +/** Returns an appropriate date column width for the given language and + * settings. */ +export function useDateColumnWidth(): number { + const showNativeDates = useBooleanSetting("showNativeDates"); + return showNativeDates ? 250 : 200; +}