lexgui 0.1.22 → 0.1.24

package/build/lexgui.css

@@ -5,6 +5,7 @@
   --global-font: 'Noto Sans', sans-serif; /*'Rubik', sans-serif; */
   --global-selected: #3e57e4;
   --global-selected-light: #7b8ae2;
+  --global-selected-dark: #344bccb7;
   --global-color-primary: #232323;
   --global-color-secondary: #343434;
   --global-color-terciary: #444;
@@ -131,7 +132,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;
@@ -142,6 +143,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; */
 }
 
@@ -1195,6 +1197,7 @@ input::-webkit-inner-spin-button {
 
 /* Firefox */
 input[type=number] {
+  appearance: textfield;
   -moz-appearance: textfield;
 }
 
@@ -1784,10 +1787,10 @@ meter::-webkit-meter-even-less-good-value {
   z-index: 102;
   position: absolute;
   padding-right: 20px;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-  box-shadow: 0 0 6px black !important;
+  border-radius: 4px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.63) !important;
   background-color: var(--global-blur-background);
+  border: 1px solid #91909036;
 }
 
 .lexcontextmenubox:before {
@@ -1800,13 +1803,14 @@ meter::-webkit-meter-even-less-good-value {
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   z-index:-1;
+  border-radius: 4px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry {
   width: 100%;
   color: #c0c4cbe3;
   padding: 3px;
-  padding-left: 8px;
+  padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 4px;
   cursor: pointer;
@@ -1814,7 +1818,16 @@ meter::-webkit-meter-even-less-good-value {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border-left: 2px solid var(--global-selected-light);
+}
+
+.lexcontextmenubox .lexcontextmenuentry:first-child {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.lexcontextmenubox .lexcontextmenuentry:last-child {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry.cmtitle {
@@ -1846,17 +1859,17 @@ meter::-webkit-meter-even-less-good-value {
   float: right;
   margin-right: 0px;
   margin-top: 10px;
-  font-size: 11px;
+  font-size: 10px;
 }
 
 /* submenu specified arrow  */
 .lexcontextmenubox .lexcontextmenuentry a.fa-xs {
   float: right;
-  margin-top: -7px;
+  margin-top: -8px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry:hover:not(.cmtitle) {
-  background-color: var(--global-selected);
+  background-color: var(--global-selected-dark);
   color: #f5f5f5;
 }
 
@@ -2732,8 +2745,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 {
@@ -2792,7 +2830,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;
 }
@@ -2923,7 +2961,8 @@ pre .line-gutter {
   height: var(--code-editor-row-height);
   position: absolute;
   border-left: 3px solid #fff !important;
-  z-index: 0 !important;
+  z-index: 1 !important;
+  opacity: 0.6;
   left: 0px;
   top: 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.22",
+        version: "0.1.24",
         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.22",
+    version: "0.1.24",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers

package/changelog.md

@@ -1,29 +1,55 @@
 # lexgui.js changelog
 
+## 0.1.24
+
+Code Editor:
+- Improved single and multiple cursor usability.
+- Cursor can be added or removed using "Alt+LeftClick".
+- Fixed clicks outside the code area.
+- Minor bug fixes.
+
+## 0.1.23
+
+Code Editor:
+- 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.
+
+Minor 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.
+Code Editor:
+- Added REDO using "Ctrl+Y".
+- Added FontSize customization. "Ctrl+PLUS", "Ctrl+MINUS" or "Ctrl+Wheel".
+- Added "Ctrl+G" to scroll to specific line.
+
+Minor fixes.
 
 ## 0.1.21
 
-Added "Ctrl+F" to find text in code tabs.
-"Shift+Backspace" deletes word at current position.
-Added "Markdown" syntax highlighting. 
-Improved hightlighting of tag languages (HTML, Markdown, XML).
+Code Editor:
+- Added "Ctrl+F" to find text in code tabs.
+- "Shift+Backspace" deletes word at current position.
+- Added "Markdown" syntax highlighting. 
+- Improved hightlighting of tag languages (HTML, Markdown, XML).
 
 ## 0.1.20
 
-Active line is now hightlighted.
-Using CommitMono font (https://commitmono.com/) as the font for the Code Editor. 
-Added "Rust" syntax highlighting. 
-Improved all code selections (and some bugs fixed).
-Block comments are now working again (with bugs probably). 
+Code Editor:
+- Active line is now hightlighted.
+- Using CommitMono font (https://commitmono.com/) as the font for the Code Editor. 
+- Added "Rust" syntax highlighting. 
+- Improved all code selections (and some bugs fixed).
+- Block comments are now working again (with bugs probably).
+
 Minor fixes.
 
 ## 0.1.19
 
-Add file explorer to Code Editor component. 
+Code Editor:
+- Add file explorer to Code Editor component. 
+
 Minor fixes.

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,14 +21,16 @@
         import { LX } from 'lexgui';
         import 'lexgui/components/codeeditor.js';
 
+        window.LX = LX;
+        
         // init library and get main area
         let area = LX.init();
 
-        const file_explorer = true;
+        const file_explorer = false;
 
         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";
@@ -53,12 +56,12 @@
         });
 
         editor.loadFile( "../data/js_sample.js" );
-        editor.loadFile( "../data/json_sample.json" );
-        editor.loadFile( "../data/css_sample.css" );
-        editor.loadFile( "../data/cpp_sample.cpp" );
-        editor.loadFile( "../data/xml_sample.xml" );
-        editor.loadFile( "../data/python_sample.py" );
-        editor.loadFile( "../data/rust_sample.rs" );
+        // editor.loadFile( "../data/json_sample.json" );
+        // editor.loadFile( "../data/css_sample.css" );
+        // editor.loadFile( "../data/cpp_sample.cpp" );
+        // editor.loadFile( "../data/xml_sample.xml" );
+        // editor.loadFile( "../data/python_sample.py" );
+        // editor.loadFile( "../data/rust_sample.rs" );
         // editor.loadFile( "../localhost.bat" );
         
         if( !file_explorer )

package/package.json

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