USEFULL
/
drone
mirror of https://github.com/harness/drone.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: [CODE-993]: Gitness Pull Request page is not expanded to full width when Sidenav is collapsed (#709)

docker_test
Tan Nhu 2023-10-24 07:04:28 +00:00 committed by Harness
parent 3b2ed1de50
commit b039488ac6
4 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/DiffViewer/DiffViewer.module.scss
View File

@ -287,10 +287,20 @@
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
max-width: max(calc(100vw - 400px), 960px);
max-width: max(100vw - 387px, 960px);
&.standalone {
max-width: max(calc(100vw - 280px), 960px);
max-width: max(100vw - 280px, 960px);
}
// Harness Nav2.0 is enabled
&.navV2 {
max-width: max(100vw - 347px, 960px);
}
// Harness Nav1.0 / Sidebar is collapsed
&.sidebarCollapsed {
max-width: max(100vw - 215px, 960px);
}
}
}

2
web/src/components/DiffViewer/DiffViewer.module.scss.d.ts vendored
View File

@ -25,6 +25,8 @@ export declare const diffHeader: string
export declare const fileChanged: string
export declare const fname: string
export declare const main: string
export declare const navV2: string
export declare const readOnly: string
export declare const sidebarCollapsed: string
export declare const standalone: string
export declare const viewLabel: string

17
web/src/components/DiffViewer/DiffViewer.tsx
View File

@ -645,6 +645,15 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
},
[path, commentId]
)
const [isSidebarExpanded, setIsSidebarExpanded] = useState(true)
const sideBarExpandedHandler = useCallback((event: Event) => {
setIsSidebarExpanded(_ => !!(event as CustomEvent).detail)
}, [])
useEffect(() => {
window.addEventListener(SIDE_NAV_EXPANDED_EVENT, sideBarExpandedHandler)
return () => window.removeEventListener(SIDE_NAV_EXPANDED_EVENT, sideBarExpandedHandler)
}, [sideBarExpandedHandler])
return (
<Container
@ -752,7 +761,11 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
<Container
id={diff.contentId}
data-path={diff.filePath}
className={cx(css.diffContent, { [css.standalone]: standalone })}
className={cx(css.diffContent, {
[css.standalone]: standalone,
[css.navV2]: !!document.querySelector('[data-code-nav-version="2"]'),
[css.sidebarCollapsed]: !isSidebarExpanded
})}
ref={contentRef}>
<Render when={renderCustomContent}>
<Container>
@ -777,3 +790,5 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
</Container>
)
}
const SIDE_NAV_EXPANDED_EVENT = 'SIDE_NAV_EXPANDED_EVENT'

2
web/src/pages/Repository/RepositoryContent/FolderContent/FolderContent.module.scss
View File

@ -24,6 +24,8 @@
border-bottom-right-radius: 4px !important;
}
[class*='TableV2--header'] {
box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.08), 0px 0.5px 2px rgba(96, 97, 112, 0.16);
[class*='variation-table-headers'] {
text-transform: none;
color: var(--grey-400);