Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-24 22:05:56 -05:00
Code Issues Activity

refactor(console): table error display

Browse source
This commit is contained in:
Charles Zhao 2022-06-07 19:51:41 +08:00
parent 2ba11215ed
commit 7789efe889
No known key found for this signature in database
GPG key ID: 4858774754C92DF2
9 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/components/Table/TableEmpty.module.scss
View file

@ -1,8 +1,10 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
.tableEmpty { .tableEmpty {
display: flex;
flex-direction: column;
align-items: center;
padding: _.unit(4) 0; padding: _.unit(4) 0;
text-align: center;
.title { .title {
font: var(--font-subhead-2); font: var(--font-subhead-2);

11
packages/console/src/components/Table/TableError.module.scss
View file

@ -1,22 +1,21 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
.tableError { .tableError {
text-align: center; display: flex;
flex-direction: column;
align-items: center;
.image { > *:not(:first-child) {
text-align: center; margin-top: _.unit(2);
} }
.title { .title {
text-align: center; text-align: center;
font: var(--font-subhead-2); font: var(--font-subhead-2);
margin-bottom: _.unit(2);
} }
.content { .content {
text-align: center;
font: var(--font-body-medium); font: var(--font-body-medium);
color: var(--color-neutral-50); color: var(--color-neutral-50);
margin-bottom: _.unit(2);
} }
} }

4
packages/console/src/components/Table/TableError.tsx
View file

@ -20,9 +20,7 @@ const TableError = ({ title, content, onRetry, columns }: Props) => {
<tr> <tr>
<td colSpan={columns}> <td colSpan={columns}>
<div className={styles.tableError}> <div className={styles.tableError}>
<div className={styles.image}> <img src={ErrorImage} />
<img src={ErrorImage} />
</div>
<div className={styles.title}> <div className={styles.title}>
{title ?? t('admin_console.errors.something_went_wrong')} {title ?? t('admin_console.errors.something_went_wrong')}
</div> </div>

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

@ -73,7 +73,7 @@ const ApiResources = () => {
</Modal> </Modal>
</div> </div>
<div className={classNames(styles.table, tableStyles.scrollable)}> <div className={classNames(styles.table, tableStyles.scrollable)}>
<table> <table className={classNames(!data && tableStyles.empty)}>
<colgroup> <colgroup>
<col className={styles.apiResourceName} /> <col className={styles.apiResourceName} />
<col /> <col />

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

@ -70,7 +70,7 @@ const Applications = () => {
</Modal> </Modal>
</div> </div>
<div className={classNames(styles.table, tableStyles.scrollable)}> <div className={classNames(styles.table, tableStyles.scrollable)}>
<table> <table className={classNames(!data && tableStyles.empty)}>
<colgroup> <colgroup>
<col className={styles.applicationName} /> <col className={styles.applicationName} />
<col /> <col />

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

@ -64,7 +64,7 @@ const AuditLogs = () => {
</div> </div>
</div> </div>
<div className={classNames(styles.table, tableStyles.scrollable)}> <div className={classNames(styles.table, tableStyles.scrollable)}>
<table> <table className={classNames(!data && tableStyles.empty)}>
<colgroup> <colgroup>
<col className={styles.eventName} /> <col className={styles.eventName} />
<col /> <col />

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

@ -72,7 +72,7 @@ const Connectors = () => {
<TabNavItem href="/connectors/social">{t('connectors.tab_social')}</TabNavItem> <TabNavItem href="/connectors/social">{t('connectors.tab_social')}</TabNavItem>
</TabNav> </TabNav>
<div className={classNames(styles.table, tableStyles.scrollable)}> <div className={classNames(styles.table, tableStyles.scrollable)}>
<table> <table className={classNames(!data && tableStyles.empty)}>
<colgroup> <colgroup>
<col className={styles.connectorName} /> <col className={styles.connectorName} />
<col /> <col />

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

@ -81,7 +81,7 @@ const Users = () => {
/> />
</div> </div>
<div className={classNames(styles.table, tableStyles.scrollable)}> <div className={classNames(styles.table, tableStyles.scrollable)}>
<table> <table className={classNames(!data && tableStyles.empty)}>
<colgroup> <colgroup>
<col className={styles.userName} /> <col className={styles.userName} />
<col /> <col />

4
packages/console/src/scss/table.module.scss
View file

@ -31,3 +31,7 @@ tr.clickable {
} }
} }
} }
.empty {
height: 100%;
}