Skip to content

Commit 6793ef0

Browse files
HesterGGiteaBot
HesterG
and
GiteaBot
authored
Use secondary pointing menu for tabs on user/organization home page (go-gitea#24162)
Close go-gitea#24108 Use secondary pointing menu for tabs on user/organization home page so the tabs look the same. Main changes: 1. modified a part of dom structure in `templates/user/overview/header.tmpl` to make it the same as `templates/org/header.tmpl` in order to produce the same ui. 2. Move some css to `web_src/css/shared/repoorgshared.css` to make them shareable between `templates/user/overview/header.tmpl` and `templates/org/header.tmpl` After: https://user-images.githubusercontent.com/17645053/232400617-2add5bec-d483-4ab1-b48d-eaee157f7b09.mov For further improvements. Need some thoughts: For [this TODO](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/templates/user/overview/header.tmpl#L1), it is viable to make it a shared template for [this part](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/templates/user/overview/header.tmpl#L2-L17) and [this part](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/templates/org/header.tmpl#L1-L16) because they are the same except for the variable. But for the menu parts, they are quite different so might not be suitable to use a shared template. So need some thoughts and advice about extracting the shared template from these two headers. --------- Co-authored-by: Giteabot <[email protected]>
1 parent 722dab5 commit 6793ef0

File tree

5 files changed

+88
-86
lines changed

5 files changed

+88
-86
lines changed

‎templates/user/overview/header.tmpl‎

Lines changed: 65 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,82 @@
1-
<div class="header-wrapper">
2-
<!-- TODO: make template org and user can share -->
3-
{{with .ContextUser}}
4-
<div class="ui container">
5-
<div class="ui vertically grid head">
6-
<div class="column">
7-
<div class="ui header">
8-
{{avatar $.Context . 100}}
9-
<span class="text thin grey"><a href="{{.HomeLink}}">{{.DisplayName}}</a></span>
10-
<span class="org-visibility">
11-
{{if .Visibility.IsLimited}}<div class="ui medium basic horizontal label">{{$.locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
12-
{{if .Visibility.IsPrivate}}<div class="ui medium basic horizontal label">{{$.locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
13-
</span>
14-
</div>
1+
<!-- TODO: make template org and user can share -->
2+
{{with .ContextUser}}
3+
<div class="ui container">
4+
<div class="ui vertically grid head">
5+
<div class="column">
6+
<div class="ui header">
7+
{{avatar $.Context . 100}}
8+
<span class="text thin grey"><a href="{{.HomeLink}}">{{.DisplayName}}</a></span>
9+
<span class="org-visibility">
10+
{{if .Visibility.IsLimited}}<div class="ui medium basic horizontal label">{{$.locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
11+
{{if .Visibility.IsPrivate}}<div class="ui medium basic horizontal label">{{$.locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
12+
</span>
1513
</div>
1614
</div>
1715
</div>
18-
{{end}}
16+
</div>
17+
{{end}}
1918

20-
<div class="ui tabs container">
21-
<div class="ui tabular stackable menu navbar">
22-
<a class="item" href="{{.ContextUser.HomeLink}}">
23-
{{svg "octicon-repo"}} {{.locale.Tr "user.repositories"}}
19+
<div class="ui tabs container">
20+
<div class="ui secondary stackable pointing menu">
21+
<a class="item" href="{{.ContextUser.HomeLink}}">
22+
{{svg "octicon-repo"}} {{.locale.Tr "user.repositories"}}
23+
</a>
24+
{{if and .IsProjectEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadProjects))}}
25+
<a href="{{.ContextUser.HomeLink}}/-/projects" class="{{if .PageIsViewProjects}}active {{end}}item">
26+
{{svg "octicon-project-symlink"}} {{.locale.Tr "user.projects"}}
27+
</a>
28+
{{end}}
29+
{{if and .IsPackageEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadPackages))}}
30+
<a href="{{.ContextUser.HomeLink}}/-/packages" class="{{if .IsPackagesPage}}active {{end}}item">
31+
{{svg "octicon-package"}} {{.locale.Tr "packages.title"}}
2432
</a>
25-
{{if and .IsProjectEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadProjects))}}
26-
<a href="{{.ContextUser.HomeLink}}/-/projects" class="{{if .PageIsViewProjects}}active {{end}}item">
27-
{{svg "octicon-project-symlink"}} {{.locale.Tr "user.projects"}}
33+
{{end}}
34+
{{if and .IsRepoIndexerEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadCode))}}
35+
<a href="{{.ContextUser.HomeLink}}/-/code" class="{{if .IsCodePage}}active {{end}}item">
36+
{{svg "octicon-code"}} {{.locale.Tr "user.code"}}
2837
</a>
29-
{{end}}
30-
{{if and .IsPackageEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadPackages))}}
31-
<a href="{{.ContextUser.HomeLink}}/-/packages" class="{{if .IsPackagesPage}}active {{end}}item">
32-
{{svg "octicon-package"}} {{.locale.Tr "packages.title"}}
38+
{{end}}
39+
40+
{{if .ContextUser.IsOrganization}}
41+
{{if .IsOrganizationMember}}
42+
<a class="item" href="{{$.OrgLink}}/members">
43+
{{svg "octicon-person"}}&nbsp;{{$.locale.Tr "org.members"}}
44+
{{if .NumMembers}}
45+
<div class="ui primary label">{{.NumMembers}}</div>
46+
{{end}}
3347
</a>
34-
{{end}}
35-
{{if and .IsRepoIndexerEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadCode))}}
36-
<a href="{{.ContextUser.HomeLink}}/-/code" class="{{if .IsCodePage}}active {{end}}item">
37-
{{svg "octicon-code"}} {{.locale.Tr "user.code"}}
48+
<a class="item" href="{{$.OrgLink}}/teams">
49+
{{svg "octicon-people"}}&nbsp;{{$.locale.Tr "org.teams"}}
50+
{{if .NumTeams}}
51+
<div class="ui primary label">{{.NumTeams}}</div>
52+
{{end}}
3853
</a>
3954
{{end}}
4055

41-
{{if .ContextUser.IsOrganization}}
42-
{{if .IsOrganizationMember}}
43-
<a class="item" href="{{$.OrgLink}}/members">
44-
{{svg "octicon-person"}}&nbsp;{{$.locale.Tr "org.members"}}
45-
{{if .NumMembers}}
46-
<div class="ui primary label">{{.NumMembers}}</div>
47-
{{end}}
56+
{{if .IsOrganizationOwner}}
57+
<div class="right menu">
58+
<a class="item" href="{{.OrgLink}}/settings">
59+
{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
4860
</a>
49-
<a class="item" href="{{$.OrgLink}}/teams">
50-
{{svg "octicon-people"}}&nbsp;{{$.locale.Tr "org.teams"}}
51-
{{if .NumTeams}}
52-
<div class="ui primary label">{{.NumTeams}}</div>
53-
{{end}}
54-
</a>
55-
{{end}}
56-
57-
{{if .IsOrganizationOwner}}
58-
<div class="right menu">
59-
<a class="item" href="{{.OrgLink}}/settings">
60-
{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
61-
</a>
62-
</div>
63-
{{end}}
61+
</div>
62+
{{end}}
63+
{{else}}
64+
<a class='{{if eq .TabName "activity"}}active {{end}}item' href="{{.ContextUser.HomeLink}}?tab=activity">
65+
{{svg "octicon-rss"}} {{.locale.Tr "user.activity"}}
66+
</a>
67+
{{if not .DisableStars}}
68+
<a class='{{if eq .TabName "stars"}}active {{end}}item' href="{{.ContextUser.HomeLink}}?tab=stars">
69+
{{svg "octicon-star"}} {{.locale.Tr "user.starred"}}
70+
{{if .Owner.NumStars}}
71+
<div class="ui primary label">{{.Owner.NumStars}}</div>
72+
{{end}}
73+
</a>
6474
{{else}}
65-
<a class='{{if eq .TabName "activity"}}active {{end}}item' href="{{.ContextUser.HomeLink}}?tab=activity">
66-
{{svg "octicon-rss"}} {{.locale.Tr "user.activity"}}
75+
<a class='{{if eq .TabName "watching"}}active {{end}}item' href="{{.ContextUser.HomeLink}}?tab=watching">
76+
{{svg "octicon-eye"}} {{.locale.Tr "user.watched"}}
6777
</a>
68-
{{if not .DisableStars}}
69-
<a class='{{if eq .TabName "stars"}}active {{end}}item' href="{{.ContextUser.HomeLink}}?tab=stars">
70-
{{svg "octicon-star"}} {{.locale.Tr "user.starred"}}
71-
{{if .Owner.NumStars}}
72-
<div class="ui primary label">{{.Owner.NumStars}}</div>
73-
{{end}}
74-
</a>
75-
{{else}}
76-
<a class='{{if eq .TabName "watching"}}active {{end}}item' href="{{.ContextUser.HomeLink}}?tab=watching">
77-
{{svg "octicon-eye"}} {{.locale.Tr "user.watched"}}
78-
</a>
79-
{{end}}
8078
{{end}}
79+
{{end}}
8180

82-
</div>
8381
</div>
84-
<div class="ui tabs divider"></div>
8582
</div>

‎web_src/css/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
@import "./animations.css";
44
@import "./shared/issuelist.css";
5+
@import "./shared/repoorg.css";
56
@import "./features/dropzone.css";
67
@import "./features/gitgraph.css";
78
@import "./features/heatmap.css";

‎web_src/css/organization.css‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,6 @@
4040
}
4141
}
4242

43-
.organization .head .ui.header .text {
44-
vertical-align: middle;
45-
font-size: 1.6rem;
46-
margin-left: 15px;
47-
}
48-
4943
.organization .head .ui.header .org-visibility .label {
5044
margin-left: 5px;
5145
margin-top: 5px;
@@ -55,12 +49,6 @@
5549
margin-top: 5px;
5650
}
5751

58-
.organization .ui.secondary.stackable.pointing.menu {
59-
flex-wrap: wrap;
60-
margin-top: 5px;
61-
margin-bottom: 10px;
62-
}
63-
6452
.organization.new.org form {
6553
margin: auto;
6654
}

‎web_src/css/repository.css‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -153,12 +153,9 @@
153153
padding-left: 23px;
154154
}
155155

156-
.repository .ui.tabs.container {
157-
margin-top: 14px;
158-
margin-bottom: 0;
159-
}
160-
161-
.repository .ui.tabs.container .ui.menu {
156+
/* For the secondary pointing menu, respect its own border-bottom */
157+
/* style reference: https://semantic-ui.com/collections/menu.html#pointing */
158+
.repository .ui.tabs.container .ui.menu:not(.secondary.pointing) {
162159
border-bottom: 0;
163160
}
164161

‎web_src/css/shared/repoorg.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.repository .head .ui.header .text,
2+
.organization .head .ui.header .text {
3+
vertical-align: middle;
4+
font-size: 1.6rem;
5+
margin-left: 15px;
6+
}
7+
8+
.repository .ui.secondary.stackable.pointing.menu,
9+
.organization .ui.secondary.stackable.pointing.menu {
10+
flex-wrap: wrap;
11+
margin-top: 5px;
12+
margin-bottom: 10px;
13+
}
14+
15+
.repository .ui.tabs.container,
16+
.organization .ui.tabs.container {
17+
margin-top: 14px;
18+
margin-bottom: 0;
19+
}

0 commit comments

Comments
 (0)