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: add overlay scrollbar on sidebar and main content (#3764)

Browse source
This commit is contained in:
Charles Zhao 2023-04-28 10:07:25 +08:00 committed by GitHub
parent 4b3c545c59
commit db4bc9e3ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 99 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/console/src/containers/ConsoleContent/Sidebar/index.tsx
View file

@ -1,6 +1,8 @@
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';
import OverlayScrollbar from '@/components/OverlayScrollbar';
import Item from './components/Item';
import Section from './components/Section';
import { useSidebarMenuItems } from './hook';
@ -15,7 +17,7 @@ function Sidebar() {
const { sections } = useSidebarMenuItems();
return (
<div className={styles.sidebar}>
<OverlayScrollbar className={styles.sidebar}>
{sections.map(({ title, items }) => (
<Section key={title} title={t(title)}>
{items.map(
@ -33,7 +35,7 @@ function Sidebar() {
)}
</Section>
))}
</div>
</OverlayScrollbar>
);
}

10
packages/console/src/containers/ConsoleContent/index.module.scss
View file

@ -6,10 +6,14 @@
overflow: hidden;
}
.main {
.overlayScrollbarWrapper {
flex-grow: 1;
padding: 0 _.unit(2);
overflow-y: scroll;
}
.main {
width: 100%;
padding: 0 _.unit(6) 0 _.unit(2);
min-width: 636px;
> * {
@include _.main-content-width;

133
packages/console/src/containers/ConsoleContent/index.tsx
View file

@ -1,5 +1,6 @@
import { Navigate, Route, Routes, useOutletContext } from 'react-router-dom';
import OverlayScrollbar from '@/components/OverlayScrollbar';
import {
ApiResourceDetailsTabs,
SignInExperiencePage,
@ -48,74 +49,76 @@ function ConsoleContent() {
return (
<div className={styles.content}>
<Sidebar />
<div ref={scrollableContent} className={styles.main}>
<Routes>
<Route path="*" element={<NotFound />} />
<Route path="get-started" element={<GetStarted />} />
<Route path="dashboard" element={<Dashboard />} />
<Route path="applications">
<Route index element={<Applications />} />
<Route path="create" element={<Applications />} />
<Route path=":id/guide" element={<ApplicationDetails />} />
<Route path=":id" element={<ApplicationDetails />} />
</Route>
<Route path="api-resources">
<Route index element={<ApiResources />} />
<Route path="create" element={<ApiResources />} />
<Route path=":id" element={<ApiResourceDetails />}>
<Route index element={<Navigate replace to={ApiResourceDetailsTabs.Settings} />} />
<Route path={ApiResourceDetailsTabs.Settings} element={<ApiResourceSettings />} />
<Route
path={ApiResourceDetailsTabs.Permissions}
element={<ApiResourcePermissions />}
/>
<OverlayScrollbar className={styles.overlayScrollbarWrapper}>
<div ref={scrollableContent} className={styles.main}>
<Routes>
<Route path="*" element={<NotFound />} />
<Route path="get-started" element={<GetStarted />} />
<Route path="dashboard" element={<Dashboard />} />
<Route path="applications">
<Route index element={<Applications />} />
<Route path="create" element={<Applications />} />
<Route path=":id/guide" element={<ApplicationDetails />} />
<Route path=":id" element={<ApplicationDetails />} />
</Route>
</Route>
<Route path="sign-in-experience">
<Route index element={<Navigate replace to={SignInExperiencePage.BrandingTab} />} />
<Route path=":tab" element={<SignInExperience />} />
</Route>
<Route path="connectors">
<Route index element={<Navigate replace to={ConnectorsTabs.Passwordless} />} />
<Route path=":tab" element={<Connectors />} />
<Route path=":tab/create/:createType" element={<Connectors />} />
<Route path=":tab/guide/:factoryId" element={<Connectors />} />
<Route path=":tab/:connectorId" element={<ConnectorDetails />} />
</Route>
<Route path="users">
<Route index element={<Users />} />
<Route path="create" element={<Users />} />
<Route path=":id" element={<UserDetails />}>
<Route index element={<Navigate replace to={UserDetailsTabs.Settings} />} />
<Route path={UserDetailsTabs.Settings} element={<UserSettings />} />
<Route path={UserDetailsTabs.Roles} element={<UserRoles />} />
<Route path={UserDetailsTabs.Logs} element={<UserLogs />} />
<Route path="api-resources">
<Route index element={<ApiResources />} />
<Route path="create" element={<ApiResources />} />
<Route path=":id" element={<ApiResourceDetails />}>
<Route index element={<Navigate replace to={ApiResourceDetailsTabs.Settings} />} />
<Route path={ApiResourceDetailsTabs.Settings} element={<ApiResourceSettings />} />
<Route
path={ApiResourceDetailsTabs.Permissions}
element={<ApiResourcePermissions />}
/>
</Route>
</Route>
<Route path={`:id/${UserDetailsTabs.Logs}/:logId`} element={<AuditLogDetails />} />
</Route>
<Route path="audit-logs">
<Route index element={<AuditLogs />} />
<Route path=":logId" element={<AuditLogDetails />} />
</Route>
<Route path="roles">
<Route index element={<Roles />} />
<Route path="create" element={<Roles />} />
<Route path=":id" element={<RoleDetails />}>
<Route index element={<Navigate replace to={RoleDetailsTabs.Settings} />} />
<Route path={RoleDetailsTabs.Settings} element={<RoleSettings />} />
<Route path={RoleDetailsTabs.Permissions} element={<RolePermissions />} />
<Route path={RoleDetailsTabs.Users} element={<RoleUsers />} />
<Route path="sign-in-experience">
<Route index element={<Navigate replace to={SignInExperiencePage.BrandingTab} />} />
<Route path=":tab" element={<SignInExperience />} />
</Route>
</Route>
<Route path="profile">
<Route index element={<Profile />} />
<Route path="verify-password" element={<VerifyPasswordModal />} />
<Route path="change-password" element={<ChangePasswordModal />} />
<Route path="link-email" element={<LinkEmailModal />} />
<Route path="verification-code" element={<VerificationCodeModal />} />
</Route>
</Routes>
</div>
<Route path="connectors">
<Route index element={<Navigate replace to={ConnectorsTabs.Passwordless} />} />
<Route path=":tab" element={<Connectors />} />
<Route path=":tab/create/:createType" element={<Connectors />} />
<Route path=":tab/guide/:factoryId" element={<Connectors />} />
<Route path=":tab/:connectorId" element={<ConnectorDetails />} />
</Route>
<Route path="users">
<Route index element={<Users />} />
<Route path="create" element={<Users />} />
<Route path=":id" element={<UserDetails />}>
<Route index element={<Navigate replace to={UserDetailsTabs.Settings} />} />
<Route path={UserDetailsTabs.Settings} element={<UserSettings />} />
<Route path={UserDetailsTabs.Roles} element={<UserRoles />} />
<Route path={UserDetailsTabs.Logs} element={<UserLogs />} />
</Route>
<Route path={`:id/${UserDetailsTabs.Logs}/:logId`} element={<AuditLogDetails />} />
</Route>
<Route path="audit-logs">
<Route index element={<AuditLogs />} />
<Route path=":logId" element={<AuditLogDetails />} />
</Route>
<Route path="roles">
<Route index element={<Roles />} />
<Route path="create" element={<Roles />} />
<Route path=":id" element={<RoleDetails />}>
<Route index element={<Navigate replace to={RoleDetailsTabs.Settings} />} />
<Route path={RoleDetailsTabs.Settings} element={<RoleSettings />} />
<Route path={RoleDetailsTabs.Permissions} element={<RolePermissions />} />
<Route path={RoleDetailsTabs.Users} element={<RoleUsers />} />
</Route>
</Route>
<Route path="profile">
<Route index element={<Profile />} />
<Route path="verify-password" element={<VerifyPasswordModal />} />
<Route path="change-password" element={<ChangePasswordModal />} />
<Route path="link-email" element={<LinkEmailModal />} />
<Route path="verification-code" element={<VerificationCodeModal />} />
</Route>
</Routes>
</div>
</OverlayScrollbar>
</div>
);
}

30
packages/console/src/scss/overlayscrollbars.scss
View file

@ -6,18 +6,28 @@
width: 12px;
padding: 8px 2px;
> .os-scrollbar-track {
> .os-scrollbar-handle {
background: var(--color-neutral-variant-80);
min-height: 40px;
&:hover {
background: var(--color-neutral-variant-80);
}
}
.os-scrollbar-handle {
min-height: 40px;
}
}
&.os-scrollbar-horizontal {
height: 12px;
padding: 2px 8px;
.os-scrollbar-handle {
min-width: 40px;
}
}
}
&.os-theme-dark,
&.os-theme-light,
&.os-theme-dark.os-scrollbar:hover,
&.os-theme-light.os-scrollbar:hover {
.os-scrollbar-track .os-scrollbar-handle {
background: var(--color-neutral-variant-80);
}
}
}
/* stylelint-enable selector-class-pattern */