Add open with processing to examples

Stefterv · Stefterv · commit 681a676fb7d0 · 2025-01-26T22:04:04.000+01:00
diff --git a/src/components/CopyButton.module.css b/src/components/CopyButton.module.css
@@ -1,6 +1,4 @@
 .root {
-  position: absolute;
-  right: var(--gutter);
   height: 32px;
   padding: 6px 12px;
   font-size: var(--text-small);
diff --git a/src/components/OpenWithButton.js b/src/components/OpenWithButton.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import ProcessingIcon from '../images/logo-processing.svg';
+
+import * as css from './CopyButton.module.css';
+
+const OpenWithButton = ({ text }) => {
+    const openWithProcessing = () => {
+        window.open('pde://sketch/base64/' + btoa(text));
+    };
+
+    return (
+        <button
+            type="button"
+            onClick={openWithProcessing}
+            className={classnames(css.root)}
+        >
+            <ProcessingIcon /> {'Open With Processing'}
+        </button>
+    )
+}
+
+export default OpenWithButton;
diff --git a/src/components/OpenWithButton.module.css b/src/components/OpenWithButton.module.css
@@ -0,0 +1,24 @@
+.root {
+  height: 32px;
+  padding: 6px 12px;
+  font-size: var(--text-small);
+  font-weight: bold;
+  color: var(--darkgray);
+  cursor: pointer;
+  fill: var(--darkgray);
+
+  & svg {
+    height: 12px;
+    width: auto;
+  }
+}
+
+.root:hover {
+  color: var(--darkergray);
+  fill: var(--darkergray);
+}
+
+.root:active {
+  color: var(--processing-blue-mid);
+  fill: var(--processing-blue-mid);
+}
diff --git a/src/components/Tabs.js b/src/components/Tabs.js
@@ -3,6 +3,7 @@ import classnames from 'classnames';
 
 import Button from './Button';
 import CopyButton from './CopyButton';
+import OpenWithButton from './OpenWithButton';
 
 import { useHighlight } from '../hooks';
 import { escapeHtml } from '../utils';
@@ -40,7 +41,10 @@ const Tabs = ({ pdes, className }) => {
             [css.activeCode]: pde.name === active
           })}
           key={key}>
-          <CopyButton text={pde.code} />
+          <div className={css.actions}>
+            <CopyButton text={pde.code} />
+            <OpenWithButton text={pde.code} />
+          </div>
           <pre className={css.codeBlock}>
             <code
               dangerouslySetInnerHTML={{
diff --git a/src/components/Tabs.module.css b/src/components/Tabs.module.css
@@ -37,3 +37,8 @@
   padding-bottom: var(--gutter-double);
   white-space: break-spaces;
 }
+
+.actions{
+  position: absolute;
+  right: var(--gutter);
+}

Original file line number	Diff line number	Diff line change
`@@ -37,3 +37,8 @@`
`37`	`37`	`padding-bottom: var(--gutter-double);`
`38`	`38`	`white-space: break-spaces;`
`39`	`39`	`}`
	`40`	`+`
	`41`	`+.actions{`
	`42`	`+ position: absolute;`
	`43`	`+ right: var(--gutter);`
	`44`	`+}`