Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-13 21:30:30 -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 _;
$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 {
display: flex;
align-items: center;
@ -58,6 +65,10 @@
.dropdown {
max-width: 500px;
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 {

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