Fix code viewer title and buttons disappearing (#1258)

angular · Jun 14, 2024 · 5020186 · 5020186
1 parent 47f0752
commit 5020186
Showing 1 changed file with 61 additions and 63 deletions.
diff --git a/src/app/shared/example-viewer/example-viewer.html b/src/app/shared/example-viewer/example-viewer.html
@@ -1,6 +1,65 @@
 <div class="docs-example-viewer-wrapper">
-  @switch (view) {
-    @case ('full') {
+  @if (view === 'snippet') {
+    <div class="docs-example-viewer-source-compact">
+      <div class="button-bar">
+        <button mat-icon-button type="button" (click)="copySource(snippet)"
+                class="docs-example-source-copy docs-example-button" matTooltip="Copy snippet"
+                title="Copy example source" aria-label="Copy example source to clipboard">
+          <mat-icon>content_copy</mat-icon>
+        </button>
+        <button mat-icon-button type="button" (click)="toggleCompactView()"
+                class="docs-example-compact-toggle docs-example-button" matTooltip="View full example"
+                aria-label="View less">
+          <mat-icon>
+            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
+              <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"/>
+            </svg>
+          </mat-icon>
+        </button>
+      </div>
+
+      @if (fileUrl) {
+        <code-snippet [source]="fileUrl"/>
+      }
+    </div>
+  }
+
+  @else {
+    <div class="docs-example-viewer-title">
+      <div class="docs-example-viewer-title-spacer">{{exampleData?.title}}</div>
+
+      <button
+        mat-icon-button
+        type="button"
+        [attr.aria-label]="'Copy link to ' + exampleData?.title + ' example to the clipboard'"
+        matTooltip="Copy link to example"
+        (click)="_copyLink()">
+        <mat-icon>link</mat-icon>
+      </button>
+
+      @if (showCompactToggle) {
+        <button mat-icon-button
+                (click)="toggleCompactView()"
+                matTooltip="View snippet only"
+                aria-label="View less">
+          <mat-icon>
+          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
+            <path
+              d="M15.41,10H20v2h-8V4h2v4.59L20.59,2L22,3.41L15.41,10z M4,12v2h4.59L2,20.59L3.41,22L10,15.41V20h2v-8H4z"/>
+          </svg>
+          </mat-icon>
+        </button>
+      }
+
+      <button mat-icon-button type="button" (click)="toggleSourceView()"
+              [matTooltip]="view === 'demo' ? 'View code' : 'Hide code'" aria-label="View source">
+        <mat-icon>code</mat-icon>
+      </button>
+
+      <stack-blitz-button [example]="example"></stack-blitz-button>
+    </div>
+
+    @if (view === 'full') {
       <div class="docs-example-viewer-source">
         <mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab" mat-stretch-tabs="false">
           @for (tabName of _getExampleTabNames(); track tabName) {
@@ -18,67 +77,6 @@
         </mat-tab-group>
       </div>
     }
-
-    @case ('snippet') {
-      <div class="docs-example-viewer-source-compact">
-        <div class="button-bar">
-          <button mat-icon-button type="button" (click)="copySource(snippet)"
-                  class="docs-example-source-copy docs-example-button" matTooltip="Copy snippet"
-                  title="Copy example source" aria-label="Copy example source to clipboard">
-            <mat-icon>content_copy</mat-icon>
-          </button>
-          <button mat-icon-button type="button" (click)="toggleCompactView()"
-                  class="docs-example-compact-toggle docs-example-button" matTooltip="View full example"
-                  aria-label="View less">
-            <mat-icon>
-              <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
-                <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"/>
-              </svg>
-            </mat-icon>
-          </button>
-        </div>
-
-        @if (fileUrl) {
-          <code-snippet [source]="fileUrl"/>
-        }
-      </div>
-    }
-
-    @default {
-      <div class="docs-example-viewer-title">
-        <div class="docs-example-viewer-title-spacer">{{exampleData?.title}}</div>
-
-        <button
-          mat-icon-button
-          type="button"
-          [attr.aria-label]="'Copy link to ' + exampleData?.title + ' example to the clipboard'"
-          matTooltip="Copy link to example"
-          (click)="_copyLink()">
-          <mat-icon>link</mat-icon>
-        </button>
-
-        @if (showCompactToggle) {
-          <button mat-icon-button
-                  (click)="toggleCompactView()"
-                  matTooltip="View snippet only"
-                  aria-label="View less">
-            <mat-icon>
-            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
-              <path
-                d="M15.41,10H20v2h-8V4h2v4.59L20.59,2L22,3.41L15.41,10z M4,12v2h4.59L2,20.59L3.41,22L10,15.41V20h2v-8H4z"/>
-            </svg>
-            </mat-icon>
-          </button>
-        }
-
-        <button mat-icon-button type="button" (click)="toggleSourceView()"
-                [matTooltip]="view === 'demo' ? 'View code' : 'Hide code'" aria-label="View source">
-          <mat-icon>code</mat-icon>
-        </button>
-
-        <stack-blitz-button [example]="example"></stack-blitz-button>
-      </div>
-    }
   }
 
   @if (view !== 'snippet') {