mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
updated styles for repl2, styled the play button
This commit is contained in:
Princiya Sequeira
@@ -10,6 +10,25 @@
|
||||
<link rel="stylesheet" href="../build/pyscript.css" />
|
||||
|
||||
<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>
|
||||
|
||||
<py-env>
|
||||
@@ -24,9 +43,9 @@
|
||||
<h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
|
||||
<py-box widths="2/3;1/3">
|
||||
<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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
<style>
|
||||
:global(div.buttons-box) {
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
:global(.parentBox:hover .buttons-box) {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import Tailwind from './Tailwind.svelte';
|
||||
import { loadInterpreter } from './interpreter';
|
||||
|
||||
@@ -103,20 +103,19 @@ export class PyRepl extends BaseEvalElement {
|
||||
});
|
||||
|
||||
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
|
||||
|
||||
// Butons 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");
|
||||
|
||||
// Play 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>';
|
||||
let buttonClasses = ["mr-2", "block", "py-2", "px-4", "rounded-full"];
|
||||
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"];
|
||||
addClasses(this.btnRun, buttonClasses);
|
||||
addClasses(this.btnRun, ["bg-green-500"])
|
||||
eDiv.appendChild(this.btnRun);
|
||||
|
||||
this.btnRun.onclick = wrap(this);
|
||||
@@ -129,24 +128,24 @@ export class PyRepl extends BaseEvalElement {
|
||||
}
|
||||
|
||||
// Settings button
|
||||
this.btnConfig = document.createElement('button');
|
||||
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>';
|
||||
this.btnConfig.onclick = function toggleNavBar(evt) {
|
||||
console.log('clicked');
|
||||
componentDetailsNavOpen.set(!propertiesNavOpen);
|
||||
// this.btnConfig = document.createElement('button');
|
||||
// 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>';
|
||||
// this.btnConfig.onclick = function toggleNavBar(evt) {
|
||||
// console.log('clicked');
|
||||
// componentDetailsNavOpen.set(!propertiesNavOpen);
|
||||
|
||||
currentComponentDetails.set([
|
||||
{ key: 'auto-generate', value: true },
|
||||
{ key: 'output', value: 'default' },
|
||||
{ key: 'source', value: 'self' },
|
||||
{ key: 'output-mode', value: 'clear' },
|
||||
]);
|
||||
};
|
||||
// currentComponentDetails.set([
|
||||
// { key: 'auto-generate', value: true },
|
||||
// { key: 'output', value: 'default' },
|
||||
// { key: 'source', value: 'self' },
|
||||
// { key: 'output-mode', value: 'clear' },
|
||||
// ]);
|
||||
// };
|
||||
|
||||
addClasses(this.btnConfig, buttonClasses);
|
||||
addClasses(this.btnConfig, ['bg-blue-500']);
|
||||
eDiv.appendChild(this.btnConfig);
|
||||
// addClasses(this.btnConfig, buttonClasses);
|
||||
// addClasses(this.btnConfig, ['bg-blue-500']);
|
||||
// eDiv.appendChild(this.btnConfig);
|
||||
|
||||
mainDiv.appendChild(eDiv);
|
||||
mainDiv.appendChild(this.editorNode);
|
||||
|
||||
Reference in New Issue
Block a user