From b32ced55019e39390b658c931659eba8ea48997a Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Wed, 12 Apr 2023 17:43:08 -0700 Subject: [PATCH] Responsive fixes for settings pages. --- components/common/HamburgerButton.js | 16 +-- components/common/MobileMenu.js | 8 +- components/common/SettingsTable.module.css | 4 + components/layout/PageHeader.module.css | 2 +- .../settings/profile/DateRangeSetting.js | 2 +- .../pages/settings/profile/LanguageSetting.js | 2 +- .../pages/settings/profile/TimezoneSetting.js | 5 +- .../pages/settings/teams/TeamEditForm.js | 2 +- .../pages/settings/teams/TeamMembers.js | 2 +- .../pages/settings/teams/TeamMembersTable.js | 87 ++++++--------- .../pages/settings/teams/TeamWebsites.js | 12 +-- .../pages/settings/teams/TeamWebsitesTable.js | 102 ++++++------------ .../pages/settings/users/UserWebsites.js | 2 +- .../settings/websites/WebsiteEditForm.js | 2 +- package.json | 2 +- yarn.lock | 8 +- 16 files changed, 97 insertions(+), 161 deletions(-) diff --git a/components/common/HamburgerButton.js b/components/common/HamburgerButton.js index 9c92b282..a2d26779 100644 --- a/components/common/HamburgerButton.js +++ b/components/common/HamburgerButton.js @@ -13,32 +13,32 @@ export default function HamburgerButton() { const menuItems = [ { label: formatMessage(labels.dashboard), - value: '/dashboard', + url: '/dashboard', }, - { label: formatMessage(labels.realtime), value: '/realtime' }, + { label: formatMessage(labels.realtime), url: '/realtime' }, !cloudMode && { label: formatMessage(labels.settings), - value: '/settings', + url: '/settings', children: [ { label: formatMessage(labels.websites), - value: '/settings/websites', + url: '/settings/websites', }, { label: formatMessage(labels.teams), - value: '/settings/teams', + url: '/settings/teams', }, { label: formatMessage(labels.users), - value: '/settings/users', + url: '/settings/users', }, ], }, { label: formatMessage(labels.profile), - value: '/settings/profile', + url: '/settings/profile', }, - !cloudMode && { label: formatMessage(labels.logout), value: '/logout' }, + !cloudMode && { label: formatMessage(labels.logout), url: '/logout' }, ].filter(n => n); const handleClick = () => setActive(state => !state); diff --git a/components/common/MobileMenu.js b/components/common/MobileMenu.js index 4168a6c6..44c8da84 100644 --- a/components/common/MobileMenu.js +++ b/components/common/MobileMenu.js @@ -8,14 +8,14 @@ export default function MobileMenu({ items = [], onClose }) { const Items = ({ items, className }) => (
- {items.map(({ label, value, children }) => { - const selected = pathname === value; + {items.map(({ label, url, children }) => { + const selected = pathname.startsWith(url); return ( <> diff --git a/components/common/SettingsTable.module.css b/components/common/SettingsTable.module.css index 023d1338..fd6cddfa 100644 --- a/components/common/SettingsTable.module.css +++ b/components/common/SettingsTable.module.css @@ -1,3 +1,7 @@ +.cell { + align-items: center; +} + .row .cell:last-child { gap: 10px; justify-content: flex-end; diff --git a/components/layout/PageHeader.module.css b/components/layout/PageHeader.module.css index 8a2a6800..1dd212bc 100644 --- a/components/layout/PageHeader.module.css +++ b/components/layout/PageHeader.module.css @@ -26,7 +26,7 @@ font-size: 24px; font-weight: 700; gap: 20px; - line-height: 50px; + height: 60px; } .actions { diff --git a/components/pages/settings/profile/DateRangeSetting.js b/components/pages/settings/profile/DateRangeSetting.js index 23921d31..2c2d70fc 100644 --- a/components/pages/settings/profile/DateRangeSetting.js +++ b/components/pages/settings/profile/DateRangeSetting.js @@ -12,7 +12,7 @@ export default function DateRangeSetting() { const handleReset = () => setDateRange(DEFAULT_DATE_RANGE); return ( - + diff --git a/components/pages/settings/profile/LanguageSetting.js b/components/pages/settings/profile/LanguageSetting.js index 8130d33a..e5fc874d 100644 --- a/components/pages/settings/profile/LanguageSetting.js +++ b/components/pages/settings/profile/LanguageSetting.js @@ -14,7 +14,7 @@ export default function LanguageSetting() { const renderValue = value => languages[value].label; return ( - + saveTimezone(getTimezone()); return ( - + {item => {item}} diff --git a/components/pages/settings/teams/TeamEditForm.js b/components/pages/settings/teams/TeamEditForm.js index 1a9a8baa..a51d4735 100644 --- a/components/pages/settings/teams/TeamEditForm.js +++ b/components/pages/settings/teams/TeamEditForm.js @@ -41,7 +41,7 @@ export default function TeamEditForm({ teamId, data, onSave, readOnly }) { }; return ( -
+ diff --git a/components/pages/settings/teams/TeamMembers.js b/components/pages/settings/teams/TeamMembers.js index ab435c4d..cafb4581 100644 --- a/components/pages/settings/teams/TeamMembers.js +++ b/components/pages/settings/teams/TeamMembers.js @@ -12,7 +12,7 @@ export default function TeamMembers({ teamId, readOnly }) { ); if (isLoading) { - return ; + return ; } const handleSave = async () => { diff --git a/components/pages/settings/teams/TeamMembersTable.js b/components/pages/settings/teams/TeamMembersTable.js index b13e57cd..ae030e4e 100644 --- a/components/pages/settings/teams/TeamMembersTable.js +++ b/components/pages/settings/teams/TeamMembersTable.js @@ -1,72 +1,45 @@ import useMessages from 'hooks/useMessages'; import useUser from 'hooks/useUser'; import { ROLES } from 'lib/constants'; -import { - Flexbox, - Table, - TableBody, - TableCell, - TableColumn, - TableHeader, - TableRow, -} from 'react-basics'; import TeamMemberRemoveButton from './TeamMemberRemoveButton'; +import SettingsTable from 'components/common/SettingsTable'; export default function TeamMembersTable({ data = [], onSave, readOnly }) { const { formatMessage, labels } = useMessages(); const { user } = useUser(); const columns = [ - { name: 'username', label: formatMessage(labels.username), style: { flex: 2 } }, - { name: 'role', label: formatMessage(labels.role), style: { flex: 1 } }, - { name: 'action', label: '', style: { flex: 1 } }, + { name: 'username', label: formatMessage(labels.username) }, + { name: 'role', label: formatMessage(labels.role) }, + { name: 'action', label: ' ' }, ]; - return ( - - - {(column, index) => { - return ( - - {column.label} - - ); - }} - - - {(row, keys, rowIndex) => { - const rowData = { - username: row?.user?.username, - role: formatMessage( - labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown], - ), - action: !readOnly && ( - - - - ), - }; + const cellRender = (row, data, key) => { + if (key === 'username') { + return row?.user?.username; + } + if (key === 'role') { + return formatMessage( + labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown], + ); + } + return data[key]; + }; - return ( - - {(data, key, colIndex) => { - return ( - - - {data[key]} - - - ); - }} - - ); - }} - -
+ return ( + + {row => { + return ( + !readOnly && ( + + ) + ); + }} + ); } diff --git a/components/pages/settings/teams/TeamWebsites.js b/components/pages/settings/teams/TeamWebsites.js index a1bcdee8..3e91b69c 100644 --- a/components/pages/settings/teams/TeamWebsites.js +++ b/components/pages/settings/teams/TeamWebsites.js @@ -9,7 +9,6 @@ import { Text, useToast, } from 'react-basics'; -import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable'; import TeamAddWebsiteForm from 'components/pages/settings/teams/TeamAddWebsiteForm'; import useApi from 'hooks/useApi'; @@ -25,7 +24,7 @@ export default function TeamWebsites({ teamId }) { const hasData = data && data.length !== 0; if (isLoading) { - return ; + return ; } const handleSave = async () => { @@ -50,15 +49,8 @@ export default function TeamWebsites({ teamId }) { return (
{toast} - {hasData && ( - {addButton} - )} + {addButton} {hasData && } - {!hasData && ( - - {addButton} - - )}
); } diff --git a/components/pages/settings/teams/TeamWebsitesTable.js b/components/pages/settings/teams/TeamWebsitesTable.js index 2d8a2a2d..a84598e8 100644 --- a/components/pages/settings/teams/TeamWebsitesTable.js +++ b/components/pages/settings/teams/TeamWebsitesTable.js @@ -1,23 +1,14 @@ import useMessages from 'hooks/useMessages'; import useUser from 'hooks/useUser'; import Link from 'next/link'; -import { - Button, - Flexbox, - Icon, - Icons, - Table, - TableBody, - TableCell, - TableColumn, - TableHeader, - TableRow, - Text, -} from 'react-basics'; +import { Button, Icon, Icons, Text } from 'react-basics'; import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton'; +import SettingsTable from 'components/common/SettingsTable'; +import useConfig from 'hooks/useConfig'; export default function TeamWebsitesTable({ data = [], onSave }) { const { formatMessage, labels } = useMessages(); + const { openExternal } = useConfig(); const { user } = useUser(); const columns = [ { name: 'name', label: formatMessage(labels.name) }, @@ -26,62 +17,37 @@ export default function TeamWebsitesTable({ data = [], onSave }) { ]; return ( - - - {(column, index) => { - return ( - - {column.label} - - ); - }} - - - {(row, keys, rowIndex) => { - const { teamId } = row; - const { id: websiteId, name, domain, userId } = row.website; - const { teamUser } = row.team; - const owner = teamUser[0]; - const canRemove = user.id === userId || user.id === owner.userId; + + {row => { + const { teamId } = row; + const { id: websiteId, name, domain, userId } = row.website; + const { teamUser } = row.team; + const owner = teamUser[0]; + const canRemove = user.id === userId || user.id === owner.userId; - row.name = name; - row.domain = domain; + row.name = name; + row.domain = domain; - row.action = ( - - - - - {canRemove && ( - - )} - - ); - - return ( - - {(data, key, colIndex) => { - return ( - - - {data[key]} - - - ); - }} - - ); - }} - -
+ return ( + <> + + + + {canRemove && ( + + )} + + ); + }} + ); } diff --git a/components/pages/settings/users/UserWebsites.js b/components/pages/settings/users/UserWebsites.js index 72222b13..1f44fb52 100644 --- a/components/pages/settings/users/UserWebsites.js +++ b/components/pages/settings/users/UserWebsites.js @@ -12,7 +12,7 @@ export default function UserWebsites({ userId }) { const hasData = data && data.length !== 0; if (isLoading) { - return ; + return ; } return ( diff --git a/components/pages/settings/websites/WebsiteEditForm.js b/components/pages/settings/websites/WebsiteEditForm.js index 01383f5a..4cf899b1 100644 --- a/components/pages/settings/websites/WebsiteEditForm.js +++ b/components/pages/settings/websites/WebsiteEditForm.js @@ -20,7 +20,7 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) { }; return ( - + diff --git a/package.json b/package.json index c699d1f3..d9cac6af 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "node-fetch": "^3.2.8", "npm-run-all": "^4.1.5", "react": "^18.2.0", - "react-basics": "^0.76.0", + "react-basics": "^0.77.0", "react-beautiful-dnd": "^13.1.0", "react-dom": "^18.2.0", "react-intl": "^5.24.7", diff --git a/yarn.lock b/yarn.lock index 10c18dc6..423a2fd8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6727,10 +6727,10 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-basics@^0.76.0: - version "0.76.0" - resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.76.0.tgz#7369ba68409388f458a2ecf73a86603884fc0711" - integrity sha512-RRtudldMecbuT/ap1giy6OdNc1t8gfGdyfXDTy4x99PWN9kvfS8MU11cfyQif8F0C6v9wKFu2taxklQQarE+mw== +react-basics@^0.77.0: + version "0.77.0" + resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.77.0.tgz#31d35b4db8119c699eeab24a7cab10a613b549f4" + integrity sha512-L14dZqlg7P9m700OvND1fsdZA/vvLH3W0Ntw5Oyk2RxE47K6oMESSuPhDi1yC2QjDYwFdKzGSsgJGfWlc++Kww== dependencies: classnames "^2.3.1" date-fns "^2.29.3"