fix(codebase): optimize layout for editor view
- Removes top PageHeader to maximize vertical space. - Sets layout padding tighter. - Dynamically replaces 'Code files' header with the repository name (if single repo). - Hides redundant nested tile header when there's only one codebase.
This commit is contained in:
@@ -53,18 +53,23 @@ export default function CodeTab() {
|
|||||||
minHeight: "100vh",
|
minHeight: "100vh",
|
||||||
background: THEME.canvasGradient,
|
background: THEME.canvasGradient,
|
||||||
fontFamily: THEME.font,
|
fontFamily: THEME.font,
|
||||||
padding: "36px 48px",
|
padding: "24px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ maxWidth: 1400, margin: "0 auto" }}>
|
<div
|
||||||
<PageHeader title="Codebase" />
|
style={{
|
||||||
|
maxWidth: "100%",
|
||||||
|
margin: "0 auto",
|
||||||
|
height: "calc(100vh - 48px)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Card
|
<Card
|
||||||
padding={0}
|
padding={0}
|
||||||
style={{
|
style={{
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
minHeight: "calc(100vh - 150px)",
|
height: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={grid}>
|
<div style={grid}>
|
||||||
@@ -104,7 +109,14 @@ export default function CodeTab() {
|
|||||||
{anatomy && (
|
{anatomy && (
|
||||||
<>
|
<>
|
||||||
{/* Code Files */}
|
{/* Code Files */}
|
||||||
<RailGroup title="Code files" count={codebases?.length ?? 0}>
|
<RailGroup
|
||||||
|
title={
|
||||||
|
codebases?.length === 1
|
||||||
|
? codebases[0].label
|
||||||
|
: "Code files"
|
||||||
|
}
|
||||||
|
count={codebases?.length ?? 0}
|
||||||
|
>
|
||||||
{codebases && codebases.length === 0 && (
|
{codebases && codebases.length === 0 && (
|
||||||
<RailEmpty>
|
<RailEmpty>
|
||||||
{reason === "no_repo" ? (
|
{reason === "no_repo" ? (
|
||||||
@@ -134,33 +146,47 @@ export default function CodeTab() {
|
|||||||
flex: 1,
|
flex: 1,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
{codebases.length > 1 && (
|
||||||
style={{ ...tileHeader, padding: "20px 24px 12px" }}
|
<div
|
||||||
>
|
style={{
|
||||||
<span style={chevronCell}>
|
...tileHeader,
|
||||||
<ChevronDown
|
padding: "20px 24px 12px",
|
||||||
size={13}
|
}}
|
||||||
style={{ color: THEME.mid }}
|
>
|
||||||
|
<span style={chevronCell}>
|
||||||
|
<ChevronDown
|
||||||
|
size={13}
|
||||||
|
style={{ color: THEME.mid }}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<Box
|
||||||
|
size={14}
|
||||||
|
style={{ color: THEME.mid, flexShrink: 0 }}
|
||||||
/>
|
/>
|
||||||
</span>
|
<div style={{ minWidth: 0, textAlign: "left" }}>
|
||||||
<Box
|
<div
|
||||||
size={14}
|
style={{
|
||||||
style={{ color: THEME.mid, flexShrink: 0 }}
|
fontSize: "0.95rem",
|
||||||
/>
|
fontWeight: 600,
|
||||||
<div style={{ minWidth: 0, textAlign: "left" }}>
|
color: THEME.ink,
|
||||||
<div
|
}}
|
||||||
style={{
|
>
|
||||||
fontSize: "0.95rem",
|
{cb.label}
|
||||||
fontWeight: 600,
|
</div>
|
||||||
color: THEME.ink,
|
{cb.hint && (
|
||||||
}}
|
<div style={tileHint}>{cb.hint}</div>
|
||||||
>
|
)}
|
||||||
{cb.label}
|
|
||||||
</div>
|
</div>
|
||||||
{cb.hint && <div style={tileHint}>{cb.hint}</div>}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
<div style={{ padding: "0 10px 24px 10px" }}>
|
<div
|
||||||
|
style={{
|
||||||
|
padding:
|
||||||
|
codebases.length > 1
|
||||||
|
? "0 10px 24px 10px"
|
||||||
|
: "10px 10px 24px 10px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<GiteaFileTree
|
<GiteaFileTree
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
rootPath={cb.path}
|
rootPath={cb.path}
|
||||||
|
|||||||
Reference in New Issue
Block a user