Skip to content

Add border to file tree 'sub-items' and add padding to 'item-file'#27593

Merged
lunny merged 9 commits into
go-gitea:mainfrom
nanguanlin6:improve_file_tree
Oct 25, 2023
Merged

Add border to file tree 'sub-items' and add padding to 'item-file'#27593
lunny merged 9 commits into
go-gitea:mainfrom
nanguanlin6:improve_file_tree

Conversation

@nanguanlin6
Copy link
Copy Markdown
Member

@nanguanlin6 nanguanlin6 commented Oct 12, 2023 •
edited
Loading

Add border to file tree 'sub-items'

close #24766
view in gitea-light
image
view in gitea-dark
image

Change the 'item-file' padding

Before that the 'item-file' only have padding when they in 'item-directory', which is too compact when 'item-file' after 'item-directory'

Details

)RW`SDJ_UQL@$}0 PL(3DS7

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Oct 12, 2023
@nanguanlin6 nanguanlin6 changed the title Add border to file tree 'sub-items' and add padding to 'item-file Add border to file tree 'sub-items' and add padding to 'item-file' Oct 12, 2023
silverwind
silverwind reviewed Oct 12, 2023
View reviewed changes
Comment thread web_src/js/components/DiffFileTreeItem.vue Outdated
@silverwind
Copy link
Copy Markdown
Member

silverwind commented Oct 12, 2023

This takes up quite a bit much horizontal space, can we compress the view a bit, like GitHub:

image

Also, maybe make the border a bit more fainted.

@nanguanlin6 @silverwind
Update web_src/js/components/DiffFileTreeItem.vue
141b885 
Co-authored-by: silverwind <me@silverwind.io>
@nanguanlin6
Copy link
Copy Markdown
Member Author

nanguanlin6 commented Oct 12, 2023 •
edited
Loading

This takes up quite a bit much horizontal space, can we compress the view a bit, like GitHub:

That's not this PR. It's the whole indent. The border is always aligned with the icon since the icon width is 18px and the border margin-left is 9px(half the width, so always in the center).

Also, maybe make the border a bit more fainted.

You can directly change the style or discuss it with other maintainers. I have no preference for the style, just randomly choose one.

@nanguanlin6
Copy link
Copy Markdown
Member Author

nanguanlin6 commented Oct 12, 2023

image

actually, the Gitea diff file tree is wider than the GitHub one. If we align the indent, we probably should align the width too.

@silverwind
Copy link
Copy Markdown
Member

silverwind commented Oct 12, 2023

#27597 will fix the linter config for shorthands.

@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Oct 12, 2023
@delvh delvh added the type/enhancement An improvement of existing functionality label Oct 12, 2023
wxiaoguang
wxiaoguang reviewed Oct 19, 2023
View reviewed changes
Comment thread web_src/js/components/DiffFileTreeItem.vue
@lunny lunny added this to the 1.22.0 milestone Oct 19, 2023
@nanguanlin6
Copy link
Copy Markdown
Member Author

nanguanlin6 commented Oct 22, 2023

Update: merge branch main into this PR.
Before:
image
After:
gitea-dark
image
gitea-light
image

nanguanlin6
nanguanlin6 commented Oct 22, 2023
View reviewed changes
Comment thread web_src/js/components/DiffFileTreeItem.vue
flex-direction: column;
gap: 1px;
padding-left: 8px;
margin-left: 13px;
Copy link
Copy Markdown
Member Author

@nanguanlin6 nanguanlin6 Oct 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That value is due to some math work 😢

nanguanlin6
nanguanlin6 commented Oct 22, 2023
View reviewed changes
Comment thread web_src/js/components/DiffFileTreeItem.vue

.sub-items .item-file {
padding-left: 24px;
padding-left: 18px;
Copy link
Copy Markdown
Member Author

@nanguanlin6 nanguanlin6 Oct 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And this one too 😢

Copy link
Copy Markdown
Member

@delvh delvh Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps we should document this math, otherwise it will break again and again…

Copy link
Copy Markdown
Member Author

@nanguanlin6 nanguanlin6 Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

certainly

Copy link
Copy Markdown
Member

@silverwind silverwind Oct 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't do any particular math when changing these the last time, I just went with what looked okay.

@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Oct 24, 2023
@lunny lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Oct 25, 2023
@lunny lunny merged commit 3602a19 into go-gitea:main Oct 25, 2023
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Oct 25, 2023
zjjhot added a commit to zjjhot/gitea that referenced this pull request Oct 25, 2023
@zjjhot
Merge remote-tracking branch 'giteaoffical/main'
0d4b119 
* giteaoffical/main:
  Fix issue not showing on default board and add test (go-gitea#27720)
  Show placeholder email in privacy popup (go-gitea#27770)
  Add word-break to organization name and description (go-gitea#26624)
  Add border to file tree 'sub-items' and add padding to 'item-file' (go-gitea#27593)
  Fix the missing repo count in new team page and edit team page (go-gitea#27743)
  Only show diff file tree when more than one file changed (go-gitea#27775)
  Add gap between diff boxes (go-gitea#27776)
@nanguanlin6 nanguanlin6 deleted the improve_file_tree branch November 12, 2023 14:59
fuxiaohei pushed a commit to fuxiaohei/gitea that referenced this pull request Jan 17, 2024
@nanguanlin6 @silverwind @fuxiaohei
Add border to file tree 'sub-items' and add padding to 'item-file' (g…
2bcf216 
…o-gitea#27593)

## Add border to file tree 'sub-items'
close go-gitea#24766 
view in `gitea-light` 
<img width="275" alt="image"
src="https://github.com/go-gitea/gitea/assets/70063547/f1bf8736-2db3-454f-86f5-d050a2fae3eb">
view in `gitea-dark`
<img width="296" alt="image"
src="https://github.com/go-gitea/gitea/assets/70063547/053e2e6e-28f7-41d2-a139-1dae4df45929">
## Change the 'item-file' padding 
Before that the 'item-file' only have padding when they in
'item-directory', which is too compact when 'item-file' after
'item-directory'
<details>

![)RW`SDJ_UQL@$}0
PL(3DS7](https://github.com/go-gitea/gitea/assets/70063547/5fa523a4-44c3-4cb9-a882-a3ea6d944673)

---------

Co-authored-by: silverwind <me@silverwind.io>
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Jan 24, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@wxiaoguang wxiaoguang wxiaoguang left review comments

@delvh delvh delvh approved these changes

@silverwind silverwind silverwind approved these changes

Assignees

No one assigned

Labels

lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. type/enhancement An improvement of existing functionality

Projects

None yet

Milestone

1.22.0

Development

Successfully merging this pull request may close these issues.

Proposal : Improve left tree view

6 participants

@nanguanlin6 @silverwind @wxiaoguang @delvh @lunny @GiteaBot