Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 9 commits into from
Oct 25, 2023
Merged

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

merged 9 commits into from
Oct 25, 2023

Conversation

lng2020
Copy link
Member

@lng2020 lng2020 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'

)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
@pull-request-size pull-request-size bot added the size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. label Oct 12, 2023
@lng2020 lng2020 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
Copy link
Member

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.

@lng2020
Copy link
Member Author

lng2020 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.

@lng2020
Copy link
Member Author

lng2020 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
Member

#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
@lunny lunny added this to the 1.22.0 milestone Oct 19, 2023
@lng2020
Copy link
Member Author

lng2020 commented Oct 22, 2023

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

lng2020
lng2020 commented Oct 22, 2023
View reviewed changes
web_src/js/components/DiffFileTreeItem.vue
@@ -61,11 +61,12 @@ a, a:hover {
display: flex;
flex-direction: column;
gap: 1px;
padding-left: 8px;
margin-left: 13px;
Copy link
Member Author

@lng2020 lng2020 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 😢

lng2020
lng2020 commented Oct 22, 2023
View reviewed changes
web_src/js/components/DiffFileTreeItem.vue
}

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

@lng2020 lng2020 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
Member

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
Member Author

Choose a reason for hiding this comment

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

certainly

Copy link
Member

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
25 checks passed
@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)
@lng2020 lng2020 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
@lng2020 @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 <[email protected]>
@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. size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. 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
@lng2020 @silverwind @wxiaoguang @delvh @lunny @GiteaBot