Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

refactor(console): resources layout (#2453)

Browse source
This commit is contained in:
Xiao Yijun 2022-11-16 19:30:28 +08:00 committed by GitHub
parent 3b28b1d38d
commit c7e1f5ee97
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 51 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/console/src/components/AppContent/index.module.scss
View file

@ -21,7 +21,7 @@
.main {
flex-grow: 1;
padding-right: _.unit(6);
padding: 0 _.unit(3) 0 _.unit(2);
overflow-y: scroll;
> * {

4
packages/console/src/components/AuditLogTable/index.module.scss
View file

@ -21,10 +21,6 @@
}
}
.table {
margin-top: _.unit(4);
flex: 1;
}
.pagination {
margin-top: _.unit(4);

3
packages/console/src/components/AuditLogTable/index.tsx
View file

@ -13,6 +13,7 @@ import TableError from '@/components/Table/TableError';
import TableLoading from '@/components/Table/TableLoading';
import UserName from '@/components/UserName';
import type { RequestError } from '@/hooks/use-api';
import * as resourcesStyles from '@/scss/resources.module.scss';
import * as tableStyles from '@/scss/table.module.scss';
import ApplicationSelector from './components/ApplicationSelector';
@ -85,7 +86,7 @@ const AuditLogTable = ({ userId }: Props) => {
/>
</div>
</div>
<div className={classNames(styles.table, tableStyles.scrollable)}>
<div className={classNames(resourcesStyles.table, tableStyles.scrollable)}>
<table className={classNames(logs?.length === 0 && tableStyles.empty)}>
<colgroup>
<col className={styles.eventName} />

14
packages/console/src/pages/ApiResources/index.module.scss
View file

@ -1,19 +1,5 @@
@use '@/scss/underscore' as _;
.card {
@include _.flex-column;
}
.headline {
display: flex;
justify-content: space-between;
}
.table {
margin-top: _.unit(4);
flex: 1;
}
.icon {
flex-shrink: 0;
}

10
packages/console/src/pages/ApiResources/index.tsx
View file

@ -12,7 +12,6 @@ import ApiResourceDark from '@/assets/images/api-resource-dark.svg';
import ApiResource from '@/assets/images/api-resource.svg';
import Plus from '@/assets/images/plus.svg';
import Button from '@/components/Button';
import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import CopyToClipboard from '@/components/CopyToClipboard';
import ItemPreview from '@/components/ItemPreview';
@ -23,6 +22,7 @@ import TableLoading from '@/components/Table/TableLoading';
import type { RequestError } from '@/hooks/use-api';
import { useTheme } from '@/hooks/use-theme';
import * as modalStyles from '@/scss/modal.module.scss';
import * as resourcesStyles from '@/scss/resources.module.scss';
import * as tableStyles from '@/scss/table.module.scss';
import CreateForm from './components/CreateForm';
@ -46,8 +46,8 @@ const ApiResources = () => {
const [apiResources, totalCount] = data ?? [];
return (
<Card className={styles.card}>
<div className={styles.headline}>
<div className={resourcesStyles.container}>
<div className={resourcesStyles.headline}>
<CardTitle title="api_resources.title" subtitle="api_resources.subtitle" />
<Button
title="api_resources.create"
@ -77,7 +77,7 @@ const ApiResources = () => {
/>
</Modal>
</div>
<div className={classNames(styles.table, tableStyles.scrollable)}>
<div className={classNames(resourcesStyles.table, tableStyles.scrollable)}>
<table className={classNames(!data && tableStyles.empty)}>
<colgroup>
<col className={styles.apiResourceName} />
@ -148,7 +148,7 @@ const ApiResources = () => {
/>
)}
</div>
</Card>
</div>
);
};

14
packages/console/src/pages/Applications/index.module.scss
View file

@ -1,19 +1,5 @@
@use '@/scss/underscore' as _;
.card {
@include _.flex-column;
}
.headline {
display: flex;
justify-content: space-between;
}
.table {
margin-top: _.unit(4);
flex: 1;
}
.icon {
flex-shrink: 0;
}

14
packages/console/src/pages/Applications/index.tsx
View file

@ -9,7 +9,6 @@ import useSWR from 'swr';
import Plus from '@/assets/images/plus.svg';
import ApplicationIcon from '@/components/ApplicationIcon';
import Button from '@/components/Button';
import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import CopyToClipboard from '@/components/CopyToClipboard';
import ItemPreview from '@/components/ItemPreview';
@ -19,6 +18,7 @@ import TableError from '@/components/Table/TableError';
import TableLoading from '@/components/Table/TableLoading';
import type { RequestError } from '@/hooks/use-api';
import * as modalStyles from '@/scss/modal.module.scss';
import * as resourcesStyles from '@/scss/resources.module.scss';
import * as tableStyles from '@/scss/table.module.scss';
import { applicationTypeI18nKey } from '@/types/applications';
@ -41,8 +41,8 @@ const Applications = () => {
const [applications, totalCount] = data ?? [];
return (
<Card className={styles.card}>
<div className={styles.headline}>
<div className={resourcesStyles.container}>
<div className={resourcesStyles.headline}>
<CardTitle title="applications.title" subtitle="applications.subtitle" />
<Button
icon={<Plus />}
@ -69,19 +69,21 @@ const Applications = () => {
}}
/>
</Modal>
</div>
<div className={classNames(styles.table, tableStyles.scrollable)}>
</div>{' '}
<div className={classNames(resourcesStyles.table, tableStyles.scrollable)}>
<table className={classNames(!data && tableStyles.empty)}>
<colgroup>
<col className={styles.applicationName} />
<col />
</colgroup>
<thead>
<tr>
<th>{t('applications.application_name')}</th>
<th>{t('applications.app_id')}</th>
</tr>
</thead>
<tbody>
{!data && error && (
<TableError
@ -137,7 +139,7 @@ const Applications = () => {
/>
)}
</div>
</Card>
</div>
);
};

10
packages/console/src/pages/AuditLogs/index.module.scss
View file

@ -1,10 +0,0 @@
@use '@/scss/underscore' as _;
.card {
@include _.flex-column;
}
.headline {
display: flex;
justify-content: space-between;
}

10
packages/console/src/pages/AuditLogs/index.tsx
View file

@ -1,17 +1,15 @@
import AuditLogTable from '@/components/AuditLogTable';
import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import * as styles from './index.module.scss';
import * as resourcesStyles from '@/scss/resources.module.scss';
const AuditLogs = () => {
return (
<Card className={styles.card}>
<div className={styles.headline}>
<div className={resourcesStyles.container}>
<div className={resourcesStyles.headline}>
<CardTitle title="logs.title" subtitle="logs.subtitle" />
</div>
<AuditLogTable />
</Card>
</div>
);
};

15
packages/console/src/pages/Connectors/index.module.scss
View file

@ -1,24 +1,9 @@
@use '@/scss/underscore' as _;
.card {
@include _.flex-column;
}
.headline {
display: flex;
justify-content: space-between;
align-items: center;
}
.tabs {
margin-top: _.unit(4);
}
.table {
margin-top: _.unit(4);
flex: 1;
}
.connectorName {
width: 360px;
}

10
packages/console/src/pages/Connectors/index.tsx
View file

@ -8,7 +8,6 @@ import Plus from '@/assets/images/plus.svg';
import SocialConnectorEmptyDark from '@/assets/images/social-connector-empty-dark.svg';
import SocialConnectorEmpty from '@/assets/images/social-connector-empty.svg';
import Button from '@/components/Button';
import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import TabNav, { TabNavItem } from '@/components/TabNav';
import TableEmpty from '@/components/Table/TableEmpty';
@ -16,6 +15,7 @@ import TableError from '@/components/Table/TableError';
import TableLoading from '@/components/Table/TableLoading';
import useConnectorGroups from '@/hooks/use-connector-groups';
import { useTheme } from '@/hooks/use-theme';
import * as resourcesStyles from '@/scss/resources.module.scss';
import * as tableStyles from '@/scss/table.module.scss';
import ConnectorRow from './components/ConnectorRow';
@ -60,8 +60,8 @@ const Connectors = () => {
return (
<>
<Card className={styles.card}>
<div className={styles.headline}>
<div className={resourcesStyles.container}>
<div className={resourcesStyles.headline}>
<CardTitle title="connectors.title" subtitle="connectors.subtitle" />
{isSocial && (
<Button
@ -80,7 +80,7 @@ const Connectors = () => {
<TabNavItem href="/connectors">{t('connectors.tab_email_sms')}</TabNavItem>
<TabNavItem href="/connectors/social">{t('connectors.tab_social')}</TabNavItem>
</TabNav>
<div className={classNames(styles.table, tableStyles.scrollable)}>
<div className={classNames(resourcesStyles.table, tableStyles.scrollable)}>
<table className={classNames(!data && tableStyles.empty)}>
<colgroup>
<col className={styles.connectorName} />
@ -145,7 +145,7 @@ const Connectors = () => {
</tbody>
</table>
</div>
</Card>
</div>
<CreateForm
isOpen={Boolean(createType)}
type={createType}

18
packages/console/src/pages/Users/index.module.scss
View file

@ -1,25 +1,17 @@
@use '@/scss/underscore' as _;
.card {
@include _.flex-column;
}
.headline {
display: flex;
justify-content: space-between;
}
.filter {
margin: _.unit(4) 0;
}
.tableContainer {
flex: 1;
background-color: var(--color-layer-1);
>table {
>tbody {
>tr {
>td {
> table {
> tbody {
> tr {
> td {
padding-top: 10px;
padding-bottom: 10px;
}

8
packages/console/src/pages/Users/index.tsx
View file

@ -10,7 +10,6 @@ import useSWR from 'swr';
import Plus from '@/assets/images/plus.svg';
import ApplicationName from '@/components/ApplicationName';
import Button from '@/components/Button';
import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import DateTime from '@/components/DateTime';
import ItemPreview from '@/components/ItemPreview';
@ -23,6 +22,7 @@ import { generatedPasswordStorageKey } from '@/consts';
import { generateAvatarPlaceHolderById } from '@/consts/avatars';
import type { RequestError } from '@/hooks/use-api';
import * as modalStyles from '@/scss/modal.module.scss';
import * as resourcesStyles from '@/scss/resources.module.scss';
import * as tableStyles from '@/scss/table.module.scss';
import CreateForm from './components/CreateForm';
@ -46,8 +46,8 @@ const Users = () => {
const [users, totalCount] = data ?? [];
return (
<Card className={styles.card}>
<div className={styles.headline}>
<div className={resourcesStyles.container}>
<div className={resourcesStyles.headline}>
<CardTitle title="users.title" subtitle="users.subtitle" />
<Button
title="users.create"
@ -164,7 +164,7 @@ const Users = () => {
/>
)}
</div>
</Card>
</div>
);
};

2
packages/console/src/scss/_underscore.scss
View file

@ -5,9 +5,7 @@
}
@mixin main-content-width {
max-width: 1168px;
min-width: 604px;
margin: 0 auto;
}
@mixin flex-column {

17
packages/console/src/scss/resources.module.scss Normal file
View file

@ -0,0 +1,17 @@
@use '@/scss/underscore' as _;
.container {
width: 100%;
@include _.flex-column;
.headline {
display: flex;
justify-content: space-between;
}
.table {
flex: 1;
margin-top: _.unit(4);
background-color: var(--color-layer-1);
}
}