Skip to content

Commit 4bb81ff

Browse files
borsbors
committed
Auto merge of #3215 - Turbo87:crate-sidebar, r=locks
Extract `CrateSidebar` component This will make it easier to potentially reuse it on other pages, like the version list page, and it also will make it easier to test this component in isolation :) r? `@pichfl`
2 parents 2b3bdf1 + 495c119 commit 4bb81ff

File tree

6 files changed

+256
-237
lines changed

6 files changed

+256
-237
lines changed

‎app/components/crate-sidebar.hbs

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<section
2+
local-class='authorship'
3+
aria-label="Crate metadata"
4+
...attributes
5+
>
6+
<div local-class='top'>
7+
<div>
8+
<div local-class='last-update'>Last Updated</div>
9+
<div local-class='{{if @version.crate_size 'date-with-small-margin-bot' 'date'}}'>
10+
{{date-format-distance-to-now @crate.updated_at addSuffix=true}}
11+
</div>
12+
</div>
13+
14+
{{#if @version.crate_size}}
15+
<div>
16+
<div local-class='crate-size'>Crate Size</div>
17+
<div local-class='size'>{{pretty-bytes @version.crate_size}}</div>
18+
</div>
19+
{{/if}}
20+
21+
<div>
22+
<h3>Owners</h3>
23+
24+
{{#if this.isOwner}}
25+
<p>
26+
<LinkTo @route="crate.owners" @model={{@crate}} data-test-manage-owners-link>
27+
Manage owners
28+
</LinkTo>
29+
</p>
30+
{{/if}}
31+
32+
<ul local-class='owners' data-test-owners>
33+
{{#each @crate.owner_team as |team|}}
34+
<li>
35+
<LinkTo @route={{team.kind}} @model={{team.login}} data-test-team-link={{team.login}}>
36+
<UserAvatar @user={{team}} @size="medium-small" />
37+
</LinkTo>
38+
</li>
39+
{{/each}}
40+
41+
{{#each @crate.owner_user as |user|}}
42+
<li>
43+
<LinkTo @route={{user.kind}} @model={{user.login}} data-test-user-link={{user.login}}>
44+
<UserAvatar @user={{user}} @size="medium-small" />
45+
</LinkTo>
46+
</li>
47+
{{/each}}
48+
</ul>
49+
</div>
50+
51+
<div>
52+
<h3>Authors</h3>
53+
<ul>
54+
{{#each @version.authorNames as |author|}}
55+
<li>{{ format-email author }}</li>
56+
{{/each}}
57+
</ul>
58+
</div>
59+
</div>
60+
61+
<div local-class='bottom'>
62+
{{#if @version.license}}
63+
<div>
64+
<h3>License</h3>
65+
<p data-test-license>{{ @version.license }}</p>
66+
</div>
67+
{{/if}}
68+
69+
{{#unless @crate.keywords.isPending}}
70+
{{#if @crate.keywords}}
71+
<div>
72+
<h3>Keywords</h3>
73+
<ul local-class='keywords'>
74+
{{#each @crate.keywords as |keyword|}}
75+
<li><LinkTo @route="keyword" @model={{keyword}}>{{keyword.id}}</LinkTo></li>
76+
{{/each}}
77+
</ul>
78+
</div>
79+
{{/if}}
80+
{{/unless}}
81+
82+
{{#unless @crate.categories.isPending}}
83+
{{#if @crate.categories}}
84+
<div>
85+
<h3>Categories</h3>
86+
<ul>
87+
{{#each @crate.categories as |category|}}
88+
<li><LinkTo @route="category" @model={{category.slug}}>{{category.category}}</LinkTo></li>
89+
{{/each}}
90+
</ul>
91+
</div>
92+
{{/if}}
93+
{{/unless}}
94+
95+
<div data-test-versions>
96+
<h3>Versions</h3>
97+
<ul>
98+
{{#each this.smallSortedVersions as |version|}}
99+
<li>
100+
<LinkTo @route="crate.version" @model={{version.num}} data-test-version-link={{version.num}}>
101+
{{ version.num }}
102+
</LinkTo>
103+
{{date-format version.created_at "PP"}}
104+
{{#if version.yanked}}
105+
<span local-class='yanked'>yanked</span>
106+
{{/if}}
107+
</li>
108+
{{/each}}
109+
</ul>
110+
{{#if this.hasMoreVersions}}
111+
<LinkTo @route="crate.versions" @model={{@crate}} local-class="more-versions-link" data-test-all-versions-link>
112+
show all {{ @crate.versions.length }} versions
113+
</LinkTo>
114+
{{/if}}
115+
</div>
116+
117+
<div>
118+
<h3>Dependencies</h3>
119+
<ul data-test-dependencies>
120+
{{#each @version.normalDependencies as |dep|}}
121+
<li><LinkToDep @dep={{dep}} /></li>
122+
{{else}}
123+
{{#if @version.loadDepsTask.isRunning}}
124+
<li>Loading…</li>
125+
{{else}}
126+
<li>None</li>
127+
{{/if}}
128+
{{/each}}
129+
</ul>
130+
</div>
131+
132+
{{#if @version.buildDependencies}}
133+
<div>
134+
<h3>Build-Dependencies</h3>
135+
<ul data-test-build-dependencies>
136+
{{#each @version.buildDependencies as |dep|}}
137+
<li><LinkToDep @dep={{dep}} /></li>
138+
{{/each}}
139+
</ul>
140+
</div>
141+
{{/if}}
142+
143+
{{#if @version.devDependencies}}
144+
<div>
145+
<h3>Dev-Dependencies</h3>
146+
<ul data-test-dev-dependencies>
147+
{{#each @version.devDependencies as |dep|}}
148+
<li><LinkToDep @dep={{dep}} /></li>
149+
{{/each}}
150+
</ul>
151+
</div>
152+
{{/if}}
153+
</div>
154+
</section>

‎app/components/crate-sidebar.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { computed } from '@ember/object';
2+
import { gt, readOnly } from '@ember/object/computed';
3+
import { inject as service } from '@ember/service';
4+
import Component from '@glimmer/component';
5+
6+
const NUM_VERSIONS = 5;
7+
8+
export default class DownloadGraph extends Component {
9+
@service session;
10+
11+
@computed('args.crate.owner_user', 'session.currentUser.id')
12+
get isOwner() {
13+
return this.args.crate.owner_user.findBy('id', this.session.currentUser?.id);
14+
}
15+
16+
@readOnly('args.crate.versions') sortedVersions;
17+
18+
@computed('sortedVersions')
19+
get smallSortedVersions() {
20+
return this.sortedVersions.slice(0, NUM_VERSIONS);
21+
}
22+
23+
@gt('sortedVersions.length', NUM_VERSIONS) hasMoreVersions;
24+
}

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
.authorship {
2+
.top, .bottom {
3+
display: flex;
4+
flex-wrap: wrap;
5+
6+
> * { margin-right: 1em; }
7+
}
8+
9+
.top > * { flex: 1 }
10+
11+
@media only screen and (min-width: 890px) {
12+
flex: 3;
13+
border-left: 2px solid var(--gray-border);
14+
padding-left: 20px;
15+
16+
.top, .bottom {
17+
flex-direction: column;
18+
}
19+
20+
ul {
21+
padding-left: 20px;
22+
}
23+
}
24+
25+
@media only screen and (max-width: 480px) {
26+
.top, .bottom {
27+
flex-direction: column;
28+
}
29+
}
30+
}
31+
32+
.last-update,
33+
.crate-size {
34+
composes: small from '../styles/shared/typography.module.css';
35+
line-height: 25px;
36+
}
37+
38+
.date {
39+
font-weight: bold;
40+
margin-bottom: 40px;
41+
}
42+
43+
/*
44+
Since crate_size is a new field, older crates won't have it.
45+
Preserve behaviour for older crates. For newer ones, keep
46+
`Crate Size` closer to last updated.
47+
*/
48+
.date-with-small-margin-bot {
49+
font-weight: bold;
50+
margin-bottom: 20px;
51+
}
52+
53+
.size {
54+
font-weight: bold;
55+
margin-bottom: 40px;
56+
}
57+
58+
ul.owners, ul.keywords {
59+
display: flex;
60+
flex-wrap: wrap;
61+
list-style: none;
62+
padding: 0;
63+
margin: 0;
64+
65+
li {
66+
margin: 0 7px 7px 0;
67+
}
68+
}
69+
70+
.yanked {
71+
composes: yanked from '../styles/shared/typography.module.css';
72+
}
73+
74+
.more-versions-link {
75+
composes: small from '../styles/shared/typography.module.css';
76+
}

‎app/controllers/crate/version.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Controller from '@ember/controller';
22
import { computed } from '@ember/object';
3-
import { alias, gt, readOnly } from '@ember/object/computed';
3+
import { alias, readOnly } from '@ember/object/computed';
44
import { inject as service } from '@ember/service';
55

66
import subDays from 'date-fns/subDays';
@@ -21,8 +21,6 @@ export default class CrateVersionController extends Controller {
2121
@alias('model.crate') crate;
2222
@alias('model.requestedVersion') requestedVersion;
2323
@alias('model.version') currentVersion;
24-
@alias('crate.keywords') keywords;
25-
@alias('crate.categories') categories;
2624

2725
@computed('crate.owner_user', 'session.currentUser.id')
2826
get isOwner() {
@@ -36,10 +34,6 @@ export default class CrateVersionController extends Controller {
3634
return this.sortedVersions.slice(0, NUM_VERSIONS);
3735
}
3836

39-
@gt('sortedVersions.length', NUM_VERSIONS) hasMoreVersions;
40-
@gt('keywords.length', 0) anyKeywords;
41-
@gt('categories.length', 0) anyCategories;
42-
4337
@computed('downloads', 'extraDownloads', 'requestedVersion')
4438
get downloadData() {
4539
let downloads = this.downloads;

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

Lines changed: 0 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -113,82 +113,6 @@ div.header {
113113
}
114114
}
115115

116-
.last-update,
117-
.crate-size {
118-
composes: small from '../shared/typography.module.css';
119-
line-height: 25px;
120-
}
121-
122-
.date {
123-
font-weight: bold;
124-
margin-bottom: 40px;
125-
}
126-
127-
/*
128-
Since crate_size is a new field, older crates won't have it.
129-
Preserve behaviour for older crates. For newer ones, keep
130-
`Crate Size` closer to last updated.
131-
*/
132-
.date-with-small-margin-bot {
133-
font-weight: bold;
134-
margin-bottom: 20px;
135-
}
136-
137-
.size {
138-
font-weight: bold;
139-
margin-bottom: 40px;
140-
}
141-
142-
.crate-info .authorship {
143-
ul.owners, ul.keywords {
144-
display: flex;
145-
flex-wrap: wrap;
146-
list-style: none;
147-
padding: 0;
148-
margin: 0;
149-
150-
li {
151-
margin: 0 7px 7px 0;
152-
}
153-
}
154-
}
155-
156-
.more-versions-link {
157-
composes: small from '../shared/typography.module.css';
158-
}
159-
160-
.authorship {
161-
.top, .bottom {
162-
display: flex;
163-
flex-wrap: wrap;
164-
165-
> * { margin-right: 1em; }
166-
}
167-
168-
.top > * { flex: 1 }
169-
170-
@media only screen and (min-width: 890px) {
171-
flex: 3;
172-
border-left: 2px solid var(--gray-border);
173-
padding-left: 20px;
174-
175-
.top, .bottom {
176-
flex-direction: column;
177-
}
178-
179-
ul {
180-
padding-left: 20px;
181-
}
182-
}
183-
184-
@media only screen and (max-width: 480px) {
185-
.top, .bottom {
186-
flex-direction: column;
187-
}
188-
}
189-
}
190-
191-
192116
.about {
193117
line-height: 180%;
194118
margin-bottom: 40px;
@@ -250,7 +174,3 @@ div.header {
250174
display: none;
251175
}
252176
}
253-
254-
.yanked {
255-
composes: yanked from '../shared/typography.module.css';
256-
}

0 commit comments

Comments
 (0)