Tweak site appearance

- Complete standard light color-scheme
- Adjust appearance of setting inputs
- Fix mini-column animations when dragging field into it
- Hide loading indicators on fields in mini-column
- Add block modal when screen resolution is too small

Author: acweathersby

site/assets/js/lab/config-panel.ts

@@ -1,5 +1,3 @@
-import { Eventable } from "./eventable";
-import { sleep } from "./pipeline";
 import radlr_init, * as radlr from "js/radlr/radlr_wasm.js";
 import { LocalStoreKeys, getLocalValue, setLocalValue, setupOpenCloseTriggers } from "./settings-panel";
 
@@ -28,19 +26,23 @@ export async function setupConfig(settings_changed: (cfg: radlr.JSParserConfig)
 
     switch (input.type) {
       case "checkbox":
+        //@ts-ignore
         input.checked = config[id];
         break;
       case "number":
+        //@ts-ignore
         input.value = parseInt(config[id]).toString();
         break
     }
 
     input.addEventListener("change", e => {
       switch (input.type) {
         case "checkbox":
+          //@ts-ignore
           config[id] = input.checked;
           break;
         case "number":
+          //@ts-ignore
           config[id] = input.value;
           break
       }

site/assets/js/lab/control.ts

@@ -44,12 +44,32 @@ export class Controls extends Eventable<{
     window.addEventListener("keydown", e => {
       if (this.active) {
         let key = e.key;
-
-        if (key == "n" && e.altKey) {
-          this.step_button.ele.click();
-          e.preventDefault();
-          e.stopImmediatePropagation();
-          e.stopPropagation()
+        if (!e.altKey || e.ctrlKey || e.shiftKey) return;
+        switch (key) {
+          case "n": {
+            this.step_button.ele.click();
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            e.stopPropagation()
+          } return
+          case "r": {
+            this.reset_button.ele.click();
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            e.stopPropagation()
+          } return
+          case "a": {
+            this.jump_button.ele.click();
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            e.stopPropagation()
+          } return
+          case "space": {
+            this.play_button.ele.click();
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            e.stopPropagation()
+          } return
         }
       }
     }, {

site/assets/js/lab/index.ts

@@ -23,7 +23,7 @@ export async function init(compiler_worker_path: string) {
   grammar_input_field.set_text("");
   grammar_input_field.set_icon(`<i class="fa-solid fa-chart-gantt"></i>`);
 
-  let parser_info_field = nb.add_field(new NBContentField("Parser Info"), -1);
+  let parser_info_field = nb.add_field(new NBContentField("Parser Info"), 1);
   parser_info_field.set_content_visible(false);
   parser_info_field.set_icon(`<i class="fa-solid fa-circle-info"></i>`);
 
@@ -96,10 +96,11 @@ export async function init(compiler_worker_path: string) {
 
   grammar_pipeline_node.addListener("loading", _ => {
     error_reporter.innerText = "";
-    grammar_classification.innerHTML = "";
+    grammar_classification.innerHTML = "...";
   })
 
   grammar_pipeline_node.addListener("failed", errors => {
+    grammar_classification.innerHTML = "error";
     for (const error of errors) {
       if (error.origin == radlr.ErrorOrigin.Grammar) {
         //alert(error.msg);

site/assets/js/lab/notebook.ts

@@ -373,7 +373,18 @@ export class MININBColumn extends NBColumn {
     field.is_mini = true;
   }
 
-  distribute_height() { }
+  distribute_height() {
+    // Every field is set to be 40px high
+    let ratio = 50 / this.ele.getBoundingClientRect().height;
+    for (const field of this.cells) {
+
+      if (field instanceof NBBlankField && field.deleting)
+        continue;
+
+      field.set_relative_height(ratio);
+    }
+
+  }
 }
 
 export class NBField {

site/assets/js/lab/settings-panel.ts

@@ -33,7 +33,10 @@ export function getLocalValue(key: LocalStoreKeys): string {
 function setupSetting() {
   let setting_panel = document.querySelector("#settings-panel");
 
-  if (!setting_panel) return;
+  if (!setting_panel) {
+    console.error("Could not locate settings element");
+    return;
+  }
 
   const data_enable = new SettingInput(<HTMLLabelElement>setting_panel.querySelector(".data-enable"));
   const data_controls = Array.from(setting_panel.querySelectorAll(".data-control")).map(e => new SettingInput(<HTMLLabelElement>e));
@@ -175,11 +178,14 @@ class SettingInput extends Eventable<SettingInputEvents> {
 
 
 export function setupOpenCloseTriggers(panel: Element, button_selector: string = "#open-settings-button") {
+
   let close_button = <HTMLDivElement>panel.querySelector(".close-button");
 
   let open_button = <HTMLDivElement>document.body.querySelector(button_selector);
   open_button.classList.add("inactive");
 
+  console.log(open_button);
+
   open_button.addEventListener("click", () => {
     if (panel.classList.contains("inactive")) {
       panel.classList.replace("inactive", "active");
@@ -200,7 +206,7 @@ function setupThemes(setting_panel: Element) {
 
   let default_theme = <string>document.body.dataset.defaulttheme;
   let active_theme = getLocalValue(LocalStoreKeys.ActiveTheme) || default_theme;
-  
+
   //document.body.classList.add(active_theme);
   let node = <HTMLTemplateElement>document.querySelector("#theme-entry-template");
 

site/assets/sass/codemirror.sass

@@ -13,6 +13,7 @@
   outline: none
   position: absolute !important
   font-size: 13px
+  font-weight: 500
 
   *
     color: none !important

site/assets/sass/color.scss

@@ -1,18 +1,59 @@
 $theme-the-radlr-special: (
-  /*
-  colors 
-  - header fg bg
-
-  - base-line fg bg
-  - focus fg bg
-  - background fg bg
-
-  - controls fg bg :hover fg bg
-  - links fg bg :hover fg bg
-  */
 
   class-name: "the-RADLR-special",
+
+  base-fg: rgb(31, 31, 31),
+  base-bg: rgb(241, 241, 241),
 
+  // Panel header sections
+  header-fg:   rgb(31, 31, 31),
+  header-bg:  rgb(241, 241, 241),
+  
+  header-hover-fg:rgb(241, 241, 241),
+  header-hover-bg:rgb(31, 31, 31),
+
+  // Should contrast `base-*` to catch the user's attention
+  focus-fg: rgb(227, 227, 227),
+  focus-bg: rgb(61, 61, 61),
+
+  // Should blend in with `base-*` to avoid catching the user's attention
+  backdrop-fg: rgb(92, 92, 92),
+  backdrop-bg: rgb(227, 227, 227),
+
+  // Should work well when paired with  `base-fg` and `backdrop-bg`
+  button-fg: rgb(165, 165, 165),
+  button-bg: transparent,
+  button-hover-fg: rgb(241, 241, 241),
+  button-hover-bg: rgb(31, 31, 31),
+
+  // Should contrast work will with `base-bg`, `focus-bg`, and `backdrop-bg`
+  bc-address-bg: rgb(86, 78, 153),
+  bc-address-fg: rgb(241, 241, 241),
+
+  // Gives a subtle contrast to `base-bg` to help delineate panel contents
+  section-bg: rgba(0, 0, 0, 0.019),
+
+  // These setting contrast well with `focus-bg`
+  settings-input-bg: rgb(227, 227, 227),
+  settings-input-fg: rgb(61, 61, 61),
+  settings-input-active-fg: rgb(255, 255, 255),
+  settings-input-active-bg: rgb(53, 129, 204),
+  settings-input-disabled-fg: rgb(245, 245, 245),
+  settings-input-disabled-bg: rgb(187, 82, 82),
+
+  // These setting contrast well with `focus-bg` and `base-bg`
+  link-fg: rgb(98, 178, 196),
+  link-bg: transparent,
+  link-hover-fg: rgb(94, 148, 214),
+  link-hover-bg: transparent,
+
+  // ------------------------------------------
+);
+
+$theme-pencil: (
+  //
+  class-name: "pencil",
+
   header-fg:   rgb(31, 31, 31),
   header-bg:  rgb(241, 241, 241),
 
@@ -39,13 +80,46 @@ $theme-the-radlr-special: (
 
   section-bg: rgba(0, 0, 0, 0.019),
 
+  settings-input-bg: rgb(191, 191, 191),
+  settings-input-fg: rgb(61, 61, 61),
+  settings-input-active-fg: rgb(191, 191, 191),
+  settings-input-active-bg: rgb(53, 129, 204),
+  settings-input-disabled-fg: rgb(191, 191, 191),
+  settings-input-disabled-bg: rgb(187, 82, 82),
+
   link-fg: purple,
   link-bg: transparent,
 
   link-hover-fg: purple,
   link-hover-bg: transparent,
 
-  // ------------------------------------------
+  ////
+
+  accent-color: #9f9f9f,
+  // Main Colors
+  bg-inc-2: #ffffff,
+  bg-inc-1: #eeeeee,
+  bg-basic: #e6e6e6,
+  bg-dec-1: #7c7c7c67,
+  bg-dec-2: #586464,
+
+  fg-inc-2: #bfbfbf,
+  fg-inc-1: #afafaf,
+  fg-basic: #848484,
+  fg-dec-1: #393939,
+  fg-dec-2: #000000,
+
+  // field header colors on hover
+  field-header-bg: #e7ba02,
+  field-header-fg: #ffffff,
+  loader-bg: #cfcfcf,
+  loader-fg: #3b9ee4,
+  //
+  border-color: #ff0000,
+  debugger-action-red: #f17559,
+  // codemirror
+  active-color: #828282,
+  inactive-color: #4a4a4a,
 );
 
 
@@ -145,43 +219,7 @@ $theme-desperados-unite: (
   inactive-color: #4a4a4a,
 );
 
-$theme-pencil: (
-  //
-  class-name: "pencil",
-  accent-color: #9f9f9f,
-  // Main Colors
-  bg-inc-2: #ffffff,
-  bg-inc-1: #eeeeee,
-  bg-basic: #e6e6e6,
-  bg-dec-1: #7c7c7c67,
-  bg-dec-2: #586464,
-
-  fg-inc-2: #bfbfbf,
-  fg-inc-1: #afafaf,
-  fg-basic: #848484,
-  fg-dec-1: #393939,
-  fg-dec-2: #000000,
 
-  // field header colors on hover
-  field-header-bg: #e7ba02,
-  field-header-fg: #ffffff,
-  loader-bg: #cfcfcf,
-  loader-fg: #3b9ee4,
-  //
-  border-color: #ff0000,
-  debugger-action-red: #f17559,
-  // codemirror
-  active-color: #828282,
-  inactive-color: #4a4a4a,
-
-  button-fg: rgb(187, 187, 187),
-  button-bg: red,
-  button-active-fg: rgb(255, 255, 255),
-  button-active-bg: rgb(251, 94, 94),
-
-  bc-address-bg-active: rgb(255, 255, 255),
-  bc-address-bg: rgb(255, 255, 255)
-);
 
 
 $themes : ( //

site/assets/sass/header.sass

@@ -29,6 +29,9 @@ header
   .header-right
     min-width: 200px
 
+    @include mobile-screens
+      min-width: 180px
+
   #header-logo
     display: inline-block
     height: 2em