Improved CodeBlock. Dark mode to store.

2026-04-14 10:50:53 -07:00 · 2020-10-08 20:51:14 +11:00
parent c10e8788d8
commit 256e84c4d4
8 changed files with 225 additions and 110 deletions
--- a/v2/test/kitchensink/frontend/src/App.svelte
+++ b/v2/test/kitchensink/frontend/src/App.svelte
@@ -1,19 +1,12 @@

 <script>

-  import runtime from '@wailsapp/runtime2';
-  import { selectedPage } from './Store';
+  import { darkMode, selectedPage } from './Store';
  import MainPage from './MainPage.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;
+  $: css = $darkMode ? atomOneDark : atomOneLight;

  function linkClicked(event) {
    let linkText = event.target.innerText;
@@ -41,7 +34,7 @@
  {@html css}
 </svelte:head>

-<div data-wails-drag class="page-wrapper with-sidebar" class:dark-mode="{darkMode}" data-sidebar-type="full-height" >
+<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>
  <!-- Sidebar -->
@@ -65,9 +58,11 @@
    </div>
  </div>
  <!-- Content wrapper -->
-  <div class="content-wrapper noselect" class:dark-content-wrapper="{darkMode}">
-    <MainPage></MainPage>
-  </div>
+    <div class="content-wrapper noselect" class:dark-content-wrapper="{$darkMode}">
+      <div class="inner-content">
+        <MainPage></MainPage>
+      </div>
+    </div>
 </div>


@@ -99,13 +94,45 @@
    --dm-switch-slider-bg-color: #FFF;
  }

+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(128,128,128,.25);
+    border: 2px solid transparent;
+    border-radius: 10px;
+    background-clip: padding-box;
+  }
+
+  &:hover {
+    background-color: rgba(128,128,128,.5);
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: rgba(128,128,128,.05);
+  }
+
  .sidebar-link {
    font-weight: bold;
    cursor: pointer;
  }

+  .rhs {
+    background-color: #333;
+  }
+
+  .inner-content {
+    position: absolute;
+    top: 40px;
+    bottom: 40px;
+    width: 99%;
+    overflow-y: auto;
+  }
+
  .content-wrapper {
-    background-color: #eee;
+    overflow: hidden;
  }

  .dark-content-wrapper {
@@ -137,4 +164,13 @@
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }
+  .allow-select {
+    -webkit-touch-callout: initial; /* iOS Safari */
+      -webkit-user-select: initial; /* Safari */
+       -khtml-user-select: initial; /* Konqueror HTML */
+         -moz-user-select: initial; /* Old versions of Firefox */
+          -ms-user-select: initial; /* Internet Explorer/Edge */
+              user-select: initial; /* Non-prefixed version, currently
+                                    supported by Chrome, Edge, Opera and Firefox */
+  }
 </style>
--- a/v2/test/kitchensink/frontend/src/MainPage.svelte
+++ b/v2/test/kitchensink/frontend/src/MainPage.svelte
@@ -15,9 +15,9 @@

 <style>
    .mainpage {
-        margin-top: 60px;
        margin-left: 45px;
        margin-right: 45px;
-        margin-bottom: 60px;
+        margin-top: 20px;
+        margin-bottom: 20px;
    }
 </style>
--- a/v2/test/kitchensink/frontend/src/Store.js
+++ b/v2/test/kitchensink/frontend/src/Store.js
@@ -1,3 +1,11 @@
 import { writable } from 'svelte/store';
+import runtime from '@wailsapp/runtime2';

-export let selectedPage = writable();
+export let selectedPage = writable();
+
+export let darkMode = writable(runtime.System.DarkModeEnabled());
+
+// Handle Dark/Light themes automatically
+runtime.System.OnThemeChange( (isDarkMode) => {
+    darkMode.set(isDarkMode);
+});
--- a/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
+++ b/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
@@ -1,10 +1,15 @@

 <script>
+    import { darkMode } from '../Store';
+
    import { Highlight } from "svelte-highlight";
    import { go, javascript } from "svelte-highlight/languages";
    
    // Default to Go
    export let isJs = false;
+
+    export let title;
+    export let description;
    
    // Calculate CSS to use
    $: lang = isJs ? javascript : go;
@@ -15,27 +20,55 @@
    $: code = isJs ? jsCode : goCode;

    // Handle hiding example
-    let hidden = false;
+    let showCode = true;

    function toggleExample() {
-        hidden = !hidden;
+        showCode = !showCode;
+    }   
+    
+    // Handle hiding example
+    let showRun = true;
+
+    function toggleRun() {
+        showRun = !showRun;
    }
 </script>

-<div data-wails-no-drag class="codeblock">
+<div data-wails-no-drag class={$darkMode ? "codeblock" : "codeblock-light"}>
    <div class="header">
-        <span on:click="{toggleExample}">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 class="title">{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>
-        </span>
+        {#if description}
+        <div class="description">{description}</div>
+        {/if}
+    </div>
+    <div class="example"> 
+        <div class="{showCode ? 'code-title-open' : 'code-title-closed'}" on:click="{toggleExample}" >
+            <span style="display: inline-block; width: 15px;">{showCode?'▼':'▶'}</span>
+            Example Code
+        </div>
+        {#if showCode}
+        <Highlight class="allow-select" language="{lang}" {code} style="max-height: 500px;"/>
+        {/if}
+    </div>
+
+    <div class="run"> 
+        <div class="{showRun ? 'run-title-open' : 'run-title-closed'}" on:click="{toggleRun}">
+            <span style="display: inline-block; width: 15px;">{showRun?'▼':'▶'}</span>
+            Try Me!
+        </div>
+        {#if showRun}
+        <div class={$darkMode ? "run-content-dark" : "run-content-light"}>
+            <slot></slot>
+        </div>
+        {/if}
    </div>
-    {#if !hidden}
-    <Highlight language="{lang}" {code} />
-    {/if}
 </div>

 <style>
@@ -43,13 +76,61 @@
    .header {
        display: flex;
        justify-content: space-between;
-        padding: 15px 15px 0 15px;
+        border-bottom: 1px solid #5555;
+        flex-wrap: wrap;
+        padding-bottom: 10px;
+    }
+
+    .title {
+        font-size: 1.75rem;
+    }
+
+    .code-title-open {
+        padding-top: 15px;
+        padding-bottom: 0;
+        cursor: pointer;
+    }
+
+    .code-title-closed {
+        padding-top: 15px;
+        padding-bottom: 5px;
+        cursor: pointer;
+    }
+
+    .run-content-dark {
+        padding: 15px;
+        background-color: #282c34;
+    }
+
+    .run-content-light {
+        padding: 15px;
+        background-color: #fafafa;
+    }
+
+    .run-title-open {
+        margin-top: 15px;
+        margin-bottom: 15px;
+        padding-bottom: 0;
+        cursor: pointer;
+    }
+
+    .run-title-closed {
+        margin-top: 15px;
+        margin-bottom: 15px;
+        cursor: pointer;
    }

    .toggle {
        float: right;
+        margin-top: 2px;
    }

+    .example {
+        padding-right: 5px;
+        border-bottom: 1px solid #5555;
+        padding-bottom: 10px;
+    }
+    
    .custom-switch {
        display: inline-block;
        margin-left: 5px;
@@ -58,7 +139,22 @@
    .codeblock {
        background-color: #3F3F4B;
        border-radius: 5px;
-        padding-bottom: 15px;
+        border: 1px solid #555;
+        padding: 15px;
+    }
+
+    .codeblock-light {
+        background-color: #e5e5e5;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+        padding: 15px;
+    }
+
+    .description {
+        border-top: 1px solid #5555;
+        margin-top: 10px;
+        padding-top: 5px;
+        /* margin-bottom: 15px; */
    }

 </style>
--- a/v2/test/kitchensink/frontend/src/pages/Events.svelte
+++ b/v2/test/kitchensink/frontend/src/pages/Events.svelte
@@ -7,11 +7,16 @@
 <div>
    <h4>Events</h4>

-    Events are......
+    Wails includes a unified events system which allows you to do the following in either Go or Javascript:

-    <h5>Try Me</h5>
-    <hr>
-    <CodeBlock></CodeBlock>
+    <ul>
+        <li>On</li>
+        <li>Once</li>
+        <li>OnMultiple</li>
+        <li>Emit</li>
+    </ul>
+
+    <CodeBlock title="Events.On(eventName, callback)" description="etc etc etc "></CodeBlock>
 </div>

 <style>
--- a/v2/test/kitchensink/frontend/src/pages/logging/Logging.svelte
+++ b/v2/test/kitchensink/frontend/src/pages/logging/Logging.svelte
@@ -39,38 +39,37 @@
        <li>Fatal</li>
    </ul>
    All methods will log to the console and <code>Fatal</code> will also exit the program.
+    
+    <div style="padding: 15px"></div>
+    
+    <CodeBlock bind:isJs={isJs} {jsCode} {goCode} title="Logging" >
+        <div class="logging-form">
+            <form data-wails-no-drag class="w-400 mw-full"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
+                <!-- Radio -->
+                <div class="form-group">
+                    <label for="Debug">Log Level</label>
+                    {#each options as option}
+                    <div class="custom-radio">
+                        <input type="radio" name="logging" bind:group="{loglevel}" id="{option}" value="{option}">
+                        <label for="{option}">{option}</label>
+                    </div>   
+                    {/each}
+                </div>

-    <h5>Try Me</h5>
-    <hr>
-    <CodeBlock bind:isJs={isJs} {jsCode} {goCode}></CodeBlock>
-    <div class="logging-form">
-        <form data-wails-no-drag class="w-400 mw-full"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
-            <!-- Radio -->
-            <div class="form-group">
-                <label for="Debug">Log Level</label>
-                {#each options as option}
-                <div class="custom-radio">
-                    <input type="radio" name="logging" bind:group="{loglevel}" id="{option}" value="{option}">
-                    <label for="{option}">{option}</label>
-                </div>   
-                {/each}
-            </div>
+                <!-- Input -->
+                <div class="form-group">
+                    <label for="message" class="required">Message</label>
+                    <input type="text" class="form-control" id="message" placeholder="Hello World!" bind:value="{message}" required="required">
+                </div>

-            <!-- Input -->
-            <div class="form-group">
-                <label for="message" class="required">Message</label>
-                <input type="text" class="form-control" id="message" placeholder="Hello World!" bind:value="{message}" required="required">
-            </div>
-
-            <input class="btn btn-primary" type="button" on:click="{sendLogMessage}" value="Call {lang} method">
-        </form>
-    </div>
+                <input class="btn btn-primary" type="button" on:click="{sendLogMessage}" value="Call {lang} method">
+            </form>
+        </div>
+    </CodeBlock>
 </div>

 <style>
-    .logging-form {
-        margin-top: 2rem;
-    }
+
    .list {
        margin-top: 2rem;
        margin-left: 2rem;
@@ -80,7 +79,4 @@
        margin-bottom: 0.5rem;
    }

-    h5 {
-        margin-top: 3rem;
-    }
 </style>
--- a/v2/test/kitchensink/frontend/src/pages/logging/code.go
+++ b/v2/test/kitchensink/frontend/src/pages/logging/code.go
@@ -1,42 +1,19 @@
 package main

-import (
-	wails "github.com/wailsapp/wails/v2"
-)
+import wails "github.com/wailsapp/wails/v2"

-// Logger struct
-type Logger struct {
+type MyStruct struct {
 	runtime *wails.Runtime
 }

-// WailsInit is called at application startup
-func (l *Logger) WailsInit(runtime *wails.Runtime) error {
-	// Perform your setup here
+func (l *MyStruct) WailsInit(runtime *wails.Runtime) error {
+
+	runtime.Log.Debug(message)
+	runtime.Log.Info(message)
+	runtime.Log.Warning(message)
+	runtime.Log.Error(message)
+	runtime.Log.Fatal(message)
+
 	l.runtime = runtime
 	return nil
 }
-
-// Debug will log the given message
-func (l *Logger) Debug(message string) {
-	l.runtime.Log.Debug(message)
-}
-
-// Info will log the given message
-func (l *Logger) Info(message string) {
-	l.runtime.Log.Info(message)
-}
-
-// Warning will log the given message
-func (l *Logger) Warning(message string) {
-	l.runtime.Log.Warning(message)
-}
-
-// Error will log the given message
-func (l *Logger) Error(message string) {
-	l.runtime.Log.Error(message)
-}
-
-// Fatal will log the given message
-func (l *Logger) Fatal(message string) {
-	l.runtime.Log.Fatal(message)
-}
--- a/v2/test/kitchensink/frontend/src/pages/logging/code.jsx
+++ b/v2/test/kitchensink/frontend/src/pages/logging/code.jsx
@@ -1,18 +1,15 @@
-
 import { Log } from '@wailsapp/runtime2';

 function doSomeOperation() {
-    // Do things
-    let value = doSomething();
-    Log.Debug("I got: " + value);
-    /*
-    Log.Info("An Info message");
-    Log.Warning("A Warning message");
-    Log.Error("An Error message");
-    */
+  // Do things
+  let value = doSomething();
+  Log.Debug("I got: " + value);
+  Log.Info("An Info message");
+  Log.Warning("A Warning message");
+  Log.Error("An Error message");
 }

 function abort() {
-    // Do some things
-    Log.Fatal("I accidentally the whole application!");
+  // Do some things
+  Log.Fatal("I accidentally the whole application!");
 }