Skip to content

Commit b5f1f88

Browse files
MeAkibMeAkib
authored
docs: add hide code icon on snippet toggle (#31897)
1 parent 1e86803 commit b5f1f88

File tree

2 files changed

+82
-46
lines changed

2 files changed

+82
-46
lines changed

‎docs/src/app/shared/example-viewer/example-viewer.html‎

Lines changed: 75 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,72 +5,106 @@
55
@if (view() === 'snippet') {
66
<div class="docs-example-viewer-source-compact">
77
<div class="docs-button-bar">
8-
<button mat-icon-button type="button" (click)="copySource(snippet())"
9-
class="docs-example-source-copy docs-example-button" matTooltip="Copy snippet"
10-
title="Copy example source" aria-label="Copy example source to clipboard">
8+
<button
9+
mat-icon-button
10+
type="button"
11+
(click)="copySource(snippet())"
12+
class="docs-example-source-copy docs-example-button"
13+
matTooltip="Copy snippet"
14+
title="Copy example source"
15+
aria-label="Copy example source to clipboard"
16+
>
1117
<mat-icon>content_copy</mat-icon>
1218
</button>
13-
<button mat-icon-button type="button" (click)="toggleCompactView()"
14-
class="docs-example-compact-toggle docs-example-button" matTooltip="View full example"
15-
aria-label="View less">
19+
<button
20+
mat-icon-button
21+
type="button"
22+
(click)="toggleCompactView()"
23+
class="docs-example-compact-toggle docs-example-button"
24+
matTooltip="View full example"
25+
aria-label="View less"
26+
>
1627
<mat-icon>
1728
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
18-
<polygon points="13,3 13,5 17.59,5 5,17.59 5,13 3,13 3,21 11,21 11,19 6.41,19 19,6.41 19,11 21,11 21,3"/>
29+
<polygon
30+
points="13,3 13,5 17.59,5 5,17.59 5,13 3,13 3,21 11,21 11,19 6.41,19 19,6.41 19,11 21,11 21,3"
31+
/>
1932
</svg>
2033
</mat-icon>
2134
</button>
2235
</div>
2336

2437
@if (fileUrl) {
25-
<code-snippet [source]="fileUrl"/>
38+
<code-snippet [source]="fileUrl" />
2639
}
2740
</div>
28-
}
29-
30-
@else {
41+
} @else {
3142
<div class="docs-example-viewer-title">
32-
<div class="docs-example-viewer-title-spacer">{{exampleData?.title}}</div>
43+
<p>{{exampleData?.title}}</p>
44+
45+
<div class="docs-example-viewer-actions">
46+
<button
47+
mat-icon-button
48+
type="button"
49+
[attr.aria-label]="'Copy link to ' + exampleData?.title + ' example to the clipboard'"
50+
matTooltip="Copy link to example"
51+
(click)="_copyLink()"
52+
>
53+
<mat-icon>link</mat-icon>
54+
</button>
3355

34-
<button
35-
mat-icon-button
36-
type="button"
37-
[attr.aria-label]="'Copy link to ' + exampleData?.title + ' example to the clipboard'"
38-
matTooltip="Copy link to example"
39-
(click)="_copyLink()">
40-
<mat-icon>link</mat-icon>
41-
</button>
56+
@if (showCompactToggle()) {
57+
<button
58+
mat-icon-button
59+
(click)="toggleCompactView()"
60+
matTooltip="View snippet only"
61+
aria-label="View less"
62+
>
63+
<mat-icon>
64+
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
65+
<path
66+
d="M15.41,10H20v2h-8V4h2v4.59L20.59,2L22,3.41L15.41,10z M4,12v2h4.59L2,20.59L3.41,22L10,15.41V20h2v-8H4z"
67+
/>
68+
</svg>
69+
</mat-icon>
70+
</button>
71+
}
4272

43-
@if (showCompactToggle()) {
44-
<button mat-icon-button
45-
(click)="toggleCompactView()"
46-
matTooltip="View snippet only"
47-
aria-label="View less">
73+
<button
74+
mat-icon-button
75+
type="button"
76+
(click)="toggleSourceView()"
77+
[matTooltip]="view() === 'demo' ? 'View code' : 'Hide code'"
78+
aria-label="View source"
79+
>
4880
<mat-icon>
49-
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
50-
<path
51-
d="M15.41,10H20v2h-8V4h2v4.59L20.59,2L22,3.41L15.41,10z M4,12v2h4.59L2,20.59L3.41,22L10,15.41V20h2v-8H4z"/>
52-
</svg>
81+
{{view() === 'demo' ? 'code' : 'code_off'}}
5382
</mat-icon>
5483
</button>
55-
}
56-
57-
<button mat-icon-button type="button" (click)="toggleSourceView()"
58-
[matTooltip]="view() === 'demo' ? 'View code' : 'Hide code'" aria-label="View source">
59-
<mat-icon>code</mat-icon>
60-
</button>
6184

62-
<stackblitz-button [example]="example" />
85+
<stackblitz-button [example]="example" />
86+
</div>
6387
</div>
6488

6589
@if (view() === 'full') {
6690
<div class="docs-example-viewer-source">
67-
<mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab" mat-stretch-tabs="false">
91+
<mat-tab-group
92+
animationDuration="0ms"
93+
[(selectedIndex)]="selectedTab"
94+
mat-stretch-tabs="false"
95+
>
6896
@for (tabName of _exampleTabNames(); track tabName) {
6997
<mat-tab [label]="tabName">
7098
<div class="docs-button-bar">
71-
<button mat-icon-button type="button" (click)="copySource(snippet(), selectedTab())"
72-
class="docs-example-source-copy docs-example-button" matTooltip="Copy example source"
73-
title="Copy example source" aria-label="Copy example source to clipboard">
99+
<button
100+
mat-icon-button
101+
type="button"
102+
(click)="copySource(snippet(), selectedTab())"
103+
class="docs-example-source-copy docs-example-button"
104+
matTooltip="Copy example source"
105+
title="Copy example source"
106+
aria-label="Copy example source to clipboard"
107+
>
74108
<mat-icon>content_copy</mat-icon>
75109
</button>
76110
</div>
@@ -87,7 +121,7 @@
87121
@let componentType = _exampleComponentType();
88122

89123
@if (componentType && !example?.includes('harness')) {
90-
<ng-template [ngComponentOutlet]="componentType"/>
124+
<ng-template [ngComponentOutlet]="componentType" />
91125
} @else {
92126
<div>This example contains tests. Open in Stackblitz to run the tests.</div>
93127
}

‎docs/src/app/shared/example-viewer/example-viewer.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,23 @@
1313
}
1414

1515
.docs-example-viewer-title {
16-
align-content: center;
1716
align-items: center;
1817
display: flex;
19-
justify-content: center;
18+
justify-content: space-between;
2019
padding: 16px 16px 0 24px;
2120
color: var(--mat-sys-on-surface-variant);
2221
}
2322

23+
.docs-example-viewer-actions {
24+
display: flex;
25+
align-items: center;
26+
gap: 8px;
27+
}
28+
2429
.docs-example-viewer-source code-snippet {
2530
border-bottom: 1px solid var(--mat-sys-outline-variant);
2631
}
2732

28-
.docs-example-viewer-title-spacer {
29-
flex: 1 1 auto;
30-
}
3133

3234
.docs-example-viewer-body {
3335
padding: 16px 24px;

0 commit comments

Comments
 (0)