finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve diff tree spacing (#27714)

Browse source 
1. Un-indent top-level items, matching GitHub rendering
2. Increase item padding and add 1px gap between items

Before and After:

<img width="247" alt="Screenshot 2023-10-20 at 18 37 32"
src="https://github.com/go-gitea/gitea/assets/115237/43c1ce86-1814-4a8a-9dd2-0c4a82a2be7c">
<img width="241" alt="Screenshot 2023-10-20 at 18 40 46"
src="https://github.com/go-gitea/gitea/assets/115237/b541b85b-c428-4903-becd-773ae5807495">

---------

Co-authored-by: 6543 <m.huber@kithara.com>
This commit is contained in:
silverwind 2023-10-21 12:38:19 +02:00 committed by GitHub
parent b2f828db5e
commit b39bb958cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
web_src/js/components/DiffFileTree.vue
View file

@ -126,7 +126,7 @@ export default {
}; };
</script> </script>
<template> <template>
<div v-if="store.fileTreeIsVisible" class="gt-mr-3"> <div v-if="store.fileTreeIsVisible" class="diff-file-tree-items">
<!-- only render the tree if we're visible. in many cases this is something that doesn't change very often --> <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
<DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/> <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
<div v-if="store.isIncomplete" class="gt-pt-2"> <div v-if="store.isIncomplete" class="gt-pt-2">
@ -134,3 +134,11 @@ export default {
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.diff-file-tree-items {
display: flex;
flex-direction: column;
gap: 1px;
margin-right: .5rem;
}
</style>

11
web_src/js/components/DiffFileTreeItem.vue
View file

@ -58,11 +58,14 @@ a, a:hover {
} }
.sub-items { .sub-items {
padding-left: 9px; display: flex;
flex-direction: column;
gap: 1px;
padding-left: 8px;
} }
.item-file { .sub-items .item-file {
margin-left: 20px; padding-left: 24px;
} }
.item-file.selected { .item-file.selected {
@ -80,7 +83,7 @@ a, a:hover {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.25em; gap: 0.25em;
padding: 2px; padding: 3px 6px;
} }
.item-file:hover, .item-file:hover,