lexgui 0.1.21 → 0.1.23

package/build/lexgui.css

@@ -18,6 +18,8 @@
   --global-dark-background: #14161a;
   --global-blur-background: #28292ba9;
   --transition-time: 1000;
+  --code-editor-font-size: 14px;
+  --code-editor-row-height: 20px;
 } 
 
 /* Some global colors */
@@ -129,7 +131,7 @@ body.nocursor * {
 #global_search {
   position: absolute;
   background-color: var(--global-blur-background);
-  -webkit-backdrop-filter: blur(12px);
+  --webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
   border-radius: 8px;
   border: 1px solid #d0d0ec6b;
@@ -140,6 +142,7 @@ body.nocursor * {
   flex-wrap: wrap;
   z-index: 105;
   -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
+  mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
   /* box-shadow: 0 2px 10px black; */
 }
 
@@ -1193,6 +1196,7 @@ input::-webkit-inner-spin-button {
 
 /* Firefox */
 input[type=number] {
+  appearance: textfield;
   -moz-appearance: textfield;
 }
 
@@ -2730,8 +2734,33 @@ ul.lexassetscontent {
   letter-spacing: 0em !important;
 }
 
-.codebasearea .lexareatab {
+.codebasearea .lexareatabs {
   padding: 0px;
+  margin: 0px;
+}
+
+.codebasearea .lexareatab {
+  padding: 5px;
+  border-radius: 0px !important;
+  margin: 0px !important;
+  border: 1px solid #91909036;
+  border-right: none;
+  background-color: var(--global-color-primary) !important;
+  transition: none;
+}
+
+.codebasearea .lexareatab:hover {
+  background-color: var(--global-color-secondary) !important;
+}
+
+.codebasearea .lexareatab:last-child {
+  border-right: 1px solid #91909036;
+}
+
+.codebasearea .lexareatab.selected {
+  background-color: var(--global-color-secondary) !important;
+  border-top: 1px solid var(--global-selected);
+  border-bottom: none;
 }
 
 .codebasearea .lexareatab i {
@@ -2790,7 +2819,7 @@ ul.lexassetscontent {
   width: 48px;
   height: calc(100% - 62px);
   background-color: var(--global-branch-darker);
-  margin-top: 26px;
+  margin-top: 28px;
   overflow: hidden;
   position: absolute;
 }
@@ -2819,7 +2848,7 @@ ul.lexassetscontent {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "ss04", "ss05";
-  font-size: 0.8rem;
+  font-size: var(--code-editor-font-size);
   padding-right: 6px;
   position: relative;
 }
@@ -2829,7 +2858,7 @@ ul.lexassetscontent {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "ss04", "ss05";
-  font-size: 0.8rem;
+  font-size: var(--code-editor-font-size);
   position: absolute;
   top: 0;
   left: 0;
@@ -2852,7 +2881,7 @@ ul.lexassetscontent {
   position: relative;
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
-  height: 20px;
+  height: var(--code-editor-row-height);
   pointer-events: none;
 }
 
@@ -2871,16 +2900,15 @@ ul.lexassetscontent {
   -webkit-tap-highlight-color: transparent;
   box-sizing: border-box;
   display: inline-block;
-  height: 16px;
 }
 
 pre .line-gutter {
   color: #8a8b97;
   width: 48px;
-  height: 20px;
-  font-size: 14px;
+  height: var(--code-editor-row-height);
+  font-size: var(--code-editor-font-size);
   font-weight: 400;
-  line-height: 20px;
+  line-height: var(--code-editor-row-height);
   text-align: center;
   -webkit-user-select: none; /* Safari 3.1+ */
   -moz-user-select: none; /* Firefox 2+ */
@@ -2919,12 +2947,12 @@ pre .line-gutter {
   padding: 0;
   border-right: none;
   width: 0;
+  height: var(--code-editor-row-height);
   position: absolute;
   border-left: 3px solid #fff !important;
   z-index: 0 !important;
   left: 0px;
   top: 0px;
-  height: 20px;
 }
 
 .lexcodescrollbar {
@@ -2987,7 +3015,7 @@ pre .line-gutter {
   left: 0px;
   top: 0px;
   width: 100px;
-  height: 20px;
+  height: var(--code-editor-row-height);
   background-color: var(--global-selected);
   opacity: 0.4;
 }
@@ -3012,6 +3040,10 @@ pre .line-gutter {
   transition: transform 0.2s ease-in;
 }
 
+.lexcodeeditor .searchbox.gotoline {
+  width: 124px;
+}
+
 .lexcodeeditor .searchbox.opened {
   transform: translateY(0px);
 }

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.21",
+        version: "0.1.23",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.21",
+    version: "0.1.23",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers

package/changelog.md

@@ -1,5 +1,21 @@
 # lexgui.js changelog
 
+## 0.1.23
+
+Begin integration of multiple cursors ("Ctrl+ArrowDown").
+Code tabs have new VS Code-alike style.
+Improved CSS highlighting.
+Add Undo Steps to some actions that were missing.
+When using Ctrl+G, the selected line is now highlighted.
+General bug fixes.
+
+## 0.1.22
+
+Added REDO using "Ctrl+Y".
+Added FontSize customization. "Ctrl+PLUS", "Ctrl+MINUS" or "Ctrl+Wheel".
+Added "Ctrl+G" to scroll to specific line.
+General bug fixes.
+
 ## 0.1.21
 
 Added "Ctrl+F" to find text in code tabs.

package/examples/code_editor.html

@@ -2,6 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>LexGUI Code Editor Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/icon.png">
@@ -20,6 +21,8 @@
         import { LX } from 'lexgui';
         import 'lexgui/components/codeeditor.js';
 
+        window.LX = LX;
+        
         // init library and get main area
         let area = LX.init();
 
@@ -27,7 +30,7 @@
 
         if( !file_explorer )
         {
-            var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
+            var [leftArea, rightArea] = area.split({ sizes:["40%","60%"] });
 
             var canvas = document.createElement('canvas');
             canvas.id = "mycanvas";
@@ -52,7 +55,7 @@
             file_explorer: file_explorer
         });
 
-        editor.loadFile( "../data/js_sample.js" );
+        editor.loadFile( "../demo.js" );
         // editor.loadFile( "../data/json_sample.json" );
         // editor.loadFile( "../data/css_sample.css" );
         // editor.loadFile( "../data/cpp_sample.cpp" );

package/package.json

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