feat: add raw code toggle to highlight component and update highlight…

… theme (#2044)
Teradata · Aug 14, 2023 · 8bfb682 · 8bfb682
1 parent 7148e8e
commit 8bfb682
Show file tree

Hide file tree

Showing 14 changed files with 333 additions and 77 deletions.
diff --git a/...app/content/components/component-demos/flavored-markdown/flavored-markdown.component.html b/...app/content/components/component-demos/flavored-markdown/flavored-markdown.component.html
@@ -1 +1,3 @@
-<td-flavored-markdown>{{ basicFlavoredMarkdown }}</td-flavored-markdown>
+<td-flavored-markdown [copyCodeToClipboard]="true" [toggleRawCode]="true">{{
+  basicFlavoredMarkdown
+}}</td-flavored-markdown>
diff --git a/...c/app/content/components/component-demos/flavored-markdown/flavored-markdown.component.ts b/...c/app/content/components/component-demos/flavored-markdown/flavored-markdown.component.ts
@@ -29,5 +29,17 @@ export class FlavoredMarkdownDemoComponent {
 |VantageCloud Enterprise on Azure|Teradata-to-TeradataTo setup and configure the required PrivateLink endpoint on VantageCloud Enterprise, open a [PrivateLink change request](https://www.google.com) on the VantageCloud Enterprise customer support portal.|
 |VantageCore (on-premises)|Teradata-to-Teradata|
 |**This text is bolded**|*this text is italicized*|
+
+
+## Code 
+\`\`\`typescript
+this._renderer.appendChild(this._elementRef.nativeElement, preElement); // long long long long line
+
+import { Component } from '@angular/core';
+export class AppComponent {
+  title = 'my-app';
+  constructor() {}
+}
+\`\`\`
   `;
 }
diff --git a/...nt-demos/highlight/demos/highlight-demo-copy-code/highlight-demo-copy-code.component.html b/...nt-demos/highlight/demos/highlight-demo-copy-code/highlight-demo-copy-code.component.html
@@ -1,7 +1,20 @@
 <td-highlight
+  class="push-bottom-md"
   codeLang="css"
   [copyCodeToClipboard]="true"
   [copyCodeTooltips]="tooltipsConfig"
+  [toggleRawButton]="true"
 >
   {{ css }}
 </td-highlight>
+
+<div class="dark-theme">
+  <td-highlight
+    codeLang="css"
+    [copyCodeToClipboard]="true"
+    [copyCodeTooltips]="tooltipsConfig"
+    [toggleRawButton]="true"
+  >
+    {{ css }}
+  </td-highlight>
+</div>
diff --git a/...onents/component-demos/highlight/demos/highlight-demo-ts/highlight-demo-ts.component.html b/...onents/component-demos/highlight/demos/highlight-demo-ts/highlight-demo-ts.component.html
@@ -1,3 +1,7 @@
-<td-highlight codeLang="typescript">
+<td-highlight
+  codeLang="typescript"
+  [copyCodeToClipboard]="true"
+  [toggleRawButton]="true"
+>
   {{ code }}
 </td-highlight>
diff --git a/.../src/app/content/components/component-demos/highlight/demos/highlight-demo.component.html b/.../src/app/content/components/component-demos/highlight/demos/highlight-demo.component.html
@@ -10,6 +10,9 @@
   <highlight-demo-ts></highlight-demo-ts>
 </demo-component>
 
-<demo-component [demoId]="'highlight-demo-copy-code'" [demoTitle]="'CopyCode'">
+<demo-component
+  [demoId]="'highlight-demo-copy-code'"
+  [demoTitle]="'CopyCode and ToggleRaw'"
+>
   <highlight-demo-copy-code></highlight-demo-copy-code>
 </demo-component>
diff --git a/libs/angular-highlight/_highlight-theme.scss b/libs/angular-highlight/_highlight-theme.scss
@@ -3,98 +3,166 @@
 /**
 * Mimicking VS Dark+ theme as closely as possible
 */
-@mixin covalent-highlight-theme($theme-or-config) {
-  td-highlight {
-    background: #1e1e21;
+@mixin covalent-highlight-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .raw-and-copy-buttons {
+    border-color: map-get($foreground, divider);
+
+    .mat-button-toggle {
+      background-color: inherit;
+      color: map-get($foreground, text);
+
+      mat-icon {
+        color: map-get($foreground, icon);
+      }
+
+      & + .mat-button-toggle {
+        border-left-color: map-get($foreground, divider);
+      }
+    }
+  }
+
+  .dark-theme td-highlight {
+    background-color: #1a1c1d;
 
     .highlight {
-      color: $light-primary-text;
+      color: #abb2bf;
     }
 
-    .copy-button {
-      color: $light-primary-text;
+    .raw {
+      color: rgba(255, 255, 255, 87%);
     }
 
     .hljs-comment,
     .hljs-quote {
-      color: #608b4e;
+      color: #5c6370;
+      font-style: italic;
     }
 
-    .hljs-tag,
-    .hljs-name,
-    .hljs-selector-tag,
-    .hljs-literal {
-      color: #569cd6;
+    .hljs-doctag,
+    .hljs-formula,
+    .hljs-keyword {
+      color: #c678dd;
     }
 
-    .hljs-keyword {
-      color: #c288bf;
+    .hljs-deletion,
+    .hljs-name,
+    .hljs-tag,
+    .hljs-section,
+    .hljs-selector-tag,
+    .hljs-subst {
+      color: #e06c75;
     }
 
-    .hljs-attr,
-    //.hljs-params, // Remove param color for now
-    .hljs-attribute {
-      color: #9cdcfe;
+    .hljs-literal {
+      color: #56b6c2;
     }
 
-    .hljs-string,
-    .hljs-selector-attr,
+    .hljs-addition,
+    .hljs-attribute,
+    .hljs-meta .hljs-string,
     .hljs-regexp,
-    .hljs-link {
-      color: #ce9178;
+    .hljs-string {
+      color: #98c379;
     }
 
-    .hljs-selector-id,
+    .hljs-attr,
+    .hljs-number,
+    .hljs-selector-attr,
     .hljs-selector-class,
-    .hljs-selector-pseudo {
-      color: #d7ba7d;
+    .hljs-selector-pseudo,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-variable {
+      color: #d19a66;
     }
 
-    .hljs-meta {
-      color: #dcdcaa;
+    .hljs-bullet,
+    .hljs-link,
+    .hljs-meta,
+    .hljs-selector-id,
+    .hljs-symbol,
+    .hljs-title {
+      color: #61aeee;
     }
 
-    /* stylelint-disable selector-class-pattern */
     .hljs-built_in,
-    .hljs-builtin-name,
-    .hljs-type,
-    .hljs-section,
     .hljs-class .hljs-title,
-    .hljs-symbol,
-    .hljs-bullet {
-      color: #4ec9b0;
+    .hljs-title.class_ {
+      color: #e6c07b;
     }
-    /* stylelint-enable selector-class-pattern */
+  }
+
+  td-highlight {
+    background-color: #eeeeee;
 
-    .hljs-number {
-      color: #b5cea8;
+    .highlight {
+      color: #383a42;
     }
 
-    .hljs-variable,
-    .hljs-template-variable {
-      color: #9fddfc;
+    .raw {
+      color: rgba(0, 0, 0, 87%);
     }
 
-    .hljs-deletion {
-      color: #ffc8bd;
+    .hljs-comment,
+    .hljs-quote {
+      color: #a0a1a7;
+      font-style: italic;
     }
 
-    .hljs-addition {
-      background-color: #baeeba;
+    .hljs-doctag,
+    .hljs-formula,
+    .hljs-keyword {
+      color: #a626a4;
     }
 
-    .hljs-emphasis {
-      font-style: italic;
+    .hljs-deletion,
+    .hljs-name,
+    .hljs-tag,
+    .hljs-section,
+    .hljs-selector-tag,
+    .hljs-subst {
+      color: #e45649;
     }
 
-    .hljs-doctag,
-    .hljs-strong {
-      font-weight: bold;
+    .hljs-literal {
+      color: #0184bb;
     }
 
-    .hljs-formula {
-      background-color: #eeeeee;
-      font-style: italic;
+    .hljs-addition,
+    .hljs-attribute,
+    .hljs-meta .hljs-string,
+    .hljs-regexp,
+    .hljs-string {
+      color: #50a14f;
+    }
+
+    .hljs-attr,
+    .hljs-number,
+    .hljs-selector-attr,
+    .hljs-selector-class,
+    .hljs-selector-pseudo,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-variable {
+      color: #986801;
+    }
+
+    .hljs-bullet,
+    .hljs-link,
+    .hljs-meta,
+    .hljs-selector-id,
+    .hljs-symbol,
+    .hljs-title {
+      color: #4078f2;
+    }
+
+    .hljs-built_in,
+    .hljs-class .hljs-title,
+    .hljs-title.class_ {
+      color: #c18401;
     }
   }
 }
diff --git a/libs/angular-highlight/src/lib/copy-code-button/copy-code-button.component.html b/libs/angular-highlight/src/lib/copy-code-button/copy-code-button.component.html
@@ -1,10 +1,32 @@
-<button
-  mat-icon-button
-  [cdkCopyToClipboard]="copiedContent"
-  class="copy-button"
-  [matTooltip]="copyTooltip"
-  #tooltip="matTooltip"
-  (cdkCopyToClipboardCopied)="textCopied($event)"
+<mat-button-toggle-group
+  multiple
+  class="raw-and-copy-buttons"
+  *ngIf="toggleRawButton; else button"
 >
-  <mat-icon role="img">content_copy</mat-icon>
-</button>
+  <mat-button-toggle (click)="toggleRawClicked()" #rawButton>{{
+    rawToggleText
+  }}</mat-button-toggle>
+  <mat-button-toggle
+    [cdkCopyToClipboard]="copiedContent"
+    [matTooltip]="copyTooltip"
+    #tooltip="matTooltip"
+    #copyButton
+    (click)="copyClicked()"
+    (cdkCopyToClipboardCopied)="textCopied($event)"
+  >
+    <mat-icon width>content_copy</mat-icon>
+  </mat-button-toggle>
+</mat-button-toggle-group>
+
+<ng-template #button>
+  <button
+    mat-icon-button
+    [cdkCopyToClipboard]="copiedContent"
+    class="copy-button"
+    [matTooltip]="copyTooltip"
+    #tooltip="matTooltip"
+    (cdkCopyToClipboardCopied)="textCopied($event)"
+  >
+    <mat-icon role="img">content_copy</mat-icon>
+  </button>
+</ng-template>
diff --git a/libs/angular-highlight/src/lib/copy-code-button/copy-code-button.component.scss b/libs/angular-highlight/src/lib/copy-code-button/copy-code-button.component.scss
@@ -0,0 +1,16 @@
+mat-button-toggle-group.raw-and-copy-buttons {
+  margin-top: -8px;
+  margin-right: -8px;
+  margin-left: 8px;
+
+  ::ng-deep .mat-button-toggle-label-content {
+    font-size: 12px;
+    line-height: 28px;
+
+    mat-icon {
+      width: 16px;
+      height: 16px;
+      font-size: 16px;
+    }
+  }
+}