lexgui 0.5.4 → 0.5.5

package/build/components/codeeditor.js

@@ -491,9 +491,9 @@ class CodeEditor {
 
                 searchPanel.sameLine( 4 );
                 searchPanel.addText( null, "", null, { placeholder: "Find" } );
-                searchPanel.addButton( null, "up", () => this.search( null, true ), { className: 'micro', icon: "fa fa-arrow-up" } );
-                searchPanel.addButton( null, "down", () => this.search(), { className: 'micro', icon: "fa fa-arrow-down" } );
-                searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { className: 'micro', icon: "fa fa-xmark" } );
+                searchPanel.addButton( null, "up", () => this.search( null, true ), { icon: "fa fa-arrow-up" } );
+                searchPanel.addButton( null, "down", () => this.search(), { icon: "fa fa-arrow-down" } );
+                searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { icon: "fa fa-xmark" } );
 
                 box.querySelector( 'input' ).addEventListener( 'keyup', e => {
                     if( e.key == 'Escape' ) this.hideSearchBox();
@@ -530,7 +530,7 @@ class CodeEditor {
         // Add code-sizer
         {
             this.codeSizer = document.createElement( 'div' );
-            this.codeSizer.className = "code-sizer";
+            this.codeSizer.className = "code-sizer pseudoparent-tabs";
 
             // Append all childs
             while( this.codeScroller.firstChild )
@@ -1535,9 +1535,9 @@ class CodeEditor {
             let panel = new LX.Panel({ className: "lexcodetabinfo", width: "calc(100%)", height: "auto" });
 
             panel.sameLine();
-            panel.addLabel( this.code.title, { float: 'right', signal: "@tab-name" });
-            panel.addLabel( "Ln " + 1, { xmaxWidth: "48px", signal: "@cursor-line" });
-            panel.addLabel( "Col " + 1, { xmaxWidth: "48px", signal: "@cursor-pos" });
+            panel.addLabel( this.code.title, { fit: true, signal: "@tab-name" });
+            panel.addLabel( "Ln " + 1, { fit: true, signal: "@cursor-line" });
+            panel.addLabel( "Col " + 1, { fit: true, signal: "@cursor-pos" });
             panel.addButton( null, "Spaces: " + this.tabSpaces, ( value, event ) => {
                 LX.addContextMenu( "Spaces", event, m => {
                     const options = [ 2, 4, 8 ];
@@ -1619,7 +1619,7 @@ class CodeEditor {
         this.processFocus(false);
 
         LX.addContextMenu( null, e, m => {
-            m.add( "Create", this.addTab.bind( this, "unnamed.js", true ) );
+            m.add( "Create", this.addTab.bind( this, "unnamed.js", true, "", { language: "JavaScript" } ) );
             m.add( "Load", this.loadTabFromFile.bind( this, "unnamed.js", true ) );
         });
     }
@@ -1731,7 +1731,8 @@ class CodeEditor {
             title: code.title,
             icon: tabIcon,
             onSelect: this._onSelectTab.bind( this, isNewTabButton ),
-            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton )
+            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton ),
+            allowDelete: true
         } );
 
         // Move into the sizer..
@@ -1805,7 +1806,8 @@ class CodeEditor {
             title: code.title,
             icon: tabIcon,
             onSelect: this._onSelectTab.bind( this, isNewTabButton ),
-            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton )
+            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton ),
+            allowDelete: true
         });
 
         // Move into the sizer..
@@ -3911,14 +3913,15 @@ class CodeEditor {
     }
 
     _measureChar( char = "a", use_floating = false, get_bb = false ) {
-
-        var line = document.createElement( "pre" );
-        var text = document.createElement( "span" );
+        const parentContainer = LX.makeContainer( null, "lexcodeeditor", "", document.body );
+        const container = LX.makeContainer( null, "code", "", parentContainer );
+        const line = document.createElement( "pre" );
+        container.appendChild( line );
+        const text = document.createElement( "span" );
         line.appendChild( text );
         text.innerText = char;
-        this.code.appendChild( line );
         var rect = text.getBoundingClientRect();
-        LX.UTILS.deleteElement( line );
+        LX.UTILS.deleteElement( parentContainer );
         const bb = [ use_floating ? rect.width : Math.floor( rect.width ), use_floating ? rect.height : Math.floor( rect.height ) ];
         return get_bb ? bb : bb[ 0 ];
     }
@@ -4489,8 +4492,8 @@ CodeEditor.keywords = {
                   'arguments', 'extends', 'instanceof', 'Infinity'],
     'C': ['int', 'float', 'double', 'long', 'short', 'char', 'const', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'signed', 'volatile', 'unsigned', 'static', 'extern', 'enum', 'register',
         'union'],
-    'C++': ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr',
-            'NULL', 'signed', 'unsigned', 'namespace', 'enum', 'extern', 'union', 'sizeof', 'static'],
+    'C++': ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'class', 'struct', 'typedef', 'nullptr',
+            'NULL', 'signed', 'unsigned', 'namespace', 'enum', 'extern', 'union', 'sizeof', 'static', 'private', 'public'],
     'CMake': ['cmake_minimum_required', 'set', 'not', 'if', 'endif', 'exists', 'string', 'strequal', 'add_definitions', 'macro', 'endmacro', 'file', 'list', 'source_group', 'add_executable',
         'target_include_directories', 'set_target_properties', 'set_property', 'add_compile_options', 'add_link_options', 'include_directories', 'add_library', 'target_link_libraries',
         'target_link_options', 'add_subdirectory', 'add_compile_definitions', 'project', 'cache'],

package/build/lexgui.css

@@ -333,7 +333,7 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
     outline: none;
 }
 
-:root[data-strictVP="false"] {
+:root[data-strictVP="false"] #lexroot {
     bottom: unset;
 }
 
@@ -1387,6 +1387,7 @@ a svg, svg path {
 /* Text Widget */
 
 .lexwidget input.lextext, .lexwidget div.lextext {
+    width: 100%;
     border-radius: 6px;
     position: relative;
     border: 1px solid transparent;
@@ -1443,6 +1444,7 @@ a svg, svg path {
 /* TextArea Widget */
 
 .lexwidget textarea {
+    width: 100%;
     word-break: break-word;
     font-family: var(--global-font);
     background: none;
@@ -2209,7 +2211,7 @@ dialog .lexselect .lexselectoptions {
 .lexwidget .vecbox .drag-icon {
     position: absolute;
     width: 2px;
-    right: 0.25em;
+    right: 1em;
     top: 25%;
     font-size: var(--global-font-size-sm);
     color: var(--global-text-secondary);
@@ -2621,7 +2623,6 @@ input[type=number] {
 }
 
 .lextree .lextreetools.notitle {
-    /* padding-top: 14px; */
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
@@ -2673,9 +2674,13 @@ input[type=number] {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    transition-property: color, background-color, border-color;
+    transition-timing-function: ease-out;
+    transition-duration: .15s;
 }
 
 .lextree .lextreeitem input {
+    color: var(--global-color-primary);
     padding: 0;
     border: none;
 }
@@ -2716,8 +2721,12 @@ input[type=number] {
 }
 
 .lextree .lextreeitem.selected {
-    color: var(--global-text-primary);
-    background: light-dark(var(--global-color-accent-light), var(--global-color-accent));
+    color: #f4f4f5;
+    background: var(--global-color-accent);
+}
+
+.lextree .lextreeitem.selected a.lexicon {
+    color: #f4f4f5;
 }
 
 .lextree .lextreeitem a.hierarchy {
@@ -2728,18 +2737,6 @@ input[type=number] {
     font-size: var(--global-font-size-sm);
 }
 
-.lextree .lextreeitem .itemicon:hover {
-    color: var(--global-color-accent);
-}
-
-.lextree .lextreeitem.selected .itemicon:hover {
-    color: var(--global-text-secondary);
-}
-
-.lextree .lextreeitem .itemicon:active {
-    margin-top: 7px;
-}
-
 /* File Input */
 
 .lexfileinput::file-selector-button {
@@ -3221,7 +3218,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     padding: 10px;
     display: flex;
     flex-direction: column;
-    /* gap: 0.2rem; */
 }
 
 .lexsidebar *::-webkit-scrollbar {
@@ -3419,32 +3415,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     display: none !important;
 }
 
-.lexsidebar.collapsed .lexsidebarcontent div a:not(.lexsidebarentryicon) {
+.lexsidebar.collapsed .lexsidebarentrycontent div, .lexsidebar.collapsed .lexsidebarcontent div a:not(.lexsidebarentryicon) {
     display: none;
 }
 
-.lexsidebar .lexsidebarentry .lexsidebarentrydesc {
-    position: absolute;
-    margin-left: 32px;
-    font-weight: 600;
-    background-color: var(--global-text-primary);
-    color: var(--global-color-primary);
-    font-size: var(--global-font-size-sm);
-    border-radius: 6px;
-    text-align: center;
-    opacity: 0;
-    transform: translate(-12px, 0);
-    z-index: 102;
-    padding: 4px 8px;
-    transition: opacity ease-in 0.15s, transform ease-in 0.15s;
-    pointer-events: none;
-}
-
-.lexsidebar.collapsed .lexsidebarentry:hover .lexsidebarentrydesc {
-   opacity: 1;
-   transform: translate(2px, 0);
-}
-
 .lexsidebar.collapsed .lexsidebarentry:hover {
     display: flex;
  }
@@ -4847,7 +4821,6 @@ ul.lexassetscontent {
 
 /* Code Editor */
 .codebasearea {
-
     display: flex;
     position: relative;
     overflow: inherit;
@@ -4935,20 +4908,25 @@ ul.lexassetscontent {
     z-index: 3;
     bottom: 0px;
     justify-items: end;
+    padding-inline: 1rem;
+}
+
+.lexcodetabinfo .lexinlinewidgets {
+    justify-content: end;
 }
 
 .lexcodegutter {
     width: 48px;
     height: calc(100% - 65px);
     background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
-    margin-top: 28px;
+    margin-top: 31px;
     overflow: hidden;
     position: absolute;
     top: 0;
 }
 
 .lexcodeeditor .codetabsarea {
-    height: calc(100% - 64px) !important;
+    height: calc(100% - 80px) !important;
     background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
     overflow: scroll;
 }
@@ -4980,7 +4958,6 @@ ul.lexassetscontent {
     -moz-osx-font-smoothing: grayscale;
     font-feature-settings: "ss04", "ss05";
     font-size: var(--code-editor-font-size);
-    /* padding-right: 6px; */
     position: relative;
 }
 
@@ -5117,7 +5094,7 @@ ul.lexassetscontent {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    margin-top: 26px;
+    margin-top: 31px;
     z-index: 1 !important;
     right: 0px;
     pointer-events: none;
@@ -5184,7 +5161,7 @@ ul.lexassetscontent {
 
 .lexcodeeditor .searchbox {
     background-color: var(--global-color-secondary);
-    width: 256px;
+    /* width: 256px; */
     position: absolute;
     right: 6px;
     top: 26px;
@@ -5193,8 +5170,9 @@ ul.lexassetscontent {
     border: 1px solid var(--global-color-tertiary);
     box-shadow: 0 0px 4px #101010;
     overflow-y: scroll;
-    transform: translateY(-72px);
-    transition: transform 0.2s ease-in;
+    transform: translateY(-96px);
+    opacity: 0;
+    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
 }
 
 .lexcodeeditor .searchbox.gotoline {
@@ -5203,6 +5181,7 @@ ul.lexassetscontent {
 
 .lexcodeeditor .searchbox.opened {
     transform: translateY(0px);
+    opacity: 1;
 }
 
 .lexcodeeditor .searchbox .lexpanel span {
@@ -5276,6 +5255,10 @@ ul.lexassetscontent {
     border: 2px solid var(--global-color-primary);
 }
 
+.lexcodesnippet .lexareatabs.row {
+    border-radius: 0;
+}
+
 .lexcodesnippet .lexwindowbuttons {
     width: 100px;
     padding-inline: 16px;