lexgui 0.1.16 → 0.1.18

package/build/lexgui.css

@@ -9,7 +9,7 @@
   --global-color-primary: #232323;
   --global-color-secondary: #343434;
   --global-color-terciary: #444;
-	--global-branch-darker: #28282a;
+	--global-branch-darker: #252525;
 	--branch-title-background: #2e3338;
   --branch-title-inactive-background: #42484e;
   --global-button-color: #4e4e4e;
@@ -21,6 +21,9 @@
   --transition-time: 1000;
 } 
 
+/* Some global colors */
+.orange { color: orange }
+
 ::-webkit-scrollbar {
   height: 3px;
   width: 4px;
@@ -2002,6 +2005,7 @@ meter::-webkit-meter-even-less-good-value {
   -ms-user-select: none; /* IE 10+ */
   user-select: none; /* Standard syntax */
   transition: 0.2s;
+  line-height: 16px;
 }
 
 .lexareatabs.row {
@@ -2692,6 +2696,19 @@ ul.lexassetscontent {
   padding: 0px;
 }
 
+.codebasearea .lexareatab i {
+  font-size: 10px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.codebasearea .lexareatab img {
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
 .lexcodeeditor ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -2729,40 +2746,26 @@ ul.lexassetscontent {
 }
 
 .lexcodegutter {
-  width: 32px;
-  height: calc(100% - 70px);
+  width: 48px;
+  height: calc(100% - 62px);
   background-color: var(--global-branch-darker);
-  margin-top: 24px;
-  text-align: center;
+  margin-top: 26px;
   overflow: hidden;
-  -webkit-user-select: none; /* Safari 3.1+ */
-  -moz-user-select: none; /* Firefox 2+ */
-  -ms-user-select: none; /* IE 10+ */
-  user-select: none; /* Standard syntax */
-  font-family: 'Inconsolata', monospace;
-}
-
-.lexcodegutter span {
-  width: 100%;
-  display: block;
-  height: 16px;
-  margin-top: 4px;
-  font-size: 13px;
-  color: #888;
-  text-align-last: auto;
-  line-height: 22px;
+  position: absolute;
 }
 
 .lexcodeeditor .codetabsarea {
+  height: calc( 100% - 60px ) !important;
   background-color: var(--global-branch-darker);
+  overflow: scroll;
 }
 
-.lexcodeeditor .codetabsarea.with-vscrollbar {
-  width: calc( 100% - 10px ) !important;
+.lexcodeeditor .codetabsarea::-webkit-scrollbar {
+  display: none;
 }
 
-.lexcodeeditor .codetabsarea.with-hscrollbar {
-  height: calc( 100% - 40px ) !important;
+.lexcodeeditor .codetabsarea.with-vscrollbar {
+  width: calc( 100% - 10px ) !important;
 }
 
 .lexcodeeditor .codetabsarea.dragging {
@@ -2772,8 +2775,8 @@ ul.lexassetscontent {
 .lexcodeeditor .code {
   cursor: text;
   font-size: 16px;
-  overflow: hidden;
   padding-right: 6px;
+  position: relative;
 }
 
 .codechar {
@@ -2790,14 +2793,13 @@ ul.lexassetscontent {
   -webkit-text-size-adjust: 100%;
   cursor: text;
   box-sizing: border-box;
-  padding: 0 4px;
   border-radius: 0;
   border-width: 0;
   background: transparent;
   font-family: 'Inconsolata', monospace;
   font-size: inherit;
   font-weight: bold;
-  margin: 4px 0px;
+  margin: 0px 0px;
   white-space: pre;
   word-wrap: normal;
   line-height: inherit;
@@ -2805,9 +2807,12 @@ ul.lexassetscontent {
   position: relative;
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
-  z-index: 0 !important;
+  height: 20px;
   pointer-events: none;
-  height: 16px;
+}
+
+.lexcodeeditor pre.active-line {
+  background-color: var(--global-blur-background);
 }
 
 .lexcodeeditor span {
@@ -2822,7 +2827,22 @@ ul.lexassetscontent {
   box-sizing: border-box;
   display: inline-block;
   height: 16px;
-  vertical-align: top;
+}
+
+pre .line-gutter {
+  color: #888;
+  width: 48px;
+  height: 20px;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Standard syntax */
+  position: sticky;
+  left: 0;
+  z-index: 1;
 }
 
 .lexcodeeditor .cursors, .lexcodeeditor .selections {
@@ -2836,7 +2856,6 @@ ul.lexassetscontent {
   margin: 0;
   padding: 0;
   position: relative;
-  z-index: 3;
   pointer-events: none;
 }
 
@@ -2860,35 +2879,28 @@ ul.lexassetscontent {
   z-index: 0 !important;
   left: 0px;
   top: 0px;
-  height: 18px;
+  height: 20px;
 }
 
 .lexcodescrollbar {
+  width: 10px;
+  height: calc(100% - 62px);
   position: absolute;
-  background-color: var(--global-branch-darker);
-  filter: brightness(0.9);
+  background-color: transparent;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   margin-top: 26px;
   z-index: 1 !important;
   right: 0px;
-  width: 10px;
-  height: calc(100% - 62px);
+  pointer-events: none;
 }
 
 .lexcodescrollbar.horizontal {
-  position: absolute;
-  background-color: var(--global-branch-darker);
-  filter: brightness(0.9);
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  z-index: 1 !important;
+  width: calc( 100% - 58px );
+  height: 10px;
   bottom: 36px;
   right: 10px;
-  width: calc( 100% - 40px );
-  height: 10px;
 }
 
 .lexcodescrollbar.scrollbar-unused {
@@ -2896,7 +2908,7 @@ ul.lexassetscontent {
 }
 
 .lexcodescrollbar div { /* thumb */
-  background-color: #bbbbbb57 !important;
+  background-color: #bbbbbb3d !important;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -2907,6 +2919,7 @@ ul.lexassetscontent {
   width: 10px;
   height: 10px;
   transition: linear 0.1s background-color;
+  pointer-events: all;
 }
 
 .lexcodescrollbar div:hover { /* thumb */
@@ -2962,7 +2975,7 @@ ul.lexassetscontent {
   margin: 0;
   pointer-events: unset;
   cursor: default;
-  height: 18px;
+  height: 22px;
 }
 
 .lexcodeeditor .autocomplete pre a {
@@ -3074,9 +3087,10 @@ ul.lexassetscontent {
 .cm-sym.batch { color: #dfd85e; } /* symbol */
 .cm-mtd.batch { color: inherit } /* method */
 
-/* plain color */
-.cm-str.plaintext, .cm-kwd.plaintext, .cm-com.plaintext, .cm-typ.plaintext, .cm-std.plaintext, 
-.cm-bln.plaintext, .cm-dec.plaintext, .cm-sym.plaintext, .cm-mtd.plaintext { color: inherit; }
+.cm-str.html { color: #ca7d59; } /* string */
+.cm-kwd.html { color: #2194ce; } /* keyword */
+.cm-bln.html { color: #b4d7ec; } /* builtin */
+.cm-sym.html { color: #929292; } /* symbol */
 
 
 /* Node Graph */

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.16",
+        version: "0.1.18",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -1541,11 +1541,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             contentEl.style.display = isSelected ? "block" : "none";
             contentEl.classList.add("lextabcontent");
 
+            // Process icon
+            if( options.icon )
+            {
+                if( options.icon.includes( 'fa-' ) ) // It's fontawesome icon...
+                    options.icon = "<i class='" + options.icon + "'></i>";
+                else // an image..
+                {
+                    const rootPath = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/";
+                    options.icon = "<img src='" + ( rootPath + options.icon ) + "'>";
+                }
+            }
+
             // Create tab
             let tabEl = document.createElement('span');
             tabEl.dataset["name"] = name;
             tabEl.className = "lexareatab" + (isSelected ? " selected" : "");
-            tabEl.innerHTML = name;
+            tabEl.innerHTML = (options.icon ?? "") + name;
             tabEl.id = name.replace(/\s/g, '') + Tabs.TAB_ID++;
             tabEl.title = options.title;
             tabEl.selected = isSelected ?? false;

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.16",
+    version: "0.1.18",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -1537,11 +1537,23 @@ class Tabs {
         contentEl.style.display = isSelected ? "block" : "none";
         contentEl.classList.add("lextabcontent");
 
+        // Process icon
+        if( options.icon )
+        {
+            if( options.icon.includes( 'fa-' ) ) // It's fontawesome icon...
+                options.icon = "<i class='" + options.icon + "'></i>";
+            else // an image..
+            {
+                const rootPath = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/";
+                options.icon = "<img src='" + ( rootPath + options.icon ) + "'>";
+            }
+        }
+
         // Create tab
         let tabEl = document.createElement('span');
         tabEl.dataset["name"] = name;
         tabEl.className = "lexareatab" + (isSelected ? " selected" : "");
-        tabEl.innerHTML = name;
+        tabEl.innerHTML = (options.icon ?? "") + name;
         tabEl.id = name.replace(/\s/g, '') + Tabs.TAB_ID++;
         tabEl.title = options.title;
         tabEl.selected = isSelected ?? false;

package/demo.js

@@ -487,7 +487,7 @@ function fillPanel( panel ) {
     panel.sameLine(2);
     panel.addFile("Img1", data => { console.log(data) }, {} );
     panel.addFile("Img2", data => { console.log(data) }, {} );
-    panel.addDropdown("Best Engine", ["Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot", "Unity", "Unreal Engine"], "Unity", (value, event) => {
+    panel.addDropdown("Best Engine", ["Godot", "Unity", "Unreal Engine"], "Unity", (value, event) => {
         console.log(value);
     });
 

package/examples/code_editor.html

@@ -47,20 +47,8 @@
             // disable_edition: true
         });
 
-        // editor.loadFile( "../data/test.json" );
-        // editor.loadFile( "../data/style.css" );
-        // editor.loadFile( "../data/script.js" );
-        // editor.loadFile( "../data/engine.cpp" );
         editor.loadFile( "../demo.js" );
         
-        // var button = document.createElement('button');
-        // button.value = "CLICK ME";
-        // button.style.width = "100px";
-        // button.style.height = "100px";
-        // button.style.position = "absolute";
-        // button.onclick = editor.processLines.bind(editor);
-        // document.body.appendChild( button );
-
         var ctx = canvas.getContext("2d");
         ctx.fillStyle = "#b7a9b1";
         ctx.font = "48px Monospace";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.16",
+    "version": "0.1.18",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",