mirror of
https://github.com/wailsapp/wails.git
synced 2026-03-14 14:45:49 +01:00
WIP
This commit is contained in:
Lea Anthony
parent
4f7e2128d1
commit
665dfa6aee
13 changed files with 89 additions and 1348 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -24,3 +24,4 @@ v2/test/frameless/icon.png
|
|||
v2/test/hidden/icon.png
|
||||
v2/internal/ffenestri/runtime.c
|
||||
v2/internal/runtime/assets/desktop.js
|
||||
v2/test/kitchensink/frontend/public/bundle.*
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"version": 3,
|
||||
"file": "bundle.css",
|
||||
"sources": [
|
||||
"../App.svelte",
|
||||
"../Events.svelte",
|
||||
"../Logging.svelte",
|
||||
"../MainPage.svelte",
|
||||
"../TitlePage.svelte"
|
||||
],
|
||||
"sourcesContent": [
|
||||
"\n<script>\n\n import runtime from '@wailsapp/runtime2';\n import { selectedPage } from './Store';\n import MainPage from './MainPage.svelte';\n import Events from './Events.svelte';\n\n // Handle Dark/Light themes automatically\n var darkMode = runtime.System.DarkModeEnabled();\n runtime.System.OnThemeChange( (isDarkMode) => {\n darkMode = isDarkMode;\n });\n\n function linkClicked(event) {\n let linkText = event.target.innerText;\n selectedPage.set(linkText); \n console.log(event.target.innerText);\n }\n\n function homepageClicked() {\n selectedPage.set(null); \n }\n\n let runtimePages = [\n 'Logging',\n 'Events',\n 'Calls',\n 'Dialog',\n 'Browser',\n 'File System',\n 'Window',\n ];\n\n</script>\n\n<div data-wails-drag class=\"page-wrapper with-sidebar\" class:dark-mode=\"{darkMode}\" data-sidebar-type=\"full-height\" >\n <!-- Sticky alerts (toasts), empty container -->\n <div class=\"sticky-alerts\"></div>\n <!-- Sidebar -->\n <div class=\"sidebar noselect\">\n <div data-wails-no-drag class=\"sidebar-menu\">\n <!-- Sidebar brand -->\n <div on:click=\"{ homepageClicked }\" class=\"sidebar-brand\"> \n Wails Kitchen Sink\n </div>\n <!-- Sidebar links and titles -->\n <h5 class=\"sidebar-title\">Runtime</h5>\n <div class=\"sidebar-divider\"></div>\n {#each runtimePages as link}\n <span on:click=\"{linkClicked}\" class=\"sidebar-link\" class:active=\"{$selectedPage == link}\">{link}</span> \n {/each}\n <br />\n <h5 class=\"sidebar-title\">Links</h5>\n <div class=\"sidebar-divider\"></div>\n <span on:click=\"{linkClicked}\" class=\"sidebar-link\">Github</span>\n <span on:click=\"{linkClicked}\" class=\"sidebar-link\">Website</span>\n </div>\n </div>\n <!-- Content wrapper -->\n <div class=\"content-wrapper\" class:dark-content-wrapper=\"{darkMode}\">\n <MainPage></MainPage>\n </div>\n</div>\n\n\n<style global>\n @import 'halfmoon/css/halfmoon-variables.min.css';\n\n :global(:root) {\n --lm-base-body-bg-color: #0000;\n --dm-base-body-bg-color: #0000;\n --lm-sidebar-bg-color: #0000;\n --dm-sidebar-bg-color: #0000;\n --dm-sidebar-link-text-color: white;\n --dm-sidebar-link-text-color-hover: rgb(255, 214, 0);\n --lm-sidebar-link-text-color: black;\n --lm-sidebar-link-text-color-hover: rgb(158, 158, 255);\n\n --dm-sidebar-link-text-color-active: rgb(255, 214, 0);\n --dm-sidebar-link-text-color-active-hover: rgb(255, 214, 0);\n\n --sidebar-title-font-size: 1.75rem;\n --sidebar-brand-font-size: 2.3rem;\n }\n\n :global(.sidebar-link) {\n font-weight: bold;\n cursor: pointer;\n }\n\n :global(.content-wrapper) {\n background-color: #eee;\n }\n\n :global(.dark-content-wrapper) {\n background-color: #25282c;\n }\n/* \n .sidebar {\n background-color: #0000;\n } */\n\n :global(.sidebar-brand) {\n padding-top: 35px;\n padding-bottom: 25px;\n cursor: pointer;\n }\n\n :global(.sidebar-menu) {\n background-color: #0000;\n }\n\n /* Credit: https://stackoverflow.com/a/4407335 */\n :global(.noselect) {\n cursor: default;\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Old versions of Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently\n supported by Chrome, Edge, Opera and Firefox */\n }\n</style>\n",
|
||||
"<script>\n\n import runtime from '@wailsapp/runtime2';\n import { Highlight } from \"svelte-highlight\";\n import { typescript } from \"svelte-highlight/languages\";\n import { atomOneDark, atomOneLight } from \"svelte-highlight/styles\";\n\n let css = runtime.System.DarkModeEnabled() ? atomOneDark : atomOneLight;\n $: code = `const add = (a: number, b: number) => a + b;`;\n\n runtime.System.OnThemeChange( (isDarkMode) => {\n css = isDarkMode ? atomOneDark : atomOneLight;\n });\n</script>\n\n<svelte:head>\n {@html css}\n</svelte:head>\n\n<div class=\"page\">\n <h4>Events</h4>\n\n<Highlight language=\"{typescript}\" {code} />\n Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are 5 methods available:\n \n <ul class=\"list\">\n <li>Debug</li>\n <li>Info</li>\n <li>Warning</li>\n <li>Error</li>\n <li>Fatal</li>\n </ul>\n All methods will log to the console and <code>Fatal</code> will also exit the program.\n\n <h5>Try Me</h5>\n <hr>\n <div class=\"logging-form\">\n </div>\n</div>\n\n<style>\n .page {\n margin-left: 50px;\n margin-top: 10px;\n }\n\n h5 {\n margin-top: 3rem;\n }\n</style>",
|
||||
"<script>\n\n import { Log } from '@wailsapp/runtime2';\n\n var loglevel = 'Debug';\n var message = '';\n\n var options = [\"Debug\", \"Info\", \"Warning\", \"Error\", \"Fatal\"];\n\n function sendLogMessage() {\n if( message.length > 0 ) {\n Log[loglevel](message);\n }\n }\n\n</script>\n<div class=\"page\">\n <h4>Logging</h4>\n\n Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are 5 methods available:\n \n <ul class=\"list\">\n <li>Debug</li>\n <li>Info</li>\n <li>Warning</li>\n <li>Error</li>\n <li>Fatal</li>\n </ul>\n All methods will log to the console and <code>Fatal</code> will also exit the program.\n\n <h5>Try Me</h5>\n <hr>\n <div class=\"logging-form\">\n <form data-wails-no-drag class=\"w-400 mw-full\"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->\n <!-- Radio -->\n <div class=\"form-group\">\n <label for=\"Debug\">Log Level</label>\n {#each options as option}\n <div class=\"custom-radio\">\n <input type=\"radio\" name=\"logging\" bind:group=\"{loglevel}\" id=\"{option}\" value=\"{option}\">\n <label for=\"{option}\">{option}</label>\n </div> \n {/each}\n </div>\n\n <!-- Input -->\n <div class=\"form-group\">\n <label for=\"message\" class=\"required\">Message</label>\n <input type=\"text\" class=\"form-control\" id=\"message\" placeholder=\"Hello World!\" bind:value=\"{message}\" required=\"required\">\n </div>\n\n <input class=\"btn btn-primary\" type=\"submit\" on:click=\"{sendLogMessage}\" value=\"Run!\">\n </form>\n </div>\n</div>\n\n<style>\n .page {\n margin-left: 50px;\n margin-top: 10px;\n }\n .logging-form {\n margin-top: 2rem;\n }\n .list {\n margin-top: 2rem;\n margin-left: 2rem;\n }\n\n .list li {\n margin-bottom: 0.5rem;\n }\n\n h5 {\n margin-top: 3rem;\n }\n</style>",
|
||||
"<script>\n\n import {selectedPage} from './Store';\n import TitlePage from './TitlePage.svelte';\n import Logging from './Logging.svelte';\n import Events from './Events.svelte';\n\n</script>\n\n<div class=\"mainpage\">\n {#if $selectedPage == undefined} <TitlePage ></TitlePage> {/if}\n {#if $selectedPage == \"Logging\"} <Logging></Logging> {/if}\n {#if $selectedPage == \"Events\"} <Events></Events> {/if}\n</div>\n\n<style>\n .mainpage {\n margin-top: 55px;\n margin-left: 25px;\n }\n h3 {\n margin-left: 20px;\n }\n</style>",
|
||||
"\n<div class=\"mainpage\">\n <h2>Wails Kitchen Sink</h2>\n\n This application is a demonstation of the capabilities of Wails.\n</div>\n\n<style>\n .mainpage {\n text-align: center;\n }\n</style>"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": "AAmEE,QAAQ,yCAAyC,CAAC,AAE1C,KAAK,AAAE,CAAC,AACd,uBAAuB,CAAE,KAAK,CAC9B,uBAAuB,CAAE,KAAK,CAC9B,qBAAqB,CAAE,KAAK,CAC5B,qBAAqB,CAAE,KAAK,CAC5B,4BAA4B,CAAE,KAAK,CACnC,kCAAkC,CAAE,gBAAgB,CACpD,4BAA4B,CAAE,KAAK,CACnC,kCAAkC,CAAE,kBAAkB,CAEtD,mCAAmC,CAAE,gBAAgB,CACrD,yCAAyC,CAAE,gBAAgB,CAE3D,yBAAyB,CAAE,OAAO,CAClC,yBAAyB,CAAE,MAAM,AACnC,CAAC,AAEO,aAAa,AAAE,CAAC,AACtB,WAAW,CAAE,IAAI,CACjB,MAAM,CAAE,OAAO,AACjB,CAAC,AAEO,gBAAgB,AAAE,CAAC,AACzB,gBAAgB,CAAE,IAAI,AACxB,CAAC,AAEO,qBAAqB,AAAE,CAAC,AAC9B,gBAAgB,CAAE,OAAO,AAC3B,CAAC,AAMO,cAAc,AAAE,CAAC,AACvB,WAAW,CAAE,IAAI,CACjB,cAAc,CAAE,IAAI,CACpB,MAAM,CAAE,OAAO,AACjB,CAAC,AAEO,aAAa,AAAE,CAAC,AACtB,gBAAgB,CAAE,KAAK,AACzB,CAAC,AAGO,SAAS,AAAE,CAAC,AACH,MAAM,CAAE,OAAO,CAC9B,qBAAqB,CAAE,IAAI,CACzB,mBAAmB,CAAE,IAAI,CACxB,kBAAkB,CAAE,IAAI,CACtB,gBAAgB,CAAE,IAAI,CACrB,eAAe,CAAE,IAAI,CACjB,WAAW,CAAE,IAAI,AAE7B,CAAC;AClFC,KAAK,cAAC,CAAC,AACH,WAAW,CAAE,IAAI,CACjB,UAAU,CAAE,IAAI,AACpB,CAAC,AAED,EAAE,cAAC,CAAC,AACA,UAAU,CAAE,IAAI,AACpB,CAAC;ACSD,KAAK,8BAAC,CAAC,AACH,WAAW,CAAE,IAAI,CACjB,UAAU,CAAE,IAAI,AACpB,CAAC,AACD,aAAa,8BAAC,CAAC,AACX,UAAU,CAAE,IAAI,AACpB,CAAC,AACD,KAAK,8BAAC,CAAC,AACH,UAAU,CAAE,IAAI,CAChB,WAAW,CAAE,IAAI,AACrB,CAAC,AAED,oBAAK,CAAC,EAAE,eAAC,CAAC,AACN,aAAa,CAAE,MAAM,AACzB,CAAC,AAED,EAAE,8BAAC,CAAC,AACA,UAAU,CAAE,IAAI,AACpB,CAAC;AC3DD,SAAS,eAAC,CAAC,AACP,UAAU,CAAE,IAAI,CAChB,WAAW,CAAE,IAAI,AACrB,CAAC;ACXD,SAAS,cAAC,CAAC,AACP,UAAU,CAAE,MAAM,AACtB,CAAC"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -4,14 +4,17 @@
|
|||
import runtime from '@wailsapp/runtime2';
|
||||
import { selectedPage } from './Store';
|
||||
import MainPage from './MainPage.svelte';
|
||||
import Events from './Events.svelte';
|
||||
|
||||
|
||||
// Handle Dark/Light themes automatically
|
||||
var darkMode = runtime.System.DarkModeEnabled();
|
||||
runtime.System.OnThemeChange( (isDarkMode) => {
|
||||
darkMode = isDarkMode;
|
||||
});
|
||||
|
||||
// Hightlight CSS
|
||||
import { atomOneDark, atomOneLight } from "svelte-highlight/styles";
|
||||
$: css = darkMode ? atomOneDark : atomOneLight;
|
||||
|
||||
function linkClicked(event) {
|
||||
let linkText = event.target.innerText;
|
||||
selectedPage.set(linkText);
|
||||
|
|
@ -34,6 +37,10 @@
|
|||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{@html css}
|
||||
</svelte:head>
|
||||
|
||||
<div data-wails-drag class="page-wrapper with-sidebar" class:dark-mode="{darkMode}" data-sidebar-type="full-height" >
|
||||
<!-- Sticky alerts (toasts), empty container -->
|
||||
<div class="sticky-alerts"></div>
|
||||
|
|
@ -58,7 +65,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- Content wrapper -->
|
||||
<div class="content-wrapper" class:dark-content-wrapper="{darkMode}">
|
||||
<div class="content-wrapper noselect" class:dark-content-wrapper="{darkMode}">
|
||||
<MainPage></MainPage>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,6 +89,14 @@
|
|||
|
||||
--sidebar-title-font-size: 1.75rem;
|
||||
--sidebar-brand-font-size: 2.3rem;
|
||||
|
||||
/* Switch */
|
||||
--dm-switch-bg-color: rgb(28,173,213);
|
||||
--lm-switch-bg-color: rgb(28,173,213);
|
||||
--dm-switch-bg-color-checked: rgb(239,218,91);
|
||||
--lm-switch-bg-color-checked: rgb(239,218,91);
|
||||
--lm-switch-slider-bg-color: #FFF;
|
||||
--dm-switch-slider-bg-color: #FFF;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
<script>
|
||||
|
||||
import runtime from '@wailsapp/runtime2';
|
||||
import { Highlight } from "svelte-highlight";
|
||||
import { typescript } from "svelte-highlight/languages";
|
||||
import { atomOneDark, atomOneLight } from "svelte-highlight/styles";
|
||||
|
||||
let css = runtime.System.DarkModeEnabled() ? atomOneDark : atomOneLight;
|
||||
$: code = `const add = (a: number, b: number) => a + b;`;
|
||||
|
||||
runtime.System.OnThemeChange( (isDarkMode) => {
|
||||
css = isDarkMode ? atomOneDark : atomOneLight;
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{@html css}
|
||||
</svelte:head>
|
||||
|
||||
<div class="page">
|
||||
<h4>Events</h4>
|
||||
|
||||
<Highlight language="{typescript}" {code} />
|
||||
Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are 5 methods available:
|
||||
|
||||
<ul class="list">
|
||||
<li>Debug</li>
|
||||
<li>Info</li>
|
||||
<li>Warning</li>
|
||||
<li>Error</li>
|
||||
<li>Fatal</li>
|
||||
</ul>
|
||||
All methods will log to the console and <code>Fatal</code> will also exit the program.
|
||||
|
||||
<h5>Try Me</h5>
|
||||
<hr>
|
||||
<div class="logging-form">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
margin-left: 50px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
|
||||
import {selectedPage} from './Store';
|
||||
import TitlePage from './TitlePage.svelte';
|
||||
import Logging from './Logging.svelte';
|
||||
import Events from './Events.svelte';
|
||||
import TitlePage from './pages/TitlePage.svelte';
|
||||
import Logging from './pages/Logging.svelte';
|
||||
import Events from './pages/Events.svelte';
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -15,10 +15,8 @@
|
|||
|
||||
<style>
|
||||
.mainpage {
|
||||
margin-top: 55px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
h3 {
|
||||
margin-left: 20px;
|
||||
margin-top: 60px;
|
||||
margin-left: 45px;
|
||||
margin-right: 45px;
|
||||
}
|
||||
</style>
|
||||
41
v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
Normal file
41
v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
|
||||
<script>
|
||||
import { Highlight } from "svelte-highlight";
|
||||
import { go, javascript } from "svelte-highlight/languages";
|
||||
let isJs = false;
|
||||
$: lang = isJs ? javascript : go;
|
||||
export let jsCode = "Hi form JS!";
|
||||
export let goCode = "Hi form Go!";
|
||||
|
||||
$: code = isJs ? jsCode : goCode;
|
||||
</script>
|
||||
|
||||
<div data-wails-no-drag class="code">
|
||||
<div class="header">
|
||||
<span>Title</span>
|
||||
<span class="toggle">
|
||||
<span>Go</span>
|
||||
<span class="custom-switch">
|
||||
<input type="checkbox" id="languageToggle" value="" bind:checked={isJs}>
|
||||
<label for="languageToggle">Javascript</label>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<Highlight language="{lang}" {code} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.header {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.custom-switch {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
</style>
|
||||
21
v2/test/kitchensink/frontend/src/pages/Events.svelte
Normal file
21
v2/test/kitchensink/frontend/src/pages/Events.svelte
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script>
|
||||
|
||||
import CodeBlock from '../components/CodeBlock.svelte';
|
||||
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<h4>Events</h4>
|
||||
|
||||
Events are......
|
||||
|
||||
<h5>Try Me</h5>
|
||||
<hr>
|
||||
<CodeBlock></CodeBlock>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h5 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
</script>
|
||||
<div class="page">
|
||||
<div>
|
||||
<h4>Logging</h4>
|
||||
|
||||
Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are 5 methods available:
|
||||
|
|
@ -55,10 +55,6 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
margin-left: 50px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.logging-form {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
|
@ -20,8 +20,7 @@ func main() {
|
|||
Mac: &mac.Options{
|
||||
WebviewIsTransparent: true,
|
||||
WindowBackgroundIsTranslucent: true,
|
||||
// TitleBar: mac.TitleBarHiddenInset(),
|
||||
TitleBar: mac.TitleBarHiddenInset(),
|
||||
TitleBar: mac.TitleBarHiddenInset(),
|
||||
},
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue