Skip to content

Commit a6b721f

Browse files
Turbo87Turbo87
committed
Extract CrateSidebar::InstallInstructions component
1 parent a6cde7f commit a6b721f

File tree

6 files changed

+106
-97
lines changed

6 files changed

+106
-97
lines changed

‎app/components/crate-sidebar.hbs

Lines changed: 5 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -48,37 +48,11 @@
4848
<div data-test-install>
4949
<h2 local-class="heading">Install</h2>
5050

51-
<p local-class="copy-help">Run the following Cargo command in your project directory:</p>
52-
{{#if (is-clipboard-supported)}}
53-
<CopyButton
54-
@copyText={{this.cargoAddCommand}}
55-
title="Copy command to clipboard"
56-
local-class="copy-button"
57-
>
58-
<span local-class="selectable">{{this.cargoAddCommand}}</span>
59-
{{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
60-
</CopyButton>
61-
{{else}}
62-
<code local-class="copy-fallback">
63-
{{this.cargoAddCommand}}
64-
</code>
65-
{{/if}}
66-
67-
<p local-class="copy-help">Or add the following line to your Cargo.toml:</p>
68-
{{#if (is-clipboard-supported)}}
69-
<CopyButton
70-
@copyText={{this.tomlSnippet}}
71-
title="Copy Cargo.toml snippet to clipboard"
72-
local-class="copy-button"
73-
>
74-
<span local-class="selectable">{{this.tomlSnippet}}</span>
75-
{{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
76-
</CopyButton>
77-
{{else}}
78-
<code local-class="copy-fallback">
79-
{{this.tomlSnippet}}
80-
</code>
81-
{{/if}}
51+
<CrateSidebar::InstallInstructions
52+
@crate={{@crate.name}}
53+
@version={{@version.num}}
54+
@exactVersion={{@requestedVersion}}
55+
/>
8256
</div>
8357
{{/unless}}
8458

‎app/components/crate-sidebar.js

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,6 @@ export default class CrateSidebar extends Component {
1414
return homepage && (!repository || simplifyUrl(repository) !== simplifyUrl(homepage));
1515
}
1616

17-
get cargoAddCommand() {
18-
return this.args.requestedVersion
19-
? `cargo add ${this.args.crate.name}@=${this.args.requestedVersion}`
20-
: `cargo add ${this.args.crate.name}`;
21-
}
22-
23-
get tomlSnippet() {
24-
let version = this.args.version.num.split('+')[0];
25-
let exact = this.args.requestedVersion ? '=' : '';
26-
return `${this.args.crate.name} = "${exact}${version}"`;
27-
}
28-
2917
get playgroundLink() {
3018
let playgroundCrates = this.playground.crates;
3119
if (!playgroundCrates) return;

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

Lines changed: 0 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -50,60 +50,6 @@
5050
font-variant-numeric: tabular-nums;
5151
}
5252

53-
.copy-help {
54-
font-size: 12px;
55-
}
56-
57-
.copy-button,
58-
.copy-fallback {
59-
display: flex;
60-
width: 100%;
61-
align-items: center;
62-
justify-content: space-between;
63-
padding: var(--space-2xs) var(--space-xs);
64-
font-family: var(--font-monospace);
65-
font-size: 14px;
66-
line-height: 1.5em;
67-
color: var(--main-color);
68-
background: transparent;
69-
border-radius: var(--space-3xs);
70-
border: solid var(--space-4xs) var(--gray-border);
71-
72-
span {
73-
flex: auto;
74-
display: block;
75-
word-break: break-word;
76-
}
77-
}
78-
79-
.copy-button {
80-
text-align: start;
81-
cursor: pointer;
82-
83-
&:hover {
84-
background-color: light-dark(white, #141413);
85-
}
86-
}
87-
88-
.copy-icon {
89-
flex-shrink: 0;
90-
height: 1.1em;
91-
width: auto;
92-
/* for slightly nicer alignment... */
93-
margin-top: -3px;
94-
margin-left: var(--space-2xs);
95-
opacity: 0;
96-
transition: opacity var(--transition-fast);
97-
98-
.copy-button:hover & {
99-
opacity: 1;
100-
}
101-
}
102-
103-
.selectable {
104-
user-select: text;
105-
}
106-
10753
.links {
10854
> * + * {
10955
margin-top: var(--space-m);

‎app/components/crate-sidebar/install-instructions.hbs

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<p local-class="copy-help">Run the following Cargo command in your project directory:</p>
2+
3+
{{#if (is-clipboard-supported)}}
4+
<CopyButton
5+
@copyText={{this.cargoAddCommand}}
6+
title="Copy command to clipboard"
7+
local-class="copy-button"
8+
>
9+
<span local-class="selectable">{{this.cargoAddCommand}}</span>
10+
{{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
11+
</CopyButton>
12+
{{else}}
13+
<code local-class="copy-fallback">
14+
{{this.cargoAddCommand}}
15+
</code>
16+
{{/if}}
17+
18+
<p local-class="copy-help">Or add the following line to your Cargo.toml:</p>
19+
20+
{{#if (is-clipboard-supported)}}
21+
<CopyButton
22+
@copyText={{this.tomlSnippet}}
23+
title="Copy Cargo.toml snippet to clipboard"
24+
local-class="copy-button"
25+
>
26+
<span local-class="selectable">{{this.tomlSnippet}}</span>
27+
{{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
28+
</CopyButton>
29+
{{else}}
30+
<code local-class="copy-fallback">
31+
{{this.tomlSnippet}}
32+
</code>
33+
{{/if}}

‎app/components/crate-sidebar/install-instructions.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Component from '@glimmer/component';
2+
3+
export default class InstallInstructions extends Component {
4+
get cargoAddCommand() {
5+
return this.args.exactVersion
6+
? `cargo add ${this.args.crate}@=${this.args.version}`
7+
: `cargo add ${this.args.crate}`;
8+
}
9+
10+
get tomlSnippet() {
11+
let version = this.args.version.split('+')[0];
12+
let exact = this.args.exactVersion ? '=' : '';
13+
return `${this.args.crate} = "${exact}${version}"`;
14+
}
15+
}

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.copy-help {
2+
font-size: 12px;
3+
}
4+
5+
.copy-button,
6+
.copy-fallback {
7+
display: flex;
8+
width: 100%;
9+
align-items: center;
10+
justify-content: space-between;
11+
padding: var(--space-2xs) var(--space-xs);
12+
font-family: var(--font-monospace);
13+
font-size: 14px;
14+
line-height: 1.5em;
15+
color: var(--main-color);
16+
background: transparent;
17+
border-radius: var(--space-3xs);
18+
border: solid var(--space-4xs) var(--gray-border);
19+
20+
span {
21+
flex: auto;
22+
display: block;
23+
word-break: break-word;
24+
}
25+
}
26+
27+
.copy-button {
28+
text-align: start;
29+
cursor: pointer;
30+
31+
&:hover {
32+
background-color: light-dark(white, #141413);
33+
}
34+
}
35+
36+
.copy-icon {
37+
flex-shrink: 0;
38+
height: 1.1em;
39+
width: auto;
40+
/* for slightly nicer alignment... */
41+
margin-top: -3px;
42+
margin-left: var(--space-2xs);
43+
opacity: 0;
44+
transition: opacity var(--transition-fast);
45+
46+
.copy-button:hover & {
47+
opacity: 1;
48+
}
49+
}
50+
51+
.selectable {
52+
user-select: text;
53+
}

0 commit comments

Comments
 (0)