Skip to content

Commit 7a6a81e

Browse files
borsbors
committed
Auto merge of #3330 - Turbo87:tabs, r=pichfl
Add navigation tabs to the crate details pages <img width="825" alt="Bildschirmfoto 2021-02-25 um 16 28 25" src="https://user-images.githubusercontent.com/141300/109175925-97246580-7786-11eb-8f2a-496b288aca6a.png"> <img width="506" alt="Bildschirmfoto 2021-02-25 um 16 28 38" src="https://user-images.githubusercontent.com/141300/109175920-94297500-7786-11eb-92e9-b86206abfdf2.png"> Not visible on the screenshots: if you're a crate owner then a fourth "Settings" tab will also be visible This should also resolve #3321
2 parents eb093ee + fb973e7 commit 7a6a81e

File tree

12 files changed

+130
-45
lines changed

12 files changed

+130
-45
lines changed

‎app/components/crate-header.hbs

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,30 @@
1212
<FollowButton @crate={{@crate}}/>
1313
{{/if}}
1414
</div>
15-
</PageHeader>
15+
</PageHeader>
16+
17+
<NavTabs local-class="nav" as |nav|>
18+
<nav.Tab
19+
@link={{if
20+
(eq this.router.currentRouteName "crate.version")
21+
(link "crate.version" @crate @version.num)
22+
(link "crate.index" @crate)
23+
}}
24+
>
25+
Readme
26+
</nav.Tab>
27+
28+
<nav.Tab @link={{link "crate.versions" @crate}}>
29+
{{@crate.versions.length}} Versions
30+
</nav.Tab>
31+
32+
<nav.Tab @link={{link "crate.reverse-dependencies" @crate}}>
33+
Dependents
34+
</nav.Tab>
35+
36+
{{#if this.isOwner}}
37+
<nav.Tab @link={{link "crate.owners" @crate}}>
38+
Settings
39+
</nav.Tab>
40+
{{/if}}
41+
</NavTabs>

‎app/components/crate-header.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1+
import { computed } from '@ember/object';
12
import { inject as service } from '@ember/service';
23
import Component from '@glimmer/component';
34

45
export default class CrateHeader extends Component {
6+
@service router;
57
@service session;
8+
9+
@computed('args.crate.owner_user', 'session.currentUser.id')
10+
get isOwner() {
11+
return this.args.crate.owner_user.findBy('id', this.session.currentUser?.id);
12+
}
613
}

‎app/components/crate-header.module.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,7 @@
2929
width: 32px;
3030
height: 32px;
3131
}
32+
33+
.nav {
34+
margin-bottom: 20px;
35+
}

‎app/components/crate-sidebar.hbs

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -152,28 +152,6 @@
152152
{{/if}}
153153
{{/unless}}
154154

155-
<div data-test-versions>
156-
<h3>Versions</h3>
157-
<ul>
158-
{{#each this.smallSortedVersions as |version|}}
159-
<li>
160-
<LinkTo @route="crate.version" @model={{version.num}} data-test-version-link={{version.num}}>
161-
{{ version.num }}
162-
</LinkTo>
163-
{{date-format version.created_at "PP"}}
164-
{{#if version.yanked}}
165-
<span local-class='yanked'>yanked</span>
166-
{{/if}}
167-
</li>
168-
{{/each}}
169-
</ul>
170-
{{#if this.hasMoreVersions}}
171-
<LinkTo @route="crate.versions" @model={{@crate}} local-class="more-versions-link" data-test-all-versions-link>
172-
show all {{ @crate.versions.length }} versions
173-
</LinkTo>
174-
{{/if}}
175-
</div>
176-
177155
<div>
178156
<h3>Dependencies</h3>
179157
<ul data-test-dependencies>
@@ -187,10 +165,6 @@
187165
{{/if}}
188166
{{/each}}
189167
</ul>
190-
191-
<LinkTo @route="crate.reverse-dependencies" local-class="reverse-deps-link" data-test-reverse-deps-link>
192-
Show dependent crates
193-
</LinkTo>
194168
</div>
195169

196170
{{#if @version.buildDependencies}}

‎app/components/nav-tabs.hbs

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<nav ...attributes>
2+
<ul local-class="list">
3+
{{yield (hash Tab=(component "nav-tabs/tab"))}}
4+
</ul>
5+
</nav>

‎app/components/nav-tabs.module.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.list {
2+
--nav-tabs-border-width: 2px;
3+
--nav-tabs-padding-h: 20px;
4+
--nav-tabs-padding-v: 12px;
5+
--nav-tabs-radius: 5px;
6+
7+
display: flex;
8+
list-style: none;
9+
padding: 0;
10+
margin: 0;
11+
border-bottom: var(--nav-tabs-border-width) solid var(--gray-border);
12+
13+
@media only screen and (max-width: 550px) {
14+
flex-direction: column;
15+
border-left: var(--nav-tabs-border-width) solid var(--gray-border);
16+
border-bottom: none;
17+
}
18+
}

‎app/components/nav-tabs/tab.hbs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<li ...attributes>
2+
<a
3+
href={{@link.url}}
4+
local-class="link {{if @link.isActive "active"}}"
5+
{{on "click" @link.transitionTo}}
6+
>
7+
{{yield}}
8+
</a>
9+
</li>

‎app/components/nav-tabs/tab.module.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.link {
2+
display: block;
3+
padding:
4+
calc(var(--nav-tabs-padding-v) + var(--nav-tabs-border-width))
5+
var(--nav-tabs-padding-h)
6+
var(--nav-tabs-padding-v);
7+
color: var(--main-color);
8+
border-top-left-radius: var(--nav-tabs-radius);
9+
border-top-right-radius: var(--nav-tabs-radius);
10+
border-bottom: var(--nav-tabs-border-width) solid transparent;
11+
margin-bottom: calc(0px - var(--nav-tabs-border-width));
12+
transition: all 300ms;
13+
14+
&.active {
15+
color: var(--link-hover-color);
16+
border-bottom-color: var(--link-hover-color);
17+
background: var(--main-bg-dark);
18+
}
19+
20+
&:hover {
21+
color: var(--link-hover-color);
22+
border-bottom-color: var(--link-hover-color);
23+
transition: all 0s;
24+
}
25+
26+
@media only screen and (max-width: 550px) {
27+
padding:
28+
var(--nav-tabs-padding-v)
29+
var(--nav-tabs-padding-h)
30+
var(--nav-tabs-padding-v)
31+
calc(var(--nav-tabs-padding-h) + var(--nav-tabs-border-width));
32+
33+
border-top-left-radius: 0;
34+
border-bottom-right-radius: var(--nav-tabs-radius);
35+
border-bottom: none;
36+
border-left: var(--nav-tabs-border-width) solid transparent;
37+
margin-bottom: 0;
38+
margin-left: calc(0px - var(--nav-tabs-border-width));
39+
40+
&.active,
41+
&:hover {
42+
border-left-color: var(--link-hover-color);
43+
}
44+
}
45+
}

‎app/styles/crate/versions.module.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,19 @@
33
align-items: center;
44
justify-content: space-between;
55
margin-bottom: 10px;
6+
7+
@media only screen and (max-width: 550px) {
8+
display: block;
9+
}
610
}
711

812
.page-description {
913
composes: small from '../shared/typography.module.css';
14+
15+
@media only screen and (max-width: 550px) {
16+
display: block;
17+
margin-bottom: 15px;
18+
}
1019
}
1120

1221
.list {

‎app/templates/crate/owners.hbs

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
{{page-title 'Manage Crate Owners'}}
22

3-
<PageHeader
4-
@title="Manage Crate Owners"
5-
@suffix={{this.crate.name}}
6-
@icon="gear"
7-
/>
3+
<CrateHeader @crate={{this.crate}} />
84

95
<div local-class="me-email">
106
<h2>Add Owner</h2>

‎app/templates/crate/reverse-dependencies.hbs

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<CrateHeader @crate={{this.crate}} />
22

3-
<div local-class="back-link">
4-
<LinkTo @route="crate" @model={{this.crate.id}}>&#11013; Back to {{ this.crate.name }}</LinkTo>
5-
</div>
6-
73
<div local-class="results-meta">
84
<ResultsCount
95
@start={{this.pagination.currentPageStart}}

‎app/templates/crate/versions.hbs

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<CrateHeader @crate={{this.model}} />
22

33
<div local-class="results-meta">
4-
<LinkTo @route="crate" @model={{this.model}} local-class="back-link">
5-
&#11013; Back to Main Page
6-
</LinkTo>
4+
<span local-class="page-description" data-test-page-description>
5+
All <strong>{{ this.model.versions.length }}</strong>
6+
versions of <strong>{{ this.model.name }}</strong> since
7+
{{date-format this.model.created_at 'PPP'}}
8+
</span>
79

810
<div data-test-search-sort>
911
<span local-class="sort-by-label">Sort by </span>
@@ -14,12 +16,6 @@
1416
</div>
1517
</div>
1618

17-
<span local-class="page-description" data-test-page-description>
18-
All <strong>{{ this.model.versions.length }}</strong>
19-
versions of <strong>{{ this.model.name }}</strong> since
20-
{{date-format this.model.created_at 'PPP'}}
21-
</span>
22-
2319
<ul local-class="list">
2420
{{#each this.sortedVersions as |version|}}
2521
<li>

0 commit comments

Comments
 (0)