mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
reorganize UI so with header, footer and left side navbar
This commit is contained in:
Fabio Pliger
@@ -1,11 +1,14 @@
|
||||
<script lang="ts">
|
||||
// import Button from "./Button.svelte";
|
||||
// import Logo from "./Logo.svelte";
|
||||
import Main from "./Main.svelte";
|
||||
import Header from "./Header.svelte";
|
||||
// import Main from "./OldMain.svelte";
|
||||
// import Header from "./OldHeader.svelte";
|
||||
import Tailwind from "./Tailwind.svelte";
|
||||
import { loadInterpreter } from './interpreter';
|
||||
import { pyodideLoaded, loadedEnvironments } from './stores';
|
||||
import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
|
||||
import Main from "./Main.svelte";
|
||||
import Header from "./Header.svelte";
|
||||
import SideNav from "./SideNav.svelte";
|
||||
|
||||
let pyodideReadyPromise
|
||||
const initializePyodide = () =>{
|
||||
@@ -24,6 +27,11 @@
|
||||
});
|
||||
// let environments = loadedEnvironments;
|
||||
// debugger
|
||||
let showNavBar = false;
|
||||
let main = document.querySelector("#main");
|
||||
navBarOpen.subscribe(value => {
|
||||
showNavBar = value;
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -46,9 +54,13 @@
|
||||
|
||||
<Tailwind />
|
||||
|
||||
<div class="min-h-full">
|
||||
<Header />
|
||||
|
||||
<Main />
|
||||
<div class="flex flex-wrap bg-grey-light min-h-screen">
|
||||
<SideNav />
|
||||
|
||||
<div id="main" class="w-full min-h-full absolute pin-r flex flex-col">
|
||||
<Header />
|
||||
<Main />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,165 +1,106 @@
|
||||
<script lang="ts">
|
||||
import Fa from 'svelte-fa'
|
||||
import { faCog } from '@fortawesome/free-solid-svg-icons'
|
||||
import { loadedEnvironments } from './stores';
|
||||
import Fa from 'svelte-fa';
|
||||
import { faCog, faBars, faPlay, faTimes } from '@fortawesome/free-solid-svg-icons'
|
||||
import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
|
||||
|
||||
export let name = "PyScript";
|
||||
export let editMode = true;
|
||||
export let name = "PyScript";
|
||||
|
||||
$: modeLabel = (editMode == true) ? "edit" : "run";
|
||||
let showNavBar = false;
|
||||
navBarOpen.subscribe(value => {
|
||||
showNavBar = value;
|
||||
|
||||
function toggleMode() {
|
||||
editMode = ! editMode;
|
||||
}
|
||||
console.log(showNavBar);
|
||||
toggleSidebar();
|
||||
});
|
||||
|
||||
function addScript(evt){
|
||||
// get the main element
|
||||
const mainEl = document.getElementById("dashboard");
|
||||
const p = document.createElement("py-script");
|
||||
mainEl.appendChild(p);
|
||||
}
|
||||
|
||||
function addInterpreter(evt){
|
||||
console.log("add interpreter");
|
||||
}
|
||||
|
||||
function showSettings(evt){
|
||||
console.log($loadedEnvironments);
|
||||
}
|
||||
|
||||
|
||||
let open = true;
|
||||
function toggleNavBar(evt){
|
||||
navBarOpen.set(!$navBarOpen);
|
||||
}
|
||||
|
||||
|
||||
function toggleSidebar() {
|
||||
let menuSwitch = document.querySelector("#menu-switch"),
|
||||
sidebar = document.querySelector("#sidebar"),
|
||||
main = document.querySelector("#main");
|
||||
|
||||
let classesToApplyForSidebar = {
|
||||
active: [],
|
||||
inactive: ["sidebar-inactive"]
|
||||
},
|
||||
classesToApplyForMain = {
|
||||
active: ["sm:w-2/3", "lg:w-3/4", 'main-squeezed'],
|
||||
inactive: []
|
||||
},
|
||||
classesToApplyForMenuButton = {
|
||||
active: ["fa-times-circle", "text-red-light"],
|
||||
inactive: ["fa-bars"]
|
||||
};
|
||||
|
||||
// let isMenuActive = menuSwitch.getAttribute("data-menu-active") === "true";
|
||||
|
||||
if (!menuSwitch){
|
||||
return;
|
||||
}
|
||||
if (!showNavBar) {
|
||||
// menuSwitch.setAttribute("data-menu-active", null);
|
||||
|
||||
menuSwitch.children[0].classList.remove(
|
||||
...classesToApplyForMenuButton.active
|
||||
);
|
||||
menuSwitch.children[0].classList.add(
|
||||
...classesToApplyForMenuButton.inactive
|
||||
);
|
||||
|
||||
sidebar.classList.remove(...classesToApplyForSidebar.active);
|
||||
sidebar.classList.add(...classesToApplyForSidebar.inactive);
|
||||
|
||||
main.classList.remove(...classesToApplyForMain.active);
|
||||
main.classList.add(...classesToApplyForMain.inactive);
|
||||
} else {
|
||||
// menuSwitch.setAttribute("data-menu-active", true);
|
||||
|
||||
menuSwitch.children[0].classList.add(
|
||||
...classesToApplyForMenuButton.active
|
||||
);
|
||||
menuSwitch.children[0].classList.remove(
|
||||
...classesToApplyForMenuButton.inactive
|
||||
);
|
||||
|
||||
sidebar.classList.add(...classesToApplyForSidebar.active);
|
||||
sidebar.classList.remove(...classesToApplyForSidebar.inactive);
|
||||
|
||||
main.classList.add(...classesToApplyForMain.active);
|
||||
main.classList.remove(...classesToApplyForMain.inactive);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- <img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow"> -->
|
||||
<label class="text-gray-300">{name}</label>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="ml-10 flex items-baseline space-x-4">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
|
||||
<style>
|
||||
:global(div.main-squeezed) {
|
||||
transform: translateX(33.3333%);
|
||||
}
|
||||
|
||||
<a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" on:click={addScript}>+ Script</a>
|
||||
:global(.logo-title){
|
||||
font-family: FreeMono, monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" on:click={addInterpreter}>+ Interpreter</a>
|
||||
|
||||
<!-- <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<aside id="navbar" class="flex flex-column w-full text-lg p-6 bg-grey-lighter shadow-md slow-moves">
|
||||
<button id="menu-switch" class="focus:outline-none" on:click={toggleNavBar}>
|
||||
<div class:hidden={showNavBar}>
|
||||
<Fa icon={faBars} />
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
|
||||
<label class="text-gray-300" on:click={toggleMode}>Mode: { modeLabel }</label>
|
||||
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div class="ml-3 relative">
|
||||
<button type="button" on:click={showSettings} class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||
<span class="sr-only">View notifications</span>
|
||||
<!-- Settings Icon -->
|
||||
<Fa icon={faCog} />
|
||||
</button>
|
||||
|
||||
<!-- <div>
|
||||
<button type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
<!--
|
||||
Dropdown menu, show/hide based on menu state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"> -->
|
||||
<!-- Active: "bg-gray-100", Not Active: "" -->
|
||||
<!-- <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
|
||||
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
|
||||
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class:hidden={!showNavBar}>
|
||||
<Fa icon={faTimes} color="red" />
|
||||
</div>
|
||||
<div class="-mr-2 flex md:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!--
|
||||
Heroicon name: outline/menu
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<!--
|
||||
Heroicon name: outline/x
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<p class="w-full logo-title text-center">{name}</p>
|
||||
<div class="flex flex-column">
|
||||
<button class="mr-6">
|
||||
<Fa icon={faPlay} color="black" />
|
||||
</button>
|
||||
<button class="">
|
||||
<Fa icon={faCog} color="black" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="md:hidden" id="mobile-menu">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">+ Script</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">+ Interpreter</a>
|
||||
|
||||
<!-- <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a> -->
|
||||
</div>
|
||||
<div class="pt-4 pb-3 border-t border-gray-700">
|
||||
<div class="flex items-center px-5">
|
||||
<!-- <div class="flex-shrink-0">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
|
||||
<div class="text-sm font-medium leading-none text-gray-400">tom@example.com</div>
|
||||
</div> -->
|
||||
<button type="button" class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||
<span class="sr-only">View notifications</span>
|
||||
<!-- Heroicon name: outline/bell -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class="mt-3 px-2 space-y-1">
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
|
||||
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
|
||||
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
@@ -1,33 +1,28 @@
|
||||
<script lang="ts">
|
||||
import {EditorState, EditorView , basicSetup} from "@codemirror/basic-setup"
|
||||
|
||||
import { python } from "@codemirror/lang-python"
|
||||
import { keymap } from "@codemirror/view";
|
||||
import { defaultKeymap } from "@codemirror/commands";
|
||||
import { oneDarkTheme } from "@codemirror/theme-one-dark";
|
||||
|
||||
import Fa from 'svelte-fa';
|
||||
import { faWandMagic, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
</script>
|
||||
<header class="bg-white shadow">
|
||||
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
<!-- Replace with your content -->
|
||||
<div class="px-4 py-6 sm:px-0">
|
||||
<div id="dashboard" class="border-4 border-dashed border-gray-200 rounded-lg h-96">
|
||||
<py-repl>
|
||||
<py-script auto-generate target="page:mydiv" source='./mycode.py'>
|
||||
sum([1, 2, 3, 4, 5])
|
||||
</py-script>
|
||||
</py-repl>
|
||||
</div>
|
||||
|
||||
<div class="flex content-between flex-wrap min-h-full flex-grow">
|
||||
<main class="w-full p-6">
|
||||
|
||||
<div role="alert" class="w-full p-2 rounded-full bg-teal-light text-teal-darker text-lg">
|
||||
<py-script auto-generate target="page:mydiv" source='./mycode.py'>
|
||||
sum([1, 2, 3, 4, 5])
|
||||
</py-script>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="w-full p-6 bg-black text-white flex space-between">
|
||||
<p class="logo-title text-center">PyScript</p>
|
||||
<p class="w-full ml-6 text-center sm:text-left">Copyright © 2019</p>
|
||||
|
||||
<!-- /End replace -->
|
||||
</div>
|
||||
</main>
|
||||
<aside class="w-full sm:w-auto text-center sm:text-right">
|
||||
<a href="https://github.com/SlawomirChabowski" title="My Github page" class="text-white block">
|
||||
<Fa icon={faInfoCircle} style="transform: scale(2);"/>
|
||||
</a>
|
||||
</aside>
|
||||
</footer>
|
||||
</div>
|
||||
66
pyscriptjs/src/SideNav.svelte
Normal file
66
pyscriptjs/src/SideNav.svelte
Normal file
@@ -0,0 +1,66 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
|
||||
|
||||
|
||||
// let menuSwitch = document.querySelector("#menu-switch"),
|
||||
// sidebar = document.querySelector("#sidebar"),
|
||||
// main = document.querySelector("#main");
|
||||
let showNavBar = false;
|
||||
navBarOpen.subscribe(value => {
|
||||
showNavBar = value;
|
||||
|
||||
console.log(showNavBar);
|
||||
});
|
||||
console.log("showNav");
|
||||
console.log(showNavBar);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:global(div.slow-moves) {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.sidebar-inactive {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<nav id="sidebar" class="fixed z-10 pin-y bg-grey-lightest shadow-md w-full slow-moves sm:w-1/3 lg:w-1/4" class:sidebar-inactive="{ !showNavBar }">
|
||||
|
||||
<h1 class="text-lg p-6 bg-grey-lighter border-grey-light border-b text-grey-darkest">Components Catalog</h1>
|
||||
|
||||
<ul class="list-reset">
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-grip-horizontal"></span>
|
||||
REPL
|
||||
</a>
|
||||
</li>
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-newspaper"></span>
|
||||
Script
|
||||
</a>
|
||||
</li>
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-ellipsis-h"></span>
|
||||
Console
|
||||
</a>
|
||||
</li>
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-envelope"></span>
|
||||
Div
|
||||
</a>
|
||||
</li>
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-cogs"></span>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -15,4 +15,6 @@ export const pyodideReadyPromise = promisable(
|
||||
loadInterpreter,
|
||||
// shouldRefreshPromise, // optional, but recommended
|
||||
);
|
||||
|
||||
export const navBarOpen = writable(false);
|
||||
|
||||
Reference in New Issue
Block a user