binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2329] chore: updated UI for module and cycle detail overview (#5435)

Browse source 
* chore: updated UI for module and cycle detail overview

* chore: z-index issue in sheet
This commit is contained in:
guru_sainath 2024-08-27 17:45:17 +05:30 • committed by GitHub
parent 88013e3b06
commit 09209694a4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 6 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
View file

@ -71,7 +71,7 @@ const CycleDetailPage = observer(() => {
{cycleId && !isSidebarCollapsed && ( {cycleId && !isSidebarCollapsed && (
<div <div
className={cn( className={cn(
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm fixed right-0 top-0 z-10" "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 top-0 z-[13]"
)} )}
style={{ style={{
boxShadow: boxShadow:

2
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
View file

@ -69,7 +69,7 @@ const ModuleIssuesPage = observer(() => {
{moduleId && !isSidebarCollapsed && ( {moduleId && !isSidebarCollapsed && (
<div <div
className={cn( className={cn(
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm fixed right-0 top-0 z-10" "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 top-0 z-[13]"
)} )}
style={{ style={{
boxShadow: boxShadow:

5
web/core/components/cycles/analytics-sidebar/root.tsx
View file

@ -33,7 +33,6 @@ type Props = {
cycleId: string; cycleId: string;
handleClose: () => void; handleClose: () => void;
isArchived?: boolean; isArchived?: boolean;
isPeekMode?: boolean;
}; };
const defaultValues: Partial<ICycle> = { const defaultValues: Partial<ICycle> = {
@ -46,7 +45,7 @@ const cycleService = new CycleService();
// TODO: refactor the whole component // TODO: refactor the whole component
export const CycleDetailsSidebar: React.FC<Props> = observer((props) => { export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const { cycleId, handleClose, isArchived, isPeekMode = false } = props; const { cycleId, handleClose, isArchived } = props;
// states // states
const [archiveCycleModal, setArchiveCycleModal] = useState(false); const [archiveCycleModal, setArchiveCycleModal] = useState(false);
const [cycleDeleteModal, setCycleDeleteModal] = useState(false); const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
@ -262,7 +261,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<> <>
<div <div
className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 ${isPeekMode ? "pt-5" : "pt-20"}`} className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 pt-5`}
> >
<div> <div>
<button <button

1
web/core/components/cycles/cycle-peek-overview.tsx
View file

@ -51,7 +51,6 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
cycleId={peekCycle?.toString() ?? ""} cycleId={peekCycle?.toString() ?? ""}
handleClose={handleClose} handleClose={handleClose}
isArchived={isArchived} isArchived={isArchived}
isPeekMode
/> />
</div> </div>
)} )}

5
web/core/components/modules/analytics-sidebar/root.tsx
View file

@ -63,12 +63,11 @@ type Props = {
moduleId: string; moduleId: string;
handleClose: () => void; handleClose: () => void;
isArchived?: boolean; isArchived?: boolean;
isPeekMode?: boolean;
}; };
// TODO: refactor this component // TODO: refactor this component
export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => { export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
const { moduleId, handleClose, isArchived, isPeekMode = false } = props; const { moduleId, handleClose, isArchived } = props;
// states // states
const [moduleDeleteModal, setModuleDeleteModal] = useState(false); const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
const [archiveModuleModal, setArchiveModuleModal] = useState(false); const [archiveModuleModal, setArchiveModuleModal] = useState(false);
@ -311,7 +310,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
<DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} /> <DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
<> <>
<div <div
className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 ${isPeekMode ? "pt-5" : "pt-20"}`} className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 pt-5`}
> >
<div> <div>
<button <button

1
web/core/components/modules/module-peek-overview.tsx
View file

@ -51,7 +51,6 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
moduleId={peekModule?.toString() ?? ""} moduleId={peekModule?.toString() ?? ""}
handleClose={handleClose} handleClose={handleClose}
isArchived={isArchived} isArchived={isArchived}
isPeekMode
/> />
</div> </div>
)} )}