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

feat(console): add scrollbar for tenant selector (#4054)

Browse source
This commit is contained in:
Darcy Ye 2023-06-19 18:02:33 +08:00 committed by GitHub
parent d1cf786bf8
commit f34ff9119a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.module.scss
View file

@ -1,5 +1,12 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
$topbar-height: 64px;
$topbar-tenant-card-margin: _.unit(4);
$dropdown-top-margin: _.unit(1);
$dropdown-bottom-margin: _.unit(6);
$dropdown-item-margin: _.unit(1);
$dropdown-item-height: 40px;
.currentTenantCard { .currentTenantCard {
display: flex; display: flex;
align-items: center; align-items: center;
@ -58,6 +65,10 @@
.dropdown { .dropdown {
max-width: 500px; max-width: 500px;
min-width: 320px; min-width: 320px;
.scrollableContent {
max-height: calc(100vh - ($topbar-height - $topbar-tenant-card-margin + $dropdown-top-margin) - $dropdown-bottom-margin - ($dropdown-item-height + $dropdown-item-margin * 2)); // Secure 24px bottom safe margin.
}
} }
.dropdownItem { .dropdownItem {

33
packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.tsx
View file

@ -11,6 +11,7 @@ import CreateTenantModal from '@/cloud/pages/Main/TenantLandingPage/TenantLandin
import AppError from '@/components/AppError'; import AppError from '@/components/AppError';
import Divider from '@/ds-components/Divider'; import Divider from '@/ds-components/Divider';
import Dropdown, { DropdownItem } from '@/ds-components/Dropdown'; import Dropdown, { DropdownItem } from '@/ds-components/Dropdown';
import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
import useTenants from '@/hooks/use-tenants'; import useTenants from '@/hooks/use-tenants';
import { onKeyDownHandler } from '@/utils/a11y'; import { onKeyDownHandler } from '@/utils/a11y';
@ -69,21 +70,23 @@ function TenantSelector() {
setShowDropdown(false); setShowDropdown(false);
}} }}
> >
{tenants.map(({ id, name, tag }) => ( <OverlayScrollbar className={styles.scrollableContent}>
<DropdownItem {tenants.map(({ id, name, tag }) => (
key={id} <DropdownItem
className={styles.dropdownItem} key={id}
onClick={() => { className={styles.dropdownItem}
window.open(new URL(`/${id}`, window.location.origin).toString(), '_self'); onClick={() => {
}} window.open(new URL(`/${id}`, window.location.origin).toString(), '_self');
> }}
<div className={styles.dropdownName}>{name}</div> >
<TenantEnvTag className={styles.dropdownTag} tag={tag} /> <div className={styles.dropdownName}>{name}</div>
<Tick <TenantEnvTag className={styles.dropdownTag} tag={tag} />
className={classNames(styles.checkIcon, id === currentTenantId && styles.visible)} <Tick
/> className={classNames(styles.checkIcon, id === currentTenantId && styles.visible)}
</DropdownItem> />
))} </DropdownItem>
))}
</OverlayScrollbar>
<Divider /> <Divider />
<div <div
role="button" role="button"