mirror/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-10 04:05:42 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Merge pull request 'ui: Improve commit graph layout' (#5214) from 0ko/forgejo:ui-graph-layout into forgejo

Browse source 
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/5214
Reviewed-by: Otto <otto@codeberg.org>
This commit is contained in:
Otto 2024-09-17 16:50:31 +00:00
commit 652c2ee49b
3 changed files with 51 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
templates/repo/graph.tmpl
View file

@ -3,9 +3,9 @@
{{template "repo/header" .}} {{template "repo/header" .}}
<div class="ui container"> <div class="ui container">
<div id="git-graph-container" class="ui segment{{if eq .Mode "monochrome"}} monochrome{{end}}"> <div id="git-graph-container" class="ui segment{{if eq .Mode "monochrome"}} monochrome{{end}}">
<h2 class="ui header dividing"> <div id="git-graph-heading">
{{ctx.Locale.Tr "repo.commit_graph"}} <div id="git-graph-heading-left">
<div class="ui icon buttons small color-buttons"> <h2>{{ctx.Locale.Tr "repo.commit_graph"}}</h2>
<div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown"> <div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown">
<input type="hidden" name="flow"> <input type="hidden" name="flow">
<div class="default text">{{ctx.Locale.Tr "repo.commit_graph.select"}}</div> <div class="default text">{{ctx.Locale.Tr "repo.commit_graph.select"}}</div>
@ -45,16 +45,19 @@
{{end}} {{end}}
</div> </div>
</div> </div>
</div>
<div class="ui icon buttons small">
<button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button> <button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
<button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button> <button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
</div> </div>
</h2> </div>
<div class="ui dividing"></div> <div id="git-graph-content">
<div class="is-loading tw-py-32 tw-hidden" id="loading-indicator"></div> <div class="is-loading tw-py-32 tw-hidden" id="loading-indicator"></div>
{{template "repo/graph/svgcontainer" .}} {{template "repo/graph/svgcontainer" .}}
{{template "repo/graph/commits" .}} {{template "repo/graph/commits" .}}
</div> </div>
</div> </div>
</div>
</div> </div>
<div id="pagination"> <div id="pagination">
{{template "base/paginate" .}} {{template "base/paginate" .}}

7
tests/e2e/repo-code.test.e2e.js
View file

@ -77,3 +77,10 @@ test('Readable diff', async ({page}, workerInfo) => {
} }
} }
}); });
test('Commit graph overflow', async ({page}) => {
await page.goto('/user2/diff-test/graph');
await expect(page.getByRole('button', {name: 'Mono'})).toBeInViewport({ratio: 1});
await expect(page.getByRole('button', {name: 'Color'})).toBeInViewport({ratio: 1});
await expect(page.locator('.selection.search.dropdown')).toBeInViewport({ratio: 1});
});

42
web_src/css/features/gitgraph.css
View file

@ -1,24 +1,48 @@
#git-graph-container { #git-graph-content {
overflow-x: auto; overflow-x: auto;
width: 100%; width: 100%;
min-height: 350px; min-height: 250px;
} }
#git-graph-container h2 { #git-graph-heading {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; padding-bottom: 20px;
} }
#git-graph-container .ui.header.dividing { #git-graph-heading-left {
padding-bottom: 10px; display: flex;
gap: 1rem;
}
#git-graph-heading h2 {
margin: 0;
}
@media (min-width: 767.98px) {
#git-graph-heading {
align-items: center;
}
}
@media (max-width: 767.98px) {
#git-graph-heading,
#git-graph-heading-left {
flex-direction: column;
}
#git-graph-heading-left {
margin-bottom: 1rem;
}
h2,
#flow-select-refs-dropdown {
max-width: 100%;
}
} }
#git-graph-container #flow-select-refs-dropdown { #git-graph-container #flow-select-refs-dropdown {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
min-width: 250px; min-width: 250px;
border-right: none;
} }
#git-graph-container #flow-select-refs-dropdown .ui.label { #git-graph-container #flow-select-refs-dropdown .ui.label {