Merge pull request #873 from jer-k/hide-toolbar

Added the ability to toggle the Carbon toolbar and adjust the margin
deckgo · Sep 17, 2020 · 7e66629 · 7e66629
2 parents b0e8d81 + 17dd548
commit 7e66629
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/.../docs/components/app-components-highlight-code/app-components-highlight-code.md b/.../docs/components/app-components-highlight-code/app-components-highlight-code.md
@@ -186,6 +186,7 @@ Furthermore the following styles apply if the code is displayed as a "carbon" te
 | CSS4 variable                                                  | Default                        | Note                                                    |
 | -------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------- |
 | --deckgo-highlight-code-carbon-display                         | block                          | The display property of the host container.             |
+| --deckgo-highlight-code-carbon-toolbar-display                 | block                          | The display property of the toolbar container.          |
 | --deckgo-highlight-code-carbon-overflow                        | auto                           | The overflow property of the host container.            |
 | --deckgo-highlight-code-carbon-border                          |                                | The border property of the host container.              |
 | --deckgo-highlight-code-carbon-border-radius                   | 4px                            | The border-radius property of the host container.       |
@@ -194,6 +195,7 @@ Furthermore the following styles apply if the code is displayed as a "carbon" te
 | --deckgo-highlight-code-carbon-box-shadow                      | rgba(0, 0, 0, 0.55) 0 8px 16px | The box-shadow property of the host container.          |
 | --deckgo-highlight-code-carbon-margin                          | 16px 0                         | The margin property of the host container.              |
 | --deckgo-highlight-code-carbon-header-padding                  | 16px                           | The padding property of the card header.                |
+| --deckgo-highlight-code-carbon-header-margin                   | 0                              | The margin property of the card header.                 |
 | --deckgo-highlight-code-carbon-header-button-width             | 12px                           | The width of a button of the card header.               |
 | --deckgo-highlight-code-carbon-header-button-height            | 12px                           | The height of a button of the card header.              |
 | --deckgo-highlight-code-carbon-header-button-border-radius     | 50%                            | The border-radius of a button of the card header.       |

diff --git a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss
@@ -217,8 +217,10 @@ div.carbon {
   display: flex;
   justify-content: flex-start;
   padding: var(--deckgo-highlight-code-carbon-header-padding, 16px);
+  margin: var(--deckgo-highlight-code-carbon-header-margin, 0);
 
   > div {
+    display: var(--deckgo-highlight-code-carbon-toolbar-display, "block");
     width: var(--deckgo-highlight-code-carbon-header-button-width, 12px);
     height: var(--deckgo-highlight-code-carbon-header-button-height, 12px);
     border-radius: var(--deckgo-highlight-code-carbon-header-button-border-radius, 50%);

diff --git a/webcomponents/highlight-code/src/index.html b/webcomponents/highlight-code/src/index.html
@@ -193,6 +193,30 @@ <h1>Without line numbers</h1>
   boolean computeTest(int n);
 }
 
+public static void main(String args[]) {
+  NumericTest isEven = (n) -> (n % 2) == 0;
+  NumericTest isNegative = (n) -> (n < 0);
+
+  // Output: false
+  System.out.println(isEven.computeTest(5));
+
+  // Output: true
+  System.out.println(isNegative.computeTest(-5));
+}</code>
+</deckgo-highlight-code>
+
+    <h1>Without dots</h1>
+
+    <!-- prettier-ignore -->
+    <deckgo-highlight-code 
+      language="java" 
+      highlight-lines="0,2 6,6" 
+      style="--deckgo-highlight-code-carbon-toolbar-display: none; --deckgo-highlight-code-carbon-header-padding: 0; --deckgo-highlight-code-carbon-header-margin: 16px 0 0 0;"
+    >
+  <code slot="code">interface NumericTest {
+    boolean computeTest(int n);
+  }
+
 public static void main(String args[]) {
   NumericTest isEven = (n) -> (n % 2) == 0;
   NumericTest isNegative = (n) -> (n < 0);