alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

updated styles for repl2, styled the play button

Browse Source
This commit is contained in:
Princiya Sequeira
2022-04-27 23:56:10 +02:00
parent 0ac2d4d339
commit 091d109da2
3 changed files with 41 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
pyscriptjs/examples/repl2.html
View File

@@ -10,6 +10,25 @@
<link rel="stylesheet" href="../build/pyscript.css" /> <link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script> <script defer src="../build/pyscript.js"></script>
<style>
#output > div {
font-family: 'monospace';
background-color: #e5e5e5;
border: 1px solid lightgray;
border-top: 0;
font-size: 0.875rem;
padding: 0.5rem;
}
#output > div:first-child {
border-top: 1px solid lightgray;
}
#output > div:nth-child(even) {
border: 0;
}
</style>
</head> </head>
<py-env> <py-env>
@@ -24,9 +43,9 @@
<h1 class="font-semibold text-2xl ml-5">Custom REPL</h1> <h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
<py-box widths="2/3;1/3"> <py-box widths="2/3;1/3">
<py-repl id="my-repl" auto-generate="true" std-out="output" std-err="err-div"> </py-repl> <py-repl id="my-repl" auto-generate="true" std-out="output" std-err="err-div"> </py-repl>
<div id="output"></div> <div id="output" class="p-4"></div>
</py-box> </py-box>
<footer id="err-div" class="bg-red-700 text-white text-center border-t-4 border-gree-500 fixed inset-x-0 bottom-0 p-4 hidden"> <footer id="err-div" class="bg-red-700 text-white text-center border-t-4 border-green-500 fixed inset-x-0 bottom-0 p-4 hidden">
</footer> </footer>
</body> </body>
</html> </html>

10
pyscriptjs/src/App.svelte
View File

@@ -1,13 +1,3 @@
<style>
:global(div.buttons-box) {
margin-top: -25px;
}
:global(.parentBox:hover .buttons-box) {
visibility: visible;
}
</style>
<script lang="ts"> <script lang="ts">
import Tailwind from './Tailwind.svelte'; import Tailwind from './Tailwind.svelte';
import { loadInterpreter } from './interpreter'; import { loadInterpreter } from './interpreter';

41
pyscriptjs/src/components/pyrepl.ts
View File

@@ -103,20 +103,19 @@ export class PyRepl extends BaseEvalElement {
}); });
let mainDiv = document.createElement('div'); let mainDiv = document.createElement('div');
addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "mx-8"]) addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "mx-8", "relative"])
// add Editor to main PyScript div // add Editor to main PyScript div
// Butons DIV // Butons DIV
var eDiv = document.createElement('div'); var eDiv = document.createElement('div');
addClasses(eDiv, "buttons-box opacity-0 group-hover:opacity-100 relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group -mt-2 first-of-type:m-0".split(" ")) addClasses(eDiv, "buttons-box opacity-0 group-hover:opacity-100 relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group relative z-10 top-4".split(" "))
eDiv.setAttribute("role", "group"); eDiv.setAttribute("role", "group");
// Play Button // Play Button
this.btnRun = document.createElement('button'); this.btnRun = document.createElement('button');
this.btnRun.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>'; this.btnRun.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
let buttonClasses = ["mr-2", "block", "py-2", "px-4", "rounded-full"]; let buttonClasses = ["mr-2", "block"];
addClasses(this.btnRun, buttonClasses); addClasses(this.btnRun, buttonClasses);
addClasses(this.btnRun, ["bg-green-500"])
eDiv.appendChild(this.btnRun); eDiv.appendChild(this.btnRun);
this.btnRun.onclick = wrap(this); this.btnRun.onclick = wrap(this);
@@ -129,24 +128,24 @@ export class PyRepl extends BaseEvalElement {
} }
// Settings button // Settings button
this.btnConfig = document.createElement('button'); // this.btnConfig = document.createElement('button');
this.btnConfig.innerHTML = // this.btnConfig.innerHTML =
'<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 512 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(256 256)" transform-origin="128 0"><g transform="translate(0,0) scale(1,1)"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" fill="currentColor" transform="translate(-256 -256)"></path></g></g></svg>'; // '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 512 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(256 256)" transform-origin="128 0"><g transform="translate(0,0) scale(1,1)"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" fill="currentColor" transform="translate(-256 -256)"></path></g></g></svg>';
this.btnConfig.onclick = function toggleNavBar(evt) { // this.btnConfig.onclick = function toggleNavBar(evt) {
console.log('clicked'); // console.log('clicked');
componentDetailsNavOpen.set(!propertiesNavOpen); // componentDetailsNavOpen.set(!propertiesNavOpen);
currentComponentDetails.set([ // currentComponentDetails.set([
{ key: 'auto-generate', value: true }, // { key: 'auto-generate', value: true },
{ key: 'output', value: 'default' }, // { key: 'output', value: 'default' },
{ key: 'source', value: 'self' }, // { key: 'source', value: 'self' },
{ key: 'output-mode', value: 'clear' }, // { key: 'output-mode', value: 'clear' },
]); // ]);
}; // };
addClasses(this.btnConfig, buttonClasses); // addClasses(this.btnConfig, buttonClasses);
addClasses(this.btnConfig, ['bg-blue-500']); // addClasses(this.btnConfig, ['bg-blue-500']);
eDiv.appendChild(this.btnConfig); // eDiv.appendChild(this.btnConfig);
mainDiv.appendChild(eDiv); mainDiv.appendChild(eDiv);
mainDiv.appendChild(this.editorNode); mainDiv.appendChild(this.editorNode);