feat(repository): make the RepositoryTreeView island easier to navigate@@ -1,5 +1,5 @@
{
- "_generatedAtUnix": 1664671203809,
+ "_generatedAtUnix": 1664673873756,
"_hashAlgorithm": "sha1",
"_version": 2,
"islands": {
@@ -52,7 +52,7 @@
"pathSourceMap": "./public/.islands/RepositoryInitialSetup.bundle.js.map"
},
"RepositoryTreeView": {
- "hash": "758b7355c8e84b5cdccf8d6068580e4c71204ec6",
+ "hash": "88bbfb8caca3e5ee7c433a5dbc1cbfa24338cf68",
"pathSource": "./app/islands/RepositoryTreeView.tsx",
"pathBundle": "./public/.islands/RepositoryTreeView.bundle.js",
"pathSourceMap": "./public/.islands/RepositoryTreeView.bundle.js.map"
@@ -96,7 +96,7 @@
"pathSource": "./app/views/repository/RepositoryCreateView.tsx"
},
"RepositoryDetailsView": {
- "hash": "41e605325c46ee265d190ab2cb3f5545f615a4e1",
+ "hash": "9eef664317bcaa56417224cf1d0b19a9bfe60815",
"pathSource": "./app/views/repository/RepositoryDetailsView.tsx"
},
"RepositoryExploreView": {
@@ -54,6 +54,7 @@ const RepositoryTreeView: ReactIsland<
);
const currPathParts = currentPath.split("/");
+ const shouldShowPrevPath = currentPath !== "/";
let prevPath: string | null = currPathParts
.slice(0, currPathParts.length - 2)
@@ -67,7 +68,6 @@ const RepositoryTreeView: ReactIsland<
: `/${orgSlug}/${repoSlug}/${encodeURIComponent(currentRef)}/tree/${
prevPath.endsWith("/") ? prevPath : `${prevPath}/`
}`;
- const shouldShowPrevPath = currentPath !== "/";
return (
<StyledRepositoryTreeViewContainer>
@@ -75,55 +75,100 @@ const RepositoryTreeView: ReactIsland<
<Grid.Row
gap={8}
alignItems={"center"}
- justifyContent={"flex-end"}
+ justifyContent={"flex-start"}
style={{
marginTop: 8,
width: "100%",
padding: "0 8px 8px 8px",
- borderBottom: "1px solid gray",
+ borderBottom: `1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]}`,
}}
>
- <a
- href={`/${orgSlug}/${repoSlug}/${encodeURIComponent(
- currentRef
- )}/commits`}
- >
- Commits History
- </a>
+ <Grid.Row fluid nowrap alignItems={"center"}>
+ {currPathParts.map(
+ (pathPart, idx) =>
+ pathPart.trim() !== "" &&
+ pathPart !== "/" && (
+ <a
+ key={[idx, pathPart].join(":")}
+ style={{ marginLeft: idx >= 1 ? 8 : 0 }}
+ title={`Go to "${currPathParts
+ .slice(0, idx + 1)
+ .join("/")}/" folder`}
+ href={`/${orgSlug}/${repoSlug}/${encodeURIComponent(
+ currentRef
+ )}/tree/${encodeURIComponent(
+ currPathParts.slice(0, idx + 1).join("/")
+ )}/`}
+ >
+ <TextEllipsis>{pathPart}/</TextEllipsis>
+ </a>
+ )
+ )}
+ </Grid.Row>
+ <Grid.Row nowrap alignItems={"center"}>
+ <a
+ style={{ minWidth: "max-content" }}
+ href={`/${orgSlug}/${repoSlug}/${encodeURIComponent(
+ currentRef
+ )}/commits`}
+ >
+ Commits History
+ </a>
+ </Grid.Row>
</Grid.Row>
<Grid.Col fluid nowrap>
- <ul style={{ listStyle: "none", padding: 0, width: "100%" }}>
+ <ul
+ style={{
+ listStyle: "none",
+ margin: "0 0 8px 0",
+ padding: 0,
+ width: "100%",
+ }}
+ >
{shouldShowPrevPath && (
- <li key={"go-previous"}>
- <StyledTreeViewAnchorItem
+ <StyledTreeViewListItem
+ key={"go-previous"}
+ themeScheme={themeScheme}
+ >
+ <StyledTreeViewListItemAnchor
href={prevPathLink}
- themeScheme={themeScheme}
+ title={"Go to previous folder (..)"}
>
..
- </StyledTreeViewAnchorItem>
- </li>
+ </StyledTreeViewListItemAnchor>
+ </StyledTreeViewListItem>
)}
{repoFiles.map((file) => {
const fileLink = buildRepoFileLink(file);
return (
- <li key={[file.id, file.name].join(":")}>
- <StyledTreeViewAnchorItem
+ <StyledTreeViewListItem
+ key={[file.id, file.name].join(":")}
+ themeScheme={themeScheme}
+ >
+ <StyledTreeViewListItemAnchor
+ style={{ flex: "0 0 30%" }}
href={fileLink.href}
- themeScheme={themeScheme}
+ title={fileLink.text}
>
- <span style={{ flex: "0 0 240px" }}>{fileLink.text}</span>
- {file.lastCommit != null && (
- <>
- <span style={{ flex: 1, marginLeft: 16 }}>
- <TextEllipsis>{file.lastCommit.subject}</TextEllipsis>
- </span>
- <span style={{ marginLeft: 16 }}>
- {file.lastCommit.abbreviated_commit}
- </span>
- </>
- )}
- </StyledTreeViewAnchorItem>
- </li>
+ <span>
+ <TextEllipsis>{fileLink.text}</TextEllipsis>
+ </span>
+ </StyledTreeViewListItemAnchor>
+ {file.lastCommit != null && (
+ <StyledTreeViewListItemAnchor
+ style={{ flex: 1, marginLeft: 16 }}
+ href={`/${orgSlug}/${repoSlug}/show/${file.lastCommit.commit}`}
+ title={file.lastCommit.subject}
+ >
+ <span style={{ flex: 1 }}>
+ <TextEllipsis>{file.lastCommit.subject}</TextEllipsis>
+ </span>
+ <span style={{ marginLeft: 16 }}>
+ {file.lastCommit.abbreviated_commit}
+ </span>
+ </StyledTreeViewListItemAnchor>
+ )}
+ </StyledTreeViewListItem>
);
})}
</ul>
@@ -133,13 +178,13 @@ const RepositoryTreeView: ReactIsland<
);
};
-const StyledTreeViewAnchorItem = styled.a<WithThemeSchemeProp>`
+const StyledTreeViewListItem = styled.li<WithThemeSchemeProp>`
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
- height: 30px;
+ height: 32px;
width: 100%;
padding: 0 8px;
@@ -153,6 +198,13 @@ const StyledTreeViewAnchorItem = styled.a<WithThemeSchemeProp>`
`}
`;
+const StyledTreeViewListItemAnchor = styled.a`
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ align-items: center;
+`;
+
const StyledRepositoryTreeViewContainer = styled.div`
width: 100%;
`;
@@ -76,9 +76,6 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
<a href={`/${parentOrg.slug}/${repo.slug}`}>
{repo.displayName || repo.slug}
</a>
- {path != null && path.trim() !== "" && path !== "/"
- ? ` / ${path}`
- : ""}
{" ∙ "}
<span style={{ textTransform: "capitalize" }}>
({repo.visibility.toLowerCase()})
@@ -179,7 +176,7 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
</Card>
<Card
data-islandid={`${RepositoryTreeView.name}$$0`}
- style={{ width: "100%", marginTop: 16 }}
+ style={{ width: "100%", marginTop: 16, padding: 0 }}
themeScheme={commonProps.themeScheme}
>
<RepositoryTreeView